/* =========================================
   1. GLOBAL VARIABLES & THEME TOKENS
   These colors and fonts are used throughout 
   the entire website.
   ========================================= */
:root {
    color-scheme: dark;
    /* Helps force browser-managed overlays (Google/Apple) to dark mode */
    --bg-body: #030303;
    --bg-surface: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --accent: #D4AF37;
    /* Luxury Gold */
    --accent-glow: rgba(212, 175, 55, 0.3);
    --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;
}

/* =========================================
   2. TOP BAR (The scrolling "App Coming Soon" text)
   ========================================= */
.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 */
    }
}

/* =========================================
   3. NAVIGATION BAR (The main menu and logo)
   ========================================= */
.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 */
    }
}

/* =========================================
   4. IMAGE PROTECTION & FLEET DOTS
   (Prevents right-clicking and manages dots)
   ========================================= */
.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);
}

/* =========================================
   5. BASE ELEMENT RESET (Margin & Padding)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

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;
    overflow-y: auto;
    width: 100%;
    max-width: 100vw;
}

/* =========================================
   6. TYPOGRAPHY (Headings: H1, H2, H3, H4)
   ========================================= */
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.1;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }
    h2 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    h3 {
        font-size: 1.4rem;
    }
    .hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
        line-height: 1.5;
    }
}

h1 span {
    display: block;
}

/* Desktop Hero Typography */
@media (min-width: 769px) {
    .hero-subtitle {
        font-family: var(--font-body);
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 5px;
        color: #ffffff;
        margin-bottom: 1rem;
        font-weight: 400;
    }

    .hero-main {
        font-family: var(--font-heading);
        font-size: 5.5rem;
        font-style: italic;
        color: var(--accent);
        line-height: 1.1;
        font-weight: 600;
        text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
}

/* Mobile Hero Typography and Sizing (Global) */
@media (max-width: 768px) {
    .hero {
        padding-top: 160px !important; /* Standard space to clear navbar + logo */
        padding-bottom: 60px !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 80vh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
        margin-top: 0 !important;
    }

    .hero-subtitle {
        font-family: var(--font-body);
        font-size: 0.85rem !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 0.5rem !important;
        font-weight: 400;
        display: block !important;
    }

    .hero-main {
        font-family: var(--font-heading);
        font-size: 2.2rem !important;
        font-style: italic;
        color: var(--accent) !important;
        line-height: 1.1;
        font-weight: 600;
        display: block !important;
    }

    .hero-description {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 2rem !important;
        padding: 0 20px;
        color: #eee !important;
        opacity: 0.9;
    }

    .logo3 img {
        height: 100px !important;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 280px;
        padding: 0 10px;
    }

    .hero-buttons .btn {
        width: 100%;
        margin: 0 !important;
    }
}

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);
}

/* =========================================
   7. HERO SECTION (Main banner area)
   ========================================= */
.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;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 0;
}

@media (max-width: 768px) {
    .hero::before {
        background: transparent;
    }
}

.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;
}

/* =========================================
   8. BUTTON STYLES (Primary & Secondary)
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 2.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary {
    background: var(--accent);
    color: #000;
    border: 1px solid var(--accent);
}

.btn-primary:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .btn {
        padding: 1rem 2rem;
        font-size: 0.8rem;
        width: 100%;
    }
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        gap: 1rem;
    }
}

/* App Download Buttons (Coming Soon) */
.app-download-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    justify-content: center;
}

.app-store-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.9); /* Even darker for premium feel */
    color: #ffffff;
    padding: 12px 30px; /* Increased padding */
    border-radius: 14px;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    width: auto;
    min-width: 190px; /* Ensure buttons have a consistent, professional width */
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.app-store-btn:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

.app-btn-icon {
    margin-right: 14px;
    flex-shrink: 0;
}

.app-btn-text {
    text-align: left;
}

.app-btn-small {
    display: block;
    font-size: 10px;
    line-height: 1;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 300;
    opacity: 0.8;
}

.app-btn-large {
    display: block;
    font-size: 22px; /* Slightly larger text */
    font-weight: 600;
    line-height: 1;
    font-family: var(--font-body);
}

@media (max-width: 768px) {
    .app-download-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 30px auto 0;
        gap: 1rem;
    }
    
    .app-store-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   9. BOOKING SYSTEM (The main booking form)
   ========================================= */
/* Container for the whole booking section */
.booking-section {
    position: relative;
    margin-top: 0;
    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;
}

/* --- INPUT FIELD STYLING (The Text Boxes) --- */
.input-with-icon input,
.input-with-icon select,
input[name="pickupAddress"],
input[name="dropoffAddress"],
.pac-target-input {
    width: 100% !important;
    display: block !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    padding: 0 15px !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    height: 50px !important;
    line-height: normal !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-text-fill-color: #ffffff !important;
    margin: 0 !important;
}

