/* =========================================
   1. CSS VARIABLES (The Control Center)
   ========================================= */
:root {
    /* --- BRAND COLORS (Dark Theme) --- */
    --bg-charcoal: #010101; /* UPDATED to #010101 */
    /* Main Background */
    --bg-darker: #010101;
    /* Deep Contrast */
    --primary-gold: #E3C565;
    /* Main Action Color */
    --gold-hover: #Cca340;
    --text-white: #ffffff;
    --text-grey: #a0a0a0;

    /* --- JOURNEY SECTION COLORS (Light Theme) --- */
    --bg-light-beige: #FAF4ED;
    /* The Video Background */
    --text-almost-black: #111111;
    /* The Video Text Color */
    --text-muted-brown: #5c554b;
    --accent-orange: #E38154;
    /* The Wave Line */
    --btn-beige-bg: #EBE4DB;
    /* The "More Info" Button */

    /* --- LAYOUT & SHAPES --- */
    --container-width: 1200px;
    --border-radius-pill: 10px;
    --border-radius-card: 20px;

    /* --- ANIMATION PHYSICS --- */
    --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
    /* Snappy & Smooth */
    --transition-speed: 0.4s;
}

/* =========================================
   2. GLOBAL RESET & TYPOGRAPHY
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-charcoal);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   3. BUTTONS
   ========================================= */

/* A. Standard Gold Button */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--border-radius-pill);
    transition: all var(--transition-speed) var(--ease-apple);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary-gold);
    color: var(--bg-charcoal);
    border-radius: 8px;
    text-decoration: none;
    padding: 8px 12px;
    color: var(--bg-charcoal);
}

.btn-primary:hover {
    background-color: var(--gold-hover);
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(227, 197, 101, 0.3);
    transition: all 0.3s var(--ease-apple);
}

/* B. Luxury "Light Sweep" Button (Header) */
.btn-sweep {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-charcoal);
    color: var(--primary-gold);
    border: 1px solid rgba(227, 197, 101, 0.3);
    padding: 8px 26px;
    border-radius: var(--border-radius-pill);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s var(--ease-apple);
    z-index: 1;
    padding: 6px 10px;
}

/* The Sweep Effect */
.btn-sweep::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 45-degree Gold Beam */
    background: linear-gradient(45deg,
            transparent 10%,
            rgba(227, 197, 101, 0.4) 50%,
            transparent 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    /* 5s Loop: 3s move + 2s pause */
    animation: lightSweep 5s ease-in-out infinite;
    z-index: -1;
}

.btn-sweep:hover {
    transform: scale(1.05);
    background-color: #363636;
    color: #fff;
    border-color: var(--primary-gold);
}

/* C. Simple Beige Button (Animated Reveal) */
.btn-simple {
    background-color: var(--btn-beige-bg);
    color: var(--text-almost-black);
    padding: 12px 24px;
    /* Slightly adjusted padding */
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;

    /* Layout for animation */
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* No gap initially */

    transition: all 0.3s var(--ease-apple);
}

/* The Text Label */
.btn-simple span {
    transition: transform 0.5s var(--ease-apple);
}

/* The Arrow Icon (Hidden State) */
.btn-simple .btn-icon {
    width: 18px;
    height: 18px;
    max-width: 0;
    /* Collapsed width */
    opacity: 0;
    /* Invisible */
    transform: translateX(-10px);
    /* Pushed left */
    transition: all 0.3s var(--ease-apple);
}

/* HOVER STATE (The Animation) */
.btn-simple:hover {
    background-color: #dcd4ca;
    /* Darker beige */
    gap: 8px;
    /* Create space between text and arrow */
    padding-right: 20px;
    /* Balance the padding */
}

.btn-simple:hover .btn-icon {
    max-width: 20px;
    /* Expand width */
    opacity: 1;
    /* Fade in */
    transform: translateX(0);
    /* Slide into place */
}

/* =========================================
   4. HEADER & NAVIGATION (Docking Style)
   ========================================= */
#main-header {
    /* INITIAL STATE (Before Scroll) */
    position: fixed;
    top: 20px;
    /* Floating gap from top */
    left: 50%;
    transform: translateX(-50%);
    /* Center it */

    /* Sizing */
    width: 95%;
    max-width: 1200px;

    /* Styling */
    border-radius: 10px;
    /* Your requested radius */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    padding: 8px 30px;
    z-index: 1000;

    /* The Magic: Smoothly animate all these changes */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* SCROLLED STATE (After Scroll) */
/* This class is added by JS when you scroll down */
/* SCROLLED STATE (The "Frosted Glass" Bar) */
#main-header.scrolled {
    top: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;

    /* GLASSMORPHISM UPDATE */
    /* 1. More transparency so colors bleed through (0.7 instead of 0.95) */
    background: rgba(255, 255, 255, 0.01);

    /* 2. Heavy Blur for the "Frosted" look */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(10px);

    /* 3. Subtle bottom border for separation */
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 1);

    padding: 15px 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    /* Softer shadow */
}

/* When the header is over a dark section (Hero/Services) */
#main-header.scrolled.nav-white-mode {
    /* User requested: 1px solid grey (approx) */
    border-bottom: 1.5px solid rgba(100, 100, 100, 0.5);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    /* Keeps the CONTENT centered even when bar is full width */
    margin: 0 auto;
}

/* LOGO */
.logo {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1a1a1a;
}

.logo .highlight {
    color: var(--primary-gold);
}

/* NAVIGATION (Right Aligned) */
.desktop-nav {
    margin-left: auto;
    margin-right: 20px;
}

.desktop-nav ul {
    display: flex;
    list-style: none;
    gap: 5px;
    padding: 0px;
    border-radius: 2%;

}

/* LINKS (Hover Pills) */
.desktop-nav a {
    color: #444;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    /* Matching your squarer aesthetic */
    transition: all 0.3s ease;
}

.desktop-nav a:hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0.05);
}

.desktop-nav a.active {
    color: #000;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* NAV ACTIONS */
.nav-actions {
    margin-left: 0;
}

.mobile-toggle span {
    background-color: #333;
}

/* =========================================
   HEADER COLOR ADAPTATION (Dark/Light Modes)
   ========================================= */

/* Default is Dark Text (for Light Backgrounds) - Already set in previous CSS */

/* WHITE TEXT MODE (For Dark Backgrounds like Hero/Services) */
#main-header.nav-white-mode .logo {
    color: #ffffff;
    /* White Logo */
}

#main-header.nav-white-mode .desktop-nav a {
    color: rgba(255, 255, 255, 0.9);
    /* White Links */
}

/* Update the Hover Effect for Dark Backgrounds */
#main-header.nav-white-mode .desktop-nav a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
    /* White glass hover */
}

#main-header.nav-white-mode .desktop-nav a.active {
    color: var(--bg-charcoal);
    /* Keep active text dark for contrast */
    background-color: #ffffff;
    /* White pill */
}

/* Optional: Adjust the Contact Button border for visibility */
#main-header.nav-white-mode .btn-sweep {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 6px 10px;
}

/* =========================================
   VISUAL HERO SECTION
   ========================================= */

#visual-hero {
    /* Tall container to allow scrolling "past" it while it scales */
    height: 150vh; 
    position: relative;
    background-color: var(--bg-darker);
}

.sticky-hero-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The actual card that shrinks */
.hero-scaler {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* Physics engine handles width/radius via inline styles */
    will-change: width, border-radius, transform;
}

/* --- SLIDESHOW STYLES (Fixed 3s Timing & Fade) --- */
.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 1. Zoom Animation */
@keyframes heroZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1); /* Gentle zoom over 3s */
    }
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    /* Ensure transform doesn't conflict with animation */
    will-change: transform, opacity;
}

/* ACTIVE STATE (Visible & Zooming) */
.hero-slide.active {
    opacity: 1;
    z-index: 2;
    /* CRITICAL FIX: 
       Duration matches JS interval (3s). 
       'linear' ensures constant movement (no pauses at start/end).
    */
    animation: heroZoom 3s linear forwards;
    
    /* Fade In Transition */
    transition: opacity 1.5s ease-in-out;
}

/* EXIT STATE (Fading Out) */
.hero-slide.exit {
    opacity: 0;
    z-index: 1;
    /* Fade Out Transition */
    transition: opacity 1.5s ease-in-out;
    
    /* CRITICAL FIX: 
       We manually set the scale to the 'end' state of the animation (1.1).
       This prevents the image from snapping back to scale(1) while fading out.
    */
    transform: scale(1.1); 
}

/* Dark Overlay on top of images */
.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    z-index: 3;
    pointer-events: none;
}

/* --- VISUAL CONTENT (New Rotating Text Styles) --- */
.visual-content {
    position: relative;
    z-index: 4; /* Above slides */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 20px;
}

.hero-title-rotator {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between "Experience" and Gold Box */
    
    /* Responsive Font Sizing */
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    font-weight: 400;
}

/* The Gold Box Container */
.rotating-wrapper {
    background-color: var(--primary-gold); /* #E3C565 */
    color: #1a1a1a; /* Dark Text */
    padding: 0 0.4em;
    border-radius: 8px;
    height: 1.3em; /* Fixed height to prevent jumping */
    display: flex;
    align-items: center;
    overflow: hidden; /* Hides letters when they fly out */
    position: relative;
    box-sizing: border-box;
    /* Smooth Width Transition */
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: auto;
    white-space: nowrap;
}

/* Individual Character Styling (For JS Injection) */
.rotator-char {
    display: inline-block;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
    will-change: transform, opacity;
    min-width: 0.3em;
}

/* STATE 1: Initial (Hidden Below) */
.rotator-char.initial {
    transform: translateY(100%) rotateX(-90deg);
    opacity: 0;
}

/* STATE 2: Active (Visible) */
.rotator-char.active {
    transform: translateY(0) rotateX(0);
    opacity: 1;
}

