/* ------------------------------
   Updated Color Scheme
   ------------------------------ */
/* Ye colors website ke sabhi parts mein use honge */
:root {
    --primary-color: #FFC300; /* Halka orange jo yellow ki taraf hai */
    --secondary-color: #fffb10; /* Yellow */
    --dark-color: #000000; /* Kala text */
    --light-gray: #f5f5f5; /* Halka gray color */
    --background-color: #FFFFFF; /* Safed background */
    --font-size-small: 0.875rem; /* Chhota font size */
    --font-size-medium: 1rem; /* Medium font size */
    --font-size-large: 1.25rem; /* Bada font size */
    --font-size-xlarge: 1.5rem; /* Bahut bada font size */
    --navbar-height: 60px; /* Navbar ki unchai */
--gradient-color: linear-gradient(45deg, #FFA500, #FFD700, #FFA500);
 /* Orange-Yellow-Orange gradient */
    
    /* Reusability ke liye aur variables */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Sabhi text ke liye font */
    --border-radius: 0.3125rem; /* 5px ka gol border */
    --box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* Shadow effect */
}

/* ------------------------------
   Global Reset
   ------------------------------ */
/* Sare elements ke liye margin aur padding reset karo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Box ke andar ke cheezein sahi se set hon */
}

/* ------------------------------
   Prevent Horizontal Overflow
   ------------------------------ */
/* Page ka horizontal scroll na aaye */
html, body {
    overflow-x: hidden;
}

/* ------------------------------
   Body Styling
   ------------------------------ */
/* Body ke liye styling set karo */
body {
    background-color: var(--background-color); /* Safed background */
    color: var(--dark-color); /* Kala text */
    font-family: var(--font-family); /* Text ka font */
    font-weight: bold; /* Text ko bold banao */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Pura height le */
    padding-top: var(--navbar-height); /* Navbar ke upar content na chhupe */
    padding-bottom: 70px; /* Bottom nav ke neeche content na chhupe */
    overflow-x: hidden; /* Horizontal overflow hide karo */
}

/* ------------------------------
   Blinking Website Name Styling
   ------------------------------ */
/* Fixed Header Styling */
.fixed-header {
    position: fixed; /* Header hamesha upar rahega */
    top: 0;
    left: 0;
    width: 100%; /* Puri width le */
    z-index: 1001; /* Dusre elements se upar rahe */
    background: #ffffff; /* White background for the header */
    border-bottom: 1px solid #ddd; /* Neeche border */
}

/* Scrolling Information Line Styling */
.info-line {
    background: #1A1A1D; /* White background */
    color: white; /* Black text */
    padding: 0.4rem 0; /* Thoda padding */
    overflow: hidden; /* Overflow hide karo */
    border-bottom: 1px solid #ddd; /* Neeche border */
}

.marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap; /* Text ek line mein rahe */
    box-sizing: border-box;
    width: 100%;
    align-items: center; /* Text ko center karo vertically */
}

.marquee p {
    display: inline-block;
    animation: marquee-scroll 60s linear infinite; /* Text ko scroll karne ka animation */
    margin: 0; /* Margin hatao */
    padding-left: 100%; /* Start position */
    font-size: 1.2rem; /* Thoda bada font size */
    color: #000; /* Black text */
}

/* Scrolling Animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(100%); /* Start off-screen */
    }
    100% {
        transform: translateX(-100%); /* End off-screen */
    }
}

/* "1x-satta" Blinking Header Styling */

/* Blinking header ke liye styles */
.blinking-website-name {
    text-align: center; /* Center align karo */
    padding: 1.5rem; /* Thoda padding */
    background: var(--gradient-color); /* Gradient background */
    color: #000; /* Black text */
}

.blinking-text {
    animation: blink 2s ease-in-out infinite; /* Blinking animation */
    color: #000; /* Black text */
    text-decoration: none; /* Underline hatao */
    font-size: 2rem; /* Bada font size */
    font-weight: bold; /* Bold text */
    opacity: 1; /* Full opacity */
}

/* Blinking Animation with Opacity */
@keyframes blink {
    00%, 100% {
        opacity: 1; /* Full visible */
    }
    50% {
        opacity: 0.10; /* Thoda transparent */
    }
}

