:root {
    --primary-pink: #FF69B4;
    --primary-turquoise: #00CED1;
    --primary-blue: #007ACC;
    --secondary-gray: #f8f9fa;
    --success-green: #28a745;
}

/* Global Styles */
html, body {
    /* Prevent any wide form/strip section from creating horizontal scroll
       which would push the hero image's right edge (and the mascot's
       pointing finger) off-screen on mobile. */
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: var(--secondary-gray);
}

.text-pink {
    color: var(--primary-pink);
}

/* Custom Button Styles */
.btn-pink {
    background: linear-gradient(135deg, #FF69B4, #FF1493);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
    transition: all 0.3s ease;
}

.btn-pink:hover {
    background: linear-gradient(135deg, #FF1493, #FF69B4);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.6);
}

.btn-turquoise {
    background: linear-gradient(135deg, #00CED1, #20B2AA);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 206, 209, 0.4);
    transition: all 0.3s ease;
}

.btn-turquoise:hover {
    background: linear-gradient(135deg, #20B2AA, #00CED1);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 209, 0.6);
}

/* Hero CTA Buttons (stacked under headline in .hero-top-text) */
.hero-top-text .hero-cta-buttons {
    margin-top: 1rem;
}

.hero-cta-buttons {
    margin-top: 2rem;
}

.hero-cta-buttons .btn {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    padding: 15px 30px;
    transition: all 0.3s ease;
}

/* Large screens - bigger button */
@media (min-width: 1201px) {
    .hero-cta-buttons .btn {
        font-size: 1.3rem;
        padding: 18px 40px;
    }
}

/* Small screens - center button */
@media (max-width: 768px) {
    .hero-cta-buttons {
        text-align: center;
    }
    
    .hero-cta-buttons .btn {
        font-size: 1rem;
        padding: 12px 25px;
    }
}

/* CTA Section */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.cta-buttons .btn {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    padding: 15px 30px;
    transition: all 0.3s ease;
    font-weight: 700;
}

.cta-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Final CTA Buttons */
.final-cta-buttons .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.final-cta-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.final-cta-buttons .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.final-cta-buttons .btn:hover::after {
    left: 100%;
}

/* ==========================================================================
   Hero Section
   --------------------------------------------------------------------------
   Approx fingertip location in hero2.jpg: ~62% from left, ~28% from top.

   Strategy: give the hero enough vertical room (taller than the image's
   natural aspect would dictate) so we can use object-fit: cover to crop
   horizontally. With object-position: 50% 50% the visible window centres on
   the mascot — face on the left, fingertip on the upper-right. The text
   panel is anchored top-right with bottom-edge sitting just above the
   fingertip on every breakpoint.

   Vertical budget for text panel above fingertip ≈ 28% of hero height.
   At 540px hero height that is ~150px — enough for headline + subline + CTA.
   ========================================================================== */
.hero-section {
    position: relative;
    width: 100vw;
    max-width: 100%;
    min-height: clamp(440px, 62vh, 720px);
    overflow: hidden;
    background-color: #f1cfd9;
    z-index: 1;
}

.hero-section .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 0;
    pointer-events: none;
}

/* Soft dark scrim in the upper-right (text panel zone) so the white
   headline stays legible against the bright pink wall behind. */
.hero-section .hero-text-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 78% 16%,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.22) 50%,
            rgba(0, 0, 0, 0) 80%);
}

/* Text panel: headline + subline + CTA. Anchored top-right, bottom edge
   sits just above the fingertip (~28% from top of hero). */
.hero-top-text {
    position: absolute;
    top: 4%;
    right: 4%;
    bottom: auto;
    z-index: 5;
    width: 44%;
    max-width: 460px;
    text-align: center;
    pointer-events: auto;
}

.hero-top-text h1 {
    font-size: clamp(1rem, 2.2vw, 2.2rem);
    line-height: 1.15;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.55);
    margin: 0 0 0.4rem;
    text-wrap: balance;
}

.hero-top-text p {
    text-wrap: balance;
}

.hero-top-text p {
    font-size: clamp(0.78rem, 1.15vw, 1.15rem);
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.55);
    margin: 0 0 0.6rem;
    font-weight: 500;
}