/* STATE 3: Exit (Hidden Above) */
.rotator-char.exit {
    transform: translateY(-120%) rotateX(90deg);
    opacity: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title-rotator {
        flex-direction: column; /* Stack on mobile */
        gap: 10px;
    }
    .rotating-wrapper {
        margin-top: 5px;
    }
}

/* =========================================
   6. BOOKING HERO (Originally #hero)
   ========================================= */
#booking-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    /* Placeholder Image */
    background: url('https://images.unsplash.com/photo-1570176496660-c3d6f3045353?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
    z-index: 10; /* Ensures this sits ON TOP of the previous visual-hero */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* UPDATED: Gradient direction is now "to top" */
    background: linear-gradient(to top, rgba(44, 44, 44, 0.3), var(--bg-charcoal));
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-text .highlight {
    color: var(--primary-gold);
}

.hero-text p {
    font-size: 1.1rem;
    color: var(--text-grey);
    max-width: 500px;
}

/* Search Box */
.search-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: var(--border-radius-card);
    width: 400px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.search-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-grey);
    font-size: 1rem;
    cursor: pointer;
    padding-bottom: 5px;
    transition: color 0.3s;
}

.tab-btn.active {
    color: var(--primary-gold);
    border-bottom: 2px solid var(--primary-gold);
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-grey);
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: white;
    outline: none;
}

.input-group input:focus {
    border-color: var(--primary-gold);
}

.full-width {
    width: 100%;
    margin-top: 10px;
}

/* =========================================
   7. SERVICES SECTION
   ========================================= */
#services {
    padding: 100px 0;
    background-color: var(--bg-charcoal);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    font-size: 2rem;
}

.divider-gold {
    width: 60px;
    height: 3px;
    background: var(--primary-gold);
    margin: 15px auto 0;
    border-radius: 2px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: #363636;
    padding: 40px;
    border-radius: var(--border-radius-card);
    transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
    border: 1px solid transparent;
}

.card:hover {
    transform: translateY(-10px);
    border-color: rgba(227, 197, 101, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.card p {
    color: var(--text-grey);
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.text-link {
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

/* =========================================
   8. JOURNEY SECTION (VIDEO MATCH: DEEP WAVE & BOLD FONT)
   ========================================= */
#journey-simplified {
    background-color: var(--bg-light-beige);
    padding: 140px 0;
    /* Tall spacing */
    color: var(--text-almost-black);
    overflow: hidden;
    position: relative;
}

.journey-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Equal split */
    gap: 80px;
    align-items: center;
    margin-top: -6%;
}

/* Typography (Matching Video Look) */
.journey-content h2 {
    font-family: 'Inter', sans-serif;
    font-size: 2.7rem;
    /* Large Headline */
    line-height: 1.3;
    margin-bottom: 15px;
    font-weight: 600;
    /* Extra Bold */
    letter-spacing: -1px;
    /* Tight tracking like the video */
    color: var(--text-almost-black);
}

.journey-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    /* Slightly lighter than black */
    margin-bottom: 20px;
    max-width: 90%;
}

/* Checklist */
.checklist {
    list-style: none;
    margin-bottom: 10px;
}

/* UPDATED CHECKLIST ICON STYLE */
.checklist li {
    display: flex;
    align-items: center;
    /* Ensures text aligns with the center of the circle */
    margin-bottom: 20px;
    /* Slightly more space between items */
    font-weight: 600;
    font-size: 1.1rem;
    color: #222;
}

.check-icon {
    /* Container Sizing */
    width: 28px;
    height: 28px;
    padding: 6px;
    /* Shrinks the inner SVG so it doesn't touch edges */

    /* The "Circle" Look */
    background-color: rgba(0, 0, 0, 0.06);
    /* Subtle darken effect */
    border-radius: 50%;
    /* Perfect circle */

    /* Icon Color & Layout */
    color: #111;
    /* Black icon */
    margin-right: 16px;
    /* Space between circle and text */
    flex-shrink: 0;
    /* Prevents circle from squishing on small screens */
}

/* Visual Box (Right Side) */
.visual-box {
    /* Subtle transparency or minimal background to match video */
    background-color: rgb(247, 240, 232);
    border-radius: 18px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    /* Allow plane to fly to edges */

    /* THE CONTRAST SHADOW */
    box-shadow:
        0 20px 40px -5px rgba(0, 0, 0, 0.1),
        /* Soft Drop Shadow */
        0 1px 3px rgba(0, 0, 0, 0.05);
    /* Crisp Edge Definition */

    /* Optional: A very faint border to separate it further */
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}

#plane-path-svg {
    width: 120%;
    /* Wider than container so deep curve looks smooth */
    height: 100%;
    /* Adds the 3D depth to the plane white shape */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
}

/* =========================================
   9. ANIMATION LOGIC (Global & Specific)
   ========================================= */

/* A. Fade Up Animations (General) */
/* .fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s var(--ease-apple) forwards;
} */

/* A. Fade Up Animations (General) */
.fade-in-up {
    /* 1. Ensure the element occupies space */
    display: block; 
    
    /* 2. Default visibility state */
    opacity: 0; 
    
    /* 3. Performance Hint: Tells browser to expect changes immediately */
    will-change: opacity, transform;
    
    /* 4. 'both' ensures it applies 0% style before start AND 100% style after end */
    animation: fadeInUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

/* @keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
} */

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* B. Scroll Trigger Logic (For Journey Section) */
/* Default State: Hidden */
.scroll-trigger .anim-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* Visible State: Triggered by JS */
.scroll-trigger.is-visible .anim-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for list items */
.scroll-trigger.is-visible .delay-1 {
    transition-delay: 0.1s;
}

.scroll-trigger.is-visible .delay-2 {
    transition-delay: 0.2s;
}

.scroll-trigger.is-visible .delay-3 {
    transition-delay: 0.3s;
}

/* C. Plane Loop Animation (Video Match: Ease-in-out) */
#anim-plane {
    /* Path: Deep Sine Wave (Starts high, dips deep, ends high) */
    offset-path: path("M -100,200 C 150,450 450,-50 900,200");
    offset-distance: 0%;
    offset-rotate: auto 0deg;
    /* Auto-align plane direction */
    opacity: 0;
}

/* Trigger Loop when visible */
.scroll-trigger.is-visible #anim-plane {
    /* Ease-in-out = Starts slow, speeds up in curve, slows at end */
    animation: flightLoop 5s ease-in-out infinite;
}

@keyframes flightLoop {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* Fade in quickly */
    95% {
        opacity: 1;
    }

    /* Stay visible */
    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

/* D. Button Sweep Animation Keys */
@keyframes lightSweep {
    0% {
        background-position: 200% 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        background-position: -200% 0;
        opacity: 0;
    }

    100% {
        background-position: -200% 0;
        opacity: 0;
    }
}

/* =========================================
   10. MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 900px) {

    /* --- VISUAL HERO MOBILE STYLES --- */
    #visual-hero {
        height: 130vh; /* Shorter scroll distance for mobile */
    }

    .hero-title {
        font-size: 2.5rem; /* Smaller font for mobile (down from 4rem) */
        line-height: 1.2;
        padding: 0 10px; /* Prevent text touching edges */
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 90%;
        margin-top: 10px;
    }

    .visual-content {
        padding: 0 15px; /* Safe area */
    }

    /* --- Booking Hero Mobile --- */
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .search-box {
        width: 100%;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .desktop-nav {
        display: none;
    }

    /* Needs JS Hamburger */

    /* Journey Section */
    .journey-container {
        grid-template-columns: 1fr;
        gap: 50px;
        margin-top: -24%;
    }

    .journey-content h2 {
        font-size: 2.5rem;
    }

    .visual-box {
        height: 300px;
    }

    .checklist li {
        font-size: 0.95rem;
    }

    .journey-content h2 {
        font-family: 'Inter', sans-serif;
        font-size: 2.2rem;
        /* Large Headline */
        line-height: 1.2;
        margin-bottom: 13px;
        font-weight: 600;
        /* Extra Bold */
    }
    .section-header {
    margin-bottom: 60px;
    font-size: 1.4rem;
}
    
    
}

/* =========================================
   11. SCROLL REVEAL SECTION (Fixed "Wipe" Alignment)
   ========================================= */
#scroll-reveal {
    height: 300vh;
    background-color: var(--bg-light-beige);
    position: relative;
}

.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reveal-container {
    position: relative;
    width: 100vw;
    /* MUST be full viewport width for alignment to work */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TYPOGRAPHY SHARED STYLES */
.text-layer {
    font-family: 'Inter', sans-serif;
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -2px;
    text-align: center;
    width: 100vw;
    /* Forces both layers to use screen width */
    padding: 0 20px;
}

/* Layer 1: Bottom (Initial Text) */
.layer-bottom {
    color: var(--text-almost-black);
    /* No positioning needed, it sits naturally in the flex center */
}

/* Layer 2: Top (Revealed Text) */
.layer-top {
    color: var(--text-almost-black);
    position: absolute;
    top: 50%;

    /* THE FIX: Use 50vw (Screen Center) instead of 50% (Mask Center) */
    left: 50vw;

    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* THE MASK */
.text-mask {
    position: absolute;
    top: 0;
    left: 0;
    /* Anchored to left of screen */
    height: 100%;
    width: 0%;
    /* JS changes this */
    overflow: hidden;
    background-color: var(--bg-light-beige);
    z-index: 2;
}

/* THE PLANE */
#reveal-plane {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    /* Removed 360deg rotation as it does nothing */
    width: 610px;
    /*Size of plane image*/
    height: auto;
    z-index: 3;
    filter: drop-shadow(0px 20px 30px rgba(0, 0, 0, 0.4));
    pointer-events: none;
    /* Smooths scrolling over the image */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .text-layer {
        font-size: 2.5rem;
        white-space: normal;
    }

    /* Allow wrap on mobile */
    .layer-top {
        white-space: normal;
    }

    #reveal-plane {
        width: 470px;
    }

    /*Size of plane image*/
}

