/* Start custom CSS for html, class: .elementor-element-950b7a1 *//* =========================================================
   ACTIVE FREIGHT
   ENTREPOSAGE & LOGISTIQUE
   ========================================================= */

:root {
    --navy: #07182d;
    --dark-text: #172033;
    --muted-text: #4d5868;

    --orange: #f45118;
    --orange-dark: #ed4712;
    --orange-light: #ff6a31;

    --white: #ffffff;
    --border: rgba(20, 30, 45, 0.10);

    --hero-height: 756px;

    --content-width: 1355px;

    --radius-button: 17px;
    --radius-card: 23px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    color: var(--dark-text);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   HERO
   ========================================================= */

.logistics-hero {
    position: relative;

    width: 100%;
    min-height: var(--hero-height);

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.hero-background {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.99) 17%,
            rgba(255, 255, 255, 0.96) 29%,
            rgba(255, 255, 255, 0.76) 39%,
            rgba(255, 255, 255, 0.25) 51%,
            rgba(255, 255, 255, 0.00) 67%
        ),
        url("warehouse-bg.jpg");

    background-repeat: no-repeat;

    background-position:
        center,
        right center;

    background-size:
        cover,
        cover;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.hero-content {
    position: relative;

    z-index: 2;

    width: min(var(--content-width), calc(100% - 120px));

    margin: 0 auto;

    min-height: var(--hero-height);

    padding-top: 36px;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {
    display: flex;
    align-items: center;

    gap: 18px;

    height: 25px;

    font-size: 13px;
    font-weight: 500;

    color: #6c7480;
}

.breadcrumb a {
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--orange);
}

.breadcrumb-arrow {
    font-size: 25px;
    line-height: 1;

    color: #b4bac2;

    margin-top: -2px;
}

.breadcrumb-current {
    color: #a1a6ad;
}


/* =========================================================
   MAIN COPY
   ========================================================= */

.hero-copy {
    width: 530px;

    margin-top: 48px;
}


.hero-copy h1 {
    margin: 0;

    font-size: clamp(48px, 4.5vw, 64px);

    line-height: 0.98;

    letter-spacing: -2.7px;

    font-weight: 800;

    color: var(--navy);
}

.hero-copy h1 span {
    display: block;

    color: var(--orange);
}


/* =========================================================
   SUB HEADING
   ========================================================= */

.hero-copy h2 {
    margin: 27px 0 0;

    font-size: 30px;

    line-height: 1.25;

    letter-spacing: -0.8px;

    font-weight: 600;

    color: #111a2a;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.hero-copy p {
    width: 510px;

    margin: 25px 0 0;

    font-size: 16px;

    line-height: 1.82;

    font-weight: 400;

    color: #4d5562;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 47px;

    margin-top: 31px;
}


.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 55px;

    border-radius: var(--radius-button);

    padding: 0 25px;

    font-size: 15px;

    font-weight: 600;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.btn:hover {
    transform: translateY(-2px);
}


/* Primary */

.btn-primary {
    min-width: 228px;

    gap: 22px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        var(--orange) 0%,
        #f95c1e 100%
    );

    box-shadow:
        0 8px 22px rgba(244, 81, 24, 0.17);
}


.btn-primary:hover {
    background: var(--orange-dark);

    box-shadow:
        0 11px 27px rgba(244, 81, 24, 0.25);
}


.btn-arrow {
    font-size: 23px;

    line-height: 1;

    font-weight: 400;
}


/* Secondary */

.btn-secondary {
    min-width: 195px;

    color: #e95522;

    border: 1.5px solid rgba(239, 87, 35, 0.45);

    background: rgba(255, 255, 255, 0.72);
}


.btn-secondary:hover {
    background: #ffffff;

    border-color: var(--orange);
}


/* =========================================================
   FEATURES CARD
   ========================================================= */

.features-card {
    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: 34px;

    transform: translateX(-50%);

    width: min(925px, calc(100% - 80px));

    min-height: 116px;

    display: grid;

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

    align-items: center;

    padding: 12px 24px;

    border-radius: var(--radius-card);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 13px 35px rgba(31, 45, 65, 0.11);

    backdrop-filter: blur(12px);
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

.feature {
    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 70px;

    padding: 0 25px;
}


/* Separators */

.feature:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 8px;
    right: 0;

    width: 1px;

    height: 54px;

    background: #e2e3e5;
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.feature-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;
}

