/* ------------------ GLOBAL RESET & GOOGLE FONTS ------------------ */
/* ------------------ GLOBAL RESET & GOOGLE FONTS ------------------ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Playfair Display', serif;
}
client-logo

/* ...existing code... */
.logo
/* Remove or replace any other font-family declarations: */
body,
.home-card-info,
.section-heading h2,
.section-heading p,
.vertical-card-content h3,
.vertical-card-content p,
.discover-more-btn,
.lesser-known-card .card-info h3,
.lesser-known-card .card-info p,
.event-card .card-content h3,
.event-card .card-content p,
.card-hover-info h4,
.card-hover-info p,
.fleet-hero h1,
.fleet-hero p,
.fun-card-info h3,
.fun-card-info p,
.about-text h2,
.about-text p,
.team-info h3,
.team-info p,

 

/* ...existing code... */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------ COLOR PALETTE & TYPOGRAPHY ------------------ */
:root {
    --primary-dark: #2c3e50; /* A dark, deep color for text and nav */
    --accent-teal: #5ac8b2; /* The light teal for hero and accents */
    --light-bg: #ecf0f1; /* Light gray for sections */
    --card-bg: #ffffff; /* White for cards */
    --text-light: #7f8c8d; /* Muted text color */
}
/* Keep logo same in both light and dark themes */
.logo img {
    content: url('assets/images/LOGO.png');
}

body {
    background: var(--light-bg);
    color: var(--primary-dark);
    line-height: 1.6;
}


footer
/* ------------------ GLOBAL RESET ------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------ COLOR PALETTE & TYPOGRAPHY ------------------ */
:root {
    --primary-dark: #000000;
    --accent-teal: #1abc9c;
    --light-bg: #ecf0f1;
    --card-bg: #ffffff;
    --text-light: #7f8c8d;
}

body {
    background: var(--light-bg);
    color: var(--primary-dark);
    line-height: 1.6;
}


/* ------------------ HERO / SLIDER ------------------ */
.about-content

/* ------------------ HOME PAGE SECTIONS ------------------ */
.home-section {
    padding: 60px 20px;
    text-align: center;
    animation: fadeIn 2.5s ease;
}
.section-heading {
    text-align: center;
    margin-bottom: 20px;
}

.section-heading h2 {
    font-size: 2.5rem;
    margin-bottom: 5px;
    color:white;
    font-family: 'Abril Fatface', serif;
}

.section-heading p {
    font-size: 1.2rem;
    color: var(--text-light);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
}

.home-card {
    position: relative;
    overflow: hidden;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    height: 500px;
}

.home-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    color: white;
    text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

.home-card-info h3 {
    margin: 0;
    font-size: 2.1rem;
}

.home-card-info p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.home-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 0 15px var(--accent-teal);
}

.discover-more-btn {
    display: inline-block;
    padding: 15px 30px;
    margin-top: 30px;
    background-color: var(--accent-teal);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.discover-more-btn:hover {
    background-color: #16a085;
    transform: translateY(-3px);
}

.Clients-section home-section {
    display: flex;
    flex-direction:row ;
    padding: 60px 20px;
    text-align: center;
    animation: fadeIn 2.5s ease;


}
.clients-section {
  padding: 60px 20px;
  background: #f9fafb; 
  text-align: center;
}

.section-heading h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #333;
  position: relative;
  display: inline-block;
}

.section-heading h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0077ff; 
  margin: 10px auto 0;
  border-radius: 3px;
}

/* Grid Layout */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 40px;
  align-items: center;
  justify-items: center;
}

/* Logo styling */
.client-logo img {
  max-width: 140px;
  filter: grayscale(10%);
  opacity: 10.7;
  transition: all 0.3s ease-in-out;
}

.client-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.18);
}
/* delete this part */


/* ------------------ REVIEWS SECTION (Bento Box) ------------------ */
.reviews-section {
  padding: 80px 20px;
  background: #fafafa;
  font-family: 'Inter', sans-serif;
}

.section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.section-heading h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #ffffff;
}

.section-heading p {
  color: #666;
  font-size: 1rem;
}

/* Slider container */
.bento-slider {
  overflow: hidden;
  position: relative;
}

.bento-track {
  display: flex;
  gap: 20px;
  animation: scrollReviews 25s linear infinite;
}

.bento-box {
  background: #fff;
  border-radius: 16px;
  padding: 25px;
  min-width: 100px;
  max-width: 300px;
  flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  align-items: center;
  justify-content: center;
}

.bento-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.review-quote {
  font-style: italic;
  font-size: 1rem;
  color: #444;
  
  position: relative;
  padding-left: 18px;
}

.review-quote::before {
  content: "“";
  font-size: 2rem;
  color: #ccc;
  position: absolute;
  left: 0;
  top: -5px;
}

.reviewer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  font-size: 0.95rem;
}

.reviewer-info h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
}

.stars {
  color: #f5b50a;
  margin-left: 6px;
  font-size: 0.9rem;
}