.place-widget-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    margin-bottom: 0;
    border: 1px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: visible; /* Allow suggestions dropdown to be seen on desktop */
    transition: border-color 0.3s ease;
    background-color: rgba(0, 0, 0, 0.6);
}

.place-widget-wrapper:focus-within {
    border-color: var(--accent);
}

gmp-place-autocomplete {
    width: 100% !important;
    display: block !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 1000 !important;

    /* Google Maps theming variables */
    --gmpx-color-primary: #000000;
    --gmpx-focus-ring-color: transparent;
    --gmpx-focus-ring-width: 0px;
    --gmpx-color-on-surface-variant: #aaaaaa;
    --gmpx-color-surface: transparent;
    --gmpx-color-on-surface: #ffffff;
    --gmpx-font-family-base: 'Montserrat', sans-serif;
    --gmpx-font-size-base: 1rem;
}

gmp-place-autocomplete:focus,
gmp-place-autocomplete:focus-within,
gmp-place-autocomplete:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Universal Focus Killer for Mobile */
input:focus, 
select:focus, 
textarea:focus, 
button:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 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;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !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;
}

/* =========================================
   10. GENERAL SECTION SPACING
   (Controls the white space between sections)
   ========================================= */
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;
}

/* =========================================
   11. SERVICES SECTION (Hover cards with images)
   ========================================= */
.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;
}

/* =========================================
   12. FLEET SHOWCASE (Car photos and features)
   ========================================= */
.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;
}

/* =========================================
   13. TESTIMONIALS & CONTACT SECTION
   ========================================= */
.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;
}

/* =========================================
   14. FOOTER (Bottom of the page links)
   ========================================= */
.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;


}

/* =========================================
   15. ABOUT SECTION (The "Premium" brand story)
   ========================================= */
.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: 10px;
    overflow: hidden;
    min-height: 300px; /* Reserve height for the car image */
    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;
    }
}


/* =========================================
   16. MOBILE RESPONSIVE FIXES (Screens < 1024px)
   These rules override the styles above to make 
   sure everything looks good on phones.
   ========================================= */
@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;
    }

    .logo3 img {
        height: 60px !important;
        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,
    .pac-target-input,
    gmp-place-autocomplete {
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 1rem !important;
        height: 50px !important;
        line-height: normal !important;
        padding: 0 15px !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        outline: none !important;
        box-shadow: none !important;
    }



    .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;
    }
}





/* Placeholder cross-browser */
::placeholder {
    color: #888 !important;
    opacity: 1 !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 */
    }
}

/* =========================================
   17. FLOATING ACTION BUTTONS
   (WhatsApp & Phone buttons at the bottom right)
   ========================================= */
.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 !important;
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
    }

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

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

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

    .logo img, .logo3 img {
        height: 80px !important;
    }

    .booking-container {
        padding: 1.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .location-row, .datetime-row {
        gap: 15px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .location-input-group, .form-group-with-icon {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero {
        height: auto !important;
        min-height: 80vh !important;
        padding-top: 160px !important;
        padding-bottom: 60px !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-content {
        padding: 0 10px !important;
    }
}

/* =========================================
   18. NEW FORM LAYOUT (Mobile vs Desktop)
   ========================================= */
/* Default (Mobile First): Stack everything */
#formFieldsContainer {
    display: block !important;
}

.location-row,
.datetime-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    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.
    */

    .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: 0 0 150px;
        /* Fixed width for the plus button on desktop */
        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 !important;
        /* Flight, Date, Time */
        gap: 20px !important;
    }
}

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

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

/* =========================================
   19. SLIDESHOW GALLERY & DOTS
   (The car photos that slide)
   ========================================= */
.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
    }
}

/* =========================================
   20. PREMIUM SERVICES (Zig-Zag Layout)
   ========================================= */
.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 !important;
    }

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

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

/* =========================================
   21. PREMIUM FLEET SHOWROOM
   ========================================= */
.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 !important;
    }

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

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

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

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

/* =========================================
   22. PREMIUM CONTACT FORM
   ========================================= */
.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);

}

/* =========================================
   23. FAQ SECTION (Accordion questions)
   ========================================= */
.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;
}

/* SumUp Widget Specific Fixes - Native Integrated Feel */
#sumup-card-container iframe {
    border: none !important;
    background: transparent !important;
}

#sumup-card-container {
    background-color: #111 !important;
    min-height: 120px;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px 0;
}

/* Google Places Legacy (Dropdown) Fixes */
.pac-container {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    z-index: 10000 !important;
    font-family: inherit !important;
}

.pac-item {
    color: #fff !important;
    border-top: 1px solid #222 !important;
    background-color: #1a1a1a !important;
    padding: 10px !important;
}

.pac-item-query {
    color: #fff !important;
}

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

/* Google Places Modern Widget (Shadow DOM) Fixes - NUCLEAR VERSION */
gmp-place-autocomplete {
    background-color: #000000 !important;
    color: #ffffff !important;
    color-scheme: dark !important; /* Tells the browser to use dark system colors */
}

