/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* ===== Brand unification =====
   The template's real brand color is #004dda (used ~65x across style.css
   for .btn_1, links, the "How it Works" band, etc). A few newer bolt-on
   pieces (header search bubble, from/to search bar, listing-card buttons)
   had drifted onto unrelated blues/teal. Repoint them all to the same
   brand blue + amber accent so the page reads as one system. */

:root {
    --brand-blue: #004dda;
    --brand-blue-dark: #0054a6;
    --brand-navy: #001b4d;
    --brand-amber: #FFC107;
}

/* Header search bubble was Bootstrap blue (#0d6efd) */
.desktop-search form:focus-within {
    border-color: var(--brand-blue);
    box-shadow: 0 6px 18px rgba(0, 77, 218, 0.25);
}

.desktop-search button {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
}

.desktop-search button:hover {
    box-shadow: 0 6px 16px rgba(0, 77, 218, 0.4);
}

/* From/To search bar was indigo (#4f46e5) */
.search-input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px rgba(0, 77, 218, 0.15);
}

.search-btn {
    background: var(--brand-blue);
}

.search-btn:hover {
    background: var(--brand-blue-dark);
}

/* ===== Hero: graceful fallback + legible text on any slide ===== */

.hero_single {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
}

.hero-slide {
    background-color: var(--brand-navy);
    background-image:
        linear-gradient(135deg, rgba(0, 27, 77, 0.55), rgba(0, 77, 218, 0.35)),
        url('../img/pattern.svg');
    background-size: cover, 400px;
    background-position: center, center;
    background-blend-mode: normal, overlay;
}

.hero-overlay {
    background: linear-gradient(180deg, rgba(0, 10, 40, 0.25) 0%, rgba(0, 10, 40, 0.75) 100%);
}

.hero-content h3,
.hero-content p {
    /* Fallback color only — the hero JS sets an inline color per
       slide from its "Text Color" admin field, which !important
       here was silently overriding, making that field a no-op. */
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    animation: heroFadeUp 0.7s ease both;
}

.hero-content p {
    animation-delay: 0.1s;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Hero carousel controls: dots + arrows =====
   The slider auto-advanced with no way to tell it had more than one
   slide, jump to a specific one, or navigate manually. */

.hero-dots {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 22px;
    display: flex;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
}

.hero-dot {
    pointer-events: auto;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.hero-dot.active {
    width: 26px;
    border-radius: 6px;
    background: var(--brand-amber);
    border-color: var(--brand-amber);
}

.hero-arrow {
    position: absolute;
    z-index: 20;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 20, 60, 0.3);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-arrow:hover {
    background: var(--brand-amber);
    border-color: var(--brand-amber);
    color: #21170a;
}

.hero-arrow-prev {
    left: 24px;
}

.hero-arrow-next {
    right: 24px;
}

@media (max-width: 767px) {
    .hero-arrow {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .hero-arrow-prev {
        left: 10px;
    }

    .hero-arrow-next {
        right: 10px;
    }

    .hero-dots {
        bottom: 14px;
    }
}

/* ===== Category strip: subtle hover lift ===== */

.main_categories ul li a {
    transition: transform 0.25s ease, color 0.25s ease;
}

.main_categories ul li a:hover {
    transform: translateY(-3px);
    color: var(--brand-blue);
}

.main_categories ul li a i {
    transition: color 0.25s ease;
}

.main_categories ul li a:hover i {
    color: var(--brand-blue);
}

/* ===== Buttons: a touch more premium on hover ===== */

a.btn_1,
.btn_1 {
    box-shadow: 0 2px 10px rgba(0, 77, 218, 0.18);
}

a.btn_1:hover,
.btn_1:hover {
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.35);
    transform: translateY(-1px);
}

/* ===== Listing cards (home + search results) ===== */

.transport-listing-card {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 20, 60, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    /* Contain the corner ribbon (::before) so it wraps the card's own
       corner instead of poking out past the card's edges into whatever
       sits next to/above it in the grid. box-shadow is unaffected since
       it's the card's own box decoration, not overflowing content. */
    overflow: hidden;
    /* Cards in the same grid row are already stretched to equal height
       by the grid; pin the action buttons to the bottom of each card so
       they land on the same line across a row regardless of how much
       title/badge text sits above them. */
    display: flex;
    flex-direction: column;
}

.transport-listing-card .transport-actions {
    margin-top: auto;
    padding-top: 14px;
}

.transport-listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 20, 60, 0.14);
}

.transport-tags span {
    background: #eef4ff;
    border-color: #d7e4ff;
    color: var(--brand-blue-dark);
}

/* Action buttons: give Call/Message/WhatsApp distinct visual weight
   instead of three identical blue pills (they even shared one emoji).
   Call = primary (solid), Message + WhatsApp = secondary (outline). */
.transport-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.transport-call {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border-color: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(0, 77, 218, 0.25);
}