/* Responsive Adjustments for Smaller Screens */
/* Chote screens ke liye adjustments */
@media (max-width: 768px) {
    .blinking-website-name {
        padding: 2rem; /* Thoda zyada padding */
    }

    .blinking-text {
        font-size: 6rem; /* Bada text size tablets aur small screens ke liye */
    }
}

@media (max-width: 480px) {
    .blinking-website-name {
        padding: 1.5rem; /* Phones ke liye padding */
    }

    .blinking-text {
        font-size: 8rem; /* Phones ke liye aur bhi bada text */
    }
}

/* Prevent Content Overlap with Fixed Header */
body {
    padding-top: 12rem; /* Fixed header ke neeche content na chhupe */
}

/* ------------------------------
   Container Styling
   ------------------------------ */
/* Full Width for Container */
.container,
.container-fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
}

/* Prevent content from being hidden under the fixed header */
body {
    padding-top: 5rem; /* Fixed header ke hisaab se padding set karo */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .blinking-website-name {
        font-size: 2.5rem; /* Mobile par font size kam karo */
        padding: 0.3rem 0.5rem; /* Thoda padding adjust karo */
    }

    .blinking-text {
        font-size: clamp(1.5rem, 3vw, 2rem); /* Responsive font size */
    }

    body {
        padding-top: 5rem; /* Agar header height change hota hai toh adjust karo */
    }
}

/* Respect user preference for reduced motion */
/* Agar user motion kam chahte hain */
@media (prefers-reduced-motion: reduce) {
    .blinking-text {
        animation: none;
        opacity: 1;
    }
}

/* ------------------------------
   Hero Section Styling
   ------------------------------ */
/* Hero section ke liye styles */
.hero {
    background-color: #1A1A1D; /* black background */
    color: var(--dark-color); /* Black text */
    padding: calc(0.5rem + var(--navbar-height)) 0 1.5rem 0; /* Padding navbar height ke hisaab se */
    text-align: center; /* Center align karo */
    width: 100%;
    font-weight: bold; /* Bold text */
    flex: 1; /* Main content ko grow karo */
}

.hero-content {
    max-width: 75rem; /* 1200px ka max width */
    margin: 0 auto; /* Center align karo */
    width: 100%;
}

/* Current Time Section */
#current-time {
    color: var(--primary-color); /* Halka orange text */
    font-size: var(--font-size-large); /* Bada font size */
    margin-bottom: 1rem; /* Neeche space */
}

/* Game Name in Hero Section */
.hero .game-name {
    font-size: 2.5rem; /* Bada text */
    font-weight: bold; /* Bold text */
    margin-bottom: 1rem; /* Neeche space */
    color:white;
}

/* Result Value in Hero Section */
.hero .hero-result {
    font-size: 2.25rem; /* Bada text */
    font-weight: bold; /* Bold text */
    color: white;
    text-align: center; /* Center align */
}

/* Promotional Hindi Text */
.hero h2 {
    color: white;
    margin-bottom: 1.5rem; /* Neeche space */
}
.hero-game .card {
    background-color: #1A1A1D; /* Card ka background black */
    color: white; /* Text color white for readability */
    border-radius: 0.5rem; /* Thoda rounded corners */
    padding: 1rem; /* Card ke andar padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Thoda shadow for better look */
}

.hero-game .game-name, .hero-game .game-result {
    color: white; /* Ensure text color is white */
}

.hero-game .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero-game .btn-primary {
    background-color: gray; /* Button ka background color (Orange) */
    color: white; /* Button text color */
    border: none; /* Border ko remove kare */
    padding: 0.5rem 1rem; /* Padding adjust kare */
    font-size: 1rem; /* Font size */
    border-radius: 0.25rem; /* Rounded corners */
    transition: background-color 0.3s ease; /* Hover effect smooth transition */
}

.hero-game .btn-primary:hover {
    background-color: #e64a19; /* Button ka hover background color */
    color: #fff; /* Hover par text white rahe */
}

/* ------------------------------
   Games Results Table Styling
   ------------------------------ */
/* Games Results Table ke liye styles */
.games-results-table .highlight {
    color: black !important; /* Black color */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center align */
    display: block; /* Full width le */
}

.games-results-table {
    table-layout: auto;
    margin-bottom: 0;
    border-collapse: collapse;
    width: 100%;
    color: var(--dark-color); /* Black text */
    border: 0.125rem solid var(--dark-color); /* 2px border */
}