gmp-place-autocomplete::part(input) {
    color: #ffffff !important;
    background-color: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* THE OVERLAY IS THE MAIN SCREEN THE USER SEES ON MOBILE */
gmp-place-autocomplete::part(overlay),
gmp-place-autocomplete::part(overlay-container) {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    padding-top: 50px !important;
}

gmp-place-autocomplete::part(header) {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #D4AF37 !important;
}

/* THE LIST AND ITEMS WHERE THE WORDS GO */
gmp-place-autocomplete::part(list),
gmp-place-autocomplete::part(results-container) {
    background: #000000 !important;
    background-color: #000000 !important;
}

gmp-place-autocomplete::part(suggestion-item),
gmp-place-autocomplete::part(prediction),
gmp-place-autocomplete::part(result-item),
gmp-place-autocomplete::part(address-item),
gmp-place-autocomplete::part(result-item-wrapper) {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #222 !important;
    display: flex !important;
}

/* THE ACTUAL TEXT COLORS (Primary and Secondary) */
gmp-place-autocomplete::part(primary-text),
gmp-place-autocomplete::part(primary-prediction),
gmp-place-autocomplete::part(prediction-text) {
    color: #ffffff !important;
    font-weight: 600 !important;
    display: block !important;
}

gmp-place-autocomplete::part(secondary-text),
gmp-place-autocomplete::part(secondary-prediction) {
    color: #bbbbbb !important;
    display: block !important;
}

gmp-place-autocomplete::part(attribution) {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #888 !important;
    padding: 10px !important;
}

/* Fix for icons and back button inside the Google search screen */
gmp-place-autocomplete::part(back-button),
gmp-place-autocomplete::part(clear-button),
gmp-place-autocomplete::part(search-icon) {
    display: none !important; /* HIDE INTERNAL ICONS */
}

/* Force dark mode via variables if Google uses them */
gmp-place-autocomplete {
    --gmp-place-autocomplete-overlay-background-color: #000000;
    --gmp-place-autocomplete-header-background-color: #000000;
    --gmp-place-autocomplete-list-background-color: #000000;
    --gmp-place-autocomplete-primary-text-color: #ffffff;
    --gmp-place-autocomplete-secondary-text-color: #bbbbbb;
    --gmpx-color-surface: #000000;
    --gmpx-color-on-surface: #ffffff;
    --gmpx-color-primary: #ffffff;
}

/* Fallback for classic autocomplete if used */
.pac-container {
    background-color: #000000 !important;
    color: #ffffff !important;
    z-index: 10000 !important;
    border: 1px solid #333 !important;
}
.pac-item {
    color: #ffffff !important;
    background-color: #000000 !important;
    padding: 10px !important;
}
.pac-item-query {
    color: #ffffff !important;
}
.pac-secondary-text {
    color: #bbbbbb !important;
}

/* Extra safety for the internal search input */
gmp-place-autocomplete [slot="input"],
gmp-place-autocomplete input {
    color: #ffffff !important;
    background-color: #000000 !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Placeholder cross-browser */
::placeholder {
    color: #888 !important;
    opacity: 1 !important;
}

/* FINAL MOBILE FIX FOR BOOKING FORM ALIGNMENT */
@media (max-width: 768px) {
    .booking-container {
        padding: 1.25rem !important;
        margin: 20px 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #formFieldsContainer {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .location-row, .datetime-row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .form-group-with-icon, .location-input-group {
        width: 100% !important;
        margin: 0 0 1rem 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    .input-with-icon {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .input-with-icon input {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .stop-control-group, #stopsContainer {
        margin: 0 !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }
}

/* ===== FLATPICKR DARK THEME OVERRIDES ===== */
/* Calendar container */
.flatpickr-calendar {
    background: #111 !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    color: #fff !important;
}
/* Month header */
.flatpickr-months {
    background: #1a1a1a !important;
    border-radius: 8px 8px 0 0 !important;
}
.flatpickr-month, .flatpickr-current-month, .flatpickr-monthDropdown-months {
    color: #D4AF37 !important;
    fill: #D4AF37 !important;
    background: transparent !important;
}
.flatpickr-monthDropdown-months option {
    background: #111 !important;
}
.flatpickr-prev-month, .flatpickr-next-month {
    color: #D4AF37 !important;
    fill: #D4AF37 !important;
}
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg {
    fill: #fff !important;
}
/* Weekday names */
.flatpickr-weekday {
    color: #D4AF37 !important;
    background: transparent !important;
    font-weight: 600 !important;
}
/* Day cells */
.flatpickr-day {
    color: #ccc !important;
    border-radius: 4px !important;
}
.flatpickr-day:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: #D4AF37 !important;
    color: #fff !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #000 !important;
    font-weight: 700 !important;
}
.flatpickr-day.today {
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: #D4AF37 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #444 !important;
}
/* Input field cursor */
#bookingDateInput {
    cursor: pointer !important;
}