/* =========================================
   XCLUSIVE CHAUFFEURS - VANGUARD LUXURY (FINAL)
   Concept: Cinematic, Glassmorphism, Fluid
   ========================================= */

/* 1. IMPORTS & RESET */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    --bg-body: #030303;
    --bg-surface: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --accent: #ffffff;
    /* Classic Gold */
    --accent-glow: rgba(250, 249, 246, 0.955);
    --glass-bg: rgba(20, 20, 20, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    --spacing-section: 120px;
    --top-bar-height: 40px;
}

/* --- TOP BAR MARQUEE --- */
/* --- TOP BAR MARQUEE (Seamless Infinite Scroll) --- */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--top-bar-height);
    background-color: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2000;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.marquee {
    display: flex;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-content {
    display: flex;
    animation: scrollText 20s linear infinite;
    min-width: 100%;
    /* Ensure it fills at least the screen */
}

/* Pause on hover optional */
.marquee:hover .marquee-content {
    animation-play-state: paused;
}

.marquee span {
    padding-right: 50px;
    /* Gap between repeats */
    color: var(--accent);
    /* Or red as per inline style */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 3px;
    font-weight: 500;
    white-space: nowrap;
}

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Move half the double width */
    }
}

/* Adjust Navbar position */
.navbar {
    top: var(--top-bar-height) !important;
}

/* Adjust Mobile Menu position */
@media (max-width: 1024px) {
    .nav-menu {
        top: var(--top-bar-height) !important;
        height: calc(100vh - var(--top-bar-height)) !important;
        padding-bottom: var(--top-bar-height);
        /* Ensure bottom items are visible */
    }
}

/* --- Image Protection & Dots Z-Index --- */
.fleet-media {
    position: relative;
    /* Ensure child z-index works */
}

/* Glass Shield over the image */
.fleet-media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    /* Blocks right click */
}

/* Ensure Dots are ABOVE the shield so they are clickable */
.dots-container {
    position: absolute;
    bottom: 20px;
    z-index: 20;
    /* Higher than shield */
    width: 100%;
    text-align: center;
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot.active,
.dot:hover {
    background-color: var(--accent);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-body);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.7;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

h1,
h2,
h3,
h4 {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 400;
}

h1 {
    font-size: 5rem;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 2rem;
}

h1 span {
    display: block;
    font-style: italic;
    color: var(--accent);
}

h2 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.4s ease;
}

li {
    list-style: none;
}

img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    pointer-events: none;
    /* Anti-theft: Click passes through to container */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

/* 2. NAVIGATION (Transparent & Fluid) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    /* Reduced from 2rem to 1rem */
    transition: 0.4s;
}

.navbar.scrolled {
    padding: 0.8rem 0;
    background: rgba(3, 3, 3, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
}

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

.logo img,
.logo3 img {
    /* Added logo3 support */
    height: 120px;
    width: auto;
    filter: contrast(1.2);
}

.nav-menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    list-style: none;
    margin-right: 1rem;
}

.nav-link {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 500;
    color: var(--text-primary);
    position: relative;
    white-space: nowrap;

}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.cta-btn {
    border: 1px solid var(--accent);
    padding: 0.8rem 2rem;
    border-radius: 0;
    transition: 0.4s;
}

.nav-link.cta-btn:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
}

/* Hamburger */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1001;
}

.bar {
    display: block;
    width: 30px;
    height: 2px;
    margin: 6px 0;
    background: white;
    transition: 0.4s;
}

.hamburger.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* 3. HERO SECTION (Immersive) */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    text-align: center;
    padding-bottom: 15vh;
    /* Space for booking form */
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1563720223185-11003d516935?q=80&w=2070&auto=format&fit=crop') center center/cover no-repeat;
    opacity: 0.4;
    mix-blend-mode: overlay;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.hero-description {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 3rem;
    color: #ccc;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* 4. BOOKING FORM (Floating Glass Panel) */
.booking-section {
    position: relative;
    margin-top: -100px;
    z-index: 10;
    padding-bottom: 4rem;
}

.booking-container {
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid #ffffff;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.booking-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
    gap: 3rem;
}

.booking-tab {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
    font-family: var(--font-body);
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

.booking-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Form Grid - Smart Auto-Layout */
#formFieldsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2rem;
    /* Tighter row gap, wider column gap */
    margin-bottom: 2.5rem;
    align-items: end;
    min-width: 0;
}

#formFieldsContainer>div {
    min-width: 0;
}

