/* =====================================================
   EAGLETRANSPORT
   RESPONSIVE
===================================================== */


/* =====================================================
   PREMIUM INTRO RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .intro-truck {

        width: 105vw;

        top: 48%;

    }


    .intro-brand {

        width: min(
            68vw,
            310px
        );

    }


    .intro-streak-1 {

        width: 60vw;

    }


    .intro-streak-2 {

        width: 80vw;

    }


    .intro-streak-3 {

        width: 52vw;

    }


    .intro-streak-4 {

        width: 42vw;

    }


    .intro-skip {

        right: 20px;

        bottom:
            max(
                20px,
                env(safe-area-inset-bottom)
            );

    }

}


@media (max-width: 480px) {

    .intro-truck {

        width: 125vw;

    }


    .intro-brand {

        width: 72vw;

        max-width: 275px;

    }


    .intro-transition-beam {

        right: 7%;

    }

}


/* Si el usuario prefiere menos movimiento */

@media (prefers-reduced-motion: reduce) {

    .site-intro {

        display: none !important;

    }

}

/* =====================================================
   1200 PX
===================================================== */

@media (max-width: 1200px) {

    .main-nav {

        gap: 22px;

    }


    .hero-truck {

        width: 67%;

    }


    .hero-content {

        max-width: 690px;

    }

}


/* =====================================================
   1050 PX
===================================================== */

@media (max-width: 1050px) {

    .main-nav,
    .header-cta {

        display: none;

    }


    .menu-toggle {

        display: flex;

    }


    /* MOBILE MENU */

    .mobile-menu {

        position: fixed;

        top: 94px;

        left: 0;

        width: 100%;

        height: calc(100vh - 94px);

        padding: 40px var(--container-padding);

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        background-color: rgba(5,5,5,0.98);

        backdrop-filter: blur(20px);

        opacity: 0;

        visibility: hidden;

        transform: translateY(-15px);

        transition:
            opacity var(--transition-normal),
            visibility var(--transition-normal),
            transform var(--transition-normal);

    }


    .site-header.scrolled .mobile-menu {

        top: 76px;

        height: calc(100vh - 76px);

    }


    .mobile-menu.active {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }


    .mobile-nav {

        display: flex;

        flex-direction: column;

    }


    .mobile-nav a {

        padding: 15px 0;

        border-bottom: 1px solid rgba(255,255,255,0.08);

        color: var(--color-white);

        font-family: var(--font-heading);

        font-size: 2rem;

        font-weight: 600;

        text-transform: uppercase;

    }


    .mobile-cta {

        width: 100%;

    }


    body.menu-open {

        overflow: hidden;

    }

}


/* =====================================================
   900 PX
===================================================== */

@media (max-width: 900px) {

    :root {

        --section-space: 90px;

    }


    .hero {

        min-height: 850px;

        align-items: flex-end;

    }


    .hero-truck {

        top: 0;

        width: 100%;

        height: 58%;

    }


    .hero-image-overlay {

        background:

            linear-gradient(
                0deg,

                #050505 0%,

                #050505 34%,

                rgba(5,5,5,0.78) 52%,

                rgba(5,5,5,0.20) 82%
            );

    }


    .hero-container {

        padding-top: 440px;

        padding-bottom: 90px;

    }


    .hero-content {

        max-width: 650px;

    }


    .hero h1 {

        font-size: clamp(
            4rem,
            13vw,
            6.5rem
        );

    }


    .scroll-indicator {

        display: none;

    }


    .hero-side-text {

        display: none;

    }

}


/* =====================================================
   768 PX
===================================================== */

