/* --- ROOT VARIABLES --- */
:root {
    --primary-blue: #3cb4f0;
    --accent-green: #82d808;      
    --dark-gray-1: #595a5b;
    --dark-gray-2: #5c5d5c;
    --bg-black: #000000;
    --text-white: #ffffff;
    --nav-bg: #ffffff;            /* New Variable for Nav Background */
    --glass-bg: rgba(92, 93, 92, 0.2); 
    --bg-light-mint: #f9fdf9;      /* Your new main background */
    --text-dark: #2d2e2d;         /* New variable for dark text on light bg */
}

/* --- RESET & BASE --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif; 
}

body { 
    background-color: var(--text-white); 
    color: var(--text-white); 
    overflow-x: hidden; 
}

/* --- NAVIGATION --- */
 
/* --- NAVIGATION --- */
nav {
    position: fixed; 
    top: 0px;               /* Pushes the bar down from the very top */
    left: 50%;               /* Centers the bar horizontally */
    transform: translateX(-50%); /* Perfectly centers the element */
    width: 95%;              /* Reduces width (adjust this % to your liking) */
    max-width: 1200px;       /* Prevents it from getting too wide on large monitors */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 20px 40px;      /* Vertical and horizontal padding inside the bar */
    z-index: 1000;
    background-color: var(--nav-bg); 
    border-radius: 0 0 50px 50px;     /* Creates the rounded "pill" shape */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Stronger shadow for the floating effect */
}

 

/* --- UPDATED NAVIGATION LINKS --- */
.nav-links li a { 
    text-decoration: none; 
    color: var(--dark-gray-1);
    margin: 0 15px; 
    font-size: 15px; 
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative; /* Necessary to position the circle */
}

/* Base styles for both hover and active */
.nav-links li a:hover,
.nav-links li a.active { 
    color: var(--accent-green); 
    transform: scale(1.1); 
}

/* The small green circle */
.nav-links li a.active::after {
    content: "";
    position: absolute;
    bottom: -8px;       /* Adjust this to move the circle up or down */
    left: 50%;
    transform: translateX(-50%);
    width: 6px;         /* Circle width */
    height: 6px;        /* Circle height */
    background-color: var(--accent-green);
    border-radius: 50%; /* Makes it a circle */
}
.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 50px;       
    width: auto;        
    display: block;
    transition: transform 0.3s ease;
}

 
.nav-links { 
    display: flex; 
    list-style: none; 
}

 

.nav-links li a:hover { 
    color: var(--accent-green);   /* Hover changes to blue for contrast */
}

/* Icons in nav (Search/User) */
.nav-icons {
    color: var(--accent-green);
    display: flex;
    gap: 15px;
    cursor: pointer;
}

/* --- UPDATED NAV ICONS & SEARCH --- */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--dark-gray-1); /* Match nav link colors */
}

.nav-icons i {
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.nav-icons i:hover {
    color: var(--accent-green);
}

/* --- DROPDOWN BASE --- */
.nav-links li {
    position: relative; /* Anchor for the absolute submenu */
}

/* The Submenu (Now with Scrollable Logic) */
.submenu {
    position: absolute;
    top: 120%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--nav-bg);
    min-width: 300px; /* Slightly wider for better text clearance */
    
    /* --- SCROLL & HEIGHT FIX --- */
    max-height: 350px;       /* The specific height you requested */
    overflow-y: auto;        /* Show scrollbar if items exceed height */
    overflow-x: hidden;      /* Hide horizontal overflow */
    
    list-style: none;
    padding: 10px 0;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    border: 1px solid rgba(130, 216, 8, 0.1);
}
/* Circular Image Style */
.nav-cat-circle {
    width: 28px;               /* Adjust size as needed */
    height: 28px;
    border-radius: 50%;        /* Makes it a circle */
    object-fit: cover;         /* Keeps image from stretching */
    border: 1.5px solid var(--accent-green);
    background: #eee;          /* Placeholder color while loading */
}
 /* Ensure links align items horizontally */
.submenu li a, 
.mob-sub-link, 
.side-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px;                 /* Space between image and text */
}

/* Hover effect for images */
.submenu li a:hover .nav-cat-circle,
.mob-sub-link:hover .nav-cat-circle {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(130, 216, 8, 0.4);
    transition: 0.3s ease;
}
/* --- CUSTOM GREEN SCROLLBAR --- */
.submenu::-webkit-scrollbar {
    width: 6px;
}

.submenu::-webkit-scrollbar-track {
    background: transparent;
}

.submenu::-webkit-scrollbar-thumb {
    background: var(--accent-green);
    border-radius: 10px;
}

/* Show Submenu on Hover */
.nav-links li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Submenu Links */
.submenu li a {
    color: var(--dark-gray-1) !important;
    padding: 12px 20px; /* Increased padding for easier clicking */
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: left;
    transition: 0.3s ease;
    text-decoration: none;
}

/* Override global link styles for dropdown items */
.submenu li a::after { display: none !important; }

.submenu li a:hover {
    background-color: rgba(130, 216, 8, 0.08); /* Faint green highlight */
    color: var(--accent-green) !important;
    transform: translateX(8px) !important; /* Premium slide-in effect */
}

/* Chevron icon styling */
.nav-links .fa-chevron-down {
    font-size: 10px;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

/* Rotate Chevron on Hover */
.nav-links li:hover .fa-chevron-down {
    transform: rotate(180deg);
    color: var(--accent-green);
}@media screen and (max-width: 1024px) {
 
    /* Hide the dropdown submenus on mobile devices */
    .submenu {
        display: none !important;
    }

    /* Optional: Remove the chevron icon on mobile so it looks cleaner */
    .nav-links .fa-chevron-down {
        display: none;
    }
}


/* Search Box Styling */
.search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    border-color: var(--accent-green);
    transition: 0.3s;
}

.search-box:focus-within {
    border-color: var(--accent-green);
    background: #fff;
    box-shadow: 0 0 10px rgba(130, 216, 8, 0.1);
}

.search-input {
    border: none;
    background: none;
    outline: none;
    width: 200px; /* Small default width */
    font-size: 14px;
    transition: 0.3s;
}

.search-input:focus {
    width: 200px; /* Expands on click */
}