.form-group-with-icon {
    margin-bottom: 0;
}

.form-group-with-icon label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* AGGRESSIVE INPUT STYLING */
.input-with-icon input,
.input-with-icon select,
input[name="pickupAddress"],
input[name="dropoffAddress"],
.pac-target-input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6) !important;
    /* Slightly transparent */
    border: 1px solid #444 !important;
    /* Subtle border */
    border-bottom: 2px solid #555 !important;
    padding: 0 15px !important;
    /* Reduced padding without icon */
    color: #ffffff !important;
    caret-color: #ffffff !important;
    /* Visible cursor */
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-family: var(--font-body) !important;
    height: 50px !important;
    line-height: 50px !important;
    border-radius: 4px !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    z-index: 100;
}

/* Placeholder Styling */
::placeholder {
    color: #aaaaaa !important;
    opacity: 1 !important;
}

::-webkit-input-placeholder {
    color: #aaaaaa !important;
}

::-moz-placeholder {
    color: #aaaaaa !important;
}

/* FIX AUTOFILL WHITE BACKGROUND - AGGRESSIVE */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
}

.input-with-icon input:focus,
.input-with-icon select:focus {
    border-color: var(--accent) !important;
    background-color: rgba(20, 20, 20, 1) !important;
}

.input-icon {
    display: none;
}

/* Keeping it clean */

.add-return-btn {
    display: block;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    color: #666;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    margin-bottom: 1rem;
}

.btn-search {
    width: 100%;
    background: var(--accent);
    color: #000;
    border: none;
    padding: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    /* Flex alignment */
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-search svg {
    width: 20px;
    height: 20px;
    /* Constrain icon size */
}

.btn-search:hover {
    background: white;
}

/* 5. SECTIONS GENERAL */
section {
    padding: var(--spacing-section) 0;
}

.section-header {
    text-align: center;
    margin-bottom: 5rem;
}

.section-subtitle {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--accent);
    margin-top: 1rem;
}

/* 6. SERVICES (Hover Cards) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    background: transparent;
}

.service-card {
    position: relative;
    height: 450px;
    overflow: hidden;
}

.service-image {
    width: 100%;
    height: 100%;
    transition: 0.6s ease;
}

.service-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    z-index: 1;
    /* Ensure image is properly layered */
}

.service-card:hover .service-image img {
    transform: scale(1.1);
    filter: brightness(0.4);
}

.service-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transform: translateY(20px);
    transition: 0.4s;
}

.service-card:hover .service-content {
    transform: translateY(0);
}

.service-content h3 {
    font-size: 2rem;
    color: white;
    margin-bottom: 0.5rem;
}

.service-link {
    color: var(--accent);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* 7. FLEET (Showcase) */
.fleet-grid {
    display: grid;
    gap: 8rem;
}

.fleet-card {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.fleet-card:nth-child(even) {
    flex-direction: row-reverse;
}

.fleet-image {
    flex: 1.2;
    position: relative;
    height: 400px;
    /* Reduced from 400px */
    border: 1px solid var(--glass-border);
    /* Subtle border */
    padding: 20px;
    /* Makes image appear smaller inside */
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.02);
    /* Slight tint */
    transition: border-color 0.3s ease;
}

.fleet-image:hover {
    border-color: var(--accent);
    /* Glow gold on hover */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.fleet-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    /* Proper car view */
}

.fleet-image::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1), transparent 70%);
}

.fleet-content {
    flex: 1;
}

.fleet-content h3 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-style: italic;
}

.fleet-description {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #888;
}