/* Keyframes for auto scroll */
@keyframes scrollReviews {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ------------------ DARK THEME STYLES ------------------ */



/* Dark Theme Colors */
body.dark-theme {
    --primary-dark: #138a7c; /* Light text on dark background */
    --accent-teal: #1abc9c;
    --light-bg: #000000; /* Dark background */
    --card-bg: #000000; /* Slightly lighter dark color for cards */
    --text-light: #bdc3c7; /* Muted light text */
}

/* Specific Dark Theme Adjustments */
body.dark-theme .navbar {
    background-color: #bfb8b898;
}

body.dark-theme .logo img {
    filter: invert(1); /* Invert the logo color for better visibility */
}

body.dark-theme .text-content p {
    text-shadow: none; /* Remove text shadow for better readability */
}

body.dark-theme .card-scroller-container .card p {
    text-shadow: none;
}

body.dark-theme .section-heading h2 {
    color: var(--primary-dark);
}

body.dark-theme .review-quote,
body.dark-theme .review-quote-small {
    color: var(--primary-dark);
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    margin-left: 20px;
}

body.dark-theme .theme-toggle {
    color: yellow; /* Change icon color in dark mode */
}
/* ------------------ FOOTER ------------------ */
footer {
            font-family: 'Poppins', sans-serif;
            position: relative; /* Crucial for positioning the waves */
            overflow: hidden; /* Hides the parts of waves that go outside */
            background-color: #1a202c; /* Fallback background */
            margin-top: auto;
            padding-top: 0; /* NEW: Removed top padding to make it more compact */
        }

        /* --- NEW: The Aurora Waves Container --- */
        .aurora-waves {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 140px; /* NEW: Reduced height for a smaller footprint */
            z-index: 1;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background-size: 50% 100%;
            background-repeat: repeat-x;
            animation: drift 20s linear infinite;
        }

        .wave1 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath fill='%236366f1' fill-opacity='0.5' d='M800 56.9c-155.5 0-204.9-50-320-50s-164.5 50-320 50H0v40h800z'/%3E%3C/svg%3E");
            animation-duration: 25s;
            opacity: 0.6;
        }

        .wave2 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath fill='%23ec4899' fill-opacity='0.5' d='M800 56.9c-155.5 0-204.9-50-320-50s-164.5 50-320 50H0v40h800z'/%3E%3C/svg%3E");
            animation-duration: 35s;
            opacity: 0.5;
            animation-direction: reverse;
        }

        .wave3 {
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath fill='%2322d3ee' fill-opacity='0.5' d='M800 56.9c-155.5 0-204.9-50-320-50s-164.5 50-320 50H0v40h800z'/%3E%3C/svg%3E");
            animation-duration: 45s;
             opacity: 0.4;
        }

        @keyframes drift {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        /* --- Structured Content Layout with "Glassmorphism" --- */
        .footer-content-wrapper {
            position: relative;
            z-index: 2;
            /* The "frosted glass" effect */
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 190, 190, 0.247);
        }
        
        .footer-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 30px;
            max-width: 1200px;
            margin: 3 auto;
            padding: 30px 6%; /* NEW: Reduced padding */
            color: #ffffff;
            text-align: center;
        }

        .footer-info h3, .footer-social h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #ffffff;
        }

        .footer-info p {
            margin: 3px 0;
            font-size: 0.9rem;
            font-weight: 300;
        }
        
        .footer-contact-item {
            display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 0.9rem;
        }
        .footer-contact-item svg {
            width: 16px; height: 16px; fill: #a0aec0; transition: fill 0.3s ease;
        }
        .footer-contact-item a {
            color: #a0aec0; text-decoration: none; transition: color 0.3s ease;
        }
        .footer-contact-item:hover a, .footer-contact-item:hover svg { color: #ffffff; fill: #ffffff; }

        /* --- Social Media Icons --- */
        .social-icons { display: flex; gap: 15px; }
        .social-icons a img {
            width: 26px; height: 26px; border-radius: 10%;
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.3s ease-out;
        }
        .social-icons a:hover img {
            transform: translateY(-6px);
            box-shadow: 0 0 15px rgba(236, 72, 153, 0.7);
        }
        
        /* --- Bottom Copyright Bar --- */
        .footer-bottom {
            text-align: center;
            padding: 10px 0; /* NEW: Reduced padding */
            font-size: 0.85rem;
            font-weight: 300;
            color: #949eab;
            border-top: 1px solid rgba(74, 85, 104, 0.5);
        }

        /* --- Responsive Design for Mobile --- */
        @media (max-width: 768px) {
            .footer-container { flex-direction: column; text-align: center; align-items: center; }
            .footer-contact-item { justify-content: center; }
        }






/* ------------------ NAVBAR ------------------ */
/* --- Root Variables --- */
.navbar {
             position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 69px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
    z-index: 1000;
    padding: 0 2vw;
    justify-content: space-between;}
.logo {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.logo img {
    height: 44px;
    width: auto;
    margin: 0;
    
    display: block;

}
.navbar-right {
    display: flex;
    align-items: center;
    gap: 2vw;
    margin-left: auto; /* push to right */
}
        .logo img {
            height: 50px; /* Adjusted size slightly */
            display: block;
            margin-right: 50px;
            padding-left: 0px;

        }

        .nav-links {
        display: flex;
    align-items : center;
    gap: 2vw;
    list-style: none;
}

.logo img {
    height: 50px;   /* or your preferred size */
    width: auto;
    margin-left: 16px;
    
}
        

        .nav-links a {
            text-decoration: none;
            color: #03000cdd;
            text-shadow: white;
            font-weight: 600;
            font-size: 1.3rem;
            /* padding: 10px 5px; Add padding for a larger click area */
            position: relative; /* Needed for the underline pseudo-element */
            transition: color 0.3s ease;
            display: flex;
            align-items: center;
        }
        
        /* The new short, centered underline effect */
        .nav-links > li > a::after {
            content: '';
            position: absolute;
            bottom: 10px; /* Position the line with some space */
            left: 50%;
            width: 50%; /* Make the line 50% of the link's width */
            height: 3px;
            background-color: var(--accent-green);
            transform: translateX(-50%) scaleX(0); /* Center it and hide by default */
            transition: transform 0.3s ease-in-out;
        }

        /* Show the underline on hover or when active */
        .nav-links > li > a:hover::after,
        .nav-links > li > a.active::after {
            transform: translateX(-50%) scaleX(1);
        }
        
        /* Darken the text for the active link */
        
        
        /* Hiding dropdown arrows for a cleaner look to match screenshot */
        .dropdown .fa-chevron-down {
            display: none;
        }
        
        /* Dropdown Menu (still functional on hover) */
        .dropdown { position: relative; }
        .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 8px 25px rgba(0,0,0,0.1); list-style: none; padding: 10px 0; border-radius: 8px; min-width: 200px; z-index: 1001; }
        .dropdown:hover .dropdown-menu { display: block; }
        .dropdown-menu li a { font-size: 1rem; padding: 12px 20px; font-weight: 500; }
        .dropdown-menu li a:hover { background-color: #f8f9fa; }
        .dropdown-menu li a::after { display: none; } /* No underline for dropdown items */


        /* --- CTA Button --- */
        .nav-cta-button {
            font-family: Helvetica, sans-serif;
            background-color: var(--accent-green);
            color: #0e0000;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 600;
            transition: background-color 0.3s ease, transform 0.3s ease;
            display: flex;
            align-items: center;
            font-size: 1.1rem;
            gap: 8px;
            white-space: nowrap; /* Prevent text wrapping */
        }

        .nav-cta-button:hover {
            background-color: #4a9d4a;
            transform: translateY(-2px);
        }
         

        .hamburger { display: none; color: #333; font-size: 30px; cursor: pointer; }

        /* --- Responsive Styles --- */
        @media (max-width: 1100px) {
            .nav-links { display: none;
                 flex-direction: column; width: 100%;
                 color: #000000;
                  position: absolute; top: 80px; left: 0; 
                  background-color: #9a9a9a; padding: 0;
                   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.434); }
            .nav-links.active { display: flex; }
            .nav-links > li { margin: 0; width: 100%; }
            .nav-links a { padding: 15px 5%;
                 width: 100%; 
                 border-bottom: 1px solid #f0f0f090; }
            .nav-links > li > a::after { display: none; } /* Disable underline effect on mobile */
            .nav-cta-button { display: none; }
            .hamburger { display: block; }

            .dropdown .fa-chevron-down { display: inline-block; margin-left: auto; } /* Show dropdown arrows on mobile */
            .dropdown-menu { position: static;
                 box-shadow: none; 
                 border-radius: 0;
                  min-width: 100%; 
                background-color: #a3a3a3; border-bottom: 1px solid #000000; display: none; }
            .dropdown-menu.open { display: block; }
        }
/* ===============================
   WhatsApp Floating Button
================================= */
.whatsapp-float {
  position: fixed;
  bottom: 10px;
  right: 20px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 58px;
  cursor: pointer;
  transition: transform 0.3s ease;
  list-style: none
  
}
.navbar-whatsapp {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #25d366;
    color: #fff;
    padding: 6px 14px 6px 10px;
    border-radius: 22px;
    font-weight: 600;
    font-size: 1.3rem;
    text-decoration: none;
    margin-left: 18px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(37,211,102,0.08);
}
.navbar-whatsapp i {
    font-size: 1.7em;
}
.navbar-whatsapp:hover {
    background: #1ebe5d;
    color: #fff;
    box-shadow: 0 4px 16px rgba(37,211,102,0.18);
}

/* ================================================================
   FINAL - Responsive Floating WhatsApp Button
================================================================ */
@media (max-width: 768px) {
    /* Target the correct button class: .nav-cta-button */
    .nav-cta-button {
        /* 1. Detach and position it */
        position: fixed !important;
        top: 14px !important;
        right: 20px !important;
        z-index: 1000 !important;
        background-color: rgb(251, 250, 249);

        /* 2. Transform into a circle */
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        
        
        /* 3. Center the icon inside */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        /* 4. Reset desktop styles and hide text */
        padding: 0 !important;
        gap: 0 !important;
        font-size: 0 !important; /* This hides the phone number text */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    /* 5. Make the icon inside the button visible and sized correctly */
    .nav-cta-button i {
        font-size: 32px !important; /* Makes the WhatsApp icon large and visible */
        margin: 0 !important;
    }
}
.travel-hero {
background: linear-gradient(rgba(155, 155, 245, 0.488), rgba(0, 153, 255, 0.471)), url('assets/images/italy-8266783_1280\ 1.png') center/cover no-repeat;
 height: 60vh; /* Shorter than the full-screen hero */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: white;
 text-align: center;
 padding: 2rem;
 
}

.travel-hero h1 {
 font-size: 4rem;
 margin-bottom: 1rem;
 font-style: italic;
 text-shadow: 2px 2px 9px gray;
 animation: fadeIn 1.5s ease;



}

.travel-hero p {
 font-size: 1.2rem;
 font-weight: 200;
 font-style: italic;
   animation: fadeIn 1.5s ease;

}

/* ------------------ SECTION STYLES ------------------ */
section {
 padding: 60px 20px;
 text-align: center;
}

section h2 {
 font-size: 2.5rem;
 margin-bottom: 20px;
 position: relative;
 display: inline-block;
 color: var(--primary-dark);
}

.travel-diaries,
.itineraries,
.lesser-known-wonders {
 background-color: var(--card-bg);
 text-align: center;
}

.section-heading {
 text-align: center;
 margin-bottom: 20px;
}

.section-heading h2 {
 font-size: 2.5rem;
 margin-bottom: 5px;
 color: rgb(0, 0, 0);
}

.section-heading p {
 font-size: 1.2rem;
 color: var(--text-light);
}


/* ------------------ VERTICAL CARDS (Grid Layout) ------------------ */
.section-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 20px;
 margin-top: 20px;
 justify-content: center;
   animation: fadeIn 1.5s ease;

}
@media (max-width: 1200px) {
    .section-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Large Mobile Phones: 2 Cards Per Row --- */
@media (max-width: 768px) {
    .section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* --- All Mobile Phones: 1 Card Per Row --- */
@media (max-width: 500px) {
    .section-grid {
        grid-template-columns: 1fr;
    }
}
.vertical-card {
 background-color: var(--card-bg);
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 text-align: left;
 position: relative;
 cursor: pointer;
}

.vertical-card img {
 width: 100%;
 height: 400px;
 object-fit: cover;
 display: block;
}

.vertical-card-content {
 padding: 20px;
}

.vertical-card-content h3 {
 margin: 0 0 5px;
 font-size: 1.8rem;
 text-align: center;
 color: var(--primary-dark);
}

.vertical-card-content p {
 margin: 0;
 font-size: 1rem;
 color: var(--text-light);
}

/* ------------------ "DISCOVER MORE" BUTTON ------------------ */
.discover-more-btn {
 display: inline-block;
 padding: 15px 30px;
 margin-top: 30px;
 background-color: var(--accent-teal);
 color: white;
 text-decoration: none;
 border-radius: 5px;
 font-size: 1rem;
 font-weight: 600;
 transition: background-color 0.3s ease, transform 0.3s ease;
}

.discover-more-btn:hover {
 background-color: #16a085;
 transform: translateY(-3px);
}

/* ------------------ HORIZONTAL CAROUSEL (Lesser Known Wonders) ------------------ */
.lesser-known-wonders {
 background-color: var(--light-bg);
 padding: 80px 20px;
}

.lesser-known-wonders .section-heading h2 {
 font-size: 3rem;
 line-height: 1.2;
}

.scroller-wrapper {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
}

.lesser-known-scroll-container {
 display: flex;
 overflow-x: auto;
 gap: 20px;
 padding: 20px;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}

.lesser-known-scroll-container::-webkit-scrollbar {
 display: none;
}

.lesser-known-card {
 flex-shrink: 0;
 width: 300px;
 background-color: var(--card-bg);
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 position: relative;
 transition: transform 0.3s ease;
}

.lesser-known-card img {
 width: 100%;
 height: 400px;
 object-fit: cover;
}

.lesser-known-card .card-info {
 position: absolute;
 bottom: 20px;
 left: 20px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
 text-align: left;
}

.lesser-known-card .card-info h3 {
 font-size: 1.5rem;
 margin: 0;
}

.lesser-known-card .card-info p {
 font-size: 1rem;
 margin: 5px 0 0;
}

/* ------------------ SCROLL BUTTONS ------------------ */
.scroll-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
 border: none;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 font-size: 1rem;
 cursor: pointer;
 z-index: 10;
 transition: background-color 0.3s ease;
}

.scroll-btn:hover {
 background-color: rgba(0, 0, 0, 0.7);
}

.prev-btn {
 left: 10px;
}

.next-btn {
 right: 10px;
}

/* ------------------ CARD CAROUSEL (Updated) ------------------ */
.card-container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
}

.card-container::-webkit-scrollbar {
    display: none;
}

.card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}

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

.card h3 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
    position: absolute;
    bottom: 40px;
    left: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.card p {
    margin: 0;
    font-size: 0.9rem;
    color: white;
    position: absolute;
    bottom: 20px;
    left: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Carousel controls */
.controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.controls button {
    background-color: var(--accent-teal);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.controls button:hover {
    background-color: #16a085;
}

/* ------------------ VERTICAL CARD HOVER EFFECT ------------------ */
.vertical-card:hover {
    transform: translateY(-30px); /* Lifts the card up by 10px */
    box-shadow: 0 10px 20px rgba(215, 2, 2, 0.2), 0 0 15px var(--accent-teal); /* Adds a shadow and a teal glow */
}

/* ------------------ HORIZONTAL CARD HOVER EFFECT ------------------ */
.lesser-known-card:hover {
    transform: translateY(-30px); /* Lifts the card up by 10px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px var(--accent-teal); /* Adds a shadow and a teal glow */
}

.review-hero{
     background: linear-gradient(rgba(92, 155, 238, 0.577), rgba(199, 213, 9, 0.473)), url('assets/images/munnar.jpg') center/cover no-repeat;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-style: italic;
    text-align: center;
    font-family: 'Playfair Display', serif;
}
/* ------------------ Events Hero Section ------------------ */
.events-hero {
    background: linear-gradient(rgba(155, 155, 245, 0.919), rgba(0, 153, 255, 0.6)), url('assets/images/beach.jpg') center/cover no-repeat;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-family: 'Playfair Display', serif;
}

.events-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
      animation: fadeIn 1.5s ease;
    text-shadow: #807474 1px 1px 9px ;
    font-style: italic;
}

.events-hero p {
    font-size: 1.2rem;
    font-style: italic;
        animation: fadeIn 1.9s ease;

}

/* ------------------ Events Grid ------------------ */
.formal-events,
.informal-events {
    padding: 60px 20px;
    text-align: center;
      animation: fadeIn 1.5s ease;

}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
    justify-content: center;
}

/* ------------------ Event Card with Hover Animation ------------------ */
.event-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    background-color: #fff;
}

.event-card img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-content {
    padding: 20px;
    text-align: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s;
}

.card-content h3 {
    margin: 0 0 5px;
    font-size: 1.4rem;
    color: var(--primary-dark);
}

.card-content p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-light);
}