.transport-call:hover {
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-navy));
    box-shadow: 0 6px 16px rgba(0, 77, 218, 0.35);
    transform: translateY(-2px);
}

.transport-contact {
    background: #fff;
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.transport-contact:hover {
    background: var(--brand-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 77, 218, 0.2);
}

.transport-whatsapp:hover {
    background: #25d366;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.25);
}

/* Gold ribbon on Platinum-tier cards only */
#platinumListingSlider .transport-listing-card::before {
    content: '★ Platinum';
    position: absolute;
    top: 14px;
    right: -34px;
    transform: rotate(40deg);
    background: linear-gradient(135deg, #ffd54a, #f5a623);
    color: #4a2f00;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

html {
    scroll-behavior: smooth;
}

/* ===== Hero: badge, dual CTA, decorative depth ===== */

.hero_single {
    isolation: isolate;
}

.hero_single::before,
.hero_single::after {
    content: '';
    position: absolute;
    z-index: 11;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.hero_single::before {
    width: 360px;
    height: 360px;
    background: rgba(255, 193, 7, 0.25);
    top: -120px;
    right: 8%;
}

.hero_single::after {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.12);
    bottom: -140px;
    left: 6%;
}

.hero-badge {
    display: inline-block;
    padding: 7px 18px;
    margin-bottom: 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #fff !important;
    text-shadow: none;
    animation: heroFadeUp 0.6s ease both;
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 26px;
    flex-wrap: wrap;
    animation: heroFadeUp 0.7s ease both;
    animation-delay: 0.2s;
}

.hero-cta .btn_1:not(.outline-light) {
    background: var(--brand-amber);
    color: #4a2f00 !important;
}

.hero-cta .btn_1:not(.outline-light):hover {
    background: #ffca28;
    color: #4a2f00 !important;
}

.hero-cta .btn_1.outline-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    padding: 13px 30px;
}

.hero-cta .btn_1.outline-light:hover {
    background: #fff;
    color: var(--brand-navy) !important;
    border-color: #fff;
}

@media (max-width: 575px) {
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
}

/* ===== Category strip: colorful icon tiles instead of a plain row ===== */

.main_categories ul {
    padding: 25px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.main_categories ul li {
    width: auto;
    flex: 1 1 0;
    border-right: none;
}

.main_categories ul li a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #eef4ff;
    color: var(--brand-blue);
    font-size: 22px !important;
    transition: all 0.25s ease;
}

.main_categories ul li a:hover i {
    background: var(--brand-blue);
    color: #fff !important;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 77, 218, 0.3);
}

.main_categories ul li a h3 {
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

/* ===== Trust strip ===== */

.trust-strip {
    background: #f4f7ff;
    border-top: 1px solid #e6ecfb;
    border-bottom: 1px solid #e6ecfb;
    padding: 16px 0;
}

.trust-strip ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 36px;
    margin: 0;
}

.trust-strip ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-blue-dark);
}

.trust-strip ul li i {
    color: var(--brand-amber);
    font-size: 16px;
}

/* ===== Section headings: eyebrow kicker + main_title_3 (previously unstyled) ===== */

span.section-eyebrow {
    width: auto;
    height: auto;
    display: inline-block;
    margin: 0 auto 10px;
    padding: 5px 16px;
    border-radius: 20px;
    background: #eef4ff;
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.main_title_3 {
    text-align: center;
    margin-bottom: 45px;
}

.main_title_3>span:not(.section-eyebrow) {
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-amber);
    display: block;
    margin: 6px auto 20px;
}

.main_title_3 h2 {
    margin: 0;
    font-weight: 600;
}

.main_title_3 p {
    font-size: 16px;
    color: #777;
    margin-top: 8px;
    margin-bottom: 0;
}

/* ===== Listing card info as pill badges instead of stacked plain text ===== */

.transport-card-header>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transport-location,
.transport-gst,
.transport-meta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: #f4f6fa;
    border-radius: 20px;
    padding: 3px 10px !important;
    margin: 2px 0 !important;
}

/* ===== How it Works: numbered glass-panel steps ===== */

.call_section .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 0;
}

.call_section .box_how {
    height: 100%;
    padding: 34px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    backdrop-filter: blur(4px);
    transition: transform 0.25s ease, background 0.25s ease;
}

.call_section .box_how:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.1);
}

.call_section .row>.col-md-4:nth-child(1) .box_how::before {
    content: '1';
}

.call_section .row>.col-md-4:nth-child(2) .box_how::before {
    content: '2';
}

.call_section .row>.col-md-4:nth-child(3) .box_how::before {
    content: '3';
}

.call_section .box_how::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--brand-amber);
    color: #4a2f00;
    font-size: 14px;
    font-weight: 700;
}

/* ===== Footer: a bit more presence ===== */

#newsletter .form-group {
    display: flex;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 20, 60, 0.08);
}

#newsletter input[type="email"] {
    border: 1px solid #e6ecfb;
    border-right: none;
}