.fleet-features {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.fleet-features li {
    font-size: 0.8rem;
    text-transform: uppercase;
    border: 1px solid #333;
    padding: 0.5rem 1rem;
    color: #aaa;
}

.btn-outline {
    border-bottom: 1px solid var(--accent);
    padding-bottom: 5px;
    color: var(--accent);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* 8. TESTIMONIALS & CONTACT */
.testimonials-section {
    background: #080808;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
}

.testimonial-card {
    padding: 2rem;
    border-left: 1px solid var(--accent);
}

.testimonial-text {
    font-size: 1.3rem;
    font-family: var(--font-heading);
    font-style: italic;
    color: #ddd;
    margin-bottom: 1.5rem;
}

.author-name {
    color: var(--accent);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-item {
    margin-bottom: 2rem;
}

.contact-item h4 {
    font-size: 0.8rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.contact-item p {
    font-size: 1.5rem;
    color: white;
    font-family: var(--font-heading);
}

.contact-form-container {
    background: #111;
    padding: 4rem;
    border: 1px solid #ffffff;
}

/* 9. FOOTER */
.footer {
    border-top: 1px solid #111;
    padding: 5rem 0;
    font-size: 0.9rem;
    color: #555;

}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 4rem;

}

.footer h3 {
    font-size: 1rem;
    color: white;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    letter-spacing: 1px;
}



.footer-links a:hover {
    color: var(--accent);
}


.footer-section img {
    width: 120px;
    height: 120px;


}

/* 9. ABOUT SECTION (PREMIUM) */
.about {
    padding: 8rem 0;
    background-color: #050505;
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.about-image {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    max-height: 600px;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.about-image:hover img {
    transform: scale(1.05);
}

.about-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), transparent);
    pointer-events: none;
}

/* Gold decorative border */
.about-image-border {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent);
    z-index: -1;
    transition: all 0.4s ease;
}

.about-image:hover .about-image-border {
    top: -10px;
    left: -10px;
}

.about-content-premium {
    padding-left: 2rem;
}

.about-subtitle {
    color: var(--accent);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    display: block;
    font-weight: 600;
}

.about-title-premium {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    font-family: var(--font-heading);
    color: white;
}

.about-text-premium {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.value-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.value-icon {
    font-size: 1.5rem;
    color: var(--accent);
    background: rgba(212, 175, 55, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-content h4 {
    margin: 0 0 0.5rem 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.value-content p {
    margin: 0;
    color: #999;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Stats Styling for New Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    /* Ensure 3 columns */
    gap: 2rem;
    margin-top: 3rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    border: none !important;
    background: transparent !important;
}

.stat-number {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Tablet/Mobile Response */
@media (max-width: 968px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-content-premium {
        padding-left: 0;
        text-align: center;
    }

    .about-image {
        max-height: 400px;
    }

    .about-image-border {
        display: none;
    }

    .values-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }
}


/* 10. RESPONSIVE MOBILE */
@media (max-width: 1024px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        flex-direction: column;
        justify-content: center;
        z-index: 1000;
    }

    .nav-menu.active {
        display: flex;
        justify-content: center;
        gap: 15px;
        /* Reduced gap for denser mobile menu */
    }

    /* Mobile Navbar Adjustments */
    .navbar {
        padding: 10px 0;
        height: auto;
        position: relative;
    }

    .nav-container {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo img {
        height: 60px;
        /* Slightly smaller for mobile if needed, or keep 80 */
        width: auto;
    }

    .hamburger {
        display: block;
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        z-index: 1001;
    }

    .hero {
        margin-top: -7rem;
        padding-bottom: 0rem;
    }

    .hero-title {
        margin-top: -12rem;
    }

    .booking-section {
        margin-top: 0;
        padding-top: 2rem;
        background: #050505;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .booking-container {
        padding: 1rem 0.75rem;
        border: none;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .booking-tabs {
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
        justify-content: space-between;
    }

    .booking-tab {
        font-size: 0.75rem;
        letter-spacing: 1px;
        padding: 0.5rem 0;
        white-space: nowrap;
    }

    #formFieldsContainer {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-group-with-icon {
        margin-bottom: 0;
    }

    .form-group-with-icon label {
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-bottom: 0.3rem;
    }

    .input-with-icon {
        width: 100%;
    }

    .input-with-icon input,
    .input-with-icon select {
        width: 100%;
        font-size: 1rem;
        padding: 0.6rem 0;
        box-sizing: border-box;
    }

    .btn-search {
        padding: 1rem;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .btn-search svg {
        width: 16px;
        height: 16px;
    }

    .add-return-btn {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }

    #bookingPrice {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }

    .services-grid,
    .testimonials-grid,
    .contact-grid,
    .about-grid,
    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-content {
        padding-right: 0;
    }

    .footer-content {
        text-align: center;
    }

    .footer-section img {
        margin: 0 auto 1.5rem !important;
        display: block;
    }

    .social-links {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }



    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 2rem;
    }

    .stat-item {
        padding: 1rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .about-feature:hover {
        transform: translateX(0) translateY(-5px);
    }

    .fleet-card,
    .fleet-card:nth-child(even) {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .fleet-features {
        justify-content: center;
    }

    .contact-form-container {

        padding: 1rem;

    }
}

/* Additional mobile fixes for very small screens */
@media (max-width: 480px) {
    .booking-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .booking-container {
        padding: 1rem 0.5rem !important;
        margin: 0 !important;
    }

    #formFieldsContainer {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .input-with-icon,
    .input-with-icon input,
    .input-with-icon select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .booking-tabs {
        gap: 0.3rem !important;
        padding: 0 !important;
    }

    .booking-tab {
        font-size: 0.65rem !important;
        padding: 0.5rem 0.3rem !important;
    }
}


/* ===== Google Places Autocomplete Styling ===== */
.pac-container {
    background-color: #1a1a1a !important;
    border: 1px solid var(--accent) !important;
    border-radius: 8px !important;
    margin-top: 5px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
    font-family: 'Montserrat', sans-serif !important;
    z-index: 20000 !important;
    /* Ensure it's above everything */
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
}

/* Ensure dropdown items are readable */
.pac-item {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 15px 15px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
}

.pac-item:hover,
.pac-item-selected {
    background-color: rgba(212, 175, 55, 0.2) !important;
    color: #fff !important;
}

.pac-item-query {
    color: var(--accent) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.pac-matched {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

.pac-icon {
    display: none !important;
}

/* ===== ADD STOP BUTTON STYLING ===== */
/* ===== ADD STOP BUTTON STYLING (Icon Only) ===== */
#addStopBtn {
    background: transparent !important;
    border: none !important;
    color: var(--accent) !important;
    /* Gold color */
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    /* Circle hover effect */
}

#addStopBtn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.1);
}

#addStopBtn svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.5;
}

/* Container Adjustments */
.stop-control-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align to bottom with inputs */
    flex: 0 0 auto;
    /* Don't stretch initially, just fit icon */
    min-width: 50px;
    height: 100%;
    /* Match row height */
    padding-bottom: 5px;
    /* Fine tune vertical alignment */
}

/* Desktop: Ensure spacing */
@media (min-width: 1024px) {
    .location-row {
        align-items: flex-end;
        /* Align bottoms of all columns */
    }

    .stop-control-group {
        margin-left: 10px;
        flex: 1;
        /* Allow it to grow if needed when input appears */
    }
}

/* ===== Floating WhatsApp Button ===== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    /*  background: #25D366; */
    background: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: whatsappPulse 2s infinite;
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
    background: #20BA5A;
}

@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }

    50% {
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7);
    }
}

/* ===== Floating Phone Button ===== */
.phone-float {
    position: fixed;
    bottom: 105px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: phonePulse 2s infinite;
}

.phone-float svg {
    width: 28px;
    height: 28px;
}

.phone-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);
    background: #fff;
    color: #000;
}