.card-hover-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(26, 188, 156, 0.9), rgba(52, 152, 219, 0.9));
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}

.card-hover-info h4 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.card-hover-info p {
    font-size: 1.1rem;
    padding: 0 10px;
}

/* Hover effect */
.event-card:hover .card-content {
    transform: translateY(-100%);
    opacity: 0;
}

.event-card:hover .card-hover-info {
    transform: translateY(0);
    opacity: 1;
}

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

.client-collage-container {
            width: 100%;
            /* Allow the container to grow and fill available space */
            flex-grow: 1;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .client-collage {
            display: grid;
            width: 100%;
            max-width: 1400px; /* Wider max-width for full page feel */
            gap: 12px; /* Reduced gap */
            /* Default to a 12-column grid for desktops for more flexibility */
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: minmax(180px, auto); /* Adjusted base row height */
        }

        .collage-item {
            position: relative;
            border-radius: 2px;
            max-height: 350px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }
        
      .item-1, .item-2, .item-3, .item-4 { grid-column: span 3; }
        /* Row 2: 3 images */
        .item-5, .item-6, .item-7 { grid-column: span 4; }
        /* Row 3: 4 images */
        .item-8, .item-9, .item-10, .item-11 { grid-column: span 3; }
        /* Row 4: 3 images */
        .item-12, .item-13, .item-14 { grid-column: span 4; }
        /* Row 5: 4 images */
        .item-15, .item-16, .item-17, .item-18 { grid-column: span 3; }


        .collage-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }
        
        .collage-item:hover {
            transform: scale(1.04);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }

        /* --- Responsive Design --- */

        /* Tablet Layout: 4 columns */
        
        /* Tablet Layout: 4 columns simplified to 2 pictures per row */
        @media (max-width: 1024px) {
            .client-collage {
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: minmax(150px, auto);
            }
            /* Make all items span 2 columns for a consistent 2xN grid */
            .client-collage .collage-item {
                grid-column: span 2;
            }
        }

        @media (max-width: 600px) {

    .header-section h1 {
        font-size: 2rem;
    }
    .client-collage-container {
        padding: 15px;
    }
    .client-collage {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* --- NEW --- */
    /* Create a more dynamic "web-like" pattern on mobile */
    /* Make the 1st, 4th, 7th, etc., item full-width */
    .collage-item:nth-child(3n + 1) {
        grid-column: span 2;
    }

    /* Make the subsequent two items half-width */
    .collage-item:nth-child(3n + 2),
    .collage-item:nth-child(3n + 3) {
        grid-column: span 1;
    }
}

        /* ///////image scoller */

        
        .pic-scroller-wrapper {
            width: 100%;
            overflow: hidden;
            padding: 20px 0;
            box-sizing: border-box;
            /* Creates a fade effect at the edges of the scroller */
            -webkit-mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
            mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
        }
        
        .pic-scroller-track {
            display: flex;
            width: max-content; /* Allows the container to be as wide as its content */
            flex-wrap: nowrap;
            /* The animation that moves the container */
            animation: scroll 80s linear infinite;
        }

        /* Pause the animation when the user hovers over the scroller */
        .pic-scroller-wrapper:hover .pic-scroller-track {
            animation-play-state: paused;
        }

        @keyframes scroll {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the container to the left by the width of one set of images */
                transform: translateX(calc(-100% / 2));
            }
        }

        .pic-scroller-item {
            width: 300px; /* Fixed width for each image container */
            height: 220px; /* Fixed height */
            margin: 0 8px; /* Space between images */
            flex-shrink: 0; /* Prevents images from shrinking */
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
            cursor: pointer;
        }

        .pic-scroller-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out;
        }
        
        .pic-scroller-item:hover {
            transform: scale(1.05);
            z-index: 10;
        }

        /* --- Responsive Design --- */
        @media (max-width: 768px) {
            .pic-scroller-item {
                width: 220px;
                height: 160px;
            }
             .pic-scroller-track {
                animation-duration: 60s; /* Scroll a bit faster on smaller screens */
            }
        }