/* =========================================
   MOBILE MENU (Video Match: Left Align + Expand)
   ========================================= */

/* 1. HAMBURGER ICON (Adapts to Background) */
.mobile-toggle {
    display: none;
    /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 14px;
    cursor: pointer;
    z-index: 1002;
    transition: transform 0.3s ease;
}

.mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    transition: all 0.3s var(--ease-apple);

    /* ADAPTIVE COLOR: Controlled by JS */
    background-color: var(--hamburger-color, #1a1a1a);
}

/* Toggle Animation */
.mobile-toggle.active .top {
    transform: translateY(6px) rotate(45deg);
}

.mobile-toggle.active .bottom {
    transform: translateY(-6px) rotate(-45deg);
}

/* 2. MOBILE OVERLAY (The Expansion Effect) */
.mobile-menu-overlay {
    position: absolute;
    top: 100%;
    /* Starts exactly at bottom of header */
    left: 0;
    width: 100%;

    /* EXPANSION ANIMATION UTILS */
    max-height: 0;
    /* Closed State: Height is 0 */
    overflow: hidden;
    /* Hides content when closed */
    opacity: 0;

    background-color: var(--bg-light-beige);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* LEFT ALIGNMENT */
    justify-content: flex-start;
    padding: 0 30px;
    /* Horizontal padding matches Logo */

    /* Smooth "Curtain" Transition */
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.4s ease,
        padding 0.4s ease;

    z-index: 999;
}

/* OPEN STATE */
.mobile-menu-overlay.open {
    max-height: 80vh;
    /* Stops at 80% of screen height */
    opacity: 1;
    padding-top: 40px;
    /* Add breathing room when open */
    padding-bottom: 40px;
}

/* 3. MENU LINKS (Left Aligned) */
.mobile-links {
    list-style: none;
    text-align: left;
    /* Left Align Text */
    width: 100%;
    margin-bottom: 10px;
    margin-top: -25px;
}

.mobile-links li {
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(-10px);
    /* Slide down slightly */
    transition: all 0.4s ease;
    transition-delay: 0s;
    /* Reset default */
}

.mobile-links li a {
    font-family: 'Inter', sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text-almost-black);
    text-decoration: none;
    display: block;
}

/* 4. MOBILE BUTTON */
.mobile-btn-container {
    width: 100%;
    opacity: 0;
    transition: all 0.4s ease;
}

.mobile-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 0;
    font-size: 1.1rem;
}

/* STAGGERED REVEAL (Only when open) */
.mobile-menu-overlay.open .mobile-links li {
    opacity: 1;
    transform: translateY(0);
}

/* Manual Delays for cascade */
.mobile-menu-overlay.open .mobile-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu-overlay.open .mobile-links li:nth-child(2) {
    transition-delay: 0.2s;
}

.mobile-menu-overlay.open .mobile-links li:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-menu-overlay.open .mobile-links li:nth-child(4) {
    transition-delay: 0.4s;
}

.mobile-menu-overlay.open .mobile-btn-container {
    opacity: 1;
    transition-delay: 0.5s;
}

/* 5. RESPONSIVE */
@media (max-width: 900px) {

    .desktop-nav,
    .desktop-only {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .nav-container {
        justify-content: space-between;
        padding: 0 !important;
        width: 100%;
    }

    .mobile-menu-overlay {
        padding: 0 30px;
    }

    #anim-plane {
        /* Scale up by 1.5x (Adjust to 1.8 or 2.0 if you want it bigger) */
        transform: scale(1);
        transform-box: fill-box;
        /* Ensures it scales from its own center */
        transform-origin: center;
    }
}

/* =========================================
   12. SCROLL STACK SECTION
   ========================================= */
#stack-section {
    position: relative;
    /* Extra height to allow scrolling through cards */
    padding-bottom: 100px;
    background-color: var(--bg-charcoal);
    transition: background-color 0.5s ease; /* For JS color shift */
}

/* Fixed Header that changes text */
.stack-sticky-header {
    position: sticky;
    top: 100px;
    text-align: center;
    margin-bottom: 40px;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through */
    transition: opacity 0.3s ease;
}

.stack-sticky-header h2 {
    font-size: 3rem;
    color: var(--text-white);
    margin-bottom: 5px;
}

.stack-sticky-header p {
    color: var(--primary-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

/* The Container */
.stack-wrapper {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

#stack-title{
    z-index: 1;
}

/* THE CARD LOGIC */
.stack-card {
    /* STICKY MAGIC: This creates the stacking effect */
    position: sticky; 
    /* Calculations: Top offset + (Index * Gap) */
    top: calc(180px + (var(--index) * 15px)); 
    z-index: 20;
    
    height: 400px;
    margin-bottom: 20px; /* Spacing between cards when scrolling */
    
    /* Perspective for potential 3D feel */
    perspective: 1000px;
    transition: 2s;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Image Background */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* Gradient Overlay & Text */
.card-content {
    position: absolute; /* Changed from relative to anchor to top */
    top: 0;
    left: 0;
    z-index: 2;
    padding: 30px;
    /* Gradient flipped: Dark at top, fading to transparent at bottom */
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
    width: 100%;
}

.card-content h3 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: #fff;
}

.card-content p {
    color: var(--primary-gold);
    font-size: 1rem;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .stack-card {
        height: 300px;
        top: calc(150px + (var(--index) * 10px));
    }
    .stack-sticky-header h2 {
        font-size: 2rem;
    }
}
/* RESPONSIVE LOGO IMAGE */
.logo img {
    height: 140px;      /* Large visual height */
    width: auto;
    object-fit: contain;
    display: block;
    
    /* THE FIX: Negative margins "eat" the extra height so the header doesn't grow */
    margin-top: -40px;
    margin-bottom: -40px;
    
    transition: all 0.3s ease;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .logo img {
        height: 110px;
        margin-top: -30px;
        margin-bottom: -30px;
        margin-left: -12px;
    }
}

/* =========================================
   13. ORBIT SECTION (Contained Box Design)
   ========================================= */
#orbit-section {
    background-color: var(--bg-charcoal); /* Matches page flow */
    padding: 100px 0;
}

/* The "Visual Box" Container */
.orbit-box {
    position: relative;
    background-color: var(--bg-light-beige); /* The card color */
    border-radius: 30px; /* Rounded corners */
    height: 650px;       /* Fixed height */
    width: 100%;
    overflow: hidden;    /* CLIPS the animation inside this box */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 60px;   /* Pushed up slightly to create space */
    
    /* Optional: Subtle inner shadow for depth */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.02);
}

/* --- TYPOGRAPHY --- */
.orbit-content {
    position: relative;
    z-index: 10;
    max-width: 600px;
    margin: 0 auto;
    /* Creates breathing space between text and the rings */
    margin-bottom: 80px;
}

.orbit-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #8c8c8c;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

#orbit-section h2 {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #1a1a1a;
}

/* Dark Button Variant */
.btn-dark {
    display: inline-block;
    background-color: #2c241b;
    color: #fff;
    padding: 10px 28px;
    border-radius: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background-color: #000;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- ORBIT SYSTEM CONTAINER --- */
.orbit-container {
    position: absolute;
    /* Pushed DOWN to 115% so only the top arc is visible */
    top: 115%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    z-index: 1; 
}

/* --- THE TRACKS (Rings that Spin) --- */
.orbit-track {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Centering logic handled by negative margins below */
    transform-origin: center center;
    border-radius: 50%;
    pointer-events: none;
    border-color: rgba(0,0,0,0.4);
    
    /* Flex alignment ensures children are positioned relative to the ring */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Track 1 (Inner): Solid, CW */
.ring-1 { 
    width: 500px; 
    height: 500px;
    margin-left: -250px; /* Centers the absolute div */
    margin-top: -250px;
    border: 1px solid rgba(0,0,0,0.4);
}

/* Track 2 (Middle): Dotted, CCW */
.ring-2 { 
    width: 800px; 
    height: 800px;
    margin-left: -400px;
    margin-top: -400px;
    border: 3px dotted rgba(0,0,0,0.4); /* Thicker dots */
}

/* Track 3 (Outer): Solid, CW */
.ring-3 { 
    width: 1100px; 
    height: 1100px;
    margin-left: -550px;
    margin-top: -550px;
    border: 1px solid rgba(0,0,0,0.4);
}

/* --- ITEMS HOLDER --- */
/* This holds the object at the specific radius */
.orbit-item-holder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* Transformation (translate/rotate) is applied inline in HTML */
}

/* The Actual Objects (Now Images) */
.orbit-object {
    position: absolute;
    /* Center the 40px image on the 0px holder point */
    top: -20px; 
    left: -20px;
    
    width: 40px;
    height: 40px;
    object-fit: contain; /* Ensures the plane isn't stretched */
    display: block;
}

/* --- ANIMATIONS --- */
.spin-cw { animation: spin 40s linear infinite; }
.spin-ccw { animation: spin 55s linear infinite reverse; }

/* Speed Overrides */
.ring-1.spin-cw { animation-duration: 10s; }
.ring-2.spin-ccw { animation-duration: 20s; }
.ring-3.spin-cw { animation-duration: 30s; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .orbit-box {
        height: 500px;
    }
    .orbit-container {
        transform: translate(-50%, -30%) scale(0.65); /* Shrink orbits on mobile */
    }
    #orbit-section h2 {
        font-size: 2.2rem;
    }
}

/* =========================================
   PARTNERS SECTION
   ========================================= */
#partners {
    background-color: var(--bg-charcoal);
    padding: 60px 0;
    text-align: center;
    overflow: hidden;
}

#partners .section-title {
    color: var(--text-white);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
}

/* Slider Container */
.partners-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0; /* Extra space for hover scale */
    
    /* Fade Out Edges (Masking) */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* The Moving Track */
