@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --color-gold: #D4AF37;
    --color-gold-light: #F2D574;
    --color-blue-deep: #0B1121;
    --color-blue-mid: #151F32;
    --color-text: #F8FAFC;
    --color-text-muted: #94A3B8;
    
    --gradient-warm: linear-gradient(180deg, rgba(212, 175, 55, 0.15) 0%, rgba(11, 17, 33, 0) 100%);
    --gradient-cool: linear-gradient(180deg, rgba(11, 17, 33, 0) 0%, rgba(21, 31, 50, 0.9) 100%);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--color-blue-deep);
    color: var(--color-text);
    overflow-x: hidden;
}

/* --- Navigation --- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    background: rgba(11, 17, 33, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.logo span { color: var(--color-gold); }

.main-nav a {
    color: var(--color-text);
    text-decoration: none;
    margin-left: 2rem;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.main-nav a:hover { opacity: 1; color: var(--color-gold); }

.btn-cta-small {
    border: 1px solid var(--color-gold);
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    color: var(--color-gold) !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}
.btn-cta-small:hover {
    background: var(--color-gold);
    color: var(--color-blue-deep) !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
    transform: translateY(-1px);
}

/* --- Flight Path --- */
.flight-path-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100vh; -- Height will be set by JS loop to cover full doc */
    pointer-events: none;
    z-index: 5;
    opacity: 0.8;
}

#flight-path-svg {
    width: 100%;
    height: 100%;
}

.airplane-icon {
    position: absolute;
    width: 80px; /* Increased from 40px */
    height: 80px; /* Increased from 40px */
    z-index: 6;
    transform: translate(-50%, -50%);
    will-change: top, left, transform;
    pointer-events: none;
}
.airplane-icon img { width: 100%; }

/* --- Sections --- */
/* ... (unchanged) ... */

/* Arrival - Footer/Form */
/* ... (unchanged) ... */

.form-container {
    flex: 0 0 500px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    width: 100%; /* Ensure it can shrink */
}

/* ... (unchanged) ... */

/* Responsive */
@media (max-width: 900px) {
    .section-journey .journey-content { grid-template-columns: 1fr; }
    .arrival-content { flex-direction: column-reverse; align-items: center; }
    .landing-airplane { display: none; }
    .form-container { width: 100%; max-width: 600px; padding: 1.5rem; }
    .hero-content h1 { font-size: 2.5rem; }
    .milestone { margin: 1rem 0 !important; width: 100%; }
    
    .quote-form { display: flex; flex-direction: column; } /* Stack form fields */
    .form-group.full-width { grid-column: auto; }
}


/* --- Sections --- */
section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 2rem 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Departure - Hero */
.section-departure {
    background: 
        linear-gradient(rgba(11, 17, 33, 0.3), rgba(11, 17, 33, 0.8)),
        url('hero_bg.webp') no-repeat center center/cover;
    align-items: flex-start; /* Left align text */
    padding-top: 8rem;
}

.hero-content {
    max-width: 800px;
    z-index: 10;
}