.games-results-table th,
.games-results-table td {
    padding: 0.75rem; /* 12px padding */
    border: 0.0625rem solid var(--dark-color); /* 1px border */
    text-align: center; /* Center align */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    vertical-align: middle; /* Middle align vertically */
}

.games-results-table th {
    background: #1A1A1D; /* Gradient background */
    color: white; /* Black text */
}

.games-results-table td {
    color: var(--dark-color); /* Black text */
}

/* Hover effect on table rows */
/* Jab mouse table row par aayega, color change hoga */
.games-results-table tbody tr {
    background-color: var(--background-color); /* Safed background */
}

.games-results-table tbody tr:hover {
    background-color: var(--light-gray); /* Halka gray background */
}

/* Centering content within result cells */
/* Result cells mein content ko center karo */
.result-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Highlight the First Column Data Cells */
/* Pehle column ko highlight karo */
.games-results-table td:first-child {
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
    vertical-align: top;
    border: 0.0625rem solid var(--dark-color); /* 1px border */
}

/* Customized "Record Chart" Link */
/* Record Chart link ko customize karo */
.record-chart-link {
    font-size: 0.75rem; /* 12px font size */
    color: var(--dark-color); /* Black color */
    text-decoration: underline; /* Underline add karo */
}

.record-chart-link i {
    margin-right: 0.025rem; /* 2px space right */
}

/* Star Image Centering */
/* Star image ko center karo */
.star-image {
    max-width: 100%;
    height: auto;
}

/* ------------------------------
   Special Section for Game ID 11 Styling
   ------------------------------ */
/* Game ID 11 ke special section ke liye styles */
.sattadividerr {
    padding: 2.00rem 0; /* 20px top-bottom padding */
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
    position: relative;
    z-index: 1;
}

.sattadividerr h4 {
    font-size: 1.5rem; /* 24px font size */
    text-transform: uppercase; /* Sab letters capital */
    margin: 0;
    padding: 0;
}

.sattadividerr p {
    font-size: 1.025rem; /* 18px font size */
}

.sattadividerr strong {
    font-size: 1.25rem; /* 20px font size */
    letter-spacing: 0.125rem; /* 2px spacing */
}

/* ------------------------------
   Yearly Record Chart Heading Styling
   ------------------------------ */
/* Yearly Record Chart ke heading ke liye styles */
.result-chart-heading {
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
    padding: 0.9375rem; /* 15px padding */
    border-radius: var(--border-radius); /* Rounded corners */
    text-align: center; /* Center align */
    font-size: clamp(1.2rem, 3vw, 2rem); /* Responsive font size */
    margin-bottom: 1.25rem; /* 20px bottom margin */
    white-space: normal;
}

/* ------------------------------
   Accordion Adjustments
   ------------------------------ */
/* Accordion buttons ke liye styles */
.accordion-button {
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
}

.accordion-button:not(.collapsed) {
    background-color: #e6c200; /* Thoda different color jab open ho */
    color: var(--dark-color); /* Black text */
}

.accordion-body {
    background-color: var(--light-gray); /* Halka gray background */
    color: var(--dark-color); /* Black text */
}

/* ------------------------------
   Responsive Images
   ------------------------------ */
/* Images ko responsive banao */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Ensure tables are responsive and do not break layout */
/* Tables ko responsive banao taaki mobile par bhi sahi dikhe */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Hide overflow for marquee */
/* Marquee ke liye overflow hide karo */
.marquee-container {
    overflow: hidden;
}

/* ------------------------------
   Smooth Scroll Behavior
   ------------------------------ */
/* Page ko smooth scroll karo */
html {
    scroll-behavior: smooth;
}

/* ------------------------------
   Fixed-Bottom Navigation Buttons Styling
   ------------------------------ */