/* Hero CTA button - fully self-contained sizing to avoid Bootstrap utility
   class conflicts (no .btn-lg / .px-5 / .py-3 used). */
.hero-top-text .hero-cta-buttons {
    margin-top: 0.4rem;
}

.hero-top-text .hero-cta-btn {
    display: inline-block;
    font-size: clamp(0.78rem, 1vw, 1.05rem);
    padding: clamp(7px, 0.8vw, 14px) clamp(14px, 1.6vw, 28px);
    border-radius: 999px;
    white-space: nowrap;
    margin: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    text-transform: none;
    letter-spacing: 0.2px;
}

/* ----- Mobile (<=576px) ----------------------------------------------------
   Hero is portrait-leaning (~440-480px tall, narrow viewport). Text panel
   widens slightly so the headline doesn't wrap into 4-5 short lines. */
@media (max-width: 576px) {
    .hero-section { min-height: 460px; }

    .hero-section .hero-bg {
        /* Shift image slightly so the mascot's face stays centred-left and
           the finger lands in the upper-right "above text" zone. */
        object-position: 55% 50%;
    }

    .hero-section .hero-text-scrim {
        background:
            radial-gradient(ellipse 80% 40% at 65% 18%,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.28) 50%,
                rgba(0, 0, 0, 0) 80%);
    }

    .hero-top-text {
        top: 4%;
        right: 4%;
        width: 56%;
        max-width: none;
    }

    .hero-top-text h1 { font-size: clamp(0.95rem, 4.2vw, 1.35rem); }
    .hero-top-text p  { font-size: clamp(0.72rem, 2.8vw, 0.95rem); }

    .hero-top-text .hero-cta-btn {
        font-size: clamp(0.72rem, 2.8vw, 0.92rem);
        padding: 6px 14px;
    }
}

/* ----- Mid mobile / phablet (577 - 768) ----------------------------------- */
@media (min-width: 577px) and (max-width: 768px) {
    .hero-section { min-height: 500px; }

    .hero-section .hero-bg { object-position: 52% 50%; }

    .hero-top-text {
        top: 5%;
        right: 4%;
        width: 46%;
    }
    .hero-top-text h1 { font-size: clamp(1.1rem, 3vw, 1.6rem); }
    .hero-top-text p  { font-size: clamp(0.8rem, 2vw, 1rem); }
}

/* ----- Tablet / small laptop (769 - 1200) ---------------------------------
   At this width the finger naturally lands at the same vertical level as the
   text panel. Make the hero taller and anchor the panel high so the panel
   bottom (CTA button) clears the fingertip with comfortable headroom. */
@media (min-width: 769px) and (max-width: 1200px) {
    .hero-section { min-height: 620px; }

    /* Shift image left slightly so the finger appears further left in the
       viewport, leaving the right-hand text panel zone uncluttered. */
    .hero-section .hero-bg { object-position: 42% 55%; }

    .hero-top-text {
        top: 5%;
        right: 4%;
        width: 44%;
        max-width: 480px;
    }

    .hero-top-text h1 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
    .hero-top-text p  { font-size: clamp(0.9rem, 1.4vw, 1.1rem); }
}

/* ----- Desktop (>=1201) --------------------------------------------------- */
@media (min-width: 1201px) {
    .hero-section { min-height: 640px; max-height: 760px; }

    .hero-section .hero-bg { object-position: 50% 50%; }

    .hero-top-text {
        top: 7%;
        right: 6%;
        width: 36%;
        max-width: 460px;
    }
}

/* ----- Ultra-wide (>=1600) ------------------------------------------------ */
@media (min-width: 1600px) {
    .hero-section { min-height: 700px; }

    .hero-top-text {
        right: 8%;
        width: 30%;
        max-width: 500px;
    }
}
/* 
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
} */

.hero-section .gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(248, 249, 250, 0.2) 30%,
        rgba(248, 249, 250, 0.6) 60%,
        rgba(248, 249, 250, 0.9) 80%,
        rgba(248, 249, 250, 1) 100%
    );
    z-index: 3;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section h1,