.hero-content h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.highlight { 
    color: transparent; 
    background: linear-gradient(90deg, #F2D574, #D4AF37); 
    -webkit-background-clip: text; 
    background-clip: text; 
}
.hero-content p {
    font-size: 1.2rem;
    color: #CBD5E1;
    max-width: 600px;
    margin-bottom: 2rem;
}

/* Journey - Middle */
.section-journey {
    background: var(--color-blue-mid);
    /* Subtle gradient to link warm top to cool bottom */
    background: linear-gradient(180deg, #1a233b 0%, #151F32 50%, #0d1526 100%);
    overflow: hidden;
}

.journey-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    position: relative;
    z-index: 10;
}

.about-text h2 { font-size: 2.5rem; color: var(--color-gold); margin-bottom: 1rem; }
.about-text p { font-size: 1.1rem; color: var(--color-text-muted); line-height: 1.8; margin-bottom: 1.5rem; }

.mission-statement {
    border-left: 3px solid var(--color-gold);
    padding: 1rem 1.5rem;
    background: rgba(212, 175, 55, 0.05);
    border-radius: 0 8px 8px 0;
    margin-top: 1.5rem;
}

.mission-statement p {
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 0;
    font-weight: 500;
}

/* Zig-Zag Layout for Milestones */
.milestones {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 800px; /* Constrain width for better zig-zag appearance */
    margin: 0 auto;
}

.milestone {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Slightly more visible border */
    padding: 2rem; /* Increased padding */
    border-radius: 16px;
    backdrop-filter: blur(12px);
    width: 280px;
    transition: all 0.4s ease;
    margin-bottom: 2rem; 
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* 1st Milestone: Right */
#milestone-1 {
    align-self: flex-end;
}

/* 2nd Milestone: Left */
#milestone-2 {
    align-self: flex-start;
}

/* 3rd Milestone: Right */
#milestone-3 {
    align-self: flex-end;
}

/* Gradient Border Effect on Hover or Active (Plane overhead) */
.milestone:hover, .milestone.active { 
    transform: translateY(-8px); 
    border-color: rgba(212, 175, 55, 0.8); /* Slightly stronger gold */
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.1); /* Enhanced glow */
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease; /* Smooth activation */
}