.feature-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: var(--orange);

    stroke-width: 2.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   FEATURE TEXT
   ========================================================= */

.feature-text {
    display: flex;

    flex-direction: column;

    gap: 4px;

    font-size: 13px;

    line-height: 1.3;
}

.feature-text strong {
    font-weight: 700;

    color: #171c25;
}

.feature-text span {
    font-weight: 500;

    color: #2e3440;
}


/* =========================================================
   RIGHT INFO CARD
   ========================================================= */

.warehouse-info {
    position: absolute;

    z-index: 6;

    right: 4.8%;

    bottom: 34px;

    width: 355px;

    min-height: 137px;

    display: flex;

    align-items: center;

    gap: 23px;

    padding: 20px 27px;

    border-radius: 21px;

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 12px 35px rgba(31, 45, 65, 0.13);

    backdrop-filter: blur(12px);
}


/* =========================================================
   WAREHOUSE ICON
   ========================================================= */

.warehouse-icon {
    flex: 0 0 60px;

    width: 60px;
    height: 60px;
}

.warehouse-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: var(--orange);

    stroke-width: 2.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   WAREHOUSE COPY
   ========================================================= */

.warehouse-copy h3 {
    margin: 0;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;

    color: #172033;
}

.warehouse-copy p {
    margin: 7px 0 0;

    font-size: 12px;

    line-height: 1.55;

    font-weight: 400;

    color: #626a75;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (max-width: 1350px) {

    .hero-content {
        width: calc(100% - 100px);
    }

    .warehouse-info {
        right: 3%;
        width: 330px;
    }

    .features-card {
        width: 870px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .logistics-hero {
        min-height: 720px;
    }

    .hero-content {
        width: calc(100% - 70px);

        min-height: 720px;

        padding-top: 28px;
    }

    .hero-copy {
        width: 480px;

        margin-top: 42px;
    }

    .hero-copy h1 {
        font-size: 53px;
    }

    .hero-copy h2 {
        font-size: 26px;
    }

    .hero-copy p {
        width: 455px;

        font-size: 15px;
    }

    .features-card {
        width: calc(100% - 70px);

        bottom: 25px;
    }

    .feature {
        padding: 0 14px;

        gap: 11px;
    }

    .feature-icon {
        flex-basis: 36px;

        width: 36px;
        height: 36px;
    }

    .warehouse-info {
        display: none;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .logistics-hero {
        min-height: 900px;
    }

    .hero-background {
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 255, 255, 0.94) 45%,
                rgba(255, 255, 255, 0.55) 75%,
                rgba(255, 255, 255, 0.20) 100%
            ),
            url("warehouse-bg.jpg");

        background-position:
            center,
            70% center;
    }

    .hero-content {
        width: calc(100% - 48px);

        min-height: auto;

        margin: 0 auto;
    }

    .hero-copy {
        width: 100%;

        margin-top: 45px;
    }

    .hero-copy h1 {
        font-size: 50px;
    }

    .hero-copy p {
        width: min(500px, 100%);
    }

    .features-card {
        bottom: 25px;

        width: calc(100% - 48px);

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

        padding: 15px;
    }

    .feature {
        min-height: 65px;
    }

    .feature:nth-child(2)::after {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .logistics-hero {
        min-height: auto;

        padding-bottom: 35px;
    }

    .hero-background {
        min-height: 100%;

        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.98) 0%,
                rgba(255,255,255,0.96) 50%,
                rgba(255,255,255,0.65) 75%,
                rgba(255,255,255,0.30) 100%
            ),
            url("warehouse-bg.jpg");

        background-position:
            center,
            72% center;

        background-size:
            cover,
            auto 100%;
    }

    .hero-content {
        width: calc(100% - 32px);

        padding-top: 20px;
    }


    /* Breadcrumb */

    .breadcrumb {
        gap: 9px;

        flex-wrap: wrap;

        font-size: 11px;
    }

    .breadcrumb-arrow {
        font-size: 19px;
    }


    /* Copy */

    .hero-copy {
        margin-top: 38px;
    }

    .hero-copy h1 {
        font-size: 42px;

        line-height: 1;

        letter-spacing: -1.8px;
    }

    .hero-copy h2 {
        margin-top: 21px;

        font-size: 23px;

        line-height: 1.3;
    }

    .hero-copy p {
        margin-top: 18px;

        width: 100%;

        font-size: 14px;

        line-height: 1.7;
    }


    /* Buttons */

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 25px;
    }

    .btn {
        width: 100%;

        height: 54px;
    }


    /* Features */

    .features-card {
        position: relative;

        left: auto;
        bottom: auto;

        transform: none;

        width: calc(100% - 32px);

        margin: 150px auto 0;

        grid-template-columns: 1fr;

        border-radius: 19px;

        padding: 10px 15px;
    }

    .feature {
        min-height: 62px;

        padding: 0 8px;
    }

    .feature:not(:last-child)::after {
        top: auto;
        right: 10%;

        bottom: 0;

        width: 80%;

        height: 1px;
    }

    .feature:nth-child(2)::after {
        display: block;
    }

    .feature-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

    .feature-text {
        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .hero-copy h1 {
        font-size: 36px;
    }

    .hero-copy h2 {
        font-size: 21px;
    }

    .hero-copy p {
        font-size: 13px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-762efeb0 *//* =========================================================
   ACTIVE FREIGHT
   ENTREPOSAGE & LOGISTIQUE
   SERVICES SECTION
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --orange: #f0521d;
    --orange-dark: #e94a16;

    --navy: #07172b;
    --text: #171d29;
    --muted: #555d68;

    --border: #ececec;

    --card-radius: 16px;

}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    background: #ffffff;

    color: var(--text);

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   MAIN SECTION
   ========================================================= */

.logistics-services {

    width: 100%;

    max-width: 1496px;

    min-height: 632px;

    margin: 0 auto;

    padding:
        38px
        74px
        42px;

    background: #ffffff;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading {

    text-align: center;

    margin-bottom: 37px;
}


/* Small orange title */

.section-label {

    margin-bottom: 8px;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    color: var(--orange);
}


/* Main title */

.section-heading h1 {

    margin: 0;

    font-size: 35px;

    line-height: 1.15;

    letter-spacing: -1.15px;

    font-weight: 700;

    color: var(--navy);
}

.section-heading h1 span {

    color: var(--orange);

}


/* =========================================================
   MAIN TWO COLUMN LAYOUT
   ========================================================= */

.services-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(0, 1fr);

    column-gap: 36px;

    align-items: start;

}


