/* ============================================================
   ECCRM FIELD SERVICE MANAGEMENT HERO
   COMPLETE RESPONSIVE CSS

   Brand:
   Primary   : #04A49C
   Secondary : #5B5C5C
============================================================ */


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

.eccrm-fsm-hero {

    --eccrm-primary: #04A49C;
    --eccrm-primary-dark: #038F89;

    --eccrm-secondary: #5B5C5C;

    --eccrm-heading: #142B4F;

    --eccrm-white: #FFFFFF;

    --eccrm-border: #DCE9E8;

    --eccrm-light: #F4FBFA;

    --eccrm-muted: #849090;

}


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

.eccrm-fsm-hero {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        5px 20px 32px;

    background:

        radial-gradient(circle at 80% 15%,
            rgba(4, 164, 156, .13),
            transparent 30%),

        radial-gradient(circle at 10% 80%,
            rgba(4, 164, 156, .06),
            transparent 28%),

        linear-gradient(135deg,
            #F3FBFA 0%,
            #FFFFFF 48%,
            #F8FCFC 100%);
}


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

.eccrm-fsm-hero::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    top: -300px;

    right: -180px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(4, 164, 156, .08),
            transparent 70%);

    pointer-events: none;

}


.eccrm-fsm-hero::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    bottom: -250px;

    left: -180px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(4, 164, 156, .05),
            transparent 70%);

    pointer-events: none;

}


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

.eccrm-fsm-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1280px;

    margin-left: auto;

    margin-right: auto;

}


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

.eccrm-fsm-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .94fr) minmax(0, 1.06fr);

    align-items: center;

    gap: 55px;

    min-height: 555px;

}


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

.eccrm-fsm-hero-content {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 650px;

}


/* ============================================================
   EYEBROW
============================================================ */

.eccrm-fsm-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    padding:
        7px 14px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .07);

    border:
        1px solid rgba(4, 164, 156, .18);

    border-radius: 50px;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 700;

}


/* Eyebrow Dot */

.eccrm-fsm-eyebrow-dot {

    position: relative;

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    background:
        var(--eccrm-primary);

    border-radius: 50%;

}


.eccrm-fsm-eyebrow-dot::after {

    content: "";

    position: absolute;

    width: 13px;

    height: 13px;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(4, 164, 156, .25);

    border-radius: 50%;

}


/* ============================================================
   H1
============================================================ */

.eccrm-fsm-title {

    max-width: 680px;

    margin:
        0 0 22px;

    padding: 0;

    color:
        var(--eccrm-secondary);

    font-size:
        clamp(38px, 2.1vw, 40px);

    line-height:
        1.055;

    font-weight:
        750;

    letter-spacing:
        -2.5px;

}


/* Highlight */

.eccrm-fsm-title span {

    color:
        var(--eccrm-primary);

}


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

.eccrm-fsm-description {

    max-width: 610px;

    margin:
        0 0 27px;

    padding: 0;

    color:
        var(--eccrm-secondary);

    font-size: 16px;

    line-height: 1.72;

    font-weight: 400;

}


/* ============================================================
   CTA AREA
============================================================ */

.eccrm-fsm-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin:
        0 0 17px;

}


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

.eccrm-fsm-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 52px;

    padding:
        0 21px;

    border-radius: 8px;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease;

}


/* Button SVG */

.eccrm-fsm-btn svg {

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .25s ease;

}


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

.eccrm-fsm-btn-primary {

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary);

    border:
        1px solid var(--eccrm-primary);

    box-shadow:
        0 9px 25px rgba(4, 164, 156, .22);

}


.eccrm-fsm-btn-primary:hover {

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary-dark);

    border-color:
        var(--eccrm-primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px rgba(4, 164, 156, .28);

}


.eccrm-fsm-btn-primary:hover svg {

    transform:
        translateX(4px);

}


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

.eccrm-fsm-btn-secondary {

    color:
        var(--eccrm-secondary) !important;

    background:
        #FFFFFF;

    border:
        1px solid #CBDCDC;

}


.eccrm-fsm-btn-secondary:hover {

    color:
        var(--eccrm-primary) !important;

    background:
        #FFFFFF;

    border-color:
        var(--eccrm-primary);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(20, 43, 79, .07);

}


/* ============================================================
   TRUST LIST
============================================================ */

.eccrm-fsm-trust-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 17px;

    margin-bottom: 22px;

}


.eccrm-fsm-trust-item {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        var(--eccrm-secondary);

    font-size: 10px;

    font-weight: 600;

    line-height: 1.4;

    white-space: nowrap;

}


/* ============================================================
   CHECK ICON
============================================================ */

.eccrm-fsm-check {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .09);

    border-radius: 50%;

}


.eccrm-fsm-check svg {

    width: 9px;

    height: 9px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ============================================================
   FEATURE LIST
============================================================ */

.eccrm-fsm-feature-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

}


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

.eccrm-fsm-feature {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 31px;

    padding:
        6px 10px;

    color:
        var(--eccrm-secondary);

    background:
        rgba(255, 255, 255, .82);

    border:
        1px solid var(--eccrm-border);

    border-radius: 6px;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    transition:
        all .2s ease;

}


.eccrm-fsm-feature:hover {

    color:
        var(--eccrm-primary);

    background:
        #FFFFFF;

    border-color:
        rgba(4, 164, 156, .35);

    transform:
        translateY(-1px);

}


.eccrm-fsm-feature svg {

    width: 14px;

    height: 14px;

    flex-shrink: 0;

    fill: none;

    stroke:
        var(--eccrm-primary);

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.eccrm-fsm-hero-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 550px;

    overflow: visible;

    isolation: isolate;

}


/* ============================================================
   VISUAL GLOW
============================================================ */

.eccrm-fsm-visual-glow {

    position: absolute;

    z-index: -1;

    width: 510px;

    height: 510px;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(4, 164, 156, .13) 0%,
            rgba(4, 164, 156, .055) 38%,
            transparent 72%);

    pointer-events: none;

}


/* ============================================================
   IMAGE WRAPPER
============================================================ */

.eccrm-fsm-image-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 730px;

    margin:
        0 auto;

    overflow: visible;

    z-index: 3;

}


/* ============================================================
   TRANSPARENT PRODUCT IMAGE
============================================================ */

.eccrm-fsm-product-image {

    display: block;

    width: 100%;

    max-width: 730px;

    height: auto;

    margin:
        0 auto;

    padding: 0;

    object-fit: contain;

    background:
        transparent !important;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    filter:
        drop-shadow(0 25px 35px rgba(20, 43, 79, .10));

    transition:
        transform .35s ease,
        filter .35s ease;

}


/* Product image hover */

.eccrm-fsm-product-image:hover {

    transform:
        translateY(-5px);

    filter:
        drop-shadow(0 32px 45px rgba(20, 43, 79, .15));

}


/* ============================================================
   STATISTICS
============================================================ */

.eccrm-fsm-statistics {

    position: relative;

    z-index: 20;

    display: grid;

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

    width: 100%;

    margin-top: 5px;

    background:
        #FFFFFF;

    border:
        1px solid rgba(4, 164, 156, .12);

    border-radius: 13px;

    overflow: hidden;

    box-shadow:
        0 13px 35px rgba(20, 43, 79, .065);

}


/* ============================================================
   STAT ITEM
============================================================ */

.eccrm-fsm-stat {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 98px;

    padding:
        13px 15px;

    text-align: center;

}


/* Vertical Divider */

.eccrm-fsm-stat:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 25%;

    right: 0;

    width: 1px;

    height: 50%;

    background:
        #E1EBEA;

}


/* Number */

.eccrm-fsm-stat strong {

    display: block;

    margin:
        0 0 5px;

    color:
        var(--eccrm-primary);

    font-size: 34px;

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.8px;

}


/* Plus / Percentage */

.eccrm-fsm-stat strong span {

    font-size:
        .65em;

    font-weight:
        700;

}


/* Label */

.eccrm-fsm-stat>span {

    color:
        var(--eccrm-secondary);

    font-size: 10px;

    line-height: 1.3;

    font-weight: 600;

}


/* ============================================================
   LARGE LAPTOP — 1200PX
============================================================ */

@media (max-width: 1200px) {

    .eccrm-fsm-hero {

        padding:
            20px 20px 30px;

    }


    .eccrm-fsm-hero-grid {

        gap: 40px;

    }


    .eccrm-fsm-title {

        font-size:
            clamp(40px, 4.5vw, 56px);

    }


    .eccrm-fsm-image-wrapper {

        max-width:
            680px;

    }

}


/* ============================================================
   TABLET / SMALL LAPTOP — 1050PX
============================================================ */

@media (max-width: 1050px) {

    .eccrm-fsm-hero-grid {

        grid-template-columns:
            1fr;

        gap: 35px;

        min-height:
            auto;

    }


    .eccrm-fsm-hero-content {

        max-width:
            800px;

        margin:
            0 auto;

        text-align:
            center;

    }


    .eccrm-fsm-title {

        max-width:
            850px;

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .eccrm-fsm-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .eccrm-fsm-actions {

        justify-content:
            center;

    }


    .eccrm-fsm-trust-list {

        justify-content:
            center;

    }


    .eccrm-fsm-feature-list {

        justify-content:
            center;

    }


    .eccrm-fsm-hero-visual {

        min-height:
            500px;

        max-width:
            800px;

        margin:
            0 auto;

    }


    .eccrm-fsm-image-wrapper {

        max-width:
            720px;

    }

}


/* ============================================================
   TABLET — 900PX
============================================================ */

@media (max-width: 900px) {

    .eccrm-fsm-hero {

        padding:
            65px 20px 30px;

    }


    .eccrm-fsm-title {

        font-size:
            clamp(38px, 6vw, 52px);

        letter-spacing:
            -1.8px;

    }


    .eccrm-fsm-hero-visual {

        min-height:
            450px;

    }


    .eccrm-fsm-visual-glow {

        width:
            430px;

        height:
            430px;

    }


    .eccrm-fsm-image-wrapper {

        max-width:
            680px;

    }

}


/* ============================================================
   MOBILE — 767PX
============================================================ */

@media (max-width: 767px) {

    .eccrm-fsm-hero {

        padding:
            45px 15px 25px;

    }

    /* Product image comes first */
    .eccrm-fsm-hero-visual {
        order: 1;
    }

    /* Text/content comes after the image */
    .eccrm-fsm-hero-content {
        order: 2;
    }


    .eccrm-fsm-hero::before {

        width:
            350px;

        height:
            350px;

        top:
            -180px;

        right:
            -150px;

    }


    .eccrm-fsm-hero::after {

        width:
            300px;

        height:
            300px;

        bottom:
            -180px;

        left:
            -130px;

    }


    /* Main */

    .eccrm-fsm-hero-grid {

        display:
            flex;

        flex-direction:
            column;

        gap:
            25px;

    }


    /* Content */

    .eccrm-fsm-hero-content {

        width:
            100%;

        max-width:
            100%;

        text-align:
            center;

    }


    /* Eyebrow */

    .eccrm-fsm-eyebrow {

        margin-bottom:
            15px;

        padding:
            6px 11px;

        font-size:
            10px;

    }


    /* H1 */

    .eccrm-fsm-title {

        max-width:
            100%;

        margin:
            0 0 17px;

        font-size:
            clamp(32px, 8.5vw, 42px);

        line-height:
            1.08;

        letter-spacing:
            -1.2px;

    }


    /* Description */

    .eccrm-fsm-description {

        max-width:
            650px;

        margin:
            0 auto 22px;

        font-size:
            14px;

        line-height:
            1.65;

    }


    /* Buttons */

    .eccrm-fsm-actions {

        flex-direction:
            column;

        width:
            100%;

        gap:
            9px;

        margin-bottom:
            17px;

    }


    .eccrm-fsm-btn {

        width:
            100%;

        min-height:
            49px;

        padding:
            0 18px;

        font-size:
            12px;

    }


    /* Trust */

    .eccrm-fsm-trust-list {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        width:
            fit-content;

        margin:
            0 auto 20px;

        gap:
            8px;

        text-align:
            left;

    }


    .eccrm-fsm-trust-item {

        font-size:
            9px;

    }


    /* Features */

    .eccrm-fsm-feature-list {

        justify-content:
            center;

        gap:
            5px;

    }


    .eccrm-fsm-feature {

        min-height:
            28px;

        padding:
            5px 8px;

        font-size:
            8px;

    }


    .eccrm-fsm-feature svg {

        width:
            12px;

        height:
            12px;

    }


    /* Product visual */

    .eccrm-fsm-hero-visual {

        width:
            100%;

        min-height:
            auto;

        margin-top:
            5px;

    }


    .eccrm-fsm-visual-glow {

        width:
            350px;

        height:
            350px;

    }


    .eccrm-fsm-image-wrapper {

        width:
            100%;

        max-width:
            650px;

    }


    .eccrm-fsm-product-image {

        width:
            100%;

        max-width:
            650px;

        filter:
            drop-shadow(0 18px 27px rgba(20, 43, 79, .10));

    }


    .eccrm-fsm-product-image:hover {

        transform:
            none;

    }


    /* Statistics */

    .eccrm-fsm-statistics {

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

        margin-top:
            20px;

        border-radius:
            10px;

    }


    .eccrm-fsm-stat {

        min-height:
            82px;

        padding:
            10px;

    }


    .eccrm-fsm-stat strong {

        margin-bottom:
            4px;

        font-size:
            27px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            8px;

    }


    /* Horizontal mobile divider */

    .eccrm-fsm-stat:nth-child(1),
    .eccrm-fsm-stat:nth-child(2) {

        border-bottom:
            1px solid #E1EBEA;

    }


    /* Remove vertical divider from right column */

    .eccrm-fsm-stat:nth-child(2)::after,
    .eccrm-fsm-stat:nth-child(4)::after {

        display:
            none;

    }

}


/* ============================================================
   SMALL MOBILE — 576PX
============================================================ */

@media (max-width: 576px) {

    .eccrm-fsm-hero {

        padding:
            38px 13px 22px;

    }


    .eccrm-fsm-eyebrow {

        font-size:
            9px;

        padding:
            6px 10px;

    }


    .eccrm-fsm-title {

        font-size:
            clamp(29px, 9vw, 37px);

        letter-spacing:
            -1px;

    }


    .eccrm-fsm-description {

        font-size:
            13px;

        line-height:
            1.65;

    }


    .eccrm-fsm-btn {

        min-height:
            48px;

        font-size:
            11.5px;

    }


    .eccrm-fsm-trust-list {

        gap:
            7px;

    }


    .eccrm-fsm-trust-item {

        font-size:
            8.5px;

    }


    .eccrm-fsm-feature-list {

        gap:
            4px;

    }


    .eccrm-fsm-feature {

        min-height:
            27px;

        padding:
            5px 7px;

        font-size:
            7.5px;

    }


    .eccrm-fsm-feature svg {

        width:
            11px;

        height:
            11px;

    }


    .eccrm-fsm-hero-visual {

        margin-top:
            8px;

    }


    .eccrm-fsm-image-wrapper {

        width:
            106%;

        max-width:
            none;

        margin-left:
            -3%;

    }


    .eccrm-fsm-statistics {

        margin-top:
            17px;

    }


    .eccrm-fsm-stat {

        min-height:
            76px;

        padding:
            8px;

    }


    .eccrm-fsm-stat strong {

        font-size:
            24px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            7.5px;

    }

}


/* ============================================================
   EXTRA SMALL MOBILE — 420PX
============================================================ */

@media (max-width: 420px) {

    .eccrm-fsm-hero {

        padding:
            34px 11px 20px;

    }


    .eccrm-fsm-eyebrow {

        font-size:
            8.5px;

        padding:
            5px 9px;

    }


    .eccrm-fsm-eyebrow-dot {

        width:
            6px;

        height:
            6px;

    }


    .eccrm-fsm-title {

        font-size:
            29px;

        line-height:
            1.09;

        letter-spacing:
            -.8px;

    }


    .eccrm-fsm-description {

        font-size:
            12.5px;

    }


    .eccrm-fsm-btn {

        min-height:
            47px;

        font-size:
            11px;

    }


    .eccrm-fsm-feature {

        min-height:
            25px;

        padding:
            4px 6px;

        font-size:
            7px;

    }


    .eccrm-fsm-feature svg {

        width:
            10px;

        height:
            10px;

    }


    .eccrm-fsm-image-wrapper {

        width:
            110%;

        margin-left:
            -5%;

    }


    .eccrm-fsm-statistics {

        margin-top:
            14px;

    }


    .eccrm-fsm-stat {

        min-height:
            70px;

    }


    .eccrm-fsm-stat strong {

        font-size:
            21px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            7px;

    }

}


/* ============================================================
   VERY SMALL MOBILE — 360PX
============================================================ */

@media (max-width: 360px) {

    .eccrm-fsm-hero {

        padding:
            30px 9px 18px;

    }


    .eccrm-fsm-title {

        font-size:
            27px;

    }


    .eccrm-fsm-description {

        font-size:
            12px;

    }


    .eccrm-fsm-trust-item {

        font-size:
            8px;

    }


    .eccrm-fsm-feature-list {

        gap:
            3px;

    }


    .eccrm-fsm-feature {

        padding:
            4px 5px;

        font-size:
            6.7px;

    }


    .eccrm-fsm-stat strong {

        font-size:
            20px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            6.7px;

    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.eccrm-fsm-btn:focus-visible {

    outline:
        3px solid rgba(4, 164, 156, .25);

    outline-offset:
        3px;

}


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

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

    .eccrm-fsm-hero *,
    .eccrm-fsm-hero *::before,
    .eccrm-fsm-hero *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}


/* ============================================================
   ECCRM MOBILE REFRESH / HEADER-VISIBLE FIX

   Purpose:
   - On mobile/tablet refresh, always return to the very top
     of the document so the site header is visible.
   - Do not stop at the first hero element/image.
   - Prevent scroll anchoring / lazy image layout from moving
     the viewport back into the hero after refresh.
   - Do not affect normal scrolling or intentional hash links.
============================================================ */

@media (max-width: 767px) {

    html.eccrm-mobile-refresh-lock,
    body.eccrm-mobile-refresh-lock {
        scroll-behavior: auto !important;
        overflow-anchor: none !important;
    }

    .eccrm-fsm-hero {
        scroll-margin-top: 0 !important;
        overflow-anchor: none !important;
    }

}

    /* ============================================================
   ECCRM MOBILE REFRESH / SCROLL RESTORATION FIX
   ------------------------------------------------------------
   Keep your existing HTML/content exactly as it is.
   Add this at the END of the existing hero code.
============================================================ */

@media (max-width: 767px) {

    html:has(.eccrm-fsm-hero),
    body:has(.eccrm-fsm-hero) {
        scroll-behavior: auto !important;
    }

    .eccrm-fsm-hero {
        scroll-margin-top: 0 !important;
    }

}

/* ============================================================
   ECCRM MOBILE APP SECTION
   RESPONSIVE CSS
============================================================ */

.eccrm-mobile-section {

    --eccrm-primary: #04A49C;
    --eccrm-primary-dark: #038F89;
    --eccrm-secondary: #5B5C5C;
    --eccrm-heading: #142B4F;
    --eccrm-light: #F4FBFA;
    --eccrm-border: #DCE9E8;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 90px 20px;

    background:
        radial-gradient(circle at 78% 50%,
            rgba(4, 164, 156, .09),
            transparent 35%),
        linear-gradient(135deg,
            #F5FBFA 0%,
            #FFFFFF 55%,
            #F7FCFB 100%);

}


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

.eccrm-mobile-container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    position: relative;

    z-index: 2;

}


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

.eccrm-mobile-section-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 40px;

    padding: 7px 13px;

    color: #FFFFFF;

    background: var(--eccrm-heading);

    border-radius: 5px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .2px;

}


.eccrm-mobile-label-line {

    width: 7px;

    height: 7px;

    background: var(--eccrm-primary);

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(4, 164, 156, .15);

}


/* ============================================================
   MAIN GRID
============================================================ */

.eccrm-mobile-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .9fr) minmax(0, 1.1fr);

    align-items: center;

    gap: 60px;

}


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

.eccrm-mobile-content {

    position: relative;

    z-index: 5;

    max-width: 570px;

}


/* ============================================================
   BADGE
============================================================ */

.eccrm-mobile-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    padding: 7px 12px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .07);

    border:
        1px solid rgba(4, 164, 156, .16);

    border-radius: 50px;

    font-size: 10px;

    font-weight: 700;

}


.eccrm-mobile-badge-dot {

    width: 7px;

    height: 7px;

    background: var(--eccrm-primary);

    border-radius: 50%;

}


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

.eccrm-mobile-title {

    max-width: 600px;

    margin: 0 0 18px;

    color: var(--eccrm-secondary);

    font-size:
        clamp(36px, 4vw, 53px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 750;

}


.eccrm-mobile-title span {

    color: var(--eccrm-primary);

}


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

.eccrm-mobile-description {

    max-width: 540px;

    margin: 0 0 27px;

    color: var(--eccrm-secondary);

    font-size: 15px;

    line-height: 1.75;

}


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

.eccrm-mobile-features {

    display: grid;

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

    gap: 12px 18px;

    margin-bottom: 28px;

}


.eccrm-mobile-feature {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--eccrm-secondary);

    font-size: 12px;

    font-weight: 600;

}


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

.eccrm-mobile-feature-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 29px;

    height: 29px;

    flex-shrink: 0;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .09);

    border:
        1px solid rgba(4, 164, 156, .13);

    border-radius: 50%;

}


.eccrm-mobile-feature-icon svg {

    width: 14px;

    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.eccrm-mobile-store-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 16px;

}


.eccrm-store-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-width: 145px;

    min-height: 48px;

    padding: 6px 13px;

    color: #FFFFFF !important;

    background: #111111;

    border: 1px solid #111111;

    border-radius: 7px;

    text-decoration: none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.eccrm-store-button:hover {

    color: #FFFFFF !important;

    background: #242424;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .15);

}


.eccrm-play-icon {

    width: 25px;

    height: 25px;

    flex-shrink: 0;

}


.eccrm-apple-icon {

    width: 23px;

    height: 23px;

    flex-shrink: 0;

}


.eccrm-store-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1;

}


.eccrm-store-text small {

    margin-bottom: 3px;

    color: #FFFFFF;

    font-size: 7px;

    font-weight: 500;

    letter-spacing: .3px;

}


.eccrm-store-text strong {

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

}


/* ============================================================
   NOTE
============================================================ */

.eccrm-mobile-note {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--eccrm-secondary);

    font-size: 10px;

    font-weight: 500;

}


.eccrm-note-check {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    color: #FFFFFF;

    background: var(--eccrm-primary);

    border-radius: 50%;

    font-size: 9px;

}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.eccrm-mobile-visual {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ============================================================
   GLOW
============================================================ */

.eccrm-mobile-glow {

    position: absolute;

    width: 510px;

    height: 510px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .14) 0%,
            rgba(4, 164, 156, .06) 38%,
            transparent 70%);

    z-index: 0;

}


/* ============================================================
   DECORATIVE GRID
============================================================ */

.eccrm-mobile-grid-pattern {

    position: absolute;

    width: 360px;

    height: 360px;

    right: 0;

    top: 50%;

    transform:
        translateY(-50%);

    opacity: .25;

    background-image:

        linear-gradient(rgba(4, 164, 156, .12) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(4, 164, 156, .12) 1px,
            transparent 1px);

    background-size:
        24px 24px;

    mask-image:
        radial-gradient(circle,
            #000 20%,
            transparent 70%);

}


/* ============================================================
   PHONE COMMON
============================================================ */

.eccrm-phone {

    position: absolute;

    width: 220px;

    height: 455px;

    padding: 8px;

    background:
        linear-gradient(145deg,
            #20272B,
            #090D10);

    border:
        2px solid #363F43;

    border-radius: 31px;

    box-shadow:
        0 28px 55px rgba(20, 43, 79, .20),
        0 8px 18px rgba(20, 43, 79, .10);

    z-index: 2;

    transition:
        transform .4s ease;

}


/* ============================================================
   PHONE BACK
============================================================ */

.eccrm-phone-back {

    left: 12%;

    top: 54%;

    transform:
        translateY(-50%) rotate(-3deg) scale(.91);

    z-index: 2;

}


/* ============================================================
   PHONE FRONT
============================================================ */

.eccrm-phone-front {

    right: 7%;

    top: 47%;

    transform:
        translateY(-50%) rotate(2deg);

    z-index: 4;

}


/* Hover effect */

.eccrm-mobile-visual:hover .eccrm-phone-back {

    transform:
        translateY(-52%) translateX(-7px) rotate(-4deg) scale(.91);

}


.eccrm-mobile-visual:hover .eccrm-phone-front {

    transform:
        translateY(-52%) translateX(7px) rotate(3deg);

}


/* ============================================================
   PHONE FRAME
============================================================ */

.eccrm-phone-frame {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #FFFFFF;

    border-radius: 24px;

}


/* ============================================================
   PHONE NOTCH
============================================================ */

.eccrm-phone-notch {

    position: absolute;

    z-index: 20;

    top: 0;

    left: 50%;

    width: 88px;

    height: 23px;

    transform:
        translateX(-50%);

    background: #090D10;

    border-radius:
        0 0 14px 14px;

}


/* ============================================================
   PHONE SCREEN
============================================================ */

.eccrm-phone-screen {

    position: relative;

    width: 100%;

    height: 100%;

    padding:
        30px 13px 12px;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #FFFFFF 0%,
            #F4FBFA 100%);

}


/* ============================================================
   APP HEADER
============================================================ */

.eccrm-app-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 32px;

    margin-bottom: 12px;

}


.eccrm-app-menu {

    width: 18px;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.eccrm-app-menu span {

    width: 15px;

    height: 2px;

    background: var(--eccrm-secondary);

    border-radius: 2px;

}


.eccrm-app-logo {

    display: flex;

    align-items: center;

    gap: 4px;

    color: var(--eccrm-heading);

    font-size: 13px;

    font-weight: 750;

}


.eccrm-logo-mark {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    height: 18px;

    color: #FFFFFF;

    background: var(--eccrm-primary);

    border-radius: 50%;

    font-size: 9px;

    font-weight: 800;

}


.eccrm-app-bell {

    width: 18px;

    color: var(--eccrm-secondary);

    font-size: 13px;

}


/* ============================================================
   APP PAGE TITLE
============================================================ */

.eccrm-app-page-title {

    margin-bottom: 14px;

    color: var(--eccrm-heading);

    font-size: 20px;

    font-weight: 750;

}


/* ============================================================
   JOB CARD
============================================================ */

.eccrm-app-job-card {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    padding: 10px 7px;

    background: #FFFFFF;

    border:
        1px solid #E4EEEC;

    border-radius: 9px;

    box-shadow:
        0 3px 10px rgba(20, 43, 79, .035);

}


.eccrm-app-job-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    flex-shrink: 0;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .10);

    border-radius: 8px;

    font-size: 12px;

    font-weight: 800;

}


.eccrm-app-job-card div:nth-child(2) {

    display: flex;

    flex-direction: column;

    min-width: 0;

    flex: 1;

}


.eccrm-app-job-card strong {

    color: var(--eccrm-heading);

    font-size: 9px;

}


.eccrm-app-job-card small {

    margin-top: 3px;

    color: #8A9595;

    font-size: 7px;

}


.eccrm-status {

    color: var(--eccrm-primary);

    font-size: 7px;

    font-weight: 700;

}


.eccrm-status.completed {

    color: #1FA66A;

}


/* ============================================================
   TECHNICIAN CARD
============================================================ */

.eccrm-technician-card {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    padding: 10px;

    background: #FFFFFF;

    border:
        1px solid #E2EBEA;

    border-radius: 10px;

}


.eccrm-technician-avatar {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    color: #FFFFFF;

    background:
        linear-gradient(135deg,
            var(--eccrm-primary),
            #087F7A);

    border-radius: 50%;

    font-size: 12px;

    font-weight: 700;

}


.eccrm-technician-card div:last-child {

    display: flex;

    flex-direction: column;

}


.eccrm-technician-card strong {

    color: var(--eccrm-heading);

    font-size: 10px;

}


.eccrm-technician-card small {

    margin-top: 3px;

    color: #8A9595;

    font-size: 7px;

}


/* ============================================================
   DETAIL ROW
============================================================ */

.eccrm-detail-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding:
        10px 2px;

    border-bottom:
        1px solid #E7EEEE;

}


.eccrm-detail-row span {

    color: #8A9595;

    font-size: 8px;

}


.eccrm-detail-row strong {

    color: var(--eccrm-heading);

    font-size: 8px;

    text-align: right;

}


.eccrm-green-text {

    color: var(--eccrm-primary) !important;

}


/* ============================================================
   MOBILE APP BUTTON
============================================================ */

.eccrm-mobile-job-btn {

    width: 100%;

    margin-top: 18px;

    min-height: 37px;

    border: 0;

    border-radius: 7px;

    color: #FFFFFF;

    background:
        var(--eccrm-primary);

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;

}


/* ============================================================
   BOTTOM NAV
============================================================ */

.eccrm-app-bottom-nav {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    display: grid;

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

    padding:
        9px 5px 10px;

    background:
        rgba(255, 255, 255, .97);

    border-top:
        1px solid #E5ECEB;

}


.eccrm-app-bottom-nav span {

    color: #8A9595;

    font-size: 7px;

    font-weight: 600;

    text-align: center;

}


.eccrm-app-bottom-nav span.active {

    color: var(--eccrm-primary);

}


/* ============================================================
   FLOATING CARD
============================================================ */

.eccrm-mobile-floating-card {

    position: absolute;

    right: 2%;

    top: 12%;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 205px;

    padding: 12px 14px;

    background:
        rgba(255, 255, 255, .96);

    border:
        1px solid rgba(4, 164, 156, .13);

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(20, 43, 79, .11);

    z-index: 7;

    animation:
        eccrmFloatCard 4s ease-in-out infinite;

}


.eccrm-floating-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .10);

    border-radius: 9px;

}


.eccrm-floating-icon svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-mobile-floating-card>div:nth-child(2) {

    display: flex;

    flex-direction: column;

    flex: 1;

}


.eccrm-mobile-floating-card small {

    color: #8A9595;

    font-size: 7px;

}


.eccrm-mobile-floating-card strong {

    margin-top: 3px;

    color: var(--eccrm-heading);

    font-size: 10px;

}


.eccrm-floating-dot {

    width: 7px;

    height: 7px;

    background:
        var(--eccrm-primary);

    border-radius: 50%;

}


/* ============================================================
   FLOAT ANIMATION
============================================================ */

@keyframes eccrmFloatCard {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


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

@media (max-width: 1100px) {

    .eccrm-mobile-grid {

        gap: 35px;

    }


    .eccrm-mobile-title {

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

    }


    .eccrm-phone {

        width: 195px;

        height: 410px;

    }


    .eccrm-mobile-visual {

        min-height: 510px;

    }


    .eccrm-mobile-floating-card {

        right: 0;

    }

}


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

@media (max-width: 900px) {

    .eccrm-mobile-section {

        padding:
            70px 20px;

    }


    .eccrm-mobile-grid {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .eccrm-mobile-content {

        max-width: 720px;

        margin: 0 auto;

        text-align: center;

    }


    .eccrm-mobile-title {

        max-width: 720px;

        margin-left: auto;

        margin-right: auto;

    }


    .eccrm-mobile-description {

        margin-left: auto;

        margin-right: auto;

    }


    .eccrm-mobile-features {

        max-width: 570px;

        margin-left: auto;

        margin-right: auto;

        text-align: left;

    }


    .eccrm-mobile-store-buttons {

        justify-content: center;

    }


    .eccrm-mobile-note {

        justify-content: center;

    }


    .eccrm-mobile-visual {

        min-height: 550px;

        width: 100%;

        max-width: 700px;

        margin: 0 auto;

    }


    .eccrm-phone {

        width: 220px;

        height: 455px;

    }

}


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

@media (max-width: 767px) {

    .eccrm-mobile-section {

        padding:
            55px 16px;

    }


    .eccrm-mobile-section-label {

        margin-bottom:
            28px;

        font-size:
            9px;

    }


    .eccrm-mobile-grid {

        gap:
            35px;

    }


    .eccrm-mobile-badge {

        font-size:
            9px;

    }


    .eccrm-mobile-title {

        font-size:
            clamp(30px, 8vw, 40px);

        line-height:
            1.1;

        letter-spacing:
            -1px;

    }


    .eccrm-mobile-description {

        font-size:
            13px;

        line-height:
            1.7;

    }


    .eccrm-mobile-features {

        grid-template-columns:
            1fr;

        max-width:
            400px;

        gap:
            10px;

    }


    .eccrm-mobile-feature {

        font-size:
            11px;

    }


    .eccrm-mobile-store-buttons {

        flex-direction:
            row;

    }


    .eccrm-store-button {

        min-width:
            135px;

        min-height:
            46px;

    }


    .eccrm-mobile-visual {

        min-height:
            500px;

        margin-top:
            5px;

    }


    .eccrm-mobile-glow {

        width:
            360px;

        height:
            360px;

    }


    .eccrm-phone {

        width:
            190px;

        height:
            395px;

        border-radius:
            27px;

    }


    .eccrm-phone-frame {

        border-radius:
            21px;

    }


    .eccrm-phone-back {

        left:
            7%;

        top:
            52%;

    }


    .eccrm-phone-front {

        right:
            7%;

        top:
            47%;

    }


    .eccrm-mobile-floating-card {

        right:
            2%;

        top:
            7%;

        min-width:
            175px;

        padding:
            9px 10px;

    }


    .eccrm-floating-icon {

        width:
            30px;

        height:
            30px;

    }

}


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

@media (max-width: 550px) {

    .eccrm-mobile-section {

        padding:
            45px 13px;

    }


    .eccrm-mobile-title {

        font-size:
            30px;

    }


    .eccrm-mobile-description {

        font-size:
            12.5px;

    }


    .eccrm-mobile-store-buttons {

        flex-direction:
            column;

        align-items:
            center;

        width:
            100%;

    }


    .eccrm-store-button {

        width:
            155px;

    }


    .eccrm-mobile-visual {

        min-height:
            440px;

    }


    .eccrm-phone {

        width:
            165px;

        height:
            345px;

        border-radius:
            24px;

        padding:
            6px;

    }


    .eccrm-phone-frame {

        border-radius:
            19px;

    }


    .eccrm-phone-notch {

        width:
            65px;

        height:
            18px;

        border-radius:
            0 0 11px 11px;

    }


    .eccrm-phone-screen {

        padding:
            25px 9px 9px;

    }


    .eccrm-app-page-title {

        font-size:
            16px;

    }


    .eccrm-mobile-floating-card {

        display:
            none;

    }


    .eccrm-phone-back {

        left:
            3%;

    }


    .eccrm-phone-front {

        right:
            3%;

    }

}


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

@media (max-width: 380px) {

    .eccrm-mobile-section {

        padding:
            38px 11px;

    }


    .eccrm-mobile-title {

        font-size:
            28px;

    }


    .eccrm-mobile-feature {

        font-size:
            10px;

    }


    .eccrm-mobile-feature-icon {

        width:
            27px;

        height:
            27px;

    }


    .eccrm-mobile-visual {

        min-height:
            390px;

    }


    .eccrm-phone {

        width:
            145px;

        height:
            305px;

    }


    .eccrm-phone-back {

        left:
            2%;

    }


    .eccrm-phone-front {

        right:
            2%;

    }


    .eccrm-app-page-title {

        font-size:
            13px;

    }


    .eccrm-app-job-card {

        padding:
            7px 5px;

    }


    .eccrm-app-job-card strong {

        font-size:
            7px;

    }


    .eccrm-app-job-card small {

        font-size:
            6px;

    }

}

/* Product Showcase End */

/* Mobile App Section */

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

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

    .eccrm-mobile-section *,
    .eccrm-mobile-section *::before,
    .eccrm-mobile-section *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* MOBILE SECTION END */

/* ============================================================
   ECCRM FIELD SERVICE - CHALLENGE SECTION
============================================================ */

.eccrm-challenges-section {

    --eccrm-primary: #04A49C;
    --eccrm-secondary: #5B5C5C;
    --eccrm-heading: #142B4F;

    width: 100%;

    padding: 90px 20px;

    background:
        linear-gradient(180deg,
            #FFFFFF 0%,
            #F8FCFC 100%);

    overflow: hidden;
}


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

.eccrm-challenges-container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

}


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

.eccrm-challenges-heading {

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;

}


/* ============================================================
   BADGE
============================================================ */

.eccrm-challenges-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding: 7px 14px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .08);

    border:
        1px solid rgba(4, 164, 156, .15);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.3;

}