@keyframes phonePulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    }

    50% {
        box-shadow: 0 4px 30px rgba(212, 175, 55, 0.7);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }

    .phone-float {
        bottom: 85px;
        right: 20px;
        width: 55px;
        height: 55px;
    }

    .phone-float svg {
        width: 26px;
        height: 26px;
    }
}

/* ===== NEW FORM LAYOUT GROUPING ===== */

/* Default (Mobile First): Stack everything */
.location-row,
.datetime-row {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.stop-control-group {
    order: 2;
    /* On mobile, stop button goes between pickup and dropoff if we used flex column, but default block is fine */
    margin: 15px 0;
    padding: 7px 0;
}

/* Desktop Layout (min-width: 1024px) */
@media (min-width: 1024px) {

    /* Override the grid for the specific form fields container if needed, 
       but we are injecting these rows INTO the grid cells or replacing them. 
       Actually, since we grouped them in HTML, #formFieldsContainer 
       might treat the whole row as one item if we aren't careful.
       
       Let's assume #formFieldsContainer is display: block; or we reset it for this content.
    */

    #formFieldsContainer {
        display: block !important;
        /* Switch off grid, let flex rows handle layout */
    }

    .location-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        /* Align inputs to bottom */
        gap: 20px;
        margin-bottom: 25px;
        width: 100%;
    }

    /* Pickup & Dropoff take available space */
    .location-input-group {
        flex: 1;
        min-width: 0;
    }

    /* Stop button container in the middle */
    .stop-control-group {
        flex: 1;
        /* Make it take equal space if needed, or adjust to fit content */
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* Align content to bottom */
        height: 100%;
        /* Ensure it fills the row height */
        min-width: 0;
        position: relative;
    }

    #addStopBtn {
        margin-bottom: 0 !important;
        height: 50px;
        width: 100%;
        /* Fill the middle gap */
        padding: 0 15px;
        white-space: nowrap;
        align-self: flex-end;
        /* Push button to bottom line */
    }

    /* When a stop input is added, style it exactly like other inputs */
    .stop-input-group {
        width: 100%;
        margin-bottom: 0 !important;
        /* Remove bottom margin to align with others */
    }

    .stop-input-group label {
        /* Ensure label alignment matches */
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #666;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .stop-input-group .input-with-icon {
        margin-bottom: 0 !important;
    }

    /* Hide the button if a stop is present? No, let's keep it. 
       But to align the input, we need to ensure the container aligns bottom. */

    #stopsContainer {
        width: 100%;
        /* If stops exist, they should push the button up or replace it? 
           Let's make sure the input sits at the bottom. */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    /* Force the new input to match height/style of others */
    .stop-input-group input {
        height: 50px !important;
        line-height: 50px !important;
    }

    /* Date/Time Row */
    .datetime-row {
        display: flex;
        flex-direction: row;
        gap: 20px;
        width: 100%;
    }

    .datetime-row>.form-group-with-icon {
        flex: 1;
    }

    /* Airport Extras Specifics */
    .airport-extras {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        /* Flight, Date, Time */
        gap: 20px;
    }
}