.partners-track {
    display: flex;
    width: max-content; /* Allows track to be as wide as needed */
    
    /* Speed: ~10s for smooth flow (approx 100px/s depending on screen width) */
    animation: scroll-loop 10s linear infinite; 
}

/* Pause on Hover */
.partners-track:hover {
    animation-play-state: paused;
}

/* Logo Styles */
.partners-track img {
    height: 60px;
    width: auto;
    object-fit: contain;
    
    /* Gap Logic: Using margin ensures perfect -50% loop math */
    margin-right: 60px;
    
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.7; /* Optional: Makes them blend in better until hover */
}

/* Scale Effect */
.partners-track img:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Infinite Scroll Animation */
@keyframes scroll-loop {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Moves exactly half the width (one full set of logos) */
        transform: translateX(-50%);
    }
}

/* Responsive Tweak */
@media (max-width: 768px) {
    .partners-track img {
        height: 40px;
        margin-right: 40px;
    }
}

/* =========================================
   PARTNERS SECTION (Updated Infinite Loop)
   ========================================= */
#partners {
    background-color: var(--bg-charcoal);
    padding: 10px 0;
    text-align: center;
    overflow: hidden;
}

#partners .section-title {
    color: var(--text-white);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
}

/* Slider Container */
.partners-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    /* Fade Out Edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* The Moving Track */
.partners-track {
    display: flex;
    width: max-content; /* Critical: Allows track to fit all 20 logos */
    
    /* Animation Speed: ~8.5s calculated for 100px/s flow */
    animation: scroll-loop 8.5s linear infinite; 
}

/* Pause on Hover */
.partners-track:hover {
    animation-play-state: paused;
}

/* Logo Styles */
.partners-track img {
    height: 100px;
    width: auto;
    object-fit: contain;
    margin-right: 60px; /* The Gap */
    
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.7;
}

/* Scale Effect */
.partners-track img:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Infinite Scroll Logic */
@keyframes scroll-loop {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move -25% (Width of 1 set out of 4) 
           When it hits -25%, it aligns perfectly with Set 2, 
           snapping back to 0 seamlessly. */
        transform: translateX(-25%);
    }
}

/* Responsive Tweak */
@media (max-width: 768px) {
    .partners-track img {
        height: 60px;
        margin-right: 40px;
    }
    #partners {
        margin-top: -24px;
    }
}

/* =========================================
   FOOTER SECTION
   ========================================= */
#main-footer {
    background-color: var(--bg-light-beige);
    padding: 60px 0;
    color: var(--text-almost-black);
    
    /* THE FIX */
    border-radius: 35px 35px 0px 0px; /* Your requested radius */
    margin-top: -35px; /* Pulls footer UP to cover the previous section's bottom */
    position: relative; /* Required for z-index */
    z-index: 5; /* Ensures footer sits ON TOP of the dark section */
    
    border-top: none; /* Remove border if it interferes with the look */
}

/* Flex Container for Desktop (Side-by-Side) */
.footer-container {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; /* CRITICAL: Aligns Top Line (Logo Top = Heading Top) */
    gap: 50px; /* Reduced gap to bring columns closer visually */
}

/* --- LEFT COLUMN: BRAND --- */
.footer-brand {
    flex: 1;
    max-width: 450px;
    display: flex;
    flex-direction: column;
}

.footer-logo {
    height: 150px; /* Requested Height */
    width: auto;
    object-fit: contain;
    object-position: left; /* Ensures logo sticks to the left edge */
    
    /* Alignment Correction: */
    display: block;
    margin-bottom: 0px; /* Removes gap between logo and text */
    
    /* Optional: Negative margin to tighten visual whitespace if logo has padding */
    margin-top: -20px; 
    margin-left: -10px; 
}

.footer-brand p {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #5c554b;
    margin-top: 0; /* Ensures text starts right under the logo area */
}

/* --- RIGHT COLUMN: NEWSLETTER --- */
.footer-newsletter {
    flex: 1.2;
    max-width: 550px;
    /* Pushed down slightly if needed to match Logo text baseline, 
       but for "Top Line" alignment, 0 is best. */
    padding-top: 15px; 
}

.footer-newsletter h2 {
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    font-weight: 700; /* Bold as per screenshot */
    color: #1a1a1a;
    line-height: 1; /* Tight line height for alignment */
    margin-top: 0;  /* CRITICAL: Aligns top of text with top of logo container */
    margin-bottom: 15px;
}

.footer-newsletter p {
    font-size: 1rem;
    color: #4a4a4a;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Form Layout (Desktop: Horizontal) */
.footer-form {
    display: flex;
    gap: 12px;
    width: 100%;
}

.footer-form input {
    flex: 1;
    padding: 16px 20px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    color: #333;
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px; /* Rounded corners as per image */
    outline: none;
    transition: all 0.3s ease;
}

.footer-form input:focus {
    border-color: #d1bfa7;
    box-shadow: 0 0 0 3px rgba(209, 191, 167, 0.2);
}

.footer-form button {
    padding: 16px 36px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    background-color: #EBE4DB; /* Beige color from screenshot */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.footer-form button:hover {
    background-color: #dcd4ca;
    transform: translateY(-2px);
}

/* --- MOBILE RESPONSIVENESS (Smaller Screen) --- */
@media (max-width: 900px) {
    .footer-container {
        flex-direction: column; /* Brand 1st, Newsletter 2nd */
        gap: 60px;
    }

    .footer-brand, 
    .footer-newsletter {
        max-width: 100%;
        padding-top: 0;
    }
    
    .footer-logo {
        height: 120px; /* Smaller logo on mobile */
        margin-top: 0;
        margin-left: 0;
    }

    /* Mobile Form Stacking */
    .footer-form {
        flex-direction: column;
    }
    
    .footer-form button {
        width: 100%;
    }
    .footer-newsletter h2 {
    font-size: 1.5rem;
    line-height:0.7; /* Tight line height for alignment */
    margin-top: 0;  /* CRITICAL: Aligns top of text with top of logo container */
    margin-bottom: 10px;
    }
    .footer-brand p {
        font-size: 1.05rem;
        line-height: 1.5;
        margin-top: -33px; /* Ensures text starts right under the logo area */
    }
    .footer-brand {
    flex: 1;
    margin-top: -30px;
    }
    #main-footer {
    border-radius: 35px 35px 0px 0px;
    }
}

/* --- FOOTER BOTTOM BAR (Copyright & Socials) --- */

/* The Separator Line */
.footer-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.1); /* Subtle separation line */
    margin-top: 50px;
    margin-bottom: 30px;
}

/* Bottom Container Layout */
.footer-bottom {
    display: flex;
    justify-content: space-between; /* Text Left, Icons Right */
    align-items: center;
    padding-bottom: 20px;
}

/* Copyright Text */
.copyright-text {
    font-size: 0.9rem;
    color: #1a1a1a;
}

.copyright-text strong {
    font-weight: 700;
}

.designer-credit {
    display: block; 
    margin-top: 4px;
    font-size: 0.85rem;
    color: #666;
}

/* Format "Designed by" nicely on desktop */
@media (min-width: 901px) {
    .designer-credit {
        display: inline;
        margin-left: 5px;
    }
    .designer-credit::before {
        content: "| "; /* Vertical bar separator */
        margin-right: 5px;
    }
}

.designer-link {
    color: var(--primary-gold); /* Brand Gold */
    text-decoration: none;
    transition: color 0.2s;
}

.designer-link:hover {
    text-decoration: underline;
}

/* Social Icons Container */
.social-icons {
    display: flex;
    gap: 10px;
}

/* Individual Social Link (The Box) */
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #1a1a1a; /* Dark Background */
    border-radius: 6px; /* Rounded corners */
    transition: transform 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
}

/* The SVG Icon itself */
.social-link svg {
    width: 18px;
    height: 18px;
    color: var(--primary-gold); /* Brand Gold Icon Color */
}

/* Hover Effect */
.social-link:hover {
    transform: translateY(-3px);
    background-color: #333; 
}

/* --- MOBILE RESPONSIVENESS (Bottom Bar) --- */
@media (max-width: 900px) {
    .footer-bottom {
        /* Flips the order: Icons Top, Text Bottom */
        flex-direction: column-reverse; 
        gap: 20px;
        text-align: center;
    }

    .social-icons {
        margin-bottom: 5px;
    }
    
    .designer-credit {
        display: block;
        margin-top: 8px;
    }
    
    /* Remove the separator on mobile since it's on a new line */
    .designer-credit::before {
        content: ""; 
    }
}

/* --- RESPONSIVE TOGGLE UTILITIES --- */

/* Default State (Desktop) */
.phone {
    display: none;
}

.desktop-only {
    display: inline;
}

/* Mobile State */
@media (max-width: 900px) {
    /* Rules MUST be inside these brackets */
    .phone {
        display: inline; /* Shows the break + text */
    }

    .desktop-only {
        display: none;   /* Hides the inline text */
    }
}

/* =========================================
   TRUSTED FEATURE SECTION
   ========================================= */
#trusted-feature {
    background-color: var(--bg-light-beige);
    padding: 150px 0;
    color: var(--text-almost-black);
}

.feature-container {
    display: flex;
    align-items: center; /* Vertically center content */
    gap: 80px; /* Space between text and image */
    justify-content: space-between;
}

/* --- LEFT SIDE: TEXT --- */
.feature-text {
    flex: 1;
    max-width: 550px;
}

/* Tag Pill */
.feature-tag {
    display: inline-block;
    background-color: #EDE5da;
    color: #5c554b;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Headline */
.feature-text h2 {
    font-family: 'Inter', sans-serif; /* Or generic serif if you prefer */
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1.1;
    color: #2b1c12; /* Dark Brown/Black */
    margin-bottom: 20px;
    letter-spacing: -1px;
}

/* Description */
.feature-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 40px;
}