.icon-btn {
    background: none;
    border: none;
    color: var(--dark-gray-1);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
/* Styling for your custom PNG menu icon */
.menu-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-menu-img {
    height: 28px;       /* Adjust this size to match your nav scale */
    width: auto;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effect for the image */
.menu-icon:hover .custom-menu-img {
    transform: scale(1.1); /* Slight grow effect */
    filter: brightness(1.2); /* Makes the image pop slightly */
}
/* Styling for your custom PNG user profile */
.user-profile {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-user-img {
    height: 30px;        /* Matches the visual weight of the menu icon */
    width: 30px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 50%;  /* Optional: keeps it circular if your PNG is a headshot */
}

/* Hover effect to match the rest of your UI */
.user-profile:hover .custom-user-img {
    transform: scale(1.1);
    filter: brightness(1.2);
}
 
.search-btn {
    background: var(--accent-green); 
    border: none; 
    padding: 12px;
    border-radius: 100px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: 0.3s;
    color: var(--text-white);
}

.search-btn:hover { 
    background: var(--text-white); 
    color: var(--dark-gray-1);
    transform: translateY(-2px);
}
/* Styling for your custom PNG search icon */
.custom-search-img {
    height: 18px;       /* Adjust this to match your font-size (20px) */
    width: auto;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effect to match your menu icon */
.icon-btn:hover .custom-search-img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Remove any default button padding that might offset the image */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
}

/* --- MOBILE NAV LOGIC --- */

/* --- MOBILE NAVIGATION LOGIC --- */

/* 1. Hide Mobile Nav by default on Desktop */
.mobile-nav {
    display: none;
}

/* 2. Media Query for Mobile (Tablets and Phones) */
@media screen and (max-width: 1024px) {
    
    /* Hide the original desktop navigation completely */
    nav:not(.mobile-nav) {
        display: none !important;
    }

    /* Show and Style the Mobile Nav bar */
    .mobile-nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%); /* Centers the bar */
        width: 100%;                  /* Narrower than screen for "floating" look */
        height: 70px;                /* Fixed height for consistency */
        background-color: var(--nav-bg);
        padding: 0 25px;
        justify-content: space-between;
        align-items: center;
        z-index: 2000;
        border-radius: 0 0 30px 30px; /* Rounded bottom corners */
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

    /* Container for the right-side icons */
    .mobile-icons {
        display: flex;
        align-items: center;
        gap: 18px; /* Space between Search and Menu icons */
    }

    /* Logo scaling for mobile */
    .mobile-nav .logo-img {
        height: 40px;
        width: auto;
    }

    /* Search Button styling */
    .mobile-search .icon-btn {
        background: none;
        border: none;
        padding: 0px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    /* Icon Sizing */
    .mobile-nav .custom-search-img {
        height: 22px;
        width: auto;
        /* Optional: if your PNG is too light, use brightness(0.5) to darken */
    }

    .mobile-nav .custom-menu-img {
        height: 25px;
        width: auto;
    }

    /* Simple Tap Effect */
    .mobile-nav .icon-btn:active, 
    .mobile-nav .menu-icon:active {
        transform: scale(0.9);
        transition: 0.1s;
    }
}

/* --- PC SIDE MENU REFINED --- */
.pc-side-menu {
    position: fixed;
    top: 0;
    right: -450px; /* Hidden state */
    width: 400px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98); /* Clean white base */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 3000;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -15px 0 35px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.pc-side-menu.open {
    right: 0; /* Slide in state */
}

/* Menu Content Container */
.side-menu-content {
    padding: 60px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Custom Scrollbar for the Side Menu */
.side-menu-content::-webkit-scrollbar {
    width: 5px;
}
.side-menu-content::-webkit-scrollbar-thumb {
    background: var(--accent-green);
    border-radius: 10px;
}

/* Close Button */
.close-menu {
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 35px;
    background: none;
    border: none;
    color: var(--dark-gray-1);
    cursor: pointer;
    transition: 0.3s ease;
}

.close-menu:hover {
    color: var(--accent-green);
    transform: rotate(90deg);
}

/* Side Logo */
.side-logo {
    margin-bottom: 50px;
}

.side-logo img {
    height: 55px;
    width: auto;
}

/* Navigation Links */
.side-nav-links {
    list-style: none;
    flex-grow: 1;
}

.side-nav-links li {
    margin-bottom: 15px;
}

.side-nav-links a, 
.side-dropdown span {
    text-decoration: none;
    color: var(--dark-gray-1);
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: 0.3s ease;
    cursor: pointer;
}

/* Hover & Active States */
.side-nav-links a:hover, 
.side-nav-links a.active,
.side-dropdown:hover > span {
    color: var(--accent-green);
    transform: translateX(10px);
}

/* Submenu Styling */
.side-submenu {
    list-style: none;
    margin: 10px 0 20px 15px;
    padding-left: 20px;
    border-left: 2px solid rgba(130, 216, 8, 0.2);
    display: none; /* Controlled by JS or change to block if permanent */
}

/* Show submenu when parent is hovered (or use JS to toggle) */
.side-dropdown:hover .side-submenu {
    display: block;
    animation: fadeIn 0.4s ease;
}

.side-submenu li {
    margin-bottom: 10px;
}

.side-submenu li a {
    font-size: 16px;
    font-weight: 400;
    color: var(--dark-gray-2) !important;
}

.side-submenu li a:hover {
    color: var(--accent-green) !important;
}

/* Footer Section */
.side-footer {
    margin-top: auto;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.side-footer p {
    color: var(--dark-gray-2);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.side-socials {
    display: flex;
    gap: 20px;
}

.side-socials i {
    font-size: 20px;
    color: var(--dark-gray-1);
    cursor: pointer;
    transition: 0.3s;
}

.side-socials i:hover {
    color: var(--accent-green);
    transform: translateY(-5px);
}

/* Overlay Background */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    z-index: 2999;
    transition: 0.4s;
}

.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- MOBILE SIDE MENU REFINED --- */
.mobile-side-menu {
    position: fixed;
    top: 0;
    left: -100%; 
    width: 80%; 
    height: 100vh;
    background: #ffffff;
    z-index: 4000;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    padding: 25px;
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    overflow-y: auto; /* Allows scrolling if menu is long */
}

.mobile-side-menu.open {
    left: 0;
}

/* Header */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.mobile-menu-logo { height: 30px; }

.close-mobile-menu {
    font-size: 28px;
    background: none;
    border: none;
    color: var(--dark-gray-1);
    cursor: pointer;
}

/* Mobile Links */
.mobile-nav-links {
    list-style: none;
    padding: 0;
}

.mobile-nav-links li {
    margin-bottom: 18px;
    position: relative;
}

.mobile-nav-links a {
    text-decoration: none;
    color: var(--dark-gray-1);
    font-size: 17px;
    font-weight: 500;
    display: flex; /* Added for icon alignment */
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

/* --- DROPDOWN SPECIFIC LOGIC --- */
.mob-submenu {
    display: none; /* Hidden by default */
    list-style: none;
    padding-left: 15px;
    margin-top: 10px;
    border-left: 2px solid var(--accent-green);
}

/* Show submenu when parent LI has .active class */
.mob-dropdown.active .mob-submenu {
    display: block;
}

.mob-submenu li {
    margin-bottom: 12px;
}

.mob-submenu a {
    font-size: 15px;
    color: #666;
    font-weight: 400;
}

/* Rotate Chevron Icon */
.mob-dropdown i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.mob-dropdown.active > a i {
    transform: rotate(180deg);
}

/* Footer & Socials */
.mobile-menu-footer {
    margin-top: auto;
    padding-bottom: 15px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 20px;
}

.mobile-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.mobile-socials i {
    font-size: 20px;
    color: var(--dark-gray-1);
}


































/* --- HERO & BACKGROUND --- */
.hero {
     height: 100vh; 
    width: 100%; 
    position: relative;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
}

.hero-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}

.hero-bg img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.cinematic-zoom {
    width: 100%;
    height: 100%;
    object-fit: cover;
     animation: movieScale 20s linear infinite alternate;
}

@keyframes movieScale {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15); /* Slow, immersive zoom in */
    }
}

@media screen and (max-width: 768px) {
    .hero-bg img {
        width: auto;
        height: 100vh;
        min-width: 200%; /* Extra width to accommodate both zoom and slide */
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
        /* Apply the combined animation */
        animation: mobileSlideZoom 25s ease-in-out infinite alternate;
    }
}

/* --- THE SLIDE & ZOOM KEYFRAMES --- */
@keyframes mobileSlideZoom {
    0% {
        /* Start: Normal size, far right */
        transform: translateX(0%) scale(1);
    }
    100% {
        /* End: Zoomed in, slid to the left */
        /* scale(1.2) adds the zoom, translateX(-40%) adds the slide */
        transform: translateX(-50%) scale(1.3);
    }
}

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 2; 
}

/* --- BOOKING WIDGET --- */
.hero-content { 
    position: relative; 
    z-index: 10; 
    width: 90%; 
    max-width: 800px; 
    text-align: center; 
    margin-top: 60px;
}

/* --- DECO ELEMENTS & ANIMATIONS --- */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.butterfly { 
    width: 90px; 
    top: 28%; 
    left: 67%; /* Adjusted position */
    animation: float 4s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
 }

 
/* Ensure other deco elements stand out */
.chameleon { 
    width: 280px; 
    bottom: 5%; 
    left: 3%; 
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.5));
    transition: transform 0.5s ease;
}