#newsletter input[type="submit"] {
    background: var(--brand-blue);
    color: #fff;
    border: none;
    padding: 0 22px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

#newsletter input[type="submit"]:hover {
    background: var(--brand-blue-dark);
}

/* ===== Stats strip (right after the hero) ===== */

.stats-strip {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
    padding: 28px 0;
}

.stats-strip ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}

.stats-strip ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 42px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.stats-strip ul li:last-child {
    border-right: none;
}

.stats-strip .stat-icon {
    font-size: 22px;
    margin-bottom: 4px;
}

.stats-strip .stat-number {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.stats-strip .stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 2px;
}

@media (max-width: 767px) {
    .stats-strip ul li {
        padding: 10px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        flex: 1 1 45%;
    }

    .stats-strip ul li:last-child,
    .stats-strip ul li:nth-last-child(2) {
        border-bottom: none;
    }
}

/* ===== Testimonials ===== */

.testimonial-card {
    height: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 30px 26px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 20, 60, 0.08);
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 20, 60, 0.14);
}

.testimonial-quote-icon {
    position: absolute;
    top: 14px;
    right: 22px;
    font-size: 56px;
    font-family: Georgia, serif;
    color: #eef4ff;
    line-height: 1;
    z-index: 0;
}

.testimonial-rating {
    color: var(--brand-amber);
    font-size: 15px;
    margin-bottom: 10px;
}

.testimonial-text {
    position: relative;
    z-index: 1;
    color: #555;
    font-style: italic;
    margin-bottom: 22px;
    min-height: 72px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
}

.testimonial-author div {
    display: flex;
    flex-direction: column;
}

.testimonial-author strong {
    color: #222;
    font-size: 14px;
}

.testimonial-author span {
    font-size: 12px;
    color: #888;
}

/* When there are only 1-2 testimonials, don't leave a lopsided empty
   gap in the row — center whatever cards exist instead. */
.testimonials-row {
    justify-content: center;
}

/* ===== "Why Choose MyTrans" cards (reused from the About page) —
   was justified body text (uneven word-spacing) with a bare 70px icon
   and a barely-there shadow. Icon now sits in a brand-tinted circle,
   text reads normally, and the card lifts more deliberately on hover. ===== */
a.box_feat {
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 20, 60, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.box_feat:hover {
    box-shadow: 0 14px 34px rgba(0, 20, 60, 0.14);
}

.box_feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #eef4ff;
    margin-bottom: 14px;
    transition: background 0.25s ease;
}

a.box_feat i {
    font-size: 34px;
    color: var(--brand-blue);
    margin: 0;
}

a.box_feat:hover .box_feat-icon {
    background: var(--brand-blue);
}

a.box_feat:hover i {
    color: #fff;
}

/* ===== About page: origin story ===== */
.about-story-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 20, 60, 0.16);
}

.about-story-image img {
    display: block;
    width: 100%;
}

.about-story-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #fff;
    border-radius: 14px;
    padding: 12px 20px;
    box-shadow: 0 10px 26px rgba(0, 20, 60, 0.2);
    text-align: center;
    line-height: 1.2;
}

.about-story-badge strong {
    display: block;
    font-size: 22px;
    color: var(--brand-blue);
    font-weight: 800;
}

.about-story-badge span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #96a0b5;
    font-weight: 600;
}

.about-story-copy p {
    color: #555;
    line-height: 1.8;
}

.about-story-quote {
    position: relative;
    background: #f4f7ff;
    border-left: 3px solid var(--brand-blue);
    border-radius: 10px;
    padding: 20px 24px 18px;
    margin-top: 20px;
}

.about-story-quote i {
    color: var(--brand-blue);
    opacity: 0.35;
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
}

.about-story-quote p {
    font-style: italic;
    color: #16213e;
    font-size: 15px;
    margin: 0 0 8px;
}

.about-story-quote span {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-blue);
}

@media (max-width: 991px) {
    .about-story-image {
        margin-bottom: 32px;
    }
}

/* ===== Our Services grid ===== */

.service-card {
    display: block;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    padding: 30px 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(0, 20, 60, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 20, 60, 0.14);
}

.service-card i {
    font-size: 34px;
    color: var(--brand-blue);
    margin-bottom: 10px;
    display: inline-block;
}

.service-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 6px 0 8px;
    min-height: 40px;
}

.service-card-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue-dark);
}

.service-card:hover .service-card-link {
    color: var(--brand-amber);
}

/* ===== Request a Free Quote ===== */

.quote-section {
    position: relative;
    background: linear-gradient(135deg, #eef3ff, #f7f9ff);
    padding: 70px 0;
    margin: 20px 0;
    overflow: hidden;
}

.quote-section::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 77, 218, 0.08), transparent 70%);
    top: -160px;
    left: -120px;
    pointer-events: none;
}

.quote-section .section-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 16px;
    border-radius: 20px;
    background: #fff;
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 20, 60, 0.06);
}

.quote-section h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 14px;
    color: #16213e;
}