/* --- SOCIAL PROOF (Avatars + Stars) --- */
.social-proof-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.avatar-stack {
    display: flex;
    align-items: center;
    /* This allows the images to bleed slightly to the left to preserve alignment */
    padding-left: 5px; 
}

.avatar-stack img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid var(--bg-light-beige); /* Matches background to create "cutout" effect */
    object-fit: cover;
    margin-left: -15px; /* Creates the overlap */
    transition: transform 0.3s ease;
}

/* Reset margin for first image */
.avatar-stack img:first-child {
    margin-left: 0;
}

.avatar-stack img:hover {
    transform: translateY(-5px);
    z-index: 2;
}

.rating-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.stars {
    color: #ff6b00; /* Orange Star Color */
    letter-spacing: 2px;
}

/* --- RIGHT SIDE: IMAGE --- */
.feature-image-box {
    flex: 1;
    position: relative;
    height: 550px; /* Tall portrait aspect ratio */
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

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

/* Center Logo Overlay */
.center-logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    /* Frosted Glass Effect */
    /* background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4); */
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- MOBILE RESPONSIVENESS (Matches "smaller screen.jpg") --- */
@media (max-width: 900px) {
    .feature-container {
        flex-direction: column; /* Stack vertically */
        gap: 50px;
        text-align: left; /* Keep text left aligned */
    }
    
    .feature-text {
        max-width: 100%;
    }

    .feature-text h2 {
        font-size: 2.8rem;
    }

    .feature-image-box {
        width: 100%;
        height: 400px; /* Slightly shorter on mobile */
    }
}

/* =========================================
   STATS SECTION
   ========================================= */
#stats-section {
    background-color: var(--bg-light-beige);
    padding: 100px 0;
    color: var(--text-almost-black);
    margin-top: -8%;
}

/* Header Styling */
.stats-header {
    text-align: center;
    margin-bottom: 60px;
}

.stats-tag {
    display: inline-block;
    background-color: #EDE5da; /* Darker beige pill */
    color: #5c554b;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.stats-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    color: #2b1c12;
}

/* Grid Layout */
.stats-grid {
    display: grid;
    /* 4 Equal Columns on Desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
}

/* Card Styling */
.stat-card {
    /* Subtle background color as seen in image (slightly darker than section bg) */
    background-color: #F6F0E9; 
    border-radius: 20px;
    padding: 30px;
    border: #ffffff 1.5px solid;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

/* Typography inside Card */
.stat-number {
    font-size: 2.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums; /* Prevents jitter while counting */
}

.stat-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.stat-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .stats-header h2 {
        font-size: 2.2rem;
    }

    .stats-grid {
        /* Stack vertically on mobile */
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    .stat-card {
        padding: 25px;
    }
    .stat-number {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 10px;
    }
    .stats-tag {
    color: #5c554b;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    }
    #stats-section{
        margin-top: -36%;
    }
}

/* =========================================
   FAQ SECTION
   ========================================= */
#faq-section {
    background-color: var(--bg-light-beige);
    padding: 100px 0;
    color: var(--text-almost-black);
    margin-top: -6%;
}

/* Header Styling */
.faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.faq-tag {
    display: inline-block;
    background-color: #EDE5da; /* Beige Pill */
    color: #5c554b;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.faq-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    color: #2b1c12;
}

/* FAQ List Container */
.faq-list {
    max-width: 800px; /* Restrict width for readability */
    margin: 0 auto;
}

/* Individual Item */
.faq-item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* The Clickable Question Button */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s ease;
}

.faq-question span {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem; /* Large legible text */
    font-weight: 500;
    color: #1a1a1a;
    padding-right: 20px; /* Space before icon */
}

.faq-question:hover span {
    color: #5c554b; /* Slight fade on hover */
}

/* The Icon (+ / x) */
.faq-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #1a1a1a;
    transition: transform 0.3s ease; /* Smooth rotation */
    background-color: #2c241b;
    border-radius: 50%;
    color: #fff;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Hidden Answer */
.faq-answer {
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Slide animation */
}

.answer-content {
    padding-bottom: 30px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    padding-right: 40px; /* Prevent text hitting the right edge */
}

/* --- ACTIVE STATE (Controlled by JS) --- */
.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Rotates + to X */
    background-color: #1a1a1a;
}

/* Updated: Removed font-weight change so text stays consistent */
.faq-item.active .faq-question span {
    color: #1a1a1a; /* Optional: Keeps color dark, but removes bold jump */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .faq-header h2 {
        font-size: 2.2rem;
    }
    
    .faq-question span {
        font-size: 1.1rem;
    }
    #faq-section {
    margin-top: -20%;}
}

/* =========================================
   SCROLL REVEAL UTILITY (Slide Up)
   ========================================= */

/* 1. The Class you add to HTML elements */
.reveal-up {
    opacity: 0;
    transform: translateY(50px); /* Push down 50px initially */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Performance optimization */
}

/* 2. The Class JS adds when visible */
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0); /* Slide back to original position */
}

/* Optional: Staggered delays if you want items to appear one by one */
.reveal-up.delay-100 { transition-delay: 0.1s; }
.reveal-up.delay-200 { transition-delay: 0.2s; }
.reveal-up.delay-300 { transition-delay: 0.3s; }

/* =========================================
   BLOG / INSIGHTS SECTION
   ========================================= */
#blog-section {
    background-color: var(--bg-light-beige);
    padding: 150px 0;
    color: var(--text-almost-black);
}

/* Header */
.blog-header {
    text-align: center;
    margin-bottom: 60px;
}

.blog-tag {
    display: inline-block;
    background-color: #ede5da78;
    color: #5c554b;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 20px;
}

.blog-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    color: #2b1c12;
}

/* Grid Layout (3 Columns on Desktop) */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Card Container */
.blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none; /* Remove underline */
    color: inherit;
    cursor: pointer;
    
    /* PLATFORM STYLES */
    background-color: #ececec; /* White background for contrast */
    padding: 12px; /* Inner spacing to embody content */
    border-radius: 24px; /* Rounded corners for the card */
    border: #ffffff 1px solid;
    
    /* Smooth Transition for Background & Lift */
    transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Ensure Image Wrapper fits nicely inside */
.blog-image-wrapper {
    width: 100%;
    height: 250px;
    border-radius: 16px; /* Slightly tighter radius than card */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #ddd;
}

.blog-card:hover {
    background-color: #f0e6dc; /* Requested Hover Color */
    transform: translateY(-5px); /* Subtle lift effect */
}

/* The Image Itself */
.blog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* ANIMATION SETUP */
    transform: scale(1.2); /* Initial State: Zoomed IN */
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth Transition */
    will-change: transform;
}

/* SCROLL EFFECT: Zoom OUT to Normal */
.blog-image.is-visible {
    transform: scale(1);
}

/* HOVER EFFECT: Zoom IN slightly */
.blog-card:hover .blog-image {
    /* Important overrides the scroll state when hovering */
    transform: scale(1.05) !important; 
    transition: transform 0.4s ease-out; /* Faster transition on hover */
}

/* Content */
.blog-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a1a1a;
    line-height: 1.2;
}

.blog-content p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
}

.read-more {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    transition: margin-left 0.3s ease;
}

.blog-card:hover .read-more {
    margin-left: 5px; /* Subtle nudge right on hover */
    color: var(--primary-gold);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Cols on Tablet */
    }
}

@media (max-width: 700px) {
    .blog-header h2 {
        font-size: 2.2rem;
    }
    .blog-grid {
        grid-template-columns: 1fr; /* 1 Col on Mobile */
        gap: 30px;
    }
    .blog-image-wrapper {
        height: 220px;
    }
    .blog-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
    }
}
/* =========================================
   BLOG DETAILS PAGE
   ========================================= */
.blog-detail-page {
    background-color: var(--bg-light-beige); /* Force beige background */
}

/* Container for reading comfort (approx 800px) */
.blog-article-container {
    max-width: 800px; 
    margin: 150px auto 100px;
    padding: 0 20px;
}

/* Header Info */
.article-header {
    margin-bottom: 40px;
}

/* Date Pill */
.meta-tag {
    display: inline-block;
    background-color: #EDE5da;
    color: #5c554b;
    padding: 6px 14px;
    border-radius: 8px; /* Slightly squarer than pills */
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Main Article Title */
.article-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #2b1c12;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.article-subtitle {
    font-size: 1.2rem;
    color: #4a4a4a;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Read Time */
.meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #888;
    font-weight: 500;
}

/* Hero Image */
.article-hero-image {
    width: 100%;
    height: 450px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 60px;
}

.article-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Uses existing scale animation from main.css */
}

/* Article Body Typography */
.article-content {
    font-size: 1.15rem; /* Larger text for reading */
    line-height: 1.8;   /* Comfortable line height */
    color: #333;
}

.article-content p {
    margin-bottom: 25px;
}

.article-content strong {
    color: #000;
    font-weight: 700;
}

/* Navigation Buttons at Bottom */
.article-navigation {
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 40px;
}