/* Fixed-Bottom Navigation ke liye styles */
.fixed-bottom-nav {
    position: fixed; /* Hamesha screen ke neeche rahe */
    bottom: 0;
    width: 100%; /* Puri width le */
    background-color: #ffffff; /* White background */
    border-top: 1px solid #ddd; /* Upar border */
    padding: 10px 0; /* Padding top-bottom */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect */
    z-index: 1000; /* Dusre elements se upar rahe */
    display: flex;
    flex-direction: row; /* Row mein buttons rakho */
    justify-content: space-around; /* Buttons ko evenly distribute karo */
    align-items: center;
    white-space: nowrap; /* Text ek line mein rahe */
    overflow-x: auto; /* Agar zarurat ho toh horizontal scroll allow karo */
    
    /* Scrollbar Hiding */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.fixed-bottom-nav::-webkit-scrollbar {
    display: none; /* Scrollbar hide karo */
}

/* Navigation Button Styling */
/* Buttons ko style karo */
.fixed-bottom-nav .nav-btn {
    color: #ffffff; /* Text color white */
    text-decoration: none; /* Underline hatao */
    font-size: 0.75rem; /* 12px font size */
    display: flex;
    flex-direction: column; /* Icon aur label ko column mein rakho */
    align-items: center;
    background-color: #007bff; /* Default button color */
    border-radius: 8px; /* Rounded corners */
    padding: 8px 12px; /* Padding */
    flex-shrink: 0; /* Shrink na ho */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Home Button Specific Styling */
/* Home button ko alag se style karo */
.fixed-bottom-nav .home-btn {
    background-color: #28a745; /* Green color */
    padding: 19px 19px; /* Zyada padding */
    font-size: 0.85rem; /* Thoda bada font size */
}

.fixed-bottom-nav .home-btn i {
    font-size: 1.75rem; /* Bada icon */
}

.fixed-bottom-nav .home-btn .btn-label {
    font-size: 0.85rem; /* Bada label size */
}

/* Hover Effect for All Buttons */
/* Jab mouse button par aayega, color change hoga */
.fixed-bottom-nav .nav-btn:hover {
    background-color: #0056b3; /* Darker blue */
    color: #ffffff; /* White text */
}

/* Hover Effect for Home Button */
/* Home button hover par alag color */
.fixed-bottom-nav .home-btn:hover {
    background-color: #218838; /* Darker green */
}

/* Active Button Styling */
/* Active button ko highlight karo */
.fixed-bottom-nav .nav-btn.active {
    color: #ffffff; /* White text */
    border-bottom: 2px solid #ffffff; /* Underline */
}

/* Responsive Adjustments for Landscape Orientation */
/* Landscape mode mein buttons ko adjust karo */
@media (max-width: 768px) and (orientation: landscape) {
    .fixed-bottom-nav {
        padding: 8px 0;
    }

    .fixed-bottom-nav .nav-btn i {
        font-size: 1.25rem; /* Icon size kam karo */
    }

    .fixed-bottom-nav .btn-label {
        font-size: 0.7rem; /* Label size kam karo */
    }

    .fixed-bottom-nav .home-btn {
        padding: 19px 19px; /* Slightly reduce padding */
        font-size: 0.8rem; /* Font size kam karo */
    }

    .fixed-bottom-nav .home-btn i {
        font-size: 1.5rem; /* Icon size kam karo */
    }

    .fixed-bottom-nav .home-btn .btn-label {
        font-size: 0.8rem; /* Label size kam karo */
    }
}

/* Responsive Adjustments for Very Small Screens */
/* Bahut chote screens ke liye buttons ko adjust karo */
@media (max-width: 426px) {
    .fixed-bottom-nav .btn-label {
        display: none; /* Labels hide karo */
    }

    .fixed-bottom-nav .nav-btn i {
        font-size: 1.25rem; /* Icon size kam karo */
    }
}

/* Optional: Additional Button Styling */
/* Buttons ke liye aur styles */
.fixed-bottom-nav .nav-btn {
    min-width: 50px; /* Choti minimum width set karo */
}

/* Optional: Icon Hover Animation */
/* Icon par hover karne par animation */
.fixed-bottom-nav .nav-btn i {
    transition: transform 0.3s ease;
}

.fixed-bottom-nav .nav-btn:hover i {
    transform: scale(1.2); /* Icon ko bada karo hover par */
}

/* ------------------------------
   Additional Section Styling
   ------------------------------ */

/* Agents' Cards Styling */
/* Agents aur agents2 section ke cards ko style karo */
#agents .service-card,
#agents2 .service-card {
    background: white(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
}

/* Additional Styles for Headings */
/* Headings ko style karo */
.heading-box {
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
    border-radius: 0.5rem; /* Rounded corners */
    border: 0.125rem solid var(--dark-color); /* Border */
    display: inline-block;
    width: 100%;
    text-transform: uppercase; /* Capital letters */
    font-weight: bold; /* Bold text */
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.heading-box h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem; /* 24px font size */
}

/* ------------------------------
   Responsive Text Adjustments
   ------------------------------ */

/* Base font size for desktop and tablet */
/* Desktop aur tablet ke liye base font size */
.result-chart-heading,
.games-results-table th,
.games-results-table td {
    font-size: 1.25rem;
}

/* For mobile devices (less than 768px) */
/* Mobile devices ke liye adjustments */
@media (max-width: 767px) {
    /* Adjust Navbar Brand Font Size */
    .blinking-website-name {
        font-size: 2rem; /* Font size kam karo mobile par */
        padding: 0.3rem 0.6rem; /* Padding adjust karo */
    }

    .blinking-text {
        font-size: clamp(1.5rem, 3vw, 2.5rem); /* Responsive font size */
    }

    /* Result chart heading ki font size adjust karo */
    .result-chart-heading {
        font-size: 1.1rem;
    }

    /* Table headers ki font size adjust karo */
    .games-results-table th {
        font-size: 0.9rem;
    }

    /* Table cells ki font size adjust karo */
    .games-results-table td {
        font-size: 0.9rem;
    }

    /* Optional: Mobile par button ki font size adjust karo */
    .btn {
        font-size: 0.9rem;
    }

    /* Blogs section mein heading ki font size adjust karo */
    .result-chart-heading {
        font-size: 1rem;
    }
}

/* ------------------------------
   Blinking Text Hover Pause
   ------------------------------ */
/* Jab navbar brand par hover kare, blinking pause ho jaye */
.navbar-brand:hover .blinking-text {
    animation-play-state: paused;
}

/* ------------------------------
   Accessibility: Focus States
   ------------------------------ */
/* Jab elements focus ho, outline dikhe */
.navbar-brand:focus .blinking-text,
.fixed-bottom-nav .nav-btn:focus .btn-label,
.language-menu .lang-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ------------------------------
   Footer Styling
   ------------------------------ */
/* Footer ke liye styles */
footer {
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
    padding: 1.25rem 0; /* 20px top-bottom padding */
    text-align: center; /* Center align */
    margin-top: 2.5rem; /* 40px top margin */
    width: 100%;
    font-size: 0.9rem; /* 14px font size */
}

footer p {
    font-size: 0.9rem; /* 14px font size */
}

/* ------------------------------
   Highlight Class
   ------------------------------ */
/* Highlight class ko style karo */
.result-number {
    font-size: 1.3em; /* Bada font size */
    margin: 0 10px; /* Result ke beech mein thoda space */
}

.highlight {
    color: var(--primary-color); /* Halka orange color */
    font-size: 1.3em; /* Bada font size */
}

/* ------------------------------
   Responsive Images
   ------------------------------ */
/* Images ko responsive banao */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ------------------------------
   Ensure tables are responsive and do not break layout
   ------------------------------ */
/* Tables ko responsive banao taaki layout break na ho */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* ------------------------------
   Additional Utilities
   ------------------------------ */
/* Marquee container ke liye overflow hide karo */
.marquee-container {
    overflow: hidden;
}

/* Optional: Smooth scroll behavior */
/* Page ko smooth scroll karo */
html {
    scroll-behavior: smooth;
}


/* ------------------------------
   Fixed-Bottom Navigation Buttons Styling
------------------------------ */

/* Fixed-Bottom Navigation Styles */
.fixed-bottom-nav {
    position: fixed; /* Always stays at the bottom */
    bottom: 0;
    width: 100%; /* Full width */
    background-color: transparent; /* Transparent background */
    border-top: none; /* No top border */
    padding: 5px 0; /* Top and bottom padding */
    box-shadow: none; /* No shadow */
    z-index: 1000; /* Above other elements */
    display: flex;
    flex-direction: row; /* Arrange buttons in a row */
    justify-content: space-around; /* Evenly distribute buttons */
    align-items: center;
    white-space: nowrap; /* Keep text on one line */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Hide Scrollbar */
.fixed-bottom-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

/* Navigation Button Styling */
.fixed-bottom-nav .nav-btn {
    color: #FFA500; /* Text and icon color: Yellow */
    text-decoration: none; /* Remove underline */
    font-size: 0.75rem; /* 12px font size */
    display: flex;
    flex-direction: column; /* Arrange icon and label vertically */
    align-items: center;
    background-color: #1A1A1D; /* Black background */
    border-radius: 8px; /* Rounded corners */
    padding: 8px 12px; /* Padding */
    flex-shrink: 0; /* Prevent shrinking */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
    min-width: 50px; /* Set minimum width */
}

/* Ensure Icons Remain Visible */
.fixed-bottom-nav .nav-btn i {
    color: #FFA500; /* Icon color same as text (Yellow) */
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

/* Home Button Specific Styling */
.fixed-bottom-nav .home-btn {
    background-color: #1A1A1D; /* Changed to Black background */
    padding: 19px 19px; /* Retain increased padding */
    font-size: 0.85rem; /* Slightly larger font size */
}

.fixed-bottom-nav .home-btn i {
    font-size: 1.75rem; /* Larger icon */
    color: #FFA500; /* Changed to Yellow color for the Home icon */
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

/* Active Button Styling */
/* Remove persistent active state styles */
.fixed-bottom-nav .nav-btn.active {
    /* No persistent color or border changes */
    /* Optionally, add a subtle indicator */
    border-bottom: 2px solid #FFA500; /* Optional: Underline with original color */
}

/* Prevent Active State from Changing Icon Colors */
.fixed-bottom-nav .home-btn.active i {
    color: #FFA500; /* Maintain Yellow icon */
}

/* :active Pseudo-Class for Click Feedback */
/* Change color only while the button is being clicked */
.fixed-bottom-nav .nav-btn:active {
    background-color: #FFC107; /* Darker Yellow background on click */
    color: #000000; /* Change text color to Black on click */
}

.fixed-bottom-nav .nav-btn:active i {
    color: #000000; /* Change icon color to Black on click */
}

.fixed-bottom-nav .home-btn:active {
    background-color: #FFB300; /* Darker Yellow for Home button on click */
    transform: translateY(1px); /* Slight push effect */
}

.fixed-bottom-nav .home-btn:active i {
    color: #ffd800; /* Maintain Yellow icon on click */
}

/* Remove Default Focus Outline (Optional) */
/* If you prefer custom focus styles, you can remove default outlines */
.fixed-bottom-nav .nav-btn:focus,
.fixed-bottom-nav .home-btn:focus {
    outline: none; /* Remove default outline */
}

/* Custom Focus States for Accessibility */
.fixed-bottom-nav .nav-btn:focus {
    outline: 2px solid #000000; /* Black outline */
    outline-offset: 2px;
}


/* Responsive Adjustments for Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .fixed-bottom-nav {
        padding: 8px 0;
    }

    .fixed-bottom-nav .nav-btn i {
        font-size: 1.25rem; /* Reduce icon size */
    }

    .fixed-bottom-nav .btn-label {
        font-size: 0.7rem; /* Reduce label size */
    }

    .fixed-bottom-nav .home-btn {
        padding: 19px 19px; /* Slightly reduce padding */
        font-size: 0.8rem; /* Reduce font size */
    }

    .fixed-bottom-nav .home-btn i {
        font-size: 1.5rem; /* Reduce icon size */
    }

    .fixed-bottom-nav .home-btn .btn-label {
        font-size: 0.8rem; /* Reduce label size */
    }
}

/* Responsive Adjustments for Very Small Screens */
@media (max-width: 426px) {
    .fixed-bottom-nav .btn-label {
        display: none; /* Hide labels */
    }

    .fixed-bottom-nav .nav-btn i {
        font-size: 1.25rem; /* Reduce icon size */
    }
}


.fixed-bottom-nav .nav-btn:hover i {
    transform: scale(1.2); /* Enlarge icon on hover */
}

/* Disable Hover Effects on Touch Devices */
@media (hover: hover) and (pointer: fine) {
    /* Hover Effect for All Buttons */
    .fixed-bottom-nav .nav-btn:hover {
        background-color: #FFC107; /* Darker Yellow background on hover */
        color: #000000; /* Change text color to Black on hover */
    }

    /* Hover Effect for Home Button */
    .fixed-bottom-nav .home-btn:hover {
        background-color: #333333; /* Slightly lighter black or dark gray */
        /* Icon remains Yellow */
    }
}

/* Active State for Touch Devices */
.fixed-bottom-nav .nav-btn:active {
    background-color: #FFD700; /* Maintain Yellow background on tap */
    transform: translateY(1px); /* Slight push effect */
}

.fixed-bottom-nav .home-btn:active {
    background-color: #FFD700; /* Maintain Yellow background on tap */
    transform: translateY(1px); /* Slight push effect */
    /* Icon remains Yellow */
}




/* ------------------------------
   Additional Section Styling
   ------------------------------ */

/* Agents' Cards Styling */
/* Agents aur agents2 section ke cards ko style karo */
#agents .service-card,
#agents2 .service-card {
    background: white(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
}

/* Additional Styles for Headings */
/* Headings ko style karo */
.heading-box {
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
    border-radius: 0.5rem; /* Rounded corners */
    border: 0.125rem solid var(--dark-color); /* Border */
    display: inline-block;
    width: 100%;
    text-transform: uppercase; /* Capital letters */
    font-weight: bold; /* Bold text */
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.heading-box h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem; /* 24px font size */
}

/* ------------------------------
   Responsive Text Adjustments
   ------------------------------ */

/* Base font size for desktop and tablet */
/* Desktop aur tablet ke liye base font size */
.result-chart-heading,
.games-results-table th,
.games-results-table td {
    font-size: 1.25rem;
}

/* For mobile devices (less than 768px) */
/* Mobile devices ke liye adjustments */
@media (max-width: 767px) {
    /* Adjust Navbar Brand Font Size */
    .blinking-website-name {
        font-size: 2rem; /* Font size kam karo mobile par */
        padding: 0.3rem 0.6rem; /* Padding adjust karo */
    }

    .blinking-text {
        font-size: clamp(1.5rem, 3vw, 2.5rem); /* Responsive font size */
    }

    /* Result chart heading ki font size adjust karo */
    .result-chart-heading {
        font-size: 1.1rem;
    }

    /* Table headers ki font size adjust karo */
    .games-results-table th {
        font-size: 0.9rem;
    }

    /* Table cells ki font size adjust karo */
    .games-results-table td {
        font-size: 0.9rem;
    }

    /* Optional: Mobile par button ki font size adjust karo */
    .btn {
        font-size: 0.9rem;
    }

    /* Blogs section mein heading ki font size adjust karo */
    .result-chart-heading {
        font-size: 1rem;
    }
}

/* ------------------------------
   Blinking Text Hover Pause
   ------------------------------ */
/* Jab navbar brand par hover kare, blinking pause ho jaye */
.navbar-brand:hover .blinking-text {
    animation-play-state: paused;
}

/* ------------------------------
   Accessibility: Focus States
   ------------------------------ */
/* Jab elements focus ho, outline dikhe */
.navbar-brand:focus .blinking-text,
.fixed-bottom-nav .nav-btn:focus .btn-label,
.language-menu .lang-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ------------------------------
   Footer Styling
   ------------------------------ */
/* Footer ke liye styles */
footer {
    background: var(--gradient-color); /* Gradient background */
    color: var(--dark-color); /* Black text */
    padding: 1.25rem 0; /* 20px top-bottom padding */
    text-align: center; /* Center align */
    margin-top: 2.5rem; /* 40px top margin */
    width: 100%;
    font-size: 0.9rem; /* 14px font size */
}

footer p {
    font-size: 0.9rem; /* 14px font size */
}

/* ------------------------------
   Highlight Class
   ------------------------------ */
/* Highlight class ko style karo */
.result-number {
    font-size: 1.3em; /* Bada font size */
    margin: 0 10px; /* Result ke beech mein thoda space */
}

.highlight {
    color: var(--primary-color); /* Halka orange color */
    font-size: 1.3em; /* Bada font size */
}

/* ------------------------------
   Responsive Images
   ------------------------------ */
/* Images ko responsive banao */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ------------------------------
   Ensure tables are responsive and do not break layout
   ------------------------------ */
/* Tables ko responsive banao taaki layout break na ho */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* ------------------------------
   Additional Utilities
   ------------------------------ */
/* Marquee container ke liye overflow hide karo */
.marquee-container {
    overflow: hidden;
}

/* Optional: Smooth scroll behavior */
/* Page ko smooth scroll karo */
html {
    scroll-behavior: smooth;
}