.quote-section > .container > .row > .col-lg-5 p {
    color: #667;
    font-size: 15px;
    line-height: 1.7;
    max-width: 380px;
}

.quote-form-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 40px 34px 34px;
    box-shadow: 0 20px 50px rgba(0, 20, 60, 0.12);
    border: 1px solid #f0f2fa;
}

/* This project runs Bootstrap 4 (confirmed in bootstrap.min.css), which
   has no ".g-3" gutter utility — that's a Bootstrap 5 class, so the
   markup's "row g-3" was doing nothing and every field was touching.
   Space the rows explicitly instead of depending on a class that
   doesn't exist in this Bootstrap version. */
.quote-form-card form .row>div {
    margin-bottom: 12px;
}

.quote-form-card form .row>div:last-child {
    margin-bottom: 0;
}

.quote-form-badge {
    position: absolute;
    top: -22px;
    left: 34px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 18px rgba(0, 77, 218, 0.35);
}

/* Icon-prefixed inputs */
.quote-input-group {
    display: flex;
    align-items: center;
    background: #f7f9fc;
    border: 1.5px solid #e8ecf5;
    border-radius: 12px;
    padding: 0 14px;
    height: 52px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.quote-input-group:focus-within {
    border-color: var(--brand-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 77, 218, 0.1);
}

.quote-input-icon {
    font-size: 16px;
    margin-right: 10px;
    flex-shrink: 0;
    opacity: 0.85;
}

.quote-input-group input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #222;
    font-family: inherit;
    appearance: none;
}

.quote-input-group input::placeholder {
    color: #96a0b5;
}

/* Custom "select" — the browser's native <select> panel can't be styled
   consistently (see the plain gray/white list), so this swaps in a
   div-based dropdown that matches the rest of the form, backed by a
   hidden input for the actual form submission. */
.quote-select {
    position: relative;
    cursor: pointer;
}

.quote-select .quote-input-group {
    cursor: pointer;
}

.quote-select-value {
    flex: 1;
    color: #96a0b5;
    font-size: 14px;
}

.quote-select-value.is-filled {
    color: #222;
}

.quote-select-chevron {
    color: var(--brand-blue);
    font-size: 13px;
    margin-left: 8px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.quote-select.is-open .quote-select-chevron {
    transform: rotate(180deg);
}

.quote-select.is-open .quote-input-group {
    border-color: var(--brand-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 77, 218, 0.1);
}

.quote-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid #eaedf5;
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(0, 20, 60, 0.14);
    padding: 6px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.quote-select.is-open .quote-select-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quote-select-option {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    transition: background 0.15s ease, color 0.15s ease;
}

.quote-select-option:hover {
    background: #eef4ff;
    color: var(--brand-blue-dark);
}

.quote-select-option.is-selected {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
}

.quote-textarea-group {
    height: auto;
    align-items: flex-start;
    padding: 14px;
}

.quote-textarea-icon {
    margin-top: 2px;
}

.quote-input-group textarea {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    resize: vertical;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    min-height: 70px;
}

.quote-input-group textarea::placeholder {
    color: #96a0b5;
}

/* From -> To route row */
.quote-route {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quote-route .quote-input-group {
    flex: 1;
}

.quote-route-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef4ff;
    color: var(--brand-blue);
    font-weight: 700;
}

@media (max-width: 575px) {
    .quote-route {
        flex-direction: column;
    }

    .quote-route-arrow {
        transform: rotate(90deg);
    }

    .quote-route .quote-input-group {
        width: 100%;
    }
}

.quote-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 77, 218, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quote-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 77, 218, 0.4);
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-navy));
}

.quote-success-msg {
    background: #e6f7ed;
    color: #1a7f4b;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 991px) {
    .quote-section .col-lg-5 {
        margin-bottom: 40px;
    }

    .quote-section > .container > .row > .col-lg-5 p {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .quote-form-card {
        padding: 34px 22px 26px;
    }
}

/* ===== Hero route search (From -> To) ===== */

.search-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 90px 0;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 65%, #0062ff 100%);
}

.search-section:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../img/pattern.svg');
    background-size: 420px;
    opacity: 0.08;
}

.search-section-blob {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.search-section-blob-1 {
    width: 420px;
    height: 420px;
    background: rgba(255, 193, 7, 0.28);
    top: -180px;
    left: -100px;
}

.search-section-blob-2 {
    width: 380px;
    height: 380px;
    background: rgba(255, 255, 255, 0.18);
    bottom: -200px;
    right: -80px;
}

.search-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 44px 48px;
    box-shadow: 0 30px 70px rgba(0, 10, 40, 0.45);
    width: 100%;
    animation: heroFadeUp 0.6s ease both;
}

.search-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    overflow: hidden;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-amber), var(--brand-blue));
    background-size: 200% 100%;
    animation: shimmerLine 3s linear infinite;
}

@keyframes shimmerLine {
    to {
        background-position: -200% 0;
    }
}