.eccrm-challenges-badge span {

    width: 7px;

    height: 7px;

    background:
        var(--eccrm-primary);

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(4, 164, 156, .10);

}


/* ============================================================
   H2
============================================================ */

.eccrm-challenges-heading h2 {

    margin: 0 0 18px;

    color:
        var(--eccrm-secondary);

    font-size:
        clamp(34px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.8px;

    font-weight: 750;

}


.eccrm-challenges-heading h2 span {

    color:
        var(--eccrm-primary);

}


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

.eccrm-challenges-heading p {

    max-width: 720px;

    margin: 0 auto;

    color:
        var(--eccrm-secondary);

    font-size: 15px;

    line-height: 1.75;

}


/* ============================================================
   CARD GRID
============================================================ */

.eccrm-challenges-grid {

    display: grid;

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

    gap: 20px;

}


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

.eccrm-challenge-card {

    position: relative;

    min-height: 255px;

    padding: 30px;

    background:
        rgba(255, 255, 255, .96);

    border:
        1px solid #DFEAEA;

    border-radius: 16px;

    overflow: hidden;

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

}


/* Top line */

.eccrm-challenge-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--eccrm-primary),
            rgba(4, 164, 156, .15));

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .3s ease;

}


/* Hover */

.eccrm-challenge-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(4, 164, 156, .28);

    box-shadow:
        0 18px 45px rgba(20, 43, 79, .08);

}


.eccrm-challenge-card:hover::before {

    transform:
        scaleX(1);

}


/* ============================================================
   ICON CONTAINER
============================================================ */

.eccrm-challenge-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    margin-bottom: 22px;

    color:
        var(--eccrm-primary);

    background:
        linear-gradient(135deg,
            rgba(4, 164, 156, .15),
            rgba(4, 164, 156, .055));

    border:
        1px solid rgba(4, 164, 156, .12);

    border-radius: 14px;

    transition:
        background .3s ease,
        transform .3s ease;

}


.eccrm-challenge-card:hover .eccrm-challenge-icon {

    background:
        var(--eccrm-primary);

    color:
        #FFFFFF;

    transform:
        translateY(-2px);

}


/* ============================================================
   IMPORTANT:
   SVG ICON STYLING
============================================================ */

.eccrm-challenge-icon svg {

    display: block;

    width: 27px;

    height: 27px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.eccrm-challenge-card h3 {

    margin:
        0 0 11px;

    color:
        var(--eccrm-secondary);

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}


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

.eccrm-challenge-card p {

    margin: 0;

    color:
        var(--eccrm-secondary);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   SOLUTION BANNER
============================================================ */

.eccrm-challenges-solution {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 30px;

    padding:
        20px 28px;

    color:
        #FFFFFF;

    background:
        linear-gradient(135deg,
            #04A49C,
            #038F89);

    border-radius: 12px;

    box-shadow:
        0 12px 28px rgba(4, 164, 156, .16);

}


.eccrm-challenges-solution p {

    margin: 0;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 600;

    text-align: center;

}


/* ============================================================
   SOLUTION ICON
============================================================ */

.eccrm-solution-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    flex-shrink: 0;

    background:
        rgba(255, 255, 255, .15);

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius: 50%;

}


.eccrm-solution-icon svg {

    display: block;

    width: 19px;

    height: 19px;

    fill: none;

    stroke:
        #FFFFFF;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

@media (max-width: 1000px) {

    .eccrm-challenges-section {

        padding:
            75px 20px;

    }


    .eccrm-challenges-grid {

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

    }


    .eccrm-challenges-heading h2 {

        font-size:
            42px;

    }

}


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

@media (max-width: 700px) {

    .eccrm-challenges-section {

        padding:
            65px 15px;

    }


    .eccrm-challenges-heading {

        margin-bottom:
            38px;

    }


    .eccrm-challenges-heading h2 {

        font-size:
            clamp(30px, 8vw, 38px);

        letter-spacing:
            -1px;

    }


    .eccrm-challenges-heading p {

        font-size:
            13px;

        line-height:
            1.7;

    }


    .eccrm-challenges-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .eccrm-challenge-card {

        min-height:
            auto;

        padding:
            25px;

    }


    .eccrm-challenge-icon {

        width:
            52px;

        height:
            52px;

        margin-bottom:
            17px;

    }


    .eccrm-challenge-icon svg {

        width:
            24px;

        height:
            24px;

    }


    .eccrm-challenge-card h3 {

        font-size:
            16px;

    }


    .eccrm-challenge-card p {

        font-size:
            12px;

    }


    .eccrm-challenges-solution {

        flex-direction:
            column;

        text-align:
            center;

        padding:
            20px 18px;

    }


    .eccrm-challenges-solution p {

        font-size:
            12px;

    }

}


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

@media (max-width: 400px) {

    .eccrm-challenges-section {

        padding:
            50px 12px;

    }


    .eccrm-challenges-heading h2 {

        font-size:
            28px;

    }


    .eccrm-challenges-heading p {

        font-size:
            12px;

    }


    .eccrm-challenge-card {

        padding:
            22px;

        border-radius:
            13px;

    }


    .eccrm-challenge-icon {

        width:
            48px;

        height:
            48px;

    }


    .eccrm-challenge-icon svg {

        width:
            22px;

        height:
            22px;

    }

}

/* ============================================================
   ECCRM BEFORE / AFTER TRANSFORMATION SECTION
============================================================ */

.eccrm-transformation-section {

    --eccrm-primary: #04A49C;
    --eccrm-primary-dark: #038F89;
    --eccrm-secondary: #5B5C5C;
    --eccrm-heading: #142B4F;

    width: 100%;

    padding: 95px 20px;

    overflow: hidden;

    background:
        radial-gradient(circle at 15% 50%,
            rgba(4, 164, 156, .055),
            transparent 30%),

        linear-gradient(180deg,
            #FFFFFF 0%,
            #F7FBFB 100%);

}


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

.eccrm-transformation-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}


/* ============================================================
   HEADER
============================================================ */

.eccrm-transformation-header {

    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;

}


/* ============================================================
   BADGE
============================================================ */

.eccrm-transformation-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding: 7px 14px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .07);

    border:
        1px solid rgba(4, 164, 156, .16);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

}


.eccrm-badge-dot {

    width: 7px;

    height: 7px;

    background:
        var(--eccrm-primary);

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(4, 164, 156, .10);

}


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

.eccrm-transformation-header h2 {

    margin: 0 0 18px;

    color:
        var(--eccrm-secondary);

    font-size:
        clamp(30px, 4.3vw, 48px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 750;

}


.eccrm-transformation-header h2 span {

    display: block;

    color:
        var(--eccrm-primary);

}


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

.eccrm-transformation-header p {

    max-width: 690px;

    margin: 0 auto;

    color:
        var(--eccrm-secondary);

    font-size: 15px;

    line-height: 1.75;

}


/* ============================================================
   COMPARISON WRAPPER
============================================================ */

.eccrm-comparison-wrapper {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 15px;

}


/* ============================================================
   COMPARISON CARD
============================================================ */

.eccrm-comparison-card {

    position: relative;

    min-height: 520px;

    padding: 30px;

    background:
        rgba(255, 255, 255, .96);

    border-radius: 18px;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


/* ============================================================
   BEFORE CARD
============================================================ */

.eccrm-before-card {

    border:
        1px solid #E4E7E7;

    box-shadow:
        0 10px 30px rgba(20, 43, 79, .035);

}


.eccrm-before-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 5px;

    background:
        linear-gradient(90deg,
            #5B5C5C,
            #5b5c5c);

}


/* ============================================================
   AFTER CARD
============================================================ */

.eccrm-after-card {

    border:
        1px solid rgba(4, 164, 156, .22);

    background:
        linear-gradient(145deg,
            #FFFFFF 0%,
            #F5FCFB 100%);

    box-shadow:
        0 18px 45px rgba(4, 164, 156, .09);

}


.eccrm-after-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 5px;

    background:
        linear-gradient(90deg,
            #04A49C,
            #087D78);

}


/* ============================================================
   CARD HOVER
============================================================ */

.eccrm-comparison-card:hover {

    transform:
        translateY(-5px);

}


.eccrm-before-card:hover {

    box-shadow:
        0 18px 45px rgba(20, 43, 79, .07);

}


.eccrm-after-card:hover {

    box-shadow:
        0 22px 50px rgba(4, 164, 156, .14);

}


/* ============================================================
   CARD HEADER
============================================================ */

.eccrm-comparison-header {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 23px;

    margin-bottom: 8px;

    border-bottom:
        1px solid #E9EEEE;

}


/* ============================================================
   HEADER ICON
============================================================ */

.eccrm-comparison-header-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    color: #5B5C5C;

    background: #D0D1D1;

    border-radius: 12px;

}


.eccrm-comparison-header-icon svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* After Header Icon */

.eccrm-comparison-header-icon.eccrm-after-icon {

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .10);

}


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

.eccrm-comparison-label {

    display: block;

    margin-bottom: 4px;

    color:
        var(--eccrm-primary);

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1px;

}


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

.eccrm-comparison-header h3 {

    margin: 0;

    color:
        var(--eccrm-secondary);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 750;

}


/* ============================================================
   LIST
============================================================ */

.eccrm-comparison-list {

    list-style: none;

    margin: 0;

    padding: 8px 0 0;

}


.eccrm-comparison-list li {

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 47px;

    padding: 7px 0;

    color:
        var(--eccrm-secondary);

    font-size: 13px;

    line-height: 1.4;

    border-bottom:
        1px solid #F0F3F3;

}


.eccrm-comparison-list li:last-child {

    border-bottom: 0;

}


/* ============================================================
   STATUS ICON
============================================================ */

.eccrm-status-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 25px;

    height: 25px;

    flex-shrink: 0;

    border-radius: 50%;

}


.eccrm-status-icon svg {

    width: 14px;

    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.3;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* Before */

.eccrm-status-before {

    color: #5b5c5c;

    background:
        #D0D1D1;

}


/* After */

.eccrm-status-after {

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .11);

}


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

.eccrm-comparison-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

}


.eccrm-arrow-circle {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    color:
        #FFFFFF;

    background:
        var(--eccrm-primary);

    border:
        5px solid #FFFFFF;

    border-radius: 50%;

    box-shadow:
        0 8px 25px rgba(4, 164, 156, .25);

    z-index: 5;

}


.eccrm-arrow-circle svg {

    width: 21px;

    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ============================================================
   BOTTOM MESSAGE
============================================================ */

.eccrm-transformation-message {

    display: flex;

    align-items: center;

    gap: 15px;

    max-width: 630px;

    margin: 35px auto 0;

    padding: 18px 22px;

    background:
        rgba(4, 164, 156, .07);

    border:
        1px solid rgba(4, 164, 156, .14);

    border-radius: 12px;

}


.eccrm-message-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 39px;

    height: 39px;

    flex-shrink: 0;

    color:
        var(--eccrm-primary);

    background:
        #FFFFFF;

    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(4, 164, 156, .08);

}


.eccrm-message-icon svg {

    width: 19px;

    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-transformation-message strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--eccrm-secondary);

    font-size: 13px;

    line-height: 1.4;

}


.eccrm-transformation-message span {

    display: block;

    color:
        var(--eccrm-secondary);

    font-size: 11px;

    line-height: 1.5;

}


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

.eccrm-transformation-cta {

    display: flex;

    justify-content: center;

    margin-top: 28px;

}


.eccrm-transformation-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 0 20px;

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary);

    border:
        1px solid var(--eccrm-primary);

    border-radius: 7px;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 9px 25px rgba(4, 164, 156, .18);

    transition:
        all .25s ease;

}


.eccrm-transformation-btn:hover {

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px rgba(4, 164, 156, .25);

}


.eccrm-transformation-btn svg {

    width: 16px;

    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

@media (max-width: 950px) {

    .eccrm-transformation-section {

        padding:
            75px 20px;

    }


    .eccrm-comparison-wrapper {

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

        gap: 20px;

    }


    .eccrm-comparison-arrow {

        position: absolute;

        left: 50%;

        top: 50%;

        transform:
            translate(-50%, -50%);

        z-index: 10;

    }


    .eccrm-comparison-card {

        min-height:
            500px;

    }


    .eccrm-comparison-header h3 {

        font-size:
            18px;

    }

}


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

@media (max-width: 700px) {

    .eccrm-transformation-section {

        padding:
            65px 15px;

    }


    .eccrm-transformation-header {

        margin-bottom:
            35px;

    }


    .eccrm-transformation-header h2 {

        font-size:
            clamp(30px, 8vw, 38px);

        letter-spacing:
            -1px;

    }


    .eccrm-transformation-header p {

        font-size:
            13px;

    }


    .eccrm-comparison-wrapper {

        display:
            flex;

        flex-direction:
            column;

        gap:
            45px;

    }


    .eccrm-comparison-card {

        width:
            100%;

        min-height:
            auto;

        padding:
            25px;

    }


    .eccrm-comparison-arrow {

        position:
            absolute;

        top:
            50%;

        left:
            50%;

        transform:
            translate(-50%, -50%) rotate(90deg);

    }


    .eccrm-arrow-circle {

        width:
            45px;

        height:
            45px;

    }


    .eccrm-comparison-header h3 {

        font-size:
            17px;

    }


    .eccrm-comparison-list li {

        min-height:
            43px;

        font-size:
            12px;

    }


    .eccrm-transformation-message {

        align-items:
            flex-start;

        padding:
            17px;

    }


    .eccrm-transformation-message strong {

        font-size:
            12px;

    }


    .eccrm-transformation-message span {

        font-size:
            10px;

    }

}


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

@media (max-width: 400px) {

    .eccrm-transformation-section {

        padding:
            50px 12px;

    }


    .eccrm-transformation-header h2 {

        font-size:
            28px;

    }


    .eccrm-transformation-header p {

        font-size:
            12px;

    }


    .eccrm-comparison-card {

        padding:
            21px;

        border-radius:
            14px;

    }


    .eccrm-comparison-header {

        gap:
            11px;

    }


    .eccrm-comparison-header-icon {

        width:
            43px;

        height:
            43px;

    }


    .eccrm-comparison-header-icon svg {

        width:
            20px;

        height:
            20px;

    }


    .eccrm-comparison-header h3 {

        font-size:
            15px;

    }


    .eccrm-comparison-list li {

        gap:
            10px;

        font-size:
            11px;

    }


    .eccrm-status-icon {

        width:
            22px;

        height:
            22px;

    }


    .eccrm-status-icon svg {

        width:
            12px;

        height:
            12px;

    }

}


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

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

    .eccrm-transformation-section *,
    .eccrm-transformation-section *::before,
    .eccrm-transformation-section *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}

/* Vs Concept End */

/* ============================================================
   ECCRM - 8 BUSINESS IMPACT CARDS
============================================================ */

.eccrm-impact-section {

    --primary: #04A49C;
    --primary-dark: #038C86;
    --secondary: #5B5C5C;
    --heading: #142B4F;

    width: 100%;
    padding: 20px 20px;
    overflow: hidden;

    background:
        radial-gradient(circle at 10% 20%,
            rgba(4, 164, 156, .06),
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            rgba(4, 164, 156, .04),
            transparent 30%),
        #F8FCFC;
}


/* Container */

.eccrm-impact-container {

    width: 100%;
    max-width: 1200px;
    margin: auto;
}


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

.eccrm-impact-heading {

    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}


/* Badge */

.eccrm-impact-badge {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;
    padding: 7px 15px;

    color: var(--primary);

    background: rgba(4, 164, 156, .07);

    border: 1px solid rgba(4, 164, 156, .15);
    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
}


.eccrm-impact-badge span {

    width: 7px;
    height: 7px;

    background: var(--primary);

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(4, 164, 156, .10);
}


/* Heading */

.eccrm-impact-heading h2 {

    margin: 0 0 18px;

    color: var(--secondary);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1.08;

    letter-spacing: -1.7px;

    font-weight: 750;
}


.eccrm-impact-heading h2 span {

    color: var(--primary);
}


.eccrm-impact-heading p {

    max-width: 720px;

    margin: auto;

    color: var(--secondary);

    font-size: 15px;

    line-height: 1.75;
}


/* ============================================================
   8 CARD GRID
============================================================ */

.eccrm-impact-grid {

    display: grid;

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

    gap: 20px;
}


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

.eccrm-impact-card {

    position: relative;

    min-height: 270px;

    padding: 28px;

    background: #FFFFFF;

    border: 1px solid #E0EAEA;

    border-radius: 18px;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Top accent */

.eccrm-impact-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(90deg,
            var(--primary),
            rgba(4, 164, 156, .05));

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .3s ease;
}


/* Hover */

.eccrm-impact-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(4, 164, 156, .28);

    box-shadow:
        0 20px 45px rgba(20, 43, 79, .08);
}


.eccrm-impact-card:hover::before {

    transform: scaleX(1);
}


/* ============================================================
   NUMBER
============================================================ */

.eccrm-impact-number {

    position: absolute;

    top: 24px;
    right: 25px;

    color:
        rgba(4, 164, 156, .13);

    font-size: 28px;

    line-height: 1;

    font-weight: 800;
}


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

.eccrm-impact-icon {

    display: flex;

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

    width: 60px;
    height: 60px;

    margin-bottom: 22px;

    color: var(--primary);

    background:
        linear-gradient(135deg,
            rgba(4, 164, 156, .14),
            rgba(4, 164, 156, .04));

    border:
        1px solid rgba(4, 164, 156, .12);

    border-radius: 15px;

    transition:
        all .3s ease;
}


.eccrm-impact-icon svg {

    width: 28px;
    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

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


/* Icon hover */

.eccrm-impact-card:hover .eccrm-impact-icon {

    color: #FFFFFF;

    background:
        var(--primary);

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px rgba(4, 164, 156, .20);
}


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

.eccrm-impact-card h3 {

    max-width: 230px;

    margin:
        0 0 11px;

    color: var(--secondary);

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;
}


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

.eccrm-impact-card p {

    margin: 0;

    color: var(--secondary);

    font-size: 12.5px;

    line-height: 1.7;
}


/* Highlight card */

.eccrm-impact-highlight {

    background:
        linear-gradient(145deg,
            #FFFFFF,
            #F0FBFA);

    border-color:
        rgba(4, 164, 156, .22);
}


/* ============================================================
   BOTTOM MESSAGE
============================================================ */

.eccrm-impact-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    max-width: 530px;

    margin: 35px auto 0;

    padding: 18px 22px;

    background:
        rgba(4, 164, 156, .07);

    border:
        1px solid rgba(4, 164, 156, .14);

    border-radius: 13px;
}


.eccrm-impact-bottom-icon {

    display: flex;

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

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    color: var(--primary);

    background: #FFFFFF;

    border-radius: 10px;
}


.eccrm-impact-bottom-icon svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

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


.eccrm-impact-bottom strong {

    display: block;

    margin-bottom: 3px;

    color: var(--secondary);

    font-size: 13px;
}


.eccrm-impact-bottom span {

    display: block;

    color: var(--secondary);

    font-size: 11px;

    line-height: 1.5;
}


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

.eccrm-impact-cta {

    display: flex;

    justify-content: center;

    margin-top: 28px;
}


.eccrm-impact-button {

    display: inline-flex;

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

    gap: 9px;

    min-height: 48px;

    padding: 0 22px;

    color: #FFFFFF !important;

    background:
        var(--primary);

    border:
        1px solid var(--primary);

    border-radius: 7px;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 9px 25px rgba(4, 164, 156, .18);

    transition: all .25s ease;
}


.eccrm-impact-button:hover {

    color: #FFFFFF !important;

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px rgba(4, 164, 156, .25);
}


.eccrm-impact-button svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

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


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

@media (max-width: 1050px) {

    .eccrm-impact-grid {

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

    }

}


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

@media (max-width: 650px) {

    .eccrm-impact-section {

        padding:
            65px 15px;

    }


    .eccrm-impact-heading {

        margin-bottom:
            38px;

    }


    .eccrm-impact-heading h2 {

        font-size:
            clamp(30px, 8vw, 38px);

        letter-spacing:
            -1px;

    }


    .eccrm-impact-heading p {

        font-size:
            13px;

    }


    .eccrm-impact-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .eccrm-impact-card {

        min-height:
            auto;

        padding:
            25px;

    }


    .eccrm-impact-icon {

        width:
            54px;

        height:
            54px;

    }


    .eccrm-impact-icon svg {

        width:
            25px;

        height:
            25px;

    }


    .eccrm-impact-number {

        top:
            22px;

        right:
            23px;

        font-size:
            25px;

    }


    .eccrm-impact-card h3 {

        font-size:
            16px;

    }


    .eccrm-impact-card p {

        font-size:
            12px;

    }


    .eccrm-impact-bottom {

        align-items:
            flex-start;

        padding:
            17px;

    }

}


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

@media (max-width: 400px) {

    .eccrm-impact-section {

        padding:
            50px 12px;

    }


    .eccrm-impact-heading h2 {

        font-size:
            28px;

    }


    .eccrm-impact-card {

        padding:
            22px;

        border-radius:
            14px;

    }

}

/* Benefits Section End */



/* ============================================================
   ECCRM - CUSTOMER TRUST SECTION
============================================================ */

.eccrm-trust-section {

    --eccrm-primary: #04A49C;
    --eccrm-primary-dark: #038C86;
    --eccrm-secondary: #5B5C5C;
    --eccrm-heading: #142B4F;

    position: relative;

    width: 100%;

    padding: 95px 20px;

    overflow: hidden;

    background:
        radial-gradient(circle at 8% 15%,
            rgba(4, 164, 156, .06),
            transparent 28%),

        radial-gradient(circle at 92% 85%,
            rgba(4, 164, 156, .045),
            transparent 30%),

        linear-gradient(180deg,
            #FFFFFF 0%,
            #F6FBFB 100%);
}


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

.eccrm-trust-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* ============================================================
   HEADER
============================================================ */

.eccrm-trust-header {

    max-width: 760px;

    margin: 0 auto 45px;

    text-align: center;
}


/* ============================================================
   BADGE
============================================================ */

.eccrm-trust-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    padding: 7px 15px;

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .07);

    border:
        1px solid rgba(4, 164, 156, .15);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .3px;
}


.eccrm-trust-badge span {

    width: 7px;

    height: 7px;

    background:
        var(--eccrm-primary);

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(4, 164, 156, .10);
}


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

.eccrm-trust-header h2 {

    margin: 0 0 16px;

    color:
        var(--eccrm-secondary);

    font-size:
        clamp(34px, 4vw, 50px);

    line-height: 1.08;

    letter-spacing:
        -1.6px;

    font-weight: 750;
}


.eccrm-trust-header h2 span {

    color:
        var(--eccrm-primary);
}


.eccrm-trust-header p {

    max-width: 680px;

    margin: 0 auto 25px;

    color:
        var(--eccrm-secondary);

    font-size: 14px;

    line-height: 1.75;
}


/* ============================================================
   TRUST COUNTER
============================================================ */

.eccrm-trust-counter {

    display: inline-flex;

    align-items: baseline;

    gap: 8px;

    padding: 9px 17px;

    background:
        #FFFFFF;

    border:
        1px solid #E0EAEA;

    border-radius: 50px;

    box-shadow:
        0 5px 18px rgba(20, 43, 79, .04);
}


.eccrm-trust-counter strong {

    color:
        var(--eccrm-primary);

    font-size: 19px;

    line-height: 1;

    font-weight: 800;
}


.eccrm-trust-counter span {

    color:
        var(--eccrm-secondary);

    font-size: 10px;

    font-weight: 600;
}


/* ============================================================
   CLIENT LOGOS
============================================================ */

.eccrm-client-logos {

    display: grid;

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

    align-items: center;

    gap: 15px;

    margin-bottom: 38px;

    padding:
        18px 20px;

    background:
        rgba(255, 255, 255, .80);

    border:
        1px solid #E2EAEA;

    border-radius: 15px;
}


.eccrm-logo-item {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding:
        8px 15px;

    border-right:
        1px solid #E8EEEE;
}


.eccrm-logo-item:last-child {

    border-right:
        none;
}


.eccrm-logo-item img {

    display: block;

    max-width: 125px;

    max-height: 38px;

    width: auto;

    height: auto;

    object-fit: contain;

    filter:
        grayscale(100%);

    opacity:
        .65;

    transition:
        filter .3s ease,
        opacity .3s ease,
        transform .3s ease;
}


.eccrm-logo-item:hover img {

    filter:
        grayscale(0%);

    opacity:
        1;

    transform:
        scale(1.04);
}


/* ============================================================
   TESTIMONIAL GRID
============================================================ */

.eccrm-testimonials-grid {

    display: grid;

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

    gap: 20px;
}


/* ============================================================
   TESTIMONIAL CARD
============================================================ */

.eccrm-testimonial-card {

    position: relative;

    padding:
        27px 28px 23px;

    background:
        #FFFFFF;

    border:
        1px solid #DFE8E8;

    border-radius:
        18px;

    overflow:
        hidden;

    box-shadow:
        0 7px 25px rgba(20, 43, 79, .045);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.eccrm-testimonial-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--eccrm-primary),
            rgba(4, 164, 156, .05));

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .35s ease;
}


.eccrm-testimonial-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(4, 164, 156, .28);

    box-shadow:
        0 20px 45px rgba(20, 43, 79, .09);
}


.eccrm-testimonial-card:hover::before {

    transform:
        scaleX(1);
}


/* ============================================================
   CUSTOMER PROFILE
============================================================ */

.eccrm-testimonial-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 23px;
}


.eccrm-customer-profile {

    display: flex;

    align-items: center;

    gap: 13px;
}


.eccrm-customer-avatar {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    overflow: hidden;

    background:
        #EAF7F6;

    border:
        2px solid rgba(4, 164, 156, .12);

    border-radius: 50%;
}


.eccrm-customer-avatar img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.eccrm-customer-profile h3 {

    margin:
        0 0 3px;

    color:
        var(--eccrm-primary);

    font-size: 13px;

    font-weight: 750;
}


.eccrm-customer-profile p {

    margin: 0;

    color:
        var(--eccrm-secondary);

    font-size: 10px;
}


/* ============================================================
   RATING
============================================================ */

.eccrm-rating {

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 10px;

    background:
        rgba(4, 164, 156, .055);

    border-radius:
        8px;
}


.eccrm-rating span {

    color:
        var(--eccrm-primary);

    font-size: 13px;

    letter-spacing:
        1px;
}


.eccrm-rating small {

    color:
        var(--eccrm-secondary);

    font-size: 9px;

    font-weight: 700;
}


/* ============================================================
   QUOTE ICON
============================================================ */

.eccrm-quote-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    margin-bottom: 13px;

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .08);

    border-radius:
        9px;
}


.eccrm-quote-icon svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ============================================================
   QUOTE
============================================================ */

.eccrm-testimonial-card blockquote {

    margin:
        0 0 23px;

    color:
        var(--eccrm-secondary);

    font-size:
        14px;

    line-height:
        1.75;

    font-weight:
        500;
}


/* ============================================================
   TESTIMONIAL FOOTER
============================================================ */

.eccrm-testimonial-footer {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top:
        14px;

    border-top:
        1px solid #E8EEEE;
}


.eccrm-testimonial-footer span {

    padding:
        5px 8px;

    color:
        var(--eccrm-secondary);

    background:
        #F5F8F8;

    border-radius:
        5px;

    font-size:
        8.5px;

    font-weight:
        600;
}


.eccrm-testimonial-footer span:first-child {

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .07);
}


/* ============================================================
   TRUST METRICS
============================================================ */

.eccrm-trust-metrics {

    display: grid;

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

    margin-top:
        28px;

    padding:
        18px 20px;

    background:
        #FFFFFF;

    border:
        1px solid #E1EAEA;

    border-radius:
        15px;

    box-shadow:
        0 5px 20px rgba(20, 43, 79, .035);
}


.eccrm-metric {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        0 20px;

    border-right:
        1px solid #E5ECEC;
}


.eccrm-metric:first-child {

    padding-left:
        0;
}


.eccrm-metric:last-child {

    border-right:
        none;

    padding-right:
        0;
}


/* Metric icon */

.eccrm-metric-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 39px;

    height: 39px;

    flex-shrink: 0;

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .08);

    border-radius:
        10px;
}


.eccrm-metric-icon svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.eccrm-metric strong {

    display: block;

    margin-bottom:
        2px;

    color:
        var(--eccrm-primary);

    font-size:
        11px;
}


.eccrm-metric span {

    display: block;

    color:
        var(--eccrm-secondary);

    font-size:
        9px;
}


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

.eccrm-trust-cta {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin-top:
        30px;
}


.eccrm-trust-cta p {

    margin:
        0;

    color:
        var(--eccrm-secondary);

    font-size:
        12px;

    font-weight:
        600;
}


.eccrm-trust-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height:
        46px;

    padding:
        0 20px;

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary);

    border:
        1px solid var(--eccrm-primary);

    border-radius:
        7px;

    text-decoration:
        none !important;

    font-size:
        11px;

    font-weight:
        700;

    box-shadow:
        0 9px 24px rgba(4, 164, 156, .18);

    transition:
        all .25s ease;
}


.eccrm-trust-button:hover {

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px rgba(4, 164, 156, .25);
}


.eccrm-trust-button svg {

    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

@media (max-width: 900px) {

    .eccrm-trust-section {

        padding:
            75px 20px;
    }


    .eccrm-client-logos {

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

    }


    .eccrm-logo-item {

        border-right:
            none;

        border-bottom:
            1px solid #E8EEEE;
    }


    .eccrm-logo-item:nth-child(n+4) {

        border-bottom:
            none;
    }


    .eccrm-trust-metrics {

        grid-template-columns:
            1fr;
    }


    .eccrm-metric {

        padding:
            12px 0;

        border-right:
            none;

        border-bottom:
            1px solid #E5ECEC;
    }


    .eccrm-metric:first-child {

        padding-top:
            0;
    }


    .eccrm-metric:last-child {

        padding-bottom:
            0;

        border-bottom:
            none;
    }

}


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

@media (max-width: 650px) {

    .eccrm-trust-section {

        padding:
            60px 15px;
    }


    .eccrm-trust-header {

        margin-bottom:
            35px;
    }


    .eccrm-trust-header h2 {

        font-size:
            clamp(30px, 8vw, 38px);

        letter-spacing:
            -1px;
    }


    .eccrm-trust-header p {

        font-size:
            13px;
    }


    .eccrm-client-logos {

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

        gap:
            5px;

        padding:
            12px;

        margin-bottom:
            25px;
    }


    .eccrm-logo-item {

        min-height:
            55px;

        padding:
            7px;
    }


    .eccrm-logo-item img {

        max-width:
            105px;

        max-height:
            30px;
    }


    .eccrm-testimonials-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .eccrm-testimonial-card {

        padding:
            22px 20px;
    }


    .eccrm-testimonial-top {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .eccrm-rating {

        align-self:
            flex-start;
    }


    .eccrm-testimonial-card blockquote {

        font-size:
            13px;

        line-height:
            1.7;
    }


    .eccrm-trust-cta {

        flex-direction:
            column;

        gap:
            14px;

        text-align:
            center;
    }


    .eccrm-trust-button {

        width:
            100%;

        max-width:
            280px;
    }

}


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

@media (max-width: 400px) {

    .eccrm-trust-section {

        padding:
            50px 12px;
    }


    .eccrm-client-logos {

        gap:
            3px;

        padding:
            8px;
    }


    .eccrm-logo-item {

        min-height:
            48px;
    }


    .eccrm-testimonial-card {

        border-radius:
            15px;

        padding:
            20px 17px;
    }


    .eccrm-customer-avatar {

        width:
            47px;

        height:
            47px;
    }


    .eccrm-testimonial-card blockquote {

        font-size:
            12px;
    }

}


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

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

    .eccrm-trust-section *,
    .eccrm-trust-section *::before,
    .eccrm-trust-section *::after {

        animation:
            none !important;

        transition:
            none !important;
    }

}

/* Testimonial Ends */



/* =========================================================
   ECCRM FINAL CTA
========================================================= */

.eccrm-final-cta {

    --eccrm-primary: #04A49C;
    --eccrm-secondary: #5B5C5C;

    position: relative;

    width: 100%;

    padding: 85px 20px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            rgba(4, 164, 156, 0.035),
            #ffffff 45%,
            rgba(4, 164, 156, 0.045));

    box-sizing: border-box;
}


.eccrm-final-cta *,
.eccrm-final-cta *::before,
.eccrm-final-cta *::after {

    box-sizing: border-box;
}


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