/* =========================================================
   COLUMNS
   ========================================================= */

.secure-storage,
.custom-logistics {

    min-width: 0;

}


/* =========================================================
   COLUMN HEADINGS
   ========================================================= */

.column-heading {

    margin-bottom: 22px;

}

.column-heading h2 {

    margin: 0 0 8px;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

    color: var(--orange);

}

.column-heading p {

    margin: 0;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;

    color: #272d36;

}


/* =========================================================
   VERTICAL DIVIDER
   ========================================================= */

.vertical-divider {

    width: 1px;

    height: 447px;

    margin-top: 1px;

    background:
        #ededed;

}


/* =========================================================
   STORAGE CARD
   ========================================================= */

.storage-card {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    width: 100%;

    min-height: 351px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #fff8f3 100%
        );

}


/* =========================================================
   STORAGE IMAGE
   ========================================================= */

.storage-image {

    width: 100%;

    height: 351px;

    overflow: hidden;

    border-radius:
        14px
        0
        0
        14px;

}

.storage-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.4s ease;

}

.storage-card:hover .storage-image img {

    transform: scale(1.025);

}


/* =========================================================
   STORAGE BENEFITS
   ========================================================= */

.storage-benefits {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 22px;

    padding:
        22px
        25px;

}


/* =========================================================
   BENEFIT
   ========================================================= */

.benefit {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 500;

    color: #242b35;

}


/* Check */

.check {

    flex: 0 0 auto;

    margin-top: 1px;

    font-size: 17px;

    line-height: 1;

    font-weight: 700;

    color: var(--orange);

}


/* =========================================================
   RIGHT SERVICES GRID
   ========================================================= */