@media (max-width: 768px) {

    :root {

        --container-padding: 22px;

        --section-space: 78px;

    }


    .header-inner {

        height: 78px;

    }


    .brand-text {

        font-size: 1.6rem;

    }


    .hero {

        min-height: auto;

    }


    .hero-container {

        padding-top: 390px;

        padding-bottom: 75px;

    }


    .hero-truck {

        height: 470px;

    }


    .hero h1 {

        font-size: clamp(
            3.6rem,
            15vw,
            5rem
        );

    }


    .hero-description {

        font-size: 0.94rem;

    }


    .hero-actions {

        flex-direction: column;

    }


    .hero-actions .btn {

        width: 100%;

    }


    .hero-features {

        gap: 25px;

    }


    .section-heading h2 {

        font-size: clamp(
            3rem,
            13vw,
            4.3rem
        );

    }

}


/* =====================================================
   576 PX
===================================================== */

@media (max-width: 576px) {

    :root {

        --container-padding: 18px;

    }


    .hero-container {

        padding-top: 340px;

        padding-bottom: 65px;

    }


    .hero-truck {

        height: 410px;

    }


    .hero h1 {

        font-size: clamp(
            3.2rem,
            16vw,
            4.2rem
        );

    }


    .hero-title-gold {

        margin-top: 10px;

    }


    .hero-tag {

        font-size: 0.60rem;

    }


    .hero-features {

        flex-direction: column;

        gap: 18px;

        margin-top: 38px;

    }


    .section-tag {

        font-size: 0.63rem;

    }


    .section-tag::before {

        width: 24px;

    }

}
/* =====================================================
   TRUST + ABOUT
===================================================== */


@media (max-width: 1050px) {

    .trust-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .trust-heading > p {

        max-width: 650px;

    }


    .about-grid {

        gap: 60px;

    }


    .about-decoration {

        font-size: 34rem;

    }

}


@media (max-width: 900px) {

    .trust-grid {

        grid-template-columns: 1fr;

    }


    .trust-card {

        min-height: auto;

        padding: 40px;

        border-right: 1px solid rgba(255,255,255,0.09);

        border-left: 1px solid rgba(255,255,255,0.09);

        border-bottom: 1px solid rgba(255,255,255,0.09);

    }


    .trust-icon {

        margin-bottom: 35px;

    }


    .about-section {

        padding: 110px 0;

    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 75px;

    }


    .about-visual {

        width: 100%;

        max-width: 650px;

        min-height: 590px;

    }


    .about-image {

        height: 530px;

    }


    .about-content {

        max-width: 650px;

    }

}


@media (max-width: 768px) {

    .trust-section {

        padding: 80px 0;

    }


    .trust-heading {

        margin-bottom: 50px;

    }


    .trust-heading h2 {

        font-size: clamp(
            3rem,
            13vw,
            4.3rem
        );

    }


    .trust-card {

        padding: 35px 28px;

    }


    .about-section {

        padding: 90px 0;

    }


    .about-visual {

        min-height: 500px;

    }


    .about-image {

        width: calc(100% - 25px);

        height: 440px;

    }


    .about-gold-block {

        width: 45px;

        height: 160px;

    }


    .about-badge {

        width: 230px;

        min-height: 100px;

        padding: 18px;

    }


    .about-content h2 {

        font-size: clamp(
            3.5rem,
            14vw,
            4.8rem
        );

    }

}


@media (max-width: 576px) {

    .trust-card {

        padding: 32px 22px;

    }


    .trust-number {

        font-size: 3.2rem;

    }


    .about-visual {

        min-height: 425px;

    }


    .about-image {

        width: calc(100% - 15px);

        height: 365px;

    }


    .about-gold-block {

        top: 35px;

        width: 30px;

        height: 120px;

    }


    .about-badge {

        right: 0;

        bottom: 0;

        width: 210px;

    }


    .about-badge strong {

        font-size: 1.15rem;

    }

}

/* =====================================================
   SERVICES
===================================================== */

@media (max-width: 1050px) {

    .services-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .services-heading > p {

        max-width: 650px;

    }

}


