/* --- Navigation Bar --- */
        .navbar {
            /* DEFAULT STATE: Transparent background, white text for hero section */
            background-color: transparent;
            /* Initially transparent */
            padding: 18px 0;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
            box-shadow: none;
            /* No shadow when transparent */
            transition: top 0.3s ease-in-out, background-color 0.35s ease, box-shadow 0.35s ease;
        }

        .navbar .logo,
        .navbar .nav-links a,
        .navbar .menu-toggle {
            color: var(--white-color);
            /* Default text/icon color white */
            transition: color 0.35s ease;
            /* Add transition for color change */
        }

        .navbar .nav-links a::after {
            /* Underline for nav links */
            background-color: var(--white-color);
            /* Underline color white initially */
            /* transition already exists */
        }

        .navbar .nav-links a:hover,
        .navbar .nav-links a.active {
            color: var(--white-color);
            /* Hover/active color remains white on transparent bg */
            /* If you want an accent on hover/active for transparent:
    color: rgba(255,255,255,0.8);
    */
        }

        .navbar .nav-links a:hover::after,
        .navbar .nav-links a.active::after {
            width: 100%;
            background-color: var(--white-color);
            /* Or var(--accent-color) if you prefer */
        }

        /* Quote button in navbar - default transparent state */
        .navbar .nav-links .btn-primary {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
            /* Subtle transparent bg */
            color: var(--white-color);
            border: 1px solid var(--white-color);
            /* White border */
            box-shadow: none;
            /* animation: pulseButton 2.5s infinite 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); */
            /* Optional: remove pulse for transparent */
        }

        .navbar .nav-links .btn-primary:hover {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
            border-color: var(--white-color);
            /* animation: none; */
        }


        /* SCROLLED STATE: Solid background, dark text */
        .navbar.scrolled {
            background-color: rgba(255, 255, 255, 0.9);
            /* Or var(--white-color) for fully opaque */
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .navbar.scrolled .logo,
        .navbar.scrolled .nav-links a,
        .navbar.scrolled .menu-toggle {
            color: var(--dark-color);
            /* Text color changes to dark */
        }

        .navbar.scrolled .nav-links a::after {
            background-color: var(--accent-color);
            /* Underline color changes */
        }

        .navbar.scrolled .nav-links a:hover,
        .navbar.scrolled .nav-links a.active {
            color: var(--primary-color);
            /* Hover/active color changes */
        }

        .navbar.scrolled .nav-links a:hover::after,
        .navbar.scrolled .nav-links a.active::after {
            background-color: var(--accent-color);
            /* Or var(--primary-color) */
        }

        /* Quote button in navbar - scrolled state */
        .navbar.scrolled .nav-links .btn-primary {
            background-image: linear-gradient(45deg, var(--primary-color) 0%, var(--primary-darker) 100%);
            color: var(--white-color);
            border: none;
            /* Remove border when it has solid bg */
            box-shadow: 0 5px 12px rgba(var(--rgb-primary-color), 0.15);
            /* Restore shadow */
            /* animation: pulseButton 2.5s infinite 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); */
            /* Restore pulse if desired */
        }

        .navbar.scrolled .nav-links .btn-primary:hover {
            background-image: linear-gradient(45deg, var(--primary-darker) 0%, var(--primary-color) 100%);
            box-shadow: 0 8px 18px rgba(var(--rgb-primary-color), 0.22);
            /* animation: none; */
        }


        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* ... rest of your existing .navbar .logo:hover, .navbar .nav-links li, dropdown CSS ... */

        /* Ensure dropdown menu background is solid even when navbar is transparent */
        .navbar .dropdown-menu {
            /* ... existing dropdown styles ... */
            background-color: var(--white-color);
            /* Always solid white */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            /* Keep shadow for dropdown */
        }

        .navbar .dropdown-menu li a {
            color: var(--dark-color);
            /* Text in dropdown always dark */
        }

        .navbar .dropdown-menu li a:hover,
        .navbar .dropdown-menu li a.active {
            background-color: var(--light-color);
            color: var(--primary-color);
            /* Dropdown item hover/active state */
        }


        /* Mobile menu specific adjustments for transparent navbar */
        @media (max-width: 768px) {

            .navbar.menu-open,
            /* When mobile menu is open, force solid background */
            .navbar .nav-links.active {
                /* If nav-links are directly made active (older approach) */
                background-color: var(--white-color) !important;
                /* Force solid background */
            }

            .navbar.menu-open .logo,
            .navbar.menu-open .nav-links a,
            /* Targets links when menu is open */
            .navbar.menu-open .menu-toggle {
                color: var(--dark-color) !important;
                /* Force dark text when menu is open */
            }

            .navbar.menu-open .nav-links a::after {
                background-color: var(--accent-color) !important;
            }

            .navbar.menu-open .nav-links a:hover,
            .navbar.menu-open .nav-links a.active {
                color: var(--primary-color) !important;
            }

            /* Adjustments for dropdown inside open mobile menu */
            .navbar.menu-open .dropdown-menu {
                background-color: transparent !important;
                /* Make dropdown area transparent to match parent */
            }

            .navbar.menu-open .dropdown-menu li a {
                color: var(--dark-color) !important;
                /* Keep text dark */
            }

            .navbar.menu-open .dropdown-menu li a:hover,
            .navbar.menu-open .dropdown-menu li a.active {
                background-color: var(--light-color) !important;
                color: var(--primary-color) !important;
            }

            /* Mobile quote button when menu is open */
            .navbar.menu-open .nav-links .btn-primary {
                background-image: linear-gradient(45deg, var(--primary-color) 0%, var(--primary-darker) 100%) !important;
                color: var(--white-color) !important;
                border: none !important;
                box-shadow: 0 5px 12px rgba(var(--rgb-primary-color), 0.15) !important;
            }
        }

        /* --- Hero Section --- */
        /* --- Slider Section (Previously Hero) --- */
        .slider {
            /* RENAMED FROM .hero */
            color: var(--white-color);
            height: 100vh;
            min-height: 650px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            /* Or center, depending on your slider design */
            position: relative;
            overflow: hidden;
        }

        /* Video Background Styling - Selector changed if it was .hero specific */
        /* Assuming .video-background-container is generic or within .slider now */
        .slider .video-background-container {
            /* If specific to slider */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -2;
        }

        #sliderVideoBackground {
            /* RENAMED ID */
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Optional Overlay */
        .slider-overlay {
            /* RENAMED FROM .hero-overlay */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: -1;
        }

        /* Gradient Fallback */
        .slider::before {
            /* RENAMED FROM .hero::before */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -3;
            background: linear-gradient(-45deg, var(--primary-color), var(--primary-darker), #023e8a, #00296b);
            background-size: 400% 400%;
            animation: gradientBG 18s ease infinite;
            /* gradientBG keyframes remain the same */
        }

        /* --- Slider Content Styling --- */
        .slider-content {
            /* RENAMED FROM .hero-content */
            max-width: 100%;
            padding-top: 100px;
            padding-bottom: 40px;
            position: relative;
            margin-left: 4%;
            z-index: 1;
            text-align: left;
            /* Or center if slider design calls for it */
            opacity: 0;
            animation: fadeInSliderContent 1.2s ease-out 0.5s forwards;
            /* RENAMED ANIMATION */
        }

        @keyframes fadeInSliderContent {

            /* RENAMED ANIMATION */
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .slider h1 {
            /* RENAMED FROM .hero h1 */
            font-size: 2.5rem;
            margin-bottom: 24px;
            color: var(--white-color);
            font-weight: 800;
            text-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
            opacity: 0;
            animation: slideInDownSlider 1s ease-out 0.3s forwards;
            /* RENAMED ANIMATION */
        }

        @keyframes slideInDownSlider {

            /* RENAMED ANIMATION */
            from {
                opacity: 0;
                transform: translateY(-60px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .slider p {
            /* RENAMED FROM .hero p */
            font-size: 1.25rem;
            margin-bottom: 45px;
            color: rgba(255, 255, 255, 0.95);
            max-width: 80%;
            margin-left: 0;
            /* For left align */
            margin-right: 0;
            /* For left align */
            opacity: 0;
            animation: slideInUpSlider 1s ease-out 0.6s forwards;
            /* RENAMED ANIMATION */
        }

        @keyframes slideInUpSlider {

            /* RENAMED ANIMATION */
            from {
                opacity: 0;
                transform: translateY(60px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        .slider .slider-cta-buttons .btn {
            /* Updated selector */
            margin-right: 15px;
            margin-bottom: 15px;
            margin-left: 0;
            opacity: 0;
            transform: scale(0.8);
            animation: zoomInSliderButtons 0.8s ease-out 1s forwards;
            /* RENAMED ANIMATION */
        }

        .slider .slider-cta-buttons .btn:first-child {
            margin-left: 0;
        }

        .slider .slider-cta-buttons .btn:last-child {
            margin-right: 0;
        }


        @keyframes zoomInSliderButtons {

            /* RENAMED ANIMATION */
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Specific styling for buttons within the slider section */
        .slider .btn-primary {
            /* RENAMED FROM .hero .btn-primary */
            background-image: linear-gradient(45deg, var(--accent-color) 0%, #088ba2 100%);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.35);
            color: var(--white-color);
            border: none;
        }

        .slider .btn-primary:hover {
            /* RENAMED FROM .hero .btn-primary:hover */
            background-image: linear-gradient(45deg, #088ba2 0%, var(--accent-color) 100%);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.45);
        }

        .slider .btn-secondary {
            /* RENAMED FROM .hero .btn-secondary */
            background-color: transparent;
            border: 2px solid var(--white-color);
            color: var(--white-color);
            box-shadow: none;
        }

        .slider .btn-secondary:hover {
            /* RENAMED FROM .hero .btn-secondary:hover */
            background-color: var(--white-color);
            color: var(--primary-color);
            box-shadow: 0 8px 18px rgba(255, 255, 255, 0.2);
        }

        /* Responsive adjustments for Slider section */
        @media (max-width: 992px) {
            .slider h1 {
                font-size: 3rem;
            }

            .slider p {
                font-size: 1.25rem;
            }

            .slider-content {
                max-width: 650px;
                padding-top: 90px;
            }
        }

        @media (max-width: 768px) {
            .slider {
                padding: 40px 0 60px;
                height: auto;
                min-height: unset;
                justify-content: center;
                /* text-align: center; */
                /* Handled by .slider-content */
            }

            .slider-content {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                max-width: 90%;
                padding-top: 80px;
            }

            .slider h1 {
                font-size: 2.4rem;
            }

            .slider p {
                font-size: 1.1rem;
                margin-bottom: 30px;
                max-width: 100%;
            }

            .slider-cta-buttons {
                text-align: center;
            }

            .slider .slider-cta-buttons .btn {
                margin: 10px 5px;
                display: inline-block;
                width: auto;
            }
        }

        @media (max-width: 576px) {
            .slider h1 {
                font-size: 2rem;
            }

            .slider p {
                font-size: 1rem;
            }

            .slider-content {
                padding-top: 70px;
            }
        }