/* General Styles */
        :root {
            --primary-green: #1a531a;
            /* Dark green from the image */
            --light-green: #2ecc71;
            /* Lighter green for accents */
            --bg-light: #f8f9fa;
        }

        body {
            font-family: Arial, sans-serif;
            overflow-x: hidden;
            /* Prevent horizontal scroll from marquee */
        }

        /* 1. Top News Marquee */
        .top-marquee {
            background-color: var(--primary-green);
            color: #ffffff;
            font-size: 0.85rem;
            padding: 5px 0;
            white-space: nowrap;
        }

        .marquee-content {
            display: inline-block;
            animation: marquee 30s linear infinite;
            padding-left: 100%;
        }

        .marquee-content span {
            margin-right: 30px;
        }

        @keyframes marquee {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(-100%, 0);
            }
        }

        .price-up {
            color: var(--light-green);
        }

        .price-down {
            color: #e74c3c;
        }

        /* 2. Navbar Styling */
        .navbar-custom {
            background-color: #ffffff;
            padding-top: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            z-index: 1050; /* Higher than hero sections */
        }

/* Ensure the dropdown menu is visible and styled on mobile */
@media (max-width: 991.98px) {
    .navbar-collapse .dropdown-menu {
        border: none;
        text-align: center;
        background-color: #f8f9fa;
        position: static !important; /* Forces it to push content down on mobile */
        float: none;
    }
    
    /* Center the login button and dropdown on mobile */
    .navbar-nav {
        padding-bottom: 15px;
    }
}
        .navbar-logo-left,
        .navbar-logo-right {
            max-height: 70px;
            width: auto;
        }

        .nav-link {
            /* color: #333 !important; */
            color: #1a531a !important;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            margin: 0 10px;
            transition: color 0.3s ease;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary-green) !important;
            border-bottom: 2px solid var(--primary-green);
        }

        .lang-selector {
            border: none;
            color: #333;
            font-weight: 600;
            background: transparent;
        }

        .btn-login {
            border: 2px solid var(--primary-green);
            color: var(--primary-green);
            background: transparent;
            font-weight: 600;
            border-radius: 5px;
            padding: 8px 25px;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        .btn-login:hover {
            background-color: var(--primary-green);
            color: #ffffff;
        }
/* Ensure the dropdown menu is positioned correctly on mobile */
@media (max-width: 991.98px) {
    .navbar-collapse .dropdown-menu {
        border: none;
        text-align: center;
        background-color: #f8f9fa;
    }
}

/* Fix for the Hamburger Icon visibility if the background is very light */
.navbar-toggler {
    border-color: rgba(26, 83, 26, 0.2);
}

.lang-selector:focus {
    box-shadow: none;
    color: var(--primary-green);
}
        /* 3. Hero Carousel Section */
        .hero-carousel .carousel-item {
            height: 70vh;
            min-height: 400px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .hero-carousel .carousel-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }

        .hero-content-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            z-index: 10;
        }

        .hero-text-block {
            color: #ffffff;
            max-width: 700px;
        }

        /* Fix: Bring controls to the front */
        .carousel-control-prev,
        .carousel-control-next {
            z-index: 20 !important;
            /* Higher than the content wrapper's 10 */
        }

        /* Fix: Make sure the indicators are also clickable */
        .carousel-indicators {
            z-index: 21 !important;
        }

        /* Ensure the wrapper doesn't block clicks on the sides */
        .hero-content-wrapper {
            pointer-events: none;
            /* Allows clicks to pass through to buttons */
        }

        /* Re-enable pointer events for the text so you can still select it */
        .hero-text-block {
            pointer-events: auto;
        }

        .market-platform-label {
            background-color: var(--primary-green);
            color: var(--light-green);
            display: inline-block;
            padding: 5px 15px;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 0.8rem;
            margin-bottom: 20px;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            font-weight: 400;
            opacity: 0.9;
        }

        .carousel-indicators [data-bs-target] {
            width: 60px;
            height: 3px;
            background-color: #fff;
            opacity: 0.5;
        }

        .carousel-indicators .active {
            opacity: 1;
        }

        /* 4. Bottom System Maintenance Bar */
        .maintenance-bar {
            background-color: #154615;
            color: #ffffff;
            padding: 10px 0;
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
        }

        .maintenance-content {
            display: inline-block;
            animation: marquee-slow 40s linear infinite;
            padding-left: 100%;
        }

        @keyframes marquee-slow {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(-100%, 0);
            }
        }

        .warning-icon {
            color: #f1c40f;
            margin-right: 10px;
        }

        /* 5. Daily Market Watch Styles (NEW UPDATES) */
        .market-watch-section {
            padding: 60px 0;
            background-color: #fcfcfc;
        }

        .section-title {
            color: var(--primary-green);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .last-updated-text {
            color: #888;
            font-size: 0.9rem;
            margin-bottom: 30px;
        }

        .market-card {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            padding: 20px;
            border: 1px solid #f0f0f0;
        }

        .market-table thead th {
            border: none;
            color: #aaa;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            padding-bottom: 20px;
        }

        .market-table tbody td {
            padding: 20px 10px;
            border-bottom: 1px solid #f8f9fa;
            color: #444;
            font-weight: 500;
        }

        .commodity-name {
            color: var(--primary-green);
            font-weight: 700;
            font-size: 1.1rem;
        }

        .commodity-icon {
            width: 40px;
            height: 40px;
            background-color: #fff5f2;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.2rem;
        }

        .rate-grade-1 {
            font-weight: 800;
            color: #333;
        }

        .rate-grade-2 {
            font-weight: 800;
            color: var(--light-green);
        }

        .btn-catalogue {
            background-color: var(--primary-green);
            color: white;
            padding: 12px 35px;
            border-radius: 6px;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            border: none;
            transition: 0.3s;
        }

        .btn-catalogue:hover {
            background-color: #123d12;
            color: white;
        }

        #map {
            height: 500px;
            width: 100%;
            border-radius: 15px;
            z-index: 1;
        }

        .map-section {
            padding: 60px 0;
            background-color: #fff;
        }

        .map-card {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border: 1px solid #eee;
        }

        .network-label {
            color: var(--primary-green);
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 1px;
            font-size: 0.8rem;
        }

        /* Custom Popup Styling to match image */
        .leaflet-popup-content-wrapper {
            border-radius: 12px;
            padding: 5px;
        }

        .popup-title {
            color: var(--primary-green);
            font-weight: 700;
            margin: 0;
            font-size: 1rem;
        }

        .popup-location {
            color: #888;
            font-size: 0.8rem;
            margin-bottom: 10px;
            display: block;
        }

        .popup-label {
            color: #bbb;
            text-transform: uppercase;
            font-size: 0.65rem;
            font-weight: 700;
            margin-bottom: 2px;
            display: block;
        }

        .popup-collector {
            color: #333;
            font-weight: 600;
            font-size: 0.9rem;
        }

        /* --- Refined Market Volume Section Styles --- */
        .volume-section {
            padding: 100px 0;
            background-color: #ffffff;
        }

        .volume-title {
            color: #1a531a;
            /* Exact green from image */
            font-size: 3rem;
            font-weight: 700;
            font-family: 'Georgia', serif;
            /* Matching the serif-style title */
        }

        .volume-subtitle {
            color: #888;
            font-size: 1.1rem;
            margin-bottom: 20px;
            max-width: 800px;
        }

        .blue-divider {
            width: 80px;
            height: 5px;
            background-color: #0056b3;
            margin: 30px auto 70px;
            border-radius: 5px;
        }

        /* Container Card */
        .volume-card {
            background: #fff;
            border: 1px solid #f0f0f0;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
        }

        /* Control Labels */
        .selection-label {
            color: #bbbbbb;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 15px;
            display: block;
        }

        /* Pill Selectors */
        .category-container {
            background: #f1f3f5;
            border-radius: 12px;
            padding: 6px;
            display: inline-flex;
        }

        .cat-btn {
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.95rem;
            transition: 0.3s;
        }

        .cat-btn.active {
            background: #1a531a;
            color: #fff;
            box-shadow: 0 4px 12px rgba(26, 83, 26, 0.2);
        }

        .cat-btn.inactive {
            background: transparent;
            color: #666;
        }

        /* Commodity Pills */
        .commodity-btn {
            background: #fff;
            border: 2px solid #1a531a;
            /* Green border as seen in Potato */
            color: #1a531a;
            border-radius: 25px;
            padding: 10px 25px;
            font-weight: 700;
            margin: 0 5px;
        }

        .commodity-btn-outline {
            background: #fff;
            border: 1px solid #e0e0e0;
            color: #666;
            border-radius: 25px;
            padding: 10px 25px;
            font-weight: 600;
            margin: 0 5px;
        }

        /* Current View Box */
        .view-info-box {
            background-color: #eef5fb;
            border: 1px solid #dbe9f5;
            border-radius: 12px;
            padding: 15px 25px;
            text-align: left;
            min-width: 200px;
        }

        .view-info-label {
            color: #2c7be5;
            text-transform: uppercase;
            font-size: 0.7rem;
            font-weight: 800;
            display: block;
        }

        .view-info-text {
            color: #1a531a;
            font-weight: 800;
            font-size: 1rem;
        }

        /* Bar Chart Components */
        .chart-title-area {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f5f5f5;
            padding-top: 40px;
            margin-top: 20px;
        }

        .chart-label {
            color: #1a531a;
            font-weight: 700;
            font-size: 1.15rem;
        }

        .bar-container {
            margin-bottom: 30px;
        }

        .bar-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .mandi-name {
            color: #444;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .mandi-val {
            color: #1a531a;
            font-weight: 700;
        }

        .progress-thin {
            height: 14px;
            background-color: #f5f5f5;
            border-radius: 10px;
        }

        /* 4. Market Volume Section Styles */
        .section-title {
            color: var(--primary-green);
            font-family: 'Georgia', serif;
            /* Matching the serif font in image */
            font-weight: 700;
        }

        .market-volume-card {
            background: #ffffff;
            border-radius: 15px;
            border: 1px solid #eef2f6;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        /* Category & Commodity Selection */
        .selection-label {
            font-size: 0.75rem;
            font-weight: 700;
            color: #99aebb;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .category-toggle {
            background: #f1f3f5;
            padding: 6px;
            border-radius: 10px;
            display: inline-flex;
        }

        .btn-cat {
            border: none;
            padding: 10px 25px;
            border-radius: 8px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-cat.active {
            background-color: var(--primary-green);
            color: white;
            box-shadow: 0 4px 12px rgba(26, 83, 26, 0.2);
        }

        .commodity-pill {
            border: 1px solid #dee2e6;
            background: white;
            padding: 8px 25px;
            border-radius: 50px;
            font-weight: 500;
            color: #495057;
            margin: 0 5px;
        }

        .commodity-pill.active {
            border-color: var(--primary-green);
            color: var(--primary-green);
            background: #f0fdf4;
        }

        /* Current View Info Box */
        .current-view-box {
            background-color: #e9f2f9;
            border-radius: 10px;
            padding: 12px 20px;
            text-align: center;
        }

        .current-view-label {
            font-size: 0.7rem;
            color: #5a7d95;
            font-weight: 700;
        }

        .current-view-value {
            color: var(--primary-green);
            font-weight: 700;
        }

        /* Progress Bars */
        .volume-progress-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #444;
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .progress-custom {
            height: 12px;
            background-color: #f1f3f5;
            border-radius: 20px;
            margin-bottom: 25px;
        }

        .progress-bar-green {
            background-color: #1a531a;
        }

        .progress-bar-light-green {
            background-color: #5d8e5d;
        }

        .progress-bar-blue {
            background-color: #005a9c;
        }

        /* Custom Footer Styles */
        .footer-green-bg {
            /* Exact green color from image */
            background-color: #2D6B2D;
            color: #f1f1f1;
            /* Light grayish-white text */
            padding-top: 60px;

            /* 
       This adds the faint background pattern watermark seen in your image. 
       Note: You need to replace 'your-pattern-watermark.svg' with an actual 
       tiled watermark image or remove this rule for a solid green background.
     */
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTAgMGg0MHY0MEgwVjB6bTIwIDIwaDIwdjIwSDIWMjB6TTAgMjBoMjB2MjBIMFYyMHoyMCAwaDIwdjIwSDIwVjB6Ii8+PC9nPjwvZz48L3N2Zz4=');
        }

        #commodityContainer {
            display: flex;
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            /* Hides scrollbar on Firefox */
            -ms-overflow-style: none;
            /* Hides scrollbar on IE/Edge */
        }

        #commodityContainer::-webkit-scrollbar {
            display: none;
            /* Hides scrollbar on Chrome/Safari */
        }

        .transition-all {
            transition: all 0.3s ease-in-out;
        }

        #toggleIcon {
            transition: transform 0.3s ease;
        }

        /* --- Refined Market Volume Section Styles --- */
        .volume-section {
            padding: 100px 0;
            background-color: #ffffff;
        }

        .volume-title {
            color: #1a531a;
            /* Exact green from image */
            font-size: 3rem;
            font-weight: 700;
            font-family: 'Georgia', serif;
            /* Matching the serif-style title */
        }

        .volume-subtitle {
            color: #888;
            font-size: 1.1rem;
            margin-bottom: 20px;
            max-width: 800px;
        }

        .blue-divider {
            width: 80px;
            height: 5px;
            background-color: #0056b3;
            margin: 30px auto 70px;
            border-radius: 5px;
        }

        /* Container Card */
        .volume-card {
            background: #fff;
            border: 1px solid #f0f0f0;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
        }

        /* Control Labels */
        .selection-label {
            color: #bbbbbb;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 15px;
            display: block;
        }

        /* Pill Selectors */
        .category-container {
            background: #f1f3f5;
            border-radius: 12px;
            padding: 6px;
            display: inline-flex;
        }

        .cat-btn {
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.95rem;
            transition: 0.3s;
        }

        .cat-btn.active {
            background: #1a531a;
            color: #fff;
            box-shadow: 0 4px 12px rgba(26, 83, 26, 0.2);
        }

        .cat-btn.inactive {
            background: transparent;
            color: #666;
        }

        /* Commodity Pills */
        .commodity-btn {
            background: #fff;
            border: 2px solid #1a531a;
            /* Green border as seen in Potato */
            color: #1a531a;
            border-radius: 25px;
            padding: 10px 25px;
            font-weight: 700;
            margin: 0 5px;
        }

        .commodity-btn-outline {
            background: #fff;
            border: 1px solid #e0e0e0;
            color: #666;
            border-radius: 25px;
            padding: 10px 25px;
            font-weight: 600;
            margin: 0 5px;
        }

        /* Current View Box */
        .view-info-box {
            background-color: #eef5fb;
            border: 1px solid #dbe9f5;
            border-radius: 12px;
            padding: 15px 25px;
            text-align: left;
            min-width: 200px;
        }

        .view-info-label {
            color: #2c7be5;
            text-transform: uppercase;
            font-size: 0.7rem;
            font-weight: 800;
            display: block;
        }

        .view-info-text {
            color: #1a531a;
            font-weight: 800;
            font-size: 1rem;
        }

        /* Bar Chart Components */
        .chart-title-area {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f5f5f5;
            padding-top: 40px;
            margin-top: 20px;
        }

        .chart-label {
            color: #1a531a;
            font-weight: 700;
            font-size: 1.15rem;
        }

        .bar-container {
            margin-bottom: 30px;
        }

        .bar-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .mandi-name {
            color: #444;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .mandi-val {
            color: #1a531a;
            font-weight: 700;
        }

        .progress-thin {
            height: 14px;
            background-color: #f5f5f5;
            border-radius: 10px;
        }

        /* New specific progress bar colors from image */
        .bg-mandi-green {
            background-color: #1a531a;
        }

        .bg-mandi-blue {
            background-color: #0056b3;
        }

        /* Circular Arrow Buttons */
        .nav-arrow-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid #dee2e6;
            background-color: #ffffff;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            cursor: pointer;
            flex-shrink: 0;
            /* Prevents arrows from squishing */
        }

        .nav-arrow-btn:hover {
            background-color: #f8f9fa;
            border-color: #1a531a;
            color: #1a531a;
        }

        /* Container for the scrollable buttons */
        .commodity-scroll-wrapper {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            white-space: nowrap;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        .commodity-scroll-wrapper::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        /* Circular Arrow Buttons */
        .nav-arrow-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid #dee2e6;
            background-color: #ffffff;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            cursor: pointer;
            flex-shrink: 0;
        }

        /* The "Window" that only shows 4 items */
        .commodity-scroll-container {
            max-width: 520px;
            /* Adjust this based on your button widths (approx 130px * 4) */
            overflow: hidden;
            /* Hides the 5th, 6th, etc. items */
            margin: 0 10px;
        }

        .commodity-scroll-wrapper {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            white-space: nowrap;
            gap: 10px;
            /* Consistent spacing between pills */

            /* Hide scrollbars */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .commodity-scroll-wrapper::-webkit-scrollbar {
            display: none;
        }

        /* Ensure buttons don't shrink */
        .commodity-btn,
        .commodity-btn-outline {
            flex: 0 0 auto;
        }

        /* Footer Section Headers */
        .footer-green-bg h5 {
            color: #ffffff;
            text-transform: uppercase;
            font-size: 0.95rem;
            letter-spacing: 1px;
            font-weight: 700;
            margin-bottom: 25px;
            padding-bottom: 10px;
        }

        /* Specific horizontal lines under headers matching image */
        .footer-green-bg h5::after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.15);
            /* Faint white line */
            margin-top: 15px;
        }

        /* Unordered list styling for link columns */
        .footer-green-bg ul {
            padding-left: 0;
        }

        .footer-green-bg ul li {
            list-style: none;
            margin-bottom: 15px;
        }

        .footer-green-bg ul li a {
            text-decoration: none;
            color: #cfdfcf;
            /* Light greenish-gray links */
            font-weight: 400;
            transition: color 0.3s ease;
            font-size: 0.95rem;
        }

        .footer-green-bg ul li a:hover {
            color: #ffffff;
        }

        /* Text in first column */
        .first-col-text {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #cfdfcf;
            margin-bottom: 30px;
        }

        /* Newsletter Input Styling to match image exactly */
        .footer-green-bg .input-group {
            border: 1px solid rgba(255, 255, 255, 0.2);
            /* Semi-transparent border */
            border-radius: 6px;
            overflow: hidden;
            /* For smooth corners */
        }

        /* Dark green input field exactly like image */
        .footer-green-bg .form-control-newsletter {
            background-color: #1a531a !important;
            /* Extremely dark green */
            border: none;
            color: #cfdfcf;
            padding: 12px 20px;
            font-size: 0.95rem;
        }

        .footer-green-bg .form-control-newsletter::placeholder {
            color: #cfdfcf;
            opacity: 0.6;
        }

        .footer-green-bg .form-control-newsletter:focus {
            box-shadow: none;
        }

        /* Blue Join button exactly like image */
        .footer-green-bg .btn-join-newsletter {
            background-color: #0056b3;
            /* Primary blue from image */
            color: #ffffff;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            padding: 12px 30px;
            border: none;
            letter-spacing: 1px;
        }

        .footer-green-bg .btn-join-newsletter:hover {
            background-color: #004494;
        }

        /* Dark Bar at very bottom matching image */
        .footer-dark-bottom {
            background-color: #1a531a;
            /* Very dark green */
            color: rgba(255, 255, 255, 0.4);
            /* Faint text */
            font-size: 0.8rem;
            padding: 20px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .bg-mandi-green {
            background-color: #1a531a;
        }

        .bg-mandi-blue {
            background-color: #0056b3;
        }
/* General Section Styling */
.volume-section {
    padding: 60px 0;
    background-color: #fcfdfc;
}

.volume-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* --- Responsive Controls Logic --- */
.volume-controls-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

/* Commodity Scroll Container */
.commodity-scroll-container {
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
    border-radius: 30px;
    padding: 5px;
}

.commodity-scroll-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.commodity-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

/* Mobile Specific Adjustments */
@media (max-width: 767.98px) {
    .volume-controls-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .flex-grow-1.d-flex {
        width: 100%;
        max-width: 100% !important;
    }

    .category-container {
        justify-content: center;
        display: flex;
    }

    .view-info-box {
        width: 100%;
        margin-top: 10px;
    }

    .bar-meta {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 5px;
    }

    .mandi-val {
        font-size: 0.85rem;
    }
}
        /* RESPONSIVE BREAKPOINTS */
        @media (max-width: 991.98px) {
            .navbar-collapse {
                background: #fff;
                padding: 20px;
                margin-top: 15px;
                border: 1px solid #eee;
            }

            .navbar-logo-right {
                display: none;
            }
        }

        @media (max-width: 768px) {

            /* FIX FOR TABLE RESPONSIVENESS */
            .market-table {
                min-width: 750px !important;
                /* Forces scroll inside the container */
            }

            .hero-title {
                font-size: 2rem;
            }

            .navbar-logo-left {
                max-height: 50px;
            }
        }