.eccrm-final-cta-container {

    position: relative;

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    padding: 0 20px;
}


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

.eccrm-final-cta-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    padding: 58px 40px;

    text-align: center;

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

    border:
        1px solid rgba(4, 164, 156, 0.15);

    border-radius: 22px;

    box-shadow:
        0 18px 55px rgba(4, 164, 156, 0.08);
}


/* =========================================================
   BADGE
========================================================= */

.eccrm-final-cta-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 15px;

    margin-bottom: 17px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, 0.08);

    border:
        1px solid rgba(4, 164, 156, 0.16);

    border-radius: 50px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.eccrm-final-cta h2 {

    margin: 0 0 15px;

    color: var(--eccrm-secondary);

    font-size:
        clamp(30px, 4vw, 45px);

    line-height: 1.12;

    letter-spacing: -1.3px;

    font-weight: 800;
}


.eccrm-final-cta h2 span {

    color: var(--eccrm-primary);
}


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

.eccrm-final-cta p {

    max-width: 680px;

    margin: 0 auto;

    color:
        rgba(91, 92, 92, 0.72);

    font-size: 13px;

    line-height: 1.7;
}


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

.eccrm-final-cta-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 27px;
}


.eccrm-final-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 21px;

    border-radius: 7px;

    text-decoration: none !important;

    font-size: 11px;

    font-weight: 800;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        color .25s ease;
}


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

.eccrm-final-btn-primary {

    color: #ffffff !important;

    background:
        var(--eccrm-primary);

    border:
        1px solid var(--eccrm-primary);

    box-shadow:
        0 8px 20px rgba(4, 164, 156, 0.18);
}


.eccrm-final-btn-primary:hover {

    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(4, 164, 156, 0.25);
}


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

.eccrm-final-btn-secondary {

    color:
        var(--eccrm-secondary) !important;

    background:
        #ffffff;

    border:
        1px solid rgba(91, 92, 92, 0.22);
}


.eccrm-final-btn-secondary:hover {

    color:
        var(--eccrm-primary) !important;

    border-color:
        rgba(4, 164, 156, 0.35);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(4, 164, 156, 0.08);
}


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

.eccrm-final-btn svg {

    width: 15px;

    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .25s ease;
}


.eccrm-final-btn:hover svg {

    transform:
        translateX(3px);
}


/* =========================================================
   REASSURANCE NOTE
========================================================= */

.eccrm-final-cta-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 17px;

    color:
        rgba(91, 92, 92, 0.58);

    font-size: 9px;

    line-height: 1.5;
}


.eccrm-note-dot {

    width: 6px;

    height: 6px;

    flex: 0 0 6px;

    background:
        var(--eccrm-primary);

    border-radius: 50%;
}


/* =========================================================
   DECORATIVE GLOW
========================================================= */

.eccrm-cta-glow {

    position: absolute;

    z-index: 0;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background:
        rgba(4, 164, 156, 0.07);

    filter: blur(50px);

    pointer-events: none;
}


.eccrm-cta-glow-left {

    top: -100px;

    left: -100px;
}


.eccrm-cta-glow-right {

    right: -100px;

    bottom: -120px;
}


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

@media (max-width: 768px) {

    .eccrm-final-cta {

        padding:
            70px 18px;
    }


    .eccrm-final-cta-container {

        padding: 0 8px;
    }


    .eccrm-final-cta-content {

        padding:
            48px 28px;

        border-radius: 18px;
    }


    .eccrm-final-cta h2 {

        font-size:
            clamp(28px, 6vw, 38px);
    }


    .eccrm-final-cta p {

        font-size: 12px;
    }

}


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

@media (max-width: 600px) {

    .eccrm-final-cta {

        padding:
            55px 13px;
    }


    .eccrm-final-cta-container {

        padding: 0;

        max-width: 100%;
    }


    .eccrm-final-cta-content {

        padding:
            38px 18px;

        border-radius: 15px;
    }


    .eccrm-final-cta-badge {

        margin-bottom: 14px;

        padding:
            6px 12px;

        font-size: 8px;
    }


    .eccrm-final-cta h2 {

        margin-bottom: 13px;

        font-size:
            clamp(26px, 8vw, 34px);

        line-height: 1.15;

        letter-spacing: -.7px;
    }


    .desktop-break {

        display: none;
    }


    .eccrm-final-cta p {

        font-size: 11px;

        line-height: 1.65;
    }


    /* ---------------------------------------------
       BUTTONS
    --------------------------------------------- */

    .eccrm-final-cta-buttons {

        flex-direction: column;

        width: 100%;

        gap: 9px;

        margin-top: 22px;
    }


    .eccrm-final-btn {

        width: 100%;

        min-height: 45px;

        font-size: 10px;
    }


    .eccrm-final-cta-note {

        align-items: flex-start;

        max-width: 290px;

        margin:
            14px auto 0;

        font-size: 8px;

        text-align: left;
    }


    .eccrm-note-dot {

        margin-top: 4px;
    }


    .eccrm-cta-glow {

        width: 180px;

        height: 180px;

        filter: blur(40px);
    }

}


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

@media (max-width: 380px) {

    .eccrm-final-cta {

        padding:
            45px 10px;
    }


    .eccrm-final-cta-content {

        padding:
            32px 15px;
    }


    .eccrm-final-cta h2 {

        font-size: 25px;
    }


    .eccrm-final-cta p {

        font-size: 10.5px;
    }


    .eccrm-final-btn {

        min-height: 43px;

        font-size: 10px;
    }

}


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

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

    .eccrm-final-cta *,
    .eccrm-final-cta *::before,
    .eccrm-final-cta *::after {

        transition: none !important;

        animation: none !important;
    }

}

/* Final CTA Ends */

/* =========================================================
   ECCRM PRODUCT VIDEO SECTION
========================================================= */

.eccrm-video-section {

    --eccrm-primary: #04A49C;
    --eccrm-secondary: #5B5C5C;

    width: 100%;

    padding: 25px 20px;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            rgba(4, 164, 156, 0.025) 100%);

    overflow: hidden;

    box-sizing: border-box;
}


.eccrm-video-section *,
.eccrm-video-section *::before,
.eccrm-video-section *::after {

    box-sizing: border-box;
}


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

.eccrm-video-container {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.eccrm-video-header {

    max-width: 780px;

    margin: 0 auto 35px;

    text-align: center;
}


/* =========================================================
   BADGE
========================================================= */

.eccrm-video-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 15px;

    margin-bottom: 15px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, 0.08);

    border:
        1px solid rgba(4, 164, 156, 0.17);

    border-radius: 50px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.eccrm-video-header h2 {

    margin: 0 0 13px;

    color: var(--eccrm-secondary);

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.12;

    letter-spacing: -1.3px;

    font-weight: 800;
}


.eccrm-video-header h2 span {

    color: var(--eccrm-primary);
}


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

.eccrm-video-header p {

    max-width: 700px;

    margin: 0 auto;

    color:
        rgba(91, 92, 92, .70);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   VIDEO WRAPPER
========================================================= */

.eccrm-video-wrapper {

    position: relative;

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.eccrm-video-card {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 8.7;

    padding: 0;

    margin: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(4, 164, 156, .14);

    border-radius: 16px;

    cursor: pointer;

    box-shadow:
        0 20px 55px rgba(4, 164, 156, .12);

    appearance: none;

    -webkit-appearance: none;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.eccrm-video-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 28px 70px rgba(4, 164, 156, .18);
}


/* =========================================================
   THUMBNAIL
========================================================= */

.eccrm-video-thumbnail {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .7s ease;
}


.eccrm-video-card:hover .eccrm-video-thumbnail {

    transform:
        scale(1.025);
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.eccrm-video-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(4, 164, 156, .25),
            rgba(0, 0, 0, .05) 50%,
            rgba(91, 92, 92, .20));

    transition:
        background .3s ease;
}


.eccrm-video-card:hover .eccrm-video-overlay {

    background:
        linear-gradient(90deg,
            rgba(4, 164, 156, .32),
            rgba(0, 0, 0, .10) 50%,
            rgba(91, 92, 92, .28));
}


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

.eccrm-play-button {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 78px;

    height: 78px;

    margin:
        -39px 0 0 -39px;

    background:
        var(--eccrm-primary);

    border:
        5px solid rgba(255, 255, 255, .95);

    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .22),

        0 0 0 10px rgba(4, 164, 156, .18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.eccrm-video-card:hover .eccrm-play-button {

    transform:
        scale(1.08);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .25),

        0 0 0 15px rgba(4, 164, 156, .13);
}


/* =========================================================
   PLAY ICON
========================================================= */

.eccrm-play-icon {

    width: 0;

    height: 0;

    margin-left: 5px;

    border-top:
        12px solid transparent;

    border-bottom:
        12px solid transparent;

    border-left:
        18px solid #ffffff;
}


/* =========================================================
   VIDEO INFORMATION
========================================================= */

.eccrm-video-info {

    position: absolute;

    left: 25px;

    bottom: 23px;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;

    text-align: left;
}


.eccrm-video-logo {

    color: #ffffff;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: -.8px;
}


.eccrm-video-title {

    color: rgba(255, 255, 255, .90);

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   VIDEO DURATION
========================================================= */

.eccrm-video-duration {

    position: absolute;

    right: 20px;

    bottom: 18px;

    z-index: 3;

    padding:
        6px 9px;

    color: #ffffff;

    background:
        rgba(91, 92, 92, .75);

    border-radius: 5px;

    font-size: 9px;

    font-weight: 700;

    backdrop-filter:
        blur(5px);
}


/* =========================================================
   FEATURE STRIP
========================================================= */

.eccrm-video-features {

    display: grid;

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

    width: 100%;

    max-width: 900px;

    height: 103px;

    margin: 25px auto 0;

    padding:
        17px 0;

    background: #ffffff;

    border:
        1px solid rgba(91, 92, 92, .10);

    border-radius: 12px;

    box-shadow:
        0 8px 30px rgba(91, 92, 92, .05);
}


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

.eccrm-video-feature {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        4px 15px;

    color: var(--eccrm-secondary);

    font-size: 10px;

    font-weight: 700;

    border-right:
        1px solid rgba(91, 92, 92, .10);
}


.eccrm-video-feature:last-child {

    border-right: 0;
}


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

.eccrm-feature-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    min-width: 30px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .08);

    border-radius: 8px;
}


.eccrm-feature-icon svg {

    width: 40px;

    height: 30px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.eccrm-video-cta {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    margin-top: 28px;

    text-align: center;
}


.eccrm-video-demo-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding:
        0 21px;

    color: #ffffff !important;

    background:
        var(--eccrm-primary);

    border-radius: 7px;

    text-decoration: none !important;

    font-size: 10px;

    font-weight: 800;

    box-shadow:
        0 8px 22px rgba(4, 164, 156, .18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.eccrm-video-demo-button:hover {

    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(4, 164, 156, .25);
}


.eccrm-video-demo-button svg {

    width: 14px;

    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-video-cta>span {

    color:
        rgba(91, 92, 92, .55);

    font-size: 9px;
}


/* =========================================================
   VIDEO MODAL
========================================================= */

.eccrm-video-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background:
        rgba(91, 92, 92, .78);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    backdrop-filter:
        blur(7px);
}


/* Active modal */

.eccrm-video-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


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

.eccrm-video-modal-content {

    position: relative;

    width: 100%;

    max-width: 1000px;

    background: #ffffff;

    border-radius: 14px;

    overflow: visible;

    transform:
        scale(.94);

    transition:
        transform .35s ease;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, .30);
}


.eccrm-video-modal.active .eccrm-video-modal-content {

    transform:
        scale(1);
}


/* =========================================================
   VIDEO PLAYER
========================================================= */

.eccrm-video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #5B5C5C;
    border-radius: 14px;
}

.eccrm-video-player iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}

/* =========================================================
   YOUTUBE IFRAME - RESPONSIVE FIX
   Scoped only to the ECCRM video modal
========================================================= */

.eccrm-video-player iframe#eccrmDemoVideo {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    display: block !important;
    border: 0 !important;
    background: #000;
}

/* YouTube fallback */
.eccrm-youtube-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background: #000;
}

.eccrm-youtube-fallback.active {
    display: flex;
}

.eccrm-youtube-fallback-inner {
    width: min(90%, 500px);
    color: #fff;
}

.eccrm-youtube-fallback-title {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 800;
}

.eccrm-youtube-fallback p {
    margin: 0 auto 20px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    line-height: 1.6;
}

.eccrm-youtube-fallback-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    color: #fff !important;
    background: #04A49C;
    border-radius: 7px;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 800;
}


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

.eccrm-video-close {

    position: absolute;

    top: -45px;

    right: 0;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    padding: 0;

    color: #ffffff;

    background:
        rgba(91, 92, 92, .75);

    border: 1px solid rgba(255, 255, 255, .35);

    border-radius: 50%;

    cursor: pointer;

    backdrop-filter:
        blur(5px);
}


.eccrm-video-close span {

    position: absolute;

    width: 14px;

    height: 1.5px;

    background: #ffffff;

    border-radius: 10px;
}


.eccrm-video-close span:first-child {

    transform:
        rotate(45deg);
}


.eccrm-video-close span:last-child {

    transform:
        rotate(-45deg);
}


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

@media (max-width: 800px) {

    .eccrm-video-section {

        padding:
            70px 18px;
    }


    .eccrm-video-header {

        margin-bottom: 28px;
    }


    .eccrm-video-features {

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

        gap: 0;
    }


    .eccrm-video-feature {

        min-height: 48px;
    }


    .eccrm-video-feature:nth-child(2) {

        border-right: 0;
    }


    .eccrm-video-feature:nth-child(-n+2) {

        border-bottom:
            1px solid rgba(91, 92, 92, .10);
    }

}


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

@media (max-width: 600px) {

    .eccrm-youtube-fallback {
        padding: 18px;
    }

    .eccrm-youtube-fallback-title {
        font-size: 18px;
    }

    .eccrm-youtube-fallback p {
        font-size: 11px;
    }

    .eccrm-video-section {

        padding:
            55px 13px;
    }


    .eccrm-video-container {

        max-width: 100%;
    }


    .eccrm-video-header {

        margin-bottom: 24px;
    }


    .eccrm-video-badge {

        padding:
            6px 12px;

        margin-bottom: 12px;

        font-size: 8px;
    }


    .eccrm-video-header h2 {

        font-size:
            clamp(25px, 8vw, 33px);

        line-height: 1.15;

        letter-spacing: -.7px;
    }


    .eccrm-desktop-break {

        display: none;
    }


    .eccrm-video-header p {

        font-size: 11px;

        line-height: 1.65;
    }


    /* ---------------------------------------------
       VIDEO
    --------------------------------------------- */

    .eccrm-video-card {

        aspect-ratio: 16 / 9;

        border-radius: 10px;

        box-shadow:
            0 12px 35px rgba(4, 164, 156, .10);
    }


    .eccrm-video-card:hover {

        transform: none;
    }


    .eccrm-play-button {

        width: 58px;

        height: 58px;

        margin:
            -29px 0 0 -29px;

        border-width: 3px;

        box-shadow:
            0 7px 20px rgba(0, 0, 0, .22),

            0 0 0 7px rgba(4, 164, 156, .15);
    }


    .eccrm-play-icon {

        border-top-width: 9px;

        border-bottom-width: 9px;

        border-left-width: 14px;

        margin-left: 3px;
    }


    .eccrm-video-info {

        left: 12px;

        bottom: 12px;
    }


    .eccrm-video-logo {

        font-size: 16px;
    }


    .eccrm-video-title {

        font-size: 8px;
    }


    .eccrm-video-duration {

        right: 10px;

        bottom: 10px;

        padding:
            4px 7px;

        font-size: 7px;
    }


    /* ---------------------------------------------
       FEATURES
    --------------------------------------------- */

    .eccrm-video-features {

        grid-template-columns:
            1fr 1fr;

        margin-top: 16px;

        padding: 8px 0;

        border-radius: 9px;
    }


    .eccrm-video-feature {

        min-height: 48px;

        gap: 6px;

        padding:
            5px 8px;

        font-size: 8px;

        text-align: left;
    }


    .eccrm-feature-icon {

        width: 26px;

        min-width: 26px;

        height: 26px;

        border-radius: 7px;
    }


    .eccrm-feature-icon svg {

        width: 13px;

        height: 13px;
    }


    /* ---------------------------------------------
       CTA
    --------------------------------------------- */

    .eccrm-video-cta {

        margin-top: 21px;
    }


    .eccrm-video-demo-button {

        width: 100%;

        max-width: 280px;

        min-height: 44px;

        font-size: 10px;
    }


    .eccrm-video-cta>span {

        max-width: 280px;

        font-size: 8px;

        line-height: 1.5;
    }


    /* ---------------------------------------------
       MODAL
    --------------------------------------------- */

    .eccrm-video-modal {

        padding:
            15px;
    }


    .eccrm-video-player {

        border-radius: 9px;
    }


    .eccrm-video-close {

        top: -42px;

        width: 32px;

        height: 32px;
    }

}


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

@media (max-width: 380px) {

    .eccrm-video-section {

        padding:
            45px 10px;
    }


    .eccrm-video-header h2 {

        font-size: 25px;
    }


    .eccrm-video-header p {

        font-size: 10.5px;
    }


    .eccrm-video-feature {

        font-size: 7.5px;
    }


    .eccrm-video-logo {

        font-size: 14px;
    }

}


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

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

    .eccrm-video-section *,
    .eccrm-video-section *::before,
    .eccrm-video-section *::after {

        transition: none !important;

        animation: none !important;
    }

}

/* =========================================================
   ECCRM YOUTUBE EMBED (additive, non-conflicting rules)
========================================================= */

.eccrm-yt-player {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000000;
}


.eccrm-yt-player iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    border: 0;
}


/* Fallback for older browsers without aspect-ratio support */

@supports not (aspect-ratio: 16 / 9) {

    .eccrm-yt-player {

        height: 0;

        padding-bottom: 56.25%;
    }

}


/* =========================================================
   RESPONSIVE TUNING FOR YOUTUBE EMBED
========================================================= */

@media (max-width: 800px) {

    .eccrm-yt-player {

        aspect-ratio: 16 / 9;
    }

}


@media (max-width: 600px) {

    .eccrm-yt-player {

        aspect-ratio: 16 / 9;

        border-radius: 9px;

        overflow: hidden;
    }

}


@media (max-width: 380px) {

    .eccrm-yt-player {

        aspect-ratio: 4 / 3;
    }

}

/* Video End */

/* Video End */

/* =========================================================
     ECCRM DEPLOYMENT TIMELINE CSS
     UNIQUE / ISOLATED
=========================================================  */



/* =========================================================
   ROOT SECTION
========================================================= */

.eccrm-deploy-section {

    --eccrm-deploy-primary: #04A49C;

    --eccrm-deploy-blue: #04A49C;

    --eccrm-deploy-dark: #5b5c5c;

    --eccrm-deploy-text: #5B5C5C;

    --eccrm-deploy-line: #5b5c5c;

    width: 100%;

    padding: 75px 20px;

    background: #ffffff;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   RESET ONLY INSIDE THIS COMPONENT
========================================================= */

.eccrm-deploy-section *,
.eccrm-deploy-section *::before,
.eccrm-deploy-section *::after {

    box-sizing: border-box;
}


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

.eccrm-deploy-container {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.eccrm-deploy-header {

    max-width: 720px;

    margin: 0 auto 52px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.eccrm-deploy-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    padding: 6px 13px;

    color: var(--eccrm-deploy-primary);

    background: rgba(4, 164, 156, 0.07);

    border: 1px solid rgba(4, 164, 156, 0.15);

    border-radius: 50px;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


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

.eccrm-deploy-header h2 {

    margin: 0 0 12px;

    color: var(--eccrm-deploy-dark);

    font-size: clamp(28px, 3.5vw, 42px);

    line-height: 1.15;

    letter-spacing: -1px;

    font-weight: 800;
}


.eccrm-deploy-header h2 span {

    color: var(--eccrm-deploy-blue);
}


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

.eccrm-deploy-header p {

    max-width: 620px;

    margin: 0 auto;

    color: rgba(91, 92, 92, 0.70);

    font-size: 13px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   TIMELINE
========================================================= */

.eccrm-deploy-timeline {

    position: relative;

    display: grid;

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

    width: 100%;

    min-height: 150px;

    padding: 0 18px;

    isolation: isolate;
}


/* =========================================================
   HORIZONTAL CONNECTOR
========================================================= */

.eccrm-deploy-line {

    position: absolute;

    top: 28px;

    left: 9%;

    right: 9%;

    height: 2px;

    z-index: -1;

    background: var(--eccrm-deploy-line);
}


/* =========================================================
   CONNECTOR INNER LINE
========================================================= */

.eccrm-deploy-line span {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(90deg,
            rgba(22, 118, 210, .15),
            rgba(22, 118, 210, .35),
            rgba(22, 118, 210, .15));
}


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

.eccrm-deploy-step {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;

    text-align: center;
}


/* =========================================================
   NUMBER CIRCLE
========================================================= */

.eccrm-deploy-number {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 56px;

    height: 56px;

    margin: 0 auto;

    background: var(--eccrm-deploy-blue);

    border: 4px solid #ffffff;

    border-radius: 50%;

    box-shadow:
        0 5px 15px rgba(22, 118, 210, 0.16);

    z-index: 2;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.eccrm-deploy-number span {

    color: #ffffff;

    font-size: 12px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .2px;
}


/* =========================================================
   SMALL POINTER / DROP SHAPE
========================================================= */

.eccrm-deploy-number::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: 13px;

    height: 13px;

    background: var(--eccrm-deploy-blue);

    transform:
        translateX(-50%) rotate(45deg);

    border-radius: 2px;

    z-index: -1;
}


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

.eccrm-deploy-content {

    width: 100%;

    margin-top: 25px;

    padding: 0 8px;
}


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

.eccrm-deploy-content h3 {

    margin: 0;

    color: var(--eccrm-deploy-dark);

    font-size: 12px;

    line-height: 1.45;

    font-weight: 700;

    letter-spacing: -.15px;
}


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

.eccrm-deploy-step:hover .eccrm-deploy-number {

    transform: translateY(-3px);

    box-shadow:
        0 9px 22px rgba(22, 118, 210, 0.25);
}


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

@media (max-width: 900px) {

    .eccrm-deploy-section {

        padding: 65px 18px;
    }


    .eccrm-deploy-header {

        margin-bottom: 45px;
    }


    .eccrm-deploy-timeline {

        padding: 0 5px;
    }


    .eccrm-deploy-number {

        width: 50px;

        height: 50px;
    }


    .eccrm-deploy-number span {

        font-size: 11px;
    }


    .eccrm-deploy-content {

        margin-top: 23px;

        padding: 0 4px;
    }


    .eccrm-deploy-content h3 {

        font-size: 10.5px;

        line-height: 1.4;
    }


    .eccrm-deploy-line {

        top: 25px;

        left: 7%;

        right: 7%;
    }

}


/* =========================================================
   SMALL TABLET / LARGE MOBILE
========================================================= */

@media (max-width: 700px) {

    .eccrm-deploy-section {

        padding: 55px 18px;
    }


    .eccrm-deploy-header {

        margin-bottom: 38px;
    }


    .eccrm-deploy-header h2 {

        font-size: clamp(27px,
                6vw,
                34px);

        letter-spacing: -.7px;
    }


    .eccrm-deploy-header p {

        font-size: 12px;
    }


    /*
       Change to 3 x 2 layout.
       This prevents the six steps from
       becoming too narrow.
    */

    .eccrm-deploy-timeline {

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

        row-gap: 42px;

        min-height: auto;

        padding: 0;
    }


    .eccrm-deploy-line {

        display: none;
    }


    .eccrm-deploy-number {

        width: 52px;

        height: 52px;
    }


    .eccrm-deploy-content {

        margin-top: 22px;
    }


    .eccrm-deploy-content h3 {

        font-size: 11px;
    }

}


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

@media (max-width: 520px) {

    .eccrm-deploy-section {

        padding: 50px 16px;
    }


    .eccrm-deploy-header {

        margin-bottom: 34px;
    }


    .eccrm-deploy-eyebrow {

        font-size: 8px;

        padding: 6px 11px;
    }


    .eccrm-deploy-header h2 {

        font-size: 27px;

        line-height: 1.18;
    }


    .eccrm-deploy-header p {

        font-size: 11px;

        line-height: 1.65;
    }


    /*
       Two-column mobile layout.
    */

    .eccrm-deploy-timeline {

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

        row-gap: 38px;
    }


    .eccrm-deploy-number {

        width: 48px;

        height: 48px;

        border-width: 3px;
    }


    .eccrm-deploy-number span {

        font-size: 10px;
    }


    .eccrm-deploy-content {

        margin-top: 20px;

        padding: 0 5px;
    }


    .eccrm-deploy-content h3 {

        font-size: 10px;

        line-height: 1.4;
    }


    .eccrm-deploy-desktop {

        display: none;
    }

}


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

@media (max-width: 360px) {

    .eccrm-deploy-section {

        padding: 42px 12px;
    }


    .eccrm-deploy-header h2 {

        font-size: 24px;
    }


    .eccrm-deploy-header p {

        font-size: 10.5px;
    }


    .eccrm-deploy-timeline {

        column-gap: 8px;

        row-gap: 34px;
    }


    .eccrm-deploy-number {

        width: 44px;

        height: 44px;
    }


    .eccrm-deploy-number span {

        font-size: 9px;
    }


    .eccrm-deploy-content {

        margin-top: 18px;
    }


    .eccrm-deploy-content h3 {

        font-size: 9px;
    }

}


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

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

    .eccrm-deploy-section * {

        transition: none !important;

        animation: none !important;
    }

}

/* implementation */

/* ============================================================
   ECCRM FIELD SERVICE MANAGEMENT HERO
   COMPLETE RESPONSIVE CSS

   Brand:
   Primary   : #04A49C
   Secondary : #5B5C5C
============================================================ */


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

.eccrm-fsm-hero {

    --eccrm-primary: #04A49C;
    --eccrm-primary-dark: #038F89;

    --eccrm-secondary: #5B5C5C;

    --eccrm-heading: #142B4F;

    --eccrm-white: #FFFFFF;

    --eccrm-border: #DCE9E8;

    --eccrm-light: #F4FBFA;

    --eccrm-muted: #849090;

}


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

.eccrm-fsm-hero {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        5px 20px 32px;

    background:

        radial-gradient(circle at 80% 15%,
            rgba(4, 164, 156, .13),
            transparent 30%),

        radial-gradient(circle at 10% 80%,
            rgba(4, 164, 156, .06),
            transparent 28%),

        linear-gradient(135deg,
            #F3FBFA 0%,
            #FFFFFF 48%,
            #F8FCFC 100%);
}


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

.eccrm-fsm-hero::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    top: -300px;

    right: -180px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(4, 164, 156, .08),
            transparent 70%);

    pointer-events: none;

}


.eccrm-fsm-hero::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    bottom: -250px;

    left: -180px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(4, 164, 156, .05),
            transparent 70%);

    pointer-events: none;

}


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

.eccrm-fsm-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1280px;

    margin-left: auto;

    margin-right: auto;

}


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

.eccrm-fsm-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .94fr) minmax(0, 1.06fr);

    align-items: center;

    gap: 55px;

    min-height: 555px;

}


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

.eccrm-fsm-hero-content {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 650px;

}


/* ============================================================
   EYEBROW
============================================================ */

.eccrm-fsm-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    padding:
        7px 14px;

    color: var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .07);

    border:
        1px solid rgba(4, 164, 156, .18);

    border-radius: 50px;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 700;

}


/* Eyebrow Dot */

.eccrm-fsm-eyebrow-dot {

    position: relative;

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    background:
        var(--eccrm-primary);

    border-radius: 50%;

}


.eccrm-fsm-eyebrow-dot::after {

    content: "";

    position: absolute;

    width: 13px;

    height: 13px;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(4, 164, 156, .25);

    border-radius: 50%;

}


/* ============================================================
   H1
============================================================ */

.eccrm-fsm-title {

    max-width: 680px;

    margin:
        0 0 22px;

    padding: 0;

    color:
        var(--eccrm-secondary);

    font-size:
        clamp(38px, 2.1vw, 40px);

    line-height:
        1.055;

    font-weight:
        750;

    letter-spacing:
        -2.5px;

}


/* Highlight */

.eccrm-fsm-title span {

    color:
        var(--eccrm-primary);

}


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

.eccrm-fsm-description {

    max-width: 610px;

    margin:
        0 0 27px;

    padding: 0;

    color:
        var(--eccrm-secondary);

    font-size: 16px;

    line-height: 1.72;

    font-weight: 400;

}


/* ============================================================
   CTA AREA
============================================================ */

.eccrm-fsm-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin:
        0 0 17px;

}


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

.eccrm-fsm-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 52px;

    padding:
        0 21px;

    border-radius: 8px;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease;

}


/* Button SVG */

.eccrm-fsm-btn svg {

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .25s ease;

}


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

.eccrm-fsm-btn-primary {

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary);

    border:
        1px solid var(--eccrm-primary);

    box-shadow:
        0 9px 25px rgba(4, 164, 156, .22);

}


.eccrm-fsm-btn-primary:hover {

    color:
        #FFFFFF !important;

    background:
        var(--eccrm-primary-dark);

    border-color:
        var(--eccrm-primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px rgba(4, 164, 156, .28);

}


.eccrm-fsm-btn-primary:hover svg {

    transform:
        translateX(4px);

}


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

.eccrm-fsm-btn-secondary {

    color:
        var(--eccrm-secondary) !important;

    background:
        #FFFFFF;

    border:
        1px solid #CBDCDC;

}


.eccrm-fsm-btn-secondary:hover {

    color:
        var(--eccrm-primary) !important;

    background:
        #FFFFFF;

    border-color:
        var(--eccrm-primary);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(20, 43, 79, .07);

}


/* ============================================================
   TRUST LIST
============================================================ */

.eccrm-fsm-trust-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 17px;

    margin-bottom: 22px;

}


.eccrm-fsm-trust-item {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        var(--eccrm-secondary);

    font-size: 10px;

    font-weight: 600;

    line-height: 1.4;

    white-space: nowrap;

}


/* ============================================================
   CHECK ICON
============================================================ */

.eccrm-fsm-check {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    color:
        var(--eccrm-primary);

    background:
        rgba(4, 164, 156, .09);

    border-radius: 50%;

}


.eccrm-fsm-check svg {

    width: 9px;

    height: 9px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ============================================================
   FEATURE LIST
============================================================ */

.eccrm-fsm-feature-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

}


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

.eccrm-fsm-feature {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 31px;

    padding:
        6px 10px;

    color:
        var(--eccrm-secondary);

    background:
        rgba(255, 255, 255, .82);

    border:
        1px solid var(--eccrm-border);

    border-radius: 6px;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    transition:
        all .2s ease;

}


.eccrm-fsm-feature:hover {

    color:
        var(--eccrm-primary);

    background:
        #FFFFFF;

    border-color:
        rgba(4, 164, 156, .35);

    transform:
        translateY(-1px);

}


.eccrm-fsm-feature svg {

    width: 14px;

    height: 14px;

    flex-shrink: 0;

    fill: none;

    stroke:
        var(--eccrm-primary);

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.eccrm-fsm-hero-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 550px;

    overflow: visible;

    isolation: isolate;

}


/* ============================================================
   VISUAL GLOW
============================================================ */

.eccrm-fsm-visual-glow {

    position: absolute;

    z-index: -1;

    width: 510px;

    height: 510px;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(4, 164, 156, .13) 0%,
            rgba(4, 164, 156, .055) 38%,
            transparent 72%);

    pointer-events: none;

}


/* ============================================================
   IMAGE WRAPPER
============================================================ */

.eccrm-fsm-image-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 730px;

    margin:
        0 auto;

    overflow: visible;

    z-index: 3;

}


/* ============================================================
   TRANSPARENT PRODUCT IMAGE
============================================================ */

.eccrm-fsm-product-image {

    display: block;

    width: 100%;

    max-width: 730px;

    height: auto;

    margin:
        0 auto;

    padding: 0;

    object-fit: contain;

    background:
        transparent !important;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    filter:
        drop-shadow(0 25px 35px rgba(20, 43, 79, .10));

    transition:
        transform .35s ease,
        filter .35s ease;

}


/* Product image hover */

.eccrm-fsm-product-image:hover {

    transform:
        translateY(-5px);

    filter:
        drop-shadow(0 32px 45px rgba(20, 43, 79, .15));

}


/* ============================================================
   STATISTICS
============================================================ */

.eccrm-fsm-statistics {

    position: relative;

    z-index: 20;

    display: grid;

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

    width: 100%;

    margin-top: 5px;

    background:
        #FFFFFF;

    border:
        1px solid rgba(4, 164, 156, .12);

    border-radius: 13px;

    overflow: hidden;

    box-shadow:
        0 13px 35px rgba(20, 43, 79, .065);

}


/* ============================================================
   STAT ITEM
============================================================ */

.eccrm-fsm-stat {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 98px;

    padding:
        13px 15px;

    text-align: center;

}


/* Vertical Divider */

.eccrm-fsm-stat:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 25%;

    right: 0;

    width: 1px;

    height: 50%;

    background:
        #E1EBEA;

}


/* Number */

.eccrm-fsm-stat strong {

    display: block;

    margin:
        0 0 5px;

    color:
        var(--eccrm-primary);

    font-size: 34px;

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.8px;

}


/* Plus / Percentage */

.eccrm-fsm-stat strong span {

    font-size:
        .65em;

    font-weight:
        700;

}


/* Label */

.eccrm-fsm-stat>span {

    color:
        var(--eccrm-secondary);

    font-size: 10px;

    line-height: 1.3;

    font-weight: 600;

}


/* ============================================================
   LARGE LAPTOP — 1200PX
============================================================ */

@media (max-width: 1200px) {

    .eccrm-fsm-hero {

        padding:
            20px 20px 30px;

    }


    .eccrm-fsm-hero-grid {

        gap: 40px;

    }


    .eccrm-fsm-title {

        font-size:
            clamp(40px, 4.5vw, 56px);

    }


    .eccrm-fsm-image-wrapper {

        max-width:
            680px;

    }

}


/* ============================================================
   TABLET / SMALL LAPTOP — 1050PX
============================================================ */

