/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --primary: #0a192f;   /* Dark Navy */
    --secondary: #87CEEB; /* Soft Sky Blue */
    --white: #ffffff;
    --gold: #C5A059;      /* Luxury Gold */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    overflow-x: hidden; /* Prevents horizontal scroll */
}

/* --- TOP BAR (Contact Info) --- */
.top-bar {
    background: #050d1a; /* Very dark navy */
    color: rgba(255,255,255,0.7);
    padding: 10px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1001;
}

/* ADD THIS TO FIX THE BLACK TEXT ISSUE */
.top-bar a {
    color: rgba(255,255,255,0.7) !important; /* Forces text to be White */
    text-decoration: none; /* Removes the underline */
}

.top-bar a:hover {
    color: #ffffff !important; /* Makes it bright white when you hover */
}

.top-bar .container {
    display: flex;
    justify-content: flex-start; /* Aligns content to left */
    gap: 30px;
}

.contact-item i { margin-right: 8px; color: var(--secondary); }

/* --- MAIN HEADER --- */
header {
    background: rgba(10, 25, 47, 0.85); /* Transparent Dark Navy */
    padding: 20px 0;
    position: absolute; /* Floats over the hero image */
    width: 100%;
    top: 40px; /* Pushes it down below the top-bar */
    z-index: 1000;
    backdrop-filter: blur(5px); /* Modern blur effect */
}

.container { width: 85%; max-width: 1200px; margin: auto; }

nav { display: flex; justify-content: space-between; align-items: center; }

.logo {
    color: var(--white);
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-links { list-style: none; display: flex; gap: 40px; }
.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: 0.3s;
}
.nav-links a:hover { color: var(--secondary); }

/* --- HERO SECTION --- */
.hero {
    /* Ensure your image is named 'hero-bg.jpg' */
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('hero-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Full Screen */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 80px; /* Offset for header */
}

.hero-content {
    max-width: 1000px;
    padding: 20px;
}

/* Badge Style */
.hero-badge {
    display: inline-block;
    color: var(--primary);
    background: var(--secondary); /* Sky blue background */
    padding: 8px 25px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    border-radius: 50px; /* Pill shape */
}

/* Main Heading (H1) */
.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    text-transform: capitalize;
}

/* Sub-Heading */
.hero h3 {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--gold); /* Highlighted Gold Color */
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

/* Short Description */
.hero-desc {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto; /* Centered, no bottom margin needed since no button */
    color: rgba(255,255,255,0.95);
    font-weight: 500;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    header { top: 0; position: relative; background: var(--primary); }
    .top-bar { display: none; } /* Hide top bar on small mobile for space */
    .hero { height: auto; padding: 100px 0; }
    .hero h1 { font-size: 2.8rem; }
    .hero h3 { font-size: 1.3rem; }
    .nav-links { display: none; }

}

/* --- SECTION 2: OUR STORY --- */
.story-section {
    background-color: var(--primary); /* Dark Navy Blue */
    padding: 100px 0;
    position: relative;
}

.story-container {
    display: flex;
    align-items: center;
    gap: 60px; /* Space between image and text */
    width: 85%;
    max-width: 1200px;
    margin: auto;
}

/* Image Styling with White Border */
.story-img-box {
    flex: 1; /* Takes up half the space */
}

.story-img {
    width: 100%;
    border: 8px solid #ffffff; /* The White Line Border */
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Shadow for depth */
}

/* Text Content Styling */
.story-content {
    flex: 1; /* Takes up the other half */
}

.story-subtitle {
    color: var(--secondary); /* Light Blue */
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.story-title {
    color: var(--secondary); /* Light Blue Headings */
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 25px;
}

.story-text {
    color: #ffffff; /* White Text */
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    opacity: 0.9;
}

/* The Checklist Area */
.features-list-title {
    color: var(--secondary); /* Light Blue */
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.features-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns of items */
    gap: 15px;
}

.features-list li {
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.features-list i {
    color: var(--secondary); /* Light Blue Ticks */
    margin-right: 10px;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .story-container {
        flex-direction: column; /* Stack them on mobile */
    }
    .story-img { margin-bottom: 30px; }
}
/* --- SECTION 3: FEATURED DESTINATIONS (Appealing Badges & Features) --- */
.featured-section {
    background-color: #ffffff; /* White Background */
    padding: 60px 0;
}

.featured-header {
    text-align: center;
    margin-bottom: 50px;
}

/* BIG APPEALING FONT with GREY SHADOW */
.featured-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
    text-shadow: 4px 4px 0px #d3d3d3; /* Grey Shadow */
}

.featured-subtitle {
    color: #555;
    font-size: 1.1rem;
    font-weight: 500;
}

/* GRID LAYOUT - Compact */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* CARD DESIGN - Black Border + Light Blue Shadow */
.dest-box {
    background: #fff;
    border: 1px solid #000000;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s ease;
    box-shadow: 8px 8px 0px #87CEEB; /* Light Blue Shadow */
    display: flex;
    flex-direction: column; /* Ensures content stacks properly */
}

.dest-box:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 0px #87CEEB;
}