.nav-btn {
    text-decoration: none;
    font-weight: 600;
    color: #1a1a1a;
    background-color: #EBE4DB; /* Beige button */
    padding: 12px 24px;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.nav-btn:hover {
    background-color: #dcd4ca;
    transform: translateY(-2px);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .article-header h1 {
        font-size: 2.5rem;
    }
    
    .article-hero-image {
        height: 300px;
        margin-bottom: 40px;
    }
    
    .article-navigation {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-btn {
        text-align: center;
        width: 100%;
    }
    .blog-article-container {
    margin: 130px auto 100px;
}
}

/* =========================================
   ARTICLE TEXT REVEAL (Blur & Slide)
   ========================================= */

/* Initial State: Blurred, Invisible, and Pushed Down */
.reveal-blur {
    opacity: 0;
    filter: blur(10px); /* The "Framer" blur effect */
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.2, 1, 0.4, 1); /* Very smooth ease */
    will-change: opacity, filter, transform;
}

/* Visible State: Clear and in Position */
.reveal-blur.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Optional: Stagger delays if you want distinct paragraph timing */
.reveal-blur:nth-child(2) { transition-delay: 0.1s; }
.reveal-blur:nth-child(3) { transition-delay: 0.2s; }
.reveal-blur:nth-child(4) { transition-delay: 0.3s; }

/* =========================================
   SCROLL-DRIVEN WORD REVEAL (Wave Effect)
   ========================================= */
.reveal-text {
    display: block; 
    line-height: 1.8;
}

.word-blur {
    display: inline-block;
    opacity: 0.1;       /* Ghosted when hidden */
    filter: blur(8px);
    transform: translateY(30px); /* Deep slide up */
    
    /* Default transition */
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s cubic-bezier(0.2, 1, 0.4, 1);
    
    margin-right: 0.25em;
    will-change: opacity, filter, transform;
}

/* Visible State */
.word-blur.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* =========================================
   MASONRY GALLERY SECTION
   ========================================= */
#gallery {
    background-color: var(--bg-charcoal);
    padding: 100px 0;
    overflow: hidden; 
    margin-top: 7%;
}

/* Grid Container */
.masonry-grid {
    position: relative;
    width: 100%;
    margin-top: 40px;
    min-height: 100vh; 
}

/* Individual Item Wrapper */
.gallery-item {
    position: absolute; /* JS controls Top/Left */
    top: 0;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer; /* Indicates clickable */
    
    /* Animation State */
    opacity: 0;
    transform: translateY(60px); 
    transition: top 0.5s ease, left 0.5s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

.gallery-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Inner Card */
.gallery-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #222; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Image Styles (Grayscale to Color) */
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* Start Black & White */
    filter: grayscale(100%);
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Hover Effects */
.gallery-item:hover .gallery-img {
    transform: scale(1.05);
    filter: grayscale(0%); /* Color on Hover */
}

/* =========================================
   LIGHTBOX MODAL STYLES
   ========================================= */
.lightbox-modal {
    display: none; /* Hidden by default */
    position: fixed; 
    z-index: 2000; /* On top of everything */
    padding-top: 50px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); /* Black background */
    backdrop-filter: blur(5px);
}

/* Modal Content (The Image) */
.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}

/* The Close Button */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--primary-gold);
    text-decoration: none;
    cursor: pointer;
}

@keyframes zoomIn {
    from {transform:scale(0.9); opacity:0} 
    to {transform:scale(1); opacity:1}
}

/* Mobile Adjustments */
@media (max-width: 700px) {
    .lightbox-content {
        width: 95%;
    }
}

/* =========================================
   MASONRY GALLERY SECTION
   ========================================= */
#gallery {
    background-color: var(--bg-charcoal);
    padding: 100px 0;
    overflow: hidden; 
}

/* Grid Container */
.masonry-grid {
    position: relative;
    width: 100%;
    margin-top: 40px;
    min-height: 100vh; 
}

/* Individual Item Wrapper */
.gallery-item {
    position: absolute; /* JS controls Top/Left */
    top: 0;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    
    /* Animation State */
    opacity: 0;
    transform: translateY(60px); 
    transition: top 0.5s ease, left 0.5s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

.gallery-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Inner Card */
.gallery-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #222; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Image Styles */
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Hover Effects */
.gallery-item:hover .gallery-img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

/* =========================================
   LIGHTBOX STYLES
   ========================================= */
.lightbox-modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    padding-top: 50px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.95);
    backdrop-filter: blur(5px);
    flex-direction: column;
    align-items: center;
}

.lightbox-content {
    display: block;
    width: auto;
    max-width: 90%;
    max-height: 70vh; /* Leave room for buttons */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
    margin-top: 20px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2001;
}

.lightbox-close:hover {
    color: var(--primary-gold);
}

/* Navigation Buttons Container */
.lightbox-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    width: 100%;
}

/* Nav Buttons (Brand Style) */
.lightbox-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--primary-gold);
}

.lightbox-nav-btn:hover {
    background-color: #333;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(227, 197, 101, 0.2);
}

@keyframes zoomIn {
    from {transform:scale(0.9); opacity:0} 
    to {transform:scale(1); opacity:1}
}

/* =========================================
   CONTACT SECTION
   ========================================= */
#contact {
    background-color: var(--bg-light-beige);
    padding: 150px 0;
    color: var(--text-almost-black);
}

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

.contact-tag {
    display: inline-block;
    background-color: #EDE5da;
    color: #5c554b;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.contact-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #2b1c12;
}

/* --- FORM STYLES --- */
.contact-form-wrapper {
    background-color: #ede3d8; /* Slightly darker beige box */
    padding: 30px;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto 80px; /* Centered, with space below for CTAs */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #5c554b;
}

/* Inputs & Selects */
.form-group input, 
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background-color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #333;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #d1bfa7;
    box-shadow: 0 0 0 3px rgba(209, 191, 167, 0.2);
}

/* Custom Select Arrow */
.select-wrapper {
    position: relative;
}
.select-wrapper::after {
    content: '▼';
    font-size: 0.7rem;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
.form-group select {
    appearance: none; /* Remove default arrow */
    cursor: pointer;
}

/* Checkbox */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 0.85rem;
    color: #666;
}

.form-checkbox input {
    margin-top: 3px;
    accent-color: #2c241b;
}

.form-checkbox a {
    color: #2c241b;
    text-decoration: underline;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    background-color: #2c241b; /* Dark Brown */
    color: #fff;
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
    background-color: #000;
    transform: translateY(-2px);
}

/* --- CTA CARDS (Email, Call, Visit) --- */
.cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.cta-card {
    background-color: #ede3d8; /* Matches Form Background */
    padding: 30px;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.cta-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #2b1c12;
}

.cta-card p {
    font-size: 0.95rem;
    color: #5c554b;
    line-height: 1.5;
    margin-bottom: 20px;
}

.cta-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: #2b1c12;
    transition: margin-left 0.3s ease;
}

/* Hover Effects */
.cta-card:hover {
    transform: translateY(-5px);
    background-color: #ececec; /* Slightly darker on hover */
}

.cta-card:hover .cta-link {
    margin-left: 5px; /* Arrow slide effect */
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .contact-header h2 {
        font-size: 2.2rem;
    }

    .contact-form-wrapper {
        padding: 20px;
    }

    /* Stack CTA cards on mobile */
    .cta-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    color: #2b1c12;
    }
}

/* =========================================
   QUICK CALLBACK BAR
   ========================================= */
.callback-bar {
    background-color: #2c241b; /* Dark Brand Brown */
    padding: 15px 30px;
    border-radius: 100px; /* Pill Shape */
    max-width: 900px;
    margin: 0 auto 60px; /* Spacing between form and CTA cards */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 30px rgba(44, 36, 27, 0.15);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Left Side: Icon & Text */
.cb-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cb-icon {
    background-color: rgba(255,255,255,0.1);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-gold);
}

.cb-text h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 2px;
    line-height: 1;
}

.cb-text p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin: 0;
}

/* Right Side: Form */
.cb-form {
    display: flex;
    gap: 10px;
    background-color: #fff;
    padding: 5px;
    border-radius: 50px; /* Pill Shape Container for Input */
}

.cb-form input {
    border: none;
    background: transparent;
    padding: 10px 15px;
    font-size: 1rem;
    color: #333;
    outline: none;
    width: 220px;
}

.cb-form button {
    background-color: var(--primary-gold);
    color: #2c241b;
    border: none;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cb-form button:hover {
    background-color: #d4b553;
    transform: translateX(2px);
}

/* --- RESPONSIVE CALLBACK BAR --- */
@media (max-width: 900px) {
    .callback-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
        border-radius: 20px; /* Standard Card shape on mobile */
        gap: 20px;
    }

    .cb-form {
        width: 100%;
        padding: 0;
        background: transparent;
        flex-direction: column; /* Stack input and button */
        gap: 15px;
        border-radius: 0;
    }

    .cb-form input {
        width: 100%;
        background-color: #fff;
        padding: 14px 20px;
        border-radius: 12px;
    }

    .cb-form button {
        width: 100%;
        padding: 14px;
        border-radius: 12px;
    }
}

/* =========================================
   FLIGHTS SECTION
   ========================================= */
#flights {
    position: relative;
    padding: 120px 0;
    color: #fff;
    background-color: var(--bg-charcoal);
    overflow: hidden;
}

/* Background Image Layer */
.flight-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Darkened image for readability */
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=2074&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Content Wrapper (sits above bg) */
.flight-wrapper {
    position: relative;
    z-index: 2;
}

.section-subtitle {
    color: rgba(255,255,255,0.8);
    margin-top: 15px;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- SEARCH WIDGET --- */
.flight-search-widget {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
    margin: 60px auto 80px; /* Spacing */
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: left;
    color: #333; /* Dark text inside widget */
}

/* Tabs */
.search-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.tab-btn {
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    padding-bottom: 5px;
    position: relative;
    transition: color 0.3s;
}

.tab-btn.active {
    color: var(--primary-gold);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-gold);
}

/* Input Grid */
.input-grid {
    display: grid;
    /* Columns: From | Swap | To | Date1 | Date2 | Travelers */
    grid-template-columns: 2fr 40px 2fr 1.5fr 1.5fr 1.5fr; 
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
}

/* Fields */
.f-group {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 10px 15px;
    position: relative;
    background: #f9f9f9;
}

.f-group label {
    display: block;
    font-size: 0.75rem;
    color: #777;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.f-group input, 
.f-group select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    outline: none;
    font-family: 'Inter', sans-serif;
}

/* Airport Code Decoration */
.airport-code {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.8rem;
    color: #ccc;
    font-weight: 700;
}

/* Swap Icon */
.swap-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s;
}

.swap-btn:hover {
    transform: rotate(180deg);
    background-color: #e0e0e0;
}