@media (max-width: 1050px) {

    .eccrm-fsm-hero-grid {

        grid-template-columns:
            1fr;

        gap: 35px;

        min-height:
            auto;

    }


    .eccrm-fsm-hero-content {

        max-width:
            800px;

        margin:
            0 auto;

        text-align:
            center;

    }


    .eccrm-fsm-title {

        max-width:
            850px;

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .eccrm-fsm-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .eccrm-fsm-actions {

        justify-content:
            center;

    }


    .eccrm-fsm-trust-list {

        justify-content:
            center;

    }


    .eccrm-fsm-feature-list {

        justify-content:
            center;

    }


    .eccrm-fsm-hero-visual {

        min-height:
            500px;

        max-width:
            800px;

        margin:
            0 auto;

    }


    .eccrm-fsm-image-wrapper {

        max-width:
            720px;

    }

}


/* ============================================================
   TABLET — 900PX
============================================================ */

@media (max-width: 900px) {

    .eccrm-fsm-hero {

        padding:
            65px 20px 30px;

    }


    .eccrm-fsm-title {

        font-size:
            clamp(38px, 6vw, 52px);

        letter-spacing:
            -1.8px;

    }


    .eccrm-fsm-hero-visual {

        min-height:
            450px;

    }


    .eccrm-fsm-visual-glow {

        width:
            430px;

        height:
            430px;

    }


    .eccrm-fsm-image-wrapper {

        max-width:
            680px;

    }

}


/* ============================================================
   MOBILE — 767PX
============================================================ */

@media (max-width: 767px) {

    .eccrm-fsm-hero {

        padding:
            45px 15px 25px;

    }

    /* Product image comes first */
    .eccrm-fsm-hero-visual {
        order: 1;
    }

    /* Text/content comes after the image */
    .eccrm-fsm-hero-content {
        order: 2;
    }


    .eccrm-fsm-hero::before {

        width:
            350px;

        height:
            350px;

        top:
            -180px;

        right:
            -150px;

    }


    .eccrm-fsm-hero::after {

        width:
            300px;

        height:
            300px;

        bottom:
            -180px;

        left:
            -130px;

    }


    /* Main */

    .eccrm-fsm-hero-grid {

        display:
            flex;

        flex-direction:
            column;

        gap:
            25px;

    }


    /* Content */

    .eccrm-fsm-hero-content {

        width:
            100%;

        max-width:
            100%;

        text-align:
            center;

    }


    /* Eyebrow */

    .eccrm-fsm-eyebrow {

        margin-bottom:
            15px;

        padding:
            6px 11px;

        font-size:
            10px;

    }


    /* H1 */

    .eccrm-fsm-title {

        max-width:
            100%;

        margin:
            0 0 17px;

        font-size:
            clamp(32px, 8.5vw, 42px);

        line-height:
            1.08;

        letter-spacing:
            -1.2px;

    }


    /* Description */

    .eccrm-fsm-description {

        max-width:
            650px;

        margin:
            0 auto 22px;

        font-size:
            14px;

        line-height:
            1.65;

    }


    /* Buttons */

    .eccrm-fsm-actions {

        flex-direction:
            column;

        width:
            100%;

        gap:
            9px;

        margin-bottom:
            17px;

    }


    .eccrm-fsm-btn {

        width:
            100%;

        min-height:
            49px;

        padding:
            0 18px;

        font-size:
            12px;

    }


    /* Trust */

    .eccrm-fsm-trust-list {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        width:
            fit-content;

        margin:
            0 auto 20px;

        gap:
            8px;

        text-align:
            left;

    }


    .eccrm-fsm-trust-item {

        font-size:
            9px;

    }


    /* Features */

    .eccrm-fsm-feature-list {

        justify-content:
            center;

        gap:
            5px;

    }


    .eccrm-fsm-feature {

        min-height:
            28px;

        padding:
            5px 8px;

        font-size:
            8px;

    }


    .eccrm-fsm-feature svg {

        width:
            12px;

        height:
            12px;

    }


    /* Product visual */

    .eccrm-fsm-hero-visual {

        width:
            100%;

        min-height:
            auto;

        margin-top:
            5px;

    }


    .eccrm-fsm-visual-glow {

        width:
            350px;

        height:
            350px;

    }


    .eccrm-fsm-image-wrapper {

        width:
            100%;

        max-width:
            650px;

    }


    .eccrm-fsm-product-image {

        width:
            100%;

        max-width:
            650px;

        filter:
            drop-shadow(0 18px 27px rgba(20, 43, 79, .10));

    }


    .eccrm-fsm-product-image:hover {

        transform:
            none;

    }


    /* Statistics */

    .eccrm-fsm-statistics {

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

        margin-top:
            20px;

        border-radius:
            10px;

    }


    .eccrm-fsm-stat {

        min-height:
            82px;

        padding:
            10px;

    }


    .eccrm-fsm-stat strong {

        margin-bottom:
            4px;

        font-size:
            27px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            8px;

    }


    /* Horizontal mobile divider */

    .eccrm-fsm-stat:nth-child(1),
    .eccrm-fsm-stat:nth-child(2) {

        border-bottom:
            1px solid #E1EBEA;

    }


    /* Remove vertical divider from right column */

    .eccrm-fsm-stat:nth-child(2)::after,
    .eccrm-fsm-stat:nth-child(4)::after {

        display:
            none;

    }

}


/* ============================================================
   SMALL MOBILE — 576PX
============================================================ */

@media (max-width: 576px) {

    .eccrm-fsm-hero {

        padding:
            38px 13px 22px;

    }


    .eccrm-fsm-eyebrow {

        font-size:
            9px;

        padding:
            6px 10px;

    }


    .eccrm-fsm-title {

        font-size:
            clamp(29px, 9vw, 37px);

        letter-spacing:
            -1px;

    }


    .eccrm-fsm-description {

        font-size:
            13px;

        line-height:
            1.65;

    }


    .eccrm-fsm-btn {

        min-height:
            48px;

        font-size:
            11.5px;

    }


    .eccrm-fsm-trust-list {

        gap:
            7px;

    }


    .eccrm-fsm-trust-item {

        font-size:
            8.5px;

    }


    .eccrm-fsm-feature-list {

        gap:
            4px;

    }


    .eccrm-fsm-feature {

        min-height:
            27px;

        padding:
            5px 7px;

        font-size:
            7.5px;

    }


    .eccrm-fsm-feature svg {

        width:
            11px;

        height:
            11px;

    }


    .eccrm-fsm-hero-visual {

        margin-top:
            8px;

    }


    .eccrm-fsm-image-wrapper {

        width:
            106%;

        max-width:
            none;

        margin-left:
            -3%;

    }


    .eccrm-fsm-statistics {

        margin-top:
            17px;

    }


    .eccrm-fsm-stat {

        min-height:
            76px;

        padding:
            8px;

    }


    .eccrm-fsm-stat strong {

        font-size:
            24px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            7.5px;

    }

}


/* ============================================================
   EXTRA SMALL MOBILE — 420PX
============================================================ */

@media (max-width: 420px) {

    .eccrm-fsm-hero {

        padding:
            34px 11px 20px;

    }


    .eccrm-fsm-eyebrow {

        font-size:
            8.5px;

        padding:
            5px 9px;

    }


    .eccrm-fsm-eyebrow-dot {

        width:
            6px;

        height:
            6px;

    }


    .eccrm-fsm-title {

        font-size:
            29px;

        line-height:
            1.09;

        letter-spacing:
            -.8px;

    }


    .eccrm-fsm-description {

        font-size:
            12.5px;

    }


    .eccrm-fsm-btn {

        min-height:
            47px;

        font-size:
            11px;

    }


    .eccrm-fsm-feature {

        min-height:
            25px;

        padding:
            4px 6px;

        font-size:
            7px;

    }


    .eccrm-fsm-feature svg {

        width:
            10px;

        height:
            10px;

    }


    .eccrm-fsm-image-wrapper {

        width:
            110%;

        margin-left:
            -5%;

    }


    .eccrm-fsm-statistics {

        margin-top:
            14px;

    }


    .eccrm-fsm-stat {

        min-height:
            70px;

    }


    .eccrm-fsm-stat strong {

        font-size:
            21px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            7px;

    }

}


/* ============================================================
   VERY SMALL MOBILE — 360PX
============================================================ */

@media (max-width: 360px) {

    .eccrm-fsm-hero {

        padding:
            30px 9px 18px;

    }


    .eccrm-fsm-title {

        font-size:
            27px;

    }


    .eccrm-fsm-description {

        font-size:
            12px;

    }


    .eccrm-fsm-trust-item {

        font-size:
            8px;

    }


    .eccrm-fsm-feature-list {

        gap:
            3px;

    }


    .eccrm-fsm-feature {

        padding:
            4px 5px;

        font-size:
            6.7px;

    }


    .eccrm-fsm-stat strong {

        font-size:
            20px;

    }


    .eccrm-fsm-stat>span {

        font-size:
            6.7px;

    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.eccrm-fsm-btn:focus-visible {

    outline:
        3px solid rgba(4, 164, 156, .25);

    outline-offset:
        3px;

}


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

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

    .eccrm-fsm-hero *,
    .eccrm-fsm-hero *::before,
    .eccrm-fsm-hero *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}


/* ============================================================
   ECCRM MOBILE REFRESH / HEADER-VISIBLE FIX

   Purpose:
   - On mobile/tablet refresh, always return to the very top
     of the document so the site header is visible.
   - Do not stop at the first hero element/image.
   - Prevent scroll anchoring / lazy image layout from moving
     the viewport back into the hero after refresh.
   - Do not affect normal scrolling or intentional hash links.
============================================================ */

@media (max-width: 767px) {

    html.eccrm-mobile-refresh-lock,
    body.eccrm-mobile-refresh-lock {
        scroll-behavior: auto !important;
        overflow-anchor: none !important;
    }

    .eccrm-fsm-hero {
        scroll-margin-top: 0 !important;
        overflow-anchor: none !important;
    }

}

    /* ============================================================
   ECCRM MOBILE REFRESH / SCROLL RESTORATION FIX
   ------------------------------------------------------------
   Keep your existing HTML/content exactly as it is.
   Add this at the END of the existing hero code.
============================================================ */

@media (max-width: 767px) {

    html:has(.eccrm-fsm-hero),
    body:has(.eccrm-fsm-hero) {
        scroll-behavior: auto !important;
    }

    .eccrm-fsm-hero {
        scroll-margin-top: 0 !important;
    }

}
/* Workflow */
/* =========================================================
   ECCRM FIELD SERVICE WORKFLOW
   RESPONSIVE VERSION

   BRAND COLORS:
   #04a49c
   #5b5c5c
========================================================= */

.eccrm-field-service {

    --eccrm-primary: #04a49c;
    --eccrm-text: #5b5c5c;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(55px, 7vw, 75px) 20px;

    color: var(--eccrm-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


.eccrm-field-service *,
.eccrm-field-service *::before,
.eccrm-field-service *::after {

    box-sizing: border-box;

}


.eccrm-fs-container {

    width: min(1450px, 100%);

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.eccrm-fs-header {

    max-width: 900px;

    margin:
        0 auto clamp(42px, 5vw, 65px);

    text-align: center;

}


.eccrm-fs-eyebrow {

    display: inline-block;

    margin-bottom: 13px;

    color: var(--eccrm-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .18em;

}


.eccrm-fs-header h2 {

    margin: 0;

    color: var(--eccrm-text);

    font-size:
        clamp(34px, 5vw, 60px);

    line-height: 1.04;

    letter-spacing: -.045em;

    font-weight: 800;

}


.eccrm-fs-header h2 span {

    color: var(--eccrm-primary);

}


.eccrm-fs-header p {

    max-width: 830px;

    margin: 20px auto 0;

    color: var(--eccrm-text);

    font-size:
        clamp(13px, 1.5vw, 16px);

    line-height: 1.75;

}


/* =========================================================
   WORKFLOW ROW
========================================================= */

.eccrm-fs-workflow {

    display: flex;

    align-items: stretch;

    gap: 9px;

    width: 100%;

    margin-bottom: 28px;

}


.eccrm-fs-workflow-bottom {

    margin-top: 28px;

    margin-bottom: 0;

}


/* =========================================================
   WORKFLOW CARD
========================================================= */

.eccrm-fs-step {

    position: relative;

    display: flex;

    flex: 1;

    min-width: 0;

    flex-direction: column;

    align-items: center;

    padding:
        25px 13px 19px;

    border: 1px solid rgba(91, 92, 92, .16);

    border-radius: 18px;

    background: rgba(255, 255, 255, .65);

    color: var(--eccrm-text);

    text-align: center;

    cursor: pointer;

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

}


.eccrm-fs-step:hover {

    transform: translateY(-4px);

    border-color: var(--eccrm-primary);

    box-shadow:
        0 18px 40px rgba(4, 164, 156, .12);

}


.eccrm-fs-step.active {

    border-color: var(--eccrm-primary);

    background: rgba(4, 164, 156, .045);

    box-shadow:
        0 18px 45px rgba(4, 164, 156, .13);

}


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

.eccrm-fs-step-number {

    position: absolute;

    top: -14px;

    display: grid;

    place-items: center;

    width: 35px;

    height: 35px;

    border: 3px solid #fff;

    border-radius: 50%;

    background: var(--eccrm-text);

    color: #fff;

    font-size: 10px;

    font-weight: 900;

}


.eccrm-fs-step.active .eccrm-fs-step-number {

    background: var(--eccrm-primary);

}


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

.eccrm-fs-step-icon {

    display: grid;

    place-items: center;

    width: 55px;

    height: 55px;

    margin:
        7px 0 13px;

    border-radius: 15px;

    background: rgba(4, 164, 156, .08);

    color: var(--eccrm-primary);

}


.eccrm-fs-step-icon svg {

    width: 28px;

    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.eccrm-fs-step-body {

    display: block;

}


.eccrm-fs-step-body strong {

    display: block;

    min-height: 36px;

    color: var(--eccrm-text);

    font-size: 13px;

    line-height: 1.3;

    font-weight: 800;

}


.eccrm-fs-step-body small {

    display: block;

    margin-top: 5px;

    color: var(--eccrm-text);

    font-size: 10px;

    line-height: 1.4;

    opacity: .75;

}


/* =========================================================
   ARROWS
========================================================= */

.eccrm-fs-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 19px;

    color: var(--eccrm-primary);

    font-size: 17px;

    font-weight: 800;

}


/* =========================================================
   PRODUCT SHOWCASE
========================================================= */

.eccrm-fs-showcase {

    display: grid;

    grid-template-columns:
        minmax(240px, .8fr) minmax(450px, 1.9fr) minmax(230px, .75fr);

    align-items: center;

    gap: 38px;

    margin-top: 4px;

    padding:
        clamp(28px, 4vw, 50px);

    border:
        1px solid rgba(4, 164, 156, .13);

    border-radius: 30px;

    background:
        linear-gradient(135deg,
            rgba(4, 164, 156, .055),
            rgba(91, 92, 92, .025));

    box-shadow:
        0 25px 75px rgba(91, 92, 92, .07);

}


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

.eccrm-fs-label {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color: var(--eccrm-primary);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .1em;

}


.eccrm-fs-label span:first-child {

    display: grid;

    place-items: center;

    width: 29px;

    height: 29px;

    border-radius: 50%;

    background: var(--eccrm-primary);

    color: #fff;

    font-size: 9px;

}


.eccrm-fs-copy h3 {

    margin: 0;

    color: var(--eccrm-text);

    font-size:
        clamp(26px, 3vw, 35px);

    line-height: 1.08;

    letter-spacing: -.035em;

}


.eccrm-fs-copy p {

    margin:
        18px 0 24px;

    color: var(--eccrm-text);

    font-size: 14px;

    line-height: 1.75;

}


.eccrm-fs-copy ul {

    display: grid;

    gap: 10px;

    margin:
        0 0 27px;

    padding: 0;

    list-style: none;

}


.eccrm-fs-copy li {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--eccrm-text);

    font-size: 12px;

    font-weight: 650;

}


.eccrm-fs-copy li span {

    display: grid;

    place-items: center;

    flex: 0 0 20px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: var(--eccrm-primary);

    color: #fff;

    font-size: 10px;

    font-weight: 900;

}


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

.eccrm-fs-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding:
        14px 19px;

    border-radius: 10px;

    background: var(--eccrm-primary);

    color: #fff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.eccrm-fs-cta:hover {

    transform: translateY(-3px);

    box-shadow:
        0 13px 30px rgba(4, 164, 156, .22);

}


.eccrm-fs-cta span {

    font-size: 18px;

}


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

.eccrm-fs-visual {

    position: relative;

    min-width: 0;

}


.eccrm-fs-visual-glow {

    position: absolute;

    inset:
        10% 8% 5%;

    border-radius: 50%;

    background: var(--eccrm-primary);

    opacity: .08;

    filter: blur(50px);

}


.eccrm-fs-image-card {

    position: relative;

    z-index: 2;

    overflow: hidden;

    width: 100%;

    background: transparent;

  

}


.eccrm-fs-image-card img {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    object-fit: contain;

}


.eccrm-fs-image-badge {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    width: max-content;

    max-width: 100%;

    margin:
        13px auto 0;

    padding:
        7px 12px;

    border:
        1px solid rgba(4, 164, 156, .13);

    border-radius: 50px;

    background: rgba(255, 255, 255, .75);

    color: var(--eccrm-text);

    font-size: 9px;

    font-weight: 700;

}


.eccrm-fs-image-badge span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--eccrm-primary);

    box-shadow:
        0 0 0 4px rgba(4, 164, 156, .09);

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.eccrm-fs-highlights {

    display: grid;

    gap: 12px;

}


.eccrm-fs-highlight {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px;

    border:
        1px solid rgba(91, 92, 92, .11);

    border-radius: 13px;

    background: rgba(255, 255, 255, .55);

    transition:
        transform .25s ease,
        border-color .25s ease;

}


.eccrm-fs-highlight:hover {

    transform: translateX(-4px);

    border-color: var(--eccrm-primary);

}


.eccrm-fs-highlight>span {

    display: grid;

    place-items: center;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    border-radius: 11px;

    background: rgba(4, 164, 156, .08);

    color: var(--eccrm-primary);

    font-size: 10px;

    font-weight: 900;

}


.eccrm-fs-highlight strong {

    display: block;

    color: var(--eccrm-text);

    font-size: 11px;

}


.eccrm-fs-highlight small {

    display: block;

    margin-top: 3px;

    color: var(--eccrm-text);

    font-size: 9px;

    line-height: 1.4;

    opacity: .75;

}


/* =========================================================
   LIFECYCLE
========================================================= */

.eccrm-fs-lifecycle {

    margin-top: 32px;

    padding:
        clamp(28px, 4vw, 45px) clamp(18px, 4vw, 35px);

    border:
        1px solid rgba(4, 164, 156, .12);

    border-radius: 27px;

    background:
        rgba(4, 164, 156, .035);

}


/* =========================================================
   LIFECYCLE HEADER
========================================================= */

.eccrm-fs-lifecycle-header {

    margin-bottom: 31px;

    text-align: center;

}


.eccrm-fs-lifecycle-header>span {

    color: var(--eccrm-primary);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .16em;

}


.eccrm-fs-lifecycle-header h3 {

    margin:
        8px 0 4px;

    color: var(--eccrm-text);

    font-size:
        clamp(25px, 3vw, 37px);

    line-height: 1.1;

    letter-spacing: -.03em;

}


.eccrm-fs-lifecycle-header p {

    margin: 0;

    color: var(--eccrm-text);

    font-size: 12px;

    line-height: 1.5;

    opacity: .8;

}


/* =========================================================
   LIFECYCLE FLOW
========================================================= */

.eccrm-fs-lifecycle-flow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.eccrm-fs-lifecycle-flow>li:not(.lifecycle-arrow) {

    flex: 1;

    min-width: 65px;

    text-align: center;

}


.eccrm-fs-lifecycle-flow b {

    display: grid;

    place-items: center;

    width: 41px;

    height: 41px;

    margin:
        0 auto 7px;

    border-radius: 50%;

    background: var(--eccrm-primary);

    color: #fff;

    font-size: 9px;

    font-weight: 900;

}


.eccrm-fs-lifecycle-flow strong {

    display: block;

    color: var(--eccrm-text);

    font-size: 9px;

    line-height: 1.25;

}


.eccrm-fs-lifecycle-flow small {

    display: block;

    margin-top: 3px;

    color: var(--eccrm-text);

    font-size: 8px;

    opacity: .7;

}


.eccrm-fs-lifecycle-flow .lifecycle-arrow {

    flex: 0 0 auto;

    color: var(--eccrm-primary);

    font-size: 16px;

    font-weight: 800;

}


/* =========================================================
   CUSTOMER HISTORY
========================================================= */

.eccrm-fs-history {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: max-content;

    max-width: 100%;

    margin:
        27px auto 0;

    padding:
        10px 17px;

    border:
        1px solid var(--eccrm-primary);

    border-radius: 50px;

}


.eccrm-fs-history-icon {

    display: grid;

    place-items: center;

    flex: 0 0 32px;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--eccrm-primary);

    color: #fff;

    font-size: 15px;

    font-weight: 700;

}


.eccrm-fs-history strong {

    display: block;

    color: var(--eccrm-primary);

    font-size: 11px;

}


.eccrm-fs-history small {

    display: block;

    margin-top: 2px;

    color: var(--eccrm-text);

    font-size: 8px;

}


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

@media (max-width: 1150px) {

    .eccrm-fs-showcase {

        grid-template-columns:
            1fr 1.5fr;

    }


    .eccrm-fs-highlights {

        grid-column: 1 / -1;

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

    }


    .eccrm-fs-workflow {

        overflow-x: auto;

        padding:
            14px 8px 18px;

        scrollbar-width: thin;

    }


    .eccrm-fs-step {

        flex: 0 0 185px;

    }

}


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

@media (max-width: 800px) {

    .eccrm-field-service {

        padding:
            60px 14px;

    }


    .eccrm-fs-showcase {

        display: flex;

        flex-direction: column;

        gap: 30px;

        padding:
            30px 20px;

    }


    .eccrm-fs-copy {

        width: 100%;

        text-align: center;

    }


    .eccrm-fs-label {

        justify-content: center;

    }


    .eccrm-fs-copy ul {

        max-width: 450px;

        margin-left: auto;

        margin-right: auto;

        text-align: left;

    }


    .eccrm-fs-cta {

        width: 100%;

        max-width: 330px;

    }


    .eccrm-fs-visual {

        width: 100%;

        order: 2;

    }


    .eccrm-fs-highlights {

        display: grid;

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

        width: 100%;

        order: 3;

    }


    /*
       Lifecycle becomes a 4 + 4 layout.
    */

    .eccrm-fs-lifecycle-flow {

        display: grid;

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

        row-gap: 30px;

    }


    .eccrm-fs-lifecycle-flow .lifecycle-arrow {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .eccrm-field-service {

        padding:
            50px 10px;

    }


    /* -------------------------------------------
       HEADER
    -------------------------------------------- */

    .eccrm-fs-header {

        margin-bottom: 38px;

    }


    .eccrm-fs-eyebrow {

        font-size: 9px;

        letter-spacing: .11em;

    }


    .eccrm-fs-header h2 {

        font-size: 31px;

        line-height: 1.08;

    }


    .eccrm-fs-header p {

        margin-top: 15px;

        font-size: 13px;

        line-height: 1.65;

    }


    /* -------------------------------------------
       WORKFLOW → VERTICAL TIMELINE
    -------------------------------------------- */

    .eccrm-fs-workflow {

        display: flex;

        flex-direction: column;

        gap: 0;

        overflow: visible;

        padding: 0;

        margin-bottom: 0;

    }


    .eccrm-fs-step {

        display: grid;

        grid-template-columns:
            48px 1fr;

        grid-template-rows:
            auto;

        align-items: center;

        flex: none;

        width: 100%;

        min-height: 78px;

        padding:
            13px 14px;

        text-align: left;

    }


    .eccrm-fs-step-number {

        position: relative;

        top: auto;

        left: auto;

        grid-row: 1;

        width: 38px;

        height: 38px;

        border: 0;

    }


    .eccrm-fs-step-icon {

        position: absolute;

        top: 50%;

        right: 14px;

        width: 40px;

        height: 40px;

        margin: 0;

        transform: translateY(-50%);

        border-radius: 11px;

    }


    .eccrm-fs-step-icon svg {

        width: 21px;

        height: 21px;

    }


    .eccrm-fs-step-body {

        padding-right: 50px;

    }


    .eccrm-fs-step-body strong {

        min-height: 0;

        font-size: 13px;

    }


    .eccrm-fs-step-body small {

        margin-top: 4px;

        font-size: 10px;

    }


    /* Vertical connector */

    .eccrm-fs-arrow {

        position: relative;

        display: block;

        flex: none;

        width: 2px;

        height: 22px;

        margin-left: 32px;

        font-size: 0;

        background: var(--eccrm-primary);

        opacity: .75;

    }


    .eccrm-fs-arrow::after {

        content: "";

        position: absolute;

        left: 50%;

        bottom: -1px;

        width: 7px;

        height: 7px;

        border-right: 2px solid var(--eccrm-primary);

        border-bottom: 2px solid var(--eccrm-primary);

        transform:
            translateX(-50%) rotate(45deg);

    }


    /* -------------------------------------------
       SHOWCASE
    -------------------------------------------- */

    .eccrm-fs-showcase {

        margin-top: 34px;

        padding:
            27px 15px;

        border-radius: 22px;

    }


    .eccrm-fs-copy h3 {

        font-size: 26px;

    }


    .eccrm-fs-copy p {

        font-size: 13px;

        line-height: 1.7;

    }


    .eccrm-fs-copy li {

        font-size: 11px;

    }


    .eccrm-fs-visual {

        width: 100%;

    }


    .eccrm-fs-image-card {

        border-radius: 14px;

    }


    .eccrm-fs-image-card img {

        width: 100%;

        height: auto;

    }


    .eccrm-fs-image-badge {

        font-size: 8px;

    }


    /* -------------------------------------------
       HIGHLIGHTS
    -------------------------------------------- */

    .eccrm-fs-highlights {

        grid-template-columns: 1fr;

    }


    .eccrm-fs-highlight {

        padding: 11px;

    }


    /* -------------------------------------------
       LIFECYCLE
    -------------------------------------------- */

    .eccrm-fs-lifecycle {

        margin-top: 28px;

        padding:
            30px 14px;

        border-radius: 21px;

    }


    .eccrm-fs-lifecycle-header {

        margin-bottom: 28px;

    }


    .eccrm-fs-lifecycle-header>span {

        font-size: 8px;

        letter-spacing: .11em;

    }


    .eccrm-fs-lifecycle-header h3 {

        font-size: 25px;

    }


    .eccrm-fs-lifecycle-header p {

        font-size: 11px;

    }


    /*
       Mobile lifecycle becomes a clean
       vertical timeline.
    */

    .eccrm-fs-lifecycle-flow {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

    }


    .eccrm-fs-lifecycle-flow>li:not(.lifecycle-arrow) {

        display: grid;

        grid-template-columns:
            48px 1fr;

        align-items: center;

        flex: none;

        min-width: 0;

        min-height: 65px;

        text-align: left;

        position: relative;

    }


    .eccrm-fs-lifecycle-flow b {

        width: 38px;

        height: 38px;

        margin: 0;

        font-size: 9px;

    }


    .eccrm-fs-lifecycle-flow strong {

        font-size: 12px;

    }


    .eccrm-fs-lifecycle-flow small {

        margin-top: 3px;

        font-size: 9px;

    }


    /*
       Vertical line.
    */

    .eccrm-fs-lifecycle-flow>li:not(.lifecycle-arrow):not(:last-child)::after {

        content: "";

        position: absolute;

        left: 18px;

        bottom: -1px;

        width: 2px;

        height: 25px;

        background: var(--eccrm-primary);

    }


    /*
       Hide desktop arrows.
    */

    .eccrm-fs-lifecycle-flow .lifecycle-arrow {

        display: none;

    }


    /* -------------------------------------------
       HISTORY
    -------------------------------------------- */

    .eccrm-fs-history {

        width: 100%;

        max-width: 420px;

        margin-top: 27px;

        padding:
            11px 12px;

        border-radius: 15px;

        justify-content: flex-start;

    }


    .eccrm-fs-history-icon {

        flex: 0 0 31px;

        width: 31px;

        height: 31px;

    }


    .eccrm-fs-history strong {

        font-size: 10px;

    }


    .eccrm-fs-history small {

        font-size: 8px;

        line-height: 1.35;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .eccrm-field-service {

        padding-left: 8px;

        padding-right: 8px;

    }


    .eccrm-fs-header h2 {

        font-size: 27px;

    }


    .eccrm-fs-step {

        min-height: 72px;

        padding:
            11px 10px;

    }


    .eccrm-fs-step-number {

        width: 35px;

        height: 35px;

        font-size: 9px;

    }


    .eccrm-fs-step-body strong {

        font-size: 12px;

    }


    .eccrm-fs-step-body small {

        font-size: 9px;

    }


    .eccrm-fs-step-icon {

        right: 10px;

        width: 36px;

        height: 36px;

    }


    .eccrm-fs-copy h3 {

        font-size: 23px;

    }


    .eccrm-fs-lifecycle-header h3 {

        font-size: 23px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.eccrm-fs-step:focus-visible,
.eccrm-fs-cta:focus-visible {

    outline:
        3px solid var(--eccrm-primary);

    outline-offset: 4px;

}


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

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

    .eccrm-field-service *,
    .eccrm-field-service *::before,
    .eccrm-field-service *::after {

        transition: none !important;

        animation: none !important;

        scroll-behavior: auto !important;

    }

}
/* Workflow */

/* Features */
/* ==========================================================
   ECCRM FSM - ISOLATED COMPONENT
   Namespace: ecr26
   Root: #ecr26-field-platform
   ========================================================== */

#ecr26-field-platform {
    --ecr26-primary: #04a49c;
    --ecr26-text: #5b5c5c;
    --ecr26-dark: #5b5c5c;
    --ecr26-border: #dfeceb;
    --ecr26-soft: #f5fbfa;
    --ecr26-white: #ffffff;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
   

    background: #ffffff !important;

    position: relative !important;
    isolation: isolate !important;

    overflow: hidden !important;

    color: var(--ecr26-text) !important;

    box-sizing: border-box !important;
}


#ecr26-field-platform *,
#ecr26-field-platform *::before,
#ecr26-field-platform *::after {
    box-sizing: border-box !important;
}


/* ==========================================================
   WRAPPER
   ========================================================== */

#ecr26-field-platform .ecr26-wrap {
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

#ecr26-field-platform .ecr26-head {
    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto 40px !important;

    padding: 0 !important;

    text-align: center !important;
}


#ecr26-field-platform .ecr26-eyebrow {
    display: block !important;

    margin: 0 0 13px !important;
    padding: 0 !important;

    color: var(--ecr26-primary) !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    letter-spacing: 1.8px !important;
    line-height: 1.4 !important;

    text-transform: uppercase !important;
}


#ecr26-field-platform .ecr26-heading {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ecr26-dark) !important;

    font-size: clamp(30px, 4vw, 41px) !important;
    font-weight: 800 !important;

    line-height: 1.08 !important;
    letter-spacing: -1.8px !important;
}


#ecr26-field-platform .ecr26-heading span {
    color: var(--ecr26-primary) !important;
}


#ecr26-field-platform .ecr26-subheading {
    display: block !important;

    max-width: 760px !important;

    margin: 19px auto 0 !important;
    padding: 0 !important;

    color: var(--ecr26-text) !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.7 !important;
}


/* ==========================================================
   TOP NAV
   ========================================================== */

#ecr26-field-platform .ecr26-nav {
    display: grid !important;

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 0 22px !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-navitem {
    appearance: none !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 11px !important;

    margin: 0 !important;
    padding: 12px 15px !important;

    border: 1px solid var(--ecr26-border) !important;
    border-radius: 12px !important;

    outline: none !important;

    background: #ffffff !important;
    color: var(--ecr26-dark) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;

    cursor: pointer !important;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


#ecr26-field-platform .ecr26-navitem:hover {
    border-color: var(--ecr26-primary) !important;

    transform: translateY(-2px) !important;
}


#ecr26-field-platform .ecr26-navitem.ecr26-active {
    background: var(--ecr26-primary) !important;
    color: #ffffff !important;

    border-color: var(--ecr26-primary) !important;

    box-shadow:
        0 10px 25px rgba(4, 164, 156, .15) !important;
}


#ecr26-field-platform .ecr26-navicon {
    width: 28px !important;
    height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 28px !important;

    border-radius: 50% !important;

    background: rgba(4, 164, 156, .09) !important;
    color: var(--ecr26-primary) !important;

    font-size: 9px !important;
    font-weight: 800 !important;
}


#ecr26-field-platform .ecr26-navitem.ecr26-active .ecr26-navicon {
    background: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
}


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

#ecr26-field-platform .ecr26-main {
    display: grid !important;

    grid-template-columns:
        minmax(270px, .9fr)
        minmax(430px, 1.55fr)
        minmax(270px, .9fr) !important;

    gap: 25px !important;

    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 28px !important;

    border: 1px solid var(--ecr26-border) !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9fdfd 50%,
            #ffffff 100%
        ) !important;

    box-shadow:
        0 20px 55px rgba(50,80,80,.055) !important;
}


/* ==========================================================
   LEFT COPY
   ========================================================== */

#ecr26-field-platform .ecr26-copy {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-panel {
    display: none !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-panel.ecr26-panel-active {
    display: block !important;
    animation: ecr26Fade .3s ease both !important;
}


@keyframes ecr26Fade {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

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


#ecr26-field-platform .ecr26-label {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    margin: 0 0 17px !important;
    padding: 0 !important;

    color: var(--ecr26-primary) !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: 1.2px !important;
    line-height: 1.4 !important;
}


#ecr26-field-platform .ecr26-label span {
    width: 29px !important;
    height: 29px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 29px !important;

    border-radius: 50% !important;

    background: var(--ecr26-primary) !important;
    color: #ffffff !important;

    font-size: 9px !important;
    letter-spacing: 0 !important;
}


#ecr26-field-platform .ecr26-panel-title {
    display: block !important;

    max-width: 430px !important;

    margin: 0 0 15px !important;
    padding: 0 !important;

    color: var(--ecr26-dark) !important;

    font-size: clamp(27px, 3vw, 33px) !important;
    font-weight: 800 !important;

    line-height: 1.12 !important;
    letter-spacing: -1px !important;
}


#ecr26-field-platform .ecr26-panel-text {
    max-width: 440px !important;

    margin: 0 0 23px !important;
    padding: 0 !important;

    color: var(--ecr26-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: 1.7 !important;
}


