/* Aesthetics: Animation for subtle background pulse */
        @keyframes glowPulse {
            from { opacity: 0.08; }
            to { opacity: 0.12; }
        }

        /* 3D Background Container - Increased visibility for a subtle "wow" factor */
        #three-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.1; /* Increased opacity for effect */
            animation: glowPulse 10s infinite alternate;
        }

        /* Main Content Container - Horizontal padding removed for 100% width */
        .content-wrapper {
            position: relative;
            z-index: 10;
            padding: 40px 0 80px 0; /* Horizontal padding set to 0 */
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Heading Style - Internal padding for alignment (Mobile: 20px) */
        .section-heading {
            font-size: clamp(2.2rem, 5vw, 3.2rem);
            font-weight: 400;
            text-transform: uppercase;
            margin-bottom: 30px;
            text-align: left;
        }

        /* Card Grid Container - Essential for responsive layout (Mobile: 1 column, 100% width) */
        .card-grid {
            display: grid;
            gap: 20px;
            padding: 0 20px; /* Added internal padding for card spacing on mobile */
            grid-template-columns: repeat(1, 1fr);
        }

        /* Individual Card Style */
        .cruise-card {
            aspect-ratio: 3 / 4;
            background-size: cover;
            background-position: center;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Mobile specific glow/border match */
        .cruise-card:nth-child(1) { border-bottom: 5px solid #ffcc00; }
        .cruise-card:nth-child(2) { border-bottom: 5px solid #00ff00; }
        .cruise-card:nth-child(3) { border-bottom: 5px solid #ff00ff; }
        .cruise-card:nth-child(4) { border-bottom: 5px solid #00ffff; }


        .cruise-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
            z-index: 1;
        }

        .cruise-card:hover {
            transform: translateY(-5px) scale(1.01);
            /* Enhanced box shadow for a dramatic "wow" effect */
            box-shadow: 0 15px 30px rgba(160, 32, 240, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
        }

        /* Text Overlay Style (Mobile Default) */
        .card-text-overlay {
            padding: 20px; /* Internal padding for content spacing */
            z-index: 2;
            color: white;
            text-align: center;
        }

        .card-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 400;
            line-height: 1.1;
            margin-bottom: 5px;
            text-transform: uppercase;
            font-family: 'Anton', sans-serif;
        }

        .card-price-label {
            font-family: sans-serif;
            font-size: 1rem;
            font-weight: 500;
            opacity: 0.9;
            margin-top: 0;
            display: block;
        }

        .card-price-value {
            font-family: 'Poppins', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            display: block;
            margin-top: 5px;
            line-height: 1;
        }
        
        /* --- DESKTOP VIEW (min-width: 1024px) --- */
        @media (min-width: 1024px) {
            .content-wrapper {
                max-width: 100%;
                padding: 40px 0 80px 0; /* Horizontal padding remains 0 */
            }
            .card-grid {
                grid-template-columns: repeat(4, 1fr);
                padding: 0; /* Card grid padding is 0 so cards touch screen edges */
            }
            .section-heading {
                /* Internal padding added to align text with the expected desktop content start */
                padding: 0 80px; 
                margin-left: 0;
            }
            
            /* Desktop text alignment and size */
            .card-text-overlay {
                text-align: left;
            }
            .card-title {
                font-size: clamp(1.2rem, 2.5vw, 1.8rem);
            }
            .card-price-label, .card-price-value {
                display: inline;
                font-family: sans-serif;
                font-weight: 500;
                font-size: clamp(0.85rem, 1.9vw, 1.05rem);
                margin: 0;
            }
            .card-price-value::before {
                content: ' ';
            }
            .cruise-card {
                border-bottom: none !important;
                border-radius: 0; /* Removed border radius on desktop to fully abut edges, as per request */
            }
            
            /* Re-add border-radius to the inner cards if the grid is 100% wide */
            .cruise-card:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
            .cruise-card:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
            .cruise-card:nth-child(n) { border-radius: 0; }
            .cruise-card:nth-child(1) { border-radius: 12px 0 0 12px; }
            .cruise-card:nth-child(4) { border-radius: 0 12px 12px 0; }
            .cruise-card:nth-child(1) { border-bottom: none !important; }
            .cruise-card:nth-child(2) { border-bottom: none !important; }
            .cruise-card:nth-child(3) { border-bottom: none !important; }
            .cruise-card:nth-child(4) { border-bottom: none !important; }
        }   /* Custom Font and Utility Styles */
        
        html, body {
            /* FIXED: Ensure body takes up all space */
            height: 100%;
            min-height: 100vh;
        }
        
        body {
            font-family: 'Inter', sans-serif;
        }

        /* -------------------------------------- */
        /* H1 Heading Styling */
        /* -------------------------------------- */
        .scary-good-title {
            font-family: 'Bebas Neue', sans-serif; 
            font-size: clamp(2.5rem, 9vw, 5.5rem);
            font-weight: 900;
            line-height: 0.95;
            letter-spacing: 3px; 
            color: white; 
            text-shadow: none; 
            -webkit-background-clip: unset; 
            -webkit-text-fill-color: initial; 
            
            @media (max-width: 640px) {
                font-size: clamp(3rem, 12vw, 4rem);
                letter-spacing: 0px; 
            }
        }
        
        /* -------------------------------------- */
        /* Timer Number Font Styling (Matching H1) */
        /* -------------------------------------- */
        .timer-numbers {
            font-family: 'Bebas Neue', sans-serif; 
        }


        /* -------------------------------------- */
        /* Background and Three.js Container */
        /* -------------------------------------- */
        #background-container {
            position: absolute; 
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh; /* FIXED: 100vh is used for the visual background */
            overflow: hidden;
            z-index: 1; 
        }

        .hero-background-visual {
            width: 100%;
            height: 100%;
            object-fit: cover; 
            filter: brightness(0.7) contrast(1.1) saturate(1.2); 
        }

        #three-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            pointer-events: none;
        }
        
        .content-layer {
            position: relative;
            z-index: 20;
            height: 100vh; /* FIXED: Use 100vh for content layer */
        }
        
        /* -------------------------------------- */
        /* DESKTOP MEGA MENU STYLING (Vertical Layout) */
        /* -------------------------------------- */
        @media (min-width: 768px) {
            
            /* **FIXED HEIGHT FOR PERFECT ALIGNMENT** */
            #global-mega-menu-desktop {
                height: 380px; 
            }
            .max-w-7xl.mx-auto.px-4.py-6.flex {
                 height: 100%;
                 align-items: stretch; /* Stretch columns vertically */
            }

            /* Main Nav Link (left panel) */
            .mega-main-link {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.75rem 1rem;
                border-radius: 0.5rem;
                font-weight: 600;
                color: #374151; 
                background-color: transparent;
                transition: background-color 150ms ease-in-out;
                text-decoration: none; 
            }
            
            .mega-main-link.active,
            .mega-main-link:hover {
                background-color: #eff6ff; 
                color: #1a202c; 
            }

            /* Sub Nav Link (sub panel) */
            .mega-sub-link {
                display: block;
                padding: 0.5rem 0.75rem;
                border-radius: 0.25rem;
                color: #4b5563; 
                font-size: 0.95rem;
                transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
                text-decoration: none; 
            }

            .mega-sub-link.active,
            .mega-sub-link:hover {
                background-color: #e0f2fe; 
                color: #1d4ed8; 
            }
            
            /* Columns and Separators */
            .mega-menu-left-panel {
                width: 250px; 
                min-width: 250px;
                flex-shrink: 0;
                padding-right: 1rem;
                position: relative;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                height: 100%;
                overflow-y: auto; /* Added for scroll functionality */
            }
             .mega-menu-left-panel.nested-panel {
                border-right: 1px solid #e5e7eb;
            }

            .mega-menu-sub-panel {
                width: 200px; 
                min-width: 200px;
                flex-shrink: 0;
                padding-left: 1rem;
                padding-right: 1rem;
                border-left: 1px solid #e5e7eb;
                position: relative;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                height: 100%;
                overflow-y: auto; /* Added for scroll functionality */
            }

            /* --- UPDATED: Image Content Panel Layout --- */
            .mega-menu-image-content-panel {
                flex-grow: 1; /* Take remaining space */
                display: flex; /* Flex container for image and text */
                flex-direction: row; /* Horizontal layout: Image | Text */
                align-items: flex-start; 
                justify-content: flex-start;
                border-left: 1px solid #e5e7eb; /* Separator from sub-panel */
                height: 100%;
                padding-top: 0; 
            }
            
            /* NEW: Image container styling for vertical image */
            .mega-menu-image-container {
                /* Fixed width as requested (between 500-800px range) */
                width: 350px !important; 
                min-width: 350px !important;
                height: 100% !important; /* Full height of the menu */
                flex-shrink: 0;
                position: relative;
                overflow: hidden;
                /* REMOVED border-radius */
                margin-top: 0; 
                margin-right: 1.5rem; /* Space before content */
                margin-left: 1.5rem; /* Space after separator */
            }
            /* Make image fit container */
            .mega-menu-image-container img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* REMOVED border-radius */
            }

            /* NEW: Text/Content Block Styling */
            .mega-menu-text-block {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                padding-left: 1.5rem; /* Separator space */
                border-left: 1px solid #e5e7eb; /* Vertical separator line */
                height: 100%; /* Match parent height */
            }
            
            /* Added Scroll area for content */
            .mega-menu-scroll-content {
                flex-grow: 1; /* Allows it to take up available space, pushing the link down */
                overflow-y: auto; /* Enables vertical scrolling for long content */
                padding-right: 0.5rem; /* A little padding so scrollbar doesn't touch the text */
            }
            
            /* Other Desktop Styles */
            .main-content-area {
                padding-top: 80px; 
            }
            #hero-h1 {
                margin-top: 90px; 
            }
        }
        
        /* -------------------------------------- */
        /* Mobile Styling (max-width: 767px) */
        /* -------------------------------------- */
        @media (max-width: 767px) {
            /* Mobile height overrides: Content layer uses 100vh for full-screen appearance */
            .content-layer {
                height: 100vh !important;
            }
            #background-container {
                height: 100vh !important;
            }

            .main-content-area {
                padding-top: 170px !important; 
                justify-content: flex-start !important; 
            }
            
            #hero-h1 {
                margin-top: 0 !important;
            }
            
            /* ---------------------------------- */
            /* FIXED: MOBILE DROPDOWN TRANSITION */
            /* ---------------------------------- */
            
            /* The side menu container itself */
            #side-menu {
                height: 100vh; /* Ensure side menu takes full viewport height */
            }

            /* The sub-menus are initially hidden via max-height: 0 */
            .mobile-sub-menu, .nested-mobile-sub-menu {
                height: auto; /* Let content dictate height, but clamp with max-height */
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in-out; /* Transition max-height */
            }
            
            /* The class that opens the menu */
            .mobile-sub-menu.open, .nested-mobile-sub-menu.open {
                max-height: 1000px; /* A large enough value to accommodate all content */
            }

            /* Nested Mobile Menu Styles (Visual only, Max-height logic is above) */
            .nested-mobile-toggle-btn {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                text-align: left;
                padding: 0.5rem 0;
                color: #e5e7eb; 
                font-size: 1.125rem; 
                transition: color 150ms;
            }
            
            /* Mobile link legibility and removal of underline */
            .mobile-sub-menu a, .nested-mobile-sub-menu a {
                text-decoration: none; 
                color: #e5e7eb !important;
            }
            
             /* Timer/Button Layout styles (simplified for mobile) */
            .mobile-timer-layout {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-top: 2rem;
            }
            .mobile-timer-numbers-container {
                display: flex;
                align-items: center;
                margin-top: 0.5rem;
                gap: 0;
            }
            .mobile-timer-box {
                font-size: 2.5rem; 
                line-height: 1.2;
                padding: 0.25rem;
                min-width: 45px;
            }
             .mobile-colon {
                 padding: 0 0.1rem; 
             }
            .mobile-shop-now-btn {
                width: 100%;
                font-size: 1.25rem; 
                padding: 1rem 0; 
                border-radius: 0.5rem;
            }
            
            /* Mobile Support Button Styling */
            .call-button-mobile {
                display: block;
                width: 100%;
                padding: 0.75rem;
                border-radius: 0.5rem;
                border: 2px solid #3B82F6; /* Tailwind blue-500 */
                color: #3B82F6;
                background-color: white;
                text-align: center;
                font-weight: 700;
                transition: background-color 0.2s;
            }
            .call-button-mobile:hover {
                background-color: #3B82F6;
                color: white;
            }
        }
        
        /* Additional element styles (retained) */
        .desktop-timer-box {
            border: 1px solid white;
            /* Tighter spacing */
            margin-left: 0.125rem; 
        }

        /* -------------------------------------- */
        /* DESKTOP POPOVER STYLING (For Need Help?) */
        /* -------------------------------------- */
        #support-popover {
            position: absolute;
            top: 100%; /* Position right below the header */
            right: 0;
            z-index: 60; /* Higher than header but lower than side menu */
            background-color: white;
            padding: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            width: 280px; /* Fixed width for better appearance */
            transform: translateY(10px); /* Slight shift down for visual separation */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
        }

        #support-popover.active {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }
        
        #support-popover::before {
            /* Small arrow pointing up to the button */
            content: '';
            position: absolute;
            top: -8px;
            right: 25px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid white;
        }

        .call-button {
            border: 2px solid #1D4ED8; 
            color: #1D4ED8;
            font-weight: 600;
            display: block;
            width: 100%;
            padding: 1rem 0;
            border-radius: 0.5rem;
            text-align: center;
            transition: background-color 0.2s, color 0.2s;
            margin-top: 1.5rem;
        }
        .call-button:hover {
            background-color: #1D4ED8;
            color: white;
        }
      
        .nav-buttons-container::-webkit-scrollbar {
            display: none; /* Hide scrollbar for tabs */
        }
        .nav-buttons-container {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Carousel scroll area setup */
        .card-dabba-track {
            display: flex;
            overflow-x: hidden; /* Hide the scrollbar by default */
            scroll-behavior: smooth;
            gap: 25px;
        }

        /* Mobile View: 1 Card per Viewport Width */
        @media (max-width: 768px) {
             .card-dabba-track {
                overflow-x: scroll; /* Allow scrolling on mobile if needed */
                scroll-snap-type: x mandatory; /* Snap to card edges */
                padding: 0 15px 20px 15px;
            }
            .yatra-card {
                min-width: calc(100% - 30px); /* Full width minus padding/gap */
                scroll-snap-align: start;
            }
        }
        
        /* Tablet View: 2 Cards per Viewport Width */
        @media (min-width: 769px) and (max-width: 1200px) {
            .yatra-card {
                min-width: calc(50% - 13px); /* 2 cards + gap spacing */
            }
        }
        
        /* Desktop View: 4 Cards per Viewport Width */
        @media (min-width: 1201px) {
            .yatra-card {
                /* Calulate width for 4 cards to show at once, plus 5th card partially visible */
                min-width: calc(100% / 4.2 - 20px); 
            }
        }.content-layer header {
    /* Add this to your header's styles for a smooth slide effect */
    transition: transform 0.3s ease-in-out; 
}