/* ===== FLEET DETAIL PAGE - SHARED STYLES =====
   Used by: 40-seater.aspx, 48-seater.aspx, 32-seater.aspx, 26-seater.aspx,
            18-seater.aspx, 12-seater-van.aspx, 7-seater.aspx, 4-seater.aspx
   Note: Each page still sets its own banner background image inline via
   the "background-image-page" class below (see instructions).
*/

.fleet-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 60px 0px;
}

/* Intentionally NOT centering — banner now holds a two-column layout
   (heading/breadcrumb on the left, enquiry form on the right) */
/* .fleet-banner .container { position: relative; z-index: 2; text-align: center; } */

.fleet-banner .banner-tag {
    display: inline-block; background: #FD5B38; color: #fff; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 1px; padding: 8px 18px; border-radius: 30px; margin-bottom: 18px;
    width: max-content;
}
.fleet-banner h1 { color: #fff; font-size: 42px; font-weight: 700; margin-bottom: 16px; }
.fleet-banner .breadcrumb-list { list-style: none; padding: 0; margin: 0; }
.fleet-banner .breadcrumb-list li { display: inline-block; color: #cfd8e3; font-size: 15px; }
.fleet-banner .breadcrumb-list li a { color: #FD5B38; text-decoration: none; }
.fleet-banner .breadcrumb-list li:not(:last-child)::after { content: "/"; padding: 0 8px; color: #cfd8e3; }

@media (max-width: 767px) {
    .fleet-banner { min-height: 260px; }
    .fleet-banner h1 { font-size: 28px; }
}

.fleet-hero { padding: 70px 0; background: #fff; }
.fleet-hero .fleet-img-wrap { position: relative; }
.fleet-hero .fleet-img-wrap img { width: 100%; border-radius: 10px; box-shadow: 0 15px 40px rgba(0,0,0,0.12); }
.fleet-hero .badge-tag {
    position: absolute; top: -18px; left: 20px; background: #FD5B38; color: #fff;
    font-weight: 700; padding: 10px 18px; border-radius: 6px; font-size: 14px;
}
.fleet-hero .fleet-content { padding-left: 20px; }
.fleet-hero .fleet-content .sub-title { color: #FD5B38; font-weight: 700; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; }
.fleet-hero .fleet-content h2 { font-size: 32px; font-weight: 700; color: #0d2b4e; margin: 10px 0 18px; }
.fleet-hero .fleet-content p { color: #5c6b7a; font-size: 16px; line-height: 1.8; margin-bottom: 20px; }

.fleet-specs-list { list-style: none; padding: 0; margin: 0 0 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.fleet-specs-list li { font-size: 15px; color: #0d2b4e; padding-left: 26px; position: relative; }
.fleet-specs-list li::before {
    content: "✓"; position: absolute; left: 0; top: 0; color: #fff; background: #FD5B38;
    width: 18px; height: 18px; font-size: 11px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.fleet-specs-list li strong { display: block; color: #93a2b1; font-weight: 400; font-size: 12px; text-transform: uppercase; }

.btn-fleet-primary, .btn-fleet-outline {
    display: inline-block; padding: 14px 30px; border-radius: 6px; font-weight: 600; font-size: 15px;
    text-decoration: none; margin-right: 12px; margin-bottom: 10px; transition: 0.3s;
}
.btn-fleet-primary { background: #FD5B38; color: #fff; border: 2px solid #FD5B38; }
.btn-fleet-primary:hover { background: transparent; color: #FD5B38; }
.btn-fleet-outline { background: transparent; color: #0d2b4e; border: 2px solid #0d2b4e; }
.btn-fleet-outline:hover { background: #0d2b4e; color: #fff; }

.fleet-features-strip { background: #0d2b4e; padding: 40px 0; }
.fleet-features-strip .feature-box { text-align: center; color: #fff; }
.fleet-features-strip .feature-box .icon {
    width: 60px; height: 60px; background: #FD5B38; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; margin: 0 auto 15px; font-size: 24px; color: #fff;
}
.fleet-features-strip .feature-box h5 { font-size: 16px; font-weight: 600; margin: 0; color: #fff; }

.fleet-section { padding: 70px 0; }
.fleet-section.bg-light { background: #f7f9fc; }
.sec-title { text-align: center; margin-bottom: 45px; }
.sec-title span { color: #FD5B38; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; }
.sec-title h2 { color: #0d2b4e; font-size: 30px; font-weight: 700; margin-top: 8px; }

.why-fleet-card { background: #fff; border-radius: 10px; padding: 30px 25px; text-align: center; box-shadow: 0 8px 25px rgba(0,0,0,0.06); height: 100%; transition: 0.3s; }
.why-fleet-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.why-fleet-card .icon { font-size: 34px; color: #FD5B38; margin-bottom: 15px; }
.why-fleet-card h4 { color: #0d2b4e; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.why-fleet-card p { color: #5c6b7a; font-size: 14px; line-height: 1.7; margin: 0; }

.fleet-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.fleet-gallery-grid a { display: block; overflow: hidden; border-radius: 8px; }
.fleet-gallery-grid img { width: 100%; height: 275px; object-fit: cover; transition: 0.4s; }
.fleet-gallery-grid a:hover img { transform: scale(1.08); }

.fleet-testimonial-card { background: #fff; border-radius: 10px; padding: 28px; box-shadow: 0 8px 25px rgba(0,0,0,0.06); height: 100%; }
.fleet-testimonial-card .stars { color: #FD5B38; margin-bottom: 12px; }
.fleet-testimonial-card p { color: #5c6b7a; font-size: 14px; line-height: 1.7; }
.fleet-testimonial-card .client { display: flex; align-items: center; margin-top: 15px; }
.fleet-testimonial-card .avatar {
    width: 42px; height: 42px; border-radius: 50%; background: #0d2b4e; color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: 700; margin-right: 12px; font-size: 14px;
}
.fleet-testimonial-card .client strong { display: block; color: #0d2b4e; font-size: 14px; }
.fleet-testimonial-card .client span { color: #93a2b1; font-size: 12px; }

.fleet-faq .accordion-item { border: none; margin-bottom: 12px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.fleet-faq .accordion-button { font-weight: 600; color: #0d2b4e; background: #fff; padding: 18px 22px; }
.fleet-faq .accordion-button:not(.collapsed) { color: #fff; background: #0d2b4e; }
.fleet-faq .accordion-body { color: #5c6b7a; font-size: 14px; line-height: 1.7; padding: 18px 22px; }

.fleet-cta {
    background: linear-gradient(rgb(35 81 110 / 35%), rgb(51 79 111 / 67%)), url(../../images/gallery/about-us.jpeg) center / cover;
    padding: 60px 0;
    text-align: center;
}
.fleet-cta h2 { color: #fff; font-size: 28px; font-weight: 700; margin-bottom: 15px; }
.fleet-cta p { color: #cfd8e3; margin-bottom: 25px; }

.other-fleets-strip { padding: 60px 0; }
.other-fleet-card { display: block; text-decoration: none; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.other-fleet-card img { width: 100%; height: 280px; object-fit: cover; transition: 0.4s; }
.other-fleet-card:hover img { transform: scale(1.1); }
.other-fleet-card .label {
    position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: #fff; padding: 30px 12px 12px; font-size: 13px; font-weight: 600; text-align: center;
}

@media (max-width: 991px) {
    .fleet-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .fleet-specs-list { grid-template-columns: 1fr; }
    .fleet-hero .fleet-content { padding-left: 0; margin-top: 30px; }
}







/*Responsive Style Block*/

/* =====================================================
   RESPONSIVE ADDITIONS - FLEET DETAIL PAGE
   (Desktop styles above remain unchanged)
   ===================================================== */

/* ---------- TABLET & BELOW (up to 991px) ---------- */
@media (max-width: 991px) {

    /* Banner: columns stack, so let height follow content */
    .fleet-banner {
        min-height: auto;
        padding: 50px 0;
    }

        .fleet-banner .container {
            width: 100%;
        }

        .fleet-banner h1 {
            font-size: 34px;
        }

        .fleet-banner .vt-service-detail-form-card {
            margin-top: 30px;
            width: 100%;
        }

    /* Enquiry form fields */
    .vt-service-detail-field input,
    .vt-service-detail-field select,
    .vt-service-detail-field textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* Hero */
    .fleet-hero,
    .fleet-section,
    .other-fleets-strip {
        padding: 50px 0;
    }

        .fleet-hero .fleet-content h2 {
            font-size: 28px;
        }

    /* Features strip: 2 x 2 grid needs vertical spacing */
    .fleet-features-strip .feature-box {
        margin-bottom: 25px;
    }

    .fleet-features-strip {
        padding: 30px 0 5px;
    }

    /* Gallery / other fleets images */
    .fleet-gallery-grid img {
        height: 220px;
    }

    .other-fleet-card img {
        height: 220px;
    }

    /* Testimonials / why cards spacing when they wrap */
    .fleet-testimonial-card,
    .why-fleet-card {
        height: auto;
    }
}

/* ---------- MOBILE (up to 767px) ---------- */
@media (max-width: 767px) {

    /* Banner */
    .fleet-banner {
        padding: 40px 0;
    }

        .fleet-banner h1 {
            font-size: 26px;
            line-height: 1.3;
        }

        .fleet-banner .banner-tag {
            font-size: 12px;
            padding: 6px 14px;
            margin-bottom: 12px;
        }

        .fleet-banner .breadcrumb-list li {
            font-size: 13px;
        }

    /* Form: stack phone + email, prevent iOS zoom on focus */
    .vt-service-detail-form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vt-service-detail-form-card {
        padding: 22px 18px;
    }

    .vt-service-detail-field input,
    .vt-service-detail-field select,
    .vt-service-detail-field textarea {
        font-size: 16px;
    }

    .vt-service-detail-submit {
        width: 100%;
    }

    /* Hero */
    .fleet-hero {
        padding: 40px 0;
    }

        .fleet-hero .badge-tag {
            top: -14px;
            left: 12px;
            font-size: 12px;
            padding: 8px 14px;
        }

        .fleet-hero .fleet-content h2 {
            font-size: 24px;
        }

        .fleet-hero .fleet-content p {
            font-size: 15px;
            line-height: 1.7;
        }

    .fleet-specs-list {
        gap: 14px;
    }

    /* Buttons: full width & stacked */
    .btn-fleet-primary,
    .btn-fleet-outline {
        display: block;
        width: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 12px;
        padding: 12px 20px;
    }

    /* Section headings */
    .fleet-section,
    .other-fleets-strip {
        padding: 40px 0;
    }

    .sec-title {
        margin-bottom: 30px;
    }

        .sec-title h2 {
            font-size: 24px;
        }

    /* Features strip */
    .fleet-features-strip .feature-box .icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .fleet-features-strip .feature-box h5 {
        font-size: 14px;
    }

    /* Gallery: keep 2 columns, shorter images */
    .fleet-gallery-grid {
        gap: 10px;
    }

        .fleet-gallery-grid img {
            height: 160px;
        }

    /* CTA */
    .fleet-cta {
        padding: 40px 15px;
    }

        .fleet-cta h2 {
            font-size: 22px;
        }

        .fleet-cta p {
            font-size: 14px;
        }

    /* FAQ */
    .fleet-faq .accordion-button {
        font-size: 14px;
        padding: 14px 16px;
    }

    .fleet-faq .accordion-body {
        padding: 14px 16px;
    }

    /* Other fleets */
    .other-fleet-card img {
        height: 170px;
    }

    .other-fleet-card .label {
        font-size: 12px;
        padding: 25px 8px 10px;
    }

    /* Corporate clients logos: stop stretching from fixed width/height attributes */
    .corporate-clients-section .client-logo img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* ---------- SMALL PHONES (up to 575px) ---------- */
@media (max-width: 575px) {

    .fleet-banner h1 {
        font-size: 23px;
    }

    /* Gallery becomes a single column */
    .fleet-gallery-grid {
        grid-template-columns: 1fr;
    }

        .fleet-gallery-grid img {
            height: 210px;
        }

    .other-fleet-card img {
        height: 140px;
    }

    .fleet-testimonial-card {
        padding: 22px 18px;
    }
}





/* ===== FEATURE SECTION: CONTENT LEFT / IMAGE RIGHT ===== */
.fleet-feature {
    padding: 70px 0;
    background: #fff;
}

    .fleet-feature .fleet-img-wrap {
        position: relative;
    }

        .fleet-feature .fleet-img-wrap img {
            width: 100%;
            height: 450px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        }

    .fleet-feature .fleet-content {
        padding-right: 20px;
    }

        .fleet-feature .fleet-content .sub-title {
            color: #FD5B38;
            font-weight: 700;
            letter-spacing: 1px;
            font-size: 14px;
            text-transform: uppercase;
        }

        .fleet-feature .fleet-content h2 {
            font-size: 32px;
            font-weight: 700;
            color: #0d2b4e;
            margin: 10px 0 18px;
        }

        .fleet-feature .fleet-content p {
            color: #5c6b7a;
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
        }

.fleet-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    display: grid;
    gap: 12px;
}

    .fleet-check-list li {
        font-size: 15px;
        color: #0d2b4e;
        padding-left: 28px;
        position: relative;
    }

        .fleet-check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 1px;
            color: #fff;
            background: #FD5B38;
            width: 18px;
            height: 18px;
            font-size: 11px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

@media (max-width: 991px) {
    .fleet-feature {
        padding: 50px 0;
    }

        .fleet-feature .fleet-content {
            padding-right: 0;
        }

            .fleet-feature .fleet-content h2 {
                font-size: 28px;
            }

        .fleet-feature .fleet-img-wrap {
            margin-top: 30px;
        }
}

@media (max-width: 767px) {
    .fleet-feature {
        padding: 40px 0;
    }

        .fleet-feature .fleet-content h2 {
            font-size: 24px;
        }

        .fleet-feature .fleet-content p {
            font-size: 15px;
            line-height: 1.7;
        }

        .fleet-feature .fleet-img-wrap img {
            height: 280px;
        }
}



/* ===== Comfort & Convenience section: responsive fix ===== */
@media (max-width: 991px) {
    .fleet-feature {
        padding: 50px 0;
    }

        .fleet-feature .row {
            display: flex;
            flex-direction: column-reverse; /* image on top, text below */
        }

        .fleet-feature .fleet-content {
            padding-right: 0;
            margin-top: 30px;
        }

            .fleet-feature .fleet-content h2 {
                font-size: 28px;
            }

        .fleet-feature .fleet-img-wrap {
            margin-top: 0;
        }

            .fleet-feature .fleet-img-wrap img {
                height: auto;
            }
}

@media (max-width: 767px) {
    .fleet-feature {
        padding: 40px 0;
    }

        .fleet-feature .fleet-content h2 {
            font-size: 24px;
        }

        .fleet-feature .fleet-content p {
            font-size: 15px;
            line-height: 1.7;
        }

        .fleet-feature .fleet-img-wrap img {
            height: auto;
        }
}


@media (max-width: 991px) {
    .fleet-feature {
        padding-top: 0;
    }
}