.chameleon:hover {
    transform: scale(1.05) rotate(-2deg);
}
.sub-title { 
    font-family: 'Reenie Beanie', cursive; 
    font-size: 55px; 
    color: var(--accent-green); 
}

.main-title { 
    font-family: 'Rock Salt', cursive; 
    font-size: 100px; 
    margin-top: -20px; 
    color: var(--text-white);
}

.booking-container {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    padding: 20px;
    margin-top: 30px;
    border: 1px solid var(--dark-gray-1);
}

.booking-tabs { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 20px; 
    justify-content: center; 
}

.tab-btn {
    background: none; 
    border: none; 
    color: var(--text-white); 
    padding: 8px 20px;
    cursor: pointer; 
    font-weight: 600; 
    border-radius: 20px; 
    transition: 0.3s;
}

.tab-btn.active { 
    background: var(--text-white); 
    color: var(--dark-gray-1); 
}

.booking-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    align-items: flex-end;
    
}

.input-group { 
    text-align: left; 
}

.input-group label { 
    display: block; 
    font-size: 11px; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
    color: var(--accent-green); 
}

.input-group input {
    width: 100%; 
    background: var(--text-white);
    border: 1px solid var(--dark-gray-2);
    padding: 10px; 
    border-radius: 50px; 
    color: var(--dark-gray-1); 
    text-align: center;
    outline: none;
}

/* 1. Style the input field itself */
.input-group input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark; /* Makes the native picker popup dark mode */
    cursor: pointer;
    font-size: 14px;
    padding: 10px 15px;
}

/* 2. Target the Calendar Icon (Chrome/Edge/Safari) */
.input-group input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2382d808" class="bi bi-calendar3" viewBox="0 0 16 16"><path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/><path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>');
    cursor: pointer;
    transition: transform 0.3s ease;
 }

/* 3. Hover effect on the icon */
.input-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    transform: scale(1.2);
}

/* --- DECO ELEMENTS --- */
.deco { position: absolute; z-index: 5; }
.chameleon { width: 280px; bottom: 5%; left: 3%; }

/* --- SOCIALS --- */
.social-footer { 
    position: absolute; 
    bottom: 30px; 
    right: 8%; 
    display: flex; 
    align-items: center; 
    z-index: 10; 
}

.line { 
    width: 40px; 
    height: 1px; 
    background: var(--dark-gray-1); 
    margin: 0 15px; 
}

.social-icons a { 
    color: var(--text-white); 
    margin-left: 10px; 
    font-size: 14px; 
    transition: 0.3s; 
}

.social-icons a:hover { 
    color: var(--accent-green); 
}


.social-icons {
    display: flex;
    gap: 15px; /* Adds consistent spacing between icons */
    align-items: center;
}

.social-icons a {
    color: var(--text-white);
    font-size: 18px; 
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.social-icons a:hover,
.social-icons a.active {
    color: var(--accent-green);
    /* Combine both effects into one line */
    transform: translateY(-7px) scale(1.2); 
}

.hero-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
 }

.explore-btn {
    background: var(--accent-green);
    color: var(--text-white);
    border: 2px solid var(--accent-green);
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.explore-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.explore-btn:hover {
    background: var(--text-white);
        border: 2px solid var(--text-white);

    color: var(--dark-gray-1); /* Dark text on green background looks sharp */
  }

.explore-btn:hover i {
    transform: translateX(5px); /* Arrow nudges right on hover */
}


.line { 
    width: 40px; 
    height: 1px; 
    background: var(--text-white); 
    margin: 0 15px; 
}

 .mobile-trigger-btn{
    display: none;
 }
 
/* --- MOBILE RESPONSIVENESS (PHONES & TABLETS) --- */
@media screen and (max-width: 768px) {
    .hero-content { 
        margin-top: 10px;
    }

    /* 1. Typography */
    .sub-title { font-size: 36px; }
    .main-title { font-size: 44px; margin-top: 10px; line-height: 1.2; }

    /* 2. Booking Container - Logic for hiding on click */
    .booking-container {
        background: transparent;
        box-shadow: none;
        padding: 0px;
        width: 90%;
        margin: 20px auto;
        border: none; /* Removes desktop border */
        transition: all 0.3s ease;
    }

    /* This class is added via JS when the button is clicked */
    .booking-container.form-active {
        padding: 0; 
        margin-top: 10px;
    }

    /* 3. Mobile Trigger Button */
    .mobile-trigger-btn {
        display: block;
        width: 80%;
        max-width: 300px;
        margin: 15px auto;
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.1); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent; 
    }

    .mobile-trigger-btn.hidden {
        display: none;
    }

    /* 4. Booking Form Appearance */
    .booking-form {
        display: none; 
        grid-template-columns: 1fr; 
        gap: 12px;
        padding: 25px;
        border-radius: 30px;
        background: var(--glass-bg); /* Uses your glass variable */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .booking-form.active {
        display: grid;
        animation: slideUp 0.4s ease-out;
    }
/* Inside your @media screen and (max-width: 768px) section */

.input-group input[type="date"] {
    position: relative;
    min-height: 45px; /* Ensures a good touch target */
    appearance: none; /* Removes default OS styling that might clash */
    -webkit-appearance: none;
    display: block;
}

/* Ensure the date input takes up the full space to be clickable */
.input-group {
    width: 100%;
    position: relative;
}

/* Fix for the booking form being cut off */
.booking-form.active {
    display: grid;
    z-index: 999; /* Ensure it's above other hero elements */
    overflow: visible; 
}
   .input-group input {
        /* FIX: Force 16px to stop mobile browser auto-zoom */
        font-size: 16px !important; 
        padding: 14px 20px !important; /* Slightly more padding for easier tapping */
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50px;
        border: 1px solid transparent;
        color: #2d2e2d;
        /* Ensures the text stays centered vertically */
        line-height: normal; 
    }

    /* Special handling for Date Input to prevent it shrinking */
    .input-group input[type="date"] {
        font-family: 'Poppins', sans-serif;
        min-height: 50px; 
        /* Prevents iOS from changing the font/style of the date picker */
        -webkit-appearance: none;
        appearance: none;
    }

    /* 5. Elements & Footer */
    .butterfly { width: 50px; top: 35%; left: 82%; }
    
    /* Add this below your existing .butterfly styles */
.hero.form-open .butterfly {
    top: 20%;
    left: 80%; /* Adjusting slightly to keep it in view */
    transition: all 0.8s ease-in-out; /* Smooth flight transition */
}
    .social-footer {
        right: 0; left: 0; bottom: 20px;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        position: absolute;
        width: 100%;
    }

 

 
    .social-footer .line { display: none; }

    .hero-cta { margin-top: 25px; }
    .explore-btn { padding: 10px 25px; font-size: 14px; }
}






/* --- POPULAR DESTINATIONS --- */
.popular-destinations {
    padding: 80px 5%;
    background-color: var(--bg-light-mint); 
    background-image: url('nex-images-sec/bc1.png'); 
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    text-align: center;
    overflow: hidden; /* Keeps the page clean during sliding */
}

.section-header {
    margin-bottom: 50px;
}

.section-subtitle {
    font-size: 32px;
    font-weight: 700;
    color: var(--dark-gray-1);
}

.section-subtitle span {
    color: var(--primary-blue); 
}

.section-header p {
    color: var(--dark-gray-2); 
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.8;
}

/* --- FIXED SLIDER CONTAINER --- */
.destination-container {
    display: flex; /* Changed from grid to flex for sliding */
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto; /* Allows sliding */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* Makes cards snap into place */
    padding: 20px 10px;
    scrollbar-width: none; /* Hides scrollbar for Firefox */
}

.destination-container::-webkit-scrollbar {
    display: none; /* Hides scrollbar for Chrome/Safari */
}

/* --- DESTINATION CARDS --- */
.dest-card {
    /* PC MODE: Show exactly 4 cards (100% / 4) minus the gaps */
    flex: 0 0 calc(25% - 19px); 
    scroll-snap-align: start;
    background: var(--nav-bg); 
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    border: 1px solid rgba(130, 216, 8, 0.1); 
}

.dest-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(130, 216, 8, 0.15); 
}