/* ==========================================================
   FEATURE LIST
   ========================================================== */

#ecr26-field-platform .ecr26-list {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-listitem {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    width: 100% !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 8px 11px !important;

    border: 1px solid #e8efee !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


#ecr26-field-platform .ecr26-listitem:hover {
    border-color: rgba(4,164,156,.32) !important;

    transform: translateX(3px) !important;

    box-shadow:
        0 7px 18px rgba(4,164,156,.06) !important;
}


#ecr26-field-platform .ecr26-listitem span {
    width: 27px !important;
    height: 27px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 27px !important;

    border-radius: 7px !important;

    background: rgba(4,164,156,.09) !important;
    color: var(--ecr26-primary) !important;

    font-size: 9px !important;
    font-weight: 800 !important;
}


#ecr26-field-platform .ecr26-listitem strong {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--ecr26-dark) !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
}


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

#ecr26-field-platform .ecr26-cta {
    appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 15px !important;

    min-height: 49px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: var(--ecr26-primary) !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


#ecr26-field-platform .ecr26-cta:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 22px rgba(4,164,156,.2) !important;
}


#ecr26-field-platform .ecr26-cta span {
    font-size: 19px !important;
    line-height: 1 !important;
}


/* ==========================================================
   PRODUCT IMAGE
   ========================================================== */

#ecr26-field-platform .ecr26-visual {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 470px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-visual-glow {
    position: absolute !important;

    width: 75% !important;
    height: 65% !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(4,164,156,.12),
            rgba(4,164,156,.035) 48%,
            transparent 72%
        ) !important;

    filter: blur(8px) !important;

    pointer-events: none !important;
}


#ecr26-field-platform .ecr26-product-image {
    display: block !important;

    width: 100% !important;
    max-width: 670px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    border: 0 !important;


    position: relative !important;
    z-index: 2 !important;

    transition: transform .35s ease !important;
}


#ecr26-field-platform .ecr26-product-image:hover {
    transform: translateY(-5px) !important;
}


/* ==========================================================
   FLOATING LABELS
   ========================================================== */

#ecr26-field-platform .ecr26-floating {
    position: absolute !important;

    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    padding: 8px 12px !important;

    border: 1px solid rgba(4,164,156,.16) !important;
    border-radius: 30px !important;

    background: rgba(255,255,255,.94) !important;

    color: var(--ecr26-dark) !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    box-shadow:
        0 9px 22px rgba(50,80,80,.08) !important;

    z-index: 4 !important;
}


#ecr26-field-platform .ecr26-floating i {
    display: block !important;

    width: 7px !important;
    height: 7px !important;

    margin: 0 !important;

    border-radius: 50% !important;

    background: var(--ecr26-primary) !important;
}


#ecr26-field-platform .ecr26-floating-a {
    top: 15% !important;
    left: 0 !important;
}


#ecr26-field-platform .ecr26-floating-b {
    right: 0 !important;
    bottom: 15% !important;
}


/* ==========================================================
   RIGHT SUMMARY
   ========================================================== */

#ecr26-field-platform .ecr26-summary {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 9px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-summary-card {
    display: grid !important;

    grid-template-columns: 42px minmax(0,1fr) 14px !important;

    align-items: center !important;

    gap: 10px !important;

    min-height: 88px !important;

    margin: 0 !important;
    padding: 11px !important;

    border: 1px solid var(--ecr26-border) !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    cursor: pointer !important;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


#ecr26-field-platform .ecr26-summary-card:hover,
#ecr26-field-platform .ecr26-summary-card.ecr26-summary-active {
    border-color: rgba(4,164,156,.35) !important;

    transform: translateX(-3px) !important;

    box-shadow:
        0 10px 23px rgba(4,164,156,.07) !important;
}


#ecr26-field-platform .ecr26-summary-number {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;

    background: rgba(4,164,156,.09) !important;
    color: var(--ecr26-primary) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
}


#ecr26-field-platform .ecr26-summary-card strong {
    display: block !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    color: var(--ecr26-dark) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
}


#ecr26-field-platform .ecr26-summary-card p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--ecr26-text) !important;

    font-size: 10px !important;
    font-weight: 400 !important;

    line-height: 1.45 !important;
}


#ecr26-field-platform .ecr26-summary-card > span {
    color: var(--ecr26-primary) !important;

    font-size: 22px !important;
    line-height: 1 !important;
}


/* ==========================================================
   BOTTOM FLOW
   ========================================================== */

#ecr26-field-platform .ecr26-flow {
    width: 100% !important;

    margin: 20px 0 0 !important;
    padding: 23px 26px !important;

    border: 1px solid var(--ecr26-border) !important;
    border-radius: 17px !important;

    background: #fbfefe !important;
}


#ecr26-field-platform .ecr26-flow-head {
    text-align: center !important;

    margin: 0 0 18px !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-flow-head span {
    display: block !important;

    color: var(--ecr26-primary) !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: 1.4px !important;
}


#ecr26-field-platform .ecr26-flow-head p {
    margin: 5px 0 0 !important;
    padding: 0 !important;

    color: var(--ecr26-text) !important;

    font-size: 12px !important;
}


#ecr26-field-platform .ecr26-flow-items {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#ecr26-field-platform .ecr26-flow-item {
    flex: 1 !important;

    min-width: 80px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


#ecr26-field-platform .ecr26-flow-item b {
    width: 28px !important;
    height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 5px !important;

    border-radius: 50% !important;

    background: rgba(4,164,156,.1) !important;
    color: var(--ecr26-primary) !important;

    font-size: 9px !important;
}


#ecr26-field-platform .ecr26-flow-item strong {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ecr26-dark) !important;

    font-size: 12px !important;
}


#ecr26-field-platform .ecr26-flow-item small {
    display: block !important;

    margin: 3px 0 0 !important;
    padding: 0 !important;

    color: var(--ecr26-text) !important;

    font-size: 9px !important;
}


#ecr26-field-platform .ecr26-flow-items em {
    flex: 0 0 35px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ecr26-primary) !important;

    font-size: 18px !important;
    font-style: normal !important;

    text-align: center !important;
}


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

@media screen and (max-width: 1200px) {

    #ecr26-field-platform .ecr26-wrap {
        width: calc(100% - 40px) !important;
    }

    #ecr26-field-platform .ecr26-main {
        grid-template-columns:
            minmax(250px, 0.9fr)
            minmax(380px, 1.35fr) !important;

        gap: 22px !important;
    }

    /* Put summary below the main two columns */
    #ecr26-field-platform .ecr26-summary {
        grid-column: 1 / -1 !important;

        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    #ecr26-field-platform .ecr26-summary-card {
        grid-template-columns: 38px minmax(0, 1fr) !important;

        min-height: 90px !important;
    }

    #ecr26-field-platform .ecr26-summary-card > span {
        display: none !important;
    }

    #ecr26-field-platform .ecr26-summary-number {
        width: 38px !important;
        height: 38px !important;
    }

    #ecr26-field-platform .ecr26-summary-card:hover,
    #ecr26-field-platform .ecr26-summary-card.ecr26-summary-active {
        transform: translateY(-2px) !important;
    }

}

/* ==========================================================
   TABLET
   992px and below
   ========================================================== */

@media screen and (max-width: 992px) {

    #ecr26-field-platform {
        padding: 65px 0 !important;
    }

    #ecr26-field-platform .ecr26-wrap {
        width: calc(100% - 32px) !important;
        max-width: 760px !important;
    }


    /* ---------- HEADER ---------- */

    #ecr26-field-platform .ecr26-head {
        max-width: 700px !important;
        margin-bottom: 32px !important;
    }

    #ecr26-field-platform .ecr26-heading {
        font-size: 42px !important;
    }


    /* ---------- NAV ---------- */

    #ecr26-field-platform .ecr26-nav {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }

    #ecr26-field-platform .ecr26-navitem {
        min-height: 62px !important;

        padding: 10px 12px !important;

        font-size: 12px !important;
    }


    /* ---------- MAIN ---------- */

    #ecr26-field-platform .ecr26-main {
        display: flex !important;
        flex-direction: column !important;

        gap: 24px !important;

        padding: 24px !important;
    }


    /* Product becomes first visual */
    #ecr26-field-platform .ecr26-visual {
        order: 1 !important;

        min-height: 0 !important;

        width: 100% !important;

        padding: 15px 0 !important;
    }

    #ecr26-field-platform .ecr26-copy {
        order: 2 !important;

        width: 100% !important;
    }

    #ecr26-field-platform .ecr26-summary {
        order: 3 !important;

        width: 100% !important;

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


    /* ---------- IMAGE ---------- */

    #ecr26-field-platform .ecr26-product-image {
        width: 100% !important;
        max-width: 620px !important;
        height: auto !important;

        margin: 0 auto !important;

        transform: none !important;
    }

    #ecr26-field-platform .ecr26-product-image:hover {
        transform: none !important;
    }


    /* ---------- CONTENT ---------- */

    #ecr26-field-platform .ecr26-panel {
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    #ecr26-field-platform .ecr26-panel-title {
        max-width: 550px !important;
    }

    #ecr26-field-platform .ecr26-panel-text {
        max-width: 620px !important;
    }

}



/* ==========================================================
   MOBILE
   767px and below
   ========================================================== */

@media screen and (max-width: 767px) {

    /*
     * Most important mobile rule:
     * nothing inside this component can become wider
     * than the viewport.
     */

    #ecr26-field-platform {
        width: 100% !important;
        max-width: 100% !important;

        padding: 50px 0 !important;

        overflow-x: clip !important;
    }

    #ecr26-field-platform .ecr26-wrap {
        width: calc(100% - 28px) !important;
        max-width: none !important;

        margin: 0 auto !important;
    }


    /* ======================================================
       HEADER
       ====================================================== */

    #ecr26-field-platform .ecr26-head {
        width: 100% !important;

        margin: 0 auto 28px !important;
    }

    #ecr26-field-platform .ecr26-eyebrow {
        margin-bottom: 10px !important;

        font-size: 9px !important;
        line-height: 1.4 !important;

        letter-spacing: 1.25px !important;
    }

    #ecr26-field-platform .ecr26-heading {
        width: 100% !important;

        font-size: 32px !important;
        line-height: 1.12 !important;

        letter-spacing: -0.8px !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    #ecr26-field-platform .ecr26-subheading {
        width: 100% !important;
        max-width: 500px !important;

        margin-top: 14px !important;

        font-size: 13px !important;
        line-height: 1.6 !important;
    }


    /* ======================================================
       CATEGORY SELECTOR
       2 COLUMN GRID - NO HORIZONTAL SCROLL
       ====================================================== */

    #ecr26-field-platform .ecr26-nav {
        display: grid !important;

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

        gap: 8px !important;

        width: 100% !important;

        margin: 0 0 16px !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    #ecr26-field-platform .ecr26-navitem {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;

        flex: none !important;

        justify-content: flex-start !important;

        gap: 8px !important;

        padding: 9px 10px !important;

        border-radius: 9px !important;

        text-align: left !important;

        font-size: 10.5px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
    }

    #ecr26-field-platform .ecr26-navicon {
        width: 25px !important;
        height: 25px !important;

        flex: 0 0 25px !important;

        display: inline-flex !important;

        font-size: 8px !important;
    }


    /*
     * Fifth item fills entire final row.
     */

    #ecr26-field-platform .ecr26-navitem:last-child {
        grid-column: 1 / -1 !important;

        justify-content: center !important;

        min-height: 50px !important;
    }


    /* ======================================================
       MAIN CARD
       ====================================================== */

    #ecr26-field-platform .ecr26-main {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 18px !important;

        margin: 0 !important;
        padding: 15px !important;

        border-radius: 16px !important;

        overflow: hidden !important;
    }


    /* ======================================================
       PRODUCT IMAGE
       ====================================================== */

    #ecr26-field-platform .ecr26-visual {
        order: 1 !important;

        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;
        padding: 12px 0 6px !important;

        overflow: hidden !important;
    }

    #ecr26-field-platform .ecr26-visual-glow {
        width: 85% !important;
        height: 80% !important;
    }

    #ecr26-field-platform .ecr26-product-image {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;

        transform: none !important;
    }

    #ecr26-field-platform .ecr26-product-image:hover {
        transform: none !important;
    }


    /*
     * Floating labels are useful on desktop,
     * but clutter the actual product on mobile.
     */

    #ecr26-field-platform .ecr26-floating {
        display: none !important;
    }


    /* ======================================================
       SELECTED FEATURE
       ====================================================== */

    #ecr26-field-platform .ecr26-copy {
        order: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    #ecr26-field-platform .ecr26-panel {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    #ecr26-field-platform .ecr26-label {
        gap: 8px !important;

        margin-bottom: 12px !important;

        font-size: 9px !important;

        letter-spacing: .9px !important;
    }

    #ecr26-field-platform .ecr26-label span {
        width: 25px !important;
        height: 25px !important;

        flex: 0 0 25px !important;

        font-size: 8px !important;
    }

    #ecr26-field-platform .ecr26-panel-title {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 11px !important;

        font-size: 26px !important;
        line-height: 1.13 !important;

        letter-spacing: -.5px !important;
    }

    #ecr26-field-platform .ecr26-panel-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 18px !important;

        font-size: 13px !important;
        line-height: 1.55 !important;
    }


    /* ======================================================
       FEATURE ITEMS
       ====================================================== */

    #ecr26-field-platform .ecr26-list {
        width: 100% !important;

        gap: 7px !important;

        margin-bottom: 17px !important;
    }

    #ecr26-field-platform .ecr26-listitem {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 45px !important;

        gap: 9px !important;

        padding: 8px 9px !important;

        border-radius: 8px !important;

        transform: none !important;
    }

    #ecr26-field-platform .ecr26-listitem:hover {
        transform: none !important;
    }

    #ecr26-field-platform .ecr26-listitem span {
        width: 27px !important;
        height: 27px !important;

        flex: 0 0 27px !important;
    }

    #ecr26-field-platform .ecr26-listitem strong {
        min-width: 0 !important;

        font-size: 12px !important;
        line-height: 1.35 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


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

    #ecr26-field-platform .ecr26-cta {
        width: 100% !important;
        min-height: 48px !important;

        padding: 0 14px !important;

        font-size: 12px !important;
    }


    /* ======================================================
       RIGHT SUMMARY
       Hide on mobile.

       The top category buttons already provide the same
       navigation. Showing this again wastes mobile space.
       ====================================================== */

    #ecr26-field-platform .ecr26-summary {
        display: none !important;
    }


    /* ======================================================
       BOTTOM CONNECTION STRIP
       ====================================================== */

    #ecr26-field-platform .ecr26-flow {
        width: 100% !important;

        margin-top: 14px !important;

        padding: 19px 13px !important;

        border-radius: 14px !important;
    }

    #ecr26-field-platform .ecr26-flow-head {
        margin-bottom: 16px !important;
    }

    #ecr26-field-platform .ecr26-flow-head span {
        font-size: 9px !important;
        letter-spacing: 1px !important;
    }

    #ecr26-field-platform .ecr26-flow-head p {
        font-size: 11px !important;
    }


    #ecr26-field-platform .ecr26-flow-items {
        display: grid !important;

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

        gap: 8px !important;

        width: 100% !important;
    }

    #ecr26-field-platform .ecr26-flow-items em {
        display: none !important;
    }

    #ecr26-field-platform .ecr26-flow-item {
        width: 100% !important;
        min-width: 0 !important;

        padding: 10px 6px !important;

        border: 1px solid #e6f0ef !important;
        border-radius: 9px !important;

        background: #ffffff !important;
    }

    #ecr26-field-platform .ecr26-flow-item:last-child {
        grid-column: 1 / -1 !important;
    }

    #ecr26-field-platform .ecr26-flow-item b {
        width: 27px !important;
        height: 27px !important;

        margin-bottom: 5px !important;
    }

    #ecr26-field-platform .ecr26-flow-item strong {
        font-size: 11px !important;
    }

    #ecr26-field-platform .ecr26-flow-item small {
        font-size: 9px !important;
    }

}


/* ==========================================================
   EXTRA SMALL MOBILE
   360px and below
   ========================================================== */

@media screen and (max-width: 360px) {

    #ecr26-field-platform .ecr26-wrap {
        width: calc(100% - 16px) !important;
    }

    #ecr26-field-platform .ecr26-heading {
        font-size: 26px !important;
    }

    /*
     * At extremely narrow widths the categories become
     * single column instead of squeezing text.
     */

    #ecr26-field-platform .ecr26-nav {
        grid-template-columns: 1fr !important;
    }

    #ecr26-field-platform .ecr26-navitem,
    #ecr26-field-platform .ecr26-navitem:last-child {
        grid-column: auto !important;

        justify-content: flex-start !important;

        min-height: 48px !important;
    }

    #ecr26-field-platform .ecr26-main {
        padding: 10px !important;
    }

    #ecr26-field-platform .ecr26-panel-title {
        font-size: 22px !important;
    }

}

/* ==========================================================
   ECCRM DYNAMIC PRODUCT IMAGE
   Completely isolated
   ========================================================== */

#ecr26-field-platform .ecr26-image-frame {
    position: relative !important;

    width: 100% !important;
    max-width: 670px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}


/* Product image */

#ecr26-field-platform #ecr26-product-image {
    display: block !important;

    width: 100% !important;
    max-width: 670px !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: 0 !important;
    outline: none !important;

    object-fit: contain !important;

    opacity: 1;

    transform: translateY(0) scale(1);

    transition:
        opacity .28s ease,
        transform .38s cubic-bezier(.2,.7,.2,1) !important;
}


/* Image changing state */

#ecr26-field-platform #ecr26-product-image.ecr26-image-changing {
    opacity: 0;

    transform:
        translateY(10px)
        scale(.975);
}


/* Image loaded state */

#ecr26-field-platform #ecr26-product-image.ecr26-image-loaded {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


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

@media screen and (max-width: 767px) {

    #ecr26-field-platform .ecr26-image-frame {
        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;
    }

    #ecr26-field-platform #ecr26-product-image {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        transform: none;
    }

    #ecr26-field-platform #ecr26-product-image.ecr26-image-changing {
        transform: translateY(6px) scale(.985);
    }

}


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

@media screen and (max-width: 480px) {

    #ecr26-field-platform .ecr26-image-frame {
        width: 100% !important;
    }

    #ecr26-field-platform #ecr26-product-image {
        width: 100% !important;
    }

}
/* Features */

/* =========================================================
   FEATURES CTA
   Existing design preserved
========================================================= */

.eccrm-features-cta {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 45px;
    padding: 28px 32px;

    background: rgba(4, 164, 156, .055);
    border: 1px solid rgba(4, 164, 156, .16);
    border-radius: 18px;

    box-sizing: border-box;
    width: 100%;
}


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

.eccrm-features-cta-content {

    min-width: 0;
    flex: 1 1 auto;
}


.eccrm-features-cta-content h3 {

    margin: 0 0 5px;

    color: #5B5C5C;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;

    overflow-wrap: break-word;
}


.eccrm-features-cta-content p {

    margin: 0;

    color: #5B5C5C;

    font-size: 13px;
    line-height: 1.55;

    opacity: .7;

    overflow-wrap: break-word;
}


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

.eccrm-features-cta-button {

    display: inline-flex;

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

    gap: 10px;

    flex: 0 0 auto;

    min-height: 50px;

    padding: 0 22px;

    color: #ffffff;

    background: #04A49C;

    border: 1px solid #04A49C;
    border-radius: 9px;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 8px 20px rgba(4, 164, 156, .18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}


.eccrm-features-cta-button:hover {

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(4, 164, 156, .25);
}


.eccrm-features-cta-button svg {

    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

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


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

@media (max-width: 900px) {

    .eccrm-features-cta {

        gap: 22px;

        padding: 24px 25px;
    }

    .eccrm-features-cta-content h3 {

        font-size: 17px;
    }

    .eccrm-features-cta-content p {

        font-size: 13px;
    }

    .eccrm-features-cta-button {

        padding: 0 19px;

        font-size: 12.5px;
    }

}


/* =========================================================
   MOBILE
   Main fix:
   Text and button become separate rows.
========================================================= */

@media (max-width: 600px) {

    .eccrm-features-cta {

        display: flex;

        flex-direction: column;

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

        gap: 20px;

        margin-top: 30px;

        padding: 24px 20px;

        border-radius: 16px;

        width: 100%;

        box-sizing: border-box;
    }


    /* -------------------------
       TEXT
    ------------------------- */

    .eccrm-features-cta-content {

        width: 100%;

        flex: none;

        text-align: left;
    }


    .eccrm-features-cta-content h3 {

        margin: 0 0 8px;

        font-size: 19px;

        line-height: 1.35;

        font-weight: 800;

        max-width: 100%;
    }


    .eccrm-features-cta-content p {

        margin: 0;

        font-size: 13px;

        line-height: 1.6;

        max-width: 100%;
    }


    /* -------------------------
       BUTTON
    ------------------------- */

    .eccrm-features-cta-button {

        width: 100%;

        min-height: 50px;

        padding: 0 18px;

        box-sizing: border-box;

        flex: none;

        white-space: normal;

        font-size: 13px;

        line-height: 1.3;

        border-radius: 9px;
    }


    .eccrm-features-cta-button svg {

        width: 17px;
        height: 17px;

        flex: 0 0 17px;
    }

}


/* =========================================================
   SMALL MOBILE
   360px / 375px / 390px devices
========================================================= */

@media (max-width: 400px) {

    .eccrm-features-cta {

        gap: 18px;

        margin-top: 25px;

        padding: 21px 17px;

        border-radius: 15px;
    }


    .eccrm-features-cta-content h3 {

        font-size: 18px;

        line-height: 1.35;

        margin-bottom: 7px;
    }


    .eccrm-features-cta-content p {

        font-size: 12.5px;

        line-height: 1.55;
    }


    .eccrm-features-cta-button {

        min-height: 48px;

        padding: 0 15px;

        font-size: 12.5px;

        gap: 8px;
    }


    .eccrm-features-cta-button svg {

        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   320px / 340px
========================================================= */

@media (max-width: 340px) {

    .eccrm-features-cta {

        padding: 19px 15px;
    }


    .eccrm-features-cta-content h3 {

        font-size: 17px;
    }


    .eccrm-features-cta-content p {

        font-size: 12px;
    }


    .eccrm-features-cta-button {

        min-height: 46px;

        font-size: 12px;
    }

}
/* features cta */

/* Product */
/* =========================================================
   ECCRM PRODUCT SHOWCASE
   Completely isolated styles
   ========================================================= */

#ecr26-product-showcase {
  --ecr26-primary: #04a49c;
  --ecr26-text: #5b5c5c;

  --ecr26-dark: #5B5C5C;
  --ecr26-white: #ffffff;
  --ecr26-soft: #f5fbfa;
  --ecr26-border: #dceceb;
  --ecr26-shadow: 0 25px 70px rgba(5, 80, 78, 0.12);

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 90px 20px 70px;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(4, 164, 156, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 55%,
      rgba(4, 164, 156, 0.07),
      transparent 28%
    ),
    #ffffff;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--ecr26-text);

  isolation: isolate;
}


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

#ecr26-product-showcase .ecr26-ps-container {
  position: relative;
  width: min(1440px, 100%);
  margin: 0 auto;
  z-index: 2;
}


/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-bg {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

#ecr26-product-showcase .ecr26-ps-bg-one {
  width: 420px;
  height: 420px;

  left: -220px;
  top: 280px;

  background: rgba(4, 164, 156, 0.055);
}

#ecr26-product-showcase .ecr26-ps-bg-two {
  width: 350px;
  height: 350px;

  right: -180px;
  bottom: 150px;

  background: rgba(4, 164, 156, 0.055);
}


/* Dot patterns */

#ecr26-product-showcase .ecr26-ps-dots {
  position: absolute;
  width: 105px;
  height: 80px;

  opacity: 0.55;

  background-image:
    radial-gradient(
      var(--ecr26-primary) 1.5px,
      transparent 1.5px
    );

  background-size: 15px 15px;

  pointer-events: none;
  z-index: 0;
}

#ecr26-product-showcase .ecr26-ps-dots-one {
  top: 70px;
  right: 50px;
}

#ecr26-product-showcase .ecr26-ps-dots-two {
  bottom: 100px;
  left: 35px;
}


/* =========================================================
   HEADER
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-header {
  max-width: 950px;
  margin: 0 auto 45px;
  text-align: center;
}

#ecr26-product-showcase .ecr26-ps-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  margin-bottom: 15px;

  color: var(--ecr26-primary);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
}

#ecr26-product-showcase .ecr26-ps-eyebrow span {
  width: 38px;
  height: 2px;

  background: var(--ecr26-primary);
}


#ecr26-product-showcase .ecr26-ps-header h2 {
  margin: 0;

  color: var(--ecr26-dark);

  font-size: clamp(40px, 5vw, 45px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -2.5px;
}

#ecr26-product-showcase .ecr26-ps-header h2 strong {
  color: var(--ecr26-primary);
  font-weight: 800;
}

#ecr26-product-showcase .ecr26-ps-header p {
  max-width: 880px;
  margin: 22px auto 0;

  color: var(--ecr26-text);

  font-size: 17px;
  line-height: 1.75;
}


/* =========================================================
   TABS
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-tabs-wrapper {
  width: 100%;
  margin-bottom: 38px;
}

#ecr26-product-showcase .ecr26-ps-tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;

  width: 100%;
}


#ecr26-product-showcase .ecr26-ps-tab {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  padding: 12px 15px;

  border: 1px solid var(--ecr26-border);
  border-radius: 12px;

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

  color: var(--ecr26-dark);

  font-family: inherit;
  font-size: 15px;
  font-weight: 650;

  cursor: pointer;

  box-shadow: 0 8px 25px rgba(5, 80, 78, 0.035);

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

#ecr26-product-showcase .ecr26-ps-tab:hover {
  transform: translateY(-2px);

  border-color: rgba(4, 164, 156, 0.4);

  box-shadow:
    0 12px 28px rgba(4, 164, 156, 0.10);
}


#ecr26-product-showcase .ecr26-ps-tab.active {
  background: var(--ecr26-primary);
  border-color: var(--ecr26-primary);

  color: #ffffff;

  box-shadow:
    0 12px 30px rgba(4, 164, 156, 0.24);

  transform: translateY(-2px);
}


#ecr26-product-showcase .ecr26-ps-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  flex: 0 0 26px;
}

#ecr26-product-showcase .ecr26-ps-tab-icon svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-panel {
  position: relative;

  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;

  min-height: 610px;

  padding: 55px;

  border: 1px solid rgba(4, 164, 156, 0.12);
  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 55%,
      #f3fbfa 100%
    );

  box-shadow: var(--ecr26-shadow);

  overflow: hidden;
}


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

#ecr26-product-showcase .ecr26-ps-content {
  position: relative;
  z-index: 3;

  max-width: 470px;

  padding: 15px 30px 15px 5px;
}


#ecr26-product-showcase .ecr26-ps-module-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 20px;

  color: var(--ecr26-primary);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

#ecr26-product-showcase .ecr26-ps-module-label::before {
  content: "";

  display: block;

  width: 38px;
  height: 2px;

  background: var(--ecr26-primary);
}


#ecr26-product-showcase .ecr26-ps-title {
  margin: 0 0 18px;

  color: var(--ecr26-dark);

  font-size: clamp(34px, 3.3vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1.5px;
}


#ecr26-product-showcase .ecr26-ps-description {
  margin: 0 0 28px;

  color: var(--ecr26-text);

  font-size: 17px;
  line-height: 1.7;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-checklist {
  display: flex;
  flex-direction: column;
  gap: 13px;

  margin: 0 0 30px;
  padding: 0;

  list-style: none;
}

#ecr26-product-showcase .ecr26-ps-checklist li {
  display: flex;
  align-items: center;
  gap: 11px;

  color: var(--ecr26-text);

  font-size: 15px;
  line-height: 1.45;
}


#ecr26-product-showcase .ecr26-ps-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  border-radius: 50%;

  background: rgba(4, 164, 156, 0.12);
}

#ecr26-product-showcase .ecr26-ps-check svg {
  width: 14px;
  height: 14px;

  fill: none;
  stroke: var(--ecr26-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


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

#ecr26-product-showcase .ecr26-ps-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  min-height: 54px;

  padding: 0 25px;

  border-radius: 10px;

  background: var(--ecr26-primary);

  color: #ffffff;

  text-decoration: none;

  font-size: 15px;
  font-weight: 750;

  box-shadow:
    0 12px 25px rgba(4, 164, 156, 0.20);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

#ecr26-product-showcase .ecr26-ps-cta:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 30px rgba(4, 164, 156, 0.27);
}

#ecr26-product-showcase .ecr26-ps-cta svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.2s ease;
}

#ecr26-product-showcase .ecr26-ps-cta:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   PRODUCT VISUAL
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-visual {
  position: relative;

  min-width: 0;
  min-height: 500px;

  display: flex;
  align-items: center;
  justify-content: center;
}


#ecr26-product-showcase .ecr26-ps-glow {
  position: absolute;

  width: 75%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(4, 164, 156, 0.18) 0%,
      rgba(4, 164, 156, 0.08) 35%,
      transparent 70%
    );

  filter: blur(4px);

  pointer-events: none;
}


/* =========================================================
   IMAGE FRAME
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-image-frame {
  position: relative;
  z-index: 2;

  width: min(720px, 100%);

  border-radius: 17px;

  background: #ffffff;

  border: 1px solid rgba(91, 92, 92, 0.14);

  box-shadow:
    0 25px 55px rgba(28, 56, 60, 0.20),
    0 8px 18px rgba(4, 164, 156, 0.08);

  overflow: hidden;

  transform:
    perspective(1600px)
    rotateY(-2deg);
}


/* Browser header */

#ecr26-product-showcase .ecr26-ps-browser-bar {
  height: 37px;

  display: flex;
  align-items: center;

  padding: 0 14px;

  border-bottom: 1px solid #e9eeee;

  background: #f8fafa;
}


#ecr26-product-showcase .ecr26-ps-browser-dots {
  display: flex;
  gap: 5px;
}

#ecr26-product-showcase .ecr26-ps-browser-dots span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #04A49C;
}


#ecr26-product-showcase .ecr26-ps-browser-url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  padding: 5px 50px;

  border-radius: 6px;

  background: #04A49C;

  color: #ffffff;

  font-size: 10px;
}


/* Product image */

#ecr26-product-showcase #ecr26-ps-image {
  display: block;

  width: 100%;
  height: auto;

  min-height: 350px;

  object-fit: contain;

  background: #ffffff;

  opacity: 1;

  transform: scale(1);

  transition:
    opacity 0.22s ease,
    transform 0.38s ease;
}

#ecr26-product-showcase #ecr26-ps-image.ecr26-ps-image-changing {
  opacity: 0;

  transform: scale(0.985);
}

#ecr26-product-showcase #ecr26-ps-image.ecr26-ps-image-loaded {
  opacity: 1;

  transform: scale(1);
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

#ecr26-product-showcase .ecr26-ps-floating-card {
  position: absolute;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 11px;

  min-width: 190px;

  padding: 13px 16px;

  border: 1px solid rgba(4, 164, 156, 0.12);
  border-radius: 12px;

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

  box-shadow:
    0 15px 35px rgba(28, 56, 60, 0.13);

  backdrop-filter: blur(12px);

  animation: ecr26PsFloat 4s ease-in-out infinite;
}

#ecr26-product-showcase .ecr26-ps-floating-top {
  top: 55px;
  right: 0;
}

#ecr26-product-showcase .ecr26-ps-floating-bottom {
  left: 20px;
  bottom: 55px;

  animation-delay: -2s;
}


#ecr26-product-showcase .ecr26-ps-floating-icon {
  width: 35px;
  height: 35px;

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

  flex: 0 0 35px;

  border-radius: 9px;

  background: rgba(4, 164, 156, 0.12);
}

#ecr26-product-showcase .ecr26-ps-floating-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: var(--ecr26-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


#ecr26-product-showcase .ecr26-ps-floating-card strong {
  display: block;

  color: var(--ecr26-dark);

  font-size: 12px;
  font-weight: 750;
}

#ecr26-product-showcase .ecr26-ps-floating-card small {
  display: block;

  margin-top: 3px;

  color: var(--ecr26-text);

  font-size: 10px;
}


#ecr26-product-showcase .ecr26-ps-live-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: var(--ecr26-primary);

  box-shadow:
    0 0 0 5px rgba(4, 164, 156, 0.12);

  animation: ecr26PsPulse 1.8s ease-in-out infinite;
}


@keyframes ecr26PsFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}


@keyframes ecr26PsPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}


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

#ecr26-product-showcase .ecr26-ps-benefits {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;

  margin-top: 24px;

  overflow: hidden;

  border: 1px solid rgba(4, 164, 156, 0.08);
  border-radius: 18px;

  background: rgba(4, 164, 156, 0.07);
}


#ecr26-product-showcase .ecr26-ps-benefit {
  display: flex;
  align-items: center;
  gap: 13px;

  min-width: 0;

  padding: 22px 18px;

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


#ecr26-product-showcase .ecr26-ps-benefit-icon {
  width: 42px;
  height: 42px;

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

  flex: 0 0 42px;

  border-radius: 50%;

  background: rgba(4, 164, 156, 0.09);
}

#ecr26-product-showcase .ecr26-ps-benefit-icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: var(--ecr26-primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


#ecr26-product-showcase .ecr26-ps-benefit strong {
  display: block;

  color: var(--ecr26-dark);

  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}

#ecr26-product-showcase .ecr26-ps-benefit small {
  display: block;

  margin-top: 4px;

  color: var(--ecr26-text);

  font-size: 10px;
  line-height: 1.3;
}


/* =========================================================
   ECCRM PRODUCT SHOWCASE
   RESPONSIVE FIX
   ========================================================= */


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
   1200px and below
   ========================================================= */

@media (max-width: 1200px) {

  #ecr26-product-showcase {
    padding: 90px 20px 75px;
  }

  #ecr26-product-showcase .ecr26-ps-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #ecr26-product-showcase .ecr26-ps-panel {
    grid-template-columns: 0.75fr 1.25fr;
    padding: 40px;
  }

  #ecr26-product-showcase .ecr26-ps-content {
    padding-right: 15px;
  }

  #ecr26-product-showcase .ecr26-ps-floating-top {
    right: -5px;
  }

  #ecr26-product-showcase .ecr26-ps-floating-bottom {
    left: 0;
  }

  #ecr26-product-showcase .ecr26-ps-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* =========================================================
   TABLET
   900px and below
   ========================================================= */