/* ------------------ Fleet Hero Section ------------------ */
.fleet-hero {
    background: linear-gradient(rgba(96, 96, 190, 0.432), rgba(4, 209, 224, 0.493)), url('assets/images/Artboard\ 1\ copy\ 14.jpg') center/cover no-repeat;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.fleet-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-style: italic;
    text-shadow: #807474 1px 1px 9px ;
    animation: fadeIn 1.5s ease;

}

.fleet-hero p {
    font-size: 1.2rem;
    font-style: italic;
      animation: fadeIn 1.5s ease;

}

/* ------------------ Fleet Section (New Styling) ------------------ */
/* --- Fleet Section Styling --- */
.fleet-section {
    padding: 60px 20px;
    text-align: center;
            
}

.section-heading h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;

}

.section-heading p {
    font-size: 1.1rem;
    color: #666;
}

.fun-fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-top: 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.fun-fleet-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    width: 260px;
}

.fun-fleet-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
        
/* Consolidated "pop out" hover effect */
.fun-fleet-card:hover {
    transform: scale(1.05); /* Pops the card out */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.fun-fleet-card:hover img {
    transform: scale(1.1); /* Zoom image slightly on hover */
}

.fun-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    color: white;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    box-sizing: border-box;
}

.fun-card-info h3 {
    margin: 0;
    font-size: 1.5rem;
}
   @media (max-width: 480px) {
    .fleet-hero {
        height: 50vh; /* Slightly reduce hero height */
    }
    
    .fleet-hero h1 {
        font-size: 2.2rem; /* Further decrease heading size */
    }

    .fleet-hero p {
        font-size: 1rem; /* Further decrease paragraph size */
    }
    
    .fleet-section {
        padding: 40px 15px; /* Reduce padding on the section */
    }

    .fun-fleet-grid {
        gap: 15px; /* Reduce the gap between cards */
        grid-template-columns: 1fr; /* Stacks cards into a single column */
    }

    .fun-card-info h3 {
        font-size: 1.2rem; /* Make card titles smaller */
    }
}