.services-grid {

    display: grid;

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

    gap: 14px;

}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.service-card {

    min-height: 106px;

    display: flex;

    align-items: center;

    gap: 19px;

    padding:
        15px
        20px;

    border:
        1px solid #eeeeee;

    border-radius:
        var(--card-radius);

    background:
        #ffffff;

    box-shadow:
        0 2px 8px rgba(20, 30, 45, 0.025);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


/* Hover */

.service-card:hover {

    border-color:
        rgba(240, 82, 29, 0.22);

    box-shadow:
        0 8px 22px rgba(30, 40, 55, 0.06);

    transform:
        translateY(-2px);

}


/* =========================================================
   WIDE E-COMMERCE CARD
   ========================================================= */

.service-card-wide {

    grid-column:
        1 / -1;

    min-height: 106px;

}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.service-icon {

    flex:
        0 0 43px;

    width: 43px;

    height: 43px;

}


/* SVG */

.service-icon svg {

    width: 100%;

    height: 100%;

    fill: none;

    stroke:
        var(--orange);

    stroke-width:
        2.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   SERVICE CONTENT
   ========================================================= */

.service-content {

    min-width: 0;

}


.service-content h3 {

    margin: 0 0 6px;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 700;

    color: #171d29;

}


.service-content p {

    margin: 0;

    font-size: 11.5px;

    line-height: 1.55;

    font-weight: 400;

    color: #5d646e;

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (max-width: 1250px) {

    .logistics-services {

        padding-left: 55px;
        padding-right: 55px;

    }

    .services-layout {

        column-gap: 28px;

    }

    .storage-benefits {

        padding-left: 18px;
        padding-right: 18px;

    }

    .benefit {

        gap: 10px;

        font-size: 11px;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1050px) {

    .logistics-services {

        padding:
            35px
            35px
            45px;

    }

    .section-heading h1 {

        font-size: 31px;

    }

    .services-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        column-gap: 25px;

    }

    .vertical-divider {

        display: none;

    }

    .storage-card {

        grid-template-columns: 1fr;

    }

    .storage-image {

        height: 245px;

        border-radius:
            14px
            14px
            0
            0;

    }

    .storage-benefits {

        padding: 22px;

        gap: 15px;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .logistics-services {

        min-height: auto;

        padding:
            40px
            25px
            50px;

    }

    .section-heading {

        margin-bottom: 35px;

    }

    .section-heading h1 {

        font-size: 29px;

        line-height: 1.25;

    }

    .services-layout {

        display: flex;

        flex-direction: column;

        gap: 45px;

    }

    .secure-storage,
    .custom-logistics {

        width: 100%;

    }

    .storage-card {

        grid-template-columns:
            1fr
            1fr;

    }

    .storage-image {

        height: 330px;

        border-radius:
            14px
            0
            0
            14px;

    }

    .storage-benefits {

        justify-content: center;

        padding:
            20px;

    }

    .vertical-divider {

        display: none;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .logistics-services {

        padding:
            35px
            18px
            45px;

    }


    /* Heading */

    .section-label {

        font-size: 13px;

    }

    .section-heading h1 {

        font-size: 25px;

        letter-spacing: -0.7px;

    }


    /* Columns */

    .services-layout {

        gap: 40px;

    }


    /* Column title */

    .column-heading {

        margin-bottom: 18px;

    }

    .column-heading h2 {

        font-size: 15px;

    }

    .column-heading p {

        font-size: 13px;

    }


    /* Storage */

    .storage-card {

        display: flex;

        flex-direction: column;

    }

    .storage-image {

        height: 250px;

        border-radius:
            14px
            14px
            0
            0;

    }

    .storage-benefits {

        gap: 17px;

        padding:
            23px 20px;

    }

    .benefit {

        font-size: 12px;

    }


    /* Services */

    .services-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .service-card,
    .service-card-wide {

        grid-column: auto;

        min-height: 100px;

        padding:
            16px;

    }

    .service-icon {

        flex-basis: 40px;

        width: 40px;

        height: 40px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .section-heading h1 {

        font-size: 22px;

    }

    .storage-image {

        height: 220px;

    }

    .service-card {

        gap: 13px;

    }

    .service-content h3 {

        font-size: 14px;

    }

    .service-content p {

        font-size: 11px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3e7923d1 *//* =========================================================
   ACTIVE FREIGHT
   UN ACCOMPAGNEMENT GLOBAL
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --orange: #ef501b;
    --orange-dark: #e84915;

    --navy: #07182d;

    --text: #242a33;
    --muted: #555d67;

    --soft-bg: #fff5f0;

    --white: #ffffff;

}


/* =========================================================
   RESET
   ========================================================= */

* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

}


body {

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    background:
        #ffffff;

    color:
        var(--text);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


/* =========================================================
   MAIN SECTION
   ========================================================= */

.global-support {

    width: 100%;

    padding:
        44px
        58px;

    background:
        #ffffff;

}


/* =========================================================
   INNER CONTAINER
   ========================================================= */

.support-inner {

    position: relative;

    width: 100%;

    max-width: 1380px;

    min-height: 315px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        390px
        1fr;

    align-items: center;

    gap: 55px;

    padding:
        42px
        54px;

    overflow: hidden;

    border-radius: 22px;


    /* =========================================
       NEW BACKGROUND IMAGE
       ========================================= */

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.86) 34%,
            rgba(255,255,255,0.48) 63%,
            rgba(255,255,255,0.24) 100%
        ),

        url("https://activefreight.fr/wp-content/uploads/2026/08/Une-chaine-logistique-integree-%E2%80%94-De-la-reception-a-lexpedition.png");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

}


/* =========================================================
   SUBTLE BACKGROUND DECORATION
   ========================================================= */

.support-inner::before {

    content: "";

    position: absolute;

    width: 440px;

    height: 440px;

    top: -240px;

    right: 230px;

    border-radius: 50%;

    border:
        1px solid
        rgba(239,80,27,0.045);

    pointer-events:
        none;

}


.support-inner::after {

    content: "";

    position: absolute;

    width: 580px;

    height: 260px;

    right: 30px;

    bottom: -220px;

    border-radius: 50%;

    border:
        1px solid
        rgba(239,80,27,0.04);

    pointer-events:
        none;

}


/* =========================================================
   INTRO
   ========================================================= */

.support-intro {

    position: relative;

    z-index: 2;

    width: 100%;

}


/* =========================================================
   LABEL
   ========================================================= */

.support-label {

    margin-bottom: 13px;

    font-size: 14px;

    line-height: 1;

    font-weight: 700;

    color:
        var(--orange);

}


/* =========================================================
   TITLE
   ========================================================= */

.support-intro h2 {

    margin: 0;

    font-size: 33px;

    line-height: 1.18;

    letter-spacing: -1.1px;

    font-weight: 700;

    color:
        var(--navy);

}


.support-intro h2 span {

    color:
        var(--orange);

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.support-intro p {

    margin:
        12px
        0
        17px;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 400;

    color:
        #4d555f;

}


/* =========================================================
   BUTTON
   ========================================================= */

.support-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    height: 45px;

    min-width: 280px;

    padding:
        0
        23px;

    border:
        1.5px solid
        rgba(239,80,27,0.42);

    border-radius:
        13px;

    background:
        rgba(255,255,255,0.72);

    color:
        var(--orange);

    font-size: 14px;

    font-weight: 600;

    transition:
        all 0.2s ease;

}


.support-button:hover {

    background:
        var(--orange);

    border-color:
        var(--orange);

    color:
        #ffffff;

    transform:
        translateY(-1px);

}


/* =========================================================
   ARROW
   ========================================================= */

.button-arrow {

    font-size: 20px;

    line-height: 1;

    font-weight: 400;

}


/* =========================================================
   PROCESS
   ========================================================= */

.support-process {

    position: relative;

    z-index: 2;

    width: 100%;

    display: grid;

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

    align-items: start;

}


/* =========================================================
   STEP
   ========================================================= */

.process-step {

    position: relative;

    min-width: 0;

    text-align: center;

}


/* =========================================================
   TOP AREA
   ========================================================= */

.step-top {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 85px;

}


/* =========================================================
   ICON CIRCLE
   ========================================================= */

.step-icon {

    position: relative;

    z-index: 2;

    width: 82px;

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.90);

    box-shadow:
        0 2px 10px
        rgba(90,50,30,0.025);

}


/* =========================================================
   SVG ICON
   ========================================================= */

.step-icon svg {

    width: 47px;

    height: 47px;

    fill: none;

    stroke:
        var(--orange);

    stroke-width:
        2.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   PROCESS ARROW
   ========================================================= */

.process-arrow {

    position: absolute;

    z-index: 1;

    top: 39px;

    right: -7px;

    font-size: 34px;

    line-height: 1;

    font-weight: 300;

    color:
        var(--orange);

}


/* =========================================================
   DOTTED CONNECTOR
   ========================================================= */

.process-step:not(.process-last)::after {

    content: "";

    position: absolute;

    top: 40px;

    left:
        calc(50% + 41px);

    width:
        calc(100% - 82px);

    border-top:
        1px dotted
        rgba(239,80,27,0.35);

    z-index: 0;

}


/* =========================================================
   STEP TITLE
   ========================================================= */

.process-step h3 {

    margin:
        12px
        0
        9px;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    color:
        #171d29;

}


/* =========================================================
   STEP DESCRIPTION
   ========================================================= */

.process-step p {

    margin: 0;

    font-size: 12px;

    line-height: 1.6;

    font-weight: 400;

    color:
        #555c65;

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (max-width: 1250px) {

    .global-support {

        padding:
            35px
            35px;

    }


    .support-inner {

        grid-template-columns:
            340px
            1fr;

        gap: 30px;

        padding:
            35px
            35px;

    }


    .support-intro h2 {

        font-size: 29px;

    }


    .step-icon {

        width: 75px;

        height: 75px;

    }


    .step-icon svg {

        width: 43px;

        height: 43px;

    }


    .process-arrow {

        right: -10px;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1050px) {

    .support-inner {

        grid-template-columns:
            300px
            1fr;

        gap: 25px;

        padding:
            30px;

    }


    .support-intro h2 {

        font-size: 27px;

    }


    .support-intro p {

        font-size: 13px;

    }


    .support-button {

        min-width: 245px;

        font-size: 13px;

    }


    .step-icon {

        width: 68px;

        height: 68px;

    }


    .step-icon svg {

        width: 39px;

        height: 39px;

    }


    .process-arrow {

        font-size: 29px;

        top: 33px;

    }


    .process-step:not(.process-last)::after {

        top: 34px;

    }


    .process-step h3 {

        font-size: 14px;

    }


    .process-step p {

        font-size: 11px;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .global-support {

        padding:
            25px
            20px;

    }


    .support-inner {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 35px;

        padding:
            35px
            25px;

    }


    .support-intro {

        text-align: center;

    }


    .support-intro p {

        max-width: 550px;

        margin-left: auto;

        margin-right: auto;

    }


    .support-process {

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

        row-gap: 35px;

    }


    .process-arrow {

        display: none;

    }


    .process-step::after {

        display: none;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .global-support {

        padding:
            15px
            12px;

    }


    .support-inner {

        min-height: auto;

        padding:
            30px
            18px;

        border-radius:
            18px;

        gap: 32px;

        background-position:
            center center;

    }


    /* Label */

    .support-label {

        font-size: 12px;

    }


    /* Title */

    .support-intro h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing:
            -0.7px;

    }


    /* Text */

    .support-intro p {

        font-size: 13px;

        line-height: 1.6;

    }


    /* Button */

    .support-button {

        width: 100%;

        min-width: 0;

        height: 47px;

    }


    /* Process */

    .support-process {

        grid-template-columns:
            1fr;

        gap: 32px;

    }


    .step-top {

        height: auto;

    }


    .step-icon {

        width: 78px;

        height: 78px;

    }


    .step-icon svg {

        width: 45px;

        height: 45px;

    }


    .process-step h3 {

        margin-top: 10px;

        font-size: 15px;

    }


    .process-step p {

        font-size: 12px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-161f00e3 *//* =========================================================
   ACTIVE FREIGHT
   LOGISTICS CTA BANNER
   ========================================================= */

:root {
    --cta-orange: #f45118;
    --cta-orange-dark: #ed4812;
    --cta-white: #ffffff;
}


/* =========================================================
   MAIN CTA
   ========================================================= */

.logistics-cta {

    position: relative;

    width: calc(100% - 136px);

    max-width: 1360px;

    min-height: 128px;

    margin: 0 auto;

    padding:
        18px
        43px;

    display: flex;

    align-items: center;

    gap: 30px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(
            100deg,
            #f0440c 0%,
            #f45118 48%,
            #f45118 100%
        );

    box-shadow:
        0 7px 18px rgba(244, 81, 24, 0.08);

}


/* =========================================================
   SUBTLE BACKGROUND
   ========================================================= */

.logistics-cta::before {

    content: "";

    position: absolute;

    width: 480px;
    height: 220px;

    right: 25%;

    top: -170px;

    border-radius: 50%;

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

    pointer-events: none;

}

.logistics-cta::after {

    content: "";

    position: absolute;

    width: 620px;
    height: 240px;

    left: 18%;

    bottom: -210px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,0.07);

    pointer-events: none;

}


/* =========================================================
   ICON CIRCLE
   ========================================================= */

.cta-icon {

    position: relative;

    z-index: 2;

    flex:
        0 0 83px;

    width: 83px;
    height: 83px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 3px 10px rgba(80, 25, 10, 0.07);

}


/* =========================================================
   ICON SVG
   ========================================================= */

.cta-icon svg {

    width: 49px;
    height: 49px;

    fill: none;

    stroke: var(--cta-orange);

    stroke-width: 2.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   CONTENT
   ========================================================= */

.cta-content {

    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;

}


/* =========================================================
   TITLE
   ========================================================= */

.cta-content h2 {

    margin: 0 0 8px;

    font-size: 23px;

    line-height: 1.2;

    letter-spacing: -0.45px;

    font-weight: 700;

    color: #ffffff;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.cta-content p {

    margin: 0;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 500;

    color: rgba(255,255,255,0.96);

}


/* =========================================================
   BUTTONS
   ========================================================= */

.cta-buttons {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 25px;

    flex-shrink: 0;

}


/* =========================================================
   BUTTON BASE
   ========================================================= */

.cta-button {

    height: 51px;

    min-width: 237px;

    padding:
        0
        25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 21px;

    border-radius: 27px;

    font-size: 15px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;

}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.cta-button:hover {

    transform:
        translateY(-2px);

}


/* =========================================================
   WHITE BUTTON
   ========================================================= */

.cta-button-white {

    color: var(--cta-orange);

    background: #ffffff;

    box-shadow:
        0 4px 12px rgba(100, 30, 10, 0.08);

}


.cta-button-white:hover {

    background: #fff8f5;

    box-shadow:
        0 7px 18px rgba(100, 30, 10, 0.12);

}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.cta-button-outline {

    min-width: 238px;

    color: #ffffff;

    background:
        transparent;

    border:
        1.5px solid rgba(255,255,255,0.78);

}


.cta-button-outline:hover {

    color: var(--cta-orange);

    background: #ffffff;

    border-color: #ffffff;

}


/* =========================================================
   ARROW
   ========================================================= */

.cta-arrow {

    font-size: 22px;

    line-height: 1;

    font-weight: 400;

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (max-width: 1250px) {

    .logistics-cta {

        width: calc(100% - 80px);

        padding:
            18px
            30px;

    }

    .cta-buttons {

        gap: 15px;

    }

    .cta-button {

        min-width: 210px;

        padding:
            0
            18px;

        font-size: 14px;

    }

    .cta-content h2 {

        font-size: 21px;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1050px) {

    .logistics-cta {

        width: calc(100% - 50px);

        gap: 20px;

    }

    .cta-icon {

        flex-basis: 70px;

        width: 70px;
        height: 70px;

    }

    .cta-icon svg {

        width: 42px;
        height: 42px;

    }

    .cta-content h2 {

        font-size: 19px;

    }

    .cta-content p {

        font-size: 12px;

    }

    .cta-button {

        min-width: 180px;

        height: 47px;

        font-size: 13px;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .logistics-cta {

        width: calc(100% - 40px);

        padding:
            25px;

        flex-wrap: wrap;

    }

    .cta-content {

        flex:
            1 1 calc(100% - 110px);

    }

    .cta-buttons {

        width: 100%;

        justify-content: flex-end;

        padding-left: 90px;

    }

    .cta-button {

        flex: 1;

        min-width: 0;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .logistics-cta {

        width: calc(100% - 24px);

        margin:
            0 auto;

        padding:
            25px 20px;

        flex-direction: column;

        align-items: stretch;

        gap: 17px;

        border-radius: 16px;

    }


    /* Icon */

    .cta-icon {

        align-self: flex-start;

        flex-basis: 67px;

        width: 67px;
        height: 67px;

    }

    .cta-icon svg {

        width: 39px;
        height: 39px;

    }


    /* Content */

    .cta-content {

        width: 100%;

    }

    .cta-content h2 {

        font-size: 20px;

        line-height: 1.3;

    }

    .cta-content p {

        font-size: 13px;

        line-height: 1.6;

    }


    .desktop-break {

        display: none;

    }


    /* Buttons */

    .cta-buttons {

        width: 100%;

        padding: 0;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }

    .cta-button {

        width: 100%;

        min-width: 0;

        height: 49px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .cta-content h2 {

        font-size: 18px;

    }

    .cta-content p {

        font-size: 12px;

    }

    .cta-button {

        font-size: 13px;

    }

}/* End custom CSS */