.search-card-badge {
    position: absolute;
    top: -30px;
    left: 48px;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 12px 26px rgba(0, 10, 40, 0.35);
}

.search-card-badge:after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 22px;
    border: 2px solid rgba(255, 193, 7, 0.5);
    animation: badgePulse 2.2s ease-out infinite;
}

@keyframes badgePulse {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

.search-card-heading {
    text-align: center;
    margin: 12px 0 28px;
}

.search-card-heading h3 {
    font-size: 26px;
    font-weight: 800;
    color: #16213e;
    margin: 8px 0 10px;
    letter-spacing: -0.3px;
}

.search-card-heading p {
    font-size: 14.5px;
    color: #667;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

.hero-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-search-group {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f7f9fc;
    border: 1.5px solid #e8ecf5;
    border-radius: 14px;
    padding: 9px 16px;
    min-height: 64px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hero-search-group:focus-within {
    border-color: var(--brand-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 77, 218, 0.12);
    transform: translateY(-2px);
}

.hero-search-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    color: #fff;
    font-size: 16px;
    margin-right: 14px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 77, 218, 0.25);
}

.hero-search-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.hero-search-field label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #96a0b5;
    margin-bottom: 2px;
}

.hero-search-group input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    padding: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #222;
    font-family: inherit;
}

.hero-search-group input::placeholder {
    color: #96a0b5;
}

.hero-search-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef4ff, #dce8ff);
    color: var(--brand-blue);
    font-weight: 700;
    animation: arrowNudge 1.6s ease-in-out infinite;
}

@keyframes arrowNudge {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(3px);
    }
}

.hero-search-btn {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 64px;
    padding: 0 38px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(0, 77, 218, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero-search-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: btnShine 2.6s ease-in-out infinite;
}

@keyframes btnShine {
    0% {
        left: -75%;
    }

    50%,
    100% {
        left: 130%;
    }
}

.hero-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 77, 218, 0.45);
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-navy));
    color: #fff;
}

@keyframes arrowNudgeVertical {

    0%,
    100% {
        transform: rotate(90deg) translateX(0);
    }

    50% {
        transform: rotate(90deg) translateX(3px);
    }
}

@media (max-width: 767px) {
    .search-section {
        padding: 48px 0;
    }

    .search-card {
        padding: 34px 22px 26px;
    }

    .hero-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-search-arrow {
        align-self: center;
        animation-name: arrowNudgeVertical;
    }

    .hero-search-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ===== "See the Journey of MyTrans" timeline — vertical, scrollable ===== */

.journey-scroll-v {
    max-height: 420px;
    overflow-y: auto;
    padding: 10px 20px 10px 0;
    margin-top: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-blue) #eef1f8;
    border-bottom: 1px dashed #e3e8f5;
}

.journey-scroll-v::-webkit-scrollbar {
    width: 8px;
}

.journey-scroll-v::-webkit-scrollbar-track {
    background: #eef1f8;
    border-radius: 8px;
}

.journey-scroll-v::-webkit-scrollbar-thumb {
    background: var(--brand-blue);
    border-radius: 8px;
}

.journey-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 0;
}

.journey-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-amber));
    transform: translateX(-50%);
    border-radius: 3px;
}

.journey-item {
    position: relative;
    width: 50%;
    padding: 0 40px 46px;
}

.journey-item:last-child {
    padding-bottom: 10px;
}

.journey-item-left {
    left: 0;
    text-align: right;
}

.journey-item-right {
    left: 50%;
    text-align: left;
}

.journey-dot {
    position: absolute;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--brand-blue);
    box-shadow: 0 0 0 5px rgba(0, 77, 218, 0.12);
    z-index: 2;
}

.journey-item-left .journey-dot {
    right: -9px;
}

.journey-item-right .journey-dot {
    left: -9px;
}

.journey-card {
    display: inline-block;
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 20, 60, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-align: left;
    max-width: 100%;
}

.journey-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 20, 60, 0.14);
}

.journey-year {
    display: inline-block;
    background: #eef4ff;
    color: var(--brand-blue-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.journey-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #16213e;
    margin: 0 0 8px;
}

.journey-card p {
    font-size: 13.5px;
    color: #667;
    line-height: 1.6;
    margin: 0;
}

.journey-scroll-hint {
    text-align: center;
    font-size: 12px;
    color: #96a0b5;
    margin: 8px 0 0;
}

@media (max-width: 767px) {
    .journey-scroll-v {
        max-height: 400px;
    }

    .journey-timeline::before {
        left: 10px;
    }

    .journey-item,
    .journey-item-left,
    .journey-item-right {
        width: 100%;
        left: 0;
        text-align: left;
        padding: 0 0 36px 40px;
    }

    .journey-item-left .journey-dot,
    .journey-item-right .journey-dot {
        left: 1px;
        right: auto;
    }

    .journey-card {
        display: block;
    }
}

/* ===== "Stay On Top" news cards + blog pages ===== */

.blog-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 20, 60, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    color: #222;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 20, 60, 0.14);
    color: #222;
}