/* Specific Tablet Adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    #formFieldsContainer {
        display: block !important;
    }

    .location-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        /* Try to keep them in line if space permits */
        gap: 10px;
        align-items: end;
    }
}

/* ===== SLIDESHOW GALLERY ===== */
.slideshow-container {
    position: relative;
    width: 100%;
}

.mySlides {
    display: none;
    height: 100%;
    width: 100%;
}

.mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

/* Navigation Dots */
.dots-container {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 20;
}

.dot {
    cursor: pointer;
    height: 8px;
    width: 8px;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active,
.dot:hover {
    background-color: var(--accent);
    /* Gold color */
    transform: scale(1.2);
}

.fade {
    animation-name: fade;
    animation-duration: 0.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* --- Premium Services Layout (Zig-Zag) --- */
.services-zigzag {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Remove gap for seamless flow or keep localized spacing */
}

.service-row {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #080808;
    /* Dark base */
    border-bottom: 1px solid #111;
}

.service-row:nth-child(even) {
    flex-direction: row-reverse;
    background: #050505;
    /* Slightly darker */
}

.service-row-image {
    flex: 1;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.service-row-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    filter: brightness(0.8);
}

.service-row:hover .service-row-image img {
    transform: scale(1.05);
    filter: brightness(1);
}

.service-row-content {
    flex: 1;
    padding: 6rem;
    position: relative;
    z-index: 1;
}

.service-row-subtitle {
    color: var(--accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    display: block;
}

.service-row h3 {
    font-size: 2.5rem;
    color: #fff;
    font-family: var(--font-heading);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.service-row p {
    color: #bbb;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 500px;
}

.service-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    font-size: 0.9rem;
}

.service-btn:hover {
    background: var(--accent);
    color: #000;
}

@media (max-width: 968px) {

    .service-row,
    .service-row:nth-child(even) {
        flex-direction: column;
    }

    .service-row-image {
        width: 100%;
        height: 350px;
    }

    .service-row-content {
        width: 100%;
        padding: 3rem 1.5rem;
    }
}

/* --- Premium Fleet Showroom Layout --- */
.fleet-showroom {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-top: 2rem;
}

.fleet-card-premium {
    background: #0A0A0A;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    /* Slightly reduced roundedness for sharper luxury look */
    overflow: hidden;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.fleet-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border-color: var(--accent);
    /* subtle gold glow on edge */
}

/* Two-column layout inside the card */
.fleet-card-inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* Image takes slightly more space */
    min-height: 320px;
}

.fleet-media {
    position: relative;
    background: #000;
    overflow: hidden;
    display: flex;
    /* Centering the slideshow/image */
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Make slideshow take full height of the media container */
.fleet-media .slideshow-container,
.fleet-media .slideshow-container img {
    height: 100%;
    width: 100%;
    object-fit: contain !important;
}

.fleet-details {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border-left: 1px solid #1a1a1a;
}

.fleet-category-tag {
    color: var(--accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.fleet-title {
    font-size: 2rem;
    color: white;
    font-family: var(--font-heading);
    margin-bottom: 0.8rem;
    line-height: 1.1;
}

.fleet-desc {
    color: #aaa;
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Modern Specs Grid */
.fleet-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid #222;
    padding-top: 1.2rem;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #ccc;
    font-size: 0.9rem;
}

.spec-icon {
    color: var(--accent);
    font-size: 1.1rem;
}

.btn-fleet-book {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 1rem 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn-fleet-book:hover {
    background: var(--accent);
    color: #000;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .fleet-card-inner {
        grid-template-columns: 1fr;
    }

    .fleet-media {
        height: auto;
        aspect-ratio: 16/9;
        padding: 1rem;
        margin-top: 2rem;
        /* Let height adjust based on width, keeping wide format */
    }

    .fleet-media img {
        object-fit: contain !important;
    }

    .fleet-details {
        padding: 2rem;
        border-left: none;
        border-top: 1px solid #1a1a1a;
    }

    .fleet-title {
        font-size: 1.8rem;
    }
}

/* --- Premium Contact Form Styles --- */
.contact-form-premium {
    background: #0f0f0f;
    width: 100%;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    /* Sharp corners or slight round */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.contact-form-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}

.premium-group {
    margin-bottom: 2rem;
    position: relative;
}

.premium-input {

    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    padding: 1rem 1rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: 0;
    width: 100%;
}

.premium-input:focus {
    outline: none;
    border-bottom-color: var(--accent);
    padding-left: 10px;
    /* Shift text slightly on focus */
    background: linear-gradient(to right, rgba(212, 175, 55, 0.05), transparent);
}

.premium-input::placeholder {
    color: #555;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.premium-input:focus::placeholder {
    color: var(--accent);
}

.contact-form-title {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 2rem;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.contact-form-title::after {
    content: '.';
    color: var(--accent);
}

.btn-premium-send {
    background: var(--accent);
    color: #000;
    width: 100%;
    padding: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-top: 1rem;
}

.btn-premium-send:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);

}

/* --- FAQ Section Styles --- */
.faq-section {
    padding: 5rem 0;
    background: #080808;
    /* Slightly lighter than pure black */
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #222;
    margin-bottom: 1rem;
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1.5rem 0;
    text-align: left;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--accent);
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--accent);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    color: #aaa;
    padding-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    /* Arbitrary large height */
}

/* --- Legal Page Styles --- */
.legal-section {
    padding: 8rem 0 5rem 0;
    /* Extra top padding for fixed navbar */
    color: #ccc;
    line-height: 1.8;
    background: #000;
}

.legal-section .container {
    max-width: 800px;
}

.legal-section h1 {
    font-family: var(--font-heading);
    color: var(--accent);
    margin-bottom: 2rem;
    font-size: 3rem;
    text-align: center;
}

.legal-section h2 {
    font-family: var(--font-heading);
    color: #fff;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    border-bottom: 1px solid #222;
    padding-bottom: 0.5rem;
}

.legal-section h3 {
    font-family: var(--font-heading);
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.legal-section p {
    margin-bottom: 1.5rem;
}

.legal-section ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    list-style-type: disc;
}

.legal-section li {
    margin-bottom: 0.8rem;
}

.legal-section strong {
    color: #fff;
}

/* Floating Contact Buttons (Global) */
.phone-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 100px;
    right: 20px;
    background-color: #007bff;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.phone-float:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

.phone-float svg {
    width: 30px;
    height: 30px;
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #1ebc57;
    transform: scale(1.1);
}

.whatsapp-float svg {
    width: 35px;
    height: 35px;
}

/* SumUp Widget Specific Fixes */
#sumup-card {
    background-color: #ffffff !important;
    min-height: 100px;
    /* Ensure it has height */
    border: none !important;
    /* Remove any potential borders */
    box-shadow: none !important;
    /* Remove potential shadows */
}

/* Attempt to suppress empty error containers if they exist as direct children (non-iframe) */
#sumup-card div[class*="error"]:empty,
#sumup-card span[class*="error"]:empty {
    display: none !important;
    opacity: 0 !important;
}