@media (max-width: 900px) {

  #ecr26-product-showcase {
    width: 100%;
    max-width: 100%;
    padding: 80px 18px 65px;

    overflow: hidden;
  }


  /* Header */

  #ecr26-product-showcase .ecr26-ps-header {
    width: 100%;
    max-width: 850px;
    margin-bottom: 35px;
  }

  #ecr26-product-showcase .ecr26-ps-header h2 {
    font-size: clamp(38px, 7vw, 52px);
  }

  #ecr26-product-showcase .ecr26-ps-header p {
    font-size: 16px;
  }


  /* Tabs */

  #ecr26-product-showcase .ecr26-ps-tabs-wrapper {
    width: 100%;
    max-width: 100%;

    margin-bottom: 30px;

    overflow: visible;
  }

  #ecr26-product-showcase .ecr26-ps-tabs {

    display: grid;

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

    width: 100%;
    max-width: 100%;

    gap: 10px;
  }

  #ecr26-product-showcase .ecr26-ps-tab {

    display: flex !important;

    width: 100%;
    min-width: 0;

    min-height: 62px;

    padding: 10px 14px;

    justify-content: center;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative;
    z-index: 5;
  }


  /* Main panel */

  #ecr26-product-showcase .ecr26-ps-panel {

    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
    max-width: 100%;

    padding: 45px 35px 35px;

    min-height: 0;
  }


  /* Content */

  #ecr26-product-showcase .ecr26-ps-content {

    width: 100%;
    max-width: 650px;

    padding: 0;

    margin: 0 auto 35px;
  }

  #ecr26-product-showcase .ecr26-ps-title {
    font-size: 42px;
  }


  /* Product image */

  #ecr26-product-showcase .ecr26-ps-visual {

    width: 100%;
    min-width: 0;
    min-height: auto;

    padding: 20px 0 30px;
  }

  #ecr26-product-showcase .ecr26-ps-image-frame {

    width: 100%;
    max-width: 720px;

    margin: 0 auto;
  }


  /* Floating cards */

  #ecr26-product-showcase .ecr26-ps-floating-top {
    top: 10px;
    right: -5px;
  }

  #ecr26-product-showcase .ecr26-ps-floating-bottom {
    left: -5px;
    bottom: 10px;
  }


  /* Benefits */

  #ecr26-product-showcase .ecr26-ps-benefits {

    width: 100%;

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


/* =========================================================
   MOBILE
   767px and below
   ========================================================= */

@media screen and (max-width: 767px) {

  #ecr26-product-showcase {

    width: 100% !important;
    max-width: 100% !important;

    padding: 60px 14px 50px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  #ecr26-product-showcase *,
  #ecr26-product-showcase *::before,
  #ecr26-product-showcase *::after {
    box-sizing: border-box !important;
  }


  /* =====================================================
     HEADER
     ===================================================== */

  #ecr26-product-showcase .ecr26-ps-header {

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 28px !important;

    text-align: center !important;
  }


  #ecr26-product-showcase .ecr26-ps-eyebrow {

    display: flex !important;

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

    gap: 8px !important;

    margin-bottom: 12px !important;

    font-size: 9px !important;

    letter-spacing: 1.7px !important;

    white-space: nowrap !important;
  }


  #ecr26-product-showcase .ecr26-ps-eyebrow span {

    display: block !important;

    width: 22px !important;
    min-width: 22px !important;

    height: 2px !important;
  }


  #ecr26-product-showcase .ecr26-ps-header h2 {

    width: 100% !important;

    margin: 0 !important;

    font-size: clamp(
      30px,
      8.5vw,
      38px
    ) !important;

    line-height: 1.1 !important;

    letter-spacing: -1.2px !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
  }


  #ecr26-product-showcase .ecr26-ps-header p {

    width: 100% !important;

    max-width: 600px !important;

    margin: 15px auto 0 !important;

    font-size: 14px !important;

    line-height: 1.65 !important;
  }


  /* =====================================================
     MOBILE TABS
     
     IMPORTANT:
     Do NOT use horizontal scrolling here.
     All tabs remain visible.
     ===================================================== */

  #ecr26-product-showcase .ecr26-ps-tabs-wrapper {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;

    padding: 0 !important;

    overflow: visible !important;

    position: relative !important;

    z-index: 10 !important;
  }


  #ecr26-product-showcase .ecr26-ps-tabs {

    display: grid !important;

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

    width: 100% !important;
    max-width: 100% !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab {

    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;

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

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 54px !important;

    margin: 0 !important;

    padding: 9px 8px !important;

    gap: 7px !important;

    border-radius: 9px !important;

    font-family: inherit !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    white-space: normal !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 20 !important;

    cursor: pointer !important;

    transform: none;
  }


  #ecr26-product-showcase .ecr26-ps-tab:hover {

    transform: translateY(-1px);

  }


  #ecr26-product-showcase .ecr26-ps-tab.active {

    transform: none !important;

    color: #ffffff !important;

    background: #04a49c !important;

    border-color: #04a49c !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab-icon {

    display: inline-flex !important;

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

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;
    flex: 0 0 20px !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab-icon svg {

    display: block !important;

    width: 18px !important;
    height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;
  }


  /* =====================================================
     MAIN PANEL
     ===================================================== */

  #ecr26-product-showcase .ecr26-ps-panel {

    display: grid !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;

    padding: 28px 17px 20px !important;

    margin: 0 !important;

    border-radius: 20px !important;

    overflow: hidden !important;
  }


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

  #ecr26-product-showcase .ecr26-ps-content {

    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;

    margin: 0 0 28px !important;
  }


  #ecr26-product-showcase .ecr26-ps-module-label {

    display: inline-flex !important;

    gap: 7px !important;

    margin-bottom: 14px !important;

    font-size: 8px !important;

    letter-spacing: 1.4px !important;
  }


  #ecr26-product-showcase .ecr26-ps-module-label::before {

    width: 23px !important;
    min-width: 23px !important;
  }


  #ecr26-product-showcase .ecr26-ps-title {

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 13px !important;

    font-size: clamp(
      27px,
      8vw,
      34px
    ) !important;

    line-height: 1.12 !important;

    letter-spacing: -.8px !important;
  }


  #ecr26-product-showcase .ecr26-ps-description {

    width: 100% !important;

    margin: 0 0 20px !important;

    font-size: 13px !important;

    line-height: 1.65 !important;
  }


  /* =====================================================
     CHECKLIST
     ===================================================== */

  #ecr26-product-showcase .ecr26-ps-checklist {

    display: flex !important;

    flex-direction: column !important;

    gap: 9px !important;

    width: 100% !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    list-style: none !important;
  }


  #ecr26-product-showcase .ecr26-ps-checklist li {

    display: flex !important;

    align-items: flex-start !important;

    width: 100% !important;

    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;

    line-height: 1.45 !important;
  }


  #ecr26-product-showcase .ecr26-ps-check {

    width: 21px !important;
    height: 21px !important;

    min-width: 21px !important;

    flex: 0 0 21px !important;
  }


  #ecr26-product-showcase .ecr26-ps-check svg {

    width: 12px !important;
    height: 12px !important;
  }


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

  #ecr26-product-showcase .ecr26-ps-cta {

    display: flex !important;

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

    width: 100% !important;

    min-height: 49px !important;

    padding: 0 15px !important;

    font-size: 13px !important;
  }


  /* =====================================================
     PRODUCT IMAGE
     ===================================================== */

  #ecr26-product-showcase .ecr26-ps-visual {

    display: flex !important;

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

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 12px 0 42px !important;

    margin: 0 !important;
  }


  #ecr26-product-showcase .ecr26-ps-glow {

    width: 90% !important;
    height: 75% !important;
  }


  #ecr26-product-showcase .ecr26-ps-image-frame {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    border-radius: 9px !important;

    transform: none !important;

    overflow: hidden !important;
  }


  #ecr26-product-showcase .ecr26-ps-browser-bar {

    height: 27px !important;

    padding: 0 8px !important;
  }


  #ecr26-product-showcase .ecr26-ps-browser-dots {

    gap: 4px !important;
  }


  #ecr26-product-showcase .ecr26-ps-browser-dots span {

    width: 6px !important;
    height: 6px !important;
  }


  #ecr26-product-showcase .ecr26-ps-browser-url {

    padding: 3px 22px !important;

    font-size: 7px !important;
  }


  #ecr26-product-showcase #ecr26-ps-image {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    object-fit: contain !important;
  }


  /* =====================================================
     FLOATING CARDS
     ===================================================== */

  #ecr26-product-showcase .ecr26-ps-floating-card {

    min-width: 135px !important;

    max-width: 155px !important;

    padding: 8px 9px !important;

    gap: 8px !important;

    border-radius: 8px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-top {

    top: 4px !important;
    right: -3px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-bottom {

    left: -3px !important;
    bottom: 4px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-icon {

    width: 26px !important;
    height: 26px !important;

    min-width: 26px !important;

    flex-basis: 26px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-icon svg {

    width: 13px !important;
    height: 13px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-card strong {

    font-size: 8px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-card small {

    font-size: 7px !important;
  }


  #ecr26-product-showcase .ecr26-ps-live-dot {

    width: 7px !important;
    height: 7px !important;

    min-width: 7px !important;

    flex-basis: 7px !important;
  }


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

  #ecr26-product-showcase .ecr26-ps-benefits {

    display: grid !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;

    margin-top: 18px !important;

    border-radius: 13px !important;
  }


  #ecr26-product-showcase .ecr26-ps-benefit {

    display: flex !important;

    width: 100% !important;

    padding: 14px !important;
  }


  #ecr26-product-showcase .ecr26-ps-benefit-icon {

    width: 35px !important;
    height: 35px !important;

    min-width: 35px !important;

    flex-basis: 35px !important;
  }


  #ecr26-product-showcase .ecr26-ps-benefit-icon svg {

    width: 17px !important;
    height: 17px !important;
  }


  #ecr26-product-showcase .ecr26-ps-benefit strong {

    font-size: 11px !important;
  }


  #ecr26-product-showcase .ecr26-ps-benefit small {

    font-size: 9px !important;
  }
}


/* =========================================================
   SMALL MOBILE
   480px and below
   ========================================================= */

@media screen and (max-width: 480px) {

  #ecr26-product-showcase {

    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  /* Keep two columns but make them compact */

  #ecr26-product-showcase .ecr26-ps-tabs {

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

    gap: 7px !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab {

    min-height: 51px !important;

    padding: 8px 5px !important;

    gap: 5px !important;

    font-size: 10px !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab-icon {

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;

    flex-basis: 18px !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab-icon svg {

    width: 16px !important;
    height: 16px !important;
  }


  #ecr26-product-showcase .ecr26-ps-panel {

    padding: 25px 14px 18px !important;

    border-radius: 17px !important;
  }


  #ecr26-product-showcase .ecr26-ps-title {

    font-size: 28px !important;
  }


  #ecr26-product-showcase .ecr26-ps-description {

    font-size: 12.5px !important;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
   360px and below
   ========================================================= */

@media screen and (max-width: 360px) {

  #ecr26-product-showcase {

    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  /*
     On extremely narrow screens, use one column.
     This guarantees every tab remains readable.
  */

  #ecr26-product-showcase .ecr26-ps-tabs {

    grid-template-columns: 1fr !important;

    gap: 6px !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab {

    min-height: 45px !important;

    justify-content: flex-start !important;

    padding: 8px 12px !important;

    text-align: left !important;

    font-size: 11px !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab-icon {

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;

    flex-basis: 20px !important;
  }


  #ecr26-product-showcase .ecr26-ps-tab-icon svg {

    width: 17px !important;
    height: 17px !important;
  }


  #ecr26-product-showcase .ecr26-ps-header h2 {

    font-size: 28px !important;

    letter-spacing: -0.8px !important;
  }


  #ecr26-product-showcase .ecr26-ps-panel {

    padding-left: 12px !important;
    padding-right: 12px !important;
  }


  #ecr26-product-showcase .ecr26-ps-title {

    font-size: 26px !important;
  }


  /*
     Move floating cards slightly inward
     so they never create horizontal overflow.
  */

  #ecr26-product-showcase .ecr26-ps-floating-top {

    right: 2px !important;
  }

  #ecr26-product-showcase .ecr26-ps-floating-bottom {

    left: 2px !important;
  }
}


/* =========================================================
   VERY SMALL DEVICES
   320px and below
   ========================================================= */

@media screen and (max-width: 320px) {

  #ecr26-product-showcase .ecr26-ps-tab {

    font-size: 10px !important;

    min-height: 43px !important;
  }


  #ecr26-product-showcase .ecr26-ps-header h2 {

    font-size: 25px !important;
  }


  #ecr26-product-showcase .ecr26-ps-title {

    font-size: 24px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-card {

    min-width: 115px !important;

    max-width: 125px !important;

    padding: 6px 7px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-card strong {

    font-size: 7px !important;
  }


  #ecr26-product-showcase .ecr26-ps-floating-card small {

    font-size: 6px !important;
  }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  #ecr26-product-showcase .ecr26-ps-tab:hover {

    transform: none !important;

  }

  #ecr26-product-showcase .ecr26-ps-cta:hover {

    transform: none !important;

  }

}
/* Product */


/* =========================================
   FIELD SERVICE FEATURE LIST
   3 COLUMN RESPONSIVE
   ========================================= */

.fsm-three-column-list {
    display: grid;

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

    column-gap: 45px;
    row-gap: 8px;

    margin: 20px 0 0;
    padding-left: 20px;

    width: 100%;
}


/* List items */

.fsm-three-column-list li {
    margin-top: 0 !important;

    padding: 5px 0;

    color: #5b5c5c;

    font-size: 14px;
    line-height: 1.5;
}


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

@media (max-width: 991px) {

    .fsm-three-column-list {
        grid-template-columns: repeat(2, 1fr);

        column-gap: 35px;
        row-gap: 7px;
    }

    .fsm-three-column-list li {
        font-size: 13px;
    }

}


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

@media (max-width: 767px) {

    .fsm-three-column-list {
        grid-template-columns: 1fr;

        column-gap: 0;
        row-gap: 5px;

        padding-left: 20px;
    }

    .fsm-three-column-list li {
        font-size: 13px;
    }

}


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

@media (max-width: 480px) {

    .fsm-three-column-list {
        padding-left: 18px;

        margin-top: 15px;
    }

    .fsm-three-column-list li {
        font-size: 12px;
        padding: 4px 0;
    }

}
/* Mobile App */
/* =========================================================
   ECCRM MOBILE APP SECTION
   ========================================================= */

#ecr26-mobile-app {
    --ecr26-teal: #04a49c;
    --ecr26-teal-dark: #038c86;
    --ecr26-teal-light: #e9fbfa;
    --ecr26-gray: #5b5c5c;
    --ecr26-dark: #5B5C5C;
    --ecr26-text: #394750;
    --ecr26-muted: #7a878d;
    --ecr26-border: #e5eeee;
    --ecr26-white: #ffffff;
    --ecr26-bg: #f7fbfb;

    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(4,164,156,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbfb 100%
        );

    padding: 0px 0 90px;

   

    color: var(--ecr26-text);
}


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

#ecr26-mobile-app .ecr26-mobile-container {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
}


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

#ecr26-mobile-app .ecr26-mobile-hero {
    display: grid;
    grid-template-columns:
        minmax(380px, .82fr)
        minmax(650px, 1.18fr);

    align-items: center;
    gap: 45px;
}


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

#ecr26-mobile-app .ecr26-mobile-content {
    position: relative;
    z-index: 5;
    max-width: 590px;
}


#ecr26-mobile-app .ecr26-mobile-eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 24px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;

    color: var(--ecr26-teal);
}


#ecr26-mobile-app .ecr26-mobile-eyebrow span {
    width: 42px;
    height: 2px;

    display: block;

    background: var(--ecr26-teal);
}


#ecr26-mobile-app .ecr26-mobile-content h2 {
    margin: 0 0 24px;

    font-size: clamp(44px, 4.2vw, 50px);
    line-height: 1.03;
    letter-spacing: -2.7px;

    font-weight: 800;
    color: var(--ecr26-dark);
}


#ecr26-mobile-app .ecr26-mobile-content h2 strong {
    display: block;

    font-weight: 800;

    color: var(--ecr26-teal);
}


#ecr26-mobile-app .ecr26-mobile-intro {
    max-width: 560px;

    margin: 0 0 30px;

    font-size: 18px;
    line-height: 1.72;

    color: var(--ecr26-gray);
}


/* =========================================================
   CHECKLIST
   ========================================================= */

#ecr26-mobile-app .ecr26-mobile-checklist {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin-bottom: 34px;
}


#ecr26-mobile-app .ecr26-mobile-check {
    display: flex;
    align-items: center;
    gap: 13px;

    font-size: 16px;
    line-height: 1.45;

    color: #3e4b53;
}


#ecr26-mobile-app .ecr26-check-icon {
    flex: 0 0 22px;

    width: 22px;
    height: 22px;

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

    border-radius: 50%;

    background: var(--ecr26-teal);
    color: #ffffff;

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

    box-shadow:
        0 5px 15px rgba(4,164,156,.20);
}


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

#ecr26-mobile-app .ecr26-mobile-cta {
    width: fit-content;
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 0 28px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--ecr26-teal),
            var(--ecr26-teal-dark)
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;
    font-weight: 750;

    box-shadow:
        0 14px 30px rgba(4,164,156,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


#ecr26-mobile-app .ecr26-mobile-cta:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(4,164,156,.30);
}


#ecr26-mobile-app .ecr26-mobile-cta-arrow {
    font-size: 22px;

    transition:
        transform .25s ease;
}


#ecr26-mobile-app .ecr26-mobile-cta:hover
.ecr26-mobile-cta-arrow {
    transform: translateX(5px);
}


/* =========================================================
   PHONE VISUAL
   ========================================================= */

#ecr26-mobile-app .ecr26-mobile-visual {
    position: relative;

    min-height: 680px;

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

    isolation: isolate;
}


/* =========================================================
   BACKGROUND ORBS
   ========================================================= */

#ecr26-mobile-app .ecr26-mobile-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;

    filter: blur(1px);
}


#ecr26-mobile-app .ecr26-orb-one {
    width: 470px;
    height: 470px;

    right: 80px;
    top: 90px;

    background:
        radial-gradient(
            circle,
            rgba(4,164,156,.16),
            rgba(4,164,156,.02) 65%,
            transparent 70%
        );
}


#ecr26-mobile-app .ecr26-orb-two {
    width: 300px;
    height: 300px;

    left: 80px;
    bottom: 30px;

    background:
        radial-gradient(
            circle,
            rgba(108,220,215,.13),
            transparent 70%
        );
}


/* =========================================================
   DOT PATTERN
   ========================================================= */

#ecr26-mobile-app .ecr26-mobile-dots {
    position: absolute;

    width: 80px;
    height: 80px;

    background-image:
        radial-gradient(
            var(--ecr26-teal) 1.4px,
            transparent 1.4px
        );

    background-size: 12px 12px;

    opacity: .35;

    z-index: -1;
}


#ecr26-mobile-app .ecr26-dots-one {
    right: 5%;
    top: 3%;
}


#ecr26-mobile-app .ecr26-dots-two {
    left: 5%;
    bottom: 4%;
}


/* =========================================================
   PHONE FRAME
   ========================================================= */

#ecr26-mobile-app .ecr26-phone {
    position: relative;

    width: 245px;
    height: 510px;

    padding: 8px;

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #20282c,
            #101618
        );

    box-shadow:
        0 35px 70px rgba(30,50,55,.24),
        inset 0 0 0 1px rgba(255,255,255,.12);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


#ecr26-mobile-app .ecr26-phone:hover {
    transform: translateY(-10px);

    box-shadow:
        0 45px 85px rgba(30,50,55,.30),
        inset 0 0 0 1px rgba(255,255,255,.15);
}


#ecr26-mobile-app .ecr26-phone-main {
    width: 275px;
    height: 560px;

    z-index: 3;

    transform: translateY(-5px);
}


#ecr26-mobile-app .ecr26-phone-left {
    z-index: 2;

    transform:
        translateX(55px)
        rotate(-5deg);
}


#ecr26-mobile-app .ecr26-phone-right {
    z-index: 2;

    transform:
        translateX(-55px)
        rotate(5deg);
}


/* Hover positions */

#ecr26-mobile-app .ecr26-phone-left:hover {
    transform:
        translateX(55px)
        rotate(-2deg)
        translateY(-10px);
}


#ecr26-mobile-app .ecr26-phone-right:hover {
    transform:
        translateX(-55px)
        rotate(2deg)
        translateY(-10px);
}


#ecr26-mobile-app .ecr26-phone-main:hover {
    transform:
        translateY(-15px);
}


/* =========================================================
   PHONE SCREEN
   ========================================================= */

#ecr26-mobile-app .ecr26-phone-screen {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 31px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbfb
        );

    color: var(--ecr26-dark);
}


/* =========================================================
   PHONE NOTCH / SPEAKER
   ========================================================= */

#ecr26-mobile-app .ecr26-phone-speaker {
    position: absolute;

    z-index: 10;

    left: 50%;
    top: 14px;

    width: 75px;
    height: 20px;

    transform: translateX(-50%);

    border-radius: 20px;

    background: #11181b;
}


/* =========================================================
   APP HEADER
   ========================================================= */

#ecr26-mobile-app .ecr26-app-header {
    display: flex;
    justify-content: space-between;

    padding: 37px 16px 12px;
}


#ecr26-mobile-app .ecr26-app-logo {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 18px;

    font-size: 16px;
    font-weight: 850;
}


#ecr26-mobile-app .ecr26-app-logo span {
    width: 18px;
    height: 18px;

    border: 3px solid var(--ecr26-teal);

    border-radius: 50%;

    display: block;
}


#ecr26-mobile-app .ecr26-app-header small {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
    color: var(--ecr26-muted);
}


#ecr26-mobile-app .ecr26-app-header strong {
    display: block;

    font-size: 14px;
    line-height: 1.2;
}


#ecr26-mobile-app .ecr26-avatar {
    width: 32px;
    height: 32px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d5f5f3,
            #8adbd6
        );

    color: var(--ecr26-teal-dark);

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   APP STATS
   ========================================================= */

#ecr26-mobile-app .ecr26-app-stats {
    display: grid;

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

    gap: 5px;

    padding: 0 10px 12px;
}


#ecr26-mobile-app .ecr26-app-stats div {
    min-height: 55px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 6px;

    border-radius: 9px;

    background: #effafa;

    text-align: center;
}


#ecr26-mobile-app .ecr26-app-stats div:nth-child(2) {
    background: #eef8ff;
}


#ecr26-mobile-app .ecr26-app-stats div:nth-child(3) {
    background: #effaf1;
}


#ecr26-mobile-app .ecr26-app-stats div:nth-child(4) {
    background: #fff1f1;
}


#ecr26-mobile-app .ecr26-app-stats strong {
    font-size: 16px;
    color: var(--ecr26-teal);
}


#ecr26-mobile-app .ecr26-app-stats small {
    margin-top: 2px;

    font-size: 7px;
    color: var(--ecr26-gray);
}


/* =========================================================
   JOB TABS
   ========================================================= */

#ecr26-mobile-app .ecr26-job-tabs {
    display: flex;

    margin: 0 10px;

    padding: 3px;

    border-radius: 9px;

    background: #edf4f4;
}


#ecr26-mobile-app .ecr26-job-tabs button {
    flex: 1;

    border: 0;

    padding: 8px 4px;

    border-radius: 7px;

    background: transparent;

    font-size: 9px;
    font-weight: 700;

    color: var(--ecr26-gray);

    cursor: pointer;
}


#ecr26-mobile-app .ecr26-job-tabs button.active {
    background: #ffffff;

    color: var(--ecr26-teal);

    box-shadow:
        0 2px 7px rgba(0,0,0,.06);
}


/* =========================================================
   DATE
   ========================================================= */

#ecr26-mobile-app .ecr26-job-date {
    display: flex;
    justify-content: space-between;

    padding: 14px 12px 8px;

    font-size: 9px;
}


/* =========================================================
   JOB CARD
   ========================================================= */

#ecr26-mobile-app .ecr26-job-card {
    display: flex;
    gap: 9px;

    margin: 5px 10px;
    padding: 9px;

    border: 1px solid #edf1f1;

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 5px 15px rgba(20,60,60,.045);
}


#ecr26-mobile-app .ecr26-job-card-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

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

    border-radius: 8px;

    background: #e8faf8;

    color: var(--ecr26-teal);

    font-size: 9px;
    font-weight: 800;
}


#ecr26-mobile-app .ecr26-job-card-icon.blue {
    background: #edf7ff;
    color: #3489c8;
}


#ecr26-mobile-app .ecr26-job-card-icon.red {
    background: #fff0f0;
    color: #e26767;
}


#ecr26-mobile-app .ecr26-job-card-content {
    flex: 1;
    min-width: 0;
}


#ecr26-mobile-app .ecr26-job-card-title {
    display: flex;
    justify-content: space-between;
    gap: 5px;

    margin-bottom: 2px;
}


#ecr26-mobile-app .ecr26-job-card-content > strong {
    display: block;

    font-size: 9px;
}


#ecr26-mobile-app .ecr26-job-card-content small {
    display: block;

    margin-top: 2px;

    font-size: 7px;
    color: var(--ecr26-muted);
}


#ecr26-mobile-app .ecr26-job-card-title span {
    padding: 3px 5px;

    border-radius: 5px;

    font-size: 6px;
    font-weight: 700;
}


#ecr26-mobile-app .ecr26-job-card-title span.green {
    background: #e8f9ec;
    color: #29934b;
}


#ecr26-mobile-app .ecr26-job-card-title span.blue {
    background: #eaf5ff;
    color: #358ac7;
}


#ecr26-mobile-app .ecr26-job-card-title span.red {
    background: #fff0f0;
    color: #d45c5c;
}


#ecr26-mobile-app .ecr26-job-meta {
    display: flex;
    gap: 7px;

    margin-top: 5px;

    font-size: 6px;
    color: var(--ecr26-muted);
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

#ecr26-mobile-app .ecr26-bottom-nav {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

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

    padding: 9px 5px 10px;

    border-top: 1px solid #edf1f1;

    background: rgba(255,255,255,.97);
}


#ecr26-mobile-app .ecr26-bottom-nav div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    font-size: 6px;

    color: #8a969a;
}


#ecr26-mobile-app .ecr26-bottom-nav span {
    font-size: 12px;
}


#ecr26-mobile-app .ecr26-bottom-nav div.active {
    color: var(--ecr26-teal);
    font-weight: 700;
}


/* =========================================================
   PHONE TOPBAR
   ========================================================= */

#ecr26-mobile-app .ecr26-app-topbar {
    display: grid;
    grid-template-columns: 25px 1fr 25px;
    align-items: center;

    padding: 38px 14px 15px;

    text-align: center;

    font-size: 11px;
}


#ecr26-mobile-app .ecr26-back {
    font-size: 24px;
    line-height: 1;
}


/* =========================================================
   PHONE TABS
   ========================================================= */

#ecr26-mobile-app .ecr26-app-tabs {
    display: flex;

    margin: 0 12px;

    border-bottom: 1px solid #edf1f1;
}


#ecr26-mobile-app .ecr26-app-tabs span {
    flex: 1;

    padding: 7px 3px;

    text-align: center;

    font-size: 7px;
    color: var(--ecr26-muted);
}


#ecr26-mobile-app .ecr26-app-tabs span.active {
    color: var(--ecr26-teal);

    border-bottom: 2px solid var(--ecr26-teal);

    font-weight: 700;
}


/* =========================================================
   JOB HEADING
   ========================================================= */

#ecr26-mobile-app .ecr26-job-heading {
    display: flex;
    justify-content: space-between;

    gap: 8px;

    padding: 15px 13px 10px;
}


#ecr26-mobile-app .ecr26-job-heading small {
    display: block;

    font-size: 7px;
    color: var(--ecr26-muted);
}


#ecr26-mobile-app .ecr26-job-heading strong {
    display: block;

    margin-top: 3px;

    font-size: 11px;
}


#ecr26-mobile-app .ecr26-status-green {
    height: fit-content;

    padding: 4px 6px;

    border-radius: 6px;

    background: #e8f9ec;

    color: #29934b;

    font-size: 6px;
    font-weight: 700;
}


/* =========================================================
   INFO ROW
   ========================================================= */

#ecr26-mobile-app .ecr26-app-info-row {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 12px 8px;
    padding: 8px;

    border-radius: 8px;

    background: #f6fafa;
}


#ecr26-mobile-app .ecr26-mini-icon,
#ecr26-mobile-app .ecr26-card-icon {
    width: 24px;
    height: 24px;

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

    border-radius: 7px;

    background: #e5faf8;

    color: var(--ecr26-teal);

    font-size: 9px;
}


#ecr26-mobile-app .ecr26-app-info-row small,
#ecr26-mobile-app .ecr26-app-card small {
    display: block;

    font-size: 6px;
    color: var(--ecr26-muted);
}


#ecr26-mobile-app .ecr26-app-info-row strong,
#ecr26-mobile-app .ecr26-app-card strong {
    display: block;

    margin-top: 2px;

    font-size: 7px;
}


/* =========================================================
   APP CARDS
   ========================================================= */

#ecr26-mobile-app .ecr26-app-card {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 7px 12px;
    padding: 9px;

    border: 1px solid #edf2f2;

    border-radius: 9px;

    background: #ffffff;
}


/* =========================================================
   SERVICE CHECKLIST
   ========================================================= */

#ecr26-mobile-app .ecr26-service-checklist {
    padding: 7px 13px;

    font-size: 7px;
}


#ecr26-mobile-app .ecr26-section-label {
    margin-bottom: 7px;

    font-size: 7px;
    font-weight: 800;

    color: var(--ecr26-dark);
}


#ecr26-mobile-app .ecr26-service-checklist > div:not(.ecr26-section-label) {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 7px 0;

    color: var(--ecr26-gray);
}


#ecr26-mobile-app .ecr26-service-checklist > div span,
#ecr26-mobile-app .ecr26-completion-item > span:first-child {
    width: 12px;
    height: 12px;

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

    border: 1px solid #ccd9d9;

    border-radius: 3px;

    font-size: 7px;
}


#ecr26-mobile-app .ecr26-service-checklist span.checked,
#ecr26-mobile-app .ecr26-completion-item span.checked {
    border-color: var(--ecr26-teal);

    background: var(--ecr26-teal);

    color: #ffffff;
}


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

#ecr26-mobile-app .ecr26-phone-button {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 13px;

    height: 34px;

    border: 0;

    border-radius: 8px;

    background: var(--ecr26-teal);

    color: #ffffff;

    font-size: 8px;
    font-weight: 750;
}


/* =========================================================
   COMPLETION SCREEN
   ========================================================= */

#ecr26-mobile-app .ecr26-completion-title {
    padding: 5px 13px 10px;

    font-size: 8px;
}


#ecr26-mobile-app .ecr26-completion-title small {
    font-size: 8px;
    font-weight: 700;
}


#ecr26-mobile-app .ecr26-completion-item {
    display: grid;
    grid-template-columns: 15px 1fr 12px;
    align-items: center;
    gap: 7px;

    margin: 6px 12px;
    padding: 9px;

    border: 1px solid #edf1f1;

    border-radius: 8px;

    background: #ffffff;

    font-size: 7px;
}


#ecr26-mobile-app .ecr26-photo-area {
    padding: 8px 13px;
}


#ecr26-mobile-app .ecr26-photo-placeholder {
    height: 105px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px dashed #b7dddd;

    border-radius: 9px;

    background: #f5fbfb;

    color: var(--ecr26-muted);

    font-size: 7px;
}


#ecr26-mobile-app .ecr26-photo-placeholder span {
    width: 24px;
    height: 24px;

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

    border-radius: 50%;

    background: var(--ecr26-teal-light);

    color: var(--ecr26-teal);

    font-size: 14px;
}


/* =========================================================
   FLOATING CALLOUTS
   ========================================================= */

#ecr26-mobile-app .ecr26-mobile-callout {
    position: absolute;

    z-index: 8;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 220px;

    padding: 13px 16px;

    border: 1px solid rgba(4,164,156,.13);

    border-radius: 14px;

    background: rgba(255,255,255,.92);

    box-shadow:
        0 18px 45px rgba(40,70,70,.13);

    backdrop-filter: blur(12px);
}


#ecr26-mobile-app .ecr26-callout-top {
    right: 1%;
    top: 8%;
}


#ecr26-mobile-app .ecr26-callout-bottom {
    left: 3%;
    bottom: 7%;
}


#ecr26-mobile-app .ecr26-callout-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: var(--ecr26-teal-light);

    color: var(--ecr26-teal);

    font-size: 17px;
}


#ecr26-mobile-app .ecr26-mobile-callout strong {
    display: block;

    font-size: 12px;

    color: var(--ecr26-dark);
}


#ecr26-mobile-app .ecr26-mobile-callout small {
    display: block;

    margin-top: 3px;

    font-size: 9px;

    color: var(--ecr26-muted);
}


/* =========================================================
   WORKFLOW
   ========================================================= */

#ecr26-mobile-app .ecr26-mobile-workflow {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 60px;
    padding: 26px 28px;

    border: 1px solid #e5eeee;

    border-radius: 24px;

    background:
        rgba(255,255,255,.90);

    box-shadow:
        0 20px 50px rgba(35,75,75,.06);
}


#ecr26-mobile-app .ecr26-workflow-item {
    flex: 1;

    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;

    gap: 10px;

    min-width: 0;
}


#ecr26-mobile-app .ecr26-workflow-number {
    align-self: start;

    color: var(--ecr26-teal);

    font-size: 11px;
    font-weight: 850;
}


#ecr26-mobile-app .ecr26-workflow-icon {
    width: 44px;
    height: 44px;

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

    border: 2px solid #9de3df;

    border-radius: 50%;

    background: #f5fdfd;

    color: var(--ecr26-teal);

    font-size: 16px;
}


#ecr26-mobile-app .ecr26-workflow-item strong {
    display: block;

    margin-bottom: 3px;

    font-size: 13px;

    color: var(--ecr26-dark);
}


#ecr26-mobile-app .ecr26-workflow-item small {
    display: block;

    font-size: 9px;
    line-height: 1.4;

    color: var(--ecr26-muted);
}


#ecr26-mobile-app .ecr26-workflow-arrow {
    color: var(--ecr26-teal);

    font-size: 20px;

    opacity: .65;
}


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

#ecr26-mobile-app .ecr26-mobile-benefits {
    display: grid;

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

    gap: 18px;

    margin-top: 22px;
}