.blog-card-image {
    height: 180px;
    background: #eef4ff;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.blog-card-body {
    padding: 20px 22px 24px;
}

.blog-card-body time {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.blog-card-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: #16213e;
    margin: 0 0 8px;
    line-height: 1.35;
}

.blog-card-body p {
    font-size: 13.5px;
    color: #667;
    line-height: 1.6;
    margin: 0 0 12px;
}

.blog-card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-blue);
}

a.btn_1.outline-blue {
    background: transparent;
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
}

a.btn_1.outline-blue:hover {
    background: var(--brand-blue);
    color: #fff !important;
}

/* Blog single-post page */
.blog-breadcrumb {
    font-size: 13px;
    color: #96a0b5;
    margin-bottom: 20px;
}

.blog-breadcrumb a {
    color: var(--brand-blue-dark);
}

.blog-article-date {
    display: inline-block;
    background: #eef4ff;
    color: var(--brand-blue-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.blog-article-title {
    font-size: 30px;
    font-weight: 700;
    color: #16213e;
    line-height: 1.3;
    margin-bottom: 20px;
}

.blog-article-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 30px;
}

.blog-article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.blog-article-content h2,
.blog-article-content h3 {
    color: #16213e;
    margin-top: 30px;
}

.blog-article-content img {
    max-width: 100%;
    border-radius: 12px;
}

.blog-related {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.blog-related h3 {
    font-size: 18px;
    font-weight: 700;
    color: #16213e;
    margin-bottom: 20px;
}

.blog-related-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 20, 60, 0.08);
    margin-bottom: 20px;
    color: #222;
    transition: transform 0.2s ease;
}

.blog-related-card:hover {
    transform: translateY(-3px);
    color: #222;
}

.blog-related-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
}

.blog-related-card span {
    display: block;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .blog-article-title {
        font-size: 24px;
    }
}

/* ===== Single listing detail page ===== */

.detail-plan-badge {
    display: inline-block;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.detail-card {
    background: #fff;
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 26px;
    box-shadow: 0 4px 20px rgba(0, 20, 60, 0.08);
}

.detail-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #16213e;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef1f8;
}

.detail-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f4f6fa;
}

.detail-contact-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-contact-name {
    font-weight: 600;
    color: var(--brand-blue);
}

.detail-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-contact-actions .transport-call,
.detail-contact-actions .transport-contact,
.detail-contact-actions .transport-whatsapp {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.detail-list {
    margin: 0;
}

.detail-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f4f6fa;
    font-size: 14px;
}

.detail-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-list li span {
    color: #96a0b5;
}

.detail-list li strong {
    color: #222;
    text-align: right;
}

.detail-description {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

.detail-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.detail-photo-tile {
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
    box-shadow: 0 4px 14px rgba(0, 20, 60, 0.08);
    transition: transform 0.2s ease;
}

.detail-photo-tile:hover {
    transform: translateY(-3px);
}

.detail-photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 575px) {
    .detail-card {
        padding: 20px 18px;
    }

    .detail-contact-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-list li {
        flex-direction: column;
        gap: 2px;
    }

    .detail-list li strong {
        text-align: left;
    }
}

/* ============================================================
   HEADER — full pass: breathing room, a real accent, a purpose
   (CTA), and typography that doesn't read as a bare template.
   ============================================================ */

header.header {
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 20, 60, 0.08);
}

header.header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-amber));
}

@media (min-width: 769px) {
    header.header {
        padding: 18px 32px !important;
    }

    header.header.sticky {
        padding: 10px 32px !important;
    }
}

#logo a {
    display: inline-flex;
    align-items: center;
}

/* Search pill: was pure white sitting on a white header, so it
   visually disappeared. A soft tint gives it a shape of its own. */
.desktop-search form {
    background: #f4f6fb;
    border-color: #e8ecf7;
}

.desktop-search form:focus-within {
    background: #fff;
}

.desktop-search input {
    background: transparent;
}

/* Nav: more room between items, heavier weight, a real color
   (not pure black), brand-blue hover with an animated underline,
   and a persistent mark for whichever page is current. */
.main-menu>ul>li {
    margin: 0 3px;
}

.main-menu>ul>li span>a {
    position: relative;
    color: #2b3350;
    font-weight: 600;
    letter-spacing: 0.15px;
    padding-bottom: 22px;
    transition: color 0.2s ease;
}

.main-menu>ul>li span>a:after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 14px;
    height: 2px;
    background: var(--brand-blue);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.main-menu>ul>li span:hover>a {
    opacity: 1;
    color: var(--brand-blue);
}

.main-menu>ul>li span:hover>a:after {
    transform: scaleX(1);
}

.main-menu>ul>li.nav-active span>a {
    color: var(--brand-blue);
}

.main-menu>ul>li.nav-active span>a:after {
    transform: scaleX(1);
}