.dest-img {
    height: 350px;
    overflow: hidden;
}

.dest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.dest-card:hover .dest-img img {
    transform: scale(1.1);
}

.dest-info {
    padding: 25px 20px;
    text-align: center;
}

.dest-info h4 {
    color: var(--primary-blue);
    font-size: 19px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.dest-card:hover .dest-info h4 {
    color: var(--accent-green); 
}

/* --- NAVIGATION ARROWS --- */
.dest-nav {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--accent-green); 
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(130, 216, 8, 0.3);
}

.nav-btn:hover {
    background: var(--primary-blue); 
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(60, 180, 240, 0.3);
}

/* --- MOBILE MODE --- */
@media screen and (max-width: 768px) {
    .destination-container { 
        /* Adds space between the cards */
        gap: 10px; 
        /* Adds space on the left and right edges of the screen */
        padding: 10px;
        /* Ensures snapping works with the new padding */
        scroll-padding: 20px; 
    }

    .dest-card {
        /* 90% width leaves 10% space to see the next card "peeking" in */
        flex: 0 0 90%; 
        /* Keeps the card aligned to the left when it snaps */
        scroll-snap-align: start; 
    }
    
    .dest-img { 
        height: 280px; 
    }
}






/* --- ABOUT EXPERIENCE --- */
.about-experience {
    padding: 100px 5%;
    background-color: var(--bg-light-mint); /* Matches your global clean look */
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

/* Content Column */
.about-content { flex: 1; }

.about-title {
    font-size: 38px;
    color: var(--dark-gray-1); /* Replaced deep teal with your dark gray */
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Highlights important words in your Primary Blue */
.about-title span { 
    color: var(--primary-blue); 
}

.about-description {
    color: var(--dark-gray-2);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* --- FEATURES GRID --- */
.about-features {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

/* The dark highlight card now uses a professional dark gray instead of teal */
.dark-card {
    background: var(--dark-gray-1);
    color: var(--text-white);
    padding: 30px 20px;
    border-radius: 25px; /* Pill-style corner matching your design */
    text-align: center;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.dark-card h3 { 
    font-size: 28px; 
    color: var(--accent-green); /* Experience number pops in green */
}

.feature-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

/* Replaced orange icon backgrounds with your Accent Green */
.orange-bg {
    background: var(--accent-green);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(130, 216, 8, 0.2);
}

.feature-text h4 { 
    color: var(--dark-gray-1); 
    font-size: 17px; 
    margin-bottom: 5px; 
}

.feature-text p { 
    font-size: 13px; 
    color: var(--dark-gray-2); 
}

/* Discover Button & Stats */
.about-footer { display: flex; align-items: center; gap: 30px; }

/* Reusing your existing explore-btn style logic for consistency */
.discover-btn {
    background: var(--accent-green);
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(130, 216, 8, 0.3);
}

.customer-stats{
    color: var(--text-dark);
}/* --- HAPPY CUSTOMERS AVATAR STYLING --- */
.happy-customers {
    display: flex;
    align-items: center;
    gap: 20px;
}

.customer-avatars {
    display: flex;
    align-items: center;
}

/* Styled initial badges to replace images */
.avatar-initial {
    width: 42px;
    height: 42px;
    background-color: var(--accent-green); /* NexStep Green */
    color: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    border: 3px solid var(--nav-bg); /* White border for the "cutout" look */
    margin-left: -15px; /* Overlap effect matching your design style */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-transform: uppercase;
    transition: transform 0.3s ease, z-index 0s;
    position: relative;
}

.avatar-initial:first-child {
    margin-left: 0;
}

.avatar-initial:hover {
    transform: translateY(-5px) scale(1.1);
    z-index: 10;
    background-color: var(--primary-blue); /* Pops to Blue on hover */
}

/* Secondary color for every other avatar for visual variety */
.avatar-initial:nth-child(even) {
    background-color: var(--dark-gray-1);
}

.customer-stats {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.customer-stats strong {
    color: var(--dark-gray-1);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.customer-stats span {
    font-size: 11px;
    color: var(--dark-gray-2);
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 4px;
}
.discover-btn:hover {
    background: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(60, 180, 240, 0.3);
}

.customer-avatars img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid white;
    margin-left: -12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- VISUAL COLUMN --- */
.about-visuals {
    flex: 1;
    position: relative;
}

.main-image-wrapper { position: relative; z-index: 2; }
.main-person { 
    width: 100%; 
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)); 
}

.circle-inset {
    position: absolute;
    top: 10%;
    right: 25%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 12px solid white;
    overflow: hidden;
    z-index: -1;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.circle-inset img { width: 100%; height: 100%; object-fit: cover; }

/* Experience Badge */
.experience-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: white;
    padding: 15px 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
    border: 1px solid rgba(130, 216, 8, 0.2);
}

.exp-number { 
    font-size: 40px; 
    font-weight: 800; 
    color: var(--accent-green); /* Using your green instead of standard forest green */
}

.exp-text { 
    font-size: 13px; 
    font-weight: 700; 
    color: var(--dark-gray-1); 
    text-transform: uppercase;
}

@media screen and (max-width: 992px) {
    .about-container { flex-direction: column; text-align: center; }
    .about-features { flex-direction: column; align-items: center; }
    .about-footer { flex-direction: column; gap: 20px; }
    .circle-inset { width: 180px; height: 180px; right: 10%; }
    .experience-badge { right: 50%; transform: translateX(50%); top: -20px; }
}



/* --- BRANDS / PARTNERS SECTION --- */
.brands-section {
    padding: 60px 5%;
    background-color: var(--bg-light-mint); /* Consistent light green tint */
}

.brands-container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--nav-bg); /* Pure white interior */
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    
    /* Updated Postage stamp border effect using your palette */
    border: 2px dashed rgba(130, 216, 8, 0.3); 
    border-radius: 20px; /* Softer corners to match your UI style */
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.brands-title {
    flex-shrink: 0;
    min-width: 220px;
}

.brands-title h2 {
    font-size: 22px;
    color: var(--dark-gray-1); /* Clean professional gray */
    line-height: 1.2;
    font-weight: 600;
}

/* Updated Span to use your primary brand green */
.brands-title h2 span {
    display: block;
    color: var(--accent-green); 
    font-size: 30px;
    font-weight: 800;
    margin-top: 5px;
}

/* --- LOGO MARQUEE ANIMATION --- */
.logo-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
    /* Fade effect on the sides of the marquee */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 70px; /* Slightly wider spacing for a premium feel */
    width: max-content;
    animation: scrollLogos 25s linear infinite; /* Slightly slower, smoother scroll */
}

.logo-track img {
    height: 35px; /* Refined height */
    width: auto;
    filter: grayscale(100%); 
    opacity: 0.5;
    transition: all 0.4s ease;
}

/* On hover, logos pop into your brand colors */
.logo-track img:hover {
    filter: grayscale(0%) brightness(1.1);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .brands-container {
        flex-direction: column;
        text-align: center;
        padding: 40px 25px;
        gap: 30px;
    }
    
    .brands-title {
        min-width: 100%;
    }

    .logo-track {
        gap: 40px;
    }
    
    .logo-track img {
        height: 28px;
    }
}





/* --- ADVENTURE VIDEO SECTION --- */
.adventure-video-sec {
    padding: 80px 5% 120px 5%; /* Increased bottom padding for the stats bar overlap */
    background-color: var(--bg-light-mint);
    display: flex;
    justify-content: center;
}

.video-card-container {
    width: 100%;
    max-width: 1000px;
    position: relative;
}

/* Video Card Styling */
.video-display-card {
    width: 100%;
    height: 450px;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Replaced teal tint with a neutral dark overlay to make white text pop */
    background: rgba(0, 0, 0, 0.3); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- PULSE PLAY BUTTON --- */
.play-button {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 5;
}

.play-button:hover {
    transform: scale(1.15);
    background: var(--accent-green);
    border-color: var(--accent-green);
    box-shadow: 0 0 30px rgba(130, 216, 8, 0.5);
}

/* Video Text Branding */
.video-text-tag {
    position: absolute;
    right: 8%;
    bottom: 22%;
    text-align: left;
    pointer-events: none;
}

.video-text-tag h2 {
    font-family: 'Rock Salt', cursive;
    color: white;
    font-size: 42px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

/* Updated highlight color to Green */
.video-text-tag h2 span {
    color: var(--accent-green);
}

.video-text-tag p {
    color: white;
    font-size: 20px;
    font-weight: 500;
    margin-top: -10px;
    opacity: 0.9;
}

/* --- STATS BAR STYLING --- */
.stats-counter-bar {
    position: absolute;
    bottom: -55px; /* Perfect overlap effect */
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    background: var(--dark-gray-1); /* Clean professional dark gray */
    padding: 35px 20px;
    border-radius: 35px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    font-size: 32px;
    /* Icons now use your accent green to tie back to the brand */
    color: var(--accent-green); 
}

.stat-info h3 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.stat-info p {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-top: 2px;
}

.stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(255,255,255,0.1);
}

@media screen and (max-width: 768px) {
    .adventure-video-sec { padding-bottom: 50px; }
    .video-display-card { height: 350px; border-radius: 30px; }
    
    .stats-counter-bar {
        position: relative;
        bottom: 0;
        margin-top: 30px;
        flex-direction: column;
        gap: 25px;
        left: 0;
        transform: none;
        width: 100%;
        padding: 40px 20px;
    }
    
    .stat-divider { display: none; }
    
    .video-text-tag { 
        right: 0; 
        left: 0; 
        bottom: 10%; 
        text-align: center; 
        scale: 0.75; 
    }
}




/* --- SERVICES SECTION --- */
.services-section {
    padding: 100px 5%;
    background-color: var(--bg-light-mint); /* Updated to your light green tint */
    color: var(--dark-gray-1); /* Swapped from white for readability */
    position: relative;
    overflow: hidden;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Visual Side */
.services-visual {
    flex: 1;
    position: relative;
}

.main-illustration {
    width: 110%;
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));
}

.scenic-inset {
    position: absolute;
    bottom: -40px;
    right: 0;
    width: 300px;
    height: 150px;
    border-radius: 100px; /* Capsule shape */
    overflow: hidden;
    border: 8px solid white; /* Bold white border to pop against mint bg */
    z-index: 3;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.scenic-inset img { width: 100%; height: 100%; object-fit: cover; }

/* Content Side */
.services-content { flex: 1.2; }

.services-header h2 {
    font-size: 38px;
    margin-bottom: 20px;
    color: var(--dark-gray-1);
    font-weight: 700;
}

/* Updated highlight to your Primary Blue */
.services-header h2 span { 
    color: var(--primary-blue); 
}

.services-header p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark-gray-2);
    opacity: 0.9;
    margin-bottom: 50px;
}

/* --- SERVICE GRID & CARDS --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-step-card {
    background: white;
    /* Asymmetric corners kept for unique design */
    border-radius: 20px 20px 40px 20px; 
    padding: 40px 25px;
    color: var(--dark-gray-1);
    position: relative;
    text-align: left; /* Changed to left for a more modern professional look */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    border: 1px solid rgba(130, 216, 8, 0.1);
}

.service-step-card:hover { 
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(130, 216, 8, 0.12);
    border-color: var(--accent-green);
}

/* Step Badge logic using your variables */
.step-badge {
    position: absolute;
    top: -15px; /* Moved to top for better visibility on light cards */
    right: 25px;
    background: var(--dark-gray-1);
    color: white;
    font-size: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.step-badge span { 
    font-weight: 800; 
    font-size: 16px; 
    display: block; 
    color: var(--accent-green); /* The step number pops in green */
}

.service-icon { 
    font-size: 40px; 
    margin-bottom: 20px; 
}

/* Color classes using your specific theme variables */
.blue-text { color: var(--primary-blue); }
.green-text { color: var(--accent-green); }
.gray-text { color: var(--dark-gray-1); }

.service-step-card h4 { 
    color: var(--dark-gray-1); 
    font-size: 18px;
    margin-bottom: 12px; 
}

.service-step-card p { 
    font-size: 13px; 
    color: var(--dark-gray-2); 
    line-height: 1.5; 
}

/* Background Decoration */
.bg-tower-silhouette {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 150px;
    height: 400px;
    background: url('tower-icon.png') no-repeat;
    opacity: 0.03; 
    pointer-events: none;
    filter: brightness(0); /* Makes it a dark silhouette */
}

@media screen and (max-width: 992px) {
    .services-container { flex-direction: column; text-align: center; }
    .services-grid { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
    .service-step-card { text-align: center; padding-top: 50px; }
    .step-badge { right: 50%; transform: translateX(50%); }
    .main-illustration { width: 100%; }
}


/* --- POPULAR SEARCH SECTION --- */
.popular-search-sec {
    background-color: var(--bg-light-mint);
    padding: 10px 0; /* Reduced from 80px */
    position: relative;
    overflow: hidden;
}

.search-ticker-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    height: 220px; /* Reduced height to keep it tight */
    overflow: hidden; /* Necessary to hide the sliding items */
}

/* The Sliding Track */
.ticker-content {
    display: flex;
    align-items: center;
    gap: 60px; /* Space between sliding items */
    width: max-content;
    position: relative;
    z-index: 5;
    /* This creates the auto-slide effect */
    animation: slide-scroll 25s linear infinite;
}

/* Pause animation on hover for better UX */
.ticker-content:hover {
    animation-play-state: paused;
}

.ticker-item {
    text-align: center;
    flex-shrink: 0; /* Prevents items from squishing */
    transition: transform 0.3s ease;
}

.ticker-item:hover {
    transform: translateY(-8px) scale(1.03);
}

.tour-count {
    display: inline-block;
    border: 1px solid rgba(130, 216, 8, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px; /* Reduced from 11px */
    font-weight: 600;
    color: var(--dark-gray-1);
    background: white;
    margin-bottom: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.dest-name {
    font-family: 'Reenie Beanie', cursive; 
    font-size: 34px; /* Reduced from 44px */
    font-weight: 400;
    line-height: 1;
}

/* Colors */
.london, .thailand, .dubai { color: var(--primary-blue); }
.paris, .bangkok, .france { color: var(--accent-green); }

/* --- DECORATIVE ELEMENTS --- */
.ticker-decoration {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.silhouette-img {
    height: 100px; /* Reduced from 140px */
    width: auto;
    margin-bottom: -10px;
    opacity: 0.12;
    filter: grayscale(100%) brightness(0.2);
}

.bg-search-text {
    text-align: center;
    line-height: 0.8;
}

.popular-tag {
    color: var(--dark-gray-1);
    font-weight: 800;
    font-size: 16px; /* Reduced from 20px */
    display: block;
    margin-bottom: -5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.search-outline {
    font-size: 100px; /* Reduced from 140px */
    font-weight: 900;
    color: rgba(89, 90, 91, 0.04); 
    letter-spacing: 10px;
    text-transform: uppercase;
    user-select: none;
}

/* --- KEYFRAMES FOR AUTO-SLIDE --- */
@keyframes slide-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Works best when you duplicate items in HTML */
}

/* --- MOBILE MODE --- */
@media screen and (max-width: 768px) {
    .popular-search-sec { padding: 40px 0; }
    
    .search-ticker-container {
        height: 150px; /* Smaller container for mobile */
    }

    .ticker-content {
        display: flex !important; /* Forces row layout */
        flex-wrap: nowrap !important; /* Prevents 2nd row */
        gap: 30px;
        animation-duration: 15s; /* Speed up slide for small screens */
    }
    
    .dest-name { font-size: 28px; }
    
    .search-outline { 
        font-size: 50px; 
        letter-spacing: 5px; 
    }
    
    .silhouette-img { height: 60px; }
}
/* --- POPULAR TOURS SECTION --- */
.popular-tours-sec {
    padding: 80px 5%;
    background-color: var(--bg-light-mint);
    text-align: center;
    overflow: hidden; /* Keeps the section clean */
}

.section-main-title {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--dark-gray-1);
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 20px;
}

/* Target the span specifically within the main title */
.section-main-title span {
    color: var(--accent-green); /* Replace with your preferred color or variable */
}

/* --- SLIDER CONTAINER --- */
.tours-grid-container {
    display: flex; /* Changed from Grid to Flex for sliding */
    gap: 20px;
    max-width: 1300px;
    margin: 40px auto;
    overflow-x: auto; /* Allows sliding */
    scroll-behavior: smooth;
    padding: 20px 5px;
    scrollbar-width: none; /* Hides scrollbar for Firefox */
    -ms-overflow-style: none; /* Hides scrollbar for IE/Edge */
}

/* Hides scrollbar for Chrome/Safari */
.tours-grid-container::-webkit-scrollbar {
    display: none;
}

/* --- CARD STYLING --- */
.tour-package-card {
    background: white;
    border-radius: 25px;
    overflow: hidden;
    /* PC Mood: 4 cards per row (25% minus gaps) */
    flex: 0 0 calc(25% - 15px); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
    border: 1px solid rgba(130, 216, 8, 0.05);
}

.tour-package-card:hover { 
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.tour-img-wrapper {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.tour-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tour-package-card:hover .tour-img-wrapper img {
    transform: scale(1.1);
}

/* --- TAGS & OVERLAYS --- */
.tour-duration-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--dark-gray-1);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.tour-duration-tag i {
    color: var(--accent-green);
}

.tour-location-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px 15px;
    background: rgba(0, 0, 0, 0.7); /* Pure black at 70% opacity */
    color: white;
    font-weight: 600;
    font-size: 16px;
}

/* --- CONTENT DETAILS --- */
.tour-details-content { padding: 25px 20px; }
.price-row { margin-bottom: 12px; display: flex; align-items: baseline; }

.price-tag { 
    color: var(--accent-green); 
    font-size: 26px; 
    font-weight: 800; 
}

.price-period { 
    color: var(--dark-gray-2); 
    font-size: 12px; 
    margin-left: 5px; 
    font-weight: 500;
}

.tour-summary {
    color: var(--dark-gray-2);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
    height: 45px;
    overflow: hidden;
    opacity: 0.9;
}

/* --- FOOTER SECTION --- */
.tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 18px;
}

.book-item-btn {
    border: 2px solid var(--accent-green);
    background: transparent;
    color: var(--accent-green);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s ease;
    text-transform: uppercase;
}

.book-item-btn:hover {
    background: var(--accent-green);
    color: white;
}

.star-rating i { color: var(--primary-blue); font-size: 11px; }
.star-rating span { 
    display: block; 
    font-size: 10px; 
    color: var(--dark-gray-2); 
    margin-top: 4px; 
    font-weight: 600;
}

/* --- NAVIGATION ARROWS --- */
.tours-navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.arrow-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--primary-blue);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.arrow-btn:hover { 
    transform: scale(1.1); 
    background: var(--accent-green); 
}

/* --- MOBILE & TABLET MODES --- */
@media screen and (max-width: 1024px) {
    .tour-package-card {
        flex: 0 0 calc(50% - 10px); /* 2 cards on tablets */
    }
}

@media screen and (max-width: 768px) {
    .tour-package-card {
        flex: 0 0 100%; /* Mobile Mood: Show only 1 card */
    }
    
    .section-main-title {
        font-size: 32px;
    }
    
    .section-main-title span {
        display: block;
        margin-top: 10px;
    }
}



/* --- BOOKING GUIDE SECTION --- */
.booking-guide-sec {
    padding: 100px 5%;
    background: var(--bg-light-mint);
}

.steps-container {
    max-width: 1200px;
    margin: 0 auto 100px;
    display: flex;
    align-items: center;
    gap: 50px;
}

/* Steps Visual Side */
.steps-visual { flex: 1.2; position: relative; display: flex; align-items: flex-end; }

.offer-card {
    width: 200px;
    background: white;
    border-radius: 25px; /* Pill corners for consistency */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(130, 216, 8, 0.1);
}

.offer-card img { width: 100%; height: 160px; object-fit: cover; }

.offer-badge {
    background: var(--accent-green); /* Swapped from orange */
    color: white;
    padding: 20px 15px;
    text-align: center;
}

.offer-badge h2 { font-size: 34px; font-weight: 800; line-height: 1; }
.offer-badge h2 span { font-size: 14px; display: block; margin-top: 5px; opacity: 0.9; }

.floating-girl { 
    width: 420px; 
    margin-left: -60px; 
    z-index: 2; 
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}

.vertical-tag {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: rotate(90deg) translateY(-50%);
    font-size: 45px;
    font-weight: 900;
    color: var(--accent-green); /* Using accent green */
    letter-spacing: 4px;
    opacity: 0.2;
    pointer-events: none;
}

.vertical-tag span { color: var(--dark-gray-1); }

/* --- STEPS CONTENT --- */
.steps-content { flex: 1; }

.steps-title { font-size: 36px; color: var(--dark-gray-1); margin-bottom: 40px; font-weight: 700; }
.steps-title span { display: block; color: var(--primary-blue); font-size: 24px; margin-bottom: 5px; }

.step-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    padding: 18px 30px;
    border-radius: 60px;
    border: 1px solid rgba(0,0,0,0.04);
    margin-bottom: 22px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.step-row:hover { 
    border-color: var(--accent-green); 
    transform: translateX(12px);
    box-shadow: 0 10px 25px rgba(130, 216, 8, 0.1);
}

.step-num {
    background: var(--dark-gray-1);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.step-text h4 { color: var(--dark-gray-1); font-size: 17px; margin-bottom: 3px; }
.step-text p { font-size: 13px; color: var(--dark-gray-2); opacity: 0.8; }
.step-icon { margin-left: auto; color: var(--accent-green); font-size: 20px; }

/* --- WHY CHOOSE BANNER --- */
.why-choose-banner {
    background: var(--dark-gray-1); 
    background-image: url('nex-images-sec/butt.png');
    background-size: cover;
    background-position: center;
    /* ... rest of your code ... */
    border-radius: 40px;
    padding: 80px 60px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* Keeping your SVG mask but using the theme background */
.why-choose-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(89, 90, 91, 1), rgba(0,0,0,0.8));
    z-index: 1;
}

.banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 5;
}

.check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 25px 0 35px;
}