.hero-section .lead {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Button Styles */
.btn-primary {
    background-color: var(--primary-turquoise);
    border-color: var(--primary-turquoise);
    font-weight: bold;
    border-radius: 25px;
    padding: 12px 30px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-pink);
    border-color: var(--primary-pink);
    transform: translateY(-2px);
}

.btn-success {
    background-color: var(--success-green);
    border-color: var(--success-green);
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
}

#addReturn {
    background-color: white !important;
    border-color: #6c757d !important;
    color: #6c757d !important;
}

#addReturn:hover {
    background-color: #f8f9fa !important;
    border-color: #5a6268 !important;
    color: #5a6268 !important;
}

/* Form Styles */
.quote-form-section {
    background-color: #f8f9fa !important;
    padding: 20px 0;
}

.quote-form-section.bg-primary {
    background-color: #f8f9fa !important;
}

.form-container {
    background: #00CED1 !important;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 40px;
    margin: 0 auto;
    min-height: 300px;
}

.form-container.bg-white {
    background: #00CED1 !important;
}

.form-container {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.journey-type-buttons .btn {
    background-color: white;
    border: 2px solid #2c3e50;
    color: #2c3e50;
    border-radius: 0;
    padding: 12px 20px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.journey-type-buttons .btn:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.journey-type-buttons .btn:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.btn-check:checked + .btn {
    background-color: #2c3e50;
    border-color: #2c3e50;
    color: white;
}

.journey-type-buttons .btn:hover:not(.btn-check:checked + .btn) {
    background-color: #f8f9fa;
}

.form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    padding: 12px 15px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 0.2rem rgba(0, 206, 209, 0.25);
}

/* Passenger Counter - Removed, now using simple number input */

/* Services Section */
.services-section {
    background-color: #f8f9fa;
}

.service-card {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

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

.service-card img {
    border-radius: 10px;
    margin-bottom: 15px;
}

.service-card h3 {
    color: var(--primary-pink);
    font-weight: bold;
    margin-bottom: 10px;
}

/* (Legacy hero responsive overrides removed - hero now uses <img class="hero-bg">
   with object-fit:cover and per-breakpoint object-position; see Hero Section
   block above.) */

/* Hide call-to-action button on desktop */
@media (min-width: 1201px) {
    .hero-cta-mobile {
        display: none;
    }
}

/* Hide strip form on medium and below, show original form */
@media (max-width: 1200px) {
    .strip-form-section {
        display: none !important;
    }
    
    .quote-form-section {
        display: block !important;
    }
}

/* Show strip form only on desktop */
@media (min-width: 1201px) {
    .strip-form-section {
        display: block !important;
        margin-top: -10px;
    }
    
    .quote-form-section {
        display: none !important;
    }
} 

/* Logo Styles */
.logo {
    max-width: 150px;
    height: auto;
    object-fit: contain;
    margin: 0;
    padding: 0;
}

.logo-footer {
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

/* How It Works Section */
.how-it-works-section {
    background-color: #f8f9fa;
    padding: 10px 0 40px 0 !important;
}

.step-by-step-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px !important;
}

.step-card {
    text-align: center;
    padding: 20px 15px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s ease;
}

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

.step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-turquoise));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto 15px;
}

.step-card h4 {
    color: var(--primary-pink);
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}

.step-card p {
    color: #666;
    margin: 0;
    font-size: 14px;
}

/* Service Card Updates */
.service-card .price {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-turquoise);
    margin: 10px 0;
}

/* Modern Service Rows */
.service-row {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 40px;
}

.service-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.service-graphic {
    height: 300px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.service-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.service-content h3 {
    font-weight: bold;
    font-size: 28px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FF69B4;
}

.service-content p {
    color: #666;
    line-height: 1.6;
    margin: 0;
    font-size: 16px;
}

/* Responsive styling for service rows */
@media (max-width: 992px) {
    .service-row {
        padding: 30px 20px;
    }
    
    .service-graphic {
        height: 250px;
        margin-bottom: 30px;
    }
    
    .service-content {
        text-align: center;
        padding: 10px;
    }
    
    .service-content h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .service-row {
        padding: 20px 15px;
    }
    
    .service-graphic {
        height: 200px;
        margin-bottom: 20px;
    }
    
    .service-content h3 {
        font-size: 20px;
    }
    
    .service-content p {
        font-size: 14px;
    }
}

/* Navigation Updates */
.navbar {
    padding: 3px 0;
    margin-bottom: -20px;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--primary-blue) !important;
    margin: 0 15px;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-pink) !important;
}