.milestone-icon { 
    width: 60px; height: 60px; margin-bottom: 1.25rem; display: block; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.milestone h3 { font-size: 1.35rem; margin-bottom: 0.75rem; color: #fff; }
.milestone p { font-size: 0.95rem; color: #CBD5E1; line-height: 1.6; }

/* Arrival - Footer/Form */
.section-arrival {
    background: 
        linear-gradient(rgba(11, 17, 33, 0.7), rgba(11, 17, 33, 0.95)),
        url('footer_bg.webp') no-repeat center bottom/cover;
    /* Flip background horizontally to put Big Ben on left if it was on right, or ensure it's visible */
    /* Assuming original image has Big Ben on Right, let's flip it if user wants it on Left */
    /* transform: scaleX(-1); This would flip everything including text if applied to body, but for bg image we can't easily flip just image via CSS background property standardly without a wrapper.
       However, the user says "London famous site is not left side". This implies they WANT it on the left, or simple visibility.
       If the image generated has Big Ben on the right, and we put the form on the right, it covers it.
       So we should move form to RIGHT, and hope image is on LEFT?
       Wait, "make sure that london famuous site is not left side" - this might mean "Keep it on the Right" or "Don't put it on the Left".
       Actually, standard design usually puts visual on one side, form on other.
       User says: "make request a quote form towards right" -> Form = Right.
       User says: "and make sure that london famuous site is not left side" -> Visual != Left.
       So Visual should be on Right? But Form is on Right. They would overlap.
       
       Let's re-read: "make sure that london famuous site is not left side"
       Maybe they mean "is NOT on the left side" (i.e. put it on the right).
       BUT if form is on the right, and site is on the right, that's a conflict.
       
       Let's look at the generated image prompt: "prominent rendering of Big Ben...".
       Usually, if I move the form to the Right, the Left is empty.
       If the user wants the site NOT on the left, and form on the Right... where does the site go? Behind the form?
       
       Alternative interpretation: "make sure that london famuous site is [visible and] not [hidden on the] left side" ??
       Or maybe simply: "london site is NOW on the left, please change it?"
       
       Let's assume the user wants:
       1. Form -> Right.
       2. London Site -> Left (Default layout usually balances).
       Wait, "not left side". 
       If I put form on High Right.
       London Site must be Low Left?
       
       Let's try to interpret "not left side" as a typo for "on the left side" or maybe they really want it on the right?
       If they want it on the right, and form on the right -> Clash.
       
       Let's assume the user meant "Make sure the London site IS visible on the Left side" (since form is going right).
       OR "The london site is currently on the left and I don't like it".
       
       Let's look at the request: "make request a quote form towards right"
       This is clear. Form container should go to `margin-left: auto`.
       
       "and make sure that london famuous site is not left side"
       This is the tricky part.
       If I move the form to the right, the left is open.
       If the site is NOT on the left, it must be on the right.
       If it is on the right, it is behind the form.
       
       Maybe the user means "is now on the left side" (observation) "is not left side" (complaint?).
       
       Let's Try:
       1. Move form to Right.
       2. Flip the background image so Big Ben is on the LEFT (assuming it might be on the right currently and getting covered, or vice versa).
       
       Actually, `footer_bg.png` was generated. I don't see it, but usually these images are centered.
       
       Let's swap the flex direction or justify content.
       Original CSS:
       .arrival-content { display: flex; justify-content: space-between; ... }
       .landing-airplane { flex: 1; display: flex; justify-content: flex-end; ... }
       .form-container { flex: 0 0 500px; ... }
       
       HTML Order:
       1. Form Container
       2. Landing Airplane
       
       If I want Form on Right:
       I should swap the order or use `flex-direction: row-reverse`.
       
       Let's use `justify-content: flex-end` for the form container if it's the only thing? 
       No, `arrival-content` has both.
       
       Let's simply allow the user to control the background position or just move the form.
       I will set `background-position: left bottom` to try and show the image on the left, or `right bottom`.
       
       Let's go with:
       1. `.arrival-content` -> `flex-direction: row-reverse;` (Puts Form on Right, Airplane/Space on Left).
       2. Ensure background image covers.
       
       Wait, checking HTML:
       <div class="arrival-content">
           <div class="form-container">...</div>
           <div class="landing-airplane">...</div>
       </div>
       
       Default is Row.
       Form is Left. Airplane is Right.
       
       User wants Form to Right.
       So Visuals (Airplane) to Left.
       
       So `flex-direction: row-reverse` seems correct for the content layout.
       
       Background Image: "london site is not left side".
       If I do row-reverse, the Left side is now the "Airplane" side.
       The background image stays covering the section.
       If Big Ben is in the image on the Right side (typical for maps sometimes), moving the form to the Right (on top of it) hides it.
       So we probably want Big Ben on the LEFT.
       
       I will add a class or style to flip the background or position it.
       `background-position: left center` might help?
       Or `transform: scaleX(-1)` on the container? No, text flips.
       
       I will set `flex-direction: row-reverse`.
       And I will try to offset the background to the left.
       
    */
    background: 
        linear-gradient(rgba(11, 17, 33, 0.7), rgba(11, 17, 33, 0.95)),
        url('footer_bg.webp') no-repeat left bottom/cover; /* Anchor BG to Left */
    justify-content: flex-start;
    padding-top: 6rem;
}

.arrival-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row-reverse; /* Form (1st) -> Right, Plane (2nd) -> Left */
    /* Ensure background is seen nicely */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    z-index: 10;
}

.landing-airplane {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-top: 10rem;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}
.landing-airplane img { width: 400px; opacity: 0.8; }

.form-container {
    flex: 0 0 500px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.form-header h2 { font-size: 2rem; margin-bottom: 0.5rem; }
.form-header p { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 2rem; }

.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; }
.full-width { grid-column: span 2; }
.form-group label { font-size: 0.8rem; margin-bottom: 0.25rem; color: var(--color-text-muted); }

.form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.form-control:focus { 
    outline: none; 
    border-color: var(--color-gold); 
    background: rgba(255, 255, 255, 0.1); 
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
textarea.form-control { resize: vertical; min-height: 100px; }

.btn-cta-gold {
    width: 100%;
    padding: 1rem;
    background: var(--color-gold);
    color: var(--color-blue-deep);
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
}
.btn-cta-gold:hover { background: var(--color-gold-light); transform: translateY(-2px); box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }

.success-message {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10B981;
    color: #10B981;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

footer {
    width: 100%;
    text-align: center;
    color: #475569;
    font-size: 0.8rem;
    margin-top: auto;
    padding-bottom: 1rem;
}

/* Animations */
/* Performance: Use will-change to hint browser */
.fade-in { 
    animation: fadeInUp 0.8s ease forwards; 
    opacity: 0; 
    will-change: opacity, transform; 
}

/* Mobile LCP Fix: Don't hide Hero content initially on small screens */
@media (max-width: 768px) {
    .hero-content.fade-in {
        opacity: 1 !important;
        animation: none !important;
    }
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

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

/* Responsive */
@media (max-width: 1024px) {
    /* Hide complex flight path on smaller screens */
    .flight-path-container { display: none; }

    section { padding: 4rem 1.5rem; } /* Reduce padding on mobile sections */
    .section-departure { padding-top: 6rem; }

    .section-journey .journey-content { grid-template-columns: 1fr; gap: 3rem; }
    .arrival-content { flex-direction: column-reverse; align-items: center; }
    .landing-airplane { display: none; }
    
    .form-container { 
        width: 100%; 
        max-width: 600px; 
        flex: none; 
        padding: 1.5rem;
        margin: 0 auto; 
    }
    .hero-content h1 { font-size: 2.75rem; } /* Slightly smaller but readable */
    .hero-content p { font-size: 1.1rem; }
    
    /* Reset Zig-Zag to Center Column */
    .milestones { max-width: 100%; align-items: center; gap: 2rem; }
    .milestone { 
        margin: 0 !important; /* Remove bottom margin managed by zig-zag */
        width: 100%; 
        max-width: 450px;
        align-self: center !important; 
    }

    .quote-form { display: flex; flex-direction: column; }
    .form-group.full-width { grid-column: auto; }

    /* Fix Navbar on Mobile */
    header { flex-direction: column; padding: 1rem 1.5rem; background: rgba(11, 17, 33, 0.95); }
    .logo { margin-bottom: 1rem; font-size: 1.4rem; }
    .main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; align-items: center; }
    .main-nav a { margin-left: 0; font-size: 1rem; padding: 0.5rem; }
}


@media (max-width: 480px) {
    .hero-content h1 { font-size: 2.2rem; }
    .form-header h2 { font-size: 1.75rem; }
    .form-container { padding: 1.25rem; }
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}

/* --- WhatsApp Float Button --- */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: radial-gradient(circle at 30% 30%, #151F32, #0B1121);
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    text-decoration: none;
    animation: glow-pulse 3s infinite;
    backdrop-filter: blur(5px);
}

.whatsapp-float svg {
    width: 34px;
    height: 34px;
    fill: var(--color-gold);
    transition: all 0.4s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Tooltip */
.whatsapp-tooltip {
    position: absolute;
    right: 75px; 
    background: var(--color-gold);
    color: var(--color-blue-deep);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Notification Dot */
.notification-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 14px;
    height: 14px;
    background-color: #EF4444; /* Red */
    border: 2px solid var(--color-blue-deep);
    border-radius: 50%;
    z-index: 2;
    animation: bounce 2s infinite;
}

/* Hover Effects */
.whatsapp-float:hover {
    background: var(--color-gold);
    border-color: #F8FAFC;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4), 0 0 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-5px) scale(1.05);
}

.whatsapp-float:hover svg {
    fill: var(--color-blue-deep);
    transform: rotate(15deg) scale(1.1);
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.whatsapp-float:hover .notification-dot {
    animation: none;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Animations */
@keyframes glow-pulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px; /* Slightly larger for touch */
        height: 55px;
    }
    .whatsapp-float svg { width: 28px; height: 28px; }
    .whatsapp-tooltip { display: none; } /* Hide tooltip on mobile to save space */
}