.check-item { font-size: 15px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.check-item i { color: var(--accent-green); font-size: 18px; }

.discover-btn-alt {
    background: var(--accent-green);
    color: var(--text-white);
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(130, 216, 8, 0.3);
}

.discover-btn-alt:hover {
    background: var(--text-white);
    color: var(--dark-gray-1);
    transform: translateY(-3px);
}

.support-badge { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.hours { font-size: 70px; font-weight: 900; line-height: 1; color: var(--accent-green); }
.hours-text { font-size: 16px; font-weight: 700; }
.hours-text span { display: block; font-size: 11px; opacity: 0.7; text-transform: uppercase; }

.call-us p { font-size: 13px; margin-bottom: 8px; opacity: 0.8; }
.call-us a { 
    font-size: 28px; 
    font-weight: 800; 
    color: var(--accent-green); 
    text-decoration: none; 
    transition: 0.3s;
}

.call-us a:hover { color: var(--primary-blue); }

@media screen and (max-width: 992px) {
    .why-choose-banner { padding: 60px 30px; }
    .steps-container, .banner-inner { flex-direction: column; text-align: center; }
    .steps-visual { margin-bottom: 60px; justify-content: center; }
    .check-grid { grid-template-columns: 1fr; justify-items: center; }
    .floating-girl { width: 320px; margin-left: 0; }
    .offer-card { display: none; } /* Simplified for mobile */
}


/* --- ADVENTURE CTA SECTION --- */
.adventure-cta-sec {
    position: relative;
    height: 400px; /* Wide, cinematic height */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
}

.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cta-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Consistency with your Hero zoom effect */
    transform: scale(1.1);
    filter: brightness(0.85); 
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Neutral dark overlay to make your White/Green typography pop */
    background: rgba(0, 0, 0, 0.25); 
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* --- FLOATING GLOBE BADGE --- */
.cta-badge {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.badge-inner {
    width: 65px;
    height: 65px;
    background: var(--dark-gray-1); /* Swapped from Teal to your Dark Gray */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--accent-green); /* Globe icon glows in your brand green */
    animation: pulseGlobe 3s infinite ease-in-out;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

@keyframes pulseGlobe {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(130, 216, 8, 0.4); }
    70% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(130, 216, 8, 0); }
    100% { transform: scale(1); }
}

/* --- TYPOGRAPHY --- */
.cta-main-text {
    font-family: 'Rock Salt', cursive; 
    font-size: 80px;
    line-height: 1.1;
    margin-bottom: 10px;
    text-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

/* Added specific color to match the "Adventure" spirit */
.cta-main-text span {
    color: var(--accent-green);
}

.cta-sub-text {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 6px; /* High-end travel brand spacing */
    margin-bottom: 35px;
    text-transform: uppercase;
    opacity: 0.9;
}

.cta-booking-btn {
    background: var(--accent-green);
    color: var(--text-white); /* Changed to white for better contrast */
    border: none;
    padding: 14px 40px;
    border-radius: 50px; /* Matching your "pill" design language */
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(130, 216, 8, 0.3);
}

.cta-booking-btn:hover {
    background: var(--primary-blue); /* Swaps to blue on hover */
    color: white;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(60, 180, 240, 0.4);
}

@media screen and (max-width: 768px) {
    .adventure-cta-sec { height: 320px; }
    .cta-main-text { font-size: 48px; }
    .cta-sub-text { font-size: 11px; letter-spacing: 3px; margin-bottom: 25px; }
    .badge-inner { width: 55px; height: 55px; font-size: 20px; }
}




 

/* --- MAIN FOOTER --- */
.main-footer {
    background-color: var(--dark-gray-1);
    padding: 0 8% 30px; /* Increased side padding for better layout */
    color: var(--text-white);
    position: relative;
    margin-top: 120px; /* Room for overlapping banner */
    background-image: linear-gradient(to top, rgba(45, 46, 46, 0.98), rgba(45, 46, 46, 0.85)), url('nex-images-sec/cover.png'); 
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- SUBSCRIBE BANNER --- */
.footer-subscribe-banner {
    background: var(--accent-green);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 70px;
    border-radius: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.subscribe-text h2 { 
    font-size: 38px; 
    font-family: 'Rock Salt', cursive; 
    color: var(--dark-gray-1);
    margin: 0;
}
.subscribe-text h2 span { color: white; }
.subscribe-text p { 
    font-size: 16px; 
    font-weight: 600; 
    color: rgba(0, 0, 0, 0.6); 
    margin-top: 5px;
}/* --- SUBSCRIBE FORM PILL --- */
.subscribe-form {
    background: white;
    padding: 6px 6px 6px 25px; 
    border-radius: 60px; 
    display: flex;
    align-items: center;
    /* Use max-width for the desktop size and 100% for fluidity */
    width: 100%;
    max-width: 450px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    box-sizing: border-box; /* Ensures padding doesn't break the width */
    margin: 0 auto; /* Centers the form if needed */
}

/* --- THE INPUT --- */
.sub-input {
    border: none;
    outline: none;
    flex: 1; 
    font-size: 16px;
    background: transparent;
    color: var(--dark-gray-1);
    padding-right: 10px;
    min-width: 0; /* Important: allows the input to shrink in flex containers */
}

/* --- THE CIRCLE BUTTON --- */
.sub-btn {
    background: var(--dark-gray-1);
    color: white;
    border: none;
    width: 50px; 
    height: 50px;
    min-width: 50px; 
    border-radius: 50%; 
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-btn i {
    font-size: 18px;
    margin-right: 2px;
}

.sub-btn:hover {
    background: var(--primary-blue);
    transform: scale(1.05);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 480px) {
    .subscribe-form {
        padding: 5px 5px 5px 15px; /* Reduce left padding on small screens */
    }
    
    .sub-btn {
        width: 40px; /* Slightly smaller button for mobile */
        height: 40px;
        min-width: 40px;
    }
    
    .sub-input {
        font-size: 14px; /* Slightly smaller text to prevent layout shifting */
    }
}
/* --- MAIN GRID --- */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 60px;
}

.footer-logo img {
    height: 60px;
    margin-bottom: 25px;
}

.brand-desc {
    line-height: 1.7;
    font-size: 15px;
    color: rgba(255,255,255,0.7);
}

.footer-col h4 {
    font-size: 20px;
    margin-bottom: 30px;
    color: var(--accent-green);
    font-weight: 500;
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 15px; }
.footer-col ul li a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 15px;
    transition: var(--transition);
}

.footer-col ul li a:hover { 
    color: var(--accent-green); 
    padding-left: 8px; 
}

/* --- CONTACT SECTION --- */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.c-icon {
    width: 42px;
    height: 42px;
    background: rgba(130, 216, 8, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green);
    font-size: 18px;
    flex-shrink: 0;
}

.c-text { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.9); }

/* --- SOCIALS --- */
.footer-socials { display: flex; gap: 12px; margin-top: 30px; }
.footer-socials a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition);
    text-decoration: none;
}