/* Footer Styles */
footer {
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
}

footer h5 {
    color: var(--primary-turquoise);
    margin-bottom: 15px;
}

/* Full Width Strip Form Section */
.strip-form-section {
    background: transparent;
    width: 100%;
    padding: 20px 0;
    position: relative;
    top: -70px;
    z-index: 3;
    margin-bottom: -70px;
}

.strip-form-container {
    background: #00CED1;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 20px;
    margin: 0 auto;
    max-width: 1400px;
}



@media (max-width: 1200px) {
    .strip-form-section {
        padding: 15px;
    }
    
    .strip-form-container {
        padding: 20px;
        margin: 0 15px;
    }
    
    .form-container {
        padding: 25px 20px;
        margin: 0 15px;
        position: relative;
        top: -80px;
        margin-bottom: -80px;
    }
}

.strip-form-label {
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.strip-form {
    width: 100%;
}

.strip-form-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0px;
    flex-wrap: wrap;
}

.strip-input {
    padding: 12px 2px;
}
.strip-continue-btn .arrow {
    font-size: 12px !important;
}

@media (min-width: 1300px) {
    .strip-form-row {
        gap: 15px;
    }
    .strip-input {
        padding: 12px 15px;
    }

    .strip-continue-btn .arrow {
        font-size: 16px;
    }
}

/* Medium screen view - two columns with left labels */
@media (max-width: 1200px) and (min-width: 769px) {
    .strip-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 25px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 20px;
        align-items: start;
    }
    
    .journey-toggle {
        grid-column: 1 / -1;
        justify-self: center;
        margin-bottom: 20px;
        order: -1;
    }
    
    .input-group-strip {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        width: 100%;
    }
    
    .input-label {
        order: -1;
        font-size: 14px;
        font-weight: 600;
        color: white;
        margin: 0;
        text-align: left;
        min-width: 80px;
        flex-shrink: 0;
    }
    
    .strip-input {
        flex: 1;
        font-size: 14px;
        padding: 12px 15px;
        border-radius: 8px;
        margin: 0;
    }
    
    .strip-continue-btn,
    .strip-submit-btn,
    .strip-back-btn {
        grid-column: 1 / -1;
        justify-self: center;
        width: auto;
        min-width: 200px;
    }
    
    .strip-form-buttons {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        gap: 15px;
        justify-content: center;
        margin-top: 10px;
    }
    
    .return-field {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 15px;
    }
    
    .input-label.float-right {
        grid-column: 1 / -1;
        text-align: center;
        margin: 20px 0 15px 0;
        font-size: 18px;
        order: initial;
    }
    
    .strip-form-header {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 25px 20px;
        margin-bottom: 20px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .personal-details-row {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 25px 20px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* Mobile view - single column with labels above */
@media (max-width: 768px) {
    .strip-form-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 20px;
    }
    
    .journey-toggle {
        order: -1;
        margin-bottom: 20px;
        width: 100%;
        justify-content: center;
    }
    
    .input-group-strip {
        width: 100%;
        max-width: 400px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    
    .strip-input {
        width: 100%;
        font-size: 16px;
        padding: 14px 16px;
        border-radius: 10px;
        margin-top: 8px;
    }
    
    .input-label {
        order: -1;
        font-size: 14px;
        font-weight: 600;
        color: white;
        margin-bottom: 5px;
        margin-top: 0;
        text-align: left;
        display: block;
        width: 100%;
    }
    
    .strip-continue-btn,
    .strip-submit-btn,
    .strip-back-btn {
        width: 100%;
        max-width: 300px;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    .strip-form-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }
    
    .return-field {
        width: 100%;
        margin-top: 15px;
    }
    
    .input-label.float-right {
        text-align: center;
        margin: 20px 0 15px 0;
        font-size: 18px;
        order: initial;
    }
    
    /* Hide RETURN JOURNEY label on mobile screens */
    .input-label.float-right {
        display: none;
    }
    
    /* Hide RETURN JOURNEY label on medium screens */
    .input-label.float-right {
        display: none;
    }
    
    .strip-form-header {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 25px 20px;
        margin-bottom: 20px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .personal-details-row {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 25px 20px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 20px;
    }
}

.input-group-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: white;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.9;
}

.input-icon {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.8);
    filter: brightness(0) invert(1) opacity(0.8);
    transition: all 0.3s ease;
}

.input-label.float-right {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    text-align: center;
    margin-right: 0;
    margin-left: auto;
    line-height: 1.2;
}

.date-time-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.date-time-row .input-group-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.date-time-row .input-label {
    margin-left: 5px;
}



.outbound-fields-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.return-fields-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.journey-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.journey-btn {
    background: white;
    border: none;
    color: #2c3e50;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.journey-btn.active {
    background: #2c3e50;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.journey-btn:hover:not(.active) {
    background: #f8f9fa;
}

.strip-input {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #2c3e50;
    transition: all 0.3s ease;
    min-width: 150px;
    flex: 1;
    max-width: 200px;
}

.strip-input::placeholder {
    color: #7f8c8d;
    font-weight: 400;
}

.strip-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    transform: translateY(-1px);
}