/* IMAGE SIZING - Compact */
.dest-box img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #000;
}

/* CONTENT STYLING */
.dest-content {
    padding: 20px 25px;
    text-align: left;
    flex-grow: 1; /* Makes sure cards are same height */
    display: flex;
    flex-direction: column;
}

/* --- NEW: DESTINATION BADGE STYLE (Like Hero Section) --- */
.dest-badge {
    display: inline-block;
    background-color: var(--secondary); /* Light Blue Bg */
    color: var(--primary); /* Dark Blue Text */
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px; /* Pill shape */
    margin-bottom: 15px;
    align-self: flex-start; /* Aligns badge to the left */
}

.dest-info {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* --- NEW: FEATURE LIST STYLES --- */

.dest-features {
    list-style: none;
    padding: 0;
    margin-top: auto; /* Pushes list to bottom of card if descriptions vary */
    border-top: 1px solid #eee; /* Light separator line */
    padding-top: 15px;
}

.dest-features li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--primary); /* Dark Blue Text */
    margin-bottom: 8px;
    font-weight: 600;
}

.dest-features i {
    color: var(--secondary); /* Light Blue Icon */
    margin-right: 10px;
    font-size: 0.8rem;
}
/* --- SECTION 4: WHY CHOOSE US (Strict Horizontal Split) --- */
.why-us-section {
    background-color: #0B1C2D; /* Deep Midnight Blue */
    display: flex; /* Creates the side-by-side layout */
    flex-direction: row; /* Horizontal direction */
    width: 100%;
    overflow: hidden; /* Prevents scrolling issues */
}

/* LEFT SIDE: TEXT (Strict 50%) */
.why-text-col {
    width: 50%; /* Forces exact half width */
    padding: 60px 50px;
    background-color: #0B1C2D;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
}

.why-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: #D4AF37; /* Soft Gold */
    margin-bottom: 40px;
    border-bottom: 2px solid #D4AF37;
    display: inline-block;
    padding-bottom: 10px;
    align-self: flex-start;
}

/* CARDS STYLING */
.why-item-card {
    background-color: #132A43; /* Soft Navy Card Background */
    padding: 20px 25px;
    margin-bottom: 15px;
    border-radius: 8px;
    border-left: 5px solid #E6C76A; /* Muted Gold Accent */
    transition: 0.3s;
}

.why-item-card:hover {
    transform: translateX(8px);
    background-color: #1a3858;
}

/* Header inside the card (Icon + Title) */
.why-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.why-item-header i {
    color: #E6C76A; /* Muted Gold Icon */
    font-size: 1.1rem;
    margin-right: 12px;
}

.why-item-title {
    color: #F2F4F7; /* Off White Subheading */
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Body text inside the card */
.why-item-desc {
    color: #C9D1D9; /* Light Grey Body Text */
    font-size: 0.9rem;
    line-height: 1.5;
    margin-left: 28px; /* Aligns with text, ignoring icon */
}

/* Footer Text */
.why-footer-text {
    margin-top: 25px;
    color: #D4AF37; /* Soft Gold */
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    text-align: center;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    padding-top: 20px;
}

/* RIGHT SIDE: IMAGE (Strict 50%) */
.why-image-col {
    width: 50%; /* Forces exact half width */
    position: relative;
    height: auto; /* Stretches to match text height */
}

.why-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the half-screen perfectly */
    display: block;
}