#ecr26-mobile-app .ecr26-benefit-card {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 25px;

    border: 1px solid #e5eeee;

    border-radius: 18px;

    background: #ffffff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


#ecr26-mobile-app .ecr26-benefit-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(30,70,70,.08);
}


#ecr26-mobile-app .ecr26-benefit-icon {
    width: 60px;
    height: 60px;

    flex: 0 0 60px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #e7fbfa,
            #d6f5f3
        );

    color: var(--ecr26-teal);

    font-size: 23px;
}


#ecr26-mobile-app .ecr26-benefit-card h3 {
    margin: 0 0 6px;

    font-size: 15px;

    color: var(--ecr26-dark);
}


#ecr26-mobile-app .ecr26-benefit-card p {
    margin: 0;

    font-size: 12px;
    line-height: 1.55;

    color: var(--ecr26-muted);
}


/* =========================================================
   ECCRM MOBILE APP
   FINAL RESPONSIVE SYSTEM
   Desktop → Laptop → Tablet → Mobile
   ========================================================= */


/* =========================================================
   GLOBAL SAFETY
   ========================================================= */

#ecr26-mobile-app,
#ecr26-mobile-app * {
    box-sizing: border-box;
}

#ecr26-mobile-app img {
    max-width: 100%;
    height: auto;
}

#ecr26-mobile-app button,
#ecr26-mobile-app a {
    -webkit-tap-highlight-color: transparent;
}

#ecr26-mobile-app {
    overflow: hidden;
}


/* =========================================================
   LARGE DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1441px) {

    #ecr26-mobile-app .ecr26-mobile-container {
        width: min(1440px, calc(100% - 100px));
    }

    #ecr26-mobile-app .ecr26-mobile-hero {
        grid-template-columns:
            minmax(430px, 0.85fr)
            minmax(700px, 1.15fr);

        gap: 50px;
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        font-size: 60px;
    }

    #ecr26-mobile-app .ecr26-mobile-visual {
        min-height: 700px;
    }

}


/* =========================================================
   DESKTOP
   1201px - 1440px
   ========================================================= */

@media (min-width: 1201px) and (max-width: 1440px) {

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 70px);
        max-width: 1380px;
    }

    #ecr26-mobile-app .ecr26-mobile-hero {
        grid-template-columns:
            minmax(390px, .85fr)
            minmax(650px, 1.15fr);

        gap: 30px;
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        font-size: clamp(48px, 4vw, 56px);
    }

    #ecr26-mobile-app .ecr26-mobile-visual {
        min-height: 650px;
    }

}


/* =========================================================
   LAPTOP
   1001px - 1200px
   ========================================================= */

@media (min-width: 1001px) and (max-width: 1200px) {

    #ecr26-mobile-app {
        /* padding-top: 80px; */
        padding-bottom: 75px;
    }

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 50px);
        max-width: 1100px;
    }

    #ecr26-mobile-app .ecr26-mobile-hero {
        grid-template-columns:
            minmax(350px, .82fr)
            minmax(570px, 1.18fr);

        gap: 15px;
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        font-size: clamp(42px, 4.4vw, 52px);
    }

    #ecr26-mobile-app .ecr26-mobile-intro {
        font-size: 16px;
    }


    /* Phone area */

    #ecr26-mobile-app .ecr26-mobile-visual {
        width: 100%;
        min-height: 610px;

        transform: none;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    #ecr26-mobile-app .ecr26-phone {
        width: 210px;
        height: 440px;
    }

    #ecr26-mobile-app .ecr26-phone-main {
        width: 235px;
        height: 480px;
    }


    #ecr26-mobile-app .ecr26-phone-left {
        transform:
            translateX(45px)
            rotate(-5deg);
    }

    #ecr26-mobile-app .ecr26-phone-right {
        transform:
            translateX(-45px)
            rotate(5deg);
    }


    /* Callouts */

    #ecr26-mobile-app .ecr26-mobile-callout {
        min-width: 180px;
        padding: 11px 13px;
    }

    #ecr26-mobile-app .ecr26-callout-top {
        right: 0;
        top: 8%;
    }

    #ecr26-mobile-app .ecr26-callout-bottom {
        left: 0;
        bottom: 8%;
    }


    /* Workflow */

    #ecr26-mobile-app .ecr26-mobile-workflow {
        gap: 8px;
        padding: 22px 20px;
    }

    #ecr26-mobile-app .ecr26-workflow-icon {
        width: 40px;
        height: 40px;
    }

    #ecr26-mobile-app .ecr26-workflow-item {
        gap: 7px;
    }

    #ecr26-mobile-app .ecr26-workflow-item strong {
        font-size: 12px;
    }

    #ecr26-mobile-app .ecr26-workflow-item small {
        font-size: 8px;
    }

}


/* =========================================================
   TABLET LANDSCAPE
   769px - 1000px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1000px) {

    #ecr26-mobile-app {
        padding-top: 75px;
        padding-bottom: 70px;
    }

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 50px);
        max-width: 900px;
    }


    /* Hero becomes vertical */

    #ecr26-mobile-app .ecr26-mobile-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 35px;
    }


    /* Content */

    #ecr26-mobile-app .ecr26-mobile-content {
        width: min(720px, 100%);
        max-width: none;

        margin: 0 auto;

        text-align: center;
    }

    #ecr26-mobile-app .ecr26-mobile-eyebrow {
        justify-content: center;
    }

    #ecr26-mobile-app .ecr26-mobile-intro {
        margin-left: auto;
        margin-right: auto;

        font-size: 17px;
    }

    #ecr26-mobile-app .ecr26-mobile-checklist {
        width: max-content;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    #ecr26-mobile-app .ecr26-mobile-cta {
        margin-left: auto;
        margin-right: auto;
    }


    /* Phone visual */

    #ecr26-mobile-app .ecr26-mobile-visual {
        width: 100%;
        min-height: 620px;

        transform: none;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    #ecr26-mobile-app .ecr26-phone {
        width: 220px;
        height: 455px;
    }

    #ecr26-mobile-app .ecr26-phone-main {
        width: 245px;
        height: 500px;
    }


    #ecr26-mobile-app .ecr26-phone-left {
        transform:
            translateX(48px)
            rotate(-5deg);
    }

    #ecr26-mobile-app .ecr26-phone-right {
        transform:
            translateX(-48px)
            rotate(5deg);
    }


    /* Callouts */

    #ecr26-mobile-app .ecr26-mobile-callout {
        min-width: 185px;
        padding: 10px 12px;
    }

    #ecr26-mobile-app .ecr26-callout-top {
        right: 2%;
        top: 4%;
    }

    #ecr26-mobile-app .ecr26-callout-bottom {
        left: 2%;
        bottom: 4%;
    }


    /* Workflow */

    #ecr26-mobile-app .ecr26-mobile-workflow {
        display: grid;

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

        gap: 18px;

        padding: 24px;
    }

    #ecr26-mobile-app .ecr26-workflow-arrow {
        display: none;
    }

    #ecr26-mobile-app .ecr26-workflow-item {
        width: 100%;
    }


    /* Benefits */

    #ecr26-mobile-app .ecr26-mobile-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #ecr26-mobile-app .ecr26-benefit-card {
        flex-direction: column;
        align-items: flex-start;

        padding: 20px;
    }

}


/* =========================================================
   TABLET PORTRAIT
   601px - 768px
   ========================================================= */

@media (min-width: 601px) and (max-width: 768px) {

    #ecr26-mobile-app {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 40px);
        max-width: 700px;
    }


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

    #ecr26-mobile-app .ecr26-mobile-hero {
        display: flex;
        flex-direction: column;

        gap: 25px;
    }

    #ecr26-mobile-app .ecr26-mobile-content {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }

    #ecr26-mobile-app .ecr26-mobile-eyebrow {
        justify-content: center;

        margin-bottom: 18px;
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        font-size: clamp(38px, 7vw, 48px);
        letter-spacing: -1.8px;
    }

    #ecr26-mobile-app .ecr26-mobile-intro {
        margin-left: auto;
        margin-right: auto;

        font-size: 16px;
        line-height: 1.65;
    }

    #ecr26-mobile-app .ecr26-mobile-checklist {
        width: max-content;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    #ecr26-mobile-app .ecr26-mobile-cta {
        margin-left: auto;
        margin-right: auto;
    }


    /* =============================
       PHONE VISUAL
       ============================= */

    #ecr26-mobile-app .ecr26-mobile-visual {
        width: 100%;
        min-height: 540px;

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

        transform: none;
    }

    #ecr26-mobile-app .ecr26-phone {
        width: 185px;
        height: 385px;

        border-radius: 30px;
    }

    #ecr26-mobile-app .ecr26-phone-main {
        width: 215px;
        height: 435px;

        border-radius: 32px;
    }

    #ecr26-mobile-app .ecr26-phone-screen {
        border-radius: 24px;
    }


    #ecr26-mobile-app .ecr26-phone-left {
        transform:
            translateX(35px)
            rotate(-5deg);
    }

    #ecr26-mobile-app .ecr26-phone-right {
        transform:
            translateX(-35px)
            rotate(5deg);
    }


    /* =============================
       PHONE INTERNAL SCALE
       ============================= */

    #ecr26-mobile-app .ecr26-phone-speaker {
        width: 58px;
        height: 16px;

        top: 10px;
    }

    #ecr26-mobile-app .ecr26-app-header {
        padding: 30px 12px 9px;
    }

    #ecr26-mobile-app .ecr26-app-logo {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #ecr26-mobile-app .ecr26-app-header small {
        font-size: 8px;
    }

    #ecr26-mobile-app .ecr26-app-header strong {
        font-size: 10px;
    }


    /* =============================
       CALLOUTS
       ============================= */

    #ecr26-mobile-app .ecr26-mobile-callout {
        min-width: 160px;

        padding: 8px 10px;

        border-radius: 10px;
    }

    #ecr26-mobile-app .ecr26-callout-top {
        right: 0;
        top: 2%;
    }

    #ecr26-mobile-app .ecr26-callout-bottom {
        left: 0;
        bottom: 2%;
    }

    #ecr26-mobile-app .ecr26-callout-icon {
        width: 30px;
        height: 30px;

        flex-basis: 30px;

        font-size: 13px;
    }

    #ecr26-mobile-app .ecr26-mobile-callout strong {
        font-size: 10px;
    }

    #ecr26-mobile-app .ecr26-mobile-callout small {
        font-size: 7px;
    }


    /* =============================
       WORKFLOW
       ============================= */

    #ecr26-mobile-app .ecr26-mobile-workflow {
        display: grid;

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

        gap: 18px;

        margin-top: 35px;

        padding: 22px;

        border-radius: 18px;
    }

    #ecr26-mobile-app .ecr26-workflow-arrow {
        display: none;
    }

    #ecr26-mobile-app .ecr26-workflow-item {
        width: 100%;
    }


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

    #ecr26-mobile-app .ecr26-mobile-benefits {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    #ecr26-mobile-app .ecr26-benefit-card {
        padding: 20px;
    }

}


/* =========================================================
   LARGE MOBILE
   481px - 600px
   ========================================================= */

@media (min-width: 481px) and (max-width: 600px) {

    #ecr26-mobile-app {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 30px);
    }


    /* Content */

    #ecr26-mobile-app .ecr26-mobile-hero {
        display: flex;
        flex-direction: column;

        gap: 15px;
    }

    #ecr26-mobile-app .ecr26-mobile-content {
        width: 100%;
        max-width: 540px;

        margin: 0 auto;

        text-align: center;
    }

    #ecr26-mobile-app .ecr26-mobile-eyebrow {
        justify-content: center;

        font-size: 11px;
        letter-spacing: 1.8px;
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        font-size: clamp(34px, 8vw, 42px);

        letter-spacing: -1.5px;
    }

    #ecr26-mobile-app .ecr26-mobile-intro {
        font-size: 14px;
        line-height: 1.65;
    }

    #ecr26-mobile-app .ecr26-mobile-checklist {
        width: max-content;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        text-align: left;

        gap: 10px;
    }

    #ecr26-mobile-app .ecr26-mobile-check {
        font-size: 13px;
    }

    #ecr26-mobile-app .ecr26-mobile-cta {
        width: auto;

        min-height: 52px;

        padding: 0 20px;

        margin-left: auto;
        margin-right: auto;

        font-size: 14px;
    }


    /* Phone area */

    #ecr26-mobile-app .ecr26-mobile-visual {
        width: 100%;

        min-height: 455px;

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

        transform: none;

        margin: 0;
    }

    #ecr26-mobile-app .ecr26-phone {
        width: 155px;
        height: 325px;

        padding: 6px;

        border-radius: 27px;
    }

    #ecr26-mobile-app .ecr26-phone-main {
        width: 180px;
        height: 370px;
    }

    #ecr26-mobile-app .ecr26-phone-screen {
        border-radius: 21px;
    }

    #ecr26-mobile-app .ecr26-phone-left {
        transform:
            translateX(25px)
            rotate(-5deg);
    }

    #ecr26-mobile-app .ecr26-phone-right {
        transform:
            translateX(-25px)
            rotate(5deg);
    }


    /* Phone content */

    #ecr26-mobile-app .ecr26-phone-speaker {
        width: 48px;
        height: 13px;

        top: 9px;
    }

    #ecr26-mobile-app .ecr26-app-header {
        padding: 28px 9px 7px;
    }

    #ecr26-mobile-app .ecr26-app-logo {
        font-size: 10px;
        margin-bottom: 7px;
    }

    #ecr26-mobile-app .ecr26-app-logo span {
        width: 12px;
        height: 12px;

        border-width: 2px;
    }

    #ecr26-mobile-app .ecr26-app-header small {
        font-size: 6px;
    }

    #ecr26-mobile-app .ecr26-app-header strong {
        font-size: 8px;
    }

    #ecr26-mobile-app .ecr26-avatar {
        width: 23px;
        height: 23px;

        font-size: 8px;
    }


    /* Hide floating callouts */

    #ecr26-mobile-app .ecr26-mobile-callout {
        display: none;
    }

    #ecr26-mobile-app .ecr26-mobile-dots {
        opacity: .2;
    }


    /* Workflow */

    #ecr26-mobile-app .ecr26-mobile-workflow {
        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 25px;

        padding: 18px;

        border-radius: 16px;
    }

    #ecr26-mobile-app .ecr26-workflow-arrow {
        display: none;
    }

    #ecr26-mobile-app .ecr26-workflow-item {
        display: grid;

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

        gap: 8px;
    }

    #ecr26-mobile-app .ecr26-workflow-icon {
        width: 40px;
        height: 40px;
    }


    /* Benefits */

    #ecr26-mobile-app .ecr26-mobile-benefits {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 14px;
    }

    #ecr26-mobile-app .ecr26-benefit-card {
        padding: 18px;
    }

}


/* =========================================================
   STANDARD MOBILE
   376px - 480px
   ========================================================= */

@media (min-width: 376px) and (max-width: 480px) {

    #ecr26-mobile-app {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 28px);
    }


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

    #ecr26-mobile-app .ecr26-mobile-hero {
        display: flex;
        flex-direction: column;

        gap: 5px;
    }

    #ecr26-mobile-app .ecr26-mobile-content {
        width: 100%;
        max-width: none;

        text-align: center;
    }

    #ecr26-mobile-app .ecr26-mobile-eyebrow {
        justify-content: center;

        margin-bottom: 15px;

        font-size: 10px;
        letter-spacing: 1.5px;
    }

    #ecr26-mobile-app .ecr26-mobile-eyebrow span {
        width: 25px;
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        margin-bottom: 17px;

        font-size: clamp(30px, 8.8vw, 38px);

        line-height: 1.08;

        letter-spacing: -1.2px;
    }

    #ecr26-mobile-app .ecr26-mobile-intro {
        margin-bottom: 22px;

        font-size: 13px;
        line-height: 1.65;
    }


    /* Checklist */

    #ecr26-mobile-app .ecr26-mobile-checklist {
        width: 100%;

        margin-bottom: 24px;

        gap: 9px;

        text-align: left;
    }

    #ecr26-mobile-app .ecr26-mobile-check {
        align-items: flex-start;

        gap: 9px;

        font-size: 12px;
        line-height: 1.45;
    }

    #ecr26-mobile-app .ecr26-check-icon {
        width: 19px;
        height: 19px;

        flex-basis: 19px;

        flex-shrink: 0;

        font-size: 10px;
    }


    /* CTA */

    #ecr26-mobile-app .ecr26-mobile-cta {
        width: 100%;

        min-height: 50px;

        padding: 0 15px;

        gap: 10px;

        border-radius: 10px;

        font-size: 13px;
    }

    #ecr26-mobile-app .ecr26-mobile-cta-arrow {
        font-size: 19px;
    }


    /* Google Play button */

    #ecr26-mobile-app .eccrm-store-button {
        display: inline-flex !important;

        width: 50px !important;
        height: 50px !important;

        margin-top: 12px;

        vertical-align: middle;

        border-radius: 10px;

        overflow: hidden;
    }

    #ecr26-mobile-app .eccrm-store-button img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* =============================
       PHONE VISUAL
       ============================= */

    #ecr26-mobile-app .ecr26-mobile-visual {
        width: 100%;

        min-height: 405px;

        display: flex;

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

        transform: none;

        margin: 0;
    }


    #ecr26-mobile-app .ecr26-phone {
        width: 135px;
        height: 285px;

        padding: 5px;

        border-radius: 24px;
    }

    #ecr26-mobile-app .ecr26-phone-main {
        width: 158px;
        height: 325px;
    }

    #ecr26-mobile-app .ecr26-phone-screen {
        border-radius: 19px;
    }


    #ecr26-mobile-app .ecr26-phone-left {
        transform:
            translateX(19px)
            rotate(-5deg);
    }

    #ecr26-mobile-app .ecr26-phone-right {
        transform:
            translateX(-19px)
            rotate(5deg);
    }


    /* Phone UI */

    #ecr26-mobile-app .ecr26-phone-speaker {
        width: 42px;
        height: 11px;

        top: 7px;
    }

    #ecr26-mobile-app .ecr26-app-header {
        padding: 25px 8px 6px;
    }

    #ecr26-mobile-app .ecr26-app-logo {
        font-size: 9px;

        margin-bottom: 6px;
    }

    #ecr26-mobile-app .ecr26-app-logo span {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }

    #ecr26-mobile-app .ecr26-app-header small {
        font-size: 5.5px;
    }

    #ecr26-mobile-app .ecr26-app-header strong {
        font-size: 7px;
    }

    #ecr26-mobile-app .ecr26-avatar {
        width: 20px;
        height: 20px;

        font-size: 7px;
    }

    #ecr26-mobile-app .ecr26-mobile-callout {
        display: none;
    }


    /* =============================
       WORKFLOW
       ============================= */

    #ecr26-mobile-app .ecr26-mobile-workflow {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 20px;

        padding: 16px;

        border-radius: 15px;
    }

    #ecr26-mobile-app .ecr26-workflow-arrow {
        display: none;
    }

    #ecr26-mobile-app .ecr26-workflow-item {
        display: grid;

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

        align-items: center;

        gap: 8px;
    }

    #ecr26-mobile-app .ecr26-workflow-number {
        font-size: 9px;
    }

    #ecr26-mobile-app .ecr26-workflow-icon {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }

    #ecr26-mobile-app .ecr26-workflow-item strong {
        font-size: 12px;
    }

    #ecr26-mobile-app .ecr26-workflow-item small {
        font-size: 8px;
    }


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

    #ecr26-mobile-app .ecr26-mobile-benefits {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 12px;
    }

    #ecr26-mobile-app .ecr26-benefit-card {
        gap: 13px;

        padding: 15px;

        border-radius: 14px;
    }

    #ecr26-mobile-app .ecr26-benefit-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 18px;
    }

    #ecr26-mobile-app .ecr26-benefit-card h3 {
        font-size: 13px;
    }

    #ecr26-mobile-app .ecr26-benefit-card p {
        font-size: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
   320px - 375px
   ========================================================= */

@media (max-width: 375px) {

    #ecr26-mobile-app {
        padding-top: 42px;
        padding-bottom: 45px;
    }

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 24px);
    }


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

    #ecr26-mobile-app .ecr26-mobile-eyebrow {
        margin-bottom: 12px;

        font-size: 9px;
        letter-spacing: 1.2px;
    }

    #ecr26-mobile-app .ecr26-mobile-eyebrow span {
        width: 22px;
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        font-size: 29px;

        letter-spacing: -1px;
    }

    #ecr26-mobile-app .ecr26-mobile-intro {
        font-size: 12px;
        line-height: 1.6;
    }


    /* Checklist */

    #ecr26-mobile-app .ecr26-mobile-checklist {
        gap: 8px;
    }

    #ecr26-mobile-app .ecr26-mobile-check {
        font-size: 11px;

        gap: 8px;
    }

    #ecr26-mobile-app .ecr26-check-icon {
        width: 18px;
        height: 18px;

        flex-basis: 18px;

        font-size: 9px;
    }


    /* CTA */

    #ecr26-mobile-app .ecr26-mobile-cta {
        min-height: 48px;

        padding: 0 12px;

        font-size: 12px;
    }


    /* =============================
       PHONE VISUAL
       ============================= */

    #ecr26-mobile-app .ecr26-mobile-visual {
        width: 100%;

        min-height: 365px;

        margin: 0;

        transform: none;
    }


    #ecr26-mobile-app .ecr26-phone {
        width: 120px;
        height: 250px;

        padding: 5px;

        border-radius: 21px;
    }

    #ecr26-mobile-app .ecr26-phone-main {
        width: 140px;
        height: 290px;
    }

    #ecr26-mobile-app .ecr26-phone-screen {
        border-radius: 17px;
    }


    #ecr26-mobile-app .ecr26-phone-left {
        transform:
            translateX(17px)
            rotate(-5deg);
    }

    #ecr26-mobile-app .ecr26-phone-right {
        transform:
            translateX(-17px)
            rotate(5deg);
    }


    /* Phone internal */

    #ecr26-mobile-app .ecr26-phone-speaker {
        width: 37px;
        height: 10px;

        top: 7px;
    }

    #ecr26-mobile-app .ecr26-app-header {
        padding: 23px 7px 5px;
    }

    #ecr26-mobile-app .ecr26-app-logo {
        font-size: 8px;
    }

    #ecr26-mobile-app .ecr26-app-header small {
        font-size: 5px;
    }

    #ecr26-mobile-app .ecr26-app-header strong {
        font-size: 6.5px;
    }


    /* Hide decorative elements */

    #ecr26-mobile-app .ecr26-mobile-callout,
    #ecr26-mobile-app .ecr26-mobile-dots {
        display: none;
    }


    /* =============================
       WORKFLOW
       ============================= */

    #ecr26-mobile-app .ecr26-mobile-workflow {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 15px;

        padding: 14px;

        border-radius: 13px;
    }

    #ecr26-mobile-app .ecr26-workflow-item {
        grid-template-columns:
            22px 35px minmax(0, 1fr);

        gap: 7px;
    }

    #ecr26-mobile-app .ecr26-workflow-icon {
        width: 35px;
        height: 35px;

        font-size: 12px;
    }

    #ecr26-mobile-app .ecr26-workflow-item strong {
        font-size: 11px;
    }

    #ecr26-mobile-app .ecr26-workflow-item small {
        font-size: 7px;
    }


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

    #ecr26-mobile-app .ecr26-mobile-benefits {
        grid-template-columns: 1fr;

        gap: 9px;
    }

    #ecr26-mobile-app .ecr26-benefit-card {
        gap: 10px;

        padding: 13px;

        border-radius: 12px;
    }

    #ecr26-mobile-app .ecr26-benefit-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 16px;
    }

    #ecr26-mobile-app .ecr26-benefit-card h3 {
        font-size: 12px;
    }

    #ecr26-mobile-app .ecr26-benefit-card p {
        font-size: 9px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   BELOW 320px
   ========================================================= */

@media (max-width: 319px) {

    #ecr26-mobile-app .ecr26-mobile-container {
        width: calc(100% - 18px);
    }

    #ecr26-mobile-app .ecr26-mobile-content h2 {
        font-size: 26px;
    }

    #ecr26-mobile-app .ecr26-mobile-intro {
        font-size: 11px;
    }

    #ecr26-mobile-app .ecr26-mobile-check {
        font-size: 10px;
    }

    #ecr26-mobile-app .ecr26-mobile-visual {
        min-height: 330px;
    }

    #ecr26-mobile-app .ecr26-phone {
        width: 108px;
        height: 225px;
    }

    #ecr26-mobile-app .ecr26-phone-main {
        width: 125px;
        height: 260px;
    }

    #ecr26-mobile-app .ecr26-phone-left {
        transform:
            translateX(14px)
            rotate(-5deg);
    }

    #ecr26-mobile-app .ecr26-phone-right {
        transform:
            translateX(-14px)
            rotate(5deg);
    }

}


/* =========================================================
   TOUCH DEVICES
   Remove desktop hover movement
   ========================================================= */

@media (hover: none) {

    #ecr26-mobile-app .ecr26-phone:hover,
    #ecr26-mobile-app .ecr26-phone-left:hover,
    #ecr26-mobile-app .ecr26-phone-right:hover,
    #ecr26-mobile-app .ecr26-phone-main:hover,
    #ecr26-mobile-app .ecr26-benefit-card:hover,
    #ecr26-mobile-app .ecr26-mobile-cta:hover {
        transform: none;
    }

}


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

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

    #ecr26-mobile-app *,
    #ecr26-mobile-app *::before,
    #ecr26-mobile-app *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

}

/* =========================================================
   CTA + GOOGLE PLAY BUTTON
   ========================================================= */

#ecr26-mobile-app .ecr26-mobile-cta {
    vertical-align: middle;
}

#ecr26-mobile-app .eccrm-store-button {
    display: inline-flex;

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

    margin-left: 10px;

    overflow: hidden;

    border-radius: 10px;

    vertical-align: middle;
}

#ecr26-mobile-app .eccrm-store-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Mobile */
@media (max-width: 600px) {

    #ecr26-mobile-app .eccrm-store-button {
        display: flex;

        margin: 12px auto 0;
    }

}

/* =========================================================
   ECCRM INDUSTRIES
========================================================= */

.eccrm-industries {

    --eccrm-teal: #04a49c;
    --eccrm-dark: #5b5c5c;
    --eccrm-heading: #5b5c5c;
    --eccrm-border: #e3eeee;

    position: relative;

    width: 100%;

    padding: 70px 20px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(4,164,156,.07),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 80%,
            rgba(4,164,156,.06),
            transparent 30%
        ),

        #ffffff;

}


.eccrm-industries *,
.eccrm-industries *::before,
.eccrm-industries *::after {

    box-sizing: border-box;

}


.eccrm-industries-container {

    width: min(1420px, 100%);

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.eccrm-industries-header {

    max-width: 1050px;

    margin: 0 auto 55px;

    text-align: center;

}


.eccrm-industries-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-bottom: 18px;

    color: #04a49c;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;

}


.eccrm-industries-eyebrow span {

    width: 42px;

    height: 2px;

    display: block;

    border-radius: 100px;

    background: #04a49c;

}


.eccrm-industries-header h2 {

    margin: 0;

    color: #5b5c5c;

    font-size: clamp(36px, 4.2vw, 48px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;

}


.eccrm-industries-header h2 strong {

    display: block;

    color: #04a49c;

}


.eccrm-industries-header p {

    max-width: 900px;

    margin: 24px auto 0;

    color: #5b5c5c;

    font-size: 18px;

    line-height: 1.75;

}


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

.eccrm-industry-main {

    display: grid;

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

    min-height: 610px;

    overflow: hidden;

    border: 1px solid #e3eeee;

    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 30px 80px
        rgba(91,92,92,.10);

}


/* =========================================================
   SIDEBAR
========================================================= */

.eccrm-industry-sidebar {

    padding: 14px;

    border-right: 1px solid #e3eeee;

    background:
        linear-gradient(
            180deg,
            #fbfefe,
            #f2faf9
        );

}


.eccrm-industry-list {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.eccrm-industry-item {

    display: grid;

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

    align-items: center;

    width: 100%;

    min-height: 48px;

    padding: 6px 9px;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #5b5c5c;

    cursor: pointer;

    text-align: left;

    transition:
        .25s ease;

}


.eccrm-industry-item:hover {

    color: #04a49c;

    background: #ffffff;

    transform: translateX(3px);

}


.eccrm-industry-item.active {

    color: #ffffff;

    background: #04a49c;

    box-shadow:
        0 10px 25px
        rgba(4,164,156,.22);

}


.eccrm-industry-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #04a49c;

    background:
        rgba(4,164,156,.08);

}


.eccrm-industry-item.active
.eccrm-industry-icon {

    color: #ffffff;

    background:
        rgba(255,255,255,.16);

}


.eccrm-industry-icon svg {

    width: 21px;

    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-industry-name {

    min-width: 0;

    padding-left: 8px;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.eccrm-industry-arrow {

    font-size: 20px;

}


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

.eccrm-industry-content {

    position: relative;

    display: grid;

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

    min-width: 0;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 78% 45%,
            rgba(4,164,156,.10),
            transparent 36%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #f8fdfd
        );

}


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

.eccrm-industry-copy {

    position: relative;

    z-index: 5;

    align-self: center;

    padding:
        60px 30px 60px 55px;

}


.eccrm-featured-label {

    display: inline-flex;

    padding: 7px 14px;

    border-radius: 8px;

    color: #04a49c;

    background:
        rgba(4,164,156,.10);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.eccrm-industry-copy h3 {

    margin:
        20px 0 16px;

    color: #5b5c5c;

    font-size:
        clamp(32px, 3.2vw, 52px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    transition: opacity .2s ease;

}


.eccrm-industry-copy h3 strong {

    color: #04a49c;

}


.eccrm-industry-copy > p {

    max-width: 600px;

    margin: 0;

    color: #5b5c5c;

    font-size: 17px;

    line-height: 1.7;

    transition: opacity .2s ease;

}


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

.eccrm-industry-features {

    display: grid;

    gap: 10px;

    padding: 0;

    margin: 26px 0 30px;

    list-style: none;

    transition: opacity .2s ease;

}


.eccrm-industry-features li {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #5b5c5c;

    font-size: 15px;

    font-weight: 600;

}


.eccrm-industry-features li span {

    flex: 0 0 25px;

    width: 25px;

    height: 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: #04a49c;

    font-size: 13px;

}


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

.eccrm-industry-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 100px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #04a49c,
            #07958f
        );

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 12px 28px
        rgba(4,164,156,.22);

    transition:
        .25s ease;

}


.eccrm-industry-cta:hover {

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 18px 38px
        rgba(4,164,156,.28);

}


.eccrm-cta-arrow {

    font-size: 23px;

}


/* =========================================================
   IMAGE AREA
========================================================= */

.eccrm-industry-visual {

    position: relative;

    min-height: 610px;

    overflow: hidden;

    isolation: isolate;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at 65% 48%,
            rgba(4,164,156,.13),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #f1faf9
        );

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.eccrm-visual-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.eccrm-visual-orb-one {

    width: 450px;

    height: 450px;

    right: -130px;

    top: 50%;

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(4,164,156,.17),
            rgba(4,164,156,.05) 48%,
            transparent 72%
        );

    z-index: -2;

}


.eccrm-visual-orb-two {

    width: 180px;

    height: 180px;

    left: 8%;

    top: 10%;

    background:
        radial-gradient(
            circle,
            rgba(4,164,156,.08),
            transparent 72%
        );

    z-index: -2;

}


/* =========================================================
   DOT PATTERN
========================================================= */

.eccrm-visual-grid {

    position: absolute;

    top: 28px;

    right: 28px;

    width: 120px;

    height: 100px;

    opacity: .55;

    background-image:
        radial-gradient(
            circle,
            rgba(4,164,156,.45) 1.5px,
            transparent 1.5px
        );

    background-size: 14px 14px;

    mask-image:
        linear-gradient(
            135deg,
            black,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            black,
            transparent
        );

}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.eccrm-real-image-wrap {

    position: relative;

    width: min(92%, 520px);

    height: min(92%, 570px);

    display: flex;

    align-items: flex-end;

    justify-content: center;

    z-index: 2;

}


/* =========================================================
   IMAGE GLOW
========================================================= */

.eccrm-real-image-glow {

    position: absolute;

    left: 50%;

    bottom: 4%;

    width: 85%;

    height: 76%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(4,164,156,.18),
            rgba(4,164,156,.06) 45%,
            transparent 73%
        );

    filter: blur(12px);

    z-index: -1;

}


/* =========================================================
   DYNAMIC IMAGE
========================================================= */

.eccrm-real-image {

    display: block;

    width: 100%;

    height: 100%;

    max-width: 100%;

    max-height: 570px;

    object-fit: contain;

    object-position: center;

    filter:
        drop-shadow(
            0 25px 35px
            rgba(91,92,92,.16)
        );

    opacity: 1;

    transform:
        translateY(5px);

    transition:
        opacity .25s ease,
        transform .45s ease,
        filter .45s ease;

}


.eccrm-real-image.image-changing {

    opacity: 0;

    transform:
        translateY(12px)
        scale(.985);

}


.eccrm-industry-visual:hover
.eccrm-real-image:not(.image-changing) {

    transform:
        translateY(-5px)
        scale(1.015);

    filter:
        drop-shadow(
            0 30px 45px
            rgba(91,92,92,.20)
        );

}


/* =========================================================
   FLOATING CARD
========================================================= */

.eccrm-real-image-card {

    position: absolute;

    right: 26px;

    bottom: 36px;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 12px;

    width: 220px;

    padding: 13px 16px;

    border:
        1px solid
        rgba(4,164,156,.12);

    border-radius: 17px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 20px 45px
        rgba(91,92,92,.15);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    animation:
        eccrmFloatingCard 4s ease-in-out infinite;

}


.eccrm-real-image-card-icon {

    flex: 0 0 40px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #04a49c,
            #07958f
        );

    font-size: 17px;

    font-weight: 800;

}


.eccrm-real-image-card-content {

    min-width: 0;

}


.eccrm-real-image-card-content strong {

    display: block;

    margin-bottom: 3px;

    color: #5b5c5c;

    font-size: 13px;

    font-weight: 800;

}


.eccrm-real-image-card-content span {

    display: block;

    color: #5b5c5c;

    font-size: 10px;

    line-height: 1.4;

}


@keyframes eccrmFloatingCard {

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

    50% {
        transform: translateY(-7px);
    }

}


/* =========================================================
   SECONDARY CARDS
========================================================= */

/* =========================================================
   ECCRM INDUSTRY QUICK-LINK CARDS
========================================================= */