.swap-btn svg { width: 20px; height: 20px; color: #555; }

/* Search Button */
.search-submit-btn {
    width: 100%;
    background-color: #2c241b;
    color: var(--primary-gold);
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.3s ease;
}

.search-submit-btn:hover {
    background-color: #000;
}

/* --- DEALS GRID --- */
.deals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.deal-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    color: #333;
    transition: transform 0.3s ease;
}

.deal-card:hover {
    transform: translateY(-10px);
}

.deal-img {
    height: 200px;
    position: relative;
}

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

.deal-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--primary-gold);
    color: #2c241b;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
}

.deal-info {
    padding: 25px;
}

.deal-info h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deal-info .arrow { color: var(--primary-gold); }

.deal-info .airline {
    display: block;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 20px;
}

.deal-info .pricing {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.deal-info .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c241b;
}

.book-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid #2c241b;
    background: transparent;
    color: #2c241b;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.book-btn:hover {
    background: #2c241b;
    color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
    .input-grid {
        grid-template-columns: 1fr 1fr; /* Stack on tablet */
    }
    .swap-btn { display: none; }
}

@media (max-width: 768px) {
    .input-grid {
        grid-template-columns: 1fr; /* Full stack on mobile */
        gap: 15px;
    }
    .deals-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   HAJJ & UMRAH SECTION
   ========================================= */
#hajj {
    background-color: var(--bg-light-beige); /* Or white */
    padding: 150px 0;
    color: var(--text-almost-black);
}

/* 1. Intro */
.hajj-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    position: relative;
}

.section-tag {
    display: inline-block;
    background-color: #EDE5da;
    color: #5c554b;
    padding: 5px 13px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.hajj-header-text h2 {
    font-family: 'Inter', serif; /* Use serif for prestige */
    font-size: 2.5rem;
    color: #2b1c12;
    margin-bottom: 20px;
}

.hajj-header-text p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

.hajj-decoration {
    position: absolute;
    top: -20px;
    right: -40px;
    opacity: 0.6;
}

/* 2. Tab Switcher (Sliding Effect) */
.package-tabs {
    position: relative; /* Context for the glider */
    display: flex;
    justify-content: center;
    gap: 0; /* Gap handled by padding/margins if needed */
    margin-bottom: 50px;
    background-color: #F0E6DC; /* Light gray track */
    padding: 5px;
    border-radius: 50px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    z-index: 1; /* Establishes stacking context */
}
/* The Sliding Dark Pill */
.tab-glider {
    position: absolute;
    top: 5px;
    left: 5px; /* Start position matching first button */
    height: calc(100% - 10px);
    background-color: #2c241b; /* Dark Brand Color */
    border-radius: 40px;
    z-index: -1; /* Sits BEHIND the text */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth Slide */
    
    /* Default width (approximate, JS will fix this instantly) */
    width: 130px; 
}
.pkg-tab-btn {
    border: none;
    background: transparent !important; /* Removed BG so glider shows */
    padding: 12px 30px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 600;
    color: #5c554b; /* Inactive Text Color */
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2; /* Text sits ON TOP of glider */
}

/* Active Text Color */
.pkg-tab-btn.active {
    color: #E3C565; /* Gold Text */
}

/* 3. Packages Grid */
.packages-wrapper {
    min-height: 400px; /* Prevent layout jump */
}

.package-grid {
    display: none; /* Hidden by default */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeIn 0.5s ease;
}

.package-grid.active-grid {
    display: grid;
}

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

/* Card Styling */
.package-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

/* VIP Specifics */
.vip-card {
    border: 1px solid var(--primary-gold);
    background: linear-gradient(to bottom, #fff, #fffaee);
}

.vip-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--primary-gold);
    color: #2c241b;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 15px;
    border-bottom-left-radius: 15px;
    text-transform: uppercase;
}

/* Card Content */
.pkg-tier {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pkg-header h3 {
    font-size: 2rem;
    margin: 5px 0 15px;
    color: #2b1c12;
}

.pkg-price {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.pkg-price strong {
    font-size: 1.8rem;
    color: #2c241b;
}

.pkg-features ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.pkg-features li {
    margin-bottom: 12px;
    color: #444;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pkg-features .check {
    color: var(--primary-gold);
    font-weight: bold;
}

.pkg-action {
    margin-top: auto;
}

.btn-pkg {
    display: block;
    text-align: center;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #2c241b;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-pkg:hover {
    background-color: #f5f5f5;
}

.btn-gold {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
    color: #2c241b;
}

.btn-gold:hover {
    background-color: #d4b553;
}

/* 4. Trust Bar */
.hajj-trust-bar {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #555;
}

.trust-icon { font-size: 1.2rem; }

.trust-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.link-download {
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid #aaa;
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #25D366;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s;
}

.btn-whatsapp:hover { transform: scale(1.05); }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .package-grid {
        grid-template-columns: 1fr; /* Stack cards */
    }
    
    .hajj-header-text h2 { font-size: 2.2rem; }
    
    .hajj-trust-bar {
        flex-direction: column;
        text-align: center;
    }
    .section-tag {
    padding: 5px 13px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
    }
}

/* Audio Toggle Button */
.btn-audio {
    margin-top: 20px;
    background-color: transparent;
    border: 1px solid #E3C565; /* Gold Border */
    color: #2b1c12;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-audio:hover {
    background-color: #E3C565;
    color: white;
}

.btn-audio.playing {
    background-color: #E3C565; /* Gold background when playing */
    color: white;
    padding-right: 25px; /* Visual balance */
    box-shadow: 0 0 15px rgba(227, 197, 101, 0.4); /* Glow effect */
}

/* Equalizer Animation (Optional visual flair) */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.btn-audio.playing .icon-pause {
    animation: pulse 1s infinite;
}

/* =========================================
   HAJJ DETAILS (Dark & Gold)
   ========================================= */
#hajj-details {
    background-color: #1a1a1a; /* Dark background for Hajj night/spirituality */
    padding: 100px 0;
    color: #fff;
    position: relative;
}

/* =========================================
   TIMELINE ALIGNMENT FIX (Center-to-Center)
   ========================================= */

.hajj-timeline {
    max-width: 800px;
    margin: 60px auto;
    position: relative;
    /* 1. Create a fixed gutter of 50px for the line to live in */
    padding-left: 50px; 
}

/* THE VERTICAL LINE */
.hajj-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px; /* Line Thickness */
    background: linear-gradient(to bottom, var(--primary-gold), transparent);
    
    /* 2. Place Line in the middle of the gutter (25px) */
    left: 25px; 
    
    /* 3. CRITICAL: Shift it back by 50% of its own width so it's perfectly centered on pixel 25 */
    transform: translateX(-50%); 
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    /* No extra padding needed here, the parent handles the gutter */
}

/* THE DOT */
.timeline-item::after {
    content: '';
    position: absolute;
    top: 5px; /* Adjust vertical alignment with text */
    width: 14px; /* Dot Size */
    height: 14px;
    background-color: var(--primary-gold);
    border-radius: 50%;
    border: 3px solid #1a1a1a; /* Cutout effect */
    box-sizing: border-box;
    
    /* 4. Position Logic: */
    /* The item starts at 50px (due to parent padding). */
    /* We want the dot at 25px (where the line is). */
    /* So we move it left by exactly the parent padding amount (-50px) + the line position (25px) = -25px */
    left: -25px; 
    
    /* 5. CRITICAL: Shift it back by 50% of its OWN width */
    /* This ensures the CENTER of the dot aligns with the CENTER of the line */
    transform: translateX(-50%);
}

.time-marker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.day-badge {
    background-color: var(--primary-gold);
    color: #2c241b;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.month {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.time-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #fff;
}