/* MOBILE RESPONSIVE (Only stacks on very small screens) */
@media (max-width: 900px) {
    .why-us-section {
        flex-direction: column-reverse; /* Image on top, Text on bottom */
    }
    .why-text-col, .why-image-col {
        width: 100%; /* Full width on mobile */
    }
    .why-image-col {
        height: 300px;
    }
    .why-text-col {
        padding: 40px 20px;
    }
}
/* --- SECTION 5: EXPERIENCE STRIP & TESTIMONIALS --- */

/* 0. WHITE DIVIDER (Between Page 4 and 5) */
.page-divider {
    height: 40px;
    background-color: #ffffff;
    width: 100%;
}

/* 1. EXPERIENCE GALLERY STRIP (Complete Visibility Fix) */
.experience-section {
    background-color: #1C2533;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.exp-item {
    width: 25%;
    flex: 0 0 25%;
    /* Reduced height to 250px so landscape images show fully without cutting sides */
    height: 300px;
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.exp-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* cover ensures it fills, but shorter height keeps width visible */
    display: block;
    transition: transform 0.6s ease;
    filter: brightness(0.9);
}

.exp-item:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.exp-text {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #b1f2ff;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
    pointer-events: none;
}

/* 2. TESTIMONIALS SECTION (Dark Blue BG) */
.testimonials-section {
    background-color: #1C2533; /* Deep Slate Blue */
    padding: 60px 0; /* Reduced padding */
    position: relative;
}

/* HEADER WITH LIGHT BLUE BOX */
.testi-header {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testi-header-box {
    background-color: #87CEEB; /* Light Blue Box */
    padding: 10px 30px;
    border-radius: 50px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 15px;
}

.testi-title {
    color: #1C2533; /* Dark Blue Text */
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.testi-subtitle {
    color: #D0D6DF;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* SLIDER CONTAINER */
.slider-container {
    max-width: 1300px;
    margin: auto;
    position: relative;
    padding: 0 50px;
}

.reviews-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 10px 5px;
}

/* REVIEW CARD (Shorter & Compact) */
.review-card {
    background-color: #2A3445; /* Charcoal Blue */
    border: 1px solid #364259;
    border-radius: 12px;
    background-color: #2A3445;
    border: 1px solid #364259;
    border-radius: 16px;
    width: 360px;          /* 🔑 FIX */
    min-width: 360px;      /* 🔑 FIX */
    max-width: 360px;      /* 🔑 FIX */
    padding: 26px;
    flex-shrink: 0;
    transition: 0.35s ease;
    display: flex;
    flex-direction: column;
    height: 320px;         /* Reduced height */
}

.review-card:hover {
    border-color: #E2C275;
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.review-text {
    color: #D0D6DF;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 24px;
    height: 140px; /* Allows longer testimonials */
    overflow: hidden;
}

/* Star Ratings (Moved up slightly) */
.stars {
color: #F2B705;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

/* Client Info */
.client-info {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 16px;
    margin-top: auto;
}

.client-details h4 {
    color: #F6F1E9;
    font-size: 1.05rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.client-location {
    color: #9AA6B2;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* NAVIGATION ARROWS */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #4DB6AC;
    color: #1C2533;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    z-index: 10;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.nav-btn:hover {
    background-color: #E2C275;
    color: #000;
}

.prev-btn { left: 0px; }
.next-btn { right: 0px; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .review-card { min-width: calc(50% - 15px); }
}
@media (max-width: 768px) {
    .exp-item { width: 50%; flex: 0 0 50%; height: 180px; }
    .review-card { min-width: 100%; height: auto; }
    .experience-section { flex-wrap: wrap; }
}
/* --- SECTION 6: FOOTER (White BG + Light Grey Boxes) --- */
footer {
    background-color: #ffffff; /* White Page Background */
    padding-top: 70px;
    font-size: 0.95rem;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    padding: 0 40px;
    gap: 40px;
}

.footer-col {
    flex: 1;
    min-width: 280px;
}

/* HEADING BOX (Light Blue) */
.footer-heading-box {
    background-color: #87CEEB; /* Light Blue */
    padding: 10px 25px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.footer-heading {
    color: #1C2533; /* Dark Blue Text */
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

/* CONTENT BOX (Filled with Light Grey) */
.footer-content-box {
    /* CHANGED: Light Grey Background */
    background-color: #f9f9f9;
   
    padding: 30px; /* Increased padding slightly for better look */
    border-radius: 12px;
   
    color: #666666; /* Light Grey Text */
   
    /* Light Black Blend Shadow */
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
   
    line-height: 1.7;
    transition: transform 0.3s ease;
    border: 1px solid #eeeeee; /* Very subtle border definition */
}

.footer-content-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    background-color: #f0f0f0; /* Slightly darker grey on hover */
}

/* Text Styling */
.footer-desc {
    font-size: 0.9rem;
    color: #000000;
    margin: 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0; /* Slightly darker line for grey bg */
    padding-bottom: 8px;
}

.footer-links i {
    color: #000000; /* Light Blue Icon */
    margin-right: 12px;
    font-size: 0.9rem;
}

.footer-links a {
    color: #000000;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 500;
}

.footer-links a:hover {
    color: #1C2533;
    padding-left: 5px;
}

/* Contact Items */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    color: #000000;
}

.contact-item i {
    color: #00000;
    margin-right: 15px;
    font-size: 1.1rem;
    margin-top: 4px;
}

/* COPYRIGHT BOTTOM BAR */
.footer-bottom {
    background-color: #1C2533; /* Dark Blue Contrast Bar */
    text-align: center;
    padding: 20px;
    margin-top: 60px;
}

.copyright-text {
    color: #ffffff; /* Bright White Text */
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        padding: 0 20px;
    }
}
/* --- DESTINATIONS SECTION STYLES --- */
.dest-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.tab-btn {
    padding: 12px 30px;
    border: 2px solid #C5A059;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    text-transform: uppercase;
}
.tab-btn.active, .tab-btn:hover {
    background: #C5A059;
    color: #000;
}
.city-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
}
.city-box {
    background: #1C2533;
    color: #fff;
    padding: 20px 10px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
}
.city-box:hover {
    background: #C5A059;
    color: #000;
    transform: translateY(-3px);
}
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: #fff;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    border-radius: 8px;
}
.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    font-weight: bold;
}
.modal-title {
    font-family: 'Playfair Display', serif;
    color: #1C2533;
    font-size: 2rem;
    margin-bottom: 25px;
    text-align: center;
    border-bottom: 2px solid #C5A059;
    display: inline-block;
}
.hotel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.hotel-card {
    background: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
}
.hotel-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background-color: #ddd;
}
.hotel-name {
    padding: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}