/* --- Modal Styles --- */
.modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #ffffff;
    margin: auto;
    padding: 25px 35px;
    width: 90%;
    max-width: 800px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeIn 0.4s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #333;
}

.modal-body {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.modal-gallery {
    flex: 1;
}

.modal-gallery img {
    width: 100%;
    border-radius: 5px;
    object-fit: cover;
}

.modal-info {
    flex: 1;
}

@media (max-width: 768px) {
    .modal-body {
        flex-direction: column;
    }
}
/* ------------------ About Us Hero Section ------------------ */
.about-hero {
    background: linear-gradient(rgba(193, 253, 65, 0.482), rgba(4, 209, 224, 0.315)), url('assets/images/about.jpg') center/cover no-repeat;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(245, 245, 245);
    text-align: center;
    font-style: italic;
    text-shadow: #868686 1px 1px 9px ;
}

.about-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
      animation: fadeIn 1.5s ease;

}

.about-hero p {
    font-size: 1.2rem;
      animation: fadeIn 1.5s ease;

}

/* ------------------ Main About Content ------------------ */
.about-content {
    padding: 80px 20px;
    background-color: var(--card-bg);
      animation: fadeIn 1.5s ease;

}

.content-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.about-text {
    flex: 1;
    min-width: 300px;
    text-align: left;
}

.about-text h2 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 15px;
}

.about-image {
    flex: 1;
    min-width: 300px;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
/* ------------------ Ratings Section ------------------ */
        .ratings-section {
            padding: 80px 20px;
            background-color: #f8f9fa; /* A light grey background to make the section stand out */
            text-align: center;
        }

        .ratings-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px; /* Space between the cards */
            max-width: 1200px;
            margin: 40px auto 0;
        }

        .rating-item {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
            flex: 1;
            min-width: 220px; /* Ensures cards wrap nicely on smaller screens */
            max-width: 250px;
            text-align: center;
            border-top: 4px solid #209500; /* Accent color */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .rating-item:hover {
            transform: translateY(-8px); /* Lifts the card on hover */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .rating-item h3 {
            font-size: 2.8rem; /* Larger font size for the number */
            color: #343a40; /* Dark color for the number */
            margin: 0 0 5px 0;
            font-weight: 700;
        }

        .rating-item p {
            font-size: 1rem;
            color: #6c757d; /* Muted color for the text */
            margin: 0;
            font-weight: 500;
        }
/* ========================================= */
/* NEW STYLES FOR MISSION & VISION SECTION  */
/* ========================================= */

/* Styles the main "Our Mission & Vision" heading */
.about-text h2 {
    font-size: 2.6rem; /* Make the main title larger */
    font-weight: 700;
    margin-bottom: 40px;
    position: relative; /* Needed for the decorative line */
    padding-bottom: 15px;
    color: #2a2a2a;
}

/* Adds a decorative underline to the main H2 title */
.about-text h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px; /* Width of the line */
    height: 4px;
    background-color: #007bff; /* Accent color (blue) */
    border-radius: 2px;
}

/* Styles the "Mission" and "Vision" subheadings */
.about-text h3 {
    font-size: 1.9rem;
    font-weight: 600;
    color: #343a40;
    margin-top: 40px;      /* Adds space above Mission and Vision */
    margin-bottom: 20px;
    position: relative;
    padding-left: 25px;   /* Creates space for the vertical bar */
}

/* Adds a decorative vertical bar before each H3 */
.about-text h3::before {
    content: '';
    position: absolute;
    margin-left: -10px;
    top: 50%; /* Centers the bar vertically */
    transform: translateY(-50%);
    width: 5px;
    height: 100%; /* Makes the bar as tall as the text */
    max-height: 32px;
    background-color: #007bff; /* Matches the H2 accent color */
    border-radius: 3px;
}

  
/* Improves readability for the paragraph text */
.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5em; /* Standard paragraph spacing */
}
/* ------------------ Team Section ------------------ */
.team-section {
    padding: 60px 20px;
    background-color: var(--light-bg);
    text-align: center;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
    justify-content: center;
}

.team-card {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.team-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.team-info {
    padding: 20px;
}

.team-info h3 {
    margin: 0 0 5px;
    font-size: 1.4rem;
    color: var(--primary-dark);
}

.team-info p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-light);
}

/* Hover effect */
.team-card:hover {
    transform: translateY(-30px);
    box-shadow: 0 12px 24px rgb(0, 0, 0), 0 0 15px var(--accent-teal);
}

/* Media query for responsiveness */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
    }
}
/* ------------------ FOOTER -----------------*/



/* ------------------ HAMBURGER ------------------ */
/* Hamburger hidden on desktop */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  z-index: 1100;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: rgb(0, 0, 0);
  border-radius: 2px;
  transition: 0.3s;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    background: #4e9dec;
    gap: 1rem;
    padding: 1rem 0;
    z-index: 1000;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li a {
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
  }

  /* Hamburger open animation */
  .hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}



  