.time-content p {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.micro-features {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
}

.micro-features li {
    font-size: 0.9rem;
    color: var(--primary-gold);
    background-color: rgba(227, 197, 101, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

/* Highlight Day (Arafat) */
.highlight-day .time-content {
    border: 1px solid rgba(227, 197, 101, 0.3);
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(45deg, rgba(255,255,255,0.03), transparent);
}

/* CTA Box */
.hajj-cta-box {
    text-align: center;
    background-color: #2c241b;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 700px;
    margin: 0 auto;
}

.hajj-cta-box h3 { font-size: 1.8rem; margin-bottom: 10px; }
.hajj-cta-box p { color: #aaa; margin-bottom: 30px; }

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-outline {
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-outline:hover {
    background-color: #fff;
    color: #2c241b;
}

/* =========================================
   UMRAH DETAILS (Light & Clean)
   ========================================= */
#umrah-details {
    background-color: #2c2c2c;
    padding: 130px 0;
}

.cities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 50px;
}

.city-card {
    background-color: #F6F0E9; /* Beige card */
    border-radius: 20px;
    overflow: hidden;
}

.city-img-box {
    height: 250px;
    position: relative;
}

.city-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
}

.city-details {
    padding: 30px;
}

.city-details h4 {
    font-size: 1rem;
    color: #2b1c12;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.city-details p {
    color: #555;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.ziyarat-list {
    list-style: none;
    padding: 0;
}

.ziyarat-list li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    color: #444;
}

.ziyarat-list li::before {
    content: '•';
    color: var(--primary-gold);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Umrah Footer Icons */
.umrah-includes {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.inc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #f6f0e9;
}

.inc-icon {
    font-size: 1.5rem;
    background-color: #F0E6DC;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 768px) {
    .cities-grid { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; }
    .hajj-timeline::before { left: 10px; }
    .timeline-item::after { left: -20px; }
    .hajj-timeline { padding-left: 20px; }
}
/* --- RESPONSIVE (Fixing Timeline Alignment) --- */
@media (max-width: 768px) {
    
    /* 1. Reduce the gutter space to 30px */
    .hajj-timeline {
        padding-left: 30px; 
    }

    /* 2. Move Line to the exact center of the new gutter (15px) */
    /* Note: It inherits the translateX(-50%) from desktop, so this is center-aligned */
    .hajj-timeline::before {
        left: 15px; 
    }

    /* 3. Pull Dot back by exactly the amount of the padding (-15px) */
    /* This puts the dot anchor at 15px, aligning perfectly with the line */
    .timeline-item::after {
        left: -15px; 
    }
    
    /* Other mobile adjustments (Keep these) */
    .cities-grid { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; }
}

/* =========================================
   BOOKING PAGE (Standalone)
   ========================================= */
.booking-page {
    background-color: var(--bg-light-beige);
    min-height: 100vh;
}

/* Header */
.booking-header {
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

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

.back-link {
    color: #666;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.back-link:hover { color: #2c241b; }

/* Main Section */
.booking-section {
    padding: 60px 0 100px;
}

.booking-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Summary Left, Form Right */
    gap: 80px;
    align-items: start;
}

/* Summary Column */
.step-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #999;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.booking-summary h1 {
    font-size: 2.8rem;
    line-height: 1.1;
    color: #2b1c12;
    margin-bottom: 15px;
}

.booking-summary p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Selected Package Card */
.selected-package-card {
    background-color: #fff;
    border: 1px solid #E3C565; /* Gold Border */
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(227, 197, 101, 0.1);
}

.pkg-icon {
    font-size: 2rem;
    background-color: #FFF8E1;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.pkg-info .label {
    display: block;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
}

.pkg-info h2 {
    font-size: 1.5rem;
    color: #2b1c12;
    margin: 0;
}

.assurance-list {
    list-style: none;
    padding: 0;
}

.assurance-list li {
    margin-bottom: 15px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

/* Form Container */
.booking-form-container {
    background-color: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Responsive */
@media (max-width: 900px) {
    .booking-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .booking-summary h1 { font-size: 2.2rem; }
    .booking-form-container { padding: 25px; }
}

/* =========================================
   DARK HERO WIDGET
   ========================================= */
.hero-widget-dark {
    background-color: #111;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    z-index: 10;
    
    /* ADDED FOR SMOOTH RESIZING */
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden; /* Prevents content spill during animation */
}

/* --- TABS --- */
.widget-tabs {
    position: relative;
    display: inline-flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    width: 100%;
}

.widget-tab-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    padding: 10px 5px;
    position: relative;
    transition: color 0.3s ease;
    z-index: 2;
}

.widget-tab-btn.active {
    color: #E3C565; /* Gold text */
}

/* The Glider (Underline effect) */
#home-glider {
    position: absolute;
    bottom: -1px; /* Sit on the border line */
    left: 0;
    height: 3px;
    background-color: #E3C565;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 3;
    width: 0; /* JS sets this */
}

/* --- INPUTS --- */
.input-dark-group {
    margin-bottom: 20px;
}

.input-dark-group label {
    display: block;
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.input-dark-group input {
    width: 100%;
    background-color: #222;
    border: 1px solid #444;
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.input-dark-group input:focus {
    border-color: #E3C565;
}

/* --- BUTTONS --- */
.widget-submit-btn {
    width: 100%;
    background-color: #E3C565; /* Gold */
    color: #000;
    font-weight: 700;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.2s, background-color 0.2s;
}

.widget-submit-btn:hover {
    background-color: #d4b553;
    transform: translateY(-2px);
}

/* --- PILGRIMAGE TAB (Specifics) --- */
.widget-subtitle {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.pilg-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.widget-action-btn {
    display: block;
    width: 100%;
    background-color: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 18px;
    text-align: center;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.widget-action-btn:hover {
    background-color: #E3C565;
    color: #000;
    border-color: #E3C565;
}

/* Responsive */
@media (max-width: 600px) {
    .widget-tabs {
        justify-content: space-between;
        gap: 0;
    }
    .hero-widget-dark {
        padding: 20px;
    }
}

/* =========================================
   ROTATING TEXT (Character Stagger)
   ========================================= */

/* Main Container Alignment */
.visual-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 2;
    position: relative;
    text-align: center;
}

.hero-title-rotator {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between "Experience" and Gold Box */
    
    /* Responsive Font Sizing */
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    will-change: transform;
}

/* The Gold Box Container */
.rotating-wrapper {
    background-color: var(--primary-gold);
    color: #1a1a1a;
    padding: 0 0.4em;
    border-radius: 8px;
    height: 1.3em;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    
    /* ADDED: Smooth Width Transition */
    /* This makes the box grow/shrink smoothly */
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* We start with a default width (JS will override this instantly) */
    width: auto;
    white-space: nowrap;
}

/* Individual Character Styling */
.rotator-char {
    display: inline-block;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
    will-change: transform, opacity;
    min-width: 0.3em; /* Prevents spaces from collapsing to zero width */
}

/* STATE 1: Initial (Hidden Below) */
.rotator-char.initial {
    transform: translateY(100%) rotateX(-90deg);
    opacity: 0;
}

/* STATE 2: Active (Visible) */
.rotator-char.active {
    transform: translateY(0) rotateX(0);
    opacity: 1;
}

/* STATE 3: Exit (Hidden Above) */
.rotator-char.exit {
    transform: translateY(-120%) rotateX(90deg);
    opacity: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title-rotator {
        flex-direction: column; /* Stack on mobile */
        gap: 10px;
    }
    
    .rotating-wrapper {
        margin-top: 5px;
    }
}

/* =========================================
   CREATIVE ROTATING SECTION
   ========================================= */
.creative-section {
    background-color: #000; /* Match your dark theme */
    padding: 100px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.creative-heading {
    display: flex;
    flex-wrap: wrap; /* Wraps on mobile */
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between text and box */
    
    /* Responsive Typography */
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    /* Scales between 2.5rem (mobile) and 6rem (desktop) */
    font-size: clamp(2.5rem, 8vw, 6rem); 
    line-height: 1;
    color: #fff;
}

/* 1. The Sliding Box Container */
.sliding-box {
    background-color: var(--primary-gold); /* Your Brand Color */
    /* Alternatively use the purple from video: #5B4DFF */
    
    color: #fff; /* Text inside box */
    height: 1.1em; /* Tightly fits the text height */
    padding: 0 0.4em; /* Horizontal padding */
    border-radius: 12px; /* Rounded corners like video */
    overflow: hidden; /* Mask the sliding list */
    display: flex;
    align-items: center;
    position: relative;
    
    /* Optional: Pause animation on hover */
    cursor: default;
}

.sliding-box:hover .sliding-list {
    animation-play-state: paused;
}

/* 2. The List of Words */
.sliding-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    
    /* The Animation Configuration */
    /* Duration: 6s total cycle */
    /* Easing: Custom 'Bounce' effect */
    animation: slideUpSnap 6s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sliding-list li {
    height: 1.1em; /* Matches container height */
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevent breaking */
}

/* 3. The Keyframes (3 Words + 1 Duplicate) */
@keyframes slideUpSnap {
    /* Position 1: components! */
    0%, 25% {
        transform: translateY(0);
    }
    
    /* Position 2: thinking */
    33%, 58% {
        transform: translateY(-1.1em);
    }
    
    /* Position 3: coding */
    66%, 91% {
        transform: translateY(-2.2em);
    }
    
    /* Position 4: components! (Duplicate) */
    100% {
        transform: translateY(-3.3em);
    }
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    .creative-heading {
        justify-content: flex-start; /* Left align on small screens */
    }
    
    .sliding-box {
        margin-top: 5px; /* Slight spacing if wrapped */
    }
}

/* =========================================
   CIRCULAR ROTATING BADGE
   ========================================= */

/* The Wrapper (Controls size & positioning) */
/* =========================================
   CIRCULAR ROTATING BADGE (Horizontal Center Only)
   ========================================= */

.circular-badge-container {
    /* 1. Reset Positioning to sit in the flow */
    position: relative; 
    
    /* 2. Horizontal Centering */
    margin: 0 auto; /* Top/Bottom 0, Left/Right Auto centers it */
    
    /* 3. Spacing (Optional: Adds gap above/below so it doesn't touch text) */
    margin-top: 0px; 
    margin-bottom: 0px;

    /* 4. Responsive Size */
    width: clamp(120px, 15vw, 180px);
    height: clamp(120px, 15vw, 180px);
    
    z-index: 10;
}

.circular-badge {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ... Keep the rest of your .text-ring, .center-icon styles the same ... */

/* 1. The Spinning Text Ring */
.text-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spinSlow 15s linear infinite;
}

/* Individual Characters (Positioned by JS) */
/* UPDATE THIS RULE in style.css */
.text-ring span {
    position: absolute;
    left: 50%;
    top: 0;
    width: 20px; /* Approximate char width */
    margin-left: -10px; /* Center horizontally */
    height: 50%; /* Radius: Half of the parent size */
    
    transform-origin: bottom center; /* Pivot from the center of the circle */
    
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}

/* 2. The Center Icon (Static) */
.center-icon {
    position: absolute;
    width: 40%;
    height: 40%;
    background-color: var(--primary-gold); /* Gold Background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1a1a1a; /* Dark Icon Color */
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.center-icon svg {
    width: 50%;
    height: 50%;
}

/* 3. Animation Keyframes */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Dark/Light Theme Support (Optional) --- */
/* If placed on a white background, invert colors */
[data-theme="light"] .text-ring span {
    color: #1a1a1a;
}

/* =========================================SERVICE CARD PNG ICONS========================================= */

/* Ensure the container remains a flex circle */
.card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Keeps the image inside the circle */
}

.card-png-icon {
    /* Maintain the size of the original emoji */
    width: 70px; 
    height: 70px;
    
    /* Ensure the image doesn't distort */
    object-fit: contain;
    
    /* Smooth transition if you add hover effects later */
    transition: transform 0.3s ease;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
    .card-png-icon {
        width: 50px;
        height: 50px;
    }
}

/* Optional: Slight lift effect on hover to match card style */
.service-card:hover .card-png-icon {
    transform: scale(1.1);
}