@media (max-width: 900px) {

    .services-section {

        padding: 110px 0;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-card {

        min-height: 520px;

    }

}


@media (max-width: 768px) {

    .services-section {

        padding: 90px 0;

    }


    .services-heading {

        margin-bottom: 50px;

    }


    .services-heading h2 {

        font-size: clamp(
            3.2rem,
            13vw,
            4.5rem
        );

    }


    .service-card {

        min-height: 480px;

    }


    .service-content {

        padding: 30px;

    }


    .service-content h3 {

        font-size: 2rem;

    }

}


@media (max-width: 576px) {

    .service-card {

        min-height: 450px;

    }


    .service-content {

        padding: 24px;

    }


    .service-number {

        top: 22px;

        right: 22px;

    }


    .service-content h3 {

        font-size: 1.85rem;

    }

}

/* =====================================================
   FLEET
===================================================== */

@media (max-width: 1050px) {

    .fleet-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .fleet-heading > p {

        max-width: 650px;

    }


    .fleet-item {

        grid-template-columns: 1.1fr 0.9fr;

    }


    .fleet-info {

        padding: 50px 38px;

    }

}


@media (max-width: 900px) {

    .fleet-section {

        padding: 110px 0;

    }


    .fleet-selector {

        grid-template-columns: 1fr;

    }


    .fleet-tab {

        min-height: 70px;

        border-left: 1px solid rgba(255,255,255,0.10);

        border-bottom: 1px solid rgba(255,255,255,0.06);

    }


    .fleet-item,
    .fleet-item.active {

        grid-template-columns: 1fr;

    }


    .fleet-visual {

        min-height: 500px;

    }


    .fleet-image::after {

        background:

            linear-gradient(
                0deg,
                #0b0b0b 0%,
                transparent 30%
            );

    }


    .fleet-info {

        padding: 55px 45px;

    }

}


@media (max-width: 768px) {

    .fleet-section {

        padding: 90px 0;

    }


    .fleet-heading {

        margin-bottom: 50px;

    }


    .fleet-heading h2 {

        font-size: clamp(
            3.2rem,
            13vw,
            4.5rem
        );

    }


    .fleet-visual {

        min-height: 420px;

    }


    .fleet-visual-number {

        font-size: 8rem;

    }


    .fleet-info {

        padding: 45px 30px;

    }

}


@media (max-width: 576px) {

    .fleet-tab {

        padding: 0 20px;

    }


    .fleet-visual {

        min-height: 350px;

    }


    .fleet-info {

        padding: 38px 24px;

    }


    .fleet-info h3 {

        font-size: 3.2rem;

    }


    .fleet-cta {

        width: 100%;

    }

}

/* =====================================================
   COVERAGE + QUOTE + FOOTER
===================================================== */

@media (max-width: 1050px) {

    .coverage-grid {

        gap: 60px;

    }


    .quote-grid {

        gap: 60px;

    }


    .footer-top {

        grid-template-columns: repeat(3, 1fr);

        gap: 45px;

    }


    .footer-main {

        grid-column: 1 / -1;

        max-width: 460px;

    }


    .footer-column:last-child {

        grid-column: auto;

    }

}


@media (max-width: 900px) {

    .coverage-section,
    .quote-section {

        padding: 110px 0;

    }


    .coverage-grid {

        grid-template-columns: 1fr;

    }


    .coverage-content {

        max-width: 650px;

    }


    .map-frame {

        min-height: 600px;

    }


    .quote-grid {

        grid-template-columns: 1fr;

    }


    .quote-content {

        max-width: 650px;

    }

}


@media (max-width: 768px) {

    .coverage-section,
    .quote-section {

        padding: 90px 0;

    }


    .coverage-content h2,
    .quote-content h2 {

        font-size: clamp(
            3.3rem,
            13vw,
            4.5rem
        );

    }


    .map-frame {

        min-height: 500px;

    }


   @media (max-width: 768px) {

    .ecuador-network {

        inset: 28px;

    }


    .coverage-network-svg {

        max-width: 92%;

        max-height: 460px;

    }


    .node-label {

        font-size: 11px;

    }

}


@media (max-width: 576px) {

    .ecuador-network {

        inset: 20px;

    }


    .coverage-network-svg {

        max-width: 96%;

    }


    .node-label {

        font-size: 10px;

        letter-spacing: 1px;

    }

}


    .quote-form-wrapper {

        padding: 32px;

    }


    .form-row {

        grid-template-columns: 1fr;

    }


    .footer-top {

        grid-template-columns: repeat(2, 1fr);

        gap: 45px;

        padding-bottom: 50px;

    }


    .footer-main {

        grid-column: 1 / -1;

    }


    .footer-column:last-child {

        grid-column: auto;

    }

}


@media (max-width: 576px) {

    .map-frame {

        min-height: 420px;

    }





    .coverage-status {

        left: 18px;

        bottom: 18px;

    }


    .quote-form-wrapper {

        padding: 25px 20px;

    }


    .footer-top {

        grid-template-columns: 1fr;

        gap: 34px;

        padding-bottom: 42px;

    }


    .footer-main {

        grid-column: auto;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}

/* =====================================================
   FLOATING ACTIONS
===================================================== */

@media (max-width: 768px) {

    .floating-actions {

        right: 18px;

        bottom: 18px;

    }


    .floating-whatsapp {

        width: 50px;

        height: 50px;

        padding: 0;

        justify-content: center;

    }


    .floating-whatsapp span {

        display: none;

    }


    .back-to-top {

        width: 44px;

        height: 44px;

    }

}

/* =====================================================
   MOBILE MENU STAGGER
===================================================== */

@media (max-width: 1050px) {

    .mobile-nav a {
        opacity: 0;
        transform: translateY(12px);
    }

    .mobile-menu.active .mobile-nav a {
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity 0.4s ease,
            transform 0.4s ease;
    }

    .mobile-menu.active .mobile-nav a:nth-child(1) { transition-delay: 0.05s; }
    .mobile-menu.active .mobile-nav a:nth-child(2) { transition-delay: 0.10s; }
    .mobile-menu.active .mobile-nav a:nth-child(3) { transition-delay: 0.15s; }
    .mobile-menu.active .mobile-nav a:nth-child(4) { transition-delay: 0.20s; }
    .mobile-menu.active .mobile-nav a:nth-child(5) { transition-delay: 0.25s; }
    .mobile-menu.active .mobile-nav a:nth-child(6) { transition-delay: 0.30s; }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }

    .hero-tag,
    .hero h1,
    .hero-description,
    .hero-actions,
    .hero-features {
        opacity: 1;
        transform: none;
    }

}


/* Keep the mobile panel aligned with the shorter phone header */
@media (max-width: 768px) {

    .site-header:not(.scrolled) .mobile-menu {
        top: 78px;
        height: calc(100vh - 78px);
    }

}

/* =====================================================
   BRAND RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .brand {

        width: 180px;

        height: 56px;

    }


    .site-header.scrolled .brand {

        width: 165px;

        height: 52px;

    }


    .brand-speed-lines {

        left: -45px;

        width: 90px;

    }


    .brand-speed-lines span:nth-child(1) {

        width: 70px;

    }


    .brand-speed-lines span:nth-child(2) {

        width: 90px;

    }


    .brand-speed-lines span:nth-child(3) {

        width: 55px;

    }

}


@media (max-width: 420px) {

    .brand {

        width: 155px;

    }


    .site-header.scrolled .brand {

        width: 145px;

    }

}

/* =====================================================
   BRAND DECORATIONS RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .about-decoration {

        width: 380px;

        right: -140px;

        opacity: 0.018;

    }


    .footer-eagle {

        width: 320px;

        right: -120px;

        opacity: 0.018;

    }


    .footer-logo {

        width: 200px;

    }

}


@media (max-width: 480px) {

    .about-decoration {

        display: none;

    }


    .footer-eagle {

        width: 260px;

    }

}

/* =====================================================
   EAGLETRANSPORT
   FINAL RESPONSIVE POLISH
===================================================== */


/* =====================================================
   LARGE LAPTOPS
   1025px - 1280px
===================================================== */

@media (max-width: 1280px) {

    .container {
        width: min(
            calc(100% - 56px),
            var(--container-width)
        );
    }


    .hero-content {
        max-width: 650px;
    }


    .hero h1 {
        font-size: clamp(
            4.4rem,
            7vw,
            6.7rem
        );
    }


    .about-grid,
    .coverage-grid,
    .quote-grid {
        gap: 70px;
    }


    .service-card {
        min-height: 530px;
    }

}


/* =====================================================
   TABLET LANDSCAPE
   <= 1050px
===================================================== */

@media (max-width: 1050px) {

    /*
       HEADER
    */

    .header-inner {
        gap: 20px;
    }


    .brand {
        width: 200px;
    }


    /*
       HERO
    */

    .hero-content {
        max-width: 610px;
    }


    /*
       SECTION HEADINGS
    */

    .trust-heading,
    .services-heading,
    .fleet-heading {
        margin-bottom: 55px;
    }


    /*
       ABOUT
    */

    .about-grid {
        gap: 55px;
    }


    /*
       FLEET
    */

    .fleet-item {
        min-height: 600px;
    }


    /*
       COVERAGE
    */

    .coverage-grid {
        gap: 55px;
    }


    /*
       QUOTE
    */

    .quote-grid {
        gap: 55px;
    }

}


/* =====================================================
   TABLET PORTRAIT
   <= 900px
===================================================== */

@media (max-width: 900px) {

    /*
       GLOBAL
    */

    .container {
        width: min(
            calc(100% - 44px),
            var(--container-width)
        );
    }


    /*
       HERO
    */

    .hero {
        min-height: 820px;
    }


    .hero-truck {
        height: 55%;
    }


    .hero-truck img {
        object-position: 62% center;
    }


    .hero-container {
        padding-top: 415px;
        padding-bottom: 85px;
    }


    .hero-content {
        max-width: 620px;
    }


    .hero-features {
        max-width: 530px;
    }


    /*
       TRUST
    */

    .trust-card {
        min-height: 260px;
    }


    /*
       ABOUT
    */

    .about-visual {
        margin-inline: auto;
    }


    /*
       SERVICES
    */

    .services-grid {
        max-width: 720px;
        margin-inline: auto;
    }


    /*
       FLEET
    */

    .fleet-item {
        min-height: 0;
    }


    .fleet-visual {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }


    /*
       COVERAGE
    */

    .coverage-content {
        max-width: 620px;
    }


    .coverage-map {
        max-width: 720px;
        width: 100%;
        margin-inline: auto;
    }


    /*
       QUOTE
    */

    .quote-content {
        max-width: 620px;
    }


    .quote-form-wrapper {
        max-width: 720px;
        width: 100%;
    }

}


/* =====================================================
   MOBILE
   <= 768px
===================================================== */

@media (max-width: 768px) {

    /*
       GLOBAL
    */

    .container {
        width: calc(100% - 40px);
    }


    /*
       HEADER
    */

    .header-inner {
        height: 78px;
    }


    .brand {
        width: 172px;
        height: auto;
    }


    .site-header.scrolled .brand {
        width: 158px;
        height: auto;
    }


    .menu-toggle {
        flex-shrink: 0;
    }


    /*
       MOBILE MENU
    */

    .mobile-menu {
        padding:
            32px
            20px
            max(28px, env(safe-area-inset-bottom));
    }


    .mobile-nav a {
        padding: 14px 0;
        font-size: 1.85rem;
    }


    /*
       HERO
    */

    .hero {
        min-height: 760px;
    }


    .hero-truck {
        height: 420px;
    }


    .hero-truck img {
        object-position: 66% center;
    }


    .hero-container {
        padding-top: 335px;
        padding-bottom: 68px;
    }


    .hero-content {
        width: 100%;
    }


    .hero-tag {
        margin-bottom: 18px;
    }


    .hero h1 {
        font-size: clamp(
            3.25rem,
            14.5vw,
            4.7rem
        );

        line-height: 0.88;
    }


    .hero-title-gold {
        margin-top: 9px;
    }


    .hero-description {

    max-width: 520px;

    margin-top: 30px;

    margin-bottom: 0;

    color: #b6b6b6;

    font-size: 0.94rem;

    line-height: 1.8;
}


    .hero-actions {
        margin-top: 30px;
    }


    .hero-features {
        margin-top: 38px;
        padding-top: 22px;
    }


    /*
       SECTION TITLES
    */

    .trust-heading h2,
    .services-heading h2,
    .fleet-heading h2,
    .coverage-content h2,
    .quote-content h2,
    .about-content h2 {

        font-size: clamp(
            3rem,
            12.5vw,
            4.15rem
        );

        line-height: 0.96;
    }


    /*
       TRUST
    */

    .trust-card {
        min-height: 0;
    }


    .trust-card h3 {
        font-size: 2rem;
    }


    /*
       ABOUT
    */

    .about-grid {
        gap: 58px;
    }


    .about-visual {
        min-height: 480px;
    }


    .about-image {
        height: 420px;
    }


    /*
       SERVICES
    */

    .service-card {
        min-height: 470px;
    }


    /*
       FLEET
    */

    .fleet-selector {
        margin-bottom: 25px;
    }


    .fleet-tab {
        min-height: 66px;
    }


    .fleet-visual {
        aspect-ratio: 4 / 3;
    }


    .fleet-info h3 {
        font-size: clamp(
            3rem,
            12vw,
            4rem
        );
    }


    /*
       COVERAGE
    */

    .map-frame {
        min-height: 480px;
    }


    /*
       QUOTE
    */

    .quote-form-wrapper {
        padding: 30px;
    }


    /*
       FOOTER
    */

    .site-footer {
        padding-top: 70px;
    }

}


/* =====================================================
   STANDARD MOBILE
   <= 576px
===================================================== */

@media (max-width: 576px) {

    /*
       GLOBAL
    */

    .container {
        width: calc(100% - 34px);
    }


    /*
       HEADER
    */

    .brand {
        width: 155px;
    }


    .site-header.scrolled .brand {
        width: 145px;
    }


    /*
       HERO
    */

    .hero {
        min-height: auto;
    }


    .hero-truck {
        height: 385px;
    }


    .hero-truck img {
        object-position: 68% center;
    }


    .hero-container {
        padding-top: 310px;
        padding-bottom: 60px;
    }


    .hero h1 {
        font-size: clamp(
            3rem,
            15.5vw,
            4rem
        );
    }


    .hero-description {
        font-size: 0.9rem;
    }


    .hero-actions .btn {
        min-height: 54px;
    }


    .hero-features {
        gap: 16px;
    }


    /*
       TRUST
    */

    .trust-section {
        padding: 72px 0;
    }


    .trust-heading {
        margin-bottom: 42px;
    }


    .trust-card {
        padding: 30px 22px;
    }


    .trust-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 28px;
    }


    /*
       ABOUT
    */

    .about-section {
        padding: 80px 0;
    }


    .about-visual {
        min-height: 405px;
    }


    .about-image {
        height: 345px;
    }


    .about-badge {
        width: 205px;
        min-height: 94px;
        padding: 16px;
    }


    .about-badge-icon {
        width: 42px;
        height: 42px;
    }


    .about-lead {
        font-size: 1rem !important;
    }


    /*
       SERVICES
    */

    .services-section {
        padding: 80px 0;
    }


    .service-card {
        min-height: 430px;
    }


    .service-content {
        padding: 22px;
    }


    .service-icon {
        width: 44px;
        height: 44px;
    }


    .service-content p {
        font-size: 0.8rem;
    }


    /*
       FLEET
    */

    .fleet-section {
        padding: 80px 0;
    }


    .fleet-tab {
        padding: 0 17px;
    }


    .fleet-visual {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }


    .fleet-info {
        padding: 34px 22px;
    }


    /*
       COVERAGE
    */

    .coverage-section {
        padding: 80px 0;
    }


    .map-frame {
        min-height: 410px;
    }


    .coverage-status {
        max-width: calc(100% - 36px);
    }


    /*
       QUOTE
    */

    .quote-section {
        padding: 80px 0;
    }


    .quote-form-wrapper {
        padding: 24px 19px;
    }


    .form-header strong {
        font-size: 1.7rem;
    }


    /*
       FOOTER
    */

    .footer-top {
        gap: 36px;
        padding-bottom: 50px;
    }


    .footer-main p {
        max-width: 320px;
    }


    .footer-bottom {
        gap: 10px;
    }

}