/* ------------------ DARK THEME ------------------ */
body.dark-theme {
  --primary-dark: #ecf0f1;   /* Light text */
  --accent-teal: #1abc9c;    /* Accent teal */
  --light-bg: #000000;       /* Page background */
  --card-bg: #111111;        /* Cards */
  --text-light: #bdc3c7;     /* Muted text */
  background: var(--light-bg);
  color: var(--primary-dark);
}

body.dark-theme .navbar {
  background-color: #111111a3; /* Dark solid nav */
}

body.dark-theme .nav-links li a {
  color: var(--primary-dark);
}

body.dark-theme .theme-toggle {
  color: yellow; /* icon visible */
}

@media (max-width: 768px) {
    .home-grid,
    .section-grid,
    .events-grid,
    .team-grid,
    .fun-fleet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- All Mobile Phones: 1 Card Per Row --- */
@media (max-width: 500px) {
    .home-grid,
    .section-grid,
    .events-grid,
    .team-grid,
    .fun-fleet-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Main Layout Adjustments */
    .navbar {
        flex-wrap: wrap;
        padding: 1rem 4%;
        position: relative;
    }

    .nav-links {
        display: none; /* Hide nav links by default */
        width: 100%;
        flex-direction: column;
        background: #4d4f5679;
        position: absolute;
        top: 100%;
        left: 0;
        text-align: center;
        padding: 1rem 0;
        gap: 1rem;
        z-index: 1000; /* keep above other elements */
        transition: all 0.3s ease-in-out;
    }

    .nav-links.active {
        display: flex; /* Show nav links when active */
    }

   

    .logo {
        order: 2; /* Center logo */
        margin: 0 auto;
    }

    .theme-toggle {
        order: 3; /* Move toggle to the end */
    }

    /* Hero Section */
    .text-content {
        left: 20px;
        bottom: 20px;
        width: calc(100% - 40px);
    }

    .text-content h1 {
        font-size: 3rem; /* Smaller font for hero heading */
    }

    .text-content p {
        font-size: 1rem;
        width: 100%;
    }

    .card-scroller-container {
        display: none; /* Hide the card scroller on small screens */
    }

    /* General Section and Card Adjustments */
    .home-section,
    .travel-diaries,
    .itineraries,
    .lesser-known-wonders,
    .formal-events,
    .informal-events,
    .fleet-section,
    .about-content,
    .team-section,
    .reviews-section {
        padding: 40px 10px; /* Reduced padding on all sections */
    }

    .section-heading h2 {
        font-size: 2rem;
    }
    
    .section-heading p {
        font-size: 1rem;
    }

    .vertical-card img,
    .lesser-known-card img,
    .event-card img,
    .fun-fleet-card img,
    .team-card img {
        height: 200px; /* Smaller card images */
    }

    /* About Page Specifics */
    .content-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .about-text,
    .about-image {
        min-width: 100%;
    }

    /* Reviews Section */
    .bento-container {
        grid-template-columns: 1fr; /* Stack bento boxes vertically */
    }

    .large-box {
        grid-column: span 1; /* Make large box full width */
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .footer-left,
    .footer-links,
    .footer-social {
        min-width: 100%;
        text-align: center;
    }

    .footer-social {
        display: flex;
        justify-content: center;
        gap: 15px;
    }
}

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
/* =================================================================== */
/* =========== NEW MOBILE FIXES (ADD TO END OF CSS FILE) ============= */
/* =================================================================== */

/* Define the fun animation keyframes */
@keyframes card-pop-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* --- Styles for tablets and phones (768px and smaller) --- */
@media (max-width: 768px) {

  /* 1. Make the logo smaller in the navbar */
  .navbar .logo img {
    height: 40px; /* Reduced from 50px */
  }

  /* 3. Add the fun animation to cards */
  /* This targets all cards within the main grid containers */
  .home-grid .home-card,
  .section-grid .vertical-card,
  .events-grid .event-card,
  .team-grid .team-card,
  .fun-fleet-grid .fun-fleet-card {
    /* Apply the animation */
    animation: card-pop-in 0.5s ease-out 0.2s;
    
    /* This makes sure the animation runs correctly */
    animation-fill-mode: both; 
  }
  
  /* Add a slight delay for every other card to look more dynamic */
  .home-grid .home-card:nth-child(even),
  .section-grid .vertical-card:nth-child(even),
  .events-grid .event-card:nth-child(even),
  .team-grid .team-card:nth-child(even),
  .fun-fleet-grid .fun-fleet-card:nth-child(even) {
      animation-delay: 0.3s;
  }
}


/* --- Styles for small phones (500px and smaller) --- */
@media (max-width: 500px) {
  
  /* 2. Center the fleet cards */
  .fun-fleet-grid {
    /* This centers the single card within the grid column */
    justify-items: center; 
  }
}
/* =================================================================== */
/* ==== FINAL MOBILE STYLES & FIXES (ADD TO END OF CSS FILE) ======= */
/* =================================================================== */

/* Define the fun animation keyframes */
@keyframes card-pop-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Styles for tablets and phones (1100px and smaller) --- */
@media (max-width: 1100px) {

  /* Make the navbar transparent */
  .navbar {
    background: rgba(252, 252, 252, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  body.dark-theme .navbar {
      background: rgba(30, 30, 30, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Make the open nav menu background transparent/glassy */
  .nav-links {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Smooth slide-down transition */
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
  }

  .nav-links.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
  }

  body.dark-theme .nav-links {
    background-color: rgba(30, 30, 30, 0.5);
  }

  /* Smoother transition for the hamburger icon */
  .hamburger span {
    transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.27, 1.55), opacity 0.2s linear;
  }

  /* Mobile dropdown menu functionality */
  .nav-links .dropdown .dropdown-toggle i {
    display: inline-block;
    margin-left: auto;
    padding-left: 15px;
    font-size: 0.8em;
    transition: transform 0.3s ease;
  }
  
  .nav-links .dropdown.open .dropdown-toggle i {
    transform: rotate(180deg);
  }

  .nav-links .dropdown .dropdown-menu {
    display: block;
    position: static;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0 10px;
  }
  
  body.dark-theme .nav-links .dropdown .dropdown-menu {
      background-color: rgba(255, 255, 255, 0.05);
  }
  
  .nav-links .dropdown.open .dropdown-menu {
    max-height: 500px;
    padding: 10px;
  }
  
  .nav-links .dropdown-menu li a {
      font-size: 1rem;
      font-weight: 400;
      padding: 12px 20px;
      border-bottom: none;
  }
}

/* --- Styles for smaller tablets and phones (768px and smaller) --- */
@media (max-width: 768px) {
  
  /* Make the logo smaller */
  .navbar .logo img {
    height: 40px;
  }

  /* Add fun animation to cards */
  .home-grid .home-card,
  .section-grid .vertical-card,
  .events-grid .event-card,
  .team-grid .team-card,
  .fun-fleet-grid .fun-fleet-card {
    animation: card-pop-in 0.5s e
    ase-out 0.2s;
    animation-fill-mode: both; 
  }
  
  .home-grid .home-card:nth-child(even),
  .section-grid .vertical-card:nth-child(even),
  .events-grid .event-card:nth-child(even),
  .team-grid .team-card:nth-child(even),
  .fun-fleet-grid .fun-fleet-card:nth-child(even) {
      animation-delay: 0.3s;
  }

  /* Reduce footer size */
  footer .aurora-waves {
    height: 70px;
  }

  footer .footer-container {
    padding: 30px 20px;
    gap: 25px;
    text-align: center;
  }
  div.footer-social{
    text-align: center;

  }
  footer .footer-info p,
  footer .footer-contact-item {
      font-size: 0.85rem;
      text-align: center;
  }
}

/* --- Styles for small phones (500px and smaller) --- */
@media (max-width: 500px) {
  
  /* Center the fleet cards */
  .fun-fleet-grid {
    justify-items: center; 
  }
  .nav-links{
    background-color: #c3c3c3bc;
  }
   /* Make all links in the mobile menu black for better contrast */
  
 .nav-links a,
   .nav-links .dropdown-menu li a,
  .nav-links .dropdown .dropdown-toggle i {
    color: #070000;
  }
}
/* =================================================================== */
/* ==== FINAL MOBILE STYLES & FIXES (ADD TO END OF CSS FILE) ======= */
/* =================================================================== */

/* Define the fun animation keyframes */
@keyframes card-pop-in {
 from {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
 }
 to {
  opacity: 1;
  transform: scale(1) translateY(0);
 }
}

/* --- Styles for tablets and phones (1100px and smaller) --- */
@media (max-width: 1100px) {

 /* Make the navbar transparent */
 .navbar {
    /* CHANGED: Set background to transparent */
  background: transparent; 
    /* REMOVED: backdrop-filter and border for a truly transparent look */
  backdrop-filter: none;
    -webkit-backdrop-filter: none;
  border-bottom: none;
 }
 
 body.dark-theme .navbar {
    /* Also make the dark theme navbar transparent */
  background: transparent;
    border-bottom: none;
 }

 /* Make the open nav menu background glassy */
 .nav-links {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
 }

 .nav-links.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
 }

 body.dark-theme .nav-links {
  background-color: rgba(30, 30, 30, 0.5);
 }

  /* Make all links in the mobile menu black for better contrast */
  .nav-links a,
  .nav-links .dropdown-menu li a,
  .nav-links .dropdown .dropdown-toggle i {
    color: #070000 !important; /* Use !important to ensure override */
  }

 /* Smoother transition for the hamburger icon */
 .hamburger span {
  transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.27, 1.55), opacity 0.2s linear;
 }

 /* Mobile dropdown menu functionality */
 .nav-links .dropdown .dropdown-toggle i {
  display: inline-block;
  margin-left: auto;
  padding-left: 15px;
  font-size: 0.8em;
  transition: transform 0.3s ease;
 }
 
 .nav-links .dropdown.open .dropdown-toggle i {
  transform: rotate(180deg);
 }

 .nav-links .dropdown .dropdown-menu {
  display: block;
  position: static;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  padding: 0 10px;
 }
 
 body.dark-theme .nav-links .dropdown .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.05);
 }
 
 .nav-links .dropdown.open .dropdown-menu {
  max-height: 500px;
  padding: 10px;
 }
 
 .nav-links .dropdown-menu li a {
  font-size: 1rem;
  font-weight: 400;
  padding: 12px 20px;
  border-bottom: none;
 }
}