.passengers-input {
    max-width: 100px;
    text-align: center;
}

.strip-submit-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
    white-space: nowrap;
}

.strip-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    background: linear-gradient(135deg, #c0392b, #a93226);
}

.strip-submit-btn .arrow {
    transition: transform 0.3s ease;
    font-size: 16px;
}

.strip-submit-btn:hover .arrow {
    transform: translateX(3px);
}

/* New strip form styles for two-step process */
.strip-continue-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    white-space: nowrap;
}

.strip-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    background: linear-gradient(135deg, #2980b9, #21618c);
}

.strip-continue-btn .arrow {
    transition: transform 0.3s ease;
    font-size: 16px;
}

.strip-continue-btn:hover .arrow {
    transform: translateX(3px);
}

.strip-back-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.strip-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.strip-form-step {
    width: 100%;
}

.strip-form-header {
    text-align: center;
    /* margin-bottom: 30px; */
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.strip-form-header h3 {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.strip-form-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 0;
}

.personal-details-row {
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.occasion-group {
    position: relative;
}

.strip-select {
    background: white;
    color: #333;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.custom-occasion-input {
    margin-top: 10px;
    animation: slideDown 0.3s ease;
}

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

.strip-form-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.submit-icon {
    font-size: 18px;
}

.return-field {
    animation: slideInRight 0.3s ease-out;
}

.return-field.show {
    display: block !important;
}

.return-field.hide {
    display: none !important;
}

/* Mobile return field styling */
@media (max-width: 1024px) {
    .return-field.show {
        display: block !important;
        animation: slideInDown 0.3s ease-out;
    }
}

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

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

/* Responsive Design for Strip Form */
@media (max-width: 1200px) {
    .strip-form-row {
        gap: 12px;
    }
    
    .strip-input {
        min-width: 130px;
        max-width: 180px;
    }
}

@media (max-width: 992px) {
    .strip-form-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    
    .journey-toggle {
        order: 1;
        flex-basis: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .strip-input {
        flex: 1;
        min-width: 140px;
        max-width: none;
    }
    
    .strip-submit-btn {
        order: 10;
        flex-basis: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .strip-form-section {
        padding: 20px 15px;
    }
    
    .strip-form-container {
        padding: 20px;
        margin: 0 15px;
    }
    
    .strip-form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .journey-toggle {
        order: 1;
        margin-bottom: 5px;
    }
    
    .strip-input {
        width: 100%;
        max-width: none;
        min-width: auto;
    }
    
    .strip-submit-btn {
        width: 100%;
        order: 10;
        margin-top: 5px;
    }
}

/* Form Improvements */
.form-container {
    position: relative;
    z-index: 10;
}

.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Add margin-top to form labels on small screens */
@media (max-width: 768px) {
    .form-label {
        margin-top: 12px;
    }
}

.form-icon {
    width: 16px;
    height: 16px;
    color: #2c3e50;
    filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1000%) hue-rotate(200deg) brightness(0.3) contrast(1);
    transition: all 0.3s ease;
}

/* Alert Styles */
.alert {
    margin: 0;
    border-radius: 0;
}

/* Trendy Success Alert */
.trendy-success-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    animation: slideInRight 0.5s ease-out;
}

.success-content {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.success-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: shimmer 2s infinite;
}

.success-icon {
    font-size: 2rem;
    flex-shrink: 0;
    animation: bounce 1s infinite;
}

.success-text h4 {
    margin: 0 0 8px 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.success-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

/* Formal Success Message on Main Page */
.formal-success-message {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 2px solid #28a745;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.15);
    animation: slideInUp 0.6s ease-out both;
    position: relative;
    overflow: hidden;
}

.formal-success-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #28a745, #20c997);
}

.success-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.success-checkmark {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    animation: pulse 2s infinite;
}

.success-header h2 {
    color: #28a745;
    font-weight: 700;
    margin: 0;
    font-size: 1.8rem;
}

.success-body p {
    color: #495057;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.formal-reference {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border: 2px solid #28a745;
    border-radius: 12px;
    padding: 20px;
    margin: 25px 0;
    text-align: center;
    position: relative;
}

.formal-reference strong {
    display: block;
    color: #28a745;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    font-weight: 600;
}

.formal-reference-number {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #28a745;
    background: white;
    padding: 12px 20px;
    border-radius: 8px;
    border: 2px solid #28a745;
    margin: 10px 0;
    letter-spacing: 1.5px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.reference-note {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 10px 0 0 0;
    font-style: italic;
}

.next-steps {
    background: rgba(40, 167, 69, 0.05);
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid #28a745;
}

.next-steps h4 {
    color: #28a745;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.next-steps ul {
    margin: 0;
    padding-left: 20px;
}

.next-steps li {
    color: #495057;
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.5;
}

.next-steps li:last-child {
    margin-bottom: 0;
}

/* Quote Reference Box on Main Page */
.quote-reference-box {
    animation: slideInUp 0.6s ease-out 0.3s both;
    margin-bottom: 30px;
}

.reference-content {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.reference-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: shimmer 3s infinite;
    border-radius: 16px;
}

.reference-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

.reference-text strong {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.9;
    margin-bottom: 4px;
    font-weight: 600;
}

.reference-number {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1.5px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.success-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.success-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Trendy Error Alert */
.trendy-error-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    animation: slideInRight 0.5s ease-out;
}

.error-content {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(244, 67, 54, 0.3);
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
}

.error-icon {
    font-size: 2rem;
    flex-shrink: 0;
    animation: shake 0.5s ease-in-out;
}

.error-text h4 {
    margin: 0 0 8px 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.error-text ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.95rem;
}

.error-text li {
    margin-bottom: 4px;
}

.error-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.error-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Responsive Improvements */
@media (max-width: 768px) {
    .logo {
        max-width: 150px;
    }
    
    .step-by-step-image {
        margin-bottom: 15px !important;
    }
    
    .step-card {
        margin-bottom: 20px;
        padding: 15px 10px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .step-card h4 {
        font-size: 14px;
    }
    
    .step-card p {
        font-size: 12px;
    }
    
    .how-it-works-section {
        padding: 30px 0 !important;
    }
}

/* Admin: Task status dropdown (Quote Requests) — readable on striped tables */
.admin-container .task-status-select {
    min-width: 12rem;
    max-width: 100%;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: #212529 !important;
    -webkit-text-fill-color: #212529;
}
.admin-container .task-status-select.task-pending {
    background-color: #fff3cd;
    border: 2px solid #ffc107;
}
.admin-container .task-status-select.task-done {
    background-color: #d1e7dd;
    border: 2px solid #198754;
}
.admin-container .task-status-select option {
    font-weight: 600;
    color: #212529;
    background-color: #fff;
}