.footer-socials a:hover { 
    background: var(--accent-green);
    color: var(--dark-gray-1);
    border-color: var(--accent-green);
    transform: translateY(-5px);
}

 

/* --- BOTTOM BAR --- */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 35px 0;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.footer-bottom span { color: var(--accent-green); font-weight: 500; }
 /* --- RESPONSIVE MOBILE OVERRIDES --- */
@media (max-width: 992px) {
    .main-footer {
        padding: 0 5% 30px;
        text-align: center; /* Centers all text globally on mobile */
    }/* --- THE AUTO-ZOOM & UI FIX --- */
    .sub-input {
        /* Force 16px to stop mobile browser zoom */
        font-size: 16px !important; 
        padding: 12px 20px !important;
        height: 50px;
    }

    /* Stack the Subscribe Banner vertically */
    .footer-subscribe-banner {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
        width: 90%; /* Give it some breathing room */
        transform: translateY(-30%); /* Adjust overlap for mobile */
    }

    .subscribe-text h2 {
        font-size: 28px;
    }

    /* Center the Form Pill */
    .subscribe-form {
        width: 100%;
        margin: 0 auto;
    }

    /* Change Grid to 1 Column */
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 20px;
    }

    /* Center Logo and Socials */
    .footer-logo img {
        margin: 0 auto 25px;
    }

    .footer-socials {
        justify-content: center;
    }

    /* Center Contact Items */
    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Remove the hover padding-left effect on mobile as it breaks centering */
    .footer-col ul li a:hover {
        padding-left: 0;
        text-decoration: underline;
    }
}

