/* ------------------------------
   Updated Color Scheme
   ------------------------------ */
:root {
    --primary-color: #ffab10; /* Halka orange jo yellow ki taraf hai */
    --secondary-color: #fffb10; /* Yellow */
    --dark-color: #000000; /* Kala text */
    --light-gray: #f5f5f5;
    --background-color: #FFFFFF; /* Safed background */
    --font-size-small: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;
    --navbar-height: 60px; /* Navbar ki unchai */
    --gradient-color: linear-gradient(to right, #ffab10, #fffb10, #ffab10); /* Orange-Yellow-Orange gradient */
    
    /* Reusability ke liye aur variables */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --border-radius: 0.3125rem; /* 5px */
    --box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
}

/* ------------------------------
   Global Reset
   ------------------------------ */
/* Sare elements ke liye margin aur padding reset karo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------
   Prevent Horizontal Overflow
   ------------------------------ */
html, body {
    overflow-x: hidden;
}

/* ------------------------------
   Body Styling
   ------------------------------ */
body {
    background-color: var(--background-color); /* Safed background */
    color: var(--dark-color); /* Kala text */
    font-family: var(--font-family);
    font-weight: bold; /* Bold font */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--navbar-height); /* Fixed navbar ke peeche content na chhupe */
    padding-bottom: 70px; /* Fixed bottom nav ke peeche content na chhupe */
    overflow-x: hidden; /* Horizontal overflow hide karo */
}
/* ------------------------------
   Blinking Website Name Styling
   ------------------------------ */
/* Fixed Header Styling */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001; /* Ensure it's above other elements */
    background: #ffffff; /* White background for the header */
    border-bottom: 1px solid #ddd; /* Optional border for separation */
}

/* Scrolling Information Line Styling */
.info-line {
    background: #ffffff; /* White background for information line */
    color: #000; /* Black text */
    padding: 0.4rem 0; /* Inner spacing */
    overflow: hidden; /* Hide overflow for scrolling effect */
    border-bottom: 1px solid #ddd; /* Optional border below */
}

.marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
    align-items: center; /* Vertically center the text */
}

.marquee p {
    display: inline-block;
    animation: marquee-scroll 60s linear infinite; /* Slower scroll duration */
    margin: 0; /* Remove default margin */
    padding-left: 100%; /* Ensure smooth scrolling starts outside the view */
    font-size: 1.2rem; /* Adjust font size for better readability */
    color: #000; /* Black text for better contrast */
}

/* 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-website-name {
    text-align: center;
    padding: 1.5rem; /* Larger padding for a bigger box */
    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; /* Remove underline */
    font-size: 2rem; /* Increase text size */
    font-weight: bold; /* Make text bold for better visibility */
    opacity: 1; /* Default full opacity */
}

/* Blinking Animation with Opacity */
@keyframes blink {
    00%, 100% {
        opacity: 1; /* Fully visible */
    }
    50% {
        opacity: 0.10; /* Semi-transparent at midpoint */
    }
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 768px) {
    .blinking-website-name {
        padding: 2rem; /* Adjust box padding for better appearance */
    }

    .blinking-text {
        font-size: 6rem; /* Larger text size for tablets and small screens */
    }
}

@media (max-width: 480px) {
    .blinking-website-name {
        padding: 1.5rem; /* Smaller padding for phones */
    }

    .blinking-text {
        font-size: 8rem; /* Even larger text size for smaller screens */
    }
}


/* Prevent Content Overlap with Fixed Header */
body {
    padding-top: 12rem; /* Adjust based on total height of fixed header */
}




/* ------------------------------
   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; /* Adjust based on the actual height of the fixed header */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .blinking-website-name {
        font-size: 2.5rem; /* Reduce font size on smaller screens */
        padding: 0.3rem 0.5rem; /* Adjust padding */
    }

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

    body {
        padding-top: 5rem; /* Adjust padding if header height changes */
    }
}

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



/* ------------------------------
   Hero Section Styling
   ------------------------------ */
.hero {
    background-color: var(--background-color); /* Safed background */
    color: var(--dark-color); /* Kala text */
    padding: calc(0.5rem + var(--navbar-height)) 0 1.5rem 0; /* Top padding navbar height ke hisaab se adjust karo */
    text-align: center;
    width: 100%;
    font-weight: bold;
    flex: 1; /* Main content ko grow karne do */
}

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

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

/* Game Name in Hero Section */
.hero .game-name {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.0rem;
}