/* --- Styles for smaller tablets and phones (768px and smaller) --- */
@media (max-width: 768px) {
 
 /* Make the logo smaller */
 .navbar .logo img {
  height: 40px;
 }
 /* Add fun animation to cards */
 .home-grid .home-card,
 .section-grid .vertical-card,
 .events-grid .event-card,
 .team-grid .team-card,
 .fun-fleet-grid .fun-fleet-card {
  animation: card-pop-in 0.5s ease-out 0.2s;
  animation-fill-mode: both; 
 }
 
 .home-grid .home-card:nth-child(even),
 .section-grid .vertical-card:nth-child(even),
 .events-grid .event-card:nth-child(even),
 .team-grid .team-card:nth-child(even),
 .fun-fleet-grid .fun-fleet-card:nth-child(even) {
   animation-delay: 0.3s;
 }
 /* Reduce footer size */
 footer .aurora-waves {
  height: 70px;
 }
 footer .footer-container {
  padding: 30px 20px;
  gap: 25px;
 }
 
 footer .footer-info p,
 footer .footer-contact-item {
  font-size: 0.5rem;
 }
}

/* --- Styles for small phones (500px and smaller) --- */
@media (max-width: 500px) {
 
 /* Center the fleet cards */
 .fun-fleet-grid {
  justify-items: center; 
 }
 footer .footer-info p,
 footer .footer-contact-item {
  font-size: 0.5rem;
 }
}



/* =================================================================== */
/* ==== NEW "INSTAGRAM-STYLE" MOBILE OVERHAUL (Based on Video) ==== */
/* ==== Replace your previous mobile CSS block with this one ==== */
/* =================================================================== */


/* --- Default styles for desktop --- */
.video-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  gap: 20px;
  justify-content: center; /* Centers the videos */
  padding: 10px;
}

.video-container iframe {
  max-width: 450px; /* Ensures videos don't get too large */
  width: 100%;
  border-radius: 8px; /* Optional: adds rounded corners */
}


/* --- Mobile styles for the horizontal scroller --- */
/* This media query applies styles only on screens 768px or narrower */
@media (max-width: 768px) {
  .video-container {
    flex-wrap: nowrap;          /* Prevents videos from wrapping */
    overflow-x: auto;         /* Enables horizontal scrolling */
    justify-content: flex-start;  /* Aligns videos to the start */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory;   /* Optional: makes scrolling snap */
  }

  .video-container iframe {
    flex: 0 0 90%; /* Prevents videos from shrinking, sets width to 90% of viewport */
    scroll-snap-align: center; /* Optional: snaps video to the center */
    width: 90%;
    height: auto;
    aspect-ratio: 16 / 9; /* Maintains video aspect ratio */
  }
  
  /* Optional: Hides the scrollbar for a cleaner look */
  .video-container::-webkit-scrollbar {
    display: none;
  }
}
events-hero
/*  */

/* ///////////yt vid/// */
/* --- Default styles for desktop --- */
.video-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  gap: 20px;
  justify-content: center; /* Centers the videos */
  padding: 10px;
}