@media (max-width: 480px) {
    .subscribe-text h2 {
        font-size: 22px;
    }
    
    .footer-subscribe-banner {
        padding: 30px 15px;
    }
}
.footer-sep {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.2);
}

.dev-link {
    color: var(--text-white);
    text-decoration: none;
    transition: 0.3s;
    border-bottom: 1px solid transparent;
}

.dev-link:hover {
    color: var(--accent-green);
    border-color: var(--accent-green);
}




/*review*/

/* --- CUSTOMER REVIEWS SECTION --- */
.reviews-section { 
    padding: 80px 5%; 
    background: var(--bg-light-mint); 
    text-align: center; 
    overflow: hidden;
}

.reviews-slider-container {
    display: flex;
    gap: 20px; /* Consistent gap between cards */
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 30px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Snap logic for mobile */
    scroll-snap-type: x mandatory; 
}

.reviews-slider-container::-webkit-scrollbar { display: none; }

.review-card {
    /* PC MODE: Show exactly 5 cards (100% / 5 = 20%) */
    /* We subtract 16px to account for the gap spacing */
    flex: 0 0 calc(20% - 16px); 
    background: white;
    padding: 30px 20px;
    border-radius: 25px;
    text-align: left;
    box-shadow: 0 8px 25px rgba(0,0,0,0.03);
    border: 1px solid rgba(130, 216, 8, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: start; /* Makes the card "stick" when scrolling */
}

.review-card:hover { 
    transform: translateY(-10px); 
    border-color: var(--accent-green);
    box-shadow: 0 15px 35px rgba(130, 216, 8, 0.1);
}

.quote-icon { 
    color: var(--accent-green); 
    font-size: 24px; 
    opacity: 0.3; 
    margin-bottom: 10px; 
}

.review-rating { 
    color: #ffc107; 
    margin-bottom: 12px; 
    font-size: 13px; 
}

.review-message { 
    color: var(--dark-gray-2); 
    font-style: italic; 
    font-size: 14px; 
    line-height: 1.6; 
    min-height: 90px;
    /* Limit text to 4 lines to keep cards equal height */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reviewer-info { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-top: 20px; 
    border-top: 1px solid rgba(0,0,0,0.05); 
    padding-top: 15px; 
}

.rev-avatar { 
    width: 35px; 
    height: 35px; 
    background: var(--dark-gray-1); 
    color: white; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    font-size: 14px;
    flex-shrink: 0;
}

.rev-details h4 { 
    font-size: 14px; 
    color: var(--dark-gray-1); 
    margin: 0; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rev-details span { 
    font-size: 11px; 
    color: var(--dark-gray-2); 
    display: block;
}

.rev-details strong { 
    color: var(--primary-blue); 
    font-weight: 600;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Laptops / Smaller Desktops: Show 3 cards */
@media (max-width: 1200px) {
    .review-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}

/* Tablets: Show 2 cards */
@media (max-width: 992px) {
    .review-card {
        flex: 0 0 calc(50% - 10px);
    }
}

/* Mobile: Show 1 card (1 by 1) */
@media (max-width: 768px) {
    .reviews-slider-container {
        gap: 0; /* Remove gap for a perfect full-width snap */
        padding: 20px 0;
    }

    .review-card {
        flex: 0 0 100%; 
        border-radius: 0; /* Full width looks better with flat edges or very small radius */
        scroll-snap-align: center;
        border-left: none;
        border-right: none;
        padding: 30px;
    }
    
    .section-main-title { font-size: 32px; }
}