/* Result Value in Hero Section */
.hero .hero-result {
    font-size: 2.25rem;
    font-weight: bold;
    color: var(--dark-color) !important; /* Black color */
    text-align: center; /* Center text */
}

/* Promotional Hindi Text */
.hero h2 {
    color: var(--dark-color); /* Kala text */
    margin-bottom: 1.5rem; /* Heading ke neeche space */
}

/* ------------------------------
   Games Results Table Styling
   ------------------------------ */
/* Games Results Section */
.games-results-table .highlight {
    color: black !important;
    font-weight: bold;
    text-align: center; /* Text center karo */
    display: block; /* Full width lene ke liye */
}

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

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

.games-results-table th {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
}

.games-results-table td {
    color: var(--dark-color);
}

/* Hover effect on table rows */
.games-results-table tbody tr {
    background-color: var(--background-color);
}

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

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

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

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

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

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


/* ------------------------------
   Special Section for Game ID 11 Styling
   ------------------------------ */
.sattadividerr {
    padding: 2.00rem 0; /* 20px 0 */
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
    position: relative;
    z-index: 1;
}

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

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

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

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

/* ------------------------------
   Accordion Adjustments
   ------------------------------ */
.accordion-button {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
}

.accordion-button:not(.collapsed) {
    background-color: #e6c200;
    color: var(--dark-color);
}

.accordion-body {
    background-color: var(--light-gray);
    color: var(--dark-color);
}

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

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

/* Hide overflow for marquee */
.marquee-container {
    overflow: hidden;
}

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

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

/* Fixed-Bottom Navigation Styles */
.fixed-bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    padding: 10px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: row; /* Ensure row direction */
    justify-content: space-around; /* Evenly distribute buttons */
    align-items: center;
    white-space: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if necessary */
    
    /* Scrollbar Hiding */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

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

/* Navigation Button Styling */
.fixed-bottom-nav .nav-btn {
    color: #ffffff; /* Text color white */
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #007bff; /* Default button color */
    border-radius: 8px; /* Rounded corners */
    padding: 8px 12px; /* Adjust padding */
    flex-shrink: 0; /* Prevent shrinking */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Home Button Specific Styling */
.fixed-bottom-nav .home-btn {
    background-color: #28a745; /* Green color for Home button */
    padding: 19px 19px; /* Increased padding */
    font-size: 0.85rem; /* Increased font size */
}

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

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

/* Hover Effect for All Buttons */
.fixed-bottom-nav .nav-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
    color: #ffffff; /* Ensure text remains white */
}

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

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

/* 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; /* Slightly reduce font size */
    }

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

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

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

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

/* Optional: Additional Button Styling */
.fixed-bottom-nav .nav-btn {
    min-width: 50px; /* Set a smaller minimum width */
}

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

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




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

/* Agents' Cards Styling */
#agents .service-card,
#agents2 .service-card {
    background: white(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
}

/* Additional Styles for Headings */
.heading-box {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
    border-radius: 0.5rem;
    border: 0.125rem solid var(--dark-color);
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
}

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

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

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

/* For mobile devices (less than 768px) */
@media (max-width: 767px) {
    /* Adjust Navbar Brand Font Size */
    .blinking-website-name {
        font-size: 2rem; /* Reduce font size for mobile */
        padding: 0.3rem 0.6rem; /* Adjust padding */
    }

    .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
   ------------------------------ */
.navbar-brand:hover .blinking-text {
    animation-play-state: paused;
}

/* ------------------------------
   Accessibility: Focus States
   ------------------------------ */
.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 {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
    padding: 1.25rem 0; /* 20px 0 */
    text-align: center;
    margin-top: 2.5rem; /* 40px */
    width: 100%;
    font-size: 0.9rem;
}

footer p {
    font-size: 0.9rem;
}

/* ------------------------------
   Highlight Class
   ------------------------------ */
.result-number {
    font-size: 1.3em; /* फॉन्ट साइज़ बढ़ाएं */
    margin: 0 10px; /* परिणाम के बीच में थोड़ी जगह रखें */
}


.highlight {
    color: var(--primary-color); /* Halka orange */
    font-size: 1.3em; /* आप इसे अपनी आवश्यकता के अनुसार बढ़ा या घटा सकते है
}

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

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

/* ------------------------------
   Additional Utilities
   ------------------------------ */
/* Hide overflow for marquee */
.marquee-container {
    overflow: hidden;
}

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