/* =====================================================
   SMALL MOBILE
   <= 420px
===================================================== */

@media (max-width: 420px) {

    /*
       GLOBAL
    */

    .container {
        width: calc(100% - 28px);
    }


    /*
       HEADER
    */

    .brand {
        width: 142px;
    }


    .site-header.scrolled .brand {
        width: 136px;
    }


    /*
       HERO
    */

    .hero-truck {
        height: 360px;
    }


    .hero-container {
        padding-top: 292px;
    }


    .hero h1 {
        font-size: clamp(
            2.8rem,
            15vw,
            3.7rem
        );
    }


    .hero-tag {
        font-size: 0.56rem;
        letter-spacing: 0.16em;
    }


    /*
       ABOUT
    */

    .about-visual {
        min-height: 380px;
    }


    .about-image {
        height: 325px;
    }


    /*
       SERVICES
    */

    .service-card {
        min-height: 410px;
    }


    /*
       FLEET
    */

    .fleet-info h3 {
        font-size: 2.85rem;
    }


    /*
       MAP
    */

    .map-frame {
        min-height: 380px;
    }


}

/* =====================================================
   HOVER ONLY DEVICES
===================================================== */

@media (hover: hover) and (pointer: fine) {

    .service-card:hover .service-image img {
        transform: scale(1.055);
    }


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


    .trust-card:hover .trust-line {
        width: 100%;
    }

}