.eccrm-secondary-industries {

    display: grid;

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

    gap: 16px;

    width: 100%;

    margin-top: 24px;

}


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

.eccrm-secondary-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: 154px;

    padding: 17px 17px 18px;

    overflow: hidden;

    border:
        1px solid
        #e3eeee;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfefe 100%
        );

    color: #5b5c5c;

    text-decoration: none;

    box-shadow:
        0 8px 25px
        rgba(91,92,92,.07);

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

}


/* =========================================================
   SOFT TOP BACKGROUND
========================================================= */

.eccrm-secondary-card::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 58%;

    height: 65px;

    background:
        linear-gradient(
            135deg,
            rgba(4,164,156,.14),
            rgba(4,164,156,.025)
        );

    border-bottom-left-radius: 50px;

    pointer-events: none;

}


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

.eccrm-secondary-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(4,164,156,.35);

    box-shadow:
        0 18px 40px
        rgba(91,92,92,.12);

}


/* =========================================================
   TOP ROW
========================================================= */

.eccrm-secondary-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    min-height: 48px;

}


/* =========================================================
   INDUSTRY ICON
========================================================= */

.eccrm-secondary-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(4,164,156,.10);

    border-radius: 11px;

    color:
        #04a49c;

    background:
        #eefafa;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.eccrm-secondary-icon svg {

    width: 22px;

    height: 22px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.eccrm-secondary-card:hover
.eccrm-secondary-icon {

    color:
        #ffffff;

    background:
        #04a49c;

    transform:
        scale(1.08);

}


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

.eccrm-card-arrow {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 18px;

    border-radius: 50%;

    color:
        #04a49c;

    background:
        #ffffff;

    font-size: 20px;

    line-height: 1;

    box-shadow:
        0 5px 16px
        rgba(91,92,92,.12);

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease;

}


.eccrm-secondary-card:hover
.eccrm-card-arrow {

    color:
        #ffffff;

    background:
        #04a49c;

    transform:
        translateX(3px);

}


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

.eccrm-secondary-content {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 13px;

    padding-right: 5px;

}


.eccrm-secondary-card h4 {

    margin:
        0 0 5px;

    color:
        #5b5c5c;

    font-size:
        16px;

    line-height:
        1.3;

    font-weight:
        800;

    transition:
        color .25s ease;

}


.eccrm-secondary-card:hover h4 {

    color:
        #04a49c;

}


.eccrm-secondary-card p {

    max-width:
        190px;

    margin:
        0;

    color:
        #5b5c5c;

    font-size:
        12px;

    line-height:
        1.45;

}


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

@media (max-width: 1100px) {

    .eccrm-secondary-industries {

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

    }

}


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

@media (max-width: 760px) {

    .eccrm-secondary-industries {

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

        gap: 13px;

    }

}


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

@media (max-width: 520px) {

    .eccrm-secondary-industries {

        grid-template-columns:
            1fr;

        gap: 12px;

    }


    .eccrm-secondary-card {

        min-height:
            135px;

        padding:
            16px;

    }


    .eccrm-secondary-card p {

        max-width:
            230px;

    }

}


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

@media (max-width: 360px) {

    .eccrm-secondary-card {

        min-height:
            130px;

    }

}

/* =========================================================
   VIEW ALL
========================================================= */

.eccrm-view-all-wrap {

    display: flex;

    justify-content: center;

    margin-top: 28px;

}


.eccrm-view-all {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    min-width: 290px;

    min-height: 52px;

    padding:
        0 28px;

    border:
        2px solid
        #04a49c;

    border-radius: 100px;

    color: #04a49c;

    background: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    transition:
        .25s ease;

}


.eccrm-view-all:hover {

    color: #ffffff;

    background: #04a49c;

    transform:
        translateY(-3px);

}


/* =========================================================
   FOCUS
========================================================= */

.eccrm-industry-item:focus-visible,
.eccrm-industry-cta:focus-visible,
.eccrm-secondary-card:focus-visible,
.eccrm-view-all:focus-visible {

    outline:
        3px solid
        rgba(4,164,156,.35);

    outline-offset:
        3px;

}


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

@media (max-width: 1300px) {

    .eccrm-industry-main {

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

    }

    .eccrm-industry-content {

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

    }

    .eccrm-industry-copy {

        padding-left:
            40px;

    }

}


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

@media (max-width: 1100px) {

    .eccrm-industries {

        padding:
            80px 18px;

    }

    .eccrm-industry-main {

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

    }

    .eccrm-industry-content {

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

    }

    .eccrm-industry-copy {

        padding:
            45px 25px 45px 32px;

    }

    .eccrm-industry-copy h3 {

        font-size:
            38px;

    }

    .eccrm-industry-copy > p {

        font-size:
            15px;

    }

    .eccrm-industry-features li {

        font-size:
            13px;

    }

    .eccrm-industry-visual {

        min-height:
            560px;

    }

    .eccrm-real-image-wrap {

        width:
            96%;

        height:
            520px;

    }

    .eccrm-real-image {

        max-height:
            520px;

    }

    .eccrm-secondary-industries {

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

    }

}


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

@media (max-width: 900px) {

    .eccrm-industries {

        padding:
            70px 18px;

    }

    .eccrm-industry-main {

        display:
            block;

    }

    .eccrm-industry-sidebar {

        border-right:
            0;

        border-bottom:
            1px solid
            #e3eeee;

    }

    .eccrm-industry-list {

        display:
            grid;

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

    }

    .eccrm-industry-item {

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

    }

    .eccrm-industry-arrow {

        display:
            none;

    }

    .eccrm-industry-content {

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

    }

    .eccrm-industry-copy {

        padding:
            45px 20px 45px 30px;

    }

    .eccrm-industry-copy h3 {

        font-size:
            35px;

    }

    .eccrm-industry-visual {

        min-height:
            500px;

    }

    .eccrm-real-image-wrap {

        width:
            90%;

        height:
            470px;

    }

    .eccrm-real-image {

        max-height:
            470px;

    }

}


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

@media (max-width: 700px) {

    .eccrm-industries {

        padding:
            60px 14px;

    }

    .eccrm-industries-header h2 {

        font-size:
            34px;

    }

    .eccrm-industry-list {

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

    }

    .eccrm-industry-content {

        display:
            flex;

        flex-direction:
            column;

    }

    .eccrm-industry-copy {

        padding:
            35px 24px 20px;

    }

    .eccrm-industry-copy h3 {

        font-size:
            32px;

    }

    .eccrm-industry-visual {

        min-height:
            440px;

    }

    .eccrm-real-image-wrap {

        width:
            88%;

        height:
            420px;

    }

    .eccrm-real-image {

        max-height:
            420px;

    }

    .eccrm-secondary-industries {

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

    }

}


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

@media (max-width: 520px) {

    .eccrm-industries {

        padding:
            50px 12px;

    }

    .eccrm-industries-header h2 {

        font-size:
            30px;

        letter-spacing:
            -1px;

    }

    .eccrm-industries-header p {

        font-size:
            14px;

    }

    .eccrm-industry-main {

        border-radius:
            18px;

    }

    .eccrm-industry-list {

        grid-template-columns:
            1fr;

    }

    .eccrm-industry-item {

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

    }

    .eccrm-industry-arrow {

        display:
            block;

    }

    .eccrm-industry-copy {

        padding:
            30px 20px 10px;

    }

    .eccrm-industry-copy h3 {

        font-size:
            29px;

    }

    .eccrm-industry-copy > p {

        font-size:
            14px;

    }

    .eccrm-industry-features li {

        font-size:
            12.5px;

    }

    .eccrm-industry-cta {

        width:
            100%;

    }

    .eccrm-industry-visual {

        min-height:
            380px;

    }

    .eccrm-real-image-wrap {

        width:
            94%;

        height:
            365px;

    }

    .eccrm-real-image {

        max-height:
            365px;

    }

    .eccrm-real-image-card {

        right:
            10px;

        bottom:
            14px;

        width:
            185px;

        padding:
            10px 12px;

    }

    .eccrm-real-image-card-icon {

        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;

    }

    .eccrm-secondary-industries {

        grid-template-columns:
            1fr;

    }

    .eccrm-view-all {

        width:
            100%;

        min-width:
            0;

    }

}


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

@media (max-width: 380px) {

    .eccrm-industries {

        padding:
            45px 10px;

    }

    .eccrm-industries-header h2 {

        font-size:
            27px;

    }

    .eccrm-industry-copy {

        padding-left:
            16px;

        padding-right:
            16px;

    }

    .eccrm-industry-copy h3 {

        font-size:
            26px;

    }

    .eccrm-industry-visual {

        min-height:
            335px;

    }

    .eccrm-real-image-wrap {

        height:
            320px;

    }

    .eccrm-real-image {

        max-height:
            320px;

    }

    .eccrm-real-image-card {

        width:
            165px;

    }

}


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

@media (max-width: 320px) {

    .eccrm-industries-header h2 {

        font-size:
            25px;

    }

    .eccrm-industry-visual {

        min-height:
            300px;

    }

    .eccrm-real-image-wrap {

        height:
            285px;

    }

    .eccrm-real-image {

        max-height:
            285px;

    }

    .eccrm-real-image-card {

        width:
            150px;

    }

}


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

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

    .eccrm-industries *,
    .eccrm-industries *::before,
    .eccrm-industries *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}


/* =========================================================
   ECCRM WHY BUSINESSES CHOOSE ECCRM
   PREMIUM RESPONSIVE VERSION
========================================================= */

.eccrm-why-eccrm {

    --eccrm-primary: #04a49c;
    --eccrm-primary-dark: #038c86;
    --eccrm-primary-light: #e8f8f7;

    --eccrm-heading: #5b5c5c;
    --eccrm-text: #5b5c5c;
    --eccrm-muted: #788286;

    --eccrm-border: #e5eeee;
    --eccrm-white: #ffffff;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(10px, 8vw, 15px)
        20px
        clamp(55px, 7vw, 90px);

    background:

        radial-gradient(
            circle at 78% 25%,
            rgba(4,164,156,.12),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(4,164,156,.045),
            transparent 25%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fcfc 55%,
            #ffffff 100%
        );

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--eccrm-text);

}


.eccrm-why-eccrm *,
.eccrm-why-eccrm *::before,
.eccrm-why-eccrm *::after {
    box-sizing: border-box;
}


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

.eccrm-why-container {

    position: relative;

    width: min(1440px, 100%);

    margin: 0 auto;

    z-index: 2;

}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.eccrm-why-orb {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(4px);

}


.eccrm-why-orb-one {

    width: 500px;
    height: 500px;

    top: 80px;
    right: -250px;

    background:
        radial-gradient(
            circle,
            rgba(4,164,156,.12),
            transparent 68%
        );

}


.eccrm-why-orb-two {

    width: 350px;
    height: 350px;

    bottom: 100px;
    left: -220px;

    background:
        radial-gradient(
            circle,
            rgba(4,164,156,.06),
            transparent 70%
        );

}


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

.eccrm-why-hero {

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: clamp(35px, 5vw, 85px);

    min-height: 620px;

}


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

.eccrm-why-content {

    position: relative;

    z-index: 5;

}


.eccrm-why-eyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

    color: var(--eccrm-primary);

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .075em;

    text-transform: uppercase;

}


.eccrm-why-line {

    width: 38px;
    height: 1px;

    background: var(--eccrm-primary);

}


.eccrm-why-title {

    max-width: 670px;

    margin: 0;

    color: var(--eccrm-heading);

    font-size:
        clamp(40px, 4.2vw, 50px);

    line-height: 1.02;

    letter-spacing: -.048em;

    font-weight: 800;

}


.eccrm-why-title span {

    display: block;

    margin-top: 4px;

    color: var(--eccrm-primary);

}


.eccrm-why-description {

    max-width: 620px;

    margin:
        27px
        0
        27px;

    color: var(--eccrm-text);

    font-size: 16px;

    line-height: 1.75;

}


.eccrm-why-checklist {

    display: grid;

    gap: 13px;

    margin-bottom: 30px;

}


.eccrm-why-check-item {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #5b5c5c;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 600;

}


.eccrm-check-circle {

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--eccrm-primary),
            var(--eccrm-primary-dark)
        );

    box-shadow:
        0 6px 16px
        rgba(4,164,156,.20);

}


.eccrm-check-circle svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.eccrm-why-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

}


.eccrm-why-primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 54px;

    padding:
        0
        25px;

    border-radius: 100px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--eccrm-primary),
            var(--eccrm-primary-dark)
        );

    box-shadow:
        0 14px 32px
        rgba(4,164,156,.25);

    text-decoration: none;

    font-size: 14px;

    font-weight: 750;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.eccrm-why-primary-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px
        rgba(4,164,156,.30);

}


.eccrm-why-primary-btn svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-why-video-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 54px;

    padding:
        0
        17px;

    border:
        1px solid
        rgba(4,164,156,.32);

    border-radius: 100px;

    color: var(--eccrm-primary);

    background: rgba(255,255,255,.75);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition:
        background .3s ease,
        transform .3s ease;

}


.eccrm-why-video-btn:hover {

    transform: translateY(-3px);

    background: var(--eccrm-primary-light);

}


.eccrm-play-button {

    /* width: 29px;
    height: 29px; */

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--eccrm-primary);

}


.eccrm-play-button svg {

    width: 12px;
    height: 12px;

    fill: currentColor;

}


/* =========================================================
   MINI TRUST
========================================================= */

.eccrm-why-mini-trust {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: #7d888c;

    font-size: 11px;

}


.eccrm-mini-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--eccrm-primary);

    box-shadow:
        0 0 0 5px
        rgba(4,164,156,.08);

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.eccrm-why-visual {

    position: relative;

    min-width: 0;

    min-height: 590px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.eccrm-visual-glow {

    position: absolute;

    width: min(650px, 95%);

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(4,164,156,.18),
            rgba(4,164,156,.07) 42%,
            transparent 70%
        );

    filter: blur(8px);

}


.eccrm-visual-circle {

    position: absolute;

    border:
        1px dashed
        rgba(4,164,156,.22);

    border-radius: 50%;

    pointer-events: none;

}


.eccrm-circle-one {

    width: 560px;
    height: 560px;

}


.eccrm-circle-two {

    width: 450px;
    height: 450px;

    border-color:
        rgba(4,164,156,.12);

}


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

.eccrm-image-wrapper {

    position: relative;

    z-index: 3;

    width: min(720px, 100%);

    padding: 12px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(255,255,255,.62)
        );

    border:
        1px solid
        rgba(255,255,255,.95);

    box-shadow:
        0 30px 80px
        rgba(28,74,77,.16),

        0 8px 30px
        rgba(4,164,156,.10);

    backdrop-filter: blur(15px);

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}


.eccrm-image-wrapper:hover {

    transform:
        translateY(-8px)
        scale(1.015);

    box-shadow:
        0 40px 100px
        rgba(28,74,77,.20),

        0 12px 35px
        rgba(4,164,156,.14);

}


.eccrm-why-image {

    display: block;

    width: 100%;
    height: auto;

    border-radius: 17px;

    object-fit: contain;

}


.eccrm-image-top-glow {

    position: absolute;

    top: -1px;

    left: 15%;

    width: 70%;
    height: 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--eccrm-primary),
            transparent
        );

    filter:
        blur(2px);

}


/* =========================================================
   FLOATING BADGES
========================================================= */

.eccrm-visual-badge {

    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(255,255,255,.9);

    border-radius: 14px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 15px 35px
        rgba(31,72,75,.12);

    backdrop-filter: blur(12px);

    animation:
        eccrmFloat 4s ease-in-out infinite;

}


.eccrm-badge-one {

    top: 13%;

    left: -4%;

}


.eccrm-badge-two {

    right: -3%;

    bottom: 17%;

    animation-delay: -.9s;

}


.eccrm-badge-icon {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    flex: 0 0 38px;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--eccrm-primary),
            var(--eccrm-primary-dark)
        );

}


.eccrm-badge-icon svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-visual-badge > span:last-child {

    display: grid;

    gap: 2px;

}


.eccrm-visual-badge strong {

    color: #26343c;

    font-size: 11px;

}


.eccrm-visual-badge small {

    color: #7c888b;

    font-size: 9px;

}


@keyframes eccrmFloat {

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

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   LIVE STATUS
========================================================= */

.eccrm-live-status {

    position: absolute;

    z-index: 8;

    right: 9%;

    top: 6%;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        8px
        12px;

    border-radius: 100px;

    color: #47706d;

    background:
        rgba(255,255,255,.9);

    border:
        1px solid
        rgba(4,164,156,.13);

    box-shadow:
        0 10px 25px
        rgba(30,72,74,.08);

    font-size: 9px;

    font-weight: 700;

}


.eccrm-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #20b986;

    box-shadow:
        0 0 0 5px
        rgba(32,185,134,.10);

}


/* =========================================================
   SIX CARDS
========================================================= */

.eccrm-why-cards {

    display: grid;

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

    gap: 12px;

    margin-top: 55px;

}


.eccrm-why-card {

    position: relative;

    min-height: 245px;

    padding:
        21px
        18px
        55px;

    overflow: hidden;

    border:
        1px solid
        rgba(4,164,156,.09);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbfb
        );

    box-shadow:
        0 10px 30px
        rgba(29,72,75,.055);

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

}


.eccrm-why-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 18px;
    right: 18px;

    height: 2px;

    border-radius:
        0
        0
        10px
        10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--eccrm-primary),
            transparent
        );

    opacity: 0;

    transition: opacity .3s ease;

}


.eccrm-why-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(4,164,156,.25);

    box-shadow:
        0 22px 48px
        rgba(29,72,75,.12);

}


.eccrm-why-card:hover::before {

    opacity: 1;

}


.eccrm-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 17px;

}


.eccrm-card-icon {

    width: 51px;
    height: 51px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--eccrm-primary);

    background:
        linear-gradient(
            145deg,
            #eefafa,
            #dff5f3
        );

}


.eccrm-card-icon svg {

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-card-number {

    width: 29px;
    height: 24px;

    display: grid;

    place-items: center;

    border-radius: 5px;

    color: #ffffff;

    background: var(--eccrm-primary);

    font-size: 10px;

    font-weight: 800;

}


.eccrm-why-card h3 {

    margin:
        0
        0
        11px;

    color: #5b5c5c;

    font-size: 16px;

    line-height: 1.2;

    letter-spacing: -.025em;

}


.eccrm-why-card p {

    margin: 0;

    color: #707c80;

    font-size: 12px;

    line-height: 1.55;

}


.eccrm-card-arrow {

    position: absolute;

    right: 18px;
    bottom: 17px;

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--eccrm-primary);

    border-radius: 50%;

    color: var(--eccrm-primary);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.eccrm-card-arrow:hover {

    color: #ffffff;

    background:
        var(--eccrm-primary);

    transform:
        translateX(4px);

}


.eccrm-card-arrow svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   TRUST BAR
========================================================= */

.eccrm-why-trust {

    display: grid;

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

    margin-top: 24px;

    padding:
        19px
        25px;

    border:
        1px solid
        rgba(4,164,156,.09);

    border-radius: 18px;

    background:
        linear-gradient(
            105deg,
            #e7f8f7,
            #f1fbfa
        );

}


.eccrm-trust-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 55px;

}


.eccrm-trust-item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    width: 1px;

    height: 35px;

    transform:
        translateY(-50%);

    background:
        rgba(4,164,156,.25);

}


.eccrm-trust-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    color: var(--eccrm-primary);

}


.eccrm-trust-icon svg {

    width: 28px;
    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-trust-item > div:last-child {

    display: grid;

}


.eccrm-trust-item strong {

    color: var(--eccrm-primary);

    font-size: 27px;

    line-height: 1;

    letter-spacing: -.04em;

}


.eccrm-trust-item strong span {

    font-size: 17px;

}


.eccrm-trust-item small {

    margin-top: 4px;

    color: #627376;

    font-size: 11px;

}


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

@media (max-width: 1350px) {

    .eccrm-why-hero {

        gap: 35px;

    }

    .eccrm-why-title {

        font-size:
            clamp(40px, 4vw, 60px);

    }

    .eccrm-image-wrapper {

        width: 100%;

    }

    .eccrm-visual-badge {

        transform: scale(.9);

    }

    .eccrm-badge-one {

        left: -6%;

    }

    .eccrm-badge-two {

        right: -6%;

    }

    .eccrm-why-card {

        padding-left: 15px;
        padding-right: 15px;

    }

}


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

@media (max-width: 1100px) {

    .eccrm-why-hero {

        grid-template-columns: 1fr;

        gap: 40px;

        min-height: auto;

    }


    .eccrm-why-content {

        max-width: 820px;

        margin: 0 auto;

        text-align: center;

    }


    .eccrm-why-eyebrow {

        justify-content: center;

    }


    .eccrm-why-title {

        margin:
            0
            auto;

        font-size:
            clamp(42px, 6vw, 58px);

    }


    .eccrm-why-description {

        margin-left: auto;
        margin-right: auto;

    }


    .eccrm-why-checklist {

        justify-items: center;

    }


    .eccrm-why-actions {

        justify-content: center;

    }


    .eccrm-why-mini-trust {

        justify-content: center;

    }


    .eccrm-why-visual {

        min-height: 570px;

        width: min(900px, 100%);

        margin:
            0
            auto;

    }


    .eccrm-image-wrapper {

        width: 82%;

    }


    .eccrm-why-cards {

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

    }


    .eccrm-why-card {

        min-height: 225px;

    }

}


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

@media (max-width: 800px) {

    .eccrm-why-eccrm {

        padding:
            75px
            20px
            55px;

    }


    .eccrm-why-visual {

        min-height: 500px;

    }


    .eccrm-image-wrapper {

        width: 88%;

    }


    .eccrm-visual-circle {

        width: 450px;
        height: 450px;

    }


    .eccrm-circle-two {

        width: 350px;
        height: 350px;

    }


    .eccrm-visual-badge {

        transform: scale(.78);

    }


    .eccrm-badge-one {

        left: -4%;

    }


    .eccrm-badge-two {

        right: -4%;

    }


    .eccrm-live-status {

        right: 6%;

        transform: scale(.85);

    }


    .eccrm-why-trust {

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

        gap: 15px;

    }


    .eccrm-trust-item:nth-child(2)::after {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .eccrm-why-eccrm {

        padding:
            60px
            15px
            45px;

    }


    .eccrm-why-eyebrow {

        margin-bottom: 18px;

        font-size: 9px;

        letter-spacing: .06em;

    }


    .eccrm-why-line {

        width: 22px;

    }


    .eccrm-why-title {

        font-size:
            clamp(31px, 9vw, 43px);

        line-height: 1.03;

    }


    .eccrm-why-description {

        margin:
            19px
            auto
            22px;

        font-size: 13.5px;

        line-height: 1.65;

    }


    .eccrm-why-checklist {

        justify-items: start;

        text-align: left;

        gap: 10px;

    }


    .eccrm-why-check-item {

        font-size: 12.5px;

    }


    .eccrm-check-circle {

        width: 23px;
        height: 23px;

        flex-basis: 23px;

    }


    .eccrm-check-circle svg {

        width: 13px;
        height: 13px;

    }


    .eccrm-why-actions {

        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        margin-top: 25px;

    }


    .eccrm-why-primary-btn,
    .eccrm-why-video-btn {

        width: 100%;

    }


    .eccrm-why-mini-trust {

        align-items: flex-start;

        text-align: left;

        font-size: 10px;

        line-height: 1.4;

    }


    /* --------------------------
       VISUAL
    --------------------------- */

    .eccrm-why-visual {

        min-height: auto;

        padding:
            25px
            0
            20px;

    }


    .eccrm-image-wrapper {

        width: 100%;

        padding: 7px;

        border-radius: 17px;

    }


    .eccrm-why-image {

        border-radius: 12px;

    }


    .eccrm-visual-circle {

        width: 330px;
        height: 330px;

    }


    .eccrm-circle-two {

        width: 250px;
        height: 250px;

    }


    .eccrm-visual-badge {

        display: none;

    }


    .eccrm-live-status {

        top: 0;

        right: 10px;

        padding:
            6px
            9px;

        font-size: 7px;

    }


    /* --------------------------
       CARDS
    --------------------------- */

    .eccrm-why-cards {

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 25px;

    }


    .eccrm-why-card {

        min-height: 205px;

        padding:
            20px
            20px
            52px;

    }


    .eccrm-why-card h3 {

        font-size: 17px;

    }


    .eccrm-why-card p {

        max-width: 500px;

        font-size: 12.5px;

    }


    /* --------------------------
       TRUST
    --------------------------- */

    .eccrm-why-trust {

        grid-template-columns: 1fr;

        gap: 0;

        padding:
            12px
            15px;

        border-radius: 15px;

    }


    .eccrm-trust-item {

        justify-content: flex-start;

        padding:
            12px
            8px;

    }


    .eccrm-trust-item:not(:last-child)::after {

        display: none;

    }


    .eccrm-trust-item:not(:last-child) {

        border-bottom:
            1px solid
            rgba(4,164,156,.12);

    }


    .eccrm-trust-item strong {

        font-size: 24px;

    }

}


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

@media (max-width: 380px) {

    .eccrm-why-eccrm {

        padding-left: 12px;
        padding-right: 12px;

    }


    .eccrm-why-title {

        font-size: 30px;

    }


    .eccrm-why-description {

        font-size: 12.5px;

    }


    .eccrm-why-check-item {

        font-size: 11.5px;

    }


    .eccrm-why-primary-btn,
    .eccrm-why-video-btn {

        min-height: 50px;

        font-size: 13px;

    }


    .eccrm-why-card {

        min-height: 200px;

    }

}


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

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

    .eccrm-visual-badge {

        animation: none;

    }


    .eccrm-image-wrapper,
    .eccrm-why-card,
    .eccrm-why-primary-btn,
    .eccrm-why-video-btn {

        transition: none;

    }

}



    /* =========================
       ROOT - FAQ
    ========================== */

    .eccrm-faq-section {
        --eccrm-primary: #04a49c;
        --eccrm-primary-dark: #5b5c5c;
        --eccrm-text: #5b5c5c;
        --eccrm-muted: #667085;
        --eccrm-border: #e6eaf0;
        --eccrm-bg: #f7f9fc;
        --eccrm-white: #ffffff;
        --eccrm-shadow: 0 15px 45px rgba(16, 24, 40, 0.08);

        position: relative;
        overflow: hidden;

        padding: 0px 20px;

        /* background:
            radial-gradient(
                circle at 10% 10%,
                rgba(11, 99, 246, 0.07),
                transparent 30%
            ),
            radial-gradient(
                circle at 90% 80%,
                rgba(11, 99, 246, 0.05),
                transparent 30%
            ),
            var(--eccrm-bg); */

        /* font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif; */
    }


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

    .eccrm-faq-container {
        width: min(100%, 1000px);
        margin: 0 auto;
    }


    /* =========================
       HEADER
    ========================== */

    .eccrm-faq-header {
        max-width: 760px;
        margin: 0 auto 55px;
        text-align: center;
    }


    .eccrm-faq-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 8px 16px;

        border: 1px solid #04a49c;
        border-radius: 999px;

        /* background: rgba(11, 99, 246, 0.07); */

        color: var(--eccrm-primary);

        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }


    .eccrm-faq-header h2 {
        margin: 18px 0 16px;

        color: var(--eccrm-text);

        font-size: clamp(34px, 5vw, 48px);
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: -0.035em;
    }


    .eccrm-faq-header h2 span {
        display: inline-block;

        background:
            linear-gradient(
                90deg,
                var(--eccrm-primary),
                #04a49c
            );

        -webkit-background-clip: text;
        background-clip: text;

        -webkit-text-fill-color: transparent;
    }


    .eccrm-faq-header p {
        max-width: 650px;
        margin: 0 auto;

        color: var(--eccrm-muted);

        font-size: 17px;
        line-height: 1.75;
    }


    /* =========================
       FAQ LIST
    ========================== */

    .eccrm-faq-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }


    /* =========================
       FAQ ITEM
    ========================== */

    .eccrm-faq-item {
        position: relative;

        overflow: hidden;

        border: 1px solid var(--eccrm-border);
        border-radius: 18px;

        background: var(--eccrm-white);

        box-shadow:
            0 3px 12px rgba(16, 24, 40, 0.025);

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


    .eccrm-faq-item:hover {
        /* border-color: rgba(11, 99, 246, 0.22); */

        box-shadow:
            0 12px 35px rgba(16, 24, 40, 0.07);

        transform: translateY(-1px);
    }


    .eccrm-faq-item.is-open {
        border-color: rgba(11, 99, 246, 0.28);

        box-shadow:
            0 16px 42px rgba(16, 24, 40, 0.09);
    }


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

    .eccrm-faq-question {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding: 10px 27px;

        border: 0;
        outline: none;

        background: transparent;

        color: var(--eccrm-text);

        text-align: left;

        /* font-family: inherit; */
        font-size: 17px;
        line-height: 1.45;
        font-weight: 700;

        cursor: pointer;

        transition:
            color 0.25s ease,
            background 0.25s ease;
    }


    .eccrm-faq-question:hover {
        color: var(--eccrm-primary);
    }


    .eccrm-faq-question:focus-visible {
        box-shadow:
            inset 0 0 0 3px rgba(11, 99, 246, 0.18);
    }


    .eccrm-faq-question > span:first-child {
        padding-right: 20px;
    }


    /* =========================
       PLUS / MINUS ICON
    ========================== */

    .eccrm-faq-icon {
        position: relative;

        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        margin-left: 15px;

        border-radius: 50%;

        /* background: rgba(11, 99, 246, 0.08); */

        transition:
            background 0.3s ease,
            transform 0.3s ease;
    }


    .eccrm-faq-icon span {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 15px;
        height: 2px;

        border-radius: 10px;

        background: var(--eccrm-primary);

        transform: translate(-50%, -50%);

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    .eccrm-faq-icon span:nth-child(2) {
        transform:
            translate(-50%, -50%)
            rotate(90deg);
    }


    .eccrm-faq-item.is-open
    .eccrm-faq-icon {
        background: var(--eccrm-primary);
        transform: rotate(180deg);
    }


    .eccrm-faq-item.is-open
    .eccrm-faq-icon span {
        background: var(--eccrm-white);
    }


    .eccrm-faq-item.is-open
    .eccrm-faq-icon span:nth-child(2) {
        opacity: 0;
    }


    /* =========================
       ANSWER
    ========================== */

    .eccrm-faq-answer {
        display: grid;

        grid-template-rows: 0fr;

        transition:
            grid-template-rows 0.38s ease;
    }


    .eccrm-faq-answer-inner {
        min-height: 0;
        overflow: hidden;

        padding: 0 27px;

        opacity: 0;

        transform: translateY(-8px);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            padding 0.38s ease;
    }


    .eccrm-faq-item.is-open
    .eccrm-faq-answer {
        grid-template-rows: 1fr;
    }


    .eccrm-faq-item.is-open
    .eccrm-faq-answer-inner {
        padding:
            0 27px 27px;

        opacity: 1;

        transform: translateY(0);
    }


    .eccrm-faq-answer-inner p {
        max-width: 850px;

        margin: 0;

        padding-top: 2px;

        color: var(--eccrm-muted);

        font-size: 16px;
        line-height: 1.8;
    }


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

    .eccrm-faq-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;

        margin-top: 45px;
        margin-bottom:20px;
        padding: 27px 30px;

        /* border: 1px solid rgba(11, 99, 246, 0.15); */
        border-radius: 20px;

        /* background:
            linear-gradient(
                135deg,
                rgba(11, 99, 246, 0.09),
                rgba(255, 255, 255, 0.95)
            ); */

        box-shadow:
            0 15px 40px rgba(16, 24, 40, 0.05);
    }


    .eccrm-faq-cta-content {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }


    .eccrm-faq-cta strong {
        color: var(--eccrm-text);

        font-size: 18px;
        line-height: 1.4;
    }


    .eccrm-faq-cta-content span {
        color: var(--eccrm-muted);

        font-size: 14px;
        line-height: 1.5;
    }


    .eccrm-faq-cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        flex-shrink: 0;

        padding: 14px 21px;

        border-radius: 11px;

        background: var(--eccrm-primary);

        color: #ffffff;

        text-decoration: none;

        font-size: 14px;
        font-weight: 700;

        box-shadow:
            0 10px 24px rgba(11, 99, 246, 0.22);

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


    .eccrm-faq-cta-button:hover {
        background: var(--eccrm-primary-dark);

        color: #ffffff;

        transform: translateY(-2px);

        box-shadow:
            0 14px 30px rgba(11, 99, 246, 0.28);
    }


    .eccrm-faq-cta-button svg {
        width: 18px;
        height: 18px;

        fill: none;

        stroke: currentColor;
        stroke-width: 2;

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


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

    @media (max-width: 768px) {

        .eccrm-faq-section {
            padding: 70px 16px;
        }


        .eccrm-faq-header {
            margin-bottom: 38px;
        }


        .eccrm-faq-header h2 {
            font-size: 36px;
        }


        .eccrm-faq-header p {
            font-size: 15px;
        }


        .eccrm-faq-question {
            padding: 20px 18px;

            font-size: 16px;
        }


        .eccrm-faq-icon {
            flex-basis: 34px;

            width: 34px;
            height: 34px;

            margin-left: 10px;
        }


        .eccrm-faq-icon span {
            width: 13px;
        }


        .eccrm-faq-item.is-open
        .eccrm-faq-answer-inner {
            padding:
                0 18px 22px;
        }


        .eccrm-faq-answer-inner p {
            font-size: 15px;
            line-height: 1.75;
        }


        .eccrm-faq-cta {
            flex-direction: column;
            align-items: stretch;

            padding: 24px 20px;
        }


        .eccrm-faq-cta-button {
            width: 100%;
        }

    }


    @media (max-width: 480px) {

        .eccrm-faq-section {
            padding:
                55px 13px;
        }


        .eccrm-faq-header h2 {
            font-size: 31px;
        }


        .eccrm-faq-question {
            padding: 18px 15px;

            font-size: 15px;
        }


        .eccrm-faq-icon {
            flex-basis: 32px;

            width: 32px;
            height: 32px;
        }


        .eccrm-faq-item.is-open
        .eccrm-faq-answer-inner {
            padding:
                0 15px 20px;
        }


        .eccrm-faq-answer-inner p {
            font-size: 14px;
        }

    }


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

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

        .eccrm-faq-item,
        .eccrm-faq-icon,
        .eccrm-faq-question,
        .eccrm-faq-answer,
        .eccrm-faq-answer-inner,
        .eccrm-faq-cta-button {
            transition: none !important;
        }

    }