.coming-soon {
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    padding: 50px;
    font-family: 'Playfair Display', serif;
}
@media (max-width: 900px) {
    .city-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .city-grid { grid-template-columns: repeat(2, 1fr); }
    .tab-btn { padding: 10px 20px; font-size: 0.9rem; }
}
/* --- NEW FULL-SCREEN OVERLAY STYLES --- */

/* 1. The Main Destinations Overlay (Hidden by default) */
.full-page-overlay {
    display: none; /* Hidden initially */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background-color: #0B1C2D; /* Dark Navy Background */
    z-index: 3000; /* sits on top of everything */
    overflow-y: auto; /* allows scrolling */
    padding-top: 60px;
    animation: fadeIn 0.3s ease;
}

/* Close Button for Main Overlay */
.close-main-btn {
    position: absolute;
    top: 20px; right: 30px;
    font-size: 3rem;
    color: #C5A059;
    cursor: pointer;
    background: none;
    border: none;
    font-weight: bold;
}

.overlay-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    text-align: center;
}

/* 2. Tabs inside Overlay */
.dest-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    margin-top: 20px;
}

.tab-btn {
    padding: 12px 30px;
    border: 2px solid #C5A059;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    text-transform: uppercase;
}

.tab-btn.active, .tab-btn:hover {
    background: #C5A059;
    color: #000;
}

/* 3. City Grid */
.city-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
}

.city-box {
    background: #1C2533;
    color: #fff;
    padding: 20px 10px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
}

.city-box:hover {
    background: #C5A059;
    color: #000;
    transform: translateY(-3px);
}

/* 4. HOTEL POPUP (Sits on top of the Overlay) */
.hotel-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 4000; /* Higher than main overlay */
    justify-content: center;
    align-items: center;
}

.hotel-modal-content {
    background: #fff;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    border-radius: 8px;
}

.hotel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.hotel-card {
    background: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.hotel-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background-color: #ddd;
}

.hotel-name {
    padding: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .city-grid { grid-template-columns: repeat(3, 1fr); }
}