/* Header CTA — the header otherwise has no action of its own. */
.main-menu>ul>li.nav-cta {
    margin-left: 14px;
    vertical-align: middle;
}

.main-menu>ul>li.nav-cta>a {
    display: inline-block;
    background: var(--brand-amber);
    color: #21170a;
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 22px !important;
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.main-menu>ul>li.nav-cta>a:hover {
    background: #ffca2c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.45);
}

@media (max-width: 1150px) {
    .main-menu>ul>li.nav-cta {
        display: none;
    }
}

/* Dropdown panels (Listings / Cities): soften the stock shadow to match
   the rest of the site's card language. */
.main-menu ul ul {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 20, 60, 0.14);
    padding: 6px 0;
    overflow: hidden;
}

/* .main-menu ul ul sets overflow:hidden (for rounded-corner clipping)
   with higher specificity than the .cities-dropdown class alone, which
   was silently blocking this scrollbar from ever working. */
.main-menu .cities-dropdown {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cities-dropdown li:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 6px 10px 10px;
}

#citySearch {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #e8ecf5;
    border-radius: 8px;
    font-size: 13px;
}

#citySearch:focus {
    outline: none;
    border-color: var(--brand-blue);
}

/* Hamburger bars were plain black — tie them to the brand. */
.hamburger-inner,
.hamburger-inner:before,
.hamburger-inner:after {
    background-color: var(--brand-navy) !important;
}

/* Mobile hamburger search button had drifted to stock Bootstrap blue */
.mm-search-item button {
    background: var(--brand-blue);
}

.mm-search-item button:hover {
    background: var(--brand-blue-dark);
}

/* ============================================================
   FOOTER — was a flat, low-contrast white slab under a dark hero
   and CTA band. Bookend the page: dark, on-brand, clear hierarchy.
   ============================================================ */

footer {
    background: var(--brand-navy);
    border-top: none;
    padding-top: 15px;
    position: relative;
    z-index: 1;
}

footer h3 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2px;
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 22px;
}

footer h3:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-amber);
}

footer a.collapse_bt_mobile {
    color: #fff;
}

footer ul li a {
    color: #aab4cc;
}

footer ul li a:hover {
    color: var(--brand-amber);
}

footer ul.links li a:hover:after {
    color: var(--brand-amber);
}

footer ul.contacts li {
    color: #aab4cc;
}

footer ul.contacts li i {
    color: var(--brand-amber);
}

footer hr {
    border-color: rgba(255, 255, 255, 0.12);
}

footer #newsletter h6 {
    color: #fff;
}

#newsletter input[type='email'] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

#newsletter input[type='email']::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.follow_us h5 {
    color: #fff;
}

.follow_us ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, transform 0.2s ease;
}

.follow_us ul li a i {
    color: #fff;
    opacity: 0.85;
    font-size: 15px;
}

.follow_us ul li a:hover {
    background: var(--brand-amber);
    transform: translateY(-3px);
}

.follow_us ul li a:hover i {
    color: #1a1200;
    opacity: 1;
}

#additional_links li,
#additional_links span {
    color: #7c87a3;
}

#additional_links a {
    color: #aab4cc;
}

#additional_links a:hover {
    color: var(--brand-amber);
}

/* ============================================================
   SUB-HEADER TITLE BAND (About / Blog / Contact) — the fixed
   header grew taller in an earlier pass; this band's hardcoded
   offset no longer cleared it and the title was hiding behind
   the nav. Also swap the flat stock blue for the brand gradient
   used everywhere else (hero, CTA band, footer).
   ============================================================ */

.sub_header_in {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
    padding: 46px 0;
}

.sub_header_in.sticky_header {
    margin-top: 112px;
}

@media (max-width: 991px) {
    .sub_header_in.sticky_header {
        margin-top: 54px;
    }
}

.sub_header_in-subtitle {
    color: rgba(255, 255, 255, 0.82);
    margin: 8px 0 0;
    font-size: 15px;
    max-width: 560px;
}

/* ============================================================
   CONTACT US — the title band was flat and the info/form lived
   as separate floating white boxes with a lot of gray between
   them. Redone as one unified split card (dark info panel + white
   form panel) that reads as a single deliberate module, with the
   same decorative-blob treatment used on the homepage hero so the
   two pages feel like one system.
   ============================================================ */

.page-hero-badge {
    display: inline-block;
    padding: 7px 18px;
    margin-bottom: 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #fff;
}

.page-hero-badge i {
    margin-right: 5px;
}

.sub_header_in {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.sub_header_in:before,
.sub_header_in:after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.sub_header_in:before {
    width: 320px;
    height: 320px;
    background: rgba(255, 193, 7, 0.22);
    top: -160px;
    right: 10%;
}

.sub_header_in:after {
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, 0.1);
    bottom: -160px;
    left: 8%;
}

.map-embed-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0, 20, 60, 0.14);
    line-height: 0;
}

.map-embed-wrap iframe {
    display: block;
}