.video-container iframe {
  max-width: 450px; /* Ensures videos don't get too large */
  width: 100%;
  border-radius: 8px; /* Optional: adds rounded corners */
}


/* --- Mobile styles for the horizontal scroller --- */
/* This media query applies styles only on screens 768px or narrower */
@media (max-width: 768px) {
  .video-container {
    flex-wrap: nowrap;          /* Prevents videos from wrapping */
    overflow-x: auto;         /* Enables horizontal scrolling */
    justify-content: flex-start;  /* Aligns videos to the start */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory;   /* Optional: makes scrolling snap */
  }

  .video-container iframe {
    flex: 0 0 90%; /* Prevents videos from shrinking, sets width to 90% of viewport */
    scroll-snap-align: center; /* Optional: snaps video to the center */
    width: 90%;
    height: auto;
    aspect-ratio: 16 / 9; /* Maintains video aspect ratio */
  }
  
  /* Optional: Hides the scrollbar for a cleaner look */
  .video-container::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 500px) {
    /* Adjustments for the smallest phones */
    .clients-grid {
        gap: 1px !important;
        padding: 0 10px !important;
    }
    
}/* =================================================================== */
/* ==== NEW COMPACT & UI-FRIENDLY VERSION (Based on Feedback) ==== */
/* ==== Goal: Reduce the size of everything for a cleaner UI ==== */
/* =================================================================== */

@media (max-width: 768px) {

    /* --- 1. Compact Hero Sections --- */
    .travel-hero,
    .events-hero,
    .fleet-hero,.review-hero,
    .about-hero {
        height: 45vh !important; /* SIGNIFICANTLY REDUCED height */
        padding: 1rem !important;
        justify-content: center !important; /* Re-center content */
    }

    .travel-hero h1,
    .events-hero h1,
    .fleet-hero h1,
    .about-hero h1 {
        font-size: 2.2rem !important; /* REDUCED font size */
    }
    
    .travel-hero p,
    .events-hero p,
    .fleet-hero p,
    .about-hero p {
        font-size: 1rem !important; /* REDUCED font size */
    }


    /* --- 2. Smaller, Contained Content Cards --- */
    
    /* Re-introduce padding to sections to give cards breathing room */
    .home-section, .reviews-section, .clients-section, .fleet-section, .team-section, .about-content {
        padding: 40px 15px !important; 
    }

    /* Use grid for consistent (and smaller) spacing */
    .home-grid, .section-grid, .events-grid, .team-grid, .fun-fleet-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important; /* REDUCED gap between cards */
    }

    /* New compact card style with subtle shadow */
    .home-card,
    .event-card,
    .team-card,
    .fun-fleet-card {
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
        border: 1px solid #eee !important;
        max-height: 160px;
    }
    
    /* REDUCE height of images within cards */
    .home-card img,
    .event-card img,
    .team-card img {
        height: 100% !important;
    }
    .fun-fleet-card img {
         height: 180px !important;
    }

    /* REDUCE font sizes inside all cards */
    .home-card-info h3, .vertical-card-content h3, .event-card .card-content h3, .team-info h3 {
        font-size: 1.2rem !important;
    }
     .fun-card-info h3 {
        font-size: 1.1rem !important;
     }
    .home-card-info p, .vertical-card-content p, .event-card .card-content p, .team-info p {
        font-size: 0.9rem !important;
    }

    /* --- 3. General UI & Font Size Reduction --- */
    
    .section-heading h2 {
        font-size: 1.8rem !important; /* REDUCED section title size */
    }
    .section-heading p {
        font-size: 0.95rem !important;
    }
    
    .discover-more-btn {
        padding: 10px 20px !important; /* Smaller button */
        font-size: 0.9rem !important;
    }

    /* --- 4. Compact Footer --- */
    .footer-container {
        gap: 20px !important; /* REDUCED space in footer */
        padding: 30px 20px !important;
    }

    .footer-info p, .footer-contact-item a, .footer-bottom {
        font-size: 0.8rem !important; /* REDUCED footer font size */
    }
    .footer-social h3 {
        font-size: 1rem !important;
    }
    
    /* --- 5. Kept Fixes --- */
    .navbar .logo img {
        height: 32px !important; /* Further reduced logo size */
    }

    .clients-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        padding: 0 !important; /* Remove padding to use section's padding */
    }
    .client-logo img {
        max-width: 80px !important;
    }
    
    /* Smaller mobile menu text */
    .nav-links li a {
       font-size: 1.3rem !important; 

    }
  
}

/* //////////////////////////////////////////////// */

.section-heading {
    text-align: center;
    margin-bottom: 1rem;
    font-family: sans-serif;
}

@media (max-width: 400px){
    .carousel{
        max-width: 290px !important;
    }
    .mp-city{
            font-size: clamp(1rem, 10vw, 6rem) !important;

    }
}

/* The main carousel container that acts as the viewport. */
.carousel {
    /* 1. Use viewport width for a responsive size */
    width: 95vw; /* Sets width to 90% of the screen's width */
    max-width: 1400px; /* Sets a maximum size for large screens */

    /* 2. Set height automatically based on width to maintain proportions */
    aspect-ratio: 16 / 6;

    margin-inline: auto;
    position: relative; /* Needed for more complex layouts */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* The track that holds all the slides in a row. */
.carousel-track {
    display: flex;
    height: 100%;

    /* 3. Set the track width to 500% because there are 5 slides */
    width: 900%;

    /* The animation remains the same */
    animation: carousel-scroll 15s infinite ease-in-out;
}

/* Styling for each individual slide. */
.carousel-slide {
   width: 11.111111%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    position: relative;
    
    /* These three lines will perfectly center the .mp-city div */
    display: flex;
    justify-content: center;
}
    

/* Makes text pop */
.mp-city {
    font-family: 'Georgia', serif;
    /* Made the text even bigger as it's the only element now */
    font-size: clamp(2rem, 10vw, 6rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    text-align: center; /* Good for names with multiple words */
    /* text-shadow: 2px 2px rgb(255, 255, 255); */
    /* The image fill effect */
    background: rgb(255, 255, 255);
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* 5. The keyframes are updated to work with the new percentage-based widths. */
@keyframes carousel-scroll {
    0%, 9%   { transform: translateX(0%); }
    11%, 20% { transform: translateX(-11.111111%); }
    22%, 31% { transform: translateX(-22.222222%); }
    33%, 42% { transform: translateX(-33.333333%); }
    44%, 53% { transform: translateX(-44.444444%); }
    55%, 64% { transform: translateX(-55.555555%); }
    66%, 75% { transform: translateX(-66.666666%); }
    77%, 86% { transform: translateX(-77.777777%); }
    88%, 100% { transform: translateX(-88.888888%); } /* This is the 9th slide (the clone) */
}