/* =====================================================
   HERO SPACING FIX
===================================================== */

@media (max-width: 900px) {

    .hero-content {
        padding-left: 0;
    }

}

@media (min-width: 901px) {

    .hero-content {
        padding-left: 6px;
    }

}

/* =====================================================
   SERVICES PAGE RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .services-page-intro-grid,
    .services-page-cta-inner {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .service-detail-grid {

        gap: 55px;

    }

}


@media (max-width: 900px) {

    .services-page-hero {

        min-height: 650px;

    }


    .service-detail {

        padding: 100px 0;

    }


    .service-detail-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .service-detail-alt
    .service-detail-image,

    .service-detail-alt
    .service-detail-content {

        order: initial;

    }


    .service-detail-image {

        height: 500px;

    }

}


@media (max-width: 768px) {

    .services-page-hero {

        min-height: 620px;

    }


    .services-page-hero-content {

        padding-top: 100px;

    }


    .services-page-hero h1 {

        font-size: clamp(
            3.5rem,
            14vw,
            5rem
        );

    }


    .services-page-intro {

        padding: 90px 0;

    }


    .services-page-intro h2,
    .services-page-cta h2 {

        font-size: clamp(
            3rem,
            12vw,
            4.2rem
        );

    }


    .service-detail-image {

        height: 430px;

    }


    .service-detail-content h2 {

        font-size: clamp(
            3rem,
            12vw,
            4.2rem
        );

    }


    .services-page-cta {

        padding: 85px 0;

    }

}


@media (max-width: 576px) {

    .services-page-hero {

        min-height: 590px;

    }


    .services-page-hero-content p {

        font-size: 0.9rem;

    }


    .service-detail {

        padding: 80px 0;

    }


    .service-detail-image {

        height: 350px;

    }


    .service-detail-number {

        font-size: 6rem;

    }


    .service-detail-content .btn {

        width: 100%;

    }


    .services-page-cta-action .btn {

        width: 100%;

    }

}