/* ===== Split card ===== */

.contact-split-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(0, 20, 60, 0.14);
}

.contact-split-info {
    flex: 0 0 40%;
    max-width: 40%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(150deg, var(--brand-navy), var(--brand-blue));
    color: #fff;
    padding: 46px 40px;
}

.contact-split-info:before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    filter: blur(70px);
    background: rgba(255, 193, 7, 0.25);
    top: -120px;
    right: -80px;
}

.contact-split-info h3 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 6px;
}

.contact-split-info>p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    margin-bottom: 28px;
}

.contact-split-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.contact-split-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-split-list li:first-child {
    padding-top: 0;
}

.contact-split-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--brand-amber);
    font-size: 17px;
}

.contact-split-list strong {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.contact-split-list a,
.contact-split-list small {
    display: block;
}

.contact-split-list a {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.contact-split-list a:hover {
    color: var(--brand-amber);
}

.contact-split-list small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 2px;
}

.contact-split-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25d366;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-split-whatsapp:hover {
    background: #1ebe59;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

.contact-split-social {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-split-social>span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.contact-split-social div {
    display: flex;
    gap: 10px;
}

.contact-split-social a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.contact-split-social a:hover {
    background: var(--brand-amber);
    color: #21170a;
    transform: translateY(-2px);
}

.contact-split-form {
    flex: 1;
    padding: 46px 44px;
}

.contact-split-form h2 {
    font-weight: 700;
    margin-bottom: 6px;
}

.contact-split-form>p {
    color: #6b7387;
    font-size: 14px;
    margin-bottom: 24px;
}

@media (max-width: 991px) {
    .contact-split-card {
        flex-direction: column;
    }

    .contact-split-info,
    .contact-split-form {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .contact-split-info,
    .contact-split-form {
        padding: 32px 24px;
    }
}

.form-control {
    border: 1.5px solid #e8ecf5;
    border-radius: 10px;
    background: #f9fafc;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: var(--brand-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 77, 218, 0.1);
}

.form-group label {
    font-weight: 600;
    color: #33415c;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.human-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f4f7ff;
    border: 1px solid #e6ecfb;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 4px;
}

.human-check>i {
    color: var(--brand-blue);
    font-size: 20px;
    margin-top: 6px;
}

.human-check-field {
    flex: 1;
}

.human-check-field label {
    margin-bottom: 6px;
    display: block;
}

.human-check-field .form-control {
    background: #fff;
    max-width: 160px;
}

#submit-contact.btn_1 {
    display: inline-flex;
    align-items: center;
}

#submit-contact .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   CONTAINER WIDTH — Bootstrap's default caps .container at
   1140px, so on any normal desktop monitor (1920px is the most
   common) the page content sits in a narrow column with ~390px
   of dead gray gutter on each side while the full-bleed header
   and title bands stretch edge to edge above it. Widen the
   container on larger screens so the two agree.
   ============================================================ */
@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1380px;
    }
}



/* ===== Quick search: optional "Transporters" multi-select ===== */
.hero-search-row .ms-group { position: relative; flex: 1; min-width: 0; }
.hero-search-row .ms-group.open { z-index: 60; }
.ms-toggle:focus, .ms-toggle:focus-visible { outline: none; box-shadow: none; }
.ms-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 14.5px; font-weight: 600; color: #222; text-align: left;
}
.ms-toggle .ms-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-toggle .ms-text.ms-placeholder { color: #96a0b5; }
.ms-toggle i { font-size: 11px; color: #96a0b5; transition: transform .2s ease; flex-shrink: 0; }
.ms-group.open .ms-toggle i { transform: rotate(180deg); }
.ms-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50;
    min-width: 260px; background: #fff; border: 1.5px solid #e8ecf5; border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 10, 40, .25); padding: 10px; display: none;
}
.ms-group.open .ms-panel { display: block; }
.search-section.ms-open { overflow-x: clip; overflow-y: visible; z-index: 100; }
.hero-search-group .ms-panel input.ms-filter {
    width: 100%; padding: 9px 12px; border: 1.5px solid #e8ecf5; border-radius: 10px;
    background: #f7f9fc; font-size: 13.5px; font-weight: 500; margin-bottom: 8px;
}
.ms-list { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ms-list li { margin: 0; padding: 0; }
.ms-list label {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 8px;
    cursor: pointer; font-size: 13.5px; font-weight: 600; color: #222; text-transform: none; letter-spacing: 0;
}
.ms-list label:hover { background: #f0f4ff; }
.hero-search-group .ms-list input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; margin: 0; accent-color: var(--brand-blue); }
.ms-empty { padding: 10px; font-size: 13px; color: #96a0b5; display: none; }
.ms-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef1f8; }
.ms-actions button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.ms-actions .ms-clear { color: #96a0b5; }
.ms-actions .ms-done { background: var(--brand-blue); color: #fff; }
@media (max-width: 767px) { .ms-panel { min-width: 0; } }