/* =========================================================
   ECCRM PREMIUM HERO
   UPDATED - TOP GAP FIX
   Content / HTML / JS unchanged
   Fully isolated CSS
========================================================= */

.eccrm-hero-section,
.eccrm-hero-section * {
    box-sizing: border-box;
}


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

.eccrm-hero-section {

    --eccrm-teal: #04a49c;
    --eccrm-teal-dark: #04a49c;
    --eccrm-grey: #5b5c5c;
    --eccrm-dark: #5B5C5C;
    --eccrm-text: #25313b;
    --eccrm-light: #f4fbfa;
    --eccrm-border: rgba(4, 164, 156, .14);

    position: relative;

    width: 100%;

    /*
       IMPORTANT:
       Prevent accidental margin collapse from
       surrounding page elements.
    */
    margin: 0;

    overflow: hidden;

    background:
        radial-gradient(circle at 78% 20%,
            rgba(4, 164, 156, .14) 0%,
            rgba(4, 164, 156, .045) 28%,
            transparent 52%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f8fcfc 48%,
            #effaf9 100%);

    font-family:
        "Graphik", "IBM Plex Sans Arabic", sans-serif;

    isolation: isolate;
}


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

.eccrm-hero-bg-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

    z-index: -1;
}


.eccrm-hero-bg-orb-1 {

    width: 430px;
    height: 430px;

    /*
       Moved upward so it doesn't visually create
       unnecessary blank space.
    */

    top: -250px;
    right: -120px;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .18),
            rgba(4, 164, 156, .04) 55%,
            transparent 72%);
}


.eccrm-hero-bg-orb-2 {

    width: 300px;
    height: 300px;

    bottom: -160px;
    left: -120px;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .12),
            transparent 70%);
}


/* =========================================================
   SUBTLE GRID
========================================================= */

.eccrm-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    pointer-events: none;

    z-index: -1;

    background-image:

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

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

    background-size: 50px 50px;

    mask-image:
        linear-gradient(to bottom,
            black,
            transparent 80%);
}


/* =========================================================
   MAIN CONTAINER
   *** MAIN TOP GAP FIX ***
========================================================= */

.eccrm-hero-container {

    position: relative;

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

    /*
       OLD:
       min-height: 690px;
       padding: 75px 0 45px;
       align-items: center;

       NEW:
       Much more compact hero.
    */

    min-height: 560px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(400px, .90fr) minmax(520px, 1.10fr);

    /*
       Start the hero from the top instead of
       vertically centering the entire section.
    */

    align-items: start;

    gap: 35px;

    padding:
        28px 0 38px;
}


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

.eccrm-hero-content {

    position: relative;

    z-index: 5;

    max-width: 650px;

    /*
       Small controlled offset.
       This replaces the large vertical centering.
    */

    padding-top: 12px;
}


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

.eccrm-hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

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

    border-radius: 999px;

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

    backdrop-filter:
        blur(12px);

    color:
        #04a49c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

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


.eccrm-hero-eyebrow-dot {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        #04a49c;

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

    animation:
        eccrmHeroPulse 2s infinite;
}


.eccrm-hero-divider {

    color:
        #a7b3b4;
}


/* =========================================================
   HEADLINE
========================================================= */

.eccrm-hero-title {

    margin:
        18px 0 17px;

    color:
        #5B5C5C;

    font-size:
        clamp(42px,
            4.1vw,
            48px);

    line-height:
        1.03;

    letter-spacing:
        -.045em;

    font-weight:
        800;
}


.eccrm-hero-title-break {

    display:
        inline;
}


.eccrm-hero-highlight {

    display:
        block;

    color:
        #04a49c;

    /*
       Keep only the requested brand colors.
    */

    background:
        none;

    -webkit-background-clip:
        initial;

    background-clip:
        initial;

    -webkit-text-fill-color:
        #04a49c;
}


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

.eccrm-hero-description {

    max-width:
        610px;

    margin:
        0;

    color:
        #5b5c5c;

    font-size:
        16px;

    line-height:
        1.68;

    font-weight:
        400;
}


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

.eccrm-hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        25px;
}


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

.eccrm-hero-primary-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        54px;

    padding:
        0 20px 0 23px;

    border-radius:
        13px;

    color:
        #ffffff !important;

    background:
        #04a49c;

    text-decoration:
        none !important;

    font-size:
        14px;

    font-weight:
        750;

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

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


.eccrm-hero-primary-btn:hover {

    transform:
        translateY(-3px);

    background:
        #04a49c;

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


.eccrm-hero-btn-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .18);
}


.eccrm-hero-btn-arrow svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;
}


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

.eccrm-hero-secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        54px;

    padding:
        0 18px;

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

    border-radius:
        13px;

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

    color:
        #5b5c5c;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 8px 24px rgba(20, 50, 60, .05);

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


.eccrm-hero-secondary-btn:hover {

    transform:
        translateY(-3px);

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

    background:
        #ffffff;

    color:
        #04a49c;
}


.eccrm-hero-play-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        29px;

    height:
        29px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        #04a49c;

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


.eccrm-hero-play-icon svg {

    width:
        17px;

    height:
        17px;

    fill:
        currentColor;
}


/* =========================================================
   PRODUCT SHORTCUTS
========================================================= */

.eccrm-hero-features {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        27px;
}


.eccrm-hero-feature {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        7px 11px;

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

    border-radius:
        11px;

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

    color:
        #5b5c5c;

    text-decoration:
        none !important;

    font-size:
        12px;

    font-weight:
        700;

    box-shadow:
        0 6px 18px rgba(20, 60, 70, .035);

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


.eccrm-hero-feature:hover {

    transform:
        translateY(-3px);

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

    color:
        #04a49c;

    background:
        #ffffff;
}


.eccrm-hero-feature-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    border-radius:
        8px;

    color:
        #04a49c;

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


.eccrm-hero-feature-icon svg {

    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   RIGHT PRODUCT VISUAL
   *** TOP GAP FIX ***
========================================================= */

.eccrm-hero-visual {

    position:
        relative;

    /*
       Reduced from 590px.
    */

    min-height:
        490px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    perspective:
        1400px;

    /*
       Pull dashboard slightly upward.
    */

    padding-top:
        18px;
}


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

.eccrm-hero-screen-glow {

    position:
        absolute;

    top:
        0;

    width:
        580px;

    height:
        580px;

    border-radius:
        50%;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .18) 0%,
            rgba(4, 164, 156, .07) 35%,
            transparent 70%);

    filter:
        blur(12px);

    animation:
        eccrmHeroGlow 5s ease-in-out infinite;
}


/* =========================================================
   DASHBOARD
========================================================= */

.eccrm-hero-dashboard-wrap {

    position:
        relative;

    width:
        min(720px,
            100%);

    /*
       Slightly less aggressive perspective.
    */

    transform:
        rotateY(-4deg) rotateX(1.5deg);

    transition:
        transform .7s cubic-bezier(.2, .7, .2, 1);

    z-index:
        3;
}


.eccrm-hero-dashboard-wrap:hover {

    transform:
        rotateY(0deg) rotateX(0deg) translateY(-5px);
}


.eccrm-hero-dashboard-frame {

    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        21px;

    background:
        #ffffff;

    box-shadow:
        0 35px 80px rgba(20, 60, 70, .15),
        0 10px 30px rgba(4, 164, 156, .08);

    transform:
        translateZ(0);
}


/* =========================================================
   BROWSER BAR
========================================================= */

.eccrm-hero-browser-bar {

    display:
        flex;

    align-items:
        center;

    height:
        34px;

    padding:
        0 13px;

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

    background:
        #ffffff;
}


.eccrm-hero-browser-dots {

    display:
        flex;

    gap:
        5px;
}


.eccrm-hero-browser-dots span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #04a49c;
}


.eccrm-hero-browser-address {

    margin-left:
        20px;

    padding:
        4px 12px;

    border-radius:
        6px;

    color:
        #04a49c;

    background:
        #f2f6f6;

    font-size:
        8px;
}


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

.eccrm-hero-dashboard-image-wrap {

    position:
        relative;

    overflow:
        hidden;

    background:
        #f7fafa;
}


.eccrm-hero-dashboard-image {

    display:
        block;

    width:
        100%;

    height:
        auto;

    max-width:
        100%;

    object-fit:
        cover;

    transition:
        transform .8s cubic-bezier(.2, .7, .2, 1);
}


.eccrm-hero-dashboard-wrap:hover .eccrm-hero-dashboard-image {

    transform:
        scale(1.018);
}


/* =========================================================
   FLOATING TOP LABEL
========================================================= */

.eccrm-hero-floating-label {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 14px;

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

    border-radius:
        12px;

    color:
        #5b5c5c;

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

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 16px 40px rgba(20, 70, 75, .11);

    font-size:
        10px;

    font-weight:
        750;

    z-index:
        8;
}


.eccrm-hero-label-top {

    top:
        32px;

    right:
        -10px;

    animation:
        eccrmHeroFloat 4s ease-in-out infinite;
}


.eccrm-hero-live-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #04a49c;

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


/* =========================================================
   KPI CARDS
========================================================= */

.eccrm-hero-kpi-card {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 15px;

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

    border-radius:
        14px;

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

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 45px rgba(20, 70, 75, .13);

    z-index:
        9;
}


.eccrm-hero-kpi-card-1 {

    left:
        -20px;

    bottom:
        105px;

    animation:
        eccrmHeroFloat 4.5s ease-in-out infinite;
}


.eccrm-hero-kpi-card-2 {

    right:
        -15px;

    bottom:
        45px;

    animation:
        eccrmHeroFloat 5.2s ease-in-out infinite reverse;
}


.eccrm-hero-kpi-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    border-radius:
        11px;

    color:
        #04a49c;

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


.eccrm-hero-kpi-icon svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.eccrm-hero-kpi-service {

    color:
        #04a49c;

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


.eccrm-hero-kpi-card small {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #5b5c5c;

    font-size:
        9px;

    font-weight:
        600;
}


.eccrm-hero-kpi-card strong {

    display:
        block;

    color:
        #5B5C5C;

    font-size:
        12px;
}


.eccrm-hero-kpi-up {

    display:
        block;

    margin-top:
        2px;

    color:
        #04a49c;

    font-size:
        8px;

    font-weight:
        750;
}


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

.eccrm-hero-mobile-preview {

    position:
        absolute;

    right:
        2%;

    bottom:
        5px;

    width:
        118px;

    height:
        230px;

    padding:
        8px;

    border:
        2px solid #182d35;

    border-radius:
        21px;

    background:
        #15262d;

    box-shadow:
        0 25px 50px rgba(20, 60, 70, .23);

    transform:
        rotate(5deg);

    z-index:
        10;

    animation:
        eccrmHeroMobileFloat 4.8s ease-in-out infinite;
}


.eccrm-hero-mobile-notch {

    position:
        absolute;

    top:
        7px;

    left:
        50%;

    width:
        42px;

    height:
        9px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 7px 7px;

    background:
        #15262d;

    z-index:
        2;
}


.eccrm-hero-mobile-screen {

    width:
        100%;

    height:
        100%;

    padding:
        17px 8px 8px;

    overflow:
        hidden;

    border-radius:
        15px;

    background:
        linear-gradient(180deg,
            #f8fcfc,
            #edf8f7);
}


.eccrm-hero-mobile-header {

    color:
        #04a49c;

    font-size:
        11px;

    font-weight:
        850;
}


.eccrm-hero-mobile-stat {

    margin-top:
        13px;

    padding:
        9px;

    border-radius:
        8px;

    background:
        #ffffff;
}


.eccrm-hero-mobile-stat span {

    display:
        block;

    color:
        #5b5c5c;

    font-size:
        7px;
}


.eccrm-hero-mobile-stat strong {

    display:
        block;

    margin-top:
        2px;

    color:
        #5B5C5C;

    font-size:
        18px;
}


.eccrm-hero-mobile-job {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        7px;

    padding:
        8px;

    border-radius:
        7px;

    color:
        #5b5c5c;

    background:
        #ffffff;

    font-size:
        7px;

    font-weight:
        700;
}


.eccrm-hero-mobile-job span {

    width:
        5px;

    height:
        5px;

    flex:
        0 0 5px;

    border-radius:
        50%;

    background:
        #04a49c;
}


/* =========================================================
   VIDEO MODAL
   JS/HTML REMAIN UNCHANGED
========================================================= */

.eccrm-hero-video-modal {

    position:
        fixed;

    inset:
        0;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

    z-index:
        999999;

    opacity:
        0;

    transition:
        opacity .3s ease;
}


.eccrm-hero-video-modal.eccrm-hero-video-active {

    display:
        flex;

    opacity:
        1;
}


.eccrm-hero-video-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(5, 20, 25, .82);

    backdrop-filter:
        blur(8px);
}


.eccrm-hero-video-container {

    position:
        relative;

    width:
        min(1000px, 95vw);

    z-index:
        2;
}


.eccrm-hero-video-frame {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        #000000;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .45);
}


.eccrm-hero-video-frame iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


.eccrm-hero-video-close {

    position:
        absolute;

    top:
        -45px;

    right:
        0;

    width:
        36px;

    height:
        36px;

    border:
        0;

    border-radius:
        50%;

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

    cursor:
        pointer;

    z-index:
        5;
}


.eccrm-hero-video-close span {

    position:
        absolute;

    top:
        17px;

    left:
        9px;

    width:
        18px;

    height:
        2px;

    background:
        #ffffff;

    transform:
        rotate(45deg);
}


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

    transform:
        rotate(-45deg);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes eccrmHeroPulse {

    0%,
    100% {

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

    50% {

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


@keyframes eccrmHeroFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-8px);
    }
}


@keyframes eccrmHeroMobileFloat {

    0%,
    100% {

        transform:
            rotate(5deg) translateY(0);
    }

    50% {

        transform:
            rotate(5deg) translateY(-9px);
    }
}


@keyframes eccrmHeroGlow {

    0%,
    100% {

        opacity:
            .65;

        transform:
            scale(1);
    }

    50% {

        opacity:
            .9;

        transform:
            scale(1.06);
    }
}


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

@media (max-width: 1280px) {

    .eccrm-hero-container {

        width:
            min(1180px,
                calc(100% - 50px));

        grid-template-columns:
            minmax(360px, .88fr) minmax(470px, 1.12fr);

        gap:
            20px;

        padding:
            24px 0 35px;

        min-height:
            530px;
    }


    .eccrm-hero-content {

        padding-top:
            8px;
    }


    .eccrm-hero-title {

        font-size:
            clamp(40px,
                4.3vw,
                57px);
    }


    .eccrm-hero-description {

        font-size:
            16px;
    }


    .eccrm-hero-visual {

        min-height:
            460px;

        padding-top:
            12px;
    }


    .eccrm-hero-mobile-preview {

        right:
            0;

        width:
            105px;

        height:
            205px;
    }


    .eccrm-hero-kpi-card-1 {

        left:
            -5px;
    }


    .eccrm-hero-kpi-card-2 {

        right:
            -5px;
    }
}


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

@media (max-width: 1024px) {

    .eccrm-hero-container {

        width:
            min(900px,
                calc(100% - 40px));

        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            28px;

        padding:
            32px 0 45px;

        /*
           On tablet the content is naturally
           top aligned.
        */

        align-items:
            start;
    }


    .eccrm-hero-content {

        max-width:
            760px;

        margin:
            0 auto;

        padding-top:
            0;

        text-align:
            center;
    }


    .eccrm-hero-eyebrow {

        justify-content:
            center;
    }


    .eccrm-hero-description {

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .eccrm-hero-actions {

        justify-content:
            center;
    }


    .eccrm-hero-features {

        justify-content:
            center;
    }


    .eccrm-hero-visual {

        min-height:
            480px;

        width:
            min(760px,
                100%);

        margin:
            0 auto;

        padding-top:
            0;
    }


    .eccrm-hero-dashboard-wrap {

        width:
            92%;
    }


    .eccrm-hero-label-top {

        right:
            0;
    }
}


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

@media (max-width: 768px) {

    .eccrm-hero-container {

        width:
            calc(100% - 30px);

        padding:
            28px 0 40px;

        gap:
            25px;
    }


    .eccrm-hero-title {

        font-size:
            clamp(36px,
                8vw,
                48px);

        letter-spacing:
            -.035em;
    }


    .eccrm-hero-description {

        max-width:
            600px;

        font-size:
            15px;

        line-height:
            1.65;
    }


    .eccrm-hero-visual {

        min-height:
            420px;
    }


    .eccrm-hero-dashboard-wrap {

        width:
            94%;

        transform:
            rotateY(-2deg) rotateX(1deg);
    }


    .eccrm-hero-mobile-preview {

        right:
            0;

        bottom:
            0;

        width:
            88px;

        height:
            172px;

        border-radius:
            17px;
    }


    .eccrm-hero-kpi-card {

        padding:
            9px 11px;
    }


    .eccrm-hero-kpi-card-1 {

        left:
            0;

        bottom:
            65px;
    }


    .eccrm-hero-kpi-card-2 {

        right:
            0;

        bottom:
            20px;
    }


    .eccrm-hero-kpi-icon {

        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;
    }


    .eccrm-hero-kpi-card small {

        font-size:
            8px;
    }


    .eccrm-hero-kpi-card strong {

        font-size:
            10px;
    }


    .eccrm-hero-kpi-up {

        font-size:
            7px;
    }
}


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

@media (max-width: 600px) {

    .eccrm-hero-container {

        width:
            calc(100% - 24px);

        /*
           IMPORTANT:
           Very small top padding.
        */

        padding:
            20px 0 30px;

        gap:
            23px;
    }


    .eccrm-hero-content {

        width:
            100%;

        padding:
            0;

        text-align:
            center;
    }


    .eccrm-hero-eyebrow {

        padding:
            7px 10px;

        gap:
            5px;

        font-size:
            12px;

        letter-spacing:
            .04em;
    }


    .eccrm-hero-title {

        margin-top:
            15px;

        font-size:
            clamp(31px,
                9.5vw,
                41px);

        line-height:
            1.06;
    }


    .eccrm-hero-title-break {

        display:
            inline;
    }


    .eccrm-hero-highlight {

        display:
            inline;

        color:
            #04a49c;

        -webkit-text-fill-color:
            #04a49c;
    }


    .eccrm-hero-description {

        font-size:
            14px;

        line-height:
            1.62;
    }


    .eccrm-hero-actions {

        flex-direction:
            column;

        width:
            100%;

        gap:
            10px;

        margin-top:
            20px;
    }


    .eccrm-hero-primary-btn,
    .eccrm-hero-secondary-btn {

        width:
            100%;
    }


    .eccrm-hero-primary-btn {

        min-height:
            52px;
    }


    .eccrm-hero-secondary-btn {

        min-height:
            50px;

        justify-content:
            center;
    }


    .eccrm-hero-features {

        display:
            grid;

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

        gap:
            7px;

        margin-top:
            21px;
    }


    .eccrm-hero-feature {

        min-width:
            0;

        min-height:
            55px;

        padding:
            7px 4px;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            4px;

        border-radius:
            9px;

        font-size:
            13px;

        text-align:
            center;
    }


    .eccrm-hero-feature-icon {

        width:
            24px;

        height:
            24px;
    }


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

    .eccrm-hero-visual {

        min-height:
            315px;

        width:
            100%;

        padding:
            0;
    }


    .eccrm-hero-dashboard-wrap {

        width:
            100%;

        transform:
            none;
    }


    .eccrm-hero-dashboard-wrap:hover {

        transform:
            none;
    }


    .eccrm-hero-browser-bar {

        height:
            25px;

        padding:
            0 8px;
    }


    .eccrm-hero-browser-dots span {

        width:
            5px;

        height:
            5px;
    }


    .eccrm-hero-browser-address {

        margin-left:
            10px;

        padding:
            3px 7px;

        font-size:
            6px;
    }


    /*
       Hide floating desktop decorations
       so the mobile hero remains clean.
    */

    .eccrm-hero-label-top,
    .eccrm-hero-kpi-card,
    .eccrm-hero-mobile-preview {

        display:
            none;
    }


    .eccrm-hero-screen-glow {

        width:
            350px;

        height:
            350px;

        top:
            -20px;
    }
}


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

@media (max-width: 380px) {

    .eccrm-hero-container {

        padding-top:
            17px;
    }


    .eccrm-hero-title {

        font-size:
            30px;
    }


    .eccrm-hero-description {

        font-size:
            13px;
    }


    .eccrm-hero-features {

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


    .eccrm-hero-feature-last {

        display:
            none;
    }


    .eccrm-hero-visual {

        min-height:
            255px;
    }
}


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

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }
}

/* =========================================================
   ECCRM HERO - FINAL RESPONSIVE VISUAL FIX
   ---------------------------------------------------------
   HTML / CONTENT / LINKS / IMAGE / JS UNCHANGED
   Only CSS is overridden here.
   ========================================================= */


/* =========================================================
   GLOBAL HERO CONTROL
   ========================================================= */

.eccrm-hero-section {
    width: 100%;
    overflow: hidden;
}

.eccrm-hero-section,
.eccrm-hero-section * {
    box-sizing: border-box;
}


/* =========================================================
   MAIN HERO CONTAINER
   ========================================================= */

.eccrm-hero-container {
    width: min(1400px, calc(100% - 100px));

    min-height: 0;

    margin: 0 auto;

    display: grid;

    /*
       More balanced left / right proportions.
       Left = content
       Right = product image
    */
    grid-template-columns:
        minmax(470px, 0.88fr) minmax(540px, 1.12fr);

    align-items: center;

    gap: 20px;

    padding: 30px 0 40px;
}


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

.eccrm-hero-content {
    width: 100%;
    max-width: 650px;

    padding-top: 0;

    position: relative;
    z-index: 5;
}


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

.eccrm-hero-title {
    margin: 18px 0 17px;

    font-size: clamp(40px, 3.65vw, 48px);

    line-height: 1.04;

    letter-spacing: -0.045em;

    font-weight: 800;

    color: #5B5C5C;
}


/*
   Keep the wording exactly the same.

   Desktop:
   The heading behaves as one continuous headline.

   Smaller screens:
   It is allowed to wrap naturally.
*/

.eccrm-hero-title-break {
    display: inline;
}

.eccrm-hero-highlight {
    display: inline;

    color: #04a49c !important;

    background: none !important;

    -webkit-text-fill-color: #04a49c !important;
}


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

.eccrm-hero-description {
    max-width: 620px;

    margin: 0;

    color: #5b5c5c;

    font-size: 16px;

    line-height: 1.65;
}


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

.eccrm-hero-actions {
    margin-top: 22px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;
}


/* =========================================================
   PRODUCT SHORTCUTS
   ========================================================= */

.eccrm-hero-features {
    margin-top: 22px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


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

.eccrm-hero-visual {

    position: relative;

    width: 100%;

    min-height: 440px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    perspective: none;

    overflow: visible;
}


/* =========================================================
   REMOVE LARGE BACKGROUND GLOW
   ---------------------------------------------------------
   User requested the actual image only.
   ========================================================= */

.eccrm-hero-screen-glow {
    display: none !important;
}


/* =========================================================
   IMAGE WRAPPER
   ---------------------------------------------------------
   Remove dashboard/browser appearance.
   ========================================================= */

.eccrm-hero-dashboard-wrap {

    position: relative;

    width: min(680px, 100%);

    margin: 0 auto;

    transform: none !important;

    transition: transform .35s ease;

    z-index: 3;
}


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

.eccrm-hero-dashboard-wrap:hover {

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


/* =========================================================
   REMOVE BROWSER / DASHBOARD FRAME
   ========================================================= */

.eccrm-hero-dashboard-frame {

    position: relative;

    width: 100%;

    overflow: visible;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;
}


/* =========================================================
   REMOVE BROWSER BAR
   ========================================================= */

.eccrm-hero-browser-bar {
    display: none !important;
}


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

.eccrm-hero-dashboard-image-wrap {

    position: relative;

    width: 100%;

    overflow: visible;

    background: transparent !important;

    border: 0 !important;
}


/* =========================================================
   ACTUAL ECCRM IMAGE
   ========================================================= */

.eccrm-hero-dashboard-image {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    object-fit: contain;

    border: 0;

    background: transparent;

    transform: none;

    filter: none;

    transition:
        transform .45s ease;
}


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

.eccrm-hero-dashboard-wrap:hover .eccrm-hero-dashboard-image {

    transform: scale(1.012);
}


/* =========================================================
   FLOATING TOP LABEL
   ========================================================= */

.eccrm-hero-label-top {

    top: 12px;

    right: -5px;

    z-index: 20;
}


/* =========================================================
   FLOATING KPI CARDS
   ========================================================= */

.eccrm-hero-kpi-card-1 {

    left: -5px;

    bottom: 95px;

    z-index: 20;
}


.eccrm-hero-kpi-card-2 {

    right: -5px;

    bottom: 40px;

    z-index: 20;
}


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

@media (min-width: 1441px) {

    .eccrm-hero-container {

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

        grid-template-columns:
            minmax(500px, .90fr) minmax(600px, 1.10fr);

        gap: 25px;

        padding-top: 32px;
        padding-bottom: 42px;
    }


    .eccrm-hero-dashboard-wrap {

        width: min(720px, 100%);
    }


    .eccrm-hero-title {

        font-size: 43px;
    }
}


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

@media (max-width: 1280px) and (min-width: 1025px) {

    .eccrm-hero-container {

        width: calc(100% - 70px);

        grid-template-columns:
            minmax(440px, .92fr) minmax(500px, 1.08fr);

        gap: 15px;

        padding: 28px 0 35px;
    }


    .eccrm-hero-title {

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

        line-height: 1.05;
    }


    .eccrm-hero-description {

        font-size: 14px;

        line-height: 1.65;
    }


    .eccrm-hero-visual {

        min-height: 400px;
    }


    .eccrm-hero-dashboard-wrap {

        width: min(630px, 100%);
    }


    .eccrm-hero-kpi-card {

        transform: scale(.92);
    }


    .eccrm-hero-kpi-card-1 {

        left: -2px;
        bottom: 80px;
    }


    .eccrm-hero-kpi-card-2 {

        right: -2px;
        bottom: 30px;
    }
}


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

@media (max-width: 1024px) {

    .eccrm-hero-container {

        width: min(900px, calc(100% - 40px));

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 25px;

        padding: 35px 0 45px;
    }


    .eccrm-hero-content {

        max-width: 760px;

        margin: 0 auto;

        text-align: center;

        order: 1;
    }


    .eccrm-hero-eyebrow {

        justify-content: center;
    }


    .eccrm-hero-title {

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

        line-height: 1.05;
    }


    .eccrm-hero-description {

        max-width: 700px;

        margin-left: auto;
        margin-right: auto;

        font-size: 15px;
    }


    .eccrm-hero-actions {

        justify-content: center;
    }


    .eccrm-hero-features {

        justify-content: center;
    }


    .eccrm-hero-visual {

        width: 100%;

        min-height: 410px;

        order: 2;

        padding: 0;
    }


    .eccrm-hero-dashboard-wrap {

        width: min(700px, 95%);

        margin: 0 auto;
    }


    .eccrm-hero-label-top {

        right: 0;
    }
}


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

@media (max-width: 768px) and (min-width: 601px) {

    .eccrm-hero-container {

        width: calc(100% - 32px);

        gap: 22px;

        padding: 28px 0 38px;
    }


    .eccrm-hero-title {

        font-size: clamp(34px, 7vw, 44px);

        line-height: 1.06;
    }


    .eccrm-hero-description {

        font-size: 14px;

        line-height: 1.65;
    }


    .eccrm-hero-visual {

        min-height: 360px;
    }


    .eccrm-hero-dashboard-wrap {

        width: 94%;
    }


    .eccrm-hero-kpi-card {

        transform: scale(.82);
    }


    .eccrm-hero-kpi-card-1 {

        left: -3px;

        bottom: 55px;
    }


    .eccrm-hero-kpi-card-2 {

        right: -3px;

        bottom: 15px;
    }


    .eccrm-hero-label-top {

        transform: scale(.85);

        transform-origin: right top;
    }
}


/* =========================================================
   MOBILE
   ---------------------------------------------------------
   IMAGE FIRST
   ========================================================= */

@media (max-width: 600px) {

    .eccrm-hero-container {

        width: calc(100% - 24px);

        display: flex;

        flex-direction: column;

        gap: 18px;

        padding: 18px 0 28px;
    }


    /* IMAGE FIRST */

    .eccrm-hero-visual {

        order: 1;

        width: 100%;

        min-height: auto;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .eccrm-hero-content {

        order: 2;

        width: 100%;

        max-width: 100%;

        padding: 0;

        text-align: center;
    }


    /* IMAGE */

    .eccrm-hero-dashboard-wrap {

        width: 100%;

        max-width: 560px;

        margin: 0 auto;

        transform: none !important;
    }


    .eccrm-hero-dashboard-frame {

        width: 100%;

        background: transparent !important;

        box-shadow: none !important;
    }


    .eccrm-hero-dashboard-image-wrap {

        width: 100%;

        background: transparent !important;
    }


    .eccrm-hero-dashboard-image {

        width: 100%;

        max-width: 100%;

        height: auto;

        object-fit: contain;
    }


    /* HIDE DESKTOP DECORATIONS ON MOBILE */

    .eccrm-hero-label-top,
    .eccrm-hero-kpi-card,
    .eccrm-hero-mobile-preview {

        display: none !important;
    }


    /* EYEBROW */

    .eccrm-hero-eyebrow {

        padding: 7px 10px;

        gap: 5px;

        font-size: 11px;

        letter-spacing: .04em;

        justify-content: center;
    }


    /* HEADING */

    .eccrm-hero-title {

        margin: 14px 0 14px;

        font-size: 28px !important;

        line-height: 1.06;

        letter-spacing: -.04em;
    }


    .eccrm-hero-title-break,
    .eccrm-hero-highlight {

        display: inline;
    }


    /* DESCRIPTION */

    .eccrm-hero-description {

        max-width: 100%;

        font-size: 13.5px;

        line-height: 1.62;
    }


    /* BUTTONS */

    .eccrm-hero-actions {

        width: 100%;

        flex-direction: column;

        gap: 9px;

        margin-top: 18px;
    }


    .eccrm-hero-primary-btn,
    .eccrm-hero-secondary-btn {

        width: 100%;

        min-height: 50px;
    }


    .eccrm-hero-primary-btn {

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


    .eccrm-hero-secondary-btn {

        justify-content: center;
    }


    /* FEATURE SHORTCUTS */

    .eccrm-hero-features {

        width: 100%;

        display: grid;

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

        gap: 7px;

        margin-top: 18px;
    }


    .eccrm-hero-feature {

        width: 100%;

        min-width: 0;

        min-height: 46px;

        padding: 6px 5px;

        justify-content: center;

        gap: 6px;

        border-radius: 9px;

        font-size: 13px;
    }


    .eccrm-hero-feature-icon {

        width: 22px;

        height: 22px;

        flex: 0 0 22px;
    }
}


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

@media (max-width: 380px) {

    .eccrm-hero-container {

        width: calc(100% - 20px);

        gap: 15px;

        padding-top: 15px;

        padding-bottom: 25px;
    }


    .eccrm-hero-title {

        font-size: 22px;

        line-height: 1.07;
    }


    .eccrm-hero-description {

        font-size: 12.5px;

        line-height: 1.6;
    }


    .eccrm-hero-features {

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

        gap: 6px;
    }


    .eccrm-hero-feature {

        min-height: 44px;

        font-size: 13px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 320px) {

    .eccrm-hero-title {

        font-size: 27px;
    }


    .eccrm-hero-description {

        font-size: 12px;
    }


    .eccrm-hero-primary-btn,
    .eccrm-hero-secondary-btn {

        font-size: 12px;
    }
}


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

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

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

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }
}

/* Hero end */

/* =========================================================
   ECCRM Trust PROOF
   Completely isolated CSS
========================================================= */

.eccrm-proof-section,
.eccrm-proof-section * {
    box-sizing: border-box;
}


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

.eccrm-proof-section {

    --eccrm-proof-teal: #04A49C;
    --eccrm-proof-grey: #5B5C5C;
    --eccrm-proof-dark: #102536;

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: #FFFFFF;

    /* font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif; */

    isolation: isolate;
}


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

.eccrm-proof-container {

    width:
        min(1280px,
            calc(100% - 70px));

    margin:
        0 auto;

    padding:
        25px 0 27px;
}


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

.eccrm-proof-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    margin-bottom:
        22px;

    text-align:
        center;
}


.eccrm-proof-heading h2 {

    margin:
        0;

    color:
        #5B5C5C;

    font-size:
        clamp(30px);

    line-height:
        1.3;

    letter-spacing:
        -.025em;

    font-weight:
        750;
}


.eccrm-proof-heading h2 span {

    color:
        var(--eccrm-proof-teal);

    font-weight:
        800;
}


/* Small decorative lines */

.eccrm-proof-heading-line {

    width:
        42px;

    height:
        1px;

    flex:
        0 0 42px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(4, 164, 156, .35));
}


.eccrm-proof-heading-line:last-child {

    background:
        linear-gradient(90deg,
            rgba(4, 164, 156, .35),
            transparent);
}


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

.eccrm-proof-stats {

    display:
        grid;

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

    width:
        100%;

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

    border-radius:
        15px;

    background:
        linear-gradient(135deg,
            #FFFFFF,
            #FAFDFD);

    box-shadow:
        0 10px 35px rgba(16, 37, 54, .045);
}


/* =========================================================
   INDIVIDUAL STAT
========================================================= */

.eccrm-proof-stat {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        83px;

    padding:
        13px 20px;

    text-align:
        left;
}


/* Vertical separators */

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

    content:
        "";

    position:
        absolute;

    top:
        18px;

    right:
        0;

    width:
        1px;

    height:
        calc(100% - 36px);

    background:
        linear-gradient(to bottom,
            transparent,
            rgba(4, 164, 156, .17),
            transparent);
}


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

.eccrm-proof-number-wrap {

    position:
        relative;

    flex:
        0 0 auto;
}


.eccrm-proof-number {

    display:
        block;

    color:
        var(--eccrm-proof-teal);

    font-size:
        clamp(25px,
            2.3vw,
            34px);

    line-height:
        1;

    letter-spacing:
        -.045em;

    font-weight:
        850;

    white-space:
        nowrap;
}


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

.eccrm-proof-label {

    color:
        var(--eccrm-proof-grey);

    font-size:
        14px;

    line-height:
        1.45;

    font-weight:
        650;

    letter-spacing:
        .01em;
}


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

.eccrm-proof-mobile-break {

    display:
        none;
}


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

.eccrm-proof-stat {

    transition:
        background .25s ease;
}


.eccrm-proof-stat:hover {

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


.eccrm-proof-stat:hover .eccrm-proof-number {

    text-shadow:
        0 5px 18px rgba(4, 164, 156, .14);
}


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

@media (max-width: 1100px) {

    .eccrm-proof-container {

        width:
            calc(100% - 50px);

        padding:
            23px 0 25px;
    }


    .eccrm-proof-stat {

        padding:
            12px 14px;

        gap:
            9px;
    }


    .eccrm-proof-number {

        font-size:
            27px;
    }


    .eccrm-proof-label {

        font-size:
            10px;
    }

}


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

@media (max-width: 768px) {

    .eccrm-proof-container {

        width:
            calc(100% - 32px);

        padding:
            25px 0 28px;
    }


    .eccrm-proof-heading {

        margin-bottom:
            18px;

        gap:
            10px;
    }


    .eccrm-proof-heading h2 {

        font-size:
            17px;
    }


    .eccrm-proof-heading-line {

        width:
            25px;

        flex-basis:
            25px;
    }


    .eccrm-proof-stats {

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

        border-radius:
            13px;
    }


    .eccrm-proof-stat {

        min-height:
            78px;

        justify-content:
            center;

        padding:
            13px 15px;
    }


    /* Horizontal separator between rows */

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

        content:
            "";

        position:
            absolute;

        bottom:
            0;

        left:
            15px;

        right:
            15px;

        height:
            1px;

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


    /* Vertical separator */

    .eccrm-proof-stat:nth-child(2)::after {

        display:
            block;
    }


    .eccrm-proof-stat:nth-child(4)::after {

        display:
            none;
    }


    .eccrm-proof-number {

        font-size:
            28px;
    }

}


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

@media (max-width: 600px) {

    .eccrm-proof-container {

        width:
            calc(100% - 22px);

        padding:
            21px 0 24px;
    }


    .eccrm-proof-heading {

        gap:
            0;

        margin-bottom:
            15px;
    }


    .eccrm-proof-heading-line {

        display:
            none;
    }


    .eccrm-proof-heading h2 {

        max-width:
            330px;

        font-size:
            16px;

        line-height:
            1.4;
    }


    .eccrm-proof-stats {

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

        border-radius:
            12px;
    }


    .eccrm-proof-stat {

        min-height:
            78px;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            5px;

        padding:
            12px 7px;

        text-align:
            center;
    }


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

        left:
            10px;

        right:
            10px;
    }


    .eccrm-proof-number {

        font-size:
            27px;

        letter-spacing:
            -.035em;
    }


    .eccrm-proof-label {

        font-size:
            10px;

        line-height:
            1.3;

        text-align:
            center;
    }


    .eccrm-proof-mobile-break {

        display:
            block;
    }

}


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

@media (max-width: 380px) {

    .eccrm-proof-container {

        width:
            calc(100% - 18px);

        padding:
            18px 0 21px;
    }


    .eccrm-proof-heading h2 {

        font-size:
            15px;
    }


    .eccrm-proof-stat {

        min-height:
            73px;
    }


    .eccrm-proof-number {

        font-size:
            24px;
    }


    .eccrm-proof-label {

        font-size:
            10px;
    }

}


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

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

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

        transition:
            none !important;

        animation:
            none !important;
    }

}

/* Trust end */

/* Features Start */
/* =========================================================
   ECCRM INTERACTIVE SHOWCASE
   ISOLATED CSS
========================================================= */

.eccrm-showcase-section,
.eccrm-showcase-section * {
    box-sizing: border-box;
}


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

.eccrm-showcase-section {

    --eccrm-teal: #04A49C;
    --eccrm-grey: #5B5C5C;
    --eccrm-dark: #5B5C5C;
    --eccrm-light: #F5FBFA;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 35px 0 80px;

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

    /* font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif; */

    isolation: isolate;
}


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

.eccrm-showcase-container {

    width:
        min(1450px,
            calc(100% - 60px));

    margin:
        0 auto;
}


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

.eccrm-showcase-intro {

    max-width:
        850px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.eccrm-showcase-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 18px;

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

    border-radius:
        999px;

    color:
        var(--eccrm-teal);

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

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.eccrm-showcase-intro h2 {

    margin:
        17px 0 14px;

    color:
        var(--eccrm-dark);

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

    line-height:
        1.05;

    letter-spacing:
        -.045em;

    font-weight:
        800;
}


.eccrm-showcase-intro h2 span {

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


.eccrm-showcase-intro p {

    max-width:
        750px;

    margin:
        0 auto;

    color:
        var(--eccrm-grey);

    font-size:
        16px;

    line-height:
        1.7;
    font-weight: 500;
}


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

.eccrm-showcase-main {

    display:
        grid;

    grid-template-columns:
        minmax(285px, 1fr) minmax(430px, 1.5fr) minmax(285px, 1fr);

    align-items:
        center;

    gap:
        25px;
}


/* =========================================================
   SIDE PANELS
========================================================= */

.eccrm-showcase-panel {

    position:
        relative;

    width:
        100%;

    min-height:
        485px;

    padding:
        27px;

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

    border-radius:
        24px;

    outline:
        none;

    color:
        inherit;

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

    box-shadow:
        0 22px 60px rgba(16, 37, 54, .07);

    text-align:
        left;

    cursor:
        pointer;

    font-family:
        inherit;

    appearance:
        none;

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


/* Top accent */

.eccrm-showcase-panel::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        28px;

    right:
        28px;

    height:
        3px;

    border-radius:
        0 0 10px 10px;

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

    transition:
        background .3s ease;
}


.eccrm-showcase-sales-panel::before {

    background:
        var(--eccrm-teal);
}


/* Active panel */

.eccrm-showcase-panel-active {

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

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

    transform:
        translateY(-4px);
}


.eccrm-showcase-panel-active::before {

    background:
        var(--eccrm-teal);
}


.eccrm-showcase-service-panel.eccrm-showcase-panel-active {

    border-color:
        rgba(91, 92, 92, .30);

    box-shadow:
        0 28px 70px rgba(91, 92, 92, .12);
}


.eccrm-showcase-service-panel.eccrm-showcase-panel-active::before {

    background:
        var(--eccrm-grey);
}


/* Hover */

.eccrm-showcase-panel:hover {

    transform:
        translateY(-6px);
}


/* Focus */

.eccrm-showcase-panel:focus-visible {

    box-shadow:
        0 0 0 4px rgba(4, 164, 156, .18),
        0 25px 60px rgba(16, 37, 54, .10);
}


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

.eccrm-showcase-panel-top {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        25px;
}


.eccrm-showcase-panel-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    border-radius:
        15px;

    color:
        var(--eccrm-grey);

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

    transition:
        color .3s ease,
        background .3s ease;
}


.eccrm-showcase-sales-panel .eccrm-showcase-panel-icon {

    color:
        var(--eccrm-teal);

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


.eccrm-showcase-panel-active .eccrm-showcase-panel-icon {

    color:
        var(--eccrm-teal);

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


.eccrm-showcase-service-panel.eccrm-showcase-panel-active .eccrm-showcase-panel-icon {

    color:
        var(--eccrm-grey);

    background:
        rgba(91, 92, 92, .12);
}


.eccrm-showcase-panel-icon svg {

    width:
        27px;

    height:
        27px;
}


.eccrm-showcase-panel-eyebrow {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--eccrm-grey);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.eccrm-showcase-sales-panel .eccrm-showcase-panel-eyebrow {

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


.eccrm-showcase-panel h3 {

    margin:
        0;

    color:
        var(--eccrm-dark);

    font-size:
        23px;

    line-height:
        1.15;

    letter-spacing:
        -.025em;

    font-weight:
        800;
}


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

.eccrm-showcase-feature-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.eccrm-showcase-feature-list span {

    display:
        flex;

    align-items:
        center;

    min-height:
        45px;

    padding:
        7px 9px;

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

    border-radius:
        10px;

    color:
        var(--eccrm-dark);

    background:
        #FBFDFD;

    font-size:
        13px;

    font-weight:
        700;

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


.eccrm-showcase-feature-list span:hover {

    transform:
        translateX(3px);

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

    background:
        #FFFFFF;
}


.eccrm-showcase-feature-list b {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    margin-right:
        9px;

    border-radius:
        7px;

    color:
        var(--eccrm-teal);

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

    font-size:
        8px;

    font-weight:
        800;
}


.eccrm-showcase-service-panel .eccrm-showcase-feature-list b {

    color:
        var(--eccrm-grey);

    background:
        rgba(91, 92, 92, .08);
}


.eccrm-showcase-feature-list i {

    margin-left:
        auto;

    color:
        var(--eccrm-teal);

    font-size:
        15px;

    font-style:
        normal;
}


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

.eccrm-showcase-panel-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        46px;

    margin-top:
        20px;

    border-radius:
        12px;

    color:
        #FFFFFF;

    background:
        var(--eccrm-teal);

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

    font-size:
        15px;

    font-weight:
        800;
}


.eccrm-showcase-service-panel .eccrm-showcase-panel-cta {

    background:
        var(--eccrm-grey);

    box-shadow:
        0 12px 25px rgba(91, 92, 92, .16);
}


.eccrm-showcase-panel-cta strong {

    font-size:
        18px;

    line-height:
        1;
}


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

.eccrm-showcase-center {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        525px;
}


/* Glow */

.eccrm-showcase-center-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .18) 0%,
            rgba(4, 164, 156, .06) 40%,
            transparent 72%);

    filter:
        blur(5px);

    animation:
        eccrm-showcase-glow 5s ease-in-out infinite;
}


/* =========================================================
   DASHBOARD
========================================================= */

.eccrm-showcase-dashboard {

    position:
        relative;

    width:
        100%;

    max-width:
        620px;

    overflow:
        hidden;

    border:
        7px solid #152B33;

    border-radius:
        19px;

    background:
        #FFFFFF;

    box-shadow:
        0 35px 75px rgba(16, 37, 54, .22);

    z-index:
        4;

    transform:
        perspective(1200px) rotateY(-2deg);

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


.eccrm-showcase-dashboard:hover {

    transform:
        perspective(1200px) rotateY(0) translateY(-5px);

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


/* Browser bar */

.eccrm-showcase-browser {

    display:
        flex;

    align-items:
        center;

    height:
        30px;

    padding:
        0 10px;

    border-bottom:
        1px solid #E6EEEE;

    background:
        #FFFFFF;
}


.eccrm-showcase-browser-dots {

    display:
        flex;

    gap:
        5px;
}


.eccrm-showcase-browser-dots span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #04a49c;
}


.eccrm-showcase-browser-address {

    margin-left:
        15px;

    padding:
        4px 15px;

    border-radius:
        6px;

    color:
        #ffffff;

    background:
        #04A49C;

    font-size:
        7px;
}


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

.eccrm-showcase-image-wrap {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #F3F8F8;
}


.eccrm-showcase-dashboard-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    object-fit:
        cover;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(1.035);

    transition:
        opacity .45s ease,
        transform .55s ease,
        visibility .45s ease;
}


.eccrm-showcase-dashboard-image.eccrm-showcase-image-active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);
}


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

/* =========================================================
   ECCRM DYNAMIC MOBILE APP PREVIEW
   SALES + SERVICE SYNCHRONIZED WITH DESKTOP DASHBOARD
   Fully isolated
========================================================= */

.eccrm-showcase-phone {
    position: absolute;

    right: -8px;
    bottom: 18px;

    width: 126px;
    height: 235px;

    padding: 5px;

    /* THIN PREMIUM BORDER */
    /* border: 2px solid #152B33;

    border-radius: 25px;

    background: #152B33;

    box-shadow:
        0 22px 45px rgba(16,37,54,.22),
        0 8px 22px rgba(4,164,156,.10); */

    overflow: hidden;

    z-index: 20;

    transform:
        rotate(5deg);

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


/* ---------------------------------------------------------
   PHONE HOVER
--------------------------------------------------------- */

.eccrm-showcase-phone:hover {

    transform:
        rotate(2deg) translateY(-5px);

    box-shadow:
        0 30px 55px rgba(16, 37, 54, .25),
        0 10px 28px rgba(4, 164, 156, .16);
}


/* ---------------------------------------------------------
   PHONE NOTCH
--------------------------------------------------------- */

.eccrm-showcase-phone-notch {

    position: absolute;

    top: 4px;
    left: 50%;

    width: 43px;
    height: 8px;

    border-radius:
        0 0 9px 9px;

    background:
        #152B33;

    transform:
        translateX(-50%);

    z-index: 10;
}


/* ---------------------------------------------------------
   PHONE SCREEN
--------------------------------------------------------- */

.eccrm-showcase-phone-screen {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 20px;

    background:
        #FFFFFF;
}


/* ---------------------------------------------------------
   MOBILE DASHBOARD IMAGES
--------------------------------------------------------- */

.eccrm-showcase-mobile-image {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: 0;
    visibility: hidden;

    transform:
        scale(1.035);

    transition:
        opacity .4s ease,
        transform .5s ease,
        visibility .4s ease;
}


/* ACTIVE MOBILE DASHBOARD */

.eccrm-showcase-mobile-image.eccrm-showcase-mobile-active {

    opacity: 1;

    visibility: visible;

    transform:
        scale(1);
}


/* ---------------------------------------------------------
   SALES MOBILE SCREEN
--------------------------------------------------------- */

.eccrm-showcase-mobile-sales {

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


/* ---------------------------------------------------------
   SERVICE MOBILE SCREEN
--------------------------------------------------------- */

.eccrm-showcase-mobile-image[data-mobile-image="service"] {

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


/* =========================================================
   MOBILE APP ACTIVE GLOW
========================================================= */

.eccrm-showcase-phone::after {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: 27px;

    pointer-events: none;

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

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .35);

    z-index: 30;
}


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

@media (max-width: 1050px) {

    .eccrm-showcase-phone {

        width: 105px;
        height: 205px;

        right: -2px;
        bottom: 15px;

        border-width: 2px;

        border-radius: 21px;
    }

    .eccrm-showcase-phone-screen {

        border-radius: 16px;
    }

    .eccrm-showcase-phone-notch {

        width: 36px;
        height: 7px;
    }
}


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

@media (max-width: 700px) {

    .eccrm-showcase-phone {

        width: 86px;
        height: 172px;

        right: 0;

        bottom: 10px;

        border-width: 2px;

        border-radius: 18px;

        transform:
            rotate(4deg);
    }

    .eccrm-showcase-phone-screen {

        border-radius: 14px;
    }

    .eccrm-showcase-phone-notch {

        width: 31px;
        height: 6px;

        top: 3px;
    }

}


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

@media (max-width: 520px) {

    .eccrm-showcase-phone {

        width: 72px;
        height: 145px;

        right: -1px;

        bottom: 8px;

        padding: 3px;

        border-width: 1.5px;

        border-radius: 16px;

        transform:
            rotate(4deg);
    }

    .eccrm-showcase-phone-screen {

        border-radius: 12px;
    }

    .eccrm-showcase-phone-notch {

        width: 27px;
        height: 5px;

        top: 2px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .eccrm-showcase-phone {

        width: 62px;
        height: 125px;

        right: 0;

        bottom: 6px;

        border-width: 1.5px;

        border-radius: 14px;
    }

    .eccrm-showcase-phone-screen {

        border-radius: 10px;
    }

}


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

.eccrm-showcase-active-label {

    position:
        absolute;

    left:
        50%;

    bottom:
        -8px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        9px 17px;

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

    border-radius:
        999px;

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

    box-shadow:
        0 12px 35px rgba(16, 37, 54, .12);

    transform:
        translateX(-50%);

    white-space:
        nowrap;

    z-index:
        10;
}


.eccrm-showcase-active-label span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--eccrm-teal);

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


.eccrm-showcase-active-label strong {

    color:
        var(--eccrm-dark);

    font-size:
        10px;

    letter-spacing:
        .06em;
}


.eccrm-showcase-active-label small {

    color:
        var(--eccrm-grey);

    font-size:
        10px;
}


/* =========================================================
   FLOATING NODES
========================================================= */

.eccrm-showcase-node {

    position:
        absolute;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        75px;

    height:
        75px;

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

    border-radius:
        50%;

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

    box-shadow:
        0 12px 30px rgba(16, 37, 54, .10);

    z-index:
        7;

    animation:
        eccrm-showcase-node-float 4s ease-in-out infinite;
}


.eccrm-showcase-node span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

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


.eccrm-showcase-node svg {

    width:
        22px;

    height:
        22px;
}


.eccrm-showcase-node small {

    margin-top:
        2px;

    color:
        var(--eccrm-dark);

    font-size:
        10px;

    line-height:
        1.15;

    font-weight:
        750;

    text-align:
        center;
}


.eccrm-showcase-node-1 {

    top:
        5px;

    left:
        7%;

}


.eccrm-showcase-node-2 {

    top:
        -15px;

    left:
        35%;

    animation-delay:
        -.8s;
}


.eccrm-showcase-node-3 {

    top:
        -10px;

    right:
        28%;

    animation-delay:
        -1.5s;
}


.eccrm-showcase-node-4 {

    top:
        15px;

    right:
        5%;

    animation-delay:
        -2.2s;
}


/* =========================================================
   ADDITIONAL CAPABILITIES
========================================================= */

.eccrm-showcase-additional {

    margin-top:
        65px;

    padding:
        30px;

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

    border-radius:
        24px;

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

    box-shadow:
        0 20px 55px rgba(16, 37, 54, .05);
}


.eccrm-showcase-additional-heading {

    margin-bottom:
        25px;

    text-align:
        center;
}


.eccrm-showcase-additional-heading>span {

    color:
        var(--eccrm-teal);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


.eccrm-showcase-additional-heading h3 {

    margin:
        7px 0 0;

    color:
        var(--eccrm-dark);

    font-size:
        28px;

    line-height:
        1.2;

    font-weight:
        800;
}


.eccrm-showcase-additional-grid {

    display:
        grid;

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

    gap:
        12px;
}


.eccrm-showcase-additional-card {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-height:
        72px;

    padding:
        12px 15px;

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

    border-radius:
        13px;

    background:
        #FBFDFD;

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


.eccrm-showcase-additional-card:hover {

    transform:
        translateY(-3px);

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


.eccrm-showcase-additional-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    border-radius:
        10px;

    color:
        var(--eccrm-teal);

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


.eccrm-showcase-additional-icon svg {

    width:
        19px;

    height:
        19px;
}


.eccrm-showcase-additional-card strong {

    display:
        block;

    color:
        var(--eccrm-dark);

    font-size:
        14px;

    font-weight:
        750;
}


.eccrm-showcase-additional-card small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--eccrm-grey);

    font-size:
        12px;

    line-height:
        1.35;
    font-weight: 500;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes eccrm-showcase-glow {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            .7;
    }

    50% {
        transform:
            scale(1.08);

        opacity:
            1;
    }
}


@keyframes eccrm-showcase-phone-float {

    0%,
    100% {
        transform:
            rotate(5deg) translateY(0);
    }

    50% {
        transform:
            rotate(5deg) translateY(-8px);
    }
}


@keyframes eccrm-showcase-node-float {

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

    50% {
        transform:
            translateY(-6px);
    }
}


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

@media (max-width: 1250px) {

    .eccrm-showcase-container {

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


    .eccrm-showcase-main {

        grid-template-columns:
            minmax(260px, 1fr) minmax(390px, 1.3fr) minmax(260px, 1fr);

        gap:
            16px;
    }


    .eccrm-showcase-panel {

        padding:
            21px;

        min-height:
            460px;
    }


    .eccrm-showcase-feature-list span {

        font-size:
            10px;
    }


    .eccrm-showcase-phone {

        width:
            92px;

        height:
            185px;
    }


    .eccrm-showcase-node {

        width:
            63px;

        height:
            63px;
    }

}


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

@media (max-width: 1050px) {

    .eccrm-showcase-section {

        padding:
            75px 0;
    }


    .eccrm-showcase-main {

        grid-template-columns:
            1fr 1fr;
    }


    .eccrm-showcase-center {

        grid-column:
            1 / -1;

        grid-row:
            1;

        min-height:
            470px;

        max-width:
            720px;

        width:
            100%;

        margin:
            0 auto;
    }


    .eccrm-showcase-sales-panel {

        grid-column:
            1;

        grid-row:
            2;
    }


    .eccrm-showcase-service-panel {

        grid-column:
            2;

        grid-row:
            2;
    }


    .eccrm-showcase-additional-grid {

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

}


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

@media (max-width: 700px) {

    .eccrm-showcase-section {

        padding:
            60px 0;
    }


    .eccrm-showcase-container {

        width:
            calc(100% - 24px);
    }


    .eccrm-showcase-intro {

        margin-bottom:
            35px;
    }


    .eccrm-showcase-intro h2 {

        font-size:
            34px;
    }


    .eccrm-showcase-intro p {

        font-size:
            14px;
    }


    .eccrm-showcase-main {

        grid-template-columns:
            1fr;
    }


    .eccrm-showcase-center {

        grid-column:
            1;

        grid-row:
            1;

        min-height:
            350px;
    }


    .eccrm-showcase-sales-panel {

        grid-column:
            1;

        grid-row:
            2;
    }


    .eccrm-showcase-service-panel {

        grid-column:
            1;

        grid-row:
            3;
    }


    .eccrm-showcase-dashboard {

        width:
            94%;

        transform:
            none;
    }


    .eccrm-showcase-dashboard:hover {

        transform:
            none;
    }


    .eccrm-showcase-node {

        width:
            55px;

        height:
            55px;
    }


    .eccrm-showcase-node small {

        font-size:
            6px;
    }


    .eccrm-showcase-node span {

        width:
            25px;

        height:
            25px;
    }


    .eccrm-showcase-node-1 {

        left:
            1%;
    }


    .eccrm-showcase-node-4 {

        right:
            1%;
    }


    .eccrm-showcase-phone {

        width:
            78px;

        height:
            155px;

        border-radius:
            17px;

        right:
            0;

        bottom:
            15px;
    }


    .eccrm-showcase-phone-screen {

        padding:
            18px 5px 5px;

        border-radius:
            11px;
    }


    .eccrm-showcase-phone-logo {

        font-size:
            7px;
    }


    .eccrm-showcase-phone-logo span {

        width:
            14px;

        height:
            14px;
    }


    .eccrm-showcase-phone-screen>small {

        margin-top:
            10px;

        font-size:
            5px;
    }


    .eccrm-showcase-phone-screen>strong {

        font-size:
            20px;
    }


    .eccrm-showcase-phone-item {

        padding:
            5px;

        font-size:
            5px;
    }


    .eccrm-showcase-active-label {

        bottom:
            -6px;

        padding:
            7px 12px;
    }


    .eccrm-showcase-active-label strong {

        font-size:
            7px;
    }


    .eccrm-showcase-active-label small {

        font-size:
            6px;
    }


    .eccrm-showcase-panel {

        min-height:
            auto;

        padding:
            20px;

        border-radius:
            18px;
    }


    .eccrm-showcase-panel h3 {

        font-size:
            19px;
    }


    .eccrm-showcase-additional {

        margin-top:
            40px;

        padding:
            20px 15px;
    }

}


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

@media (max-width: 520px) {

    .eccrm-showcase-section {

        padding:
            48px 0;
    }


    .eccrm-showcase-container {

        width:
            calc(100% - 18px);
    }


    .eccrm-showcase-intro h2 {

        font-size:
            29px;

        line-height:
            1.08;
    }


    .eccrm-showcase-intro p {

        font-size:
            13px;
    }


    .eccrm-showcase-center {

        min-height:
            260px;
    }


    .eccrm-showcase-dashboard {

        border-width:
            4px;

        border-radius:
            12px;
    }


    .eccrm-showcase-browser {

        height:
            21px;
    }


    .eccrm-showcase-browser-address {

        font-size:
            5px;
    }


    .eccrm-showcase-node-2,
    .eccrm-showcase-node-3 {

        display:
            none;
    }


    .eccrm-showcase-node-1,
    .eccrm-showcase-node-4 {

        width:
            45px;

        height:
            45px;
    }


    .eccrm-showcase-node span {

        width:
            20px;

        height:
            20px;
    }


    .eccrm-showcase-node small {

        display:
            none;
    }


    .eccrm-showcase-phone {

        width:
            64px;

        height:
            128px;

        border-width:
            3px;

        border-radius:
            15px;
    }


    .eccrm-showcase-phone-screen {

        padding:
            14px 4px 4px;

        border-radius:
            9px;
    }


    .eccrm-showcase-phone-logo {

        font-size:
            6px;
    }


    .eccrm-showcase-phone-screen>small {

        font-size:
            4px;
    }


    .eccrm-showcase-phone-screen>strong {

        font-size:
            16px;

        margin-bottom:
            7px;
    }


    .eccrm-showcase-phone-item {

        margin-top:
            3px;

        padding:
            4px;

        font-size:
            4px;
    }


    .eccrm-showcase-panel-top {

        gap:
            11px;

        margin-bottom:
            17px;
    }


    .eccrm-showcase-panel-icon {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;
    }


    .eccrm-showcase-panel-icon svg {

        width:
            22px;

        height:
            22px;
    }


    .eccrm-showcase-feature-list {

        gap:
            6px;
    }


    .eccrm-showcase-feature-list span {

        min-height:
            42px;

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

    .eccrm-lifecycle-eyebrow{
        font-size: 10px !important;
    }
    


    .eccrm-showcase-panel-cta {

        min-height:
            43px;

        margin-top:
            16px;
    }


    .eccrm-showcase-additional-grid {

        grid-template-columns:
            1fr;
    }


    .eccrm-showcase-additional-heading h3 {

        font-size:
            19px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .eccrm-showcase-intro h2 {

        font-size:
            22px;
    }


    .eccrm-showcase-center {

        min-height:
            220px;
    }


    .eccrm-showcase-phone {

        display:
            none;
    }


    .eccrm-showcase-active-label {

        display:
            none;
    }

}


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

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

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

        animation:
            none !important;

        transition:
            none !important;
    }

}

/* Features End */

/* Product */
/* =========================================================
   ECCRM ACTION SHOWCASE
   COMPLETELY ISOLATED CSS
========================================================= */

.eccrm-action-showcase,
.eccrm-action-showcase * {
    box-sizing: border-box;
}


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

.eccrm-action-showcase {

    --eccrm-action-teal: #04a49c;
    --eccrm-action-grey: #5b5c5c;

    --eccrm-action-dark: #5b5c5c;
    --eccrm-action-soft: #f4fbfa;
    --eccrm-action-border: rgba(4, 164, 156, .15);

    position: relative;

    width: 100%;

    padding: 25px 0;

    overflow: hidden;

    background:
        radial-gradient(circle at 15% 35%,
            rgba(4, 164, 156, .08),
            transparent 28%),
        radial-gradient(circle at 88% 55%,
            rgba(4, 164, 156, .07),
            transparent 30%),
        #ffffff;

    /* font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif; */
}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.eccrm-action-showcase::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -350px;
    left: -300px;

    border-radius: 50%;

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

    pointer-events: none;
}


.eccrm-action-showcase::after {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -300px;
    bottom: -280px;

    border-radius: 50%;

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

    pointer-events: none;
}


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

.eccrm-action-container {

    position: relative;

    width:
        min(1400px,
            calc(100% - 60px));

    margin: auto;

    z-index: 2;
}


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

.eccrm-action-intro {

    max-width: 850px;

    margin: 0 auto 42px;

    text-align: center;
}


.eccrm-action-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 16px;

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

    border-radius: 100px;

    color: var(--eccrm-action-teal);

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .15em;
}


.eccrm-action-eyebrow-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--eccrm-action-teal);

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


.eccrm-action-intro h2 {

    margin: 19px 0 15px;

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

    font-size:
        clamp(38px,
            5vw,
            48px);

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 850;
}


.eccrm-action-intro h2 span {

    display: block;

    color: var(--eccrm-action-teal);
}


.eccrm-action-intro p {

    max-width: 760px;

    margin: auto;

    color: var(--eccrm-action-grey);

    font-size: 16px;

    line-height: 1.75;
    font-weight: 500;
}


/* =========================================================
   TABS
========================================================= */

.eccrm-action-tabs-wrap {

    display: flex;

    justify-content: center;

    margin-bottom: 24px;
}


.eccrm-action-tabs {

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 5px;

    max-width: 100%;

    overflow-x: auto;

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

    border-radius: 17px;

    background: rgba(248, 252, 251, .92);

    box-shadow:
        0 15px 40px rgba(18, 43, 56, .06);

    backdrop-filter: blur(16px);

    scrollbar-width: none;
}


.eccrm-action-tabs::-webkit-scrollbar {
    display: none;
}


.eccrm-action-tab {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 155px;

    height: 55px;

    padding: 0 17px;

    border: 0;

    border-radius: 12px;

    color: var(--eccrm-action-grey);

    background: transparent;

    cursor: pointer;

    font-family: inherit;

    text-align: left;

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


.eccrm-action-tab:hover {

    color: var(--eccrm-action-teal);

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

    transform: translateY(-1px);
}


.eccrm-action-tab.is-active {

    color: #ffffff;

    background: var(--eccrm-action-teal);

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


.eccrm-action-tab-icon {

    display: flex;

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

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    border-radius: 9px;

    color: var(--eccrm-action-teal);

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


.eccrm-action-tab.is-active .eccrm-action-tab-icon {

    color: var(--eccrm-action-teal);

    background: #ffffff;
}


.eccrm-action-tab-icon svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

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


.eccrm-action-tab-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

    font-size: 14px;

    font-weight: 800;
}


.eccrm-action-tab-text small {

    font-size: 10px;

    opacity: .55;

    letter-spacing: .1em;
}


/* =========================================================
   MAIN EXPERIENCE
========================================================= */

.eccrm-action-experience {

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr) minmax(430px, .75fr);

    gap: 65px;

    min-height: 650px;

    padding: 55px;

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

    border-radius: 34px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fbfefe 50%,
            #f3fbfa 100%);

    box-shadow:
        0 40px 100px rgba(18, 43, 56, .09);

    overflow: hidden;
}


/* =========================================================
   VISUAL AREA
========================================================= */

.eccrm-action-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 520px;
}


.eccrm-action-visual-glow {

    position: absolute;

    width: 85%;
    height: 75%;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .22),
            rgba(4, 164, 156, .06) 45%,
            transparent 72%);

    filter: blur(25px);

    pointer-events: none;
}


.eccrm-action-grid {

    position: absolute;

    inset: 5%;

    opacity: .35;

    background-image:
        linear-gradient(rgba(4, 164, 156, .06) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(4, 164, 156, .06) 1px,
            transparent 1px);

    background-size: 35px 35px;

    mask-image:
        radial-gradient(ellipse,
            black 10%,
            transparent 70%);
}


/* =========================================================
   DEVICE
========================================================= */

.eccrm-action-device {

    position: relative;

    z-index: 4;

    width: 100%;

    max-width: 800px;

    border: 5px solid #203943;

    border-radius: 20px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 35px 75px rgba(18, 43, 56, .20);

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


.eccrm-action-device:hover {

    transform: translateY(-6px);

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


/* =========================================================
   BROWSER BAR
========================================================= */

.eccrm-action-browser {

    display: flex;

    align-items: center;

    height: 38px;

    padding: 0 14px;

    border-bottom:
        1px solid #e8eeee;

    background: #ffffff;
}


.eccrm-action-browser-dots {

    display: flex;

    gap: 5px;
}


.eccrm-action-browser-dots i {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #cdd5d5;
}


.eccrm-action-browser-url {

    flex: 1;

    margin-left: 14px;

    padding: 6px 11px;

    border: 1px solid #edf1f1;

    border-radius: 7px;

    color: #8b9696;

    background: #f8fafa;

    font-size: 8px;
}


.eccrm-action-browser-status {

    margin-left: 12px;

    color: var(--eccrm-action-teal);

    font-size: 10px;
}


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

.eccrm-action-screen {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #f3faf9;
}


.eccrm-action-dashboard {

    position: absolute;

    inset: 0;

    width: 100%;
    /* height: 100%; */

    object-fit: cover;

    object-position: center;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.035);

    transition:
        opacity .45s ease,
        transform .6s cubic-bezier(.2, .7, .2, 1),
        visibility .45s ease;
}


.eccrm-action-dashboard.is-visible {

    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.eccrm-action-floating {

    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

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

    border-radius: 13px;

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

    box-shadow:
        0 18px 40px rgba(18, 43, 56, .13);

    backdrop-filter: blur(14px);

    animation:
        eccrmActionFloat 4s ease-in-out infinite;
}


.eccrm-action-floating-top {

    top: 4%;

    right: 1%;
}


.eccrm-action-floating-bottom {

    left: 1%;

    bottom: 5%;

    animation-delay: -1.5s;
}


.eccrm-action-live {

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: var(--eccrm-action-teal);

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


.eccrm-action-floating-check {

    display: flex;

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

    width: 28px;
    height: 28px;

    border-radius: 8px;

    color: #ffffff;

    background: var(--eccrm-action-teal);

    font-size: 13px;

    font-weight: 900;
}


.eccrm-action-floating strong {

    display: block;

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

    font-size: 11px;

    font-weight: 850;
}


.eccrm-action-floating small {

    display: block;

    margin-top: 2px;

    color: var(--eccrm-action-grey);

    font-size: 11px;
}


@keyframes eccrmActionFloat {

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

    50% {
        transform: translateY(-7px);
    }

}


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

.eccrm-action-visual-caption {

    position: absolute;

    left: 50%;

    bottom: -28px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

    color: var(--eccrm-action-grey);

    font-size: 13px;

    font-weight: 850;

    letter-spacing: .14em;
}


.eccrm-action-visual-caption span {

    width: 30px;
    height: 1px;

    background:
        var(--eccrm-action-teal);
}


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

.eccrm-action-content {

    position: relative;

    min-width: 0;

    min-height: 520px;

    display: flex;

    align-items: center;
}


.eccrm-action-panel {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(25px);

    transition:
        opacity .4s ease,
        transform .5s ease,
        visibility .4s ease;
}


.eccrm-action-panel.is-active {

    position: relative;

    opacity: 1;

    visibility: visible;

    transform:
        translateX(0);
}


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

.eccrm-action-panel-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;
}


.eccrm-action-panel-meta span {

    color: var(--eccrm-action-grey);

    font-size: 10px;

    font-weight: 800;

    opacity: .5;
}


.eccrm-action-panel-meta b {

    color: var(--eccrm-action-teal);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .15em;
}


.eccrm-action-panel h3 {

    margin: 0 0 16px;

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

    font-size:
        clamp(34px,
            3.3vw,
            39px);

    line-height: 1.02;

    letter-spacing: -.05em;

    font-weight: 850;
}


.eccrm-action-panel h3 span {

    display: block;

    color: var(--eccrm-action-teal);
}


.eccrm-action-description {

    max-width: 530px;

    margin: 0 0 27px;

    color: var(--eccrm-action-grey);

    font-size: 14px;

    line-height: 1.75;
    font-weight: 500;
}


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

.eccrm-action-feature-list {

    display: grid;

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

    gap: 9px;

    margin-bottom: 27px;
}


.eccrm-action-feature {

    position: relative;

    display: flex;

    gap: 10px;

    min-height: 67px;

    padding: 11px;

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

    border-radius: 11px;

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

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


.eccrm-action-feature:hover {

    transform: translateY(-3px);

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

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

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


.eccrm-action-feature-number {

    display: flex;

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

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    border-radius: 7px;

    color: var(--eccrm-action-teal);

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

    font-size: 7px;

    font-weight: 900;
}


.eccrm-action-feature strong {

    display: block;

    margin-top: 1px;

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

    font-size: 13px;

    font-weight: 500;
}


.eccrm-action-feature small {

    display: block;

    margin-top: 4px;

    color: var(--eccrm-action-grey);

    font-size: 11px;

    line-height: 1.4;
}


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

.eccrm-action-cta {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    align-self: flex-start;

    gap: 30px;

    min-height: 48px;

    padding: 0 10px 0 20px;

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

    border-radius: 10px;

    color: #ffffff;

    background:
        var(--eccrm-action-teal);

    text-decoration: none;

    font-size: 13px;

    font-weight: 850;

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

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


.eccrm-action-cta:hover {

    transform:
        translateY(-3px);

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


.eccrm-action-cta span {

    display: flex;

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

    width: 28px;
    height: 28px;

    border-radius: 8px;

    color: var(--eccrm-action-teal);

    background: #ffffff;

    font-size: 14px;
}


/* =========================================================
   VALUE STRIP
========================================================= */

.eccrm-action-value-strip {

    display: grid;

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

    margin-top: 18px;

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

    border-radius: 15px;

    overflow: hidden;

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

    box-shadow:
        0 12px 30px rgba(18, 43, 56, .04);


}


.eccrm-action-value {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 70px;

    padding: 12px 15px;

    border-right:
        1px solid rgba(4, 164, 156, .08);
}


.eccrm-action-value:last-child {

    border-right: 0;
}


.eccrm-action-value-icon {

    display: flex;

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

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    border-radius: 50%;

    color: var(--eccrm-action-teal);

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

    font-size: 12px;

    font-weight: 900;
}


.eccrm-action-value strong {

    display: block;

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

    font-size: 12px;

    font-weight: 850;
}


.eccrm-action-value small {

    display: block;

    margin-top: 3px;

    color: var(--eccrm-action-grey);

    font-size: 10px;
}


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

@media (max-width: 1250px) {

    .eccrm-action-container {

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


    .eccrm-action-experience {

        grid-template-columns:
            minmax(0, 1.25fr) minmax(360px, .75fr);

        gap: 40px;

        padding: 42px;
    }


    .eccrm-action-tab {

        min-width: 130px;
    }

}


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

@media (max-width: 1000px) {

    .eccrm-action-showcase {

        padding: 75px 0;
    }


    .eccrm-action-experience {

        grid-template-columns: 1fr;

        gap: 55px;

        padding: 40px 35px;
    }


    .eccrm-action-visual {

        min-height: 480px;
    }


    .eccrm-action-device {

        max-width: 820px;
    }


    .eccrm-action-content {

        min-height: 500px;
    }


    .eccrm-action-panel {

        align-items: center;

        text-align: center;
    }


    .eccrm-action-description {

        max-width: 700px;
    }


    .eccrm-action-feature-list {

        width:
            min(720px,
                100%);

        text-align: left;
    }


    .eccrm-action-cta {

        align-self: center;
    }


    .eccrm-action-floating-top {

        right: 3%;
    }


    .eccrm-action-floating-bottom {

        left: 3%;
    }

}


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

@media (max-width: 700px) {

    .eccrm-action-showcase {

        padding: 55px 0;
    }


    .eccrm-action-container {

        width:
            calc(100% - 20px);
    }


    .eccrm-action-intro {

        margin-bottom: 28px;
    }


    .eccrm-action-intro h2 {

        font-size: 28px;

        line-height: 1;
    }


    .eccrm-action-intro p {

        font-size: 12px;

        line-height: 1.7;
    }


    /* TABS */

    .eccrm-action-tabs-wrap {

        justify-content: flex-start;
    }


    .eccrm-action-tabs {

        width: 100%;

        justify-content: flex-start;
    }


    .eccrm-action-tab {

        min-width: 120px;

        height: 48px;

        padding: 0 12px;
    }


    .eccrm-action-tab-icon {

        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }


    .eccrm-action-tab-text {

        font-size: 9px;
    }


    /* EXPERIENCE */

    .eccrm-action-experience {

        gap: 30px;

        padding:
            22px 12px 28px;

        border-radius: 23px;
    }


    /* VISUAL */

    .eccrm-action-visual {

        min-height: 280px;

        padding-bottom: 25px;
    }


    .eccrm-action-device {

        border-width: 1.5px;

        border-radius: 12px;
    }


    .eccrm-action-browser {

        height: 25px;

        padding: 0 8px;
    }


    .eccrm-action-browser-dots {

        gap: 3px;
    }


    .eccrm-action-browser-dots i {

        width: 5px;
        height: 5px;
    }


    .eccrm-action-browser-url {

        margin-left: 8px;

        padding: 3px 7px;

        font-size: 5px;
    }


    .eccrm-action-browser-status {

        font-size: 6px;
    }


    /* FLOATING */

    .eccrm-action-floating {

        padding: 7px 9px;

        border-radius: 9px;
    }


    .eccrm-action-floating strong {

        font-size: 11px;
    }


    .eccrm-action-floating small {

        font-size: 11px;
    }


    .eccrm-action-floating-top {

        top: -3px;

        right: -1px;
    }


    .eccrm-action-floating-bottom {

        left: -1px;

        bottom: 0;
    }


    .eccrm-action-live {

        width: 6px;
        height: 6px;
    }


    .eccrm-action-floating-check {

        width: 21px;
        height: 21px;

        font-size: 9px;
    }


    .eccrm-action-visual-caption {

        bottom: -22px;

        font-size: 11px;
    }


    .eccrm-action-visual-caption span {

        width: 17px;
    }


    /* CONTENT */

    .eccrm-action-content {

        min-height: 600px;
    }


    .eccrm-action-panel {

        justify-content: flex-start;

        padding-top: 8px;
    }


    .eccrm-action-panel h3 {

        font-size: 28px;

        line-height: 1.04;
    }


    .eccrm-action-description {

        font-size: 12px;

        line-height: 1.7;

        margin-bottom: 20px;
    }


    /* FEATURES */

    .eccrm-action-feature-list {

        grid-template-columns: 1fr;

        gap: 7px;
    }


    .eccrm-action-feature {

        min-height: 60px;

        padding: 10px;
    }


    .eccrm-action-feature strong {

        font-size: 13px;
    }


    .eccrm-action-feature small {

        font-size: 12px;
        /* line-height: 5px; */
    }


    /* CTA */

    .eccrm-action-cta {

        width: 100%;

        min-height: 45px;
    }


    /* VALUE STRIP */

    .eccrm-action-value-strip {

        grid-template-columns:
            1fr 1fr;
    }


    .eccrm-action-value {

        min-height: 65px;

        justify-content: flex-start;

        padding: 10px 5px;
    }


    .eccrm-action-value:nth-child(2) {

        border-right: 0;
    }


    .eccrm-action-value:nth-child(3),
    .eccrm-action-value:nth-child(4) {

        border-top:
            1px solid rgba(4, 164, 156, .08);
    }


    .eccrm-action-value strong {

        font-size: 12px;
    }


    .eccrm-action-value small {

        font-size: 10px;
    }

}


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

@media (max-width: 400px) {

    .eccrm-action-intro h2 {

        font-size: 22px;
        line-height: 1.2;
    }


    .eccrm-action-eyebrow {

        font-size: 8px;
    }


    .eccrm-action-tab {

        min-width: 108px;

        height: 45px;

        padding: 0 9px;

        gap: 6px;
    }


    .eccrm-action-tab-icon {

        width: 24px;
        height: 24px;

        flex-basis: 24px;
    }


    .eccrm-action-tab-text {

        font-size: 8px;
    }


    .eccrm-action-experience {

        padding:
            17px 9px 22px;
    }


    .eccrm-action-panel h3 {

        font-size: 27px;
    }


    .eccrm-action-value {

        padding: 8px;
    }

}


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

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

    .eccrm-action-showcase *,
    .eccrm-action-showcase *::before,
    .eccrm-action-showcase *::after {

        animation: none !important;

        transition: none !important;
    }

}

/* =========================================================
   ECCRM ACTION SHOWCASE
   MOBILE TAB RESPONSIVE FIX
   ---------------------------------------------------------
   Does NOT change:
   - HTML
   - JavaScript
   - Content
   - Desktop layout
   - Dashboard images
   - Existing functionality
========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       TAB WRAPPER
    ----------------------------------------- */

    .eccrm-action-tabs-wrap {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }


    /* -----------------------------------------
       TAB CONTAINER
    ----------------------------------------- */

    .eccrm-action-tabs {
        width: 100%;
        max-width: 100%;

        display: grid;

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

        gap: 5px;

        padding: 5px;

        overflow: visible;

        border-radius: 17px;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       INDIVIDUAL TAB
    ----------------------------------------- */

    .eccrm-action-tab {

        width: 100%;

        min-width: 0;

        max-width: none;

        height: 52px;

        padding: 0 10px;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 9px;

        border-radius: 11px;

        white-space: nowrap;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       LAST TAB
       Analytics gets full-width row
    ----------------------------------------- */

    .eccrm-action-tab:last-child {

        grid-column: 1 / -1;

        justify-content: center;

        width: 100%;
    }


    /* -----------------------------------------
       ICON
    ----------------------------------------- */

    .eccrm-action-tab-icon {

        width: 30px;

        height: 30px;

        min-width: 30px;

        flex: 0 0 30px;

        border-radius: 8px;
    }


    .eccrm-action-tab-icon svg {

        width: 16px;

        height: 16px;
    }


    /* -----------------------------------------
       TAB TEXT
    ----------------------------------------- */

    .eccrm-action-tab-text {

        min-width: 0;

        display: flex;

        flex-direction: column;

        gap: 2px;

        font-size: 13px;

        line-height: 1.1;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .eccrm-action-tab-text small {

        font-size: 11px;

        line-height: 1;
    }


    /* -----------------------------------------
       ACTIVE TAB
    ----------------------------------------- */

    .eccrm-action-tab.is-active {

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


    /* -----------------------------------------
       REMOVE HORIZONTAL SCROLL BEHAVIOUR
    ----------------------------------------- */

    .eccrm-action-tabs::-webkit-scrollbar {

        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
   320px – 400px
========================================================= */

@media (max-width: 400px) {

    .eccrm-action-tabs {

        gap: 4px;

        padding: 4px;

        border-radius: 15px;
    }


    .eccrm-action-tab {

        height: 48px;

        padding: 0 8px;

        gap: 7px;

        border-radius: 10px;
    }


    .eccrm-action-tab-icon {

        width: 27px;

        height: 27px;

        min-width: 27px;

        flex-basis: 27px;
    }


    .eccrm-action-tab-icon svg {

        width: 15px;

        height: 15px;
    }


    .eccrm-action-tab-text {

        font-size: 12px;
    }


    .eccrm-action-tab-text small {

        font-size: 11px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   280px – 340px
========================================================= */

@media (max-width: 340px) {

    .eccrm-action-container {

        width: calc(100% - 14px);
    }


    .eccrm-action-tabs {

        gap: 3px;

        padding: 3px;
    }


    .eccrm-action-tab {

        height: 46px;

        padding: 0 6px;

        gap: 6px;
    }


    .eccrm-action-tab-icon {

        width: 24px;

        height: 24px;

        min-width: 24px;

        flex-basis: 24px;

        border-radius: 7px;
    }


    .eccrm-action-tab-icon svg {

        width: 13px;

        height: 13px;
    }


    .eccrm-action-tab-text {

        font-size: 8px;
    }


    .eccrm-action-tab-text small {

        font-size: 11px;
    }

}

/* Product */

/* Mobile App */
/* =========================================================
   ECCRM MOBILE APP SHOWCASE
   UNIQUE PREFIX: eccrm-mobile-
   ========================================================= */

.eccrm-mobile-app-section {
    --eccrm-teal: #04a49c;
    --eccrm-grey: #5b5c5c;
    --eccrm-dark: #5b5c5c;
    --eccrm-light: #f6fbfa;
    --eccrm-white: #ffffff;

    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 50px 0 80px;
    background:
        radial-gradient(circle at 78% 42%,
            rgba(4, 164, 156, 0.10),
            transparent 30%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f8fcfb 48%,
            #f2f9f8 100%);

    /* font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif; */
}


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

.eccrm-mobile-grid-bg {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(4, 164, 156, 0.035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(4, 164, 156, 0.035) 1px,
            transparent 1px);

    background-size: 50px 50px;

    mask-image: linear-gradient(to right,
            transparent,
            black 25%,
            black 80%,
            transparent);

    pointer-events: none;
}


.eccrm-mobile-bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}


.eccrm-mobile-bg-orb-1 {
    width: 420px;
    height: 420px;

    right: -180px;
    top: -120px;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, 0.12),
            rgba(4, 164, 156, 0));
}


.eccrm-mobile-bg-orb-2 {
    width: 320px;
    height: 320px;

    left: -180px;
    bottom: -100px;

    background:
        radial-gradient(circle,
            rgba(91, 92, 92, 0.07),
            rgba(91, 92, 92, 0));
}


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

.eccrm-mobile-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


/* =========================================================
   SWITCHER
   ========================================================= */

.eccrm-mobile-switcher-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 55px;
}


.eccrm-mobile-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px;

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

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

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(45, 80, 78, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(20px);
}


.eccrm-mobile-switch-btn {
    border: 0;
    outline: none;

    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 180px;
    padding: 12px 22px;

    border-radius: 13px;

    background: transparent;

    color: var(--eccrm-grey);

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

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


.eccrm-mobile-switch-btn:hover {
    transform: translateY(-1px);
}


.eccrm-mobile-switch-btn.active {
    color: #ffffff;

    background:
        linear-gradient(135deg,
            #04a49c,
            #078e87);

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


.eccrm-mobile-switch-btn small {
    display: block;

    margin-bottom: 1px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;

    opacity: 0.65;
}


.eccrm-mobile-switch-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

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


.eccrm-mobile-switch-btn.active .eccrm-mobile-switch-icon {
    background: rgba(255, 255, 255, 0.15);
}


.eccrm-mobile-switch-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

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


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

.eccrm-mobile-showcase {
    display: grid;

    grid-template-columns:
        minmax(0, 0.94fr) minmax(480px, 1.06fr);

    align-items: center;

    gap: 65px;

    min-height: 620px;
}


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

.eccrm-mobile-content {
    position: relative;
    z-index: 5;
}


.eccrm-mobile-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 14px;

    margin-bottom: 22px;

    border-radius: 100px;

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

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

    color: var(--eccrm-teal);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


.eccrm-mobile-eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--eccrm-teal);

    box-shadow:
        0 0 0 5px rgba(4, 164, 156, 0.10);

    animation: eccrmMobilePulse 2s infinite;
}


@keyframes eccrmMobilePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(4, 164, 156, 0.10);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(4, 164, 156, 0.03);
    }
}


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

.eccrm-mobile-title {
    margin: 0;

    max-width: 650px;

    color: var(--eccrm-dark);

    font-size: clamp(38px, 4.2vw, 43px);

    line-height: 1.04;

    letter-spacing: -2.6px;

    font-weight: 800;
}


.eccrm-mobile-title span {
    display: block;

    color: var(--eccrm-teal);

    margin-top: 6px;
}


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

.eccrm-mobile-description {
    max-width: 620px;

    margin: 24px 0 30px;

    color: #686e6e;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 400;
}


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

.eccrm-mobile-features {
    display: grid;

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

    gap: 12px 22px;

    max-width: 630px;

    margin-bottom: 32px;
}


.eccrm-mobile-feature {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #4d5252;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;
}


.eccrm-mobile-feature-icon {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--eccrm-teal);
}


.eccrm-mobile-feature-icon svg {
    width: 12px;
    height: 12px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.3;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.eccrm-mobile-actions {
    display: flex;
    align-items: center;
    gap: 13px;

    flex-wrap: wrap;

    margin-bottom: 18px;
}


/* Google Play */

.eccrm-mobile-playstore {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 54px;

    padding: 3px 8px;

    color: #ffffff;

    background: #222525;

    border-radius: 12px;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.13);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.eccrm-mobile-playstore:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.18);
}


.eccrm-mobile-play-icon {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;
}


.eccrm-mobile-play-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-mobile-play-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.eccrm-mobile-play-text small {
    font-size: 8px;

    letter-spacing: 0.7px;

    margin-bottom: 4px;

    opacity: 0.75;
}


.eccrm-mobile-play-text strong {
    font-size: 15px;

    font-weight: 600;
}


/* Primary CTA */

.eccrm-mobile-primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 54px;

    padding: 0 21px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #04a49c,
            #078d86);

    border-radius: 12px;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.eccrm-mobile-primary-cta:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(4, 164, 156, 0.30);
}


.eccrm-mobile-primary-cta svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.3s ease;
}


.eccrm-mobile-primary-cta:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   SUPPORT TEXT
   ========================================================= */

.eccrm-mobile-support-text {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #747979;

    font-size: 11px;

    font-weight: 500;
}


.eccrm-mobile-live-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--eccrm-teal);
}


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

.eccrm-mobile-visual {
    position: relative;

    min-height: 620px;

    display: flex;

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


/* Glow */

.eccrm-mobile-visual-glow {
    position: absolute;

    width: 460px;
    height: 460px;

    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(8px);

    animation:
        eccrmMobileGlow 5s ease-in-out infinite;
}


@keyframes eccrmMobileGlow {

    0%,
    100% {
        transform: scale(0.96);
    }

    50% {
        transform: scale(1.04);
    }
}


/* Ring */

.eccrm-mobile-visual-ring {
    position: absolute;

    width: 540px;
    height: 540px;

    border-radius: 50%;

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

    box-shadow:
        inset 0 0 80px rgba(4, 164, 156, 0.035);
}


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

.eccrm-mobile-phone-stage {
    position: relative;

    width: min(490px, 90%);

    z-index: 3;

    display: flex;

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


.eccrm-mobile-main-image {
    width: 100%;

    max-width: 490px;

    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(0 28px 40px rgba(39, 78, 76, 0.20));

    transform:
        translateY(0) rotate(0deg);

    transition:
        opacity 0.3s ease,
        transform 0.45s ease,
        filter 0.45s ease;

    animation:
        eccrmMobilePhoneFloat 5s ease-in-out infinite;
}


@keyframes eccrmMobilePhoneFloat {

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

    50% {
        transform: translateY(-10px);
    }
}


/* Image switching animation */

.eccrm-mobile-main-image.eccrm-mobile-changing {
    opacity: 0;

    transform:
        translateY(20px) scale(0.96);
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.eccrm-mobile-floating-card {
    position: absolute;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 175px;

    padding: 13px 15px;

    border-radius: 14px;

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

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

    box-shadow:
        0 18px 45px rgba(44, 77, 75, 0.13);

    backdrop-filter: blur(18px);

    animation:
        eccrmMobileCardFloat 4.5s ease-in-out infinite;
}


@keyframes eccrmMobileCardFloat {

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

    50% {
        transform: translateY(-7px);
    }
}


.eccrm-mobile-card-performance {
    top: 15%;

    left: 3%;
}


.eccrm-mobile-card-location {
    right: 1%;

    bottom: 18%;

    animation-delay: -1.5s;
}


.eccrm-mobile-floating-icon,
.eccrm-mobile-location-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: var(--eccrm-teal);

    background:
        rgba(4, 164, 156, 0.09);
}


.eccrm-mobile-floating-icon svg,
.eccrm-mobile-location-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-mobile-floating-card small {
    display: block;

    color: #7a7e7e;

    font-size: 9px;

    margin-bottom: 3px;
}


.eccrm-mobile-floating-card strong {
    display: block;

    color: var(--eccrm-dark);

    font-size: 14px;

    font-weight: 800;
}


/* =========================================================
   DECORATIVE DOTS
   ========================================================= */

.eccrm-mobile-dots {
    position: absolute;

    width: 60px;
    height: 60px;

    background-image:
        radial-gradient(var(--eccrm-teal) 1.5px,
            transparent 1.5px);

    background-size: 10px 10px;

    opacity: 0.25;
}


.eccrm-mobile-dots-1 {
    left: 2%;
    bottom: 9%;
}


.eccrm-mobile-dots-2 {
    right: 4%;
    top: 7%;
}


.eccrm-mobile-dots-3 {
    right: 18%;
    bottom: 4%;

    opacity: 0.12;
}


/* =========================================================
   BOTTOM BENEFIT STRIP
   ========================================================= */

.eccrm-mobile-bottom-strip {
    display: grid;

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

    margin-top: 60px;

    border-top:
        1px solid rgba(91, 92, 92, 0.10);

    border-bottom:
        1px solid rgba(91, 92, 92, 0.10);

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

    backdrop-filter: blur(15px);
}


.eccrm-mobile-bottom-item {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 100px;

    padding: 18px 22px;

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


.eccrm-mobile-bottom-item:last-child {
    border-right: 0;
}


.eccrm-mobile-bottom-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: var(--eccrm-teal);

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


.eccrm-mobile-bottom-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-mobile-bottom-item strong {
    display: block;

    color: var(--eccrm-dark);

    font-size: 13px;

    line-height: 1.4;

    margin-bottom: 4px;
}


.eccrm-mobile-bottom-item span:not(.eccrm-mobile-bottom-icon) {
    display: block;

    color: #808585;

    font-size: 12px;

    line-height: 1.4;
}


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

@media (max-width: 1100px) {

    .eccrm-mobile-app-section {
        padding: 80px 0 65px;
    }

    .eccrm-mobile-showcase {
        grid-template-columns:
            minmax(0, 0.9fr) minmax(390px, 1.1fr);

        gap: 35px;
    }

    .eccrm-mobile-title {
        font-size: clamp(38px, 5vw, 54px);
    }

    .eccrm-mobile-visual {
        min-height: 540px;
    }

    .eccrm-mobile-visual-ring {
        width: 450px;
        height: 450px;
    }

    .eccrm-mobile-visual-glow {
        width: 400px;
        height: 400px;
    }

    .eccrm-mobile-floating-card {
        min-width: 155px;
        padding: 10px 12px;
    }

    .eccrm-mobile-card-performance {
        left: 0;
    }

    .eccrm-mobile-card-location {
        right: 0;
    }

    .eccrm-mobile-bottom-item {
        padding: 16px 14px;
    }

}


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

@media (max-width: 850px) {

    .eccrm-mobile-container {
        width: min(720px, calc(100% - 32px));
    }

    .eccrm-mobile-switcher-wrap {
        margin-bottom: 40px;
    }

    .eccrm-mobile-showcase {
        display: flex;

        flex-direction: column;

        gap: 25px;

        min-height: auto;
    }

    /*
       Image first on mobile
    */

    .eccrm-mobile-visual {
        order: 1;

        width: 100%;

        min-height: 510px;
    }

    .eccrm-mobile-content {
        order: 2;

        width: 100%;
    }

    .eccrm-mobile-phone-stage {
        width: min(480px, 88%);
    }

    .eccrm-mobile-visual-ring {
        width: 470px;
        height: 470px;
    }

    .eccrm-mobile-content {
        text-align: center;
    }

    .eccrm-mobile-eyebrow {
        justify-content: center;
    }

    .eccrm-mobile-title {
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(40px, 7vw, 55px);
    }

    .eccrm-mobile-description {
        margin-left: auto;
        margin-right: auto;
    }

    .eccrm-mobile-features {
        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .eccrm-mobile-actions {
        justify-content: center;
    }

    .eccrm-mobile-support-text {
        justify-content: center;
    }

    .eccrm-mobile-bottom-strip {
        grid-template-columns:
            repeat(2, 1fr);

        margin-top: 50px;
    }

    .eccrm-mobile-bottom-item:nth-child(2) {
        border-right: 0;
    }

    .eccrm-mobile-bottom-item:nth-child(-n+2) {
        border-bottom:
            1px solid rgba(91, 92, 92, 0.09);
    }

}


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

@media (max-width: 600px) {

    .eccrm-mobile-app-section {
        padding: 60px 0 45px;
    }

    .eccrm-mobile-container {
        width: calc(100% - 24px);
    }

    .eccrm-mobile-switcher {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        border-radius: 15px;
    }

    .eccrm-mobile-switch-btn {
        min-width: 0;

        width: 100%;

        justify-content: center;

        padding: 10px 8px;

        font-size: 13px;
    }

    .eccrm-mobile-switch-icon {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }

    .eccrm-mobile-switch-icon svg {
        width: 16px;
        height: 16px;
    }

    .eccrm-mobile-switch-btn small {
        font-size: 9px;
    }

    .eccrm-mobile-visual {
        min-height: 390px;
    }

    .eccrm-mobile-visual-ring {
        width: 350px;
        height: 350px;
    }

    .eccrm-mobile-visual-glow {
        width: 330px;
        height: 330px;
    }

    .eccrm-mobile-phone-stage {
        width: 92%;
    }

    .eccrm-mobile-floating-card {
        min-width: 130px;

        padding: 9px 10px;

        gap: 7px;
    }

    .eccrm-mobile-floating-icon,
    .eccrm-mobile-location-icon {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .eccrm-mobile-floating-icon svg,
    .eccrm-mobile-location-icon svg {
        width: 15px;
        height: 15px;
    }

    .eccrm-mobile-floating-card small {
        font-size: 7px;
    }

    .eccrm-mobile-floating-card strong {
        font-size: 11px;
    }

    .eccrm-mobile-card-performance {
        top: 12%;
        left: 0;
    }

    .eccrm-mobile-card-location {
        right: 0;
        bottom: 12%;
    }

    .eccrm-mobile-title {
        font-size: 28px;

        line-height: 1.08;

        letter-spacing: -1.5px;
    }

    .eccrm-mobile-description {
        font-size: 14px;

        line-height: 1.7;

        margin-top: 18px;
    }

    .eccrm-mobile-features {
        grid-template-columns: 1fr;

        gap: 11px;

        margin-top: 25px;

        margin-bottom: 27px;
    }

    .eccrm-mobile-feature {
        justify-content: flex-start;

        font-size: 12px;
    }

    .eccrm-mobile-actions {
        flex-direction: column;

        width: 100%;
    }

    .eccrm-mobile-playstore,
    .eccrm-mobile-primary-cta {
        width: 100%;

        justify-content: center;
    }

    .eccrm-mobile-support-text {
        font-size: 13px;

        line-height: 1.5;

        padding: 0 15px;
    }

    .eccrm-mobile-bottom-strip {
        grid-template-columns: 1fr;

        margin-top: 40px;
    }

    .eccrm-mobile-bottom-item {
        border-right: 0 !important;

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

    .eccrm-mobile-bottom-item:last-child {
        border-bottom: 0;
    }

}


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

@media (max-width: 380px) {

    .eccrm-mobile-container {
        width: calc(100% - 18px);
    }

    .eccrm-mobile-switch-btn {
        gap: 6px;

        padding: 9px 5px;

        font-size: 13px;
    }

    .eccrm-mobile-switch-icon {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

    .eccrm-mobile-title {
        font-size: 22px;
    }

    .eccrm-mobile-visual {
        min-height: 330px;
    }

    .eccrm-mobile-visual-ring {
        width: 290px;
        height: 290px;
    }

    .eccrm-mobile-visual-glow {
        width: 270px;
        height: 270px;
    }

    .eccrm-mobile-phone-stage {
        width: 96%;
    }

    .eccrm-mobile-floating-card {
        min-width: 115px;
    }

    .eccrm-mobile-card-performance {
        top: 9%;
    }

    .eccrm-mobile-card-location {
        bottom: 8%;
    }

    .eccrm-mobile-floating-card small {
        font-size: 6px;
    }

    .eccrm-mobile-floating-card strong {
        font-size: 9px;
    }

}

/* =========================================================
   ECCRM MOBILE APP - FINAL SPACING & RESPONSIVE FIX
   ---------------------------------------------------------
   Add this AFTER all existing ECCRM mobile CSS.
   No HTML / JS changes required.
   ========================================================= */


/* =========================================================
   DESKTOP - REMOVE EXCESSIVE GAP AFTER SWITCHER
   ========================================================= */

@media (min-width: 1101px) {

    /* Bring showcase closer to the switcher */
    .eccrm-mobile-switcher-wrap {
        margin-bottom: 25px;
    }

    /*
       IMPORTANT:
       Previously the entire showcase was vertically centered
       inside a 620px minimum-height container.

       This was creating the large empty space visible
       underneath the switcher.
    */
    .eccrm-mobile-showcase {
        min-height: 0;
        align-items: flex-start;
    }

    /*
       Keep the left content near the switcher.
    */
    .eccrm-mobile-content {
        padding-top: 5px;
    }

    /*
       Keep the mobile app visual vertically balanced
       independently from the left content.
    */
    .eccrm-mobile-visual {
        min-height: 560px;
        align-self: center;
    }

    /*
       Keep the app image visually centered.
    */
    .eccrm-mobile-phone-stage {
        margin-top: 0;
    }

    /*
       Bottom benefits should remain close to the
       main showcase rather than creating additional space.
    */
    .eccrm-mobile-bottom-strip {
        margin-top: 25px;
    }
}


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

@media (min-width: 1200px) {

    .eccrm-mobile-switcher-wrap {
        margin-bottom: 22px;
    }

    .eccrm-mobile-showcase {
        gap: 55px;
    }

    .eccrm-mobile-content {
        padding-top: 8px;
    }

    .eccrm-mobile-visual {
        min-height: 575px;
    }

    .eccrm-mobile-bottom-strip {
        margin-top: 20px;
    }
}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (min-width: 851px) and (max-width: 1100px) {

    .eccrm-mobile-switcher-wrap {
        margin-bottom: 25px;
    }

    /*
       Remove vertical centering of the entire
       two-column showcase.
    */
    .eccrm-mobile-showcase {
        min-height: 0;
        align-items: flex-start;
    }

    .eccrm-mobile-content {
        padding-top: 5px;
    }

    /*
       Keep visual centered independently.
    */
    .eccrm-mobile-visual {
        min-height: 520px;
        align-self: center;
    }

    .eccrm-mobile-bottom-strip {
        margin-top: 25px;
    }
}


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

@media (min-width: 601px) and (max-width: 850px) {

    .eccrm-mobile-switcher-wrap {
        margin-bottom: 20px;
    }

    /*
       Don't reserve unnecessary vertical space
       before the content.
    */
    .eccrm-mobile-showcase {
        min-height: 0;
        gap: 15px;
    }

    /*
       Image remains first.
    */
    .eccrm-mobile-visual {
        min-height: 470px;
    }

    .eccrm-mobile-content {
        padding-top: 0;
    }

    .eccrm-mobile-bottom-strip {
        margin-top: 30px;
    }
}


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

@media (max-width: 600px) {

    /*
       Main reason for the visible gap:
       reduce the switcher bottom spacing.
    */
    .eccrm-mobile-switcher-wrap {
        margin-bottom: 12px;
    }

    /*
       Remove all unnecessary reserved height.
    */
    .eccrm-mobile-showcase {
        min-height: 0;
        gap: 8px;
    }

    /*
       Image remains FIRST on mobile.
    */
    .eccrm-mobile-visual {
        order: 1;
        min-height: 350px;
    }

    /*
       Content remains SECOND.
    */
    .eccrm-mobile-content {
        order: 2;
        padding-top: 0;
    }

    /*
       Keep image closer to switcher.
    */
    .eccrm-mobile-phone-stage {
        margin-top: 0;
    }

    /*
       Reduce space before benefits.
    */
    .eccrm-mobile-bottom-strip {
        margin-top: 25px;
    }
}


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

@media (max-width: 480px) {

    .eccrm-mobile-switcher-wrap {
        margin-bottom: 8px;
    }

    .eccrm-mobile-showcase {
        gap: 4px;
    }

    .eccrm-mobile-visual {
        min-height: 320px;
    }

    .eccrm-mobile-phone-stage {
        width: 94%;
    }

    .eccrm-mobile-bottom-strip {
        margin-top: 22px;
    }
}


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

@media (max-width: 380px) {

    .eccrm-mobile-switcher-wrap {
        margin-bottom: 5px;
    }

    .eccrm-mobile-showcase {
        gap: 2px;
    }

    .eccrm-mobile-visual {
        min-height: 290px;
    }

    .eccrm-mobile-phone-stage {
        width: 96%;
    }

    .eccrm-mobile-bottom-strip {
        margin-top: 18px;
    }
}

/* Mobile App */

/* Problems */
/* =========================================================
   ECCRM CHALLENGES SECTION
   Brand:
   #04A49C - ECCRM Teal
   #5B5C5C - ECCRM Gray
   ========================================================= */

.eccrm-challenges-section {

    --eccrm-teal: #04a49c;
    --eccrm-teal-dark: #038b85;
    --eccrm-grey: #5b5c5c;
    --eccrm-dark: #5b5c5c;
    --eccrm-text: #686e6e;
    --eccrm-light: #f5fbfa;
    --eccrm-white: #ffffff;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 75px 0 95px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(4, 164, 156, 0.10),
            transparent 38%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f8fcfb 50%,
            #f1f9f8 100%);

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

}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.eccrm-challenges-bg-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.45;

    background-image:

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

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

    background-size: 55px 55px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent);

}


/* =========================================================
   BACKGROUND ORBS
   ========================================================= */

.eccrm-challenges-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

}


.eccrm-challenges-orb-1 {

    width: 450px;
    height: 450px;

    left: -260px;
    top: 160px;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, 0.10),
            transparent 68%);

}


.eccrm-challenges-orb-2 {

    width: 400px;
    height: 400px;

    right: -230px;
    bottom: 80px;

    background:
        radial-gradient(circle,
            rgba(91, 92, 92, 0.07),
            transparent 68%);

}


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

.eccrm-challenges-container {

    width: min(1240px,
            calc(100% - 40px));

    margin: 0 auto;

    position: relative;

    z-index: 2;

}


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

.eccrm-challenges-header {

    max-width: 850px;

    margin: 0 auto 60px;

    text-align: center;

}


.eccrm-challenges-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 100px;

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

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

    color: var(--eccrm-teal);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.eccrm-challenges-eyebrow-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--eccrm-teal);

    box-shadow:
        0 0 0 5px rgba(4, 164, 156, 0.09);

    animation:
        eccrmChallengePulse 2.4s ease-in-out infinite;

}


@keyframes eccrmChallengePulse {

    0%,
    100% {

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

    }

    50% {

        box-shadow:
            0 0 0 9px rgba(4, 164, 156, 0.02);

    }

}


.eccrm-challenges-title {

    margin: 0;

    color: var(--eccrm-dark);

    font-size:
        clamp(34px,
            4.2vw,
            54px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 800;

}


.eccrm-challenges-title span {

    display: block;

    margin-top: 5px;

    color: var(--eccrm-teal);

}


.eccrm-challenges-subtitle {

    max-width: 690px;

    margin: 20px auto 0;

    color: var(--eccrm-text);

    font-size: 16px;

    line-height: 1.8;
    font-weight: 500;

}


/* =========================================================
   THREE CARD FLOW
   ========================================================= */

.eccrm-challenges-flow {

    display: grid;

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

    align-items: stretch;

    gap: 0;

}


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

.eccrm-challenge-card {

    position: relative;

    min-height: 480px;

    padding: 30px 28px 24px;

    overflow: hidden;

    border-radius: 24px;

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

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

    box-shadow:
        0 18px 55px rgba(43, 77, 75, 0.08);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

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

    opacity: 0;

    transform:
        translateY(30px);

}


.eccrm-challenge-card.eccrm-card-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.eccrm-challenge-card:hover {

    transform:
        translateY(-9px);

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

    box-shadow:
        0 28px 70px rgba(43, 77, 75, 0.13);

}


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

.eccrm-challenge-card-glow {

    position: absolute;

    width: 210px;
    height: 210px;

    right: -100px;
    top: -110px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, 0.14),
            transparent 70%);

    pointer-events: none;

    transition:
        transform 0.5s ease;

}


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

    transform:
        scale(1.4);

}


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

.eccrm-challenge-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 27px;

}


.eccrm-challenge-number {

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

    font-size: 16px;

    font-weight: 900;

    letter-spacing: 1px;

}


.eccrm-challenge-icon {

    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    color:
        var(--eccrm-teal);

    background:
        linear-gradient(145deg,
            rgba(4, 164, 156, 0.15),
            rgba(4, 164, 156, 0.05));

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

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

}


.eccrm-challenge-icon svg {

    width: 25px;
    height: 25px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.eccrm-challenge-card-heading>span {

    display: block;

    margin-bottom: 6px;

    color:
        var(--eccrm-teal);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.eccrm-challenge-card-heading h3 {

    margin: 0;

    color:
        var(--eccrm-dark);

    font-size: 25px;

    line-height: 1.2;

    letter-spacing: -0.7px;

    font-weight: 800;

}


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

.eccrm-challenge-card-description {

    min-height: 68px;

    margin: 14px 0 23px;

    color:
        var(--eccrm-text);

    font-size: 14px;

    line-height: 1.65;

}


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

.eccrm-challenge-list {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.eccrm-challenge-list li {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        #505656;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;

}


.eccrm-challenge-check {

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--eccrm-teal);

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

}


.eccrm-challenge-check svg {

    width: 11px;
    height: 11px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.3;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.eccrm-challenge-card-footer {

    position: absolute;

    left: 28px;
    right: 28px;

    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding-top: 16px;

    border-top:
        1px solid rgba(91, 92, 92, 0.08);

    color:
        #858a8a;

    font-size: 13px;

    font-weight: 600;

}


.eccrm-challenge-footer-dot {

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

}


/* =========================================================
   CONNECTORS
   ========================================================= */

.eccrm-challenge-connector {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.eccrm-challenge-connector span {

    position: relative;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(4, 164, 156, 0.12),
            rgba(4, 164, 156, 0.45),
            rgba(4, 164, 156, 0.12));

}


.eccrm-challenge-connector span::after {

    content: "";

    position: absolute;

    right: 50%;

    top: 50%;

    width: 8px;
    height: 8px;

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

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

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

    background:
        #f7fcfb;

}


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

.eccrm-challenges-bottom {

    margin-top: 48px;

}


.eccrm-challenges-bottom-line {

    width: 100%;

    height: 1px;

    margin-bottom: 25px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(4, 164, 156, 0.18),
            transparent);

}


.eccrm-challenges-bottom-content {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 20px 22px;

    border-radius: 18px;

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

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

    box-shadow:
        0 12px 35px rgba(43, 77, 75, 0.05);

}


.eccrm-challenges-bottom-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color:
        var(--eccrm-teal);

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

}


.eccrm-challenges-bottom-icon svg {

    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-challenges-bottom-content>div:nth-child(2) {

    flex: 1;

}


.eccrm-challenges-bottom-content strong {

    display: block;

    margin-bottom: 4px;

    color:
        var(--eccrm-dark);

    font-size: 14px;

    line-height: 1.4;

}


.eccrm-challenges-bottom-content div:nth-child(2) span {

    display: block;

    color:
        #7c8282;

    font-size: 11px;

    line-height: 1.5;

}


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

.eccrm-challenges-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 17px;

    flex-shrink: 0;

    border-radius: 10px;

    color:
        #ffffff;

    background:
        linear-gradient(135deg,
            #04a49c,
            #038c86);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.eccrm-challenges-cta:hover {

    color: #ffffff;

    transform:
        translateY(-3px);

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

}


.eccrm-challenges-cta svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.3s ease;

}


.eccrm-challenges-cta:hover svg {

    transform:
        translateX(4px);

}


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

@media (max-width: 1050px) {

    .eccrm-challenges-section {

        padding:
            80px 0 75px;

    }

    .eccrm-challenges-container {

        width:
            min(900px,
                calc(100% - 32px));

    }

    .eccrm-challenges-header {

        margin-bottom: 45px;

    }

    .eccrm-challenges-flow {

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

        gap: 15px;

    }

    .eccrm-challenge-connector {

        display: none;

    }

    .eccrm-challenge-card {

        min-height: 490px;

        padding:
            25px 21px 22px;

    }

    .eccrm-challenge-card-footer {

        left: 21px;
        right: 21px;

    }

}


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

@media (max-width: 850px) {

    .eccrm-challenges-title {

        font-size:
            clamp(32px,
                5.5vw,
                44px);

    }

    .eccrm-challenges-subtitle {

        font-size: 14px;

    }

    .eccrm-challenges-flow {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .eccrm-challenge-card {

        min-height: auto;

        padding-bottom: 75px;

    }

    .eccrm-challenge-card-description {

        min-height: auto;

    }

}


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

@media (max-width: 600px) {

    .eccrm-challenges-section {

        padding:
            65px 0 55px;

    }

    .eccrm-challenges-container {

        width:
            calc(100% - 24px);

    }

    .eccrm-challenges-header {

        margin-bottom: 32px;

    }

    .eccrm-challenges-eyebrow {

        padding:
            7px 12px;

        font-size: 11px;

        letter-spacing: 1px;

    }

    .eccrm-challenges-title {

        font-size: 28px;

        line-height: 1.1;

        letter-spacing:
            -1.2px;

    }

    .eccrm-challenges-subtitle {

        margin-top: 15px;

        font-size: 13px;

        line-height: 1.7;

    }

    .eccrm-challenges-flow {

        gap: 15px;

    }

    .eccrm-challenge-card {

        padding:
            23px 20px 72px;

        border-radius: 20px;

    }

    .eccrm-challenge-card-top {

        margin-bottom: 21px;

    }

    .eccrm-challenge-icon {

        width: 48px;
        height: 48px;

        border-radius: 14px;

    }

    .eccrm-challenge-icon svg {

        width: 22px;
        height: 22px;

    }

    .eccrm-challenge-card-heading h3 {

        font-size: 22px;

    }

    .eccrm-challenge-card-description {

        font-size: 12px;

        line-height: 1.65;

        margin:
            12px 0 20px;

    }

    .eccrm-challenge-list {

        gap: 11px;

    }

    .eccrm-challenge-list li {

        font-size: 13px;

    }

    .eccrm-challenge-card-footer {

        left: 20px;
        right: 20px;

        bottom: 19px;

        font-size: 13px;

    }

    .eccrm-challenges-bottom {

        margin-top: 30px;

    }

    .eccrm-challenges-bottom-content {

        flex-wrap: wrap;

        padding:
            17px;

    }

    .eccrm-challenges-bottom-content>div:nth-child(2) {

        min-width:
            calc(100% - 64px);

    }

    .eccrm-challenges-bottom-content strong {

        font-size: 13px;

    }

    .eccrm-challenges-bottom-content div:nth-child(2) span {

        font-size: 12px;

    }

    .eccrm-challenges-cta {

        width: 100%;

        margin-top: 5px;

    }

}


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

@media (max-width: 380px) {

    .eccrm-challenges-section {

        padding:
            55px 0 45px;

    }

    .eccrm-challenges-container {

        width:
            calc(100% - 18px);

    }

    .eccrm-challenges-title {

        font-size: 28px;

    }

    .eccrm-challenge-card {

        padding:
            20px 17px 70px;

    }

    .eccrm-challenge-card-heading h3 {

        font-size: 20px;

    }

    .eccrm-challenge-list li {

        font-size: 13px;

    }

    .eccrm-challenge-card-footer {

        left: 17px;
        right: 17px;

    }

}


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

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

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

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}

/* Problems */

/* Field Service */
/* =========================================================
   ECCRM FIELD SERVICE FLOW
   BRAND COLORS
   #04A49C
   #5B5C5C
   ========================================================= */

.eccrm-fsm-flow {

    --eccrm-teal: #04a49c;
    --eccrm-teal-dark: #038b85;
    --eccrm-grey: #5b5c5c;
    --eccrm-dark: #5b5c5c;
    --eccrm-text: #687070;
    --eccrm-light: #f5fbfa;
    --eccrm-white: #ffffff;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 80px 0 0;

    background:
        radial-gradient(circle at 80% 35%,
            rgba(4, 164, 156, 0.075),
            transparent 32%),
        linear-gradient(135deg,
            #ffffff 0%,
            #fbfdfd 50%,
            #f4faf9 100%);

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

}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.eccrm-fsm-bg-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:

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

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

    background-size: 55px 55px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent);

}


/* =========================================================
   BACKGROUND GLOWS
   ========================================================= */

.eccrm-fsm-bg-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.eccrm-fsm-bg-glow-1 {

    width: 480px;
    height: 480px;

    left: -250px;
    top: 150px;

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

}


.eccrm-fsm-bg-glow-2 {

    width: 500px;
    height: 500px;

    right: -260px;
    bottom: 50px;

    background:
        radial-gradient(circle,
            rgba(91, 92, 92, .06),
            transparent 68%);

}


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

.eccrm-fsm-container {

    width:
        min(1240px,
            calc(100% - 40px));

    margin: 0 auto;

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .90fr) minmax(500px, 1.10fr);

    gap: 60px;

    align-items: center;

}


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

.eccrm-fsm-content {

    position: relative;

    z-index: 5;

}


.eccrm-fsm-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    margin-bottom: 20px;

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

    border-radius: 100px;

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

    color:
        var(--eccrm-teal);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.eccrm-fsm-eyebrow-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

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

    animation:
        eccrmFsmPulse 2.5s ease-in-out infinite;

}


@keyframes eccrmFsmPulse {

    0%,
    100% {

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

    }

    50% {

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

    }

}


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

.eccrm-fsm-title {

    margin: 0;

    max-width: 650px;

    color:
        var(--eccrm-dark);

    font-size:
        clamp(38px,
            4.2vw,
            45px);

    line-height: 1.06;

    letter-spacing: -2.5px;

    font-weight: 800;

}


.eccrm-fsm-title span {

    display: block;

    color:
        var(--eccrm-teal);

    margin-top: 5px;

}


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

.eccrm-fsm-description {

    max-width: 620px;

    margin: 22px 0 28px;

    color:
        var(--eccrm-text);

    font-size: 15px;

    line-height: 1.8;

}


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

.eccrm-fsm-workflow {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


/* Vertical connecting line */

.eccrm-fsm-workflow::before {

    content: "";

    position: absolute;

    left: 20px;

    top: 20px;

    bottom: 20px;

    width: 1px;

    background:
        linear-gradient(to bottom,
            rgba(4, 164, 156, .45),
            rgba(4, 164, 156, .08));

}


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

.eccrm-fsm-step {

    position: relative;

    display: grid;

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

    gap: 12px;

    align-items: center;

    min-height: 61px;

    padding: 7px 10px;

    border-radius: 13px;

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

}


.eccrm-fsm-step:hover {

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

    transform:
        translateX(5px);

}


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

.eccrm-fsm-step-marker {

    position: relative;

    z-index: 2;

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #ffffff;

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

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

    font-size: 9px;

    font-weight: 900;

    box-shadow:
        0 5px 15px rgba(43, 77, 75, .06);

}


.eccrm-fsm-step.active .eccrm-fsm-step-marker {

    color:
        #ffffff;

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

    background:
        var(--eccrm-teal);

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

}


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

.eccrm-fsm-step-icon {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--eccrm-teal);

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

}


.eccrm-fsm-step-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-fsm-step-content strong {

    display: block;

    margin-bottom: 2px;

    color:
        var(--eccrm-dark);

    font-size: 14px;

    font-weight: 800;

}


.eccrm-fsm-step-content span {

    display: block;

    color:
        #7a8080;

    font-size: 12px;

    line-height: 1.45;

}


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

.eccrm-fsm-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 26px;

}


.eccrm-fsm-primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding:
        0 18px;

    border-radius: 11px;

    color:
        #ffffff;

    background:
        linear-gradient(135deg,
            #04a49c,
            #038c86);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

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

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

}


.eccrm-fsm-primary-btn:hover {

    color:
        #ffffff;

    transform:
        translateY(-3px);

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

}


.eccrm-fsm-primary-btn svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .3s ease;

}


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

    transform:
        translateX(4px);

}


.eccrm-fsm-trust-text {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        #818686;

    font-size: 12px;

    line-height: 1.4;

}


.eccrm-fsm-live-dot {

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

}


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

.eccrm-fsm-visual {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   RINGS
   ========================================================= */

.eccrm-fsm-ring {

    position: absolute;

    width: 570px;
    height: 570px;

    border-radius: 50%;

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

}


.eccrm-fsm-ring-2 {

    width: 470px;
    height: 470px;

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

}


/* =========================================================
   DASHBOARD
   ========================================================= */

.eccrm-fsm-dashboard {

    position: relative;

    z-index: 3;

    width:
        min(535px,
            88%);

    padding: 17px;

    border-radius: 23px;

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

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

    box-shadow:
        0 35px 80px rgba(39, 76, 74, .14),

        0 5px 20px rgba(39, 76, 74, .06);

    backdrop-filter:
        blur(20px);

}


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

.eccrm-fsm-dashboard-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        4px 4px 15px;

}


.eccrm-fsm-dashboard-label {

    display: block;

    margin-bottom: 4px;

    color:
        var(--eccrm-teal);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

}


.eccrm-fsm-dashboard-header strong {

    display: block;

    color:
        var(--eccrm-dark);

    font-size: 15px;

}


.eccrm-fsm-dashboard-avatar {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #ffffff;

    background:
        var(--eccrm-teal);

    font-size: 9px;

    font-weight: 800;

}


/* =========================================================
   SUMMARY
   ========================================================= */

.eccrm-fsm-summary-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-bottom: 11px;

}


.eccrm-fsm-summary-card {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border-radius: 13px;

    background:
        #f8fbfb;

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

}


.eccrm-fsm-summary-icon {

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color:
        var(--eccrm-teal);

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

}


.eccrm-fsm-summary-icon svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-fsm-summary-card small {

    display: block;

    color:
        #858b8b;

    font-size: 11px;

    margin-bottom: 2px;

}


.eccrm-fsm-summary-card strong {

    display: block;

    color:
        var(--eccrm-dark);

    font-size: 17px;

}


/* =========================================================
   MAP
   ========================================================= */

.eccrm-fsm-map {

    position: relative;

    height: 225px;

    overflow: hidden;

    border-radius: 15px;

    background:
        #edf6f5;

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

}


/* Abstract map */

.eccrm-fsm-map-grid {

    position: absolute;

    inset: 0;

    opacity: .6;

    background-image:

        linear-gradient(28deg,
            transparent 44%,
            rgba(255, 255, 255, .9) 45%,
            rgba(255, 255, 255, .9) 47%,
            transparent 48%),

        linear-gradient(115deg,
            transparent 43%,
            rgba(255, 255, 255, .8) 44%,
            rgba(255, 255, 255, .8) 46%,
            transparent 47%),

        linear-gradient(0deg,
            transparent 72%,
            rgba(4, 164, 156, .05) 73%,
            rgba(4, 164, 156, .05) 74%,
            transparent 75%);

    background-size:
        130px 100px,
        160px 120px,
        100% 100%;

}


/* =========================================================
   ROUTE
   ========================================================= */

.eccrm-fsm-route {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}


.eccrm-fsm-route path {

    fill: none;

    stroke:
        var(--eccrm-teal);

    stroke-width: 4;

    stroke-linecap: round;

    stroke-dasharray: 8 6;

    animation:
        eccrmFsmRoute 4s linear infinite;

}


@keyframes eccrmFsmRoute {

    to {
        stroke-dashoffset: -80;
    }

}


/* =========================================================
   MAP PINS
   ========================================================= */

.eccrm-fsm-map-pin {

    position: absolute;

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #ffffff;

    background:
        var(--eccrm-teal);

    border:
        3px solid rgba(255, 255, 255, .85);

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

    font-size: 9px;

    font-weight: 800;

    z-index: 3;

}


.eccrm-fsm-map-pin::after {

    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    bottom: -4px;

    background:
        var(--eccrm-teal);

    transform:
        rotate(45deg);

    z-index: -1;

}


.pin-1 {
    left: 14%;
    top: 65%;
}

.pin-2 {
    left: 37%;
    top: 40%;
}

.pin-3 {
    left: 61%;
    top: 57%;
}

.pin-4 {
    right: 11%;
    top: 18%;
}


/* =========================================================
   NEXT JOB
   ========================================================= */

.eccrm-fsm-next-job {

    position: absolute;

    right: 15px;

    top: 15px;

    width: 145px;

    padding: 10px;

    border-radius: 10px;

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

    box-shadow:
        0 10px 25px rgba(42, 76, 74, .12);

    z-index: 5;

}


.eccrm-fsm-next-job span {

    display: block;

    color:
        var(--eccrm-teal);

    font-size: 10px;

    font-weight: 700;

    margin-bottom: 3px;

}


.eccrm-fsm-next-job strong {

    display: block;

    color:
        var(--eccrm-dark);

    font-size: 12px;

}


.eccrm-fsm-next-job small {

    display: block;

    margin-top: 4px;

    color:
        #818686;

    font-size: 11px;

}


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

.eccrm-fsm-job-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        13px 3px 9px;

}


.eccrm-fsm-job-heading strong {

    color:
        var(--eccrm-dark);

    font-size: 13px;

}


.eccrm-fsm-job-heading span {

    color:
        var(--eccrm-teal);

    font-size: 8px;

    font-weight: 700;

}


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

.eccrm-fsm-job-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.eccrm-fsm-job {

    display: grid;

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

    align-items: center;

    gap: 7px;

    padding: 8px;

    border-radius: 10px;

    background:
        #fafcfc;

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

}


.eccrm-fsm-job-time {

    color:
        #858a8a;

    font-size: 11px;

    font-weight: 700;

}


.eccrm-fsm-job-icon {

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color:
        var(--eccrm-teal);

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

}


.eccrm-fsm-job-icon svg {

    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-fsm-job-info {

    min-width: 0;

}


.eccrm-fsm-job-info strong {

    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        var(--eccrm-dark);

    font-size: 12px;

}


.eccrm-fsm-job-info span {

    display: block;

    margin-top: 2px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        #8a8f8f;

    font-size: 11px;

}


.eccrm-fsm-status {

    padding:
        4px 6px;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 800;

}


.eccrm-fsm-status.in-progress {

    color:
        var(--eccrm-teal);

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

}


.eccrm-fsm-status.assigned {

    color:
        #5b5c5c;

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

}


/* =========================================================
   DASHBOARD FOOTER
   ========================================================= */

.eccrm-fsm-dashboard-footer {

    display: flex;

    justify-content: space-between;

    padding:
        11px 3px 2px;

    color:
        #929797;

    font-size: 10px;

}


.eccrm-fsm-dashboard-footer span:first-child {

    display: flex;

    align-items: center;

    gap: 5px;

}


.eccrm-fsm-footer-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.eccrm-fsm-floating-card {

    position: absolute;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 13px;

    border-radius: 13px;

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

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

    box-shadow:
        0 18px 40px rgba(42, 76, 74, .13);

    backdrop-filter:
        blur(16px);

    animation:
        eccrmFsmFloat 4.5s ease-in-out infinite;

}


@keyframes eccrmFsmFloat {

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

    50% {
        transform:
            translateY(-8px);
    }

}


.eccrm-fsm-technician-card {

    left: 1%;

    top: 19%;

}


.eccrm-fsm-completion-card {

    right: 1%;

    bottom: 18%;

    animation-delay:
        -1.5s;

}


.eccrm-fsm-floating-avatar {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    flex: 0 0 35px;

    border-radius: 50%;

    color:
        #ffffff;

    background:
        var(--eccrm-grey);

    font-size: 8px;

    font-weight: 800;

}


.eccrm-fsm-floating-card small {

    display: block;

    color:
        #8a9090;

    font-size: 12px;

    margin-bottom: 2px;

}


.eccrm-fsm-floating-card strong {

    display: block;

    color:
        var(--eccrm-dark);

    font-size: 12px;

}


.eccrm-fsm-floating-card span {

    display: block;

    margin-top: 2px;

    color:
        var(--eccrm-teal);

    font-size: 11px;

}


.eccrm-fsm-online {

    width: 7px;
    height: 7px;

    align-self: flex-start;

    margin-top: 2px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

}


.eccrm-fsm-completion-icon {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--eccrm-teal);

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

}


.eccrm-fsm-completion-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   DECORATIVE DOTS
   ========================================================= */

.eccrm-fsm-dots {

    position: absolute;

    width: 65px;
    height: 65px;

    background-image:
        radial-gradient(var(--eccrm-teal) 1.5px,
            transparent 1.5px);

    background-size:
        10px 10px;

    opacity: .22;

}


.eccrm-fsm-dots-1 {

    left: 2%;

    bottom: 12%;

}


.eccrm-fsm-dots-2 {

    right: 2%;

    top: 9%;

}


/* =========================================================
   BOTTOM BENEFITS
   ========================================================= */

.eccrm-fsm-bottom {

    position: relative;

    z-index: 3;

    margin-top: 70px;

    border-top:
        1px solid rgba(91, 92, 92, .08);

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

    backdrop-filter:
        blur(15px);

}


.eccrm-fsm-bottom-inner {

    width:
        min(1240px,
            calc(100% - 40px));

    margin:
        0 auto;

    display: grid;

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

}


.eccrm-fsm-bottom-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 95px;

    padding:
        15px 20px;

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

}


.eccrm-fsm-bottom-item:last-child {

    border-right: 0;

}


.eccrm-fsm-bottom-icon {

    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--eccrm-teal);

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

}


.eccrm-fsm-bottom-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-fsm-bottom-item strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--eccrm-dark);

    font-size: 13px;

}


.eccrm-fsm-bottom-item div span {

    display: block;

    color:
        #858b8b;

    font-size: 11px;

    line-height: 1.4;

}


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .eccrm-fsm-container {

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

        gap: 30px;

    }

    .eccrm-fsm-visual {

        min-height: 580px;

    }

    .eccrm-fsm-ring {

        width: 500px;
        height: 500px;

    }

    .eccrm-fsm-ring-2 {

        width: 410px;
        height: 410px;

    }

    .eccrm-fsm-floating-card {

        transform:
            scale(.92);

    }

    .eccrm-fsm-technician-card {

        left: -2%;

    }

    .eccrm-fsm-completion-card {

        right: -2%;

    }

}


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

@media (max-width: 900px) {

    .eccrm-fsm-flow {

        padding-top: 75px;

    }

    .eccrm-fsm-container {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .eccrm-fsm-content {

        max-width: 720px;

        margin: 0 auto;

        text-align: center;

    }

    .eccrm-fsm-eyebrow {

        justify-content: center;

    }

    .eccrm-fsm-title {

        margin:
            0 auto;

    }

    .eccrm-fsm-description {

        margin-left: auto;
        margin-right: auto;

    }

    .eccrm-fsm-workflow {

        text-align: left;

    }

    .eccrm-fsm-actions {

        justify-content: center;

    }

    .eccrm-fsm-visual {

        width: 100%;

        min-height: 590px;

    }

    .eccrm-fsm-dashboard {

        width:
            min(560px,
                78%);

    }

    .eccrm-fsm-technician-card {

        left:
            4%;

    }

    .eccrm-fsm-completion-card {

        right:
            4%;

    }

}


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

@media (max-width: 600px) {

    .eccrm-fsm-flow {

        padding:
            60px 0 0;

    }

    .eccrm-fsm-container {

        width:
            calc(100% - 24px);

        gap: 20px;

    }

    .eccrm-fsm-title {

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

        letter-spacing:
            -1.5px;

    }

    .eccrm-fsm-description {

        font-size: 13px;

        line-height: 1.7;

        margin-top: 17px;

    }

    .eccrm-fsm-workflow {

        margin-top: 10px;

    }

    .eccrm-fsm-step {

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

        gap: 8px;

        min-height: 57px;

        padding:
            5px 5px;

    }

    .eccrm-fsm-workflow::before {

        left:
            17px;

    }

    .eccrm-fsm-step-marker {

        width: 34px;
        height: 34px;

        font-size: 8px;

    }

    .eccrm-fsm-step-icon {

        width: 32px;
        height: 32px;

    }

    .eccrm-fsm-step-icon svg {

        width: 15px;
        height: 15px;

    }

    .eccrm-fsm-step-content strong {

        font-size: 13px;

    }

    .eccrm-fsm-step-content span {

        font-size: 12px;
        line-height: 1.3;

    }

    .eccrm-fsm-actions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 20px;

    }

    .eccrm-fsm-primary-btn {

        width: 100%;

    }

    .eccrm-fsm-trust-text {

        justify-content: center;

        text-align: center;

    }

    /* Visual */

    .eccrm-fsm-visual {

        min-height: 440px;

    }

    .eccrm-fsm-ring {

        width: 350px;
        height: 350px;

    }

    .eccrm-fsm-ring-2 {

        width: 290px;
        height: 290px;

    }

    .eccrm-fsm-dashboard {

        width:
            92%;

        padding: 11px;

        border-radius: 18px;

    }

    .eccrm-fsm-dashboard-header {

        padding-bottom:
            10px;

    }

    .eccrm-fsm-dashboard-header strong {

        font-size: 12px;

    }

    .eccrm-fsm-map {

        height: 175px;

    }

    .eccrm-fsm-floating-card {

        transform:
            scale(.78);

        transform-origin:
            center;

    }

    .eccrm-fsm-technician-card {

        left:
            -4%;

        top:
            32%;

    }

    .eccrm-fsm-completion-card {

        right:
            -4%;

        bottom:
            15%;

    }

    .eccrm-fsm-next-job {

        right: 8px;

        top: 8px;

        width: 115px;

    }

    .eccrm-fsm-job {

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

    }

    .eccrm-fsm-status {

        display: none;

    }

    /* Bottom */

    .eccrm-fsm-bottom {

        margin-top:
            40px;

    }

    .eccrm-fsm-bottom-inner {

        width:
            calc(100% - 24px);

        grid-template-columns:
            1fr 1fr;

    }

    .eccrm-fsm-bottom-item {

        min-height: 85px;

        padding:
            12px 8px;

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

    }

    .eccrm-fsm-bottom-item:nth-child(2) {

        border-right:
            0;

    }

    .eccrm-fsm-bottom-item:nth-child(3) {

        border-bottom:
            0;

    }

    .eccrm-fsm-bottom-item:nth-child(4) {

        border-right:
            0;

        border-bottom:
            0;

    }

    .eccrm-fsm-bottom-item strong {

        font-size: 12px;

    }

    .eccrm-fsm-bottom-item div span {

        font-size: 11px;

    }

}


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

@media (max-width: 380px) {

    .eccrm-fsm-flow {

        padding-top:
            50px;

    }

    .eccrm-fsm-container {

        width:
            calc(100% - 18px);

    }

    .eccrm-fsm-title {

        font-size:
            29px;

    }

    .eccrm-fsm-step-content span {

        display: none;

    }

    .eccrm-fsm-step {

        min-height:
            48px;

    }

    .eccrm-fsm-visual {

        min-height:
            350px;

    }

    .eccrm-fsm-ring {

        width:
            280px;

        height:
            280px;

    }

    .eccrm-fsm-ring-2 {

        width:
            225px;

        height:
            225px;

    }

    .eccrm-fsm-dashboard {

        width:
            96%;

    }

    .eccrm-fsm-floating-card {

        transform:
            scale(.66);

    }

    .eccrm-fsm-technician-card {

        left:
            6%;

    }

    .eccrm-fsm-completion-card {

        right:
            -11%;

    }

    .eccrm-fsm-map {

        height:
            145px;

    }

}


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

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

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

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}

/* js */
.eccrm-fsm-step,
.eccrm-fsm-dashboard,
.eccrm-fsm-floating-card {

    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity .65s ease,
        transform .65s ease;

}


.eccrm-fsm-dashboard {

    transform:
        translateY(20px) scale(.98);

}


.eccrm-fsm-floating-card {

    transform:
        translateY(15px);

}


.eccrm-fsm-visible {

    opacity: 1 !important;

    transform:
        translateY(0) scale(1) !important;

}

/* Field Service */

/* Workflow */
/* =========================================================
   ECCRM CUSTOMER LIFECYCLE
   Modern White SaaS Workflow
   Brand:
   #04A49C
   #5B5C5C
   ========================================================= */

.eccrm-lifecycle {

    --eccrm-teal: #04a49c;
    --eccrm-teal-dark: #038b85;
    --eccrm-grey: #5b5c5c;
    --eccrm-dark: #5b5c5c;
    --eccrm-text: #6d7474;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 80px 0 80px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(4, 164, 156, .07),
            transparent 36%),

        linear-gradient(180deg,
            #ffffff 0%,
            #fbfdfd 100%);

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

}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.eccrm-lifecycle-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .30;

    background-image:

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

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

    background-size: 55px 55px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent);

}


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

.eccrm-lifecycle-container {

    position: relative;

    z-index: 2;

    width:
        min(1320px,
            calc(100% - 40px));

    margin: 0 auto;

}


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

.eccrm-lifecycle-header {

    max-width: 850px;

    margin:
        0 auto 65px;

    text-align: center;

}


.eccrm-lifecycle-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 14px;

    margin-bottom: 18px;

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

    border-radius: 100px;

    color:
        var(--eccrm-teal);

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

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.4px;

}


.eccrm-lifecycle-pulse {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

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

    animation:
        eccrmLifecyclePulse 2.5s ease-in-out infinite;

}


@keyframes eccrmLifecyclePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(4, 164, 156, .08);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(4, 164, 156, .02);
    }

}


.eccrm-lifecycle-title {

    margin: 0;

    color:
        var(--eccrm-dark);

    font-size:
        clamp(36px,
            4.4vw,
            45px);

    line-height: 1.06;

    letter-spacing:
        -2.4px;

    font-weight: 800;

}


.eccrm-lifecycle-title span {

    display: block;

    color:
        var(--eccrm-teal);

    margin-top: 5px;

}


.eccrm-lifecycle-description {

    max-width: 670px;

    margin:
        18px auto 0;

    color:
        var(--eccrm-text);

    font-size: 14px;

    line-height: 1.8;
    font-weight: 500;

}


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

.eccrm-lifecycle-wrapper {

    position: relative;

    display: grid;

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

    align-items: start;

    gap: 0;

    padding:
        0 5px;

}


/* =========================================================
   BASE TRACK
   ========================================================= */

.eccrm-lifecycle-track {

    position: absolute;

    left: 4.7%;

    right: 4.7%;

    top: 31px;

    height: 2px;

    border-radius: 10px;

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

}


/* =========================================================
   ANIMATED PROGRESS
   ========================================================= */

.eccrm-lifecycle-progress {

    position: absolute;

    left: 4.7%;

    top: 31px;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(90deg,
            #04a49c,
            #03b8ae);

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

    animation:
        eccrmLifecycleProgress 10s ease-in-out infinite;

}


@keyframes eccrmLifecycleProgress {

    0% {
        width: 0%;
    }

    8% {
        width: 8%;
    }

    16% {
        width: 18%;
    }

    24% {
        width: 28%;
    }

    34% {
        width: 39%;
    }

    44% {
        width: 50%;
    }

    54% {
        width: 61%;
    }

    64% {
        width: 71%;
    }

    74% {
        width: 81%;
    }

    86% {
        width: 91%;
    }

    100% {
        width: 95%;
    }

}


/* =========================================================
   MOVING SIGNAL
   ========================================================= */

.eccrm-lifecycle-signal {

    position: absolute;

    left: 4.7%;

    top: 26px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        #ffffff;

    border:
        3px solid var(--eccrm-teal);

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

        0 0 20px rgba(4, 164, 156, .30);

    animation:
        eccrmLifecycleSignal 10s ease-in-out infinite;

    z-index: 5;

}


@keyframes eccrmLifecycleSignal {

    0% {
        left: 4.7%;
    }

    8% {
        left: 14.2%;
    }

    16% {
        left: 23.7%;
    }

    24% {
        left: 33.2%;
    }

    34% {
        left: 42.7%;
    }

    44% {
        left: 52.2%;
    }

    54% {
        left: 61.7%;
    }

    64% {
        left: 71.2%;
    }

    74% {
        left: 80.7%;
    }

    86% {
        left: 90.2%;
    }

    100% {
        left: 95%;
    }

}


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

.eccrm-lifecycle-step {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;

    text-align: center;

    cursor: default;

}


.eccrm-lifecycle-node {

    position: relative;

    width: 64px;
    height: 64px;

    margin-bottom: 12px;

}


.eccrm-lifecycle-icon {

    position: relative;

    z-index: 2;

    width: 64px;
    height: 64px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--eccrm-teal);

    background:
        #ffffff;

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

    box-shadow:
        0 10px 25px rgba(37, 78, 75, .08);

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

}


.eccrm-lifecycle-step:hover .eccrm-lifecycle-icon {

    transform:
        translateY(-7px) scale(1.04);

    background:
        #f0fbfa;

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

}


.eccrm-lifecycle-icon svg {

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


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

.eccrm-lifecycle-step.active .eccrm-lifecycle-icon {

    color:
        #ffffff;

    background:
        var(--eccrm-teal);

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

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

}


.eccrm-lifecycle-step.active .eccrm-lifecycle-icon svg {

    stroke:
        #ffffff;

}


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

.eccrm-lifecycle-number {

    position: absolute;

    right: -4px;

    bottom: -3px;

    min-width: 20px;
    height: 20px;

    padding: 0 4px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--eccrm-grey);

    background:
        #ffffff;

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

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

    font-size: 7px;

    font-weight: 900;

}


.eccrm-lifecycle-step.active .eccrm-lifecycle-number {

    color:
        var(--eccrm-teal);

}


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

.eccrm-lifecycle-step-text {

    max-width: 110px;

}


.eccrm-lifecycle-step-text strong {

    display: block;

    min-height: 28px;

    color:
        var(--eccrm-dark);

    font-size: 13px;

    line-height: 1.35;

    font-weight: 500;

}


.eccrm-lifecycle-step-text span {

    display: block;

    margin-top: 2px;

    color:
        #899090;

    font-size: 12px;

    line-height: 1.35;

}


/* =========================================================
   PHASE LABELS
   ========================================================= */

.eccrm-lifecycle-phases {

    display: grid;

    grid-template-columns:
        3fr 4fr 3fr;

    gap: 10px;

    margin:
        45px 4.7% 0;

}


.eccrm-phase {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 39px;

    padding:
        7px 12px;

    border-radius: 10px;

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

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

}


.eccrm-phase>span {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

}


.eccrm-phase strong {

    color:
        var(--eccrm-dark);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .7px;

}


.eccrm-phase small {

    color:
        #8a9090;

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

}


.service-phase>span {

    background:
        var(--eccrm-grey);

}


/* =========================================================
   FOOTER MESSAGE
   ========================================================= */

.eccrm-lifecycle-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 35px;

    color:
        #7b8282;

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

}


.eccrm-footer-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

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

}


.eccrm-lifecycle-footer strong {

    color:
        var(--eccrm-dark);

    font-size: 14px;

}


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

@media (max-width: 1100px) {

    .eccrm-lifecycle-container {

        width:
            calc(100% - 30px);

    }

    .eccrm-lifecycle-wrapper {

        overflow-x: auto;

        padding:
            0 10px 18px;

        scrollbar-width: thin;

        scrollbar-color:
            rgba(4, 164, 156, .25) transparent;

    }

    .eccrm-lifecycle-wrapper {

        grid-template-columns:
            repeat(10,
                minmax(105px, 1fr));

        min-width:
            1080px;

    }

    .eccrm-lifecycle-phases {

        margin-left:
            4.7%;

        margin-right:
            4.7%;

    }

}


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

@media (max-width: 600px) {

    .eccrm-lifecycle {

        padding:
            60px 0 55px;

    }

    .eccrm-lifecycle-container {

        width:
            calc(100% - 24px);

    }

    .eccrm-lifecycle-header {

        margin-bottom:
            40px;

    }

    .eccrm-lifecycle-title {

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

        letter-spacing:
            -1.4px;

    }

    .eccrm-lifecycle-description {

        font-size:
            12px;

        line-height:
            1.7;

    }


    /* ==========================================
       MOBILE VERTICAL FLOW
    =========================================== */

    .eccrm-lifecycle-wrapper {

        display:
            flex;

        flex-direction:
            column;

        gap:
            8px;

        min-width:
            0;

        overflow:
            visible;

        padding:
            0 0 0 14px;

    }


    .eccrm-lifecycle-track {

        left:
            45px;

        right:
            auto;

        top:
            31px;

        bottom:
            31px;

        width:
            2px;

        height:
            auto;

    }


    .eccrm-lifecycle-progress {

        left:
            45px;

        top:
            31px;

        width:
            2px;

        height:
            0;

        animation:
            eccrmLifecycleVertical 12s ease-in-out infinite;

    }


    @keyframes eccrmLifecycleVertical {

        0% {
            height: 0;
        }

        10% {
            height: 10%;
        }

        20% {
            height: 20%;
        }

        30% {
            height: 30%;
        }

        40% {
            height: 40%;
        }

        50% {
            height: 50%;
        }

        60% {
            height: 60%;
        }

        70% {
            height: 70%;
        }

        80% {
            height: 80%;
        }

        90% {
            height: 90%;
        }

        100% {
            height: 96%;
        }

    }


    .eccrm-lifecycle-signal {

        left:
            40px;

        top:
            25px;

        animation:
            eccrmLifecycleVerticalSignal 12s ease-in-out infinite;

    }


    @keyframes eccrmLifecycleVerticalSignal {

        0% {
            top: 25px;
        }

        10% {
            top: 10%;
        }

        20% {
            top: 20%;
        }

        30% {
            top: 30%;
        }

        40% {
            top: 40%;
        }

        50% {
            top: 50%;
        }

        60% {
            top: 60%;
        }

        70% {
            top: 70%;
        }

        80% {
            top: 80%;
        }

        90% {
            top: 90%;
        }

        100% {
            top: 96%;
        }

    }


    .eccrm-lifecycle-step {

        display:
            grid;

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

        align-items:
            center;

        width:
            100%;

        min-height:
            72px;

        text-align:
            left;

    }


    .eccrm-lifecycle-node {

        width:
            62px;

        height:
            62px;

        margin:
            0;

    }


    .eccrm-lifecycle-icon {

        width:
            56px;

        height:
            56px;

    }


    .eccrm-lifecycle-icon svg {

        width:
            21px;

        height:
            21px;

    }


    .eccrm-lifecycle-number {

        right:
            -1px;

        bottom:
            -1px;

    }


    .eccrm-lifecycle-step-text {

        max-width:
            none;

        padding-left:
            8px;

    }


    .eccrm-lifecycle-step-text strong {

        min-height:
            auto;

        font-size:
            13px;

    }


    .eccrm-lifecycle-step-text span {

        font-size:
            12px;

    }


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

    .eccrm-lifecycle-phases {

        grid-template-columns:
            1fr;

        gap:
            7px;

        margin:
            30px 0 0;

    }


    .eccrm-phase {

        justify-content:
            flex-start;

        min-height:
            38px;

    }


    .eccrm-phase strong {

        font-size:
            12px;

    }


    .eccrm-phase small {

        font-size:
            11px;

    }


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

    .eccrm-lifecycle-footer {

        margin-top:
            25px;

        text-align:
            center;

        line-height:
            1.5;

    }

}


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

@media (max-width: 380px) {

    .eccrm-lifecycle {

        padding:
            50px 0 45px;

    }

    .eccrm-lifecycle-container {

        width:
            calc(100% - 18px);

    }

    .eccrm-lifecycle-title {

        font-size:
            28px;

    }

    .eccrm-lifecycle-step {

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

    }

    .eccrm-lifecycle-node {

        width:
            55px;

        height:
            55px;

    }

    .eccrm-lifecycle-icon {

        width:
            49px;

        height:
            49px;

    }

    .eccrm-lifecycle-track,
    .eccrm-lifecycle-progress {

        left:
            40px;

    }

    .eccrm-lifecycle-signal {

        left:
            35px;

    }

}


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

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

    .eccrm-lifecycle *,
    .eccrm-lifecycle *::before,
    .eccrm-lifecycle *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* js */
.eccrm-lifecycle-step.journey-completed .eccrm-lifecycle-icon {

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

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

}


.eccrm-lifecycle-step.journey-completed .eccrm-lifecycle-number {

    color:
        var(--eccrm-teal);

}


.eccrm-lifecycle-step.journey-completed .eccrm-lifecycle-step-text strong {

    color:
        var(--eccrm-teal);

}

/* Workflow */

/* Benefits */
/* =========================================================
   ECCRM BUSINESS BENEFITS
   Modern SaaS / Conversion Section
   Brand:
   #04A49C
   #5B5C5C
   ========================================================= */

.eccrm-benefits {

    --eccrm-teal: #04a49c;
    --eccrm-teal-dark: #038b85;
    --eccrm-grey: #5b5c5c;
    --eccrm-dark: #5b5c5c;
    --eccrm-text: #6d7474;
    --eccrm-border: rgba(91, 92, 92, .10);

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 65px 0 90px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(4, 164, 156, .075),
            transparent 35%),

        linear-gradient(180deg,
            #ffffff 0%,
            #fbfdfd 100%);

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

}


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

.eccrm-benefits-grid {

    position: absolute;

    inset: 0;

    opacity: .28;

    pointer-events: none;

    background-image:

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

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

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent);

}


.eccrm-benefits-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

}


.eccrm-benefits-glow-1 {

    width: 400px;
    height: 400px;

    left: -240px;
    top: 250px;

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

}


.eccrm-benefits-glow-2 {

    width: 450px;
    height: 450px;

    right: -250px;
    bottom: 100px;

    background:
        radial-gradient(circle,
            rgba(91, 92, 92, .06),
            transparent 68%);

}


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

.eccrm-benefits-container {

    position: relative;

    z-index: 2;

    width:
        min(1180px,
            calc(100% - 40px));

    margin: 0 auto;

}


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

.eccrm-benefits-header {

    max-width: 850px;

    margin:
        0 auto 42px;

    text-align: center;

}


.eccrm-benefits-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    margin-bottom: 18px;

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

    border-radius: 100px;

    color:
        var(--eccrm-teal);

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

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.3px;

}


.eccrm-benefits-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--eccrm-teal);

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

}


.eccrm-benefits-header h2 {

    margin: 0;

    color:
        var(--eccrm-dark);

    font-size:
        clamp(35px,
            4.5vw,
            50px);

    line-height: 1.06;

    letter-spacing:
        -2.4px;

    font-weight: 800;

}


.eccrm-benefits-header h2 span {

    display: block;

    color:
        var(--eccrm-teal);

}


.eccrm-benefits-header p {

    max-width: 680px;

    margin:
        18px auto 0;

    color:
        var(--eccrm-text);

    font-size: 16px;

    line-height: 1.8;
    font-weight: 500;

}


/* =========================================================
   BUSINESS SWITCHER
   ========================================================= */

.eccrm-business-switcher {

    display: flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    max-width: 100%;

    margin:
        0 auto 25px;

    padding: 5px;

    gap: 4px;

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

    border-radius: 15px;

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

    box-shadow:
        0 10px 30px rgba(40, 75, 73, .06);

    backdrop-filter:
        blur(15px);

}


.eccrm-business-tab {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 43px;

    padding:
        0 16px;

    border: 0;

    border-radius: 10px;

    color:
        var(--eccrm-grey);

    background:
        transparent;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 800;

    transition:
        .3s ease;

}


.eccrm-business-tab:hover {

    color:
        var(--eccrm-teal);

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

}


.eccrm-business-tab.active {

    color:
        #ffffff;

    background:
        var(--eccrm-teal);

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

}


.eccrm-tab-icon {

    width: 26px;
    height: 26px;

    display: grid;

    place-items: center;

    border-radius: 7px;

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

}


.eccrm-business-tab.active .eccrm-tab-icon {

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

}


.eccrm-tab-icon svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   KPI STRIP
   ========================================================= */

.eccrm-kpi-strip {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

    max-width: 850px;

    margin:
        0 auto 38px;

    padding:
        15px 20px;

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

    border-radius: 15px;

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

    box-shadow:
        0 12px 35px rgba(40, 75, 73, .045);

}


.eccrm-kpi {

    text-align: center;

}


.eccrm-kpi strong {

    display: block;

    color:
        var(--eccrm-teal);

    font-size: 22px;

    line-height: 1;

    font-weight: 900;

    letter-spacing:
        -1px;

}


.eccrm-kpi span {

    display: block;

    margin-top: 5px;

    color:
        #858b8b;

    font-size: 12px;

}


.eccrm-kpi-divider {

    width: 1px;

    height: 30px;

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

}


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

.eccrm-business-content {

    display: none;

    animation:
        eccrmContentIn .55s ease;

}


.eccrm-business-content.active {

    display: block;

}


@keyframes eccrmContentIn {

    from {

        opacity: 0;

        transform:
            translateY(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.eccrm-content-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;

}


.eccrm-section-label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--eccrm-teal);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.2px;

}


.eccrm-content-heading h3 {

    max-width: 730px;

    margin: 0;

    color:
        var(--eccrm-dark);

    font-size:
        clamp(23px,
            3vw,
            34px);

    line-height: 1.15;

    letter-spacing:
        -1px;

}


.eccrm-content-heading h3 span {

    color:
        var(--eccrm-teal);

}


.eccrm-content-metric {

    flex: 0 0 auto;

    min-width: 120px;

    padding:
        12px 16px;

    border-left:
        2px solid var(--eccrm-teal);

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

}


.eccrm-content-metric strong {

    display: block;

    color:
        var(--eccrm-teal);

    font-size: 25px;

    line-height: 1;

    font-weight: 900;

}


.eccrm-content-metric span {

    display: block;

    margin-top: 4px;

    color:
        #858b8b;

    font-size: 13px;

}


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

.eccrm-benefit-grid {

    display: grid;

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

    gap: 14px;

}


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

.eccrm-benefit-card {

    position: relative;

    min-height: 260px;

    padding:
        21px;

    overflow: hidden;

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

    border-radius: 17px;

    background:
        linear-gradient(145deg,
            #ffffff,
            #f8fbfb);

    box-shadow:
        0 12px 35px rgba(42, 77, 74, .055);

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

}


.eccrm-benefit-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background:
        var(--eccrm-teal);

    transition:
        height .35s ease;

}


.eccrm-benefit-card:hover {

    transform:
        translateY(-7px);

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

    box-shadow:
        0 22px 50px rgba(42, 77, 74, .10);

}


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

    height: 100%;

}


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

.eccrm-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}


.eccrm-benefit-icon {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--eccrm-teal);

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

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

}


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

    transform:
        scale(1.08) rotate(-3deg);

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

}


.eccrm-benefit-icon svg {

    width: 21px;
    height: 21px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-card-number {

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

    font-size: 9px;

    font-weight: 900;

}


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

.eccrm-benefit-card h4 {

    margin:
        0 0 9px;

    color:
        var(--eccrm-dark);

    font-size: 16px;

    line-height: 1.25;

    font-weight: 850;

}


.eccrm-benefit-card p {

    margin:
        0;

    min-height: 65px;

    color:
        #747b7b;

    font-size: 13px;

    line-height: 1.65;

}


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

.eccrm-card-result {

    position: absolute;

    left: 21px;
    right: 21px;

    bottom: 20px;

    padding-top:
        12px;

    border-top:
        1px dashed rgba(91, 92, 92, .12);

}


.eccrm-card-result strong {

    display: block;

    color:
        var(--eccrm-teal);

    font-size: 13px;

    font-weight: 900;

}


.eccrm-card-result span {

    display: block;

    margin-top: 3px;

    color:
        #8a9090;

    font-size: 13px;

}


/* =========================================================
   SERVICE DIFFERENTIATION
   ========================================================= */

.service-card .eccrm-benefit-icon {

    color:
        var(--eccrm-grey);

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

}


.service-card:hover .eccrm-benefit-icon {

    color:
        var(--eccrm-teal);

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

}


/* =========================================================
   CONVERSION BAR
   ========================================================= */

.eccrm-conversion-bar {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 16px;

    padding:
        14px 17px;

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

    border-radius: 13px;

    background:
        linear-gradient(90deg,
            rgba(4, 164, 156, .055),
            rgba(255, 255, 255, .75));

}


.eccrm-conversion-icon {

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        #ffffff;

    background:
        var(--eccrm-teal);

}


.eccrm-conversion-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.eccrm-conversion-bar strong {

    display: block;

    color:
        var(--eccrm-dark);

    font-size: 14px;

}


.eccrm-conversion-bar span {

    display: block;

    margin-top: 3px;

    color:
        #777e7e;

    font-size: 14px;

    line-height: 1.5;

}


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

.eccrm-benefits-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 45px;

    padding:
        22px 25px;

    border-radius: 17px;

    background:
        linear-gradient(100deg,
            #f0fbfa,
            #ffffff);

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

}


.eccrm-benefits-cta strong {

    display: block;

    color:
        var(--eccrm-dark);

    font-size: 16px;

}


.eccrm-benefits-cta span {

    display: block;

    margin-top: 4px;

    color:
        #7e8585;

    font-size: 14px;

}


.eccrm-benefits-cta a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 43px;

    padding:
        0 17px;

    flex: 0 0 auto;

    border-radius: 9px;

    color:
        #ffffff;

    background:
        var(--eccrm-teal);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

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

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

}


.eccrm-benefits-cta a:hover {

    color:
        #ffffff;

    transform:
        translateY(-2px);

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

}


.eccrm-benefits-cta a svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .3s ease;

}


.eccrm-benefits-cta a:hover svg {

    transform:
        translateX(3px);

}


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

@media (max-width: 1000px) {

    .eccrm-benefit-grid {

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

    }

    .eccrm-benefit-card {

        min-height:
            250px;

    }

}


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

@media (max-width: 650px) {

    .eccrm-benefits {

        padding:
            65px 0 60px;

    }

    .eccrm-benefits-container {

        width:
            calc(100% - 24px);

    }

    .eccrm-benefits-header {

        margin-bottom:
            30px;

    }

    .eccrm-benefits-header h2 {

        font-size: 28px;

        letter-spacing:
            -1.5px;

    }

    .eccrm-benefits-header p {

        font-size:
            12px;

        line-height:
            1.7;

    }


    /* Switcher */

    .eccrm-business-switcher {

        width:
            100%;

        display:
            grid;

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

        border-radius:
            13px;

    }

    .eccrm-business-tab {

        min-height:
            48px;

        padding:
            0 5px;

        flex-direction:
            column;

        gap:
            3px;

        font-size:
            13px;

    }

    .eccrm-tab-icon {

        width:
            22px;

        height:
            22px;

    }

    .eccrm-tab-icon svg {

        width:
            12px;

        height:
            12px;

    }


    /* KPI */

    .eccrm-kpi-strip {

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

        gap:
            13px;

        padding:
            15px;

    }

    .eccrm-kpi-divider {

        display:
            none;

    }

    .eccrm-kpi strong {

        font-size:
            19px;

    }

    .eccrm-kpi span {

        font-size: 12px;

    }


    /* Content heading */

    .eccrm-content-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            14px;

    }

    .eccrm-content-heading h3 {

        font-size:
            23px;

    }

    .eccrm-content-metric {

        min-width:
            110px;

    }


    /* Cards */

    .eccrm-benefit-grid {

        grid-template-columns:
            1fr;

        gap:
            11px;

    }

    .eccrm-benefit-card {

        min-height:
            235px;

    }

    .eccrm-benefit-card p {

        min-height:
            58px;

    }


    /* Conversion */

    .eccrm-conversion-bar {

        align-items:
            flex-start;

    }

    .eccrm-conversion-bar span {

        font-size:
            12px;

    }


    /* CTA */

    .eccrm-benefits-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

    .eccrm-benefits-cta a {

        width:
            100%;

    }

}


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

@media (max-width: 380px) {

    .eccrm-benefits {

        padding:
            52px 0 48px;

    }

    .eccrm-benefits-container {

        width:
            calc(100% - 18px);

    }

    .eccrm-benefits-header h2 {

        font-size:
            28px;

    }

    .eccrm-business-tab {

        font-size: 13px;

    }

    .eccrm-benefit-card {

        min-height:
            245px;

        padding:
            18px;

    }

    .eccrm-card-result {

        left:
            18px;

        right:
            18px;

        bottom:
            17px;

    }

}


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

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

    .eccrm-benefits *,
    .eccrm-benefits *::before,
    .eccrm-benefits *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* Benefits */

/* Integration */
/* =========================================================
   ECCRM COMPLETE CRM ECOSYSTEM V2
   COMPLETE RESPONSIVE CSS
   BRAND COLORS ONLY

   Primary : #04a49c
   Dark    : #5b5c5c
========================================================= */


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

.eccrm-ecosystem-v2 {

    --eccrm-teal: #04a49c;
    --eccrm-dark: #5b5c5c;

    --eccrm-heading: #5b5c5c;
    --eccrm-text: #5b5c5c;
    --eccrm-muted: #5b5c5c;

    --eccrm-white: #ffffff;

    --eccrm-teal-05: rgba(4, 164, 156, .05);
    --eccrm-teal-08: rgba(4, 164, 156, .08);
    --eccrm-teal-10: rgba(4, 164, 156, .10);
    --eccrm-teal-12: rgba(4, 164, 156, .12);
    --eccrm-teal-16: rgba(4, 164, 156, .16);
    --eccrm-teal-20: rgba(4, 164, 156, .20);
    --eccrm-teal-25: rgba(4, 164, 156, .25);
    --eccrm-teal-30: rgba(4, 164, 156, .30);

    --eccrm-dark-05: rgba(91, 92, 92, .05);
    --eccrm-dark-08: rgba(91, 92, 92, .08);
    --eccrm-dark-10: rgba(91, 92, 92, .10);
    --eccrm-dark-15: rgba(91, 92, 92, .15);
    --eccrm-dark-20: rgba(91, 92, 92, .20);

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 35px 0 85px;

    background: #ffffff;

    color: var(--eccrm-dark);

    isolation: isolate;
}


/* =========================================================
   GLOBAL RESET INSIDE SECTION
========================================================= */

.eccrm-ecosystem-v2 *,
.eccrm-ecosystem-v2 *::before,
.eccrm-ecosystem-v2 *::after {

    box-sizing: border-box;
}

.eccrm-ecosystem-v2 button,
.eccrm-ecosystem-v2 a {

    -webkit-tap-highlight-color: transparent;
}

.eccrm-ecosystem-v2 img {

    max-width: 100%;

    height: auto;
}

.eccrm-ecosystem-v2 svg {

    display: block;
}


/* =========================================================
   BACKGROUND DECORATIONS
========================================================= */

.eccrm-eco-v2-bg {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    z-index: -1;

    opacity: .8;

    filter: blur(1px);
}


.eccrm-eco-v2-bg-1 {

    width: 700px;

    height: 700px;

    top: -390px;

    right: -200px;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .10),
            transparent 68%);
}


.eccrm-eco-v2-bg-2 {

    width: 560px;

    height: 560px;

    left: -330px;

    bottom: -270px;

    background:
        radial-gradient(circle,
            rgba(4, 164, 156, .08),
            transparent 68%);
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.eccrm-eco-v2-dots {

    position: absolute;

    width: 125px;

    height: 125px;

    opacity: .45;

    pointer-events: none;

    background-image:
        radial-gradient(rgba(4, 164, 156, .35) 1px,
            transparent 1px);

    background-size: 9px 9px;
}


.eccrm-eco-v2-dots-1 {

    top: 100px;

    right: 35%;
}


.eccrm-eco-v2-dots-2 {

    bottom: 230px;

    left: 2%;
}


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

.eccrm-eco-v2-container {

    position: relative;

    z-index: 2;

    width: min(1440px,
            calc(100% - 60px));

    margin: 0 auto;
}


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

.eccrm-eco-v2-header {

    max-width: 940px;

    margin: 0 auto 50px;

    text-align: center;
}


.eccrm-eco-v2-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 15px;

    margin-bottom: 18px;

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

    border-radius: 100px;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-05);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .8px;

    text-transform: uppercase;

    box-shadow:
        0 8px 24px var(--eccrm-teal-05);
}


.eccrm-eco-v2-eyebrow-icon {

    width: 23px;

    height: 23px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background: var(--eccrm-teal-10);

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


.eccrm-eco-v2-eyebrow-icon svg {

    width: 14px;

    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-eco-v2-header h2 {

    margin: 0;

    color: var(--eccrm-heading);

    font-size: clamp(38px,
            5vw,
            45px);

    line-height: 1.03;

    letter-spacing: -3px;

    font-weight: 850;
}


.eccrm-eco-v2-header h2 span {

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


.eccrm-eco-v2-header p {

    max-width: 800px;

    margin: 18px auto 0;

    color: var(--eccrm-text);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   TOP THREE COLUMN AREA
========================================================= */

.eccrm-eco-v2-top {

    display: grid;

    grid-template-columns:
        minmax(300px, .9fr) minmax(430px, 1.15fr) minmax(300px, .9fr);

    gap: 20px;

    align-items: stretch;
}


/* =========================================================
   LEFT + RIGHT PANELS
========================================================= */

.eccrm-eco-v2-custom,
.eccrm-eco-v2-integrations {

    position: relative;

    padding: 30px;

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

    border-radius: 24px;

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

    box-shadow:
        0 20px 70px rgba(91, 92, 92, .06);

    backdrop-filter: blur(12px);

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


.eccrm-eco-v2-custom:hover,
.eccrm-eco-v2-integrations:hover {

    transform: translateY(-4px);

    border-color: var(--eccrm-teal-20);

    box-shadow:
        0 28px 80px var(--eccrm-teal-08);
}


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

.eccrm-eco-v2-label {

    display: block;

    margin-bottom: 8px;

    color: var(--eccrm-teal);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


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

.eccrm-eco-v2-custom h3 {

    margin: 0;

    color: var(--eccrm-heading);

    font-size: 27px;

    line-height: 1.1;

    letter-spacing: -.9px;
}


.eccrm-eco-v2-custom h3 span {

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


.eccrm-eco-v2-intro {

    margin: 14px 0 22px;

    color: var(--eccrm-text);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CHECKLIST
========================================================= */

.eccrm-eco-v2-check-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-bottom: 26px;
}


.eccrm-eco-v2-check {

    display: grid;

    grid-template-columns: 26px 1fr;

    column-gap: 10px;

    align-items: start;
}


.eccrm-eco-v2-check>span {

    grid-row: span 2;

    width: 26px;

    height: 26px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--eccrm-teal);

    box-shadow:
        0 7px 16px var(--eccrm-teal-20);
}


.eccrm-eco-v2-check svg {

    width: 14px;

    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-eco-v2-check strong {

    color: var(--eccrm-heading);

    font-size: 13px;

    line-height: 1.4;
}


.eccrm-eco-v2-check small {

    margin-top: 2px;

    color: var(--eccrm-muted);

    font-size: 12px;

    line-height: 1.4;
}


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

.eccrm-eco-v2-primary-btn,
.eccrm-eco-v2-team-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding: 0 22px;

    border: 0;

    border-radius: 11px;

    text-decoration: none;

    color: #ffffff;

    background: var(--eccrm-teal);

    font-size: 13px;

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 14px 30px var(--eccrm-teal-20);

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


.eccrm-eco-v2-primary-btn svg,
.eccrm-eco-v2-team-btn svg {

    width: 15px;

    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-eco-v2-primary-btn:hover,
.eccrm-eco-v2-team-btn:hover {

    color: #ffffff;

    background: var(--eccrm-dark);

    transform: translateY(-3px);

    box-shadow:
        0 18px 36px var(--eccrm-dark-20);
}


/* =========================================================
   CENTER NETWORK
========================================================= */

.eccrm-eco-v2-network {

    position: relative;

    min-height: 540px;

    overflow: hidden;

    border-radius: 26px;

    background:
        radial-gradient(circle at center,
            var(--eccrm-teal-10),
            transparent 45%);
}


/* =========================================================
   ORBITS
========================================================= */

.eccrm-eco-v2-orbit {

    position: absolute;

    top: 50%;

    left: 50%;

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

    border-radius: 50%;

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

    pointer-events: none;
}


.orbit-inner {

    width: 260px;

    height: 260px;

    animation:
        orbitPulse 4s ease-in-out infinite;
}


.orbit-outer {

    width: 420px;

    height: 420px;

    border-color: var(--eccrm-teal-10);

    animation:
        orbitPulse 5s ease-in-out infinite reverse;
}


@keyframes orbitPulse {

    0%,
    100% {

        opacity: .45;

        transform:
            translate(-50%, -50%) scale(.97);
    }

    50% {

        opacity: 1;

        transform:
            translate(-50%, -50%) scale(1.025);
    }
}


/* =========================================================
   CONNECTION SVG
========================================================= */

.eccrm-eco-v2-connections {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;
}


.eccrm-eco-v2-connections path {

    fill: none;

    stroke: var(--eccrm-teal-20);

    stroke-width: 1.3;

    stroke-dasharray: 5 8;

    animation:
        connectionFlow 4s linear infinite;
}


@keyframes connectionFlow {

    to {

        stroke-dashoffset: -52;
    }
}


/* =========================================================
   FLOATING PARTICLES
========================================================= */

.eccrm-eco-v2-particle {

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--eccrm-teal);

    box-shadow:
        0 0 14px var(--eccrm-teal-30);
}


.particle-1 {

    top: 23%;

    left: 28%;

    animation:
        particleFloat 4s ease-in-out infinite;
}


.particle-2 {

    top: 31%;

    right: 20%;

    animation:
        particleFloat 5s ease-in-out infinite .7s;
}


.particle-3 {

    bottom: 23%;

    left: 30%;

    animation:
        particleFloat 4.5s ease-in-out infinite 1.2s;
}


@keyframes particleFloat {

    0%,
    100% {

        transform:
            translateY(0) scale(1);

        opacity: .45;
    }

    50% {

        transform:
            translateY(-13px) scale(1.35);

        opacity: 1;
    }
}


/* =========================================================
   ECCRM CORE
========================================================= */

.eccrm-eco-v2-core {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 140px;

    height: 140px;

    display: grid;

    place-items: center;

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


.eccrm-eco-v2-core-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background: var(--eccrm-teal-10);

    box-shadow:
        0 0 0 15px var(--eccrm-teal-05),
        0 0 0 30px var(--eccrm-teal-05);

    animation:
        coreGlow 3s ease-in-out infinite;
}


@keyframes coreGlow {

    0%,
    100% {

        transform: scale(.95);

        opacity: .65;
    }

    50% {

        transform: scale(1.08);

        opacity: 1;
    }
}


.eccrm-eco-v2-core-inner {

    position: relative;

    z-index: 2;

    width: 108px;

    height: 108px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: #04a49c4d;

    box-shadow:
        0 18px 40px var(--eccrm-teal-30);
}


.eccrm-eco-v2-core-inner strong {

    margin-bottom: 5px;

    font-size: 23px;

    letter-spacing: -.5px;
}


.eccrm-eco-v2-core-inner span {

    font-size: 12px;

    line-height: 1.25;

    text-align: center;
}


/* =========================================================
   NETWORK NODES
========================================================= */

.eccrm-eco-v2-node {

    position: absolute;

    z-index: 5;

    width: 135px;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--eccrm-heading);

    font-family: inherit;

    text-align: center;

    cursor: pointer;

    transition:
        transform .35s ease;
}


.eccrm-eco-v2-node:hover,
.eccrm-eco-v2-node.active {

    transform: scale(1.07);
}


/* =========================================================
   NODE POSITIONS
========================================================= */

.node-crm {

    top: 20px;

    left: 50%;

    transform: translateX(-50%);
}


.node-crm:hover,
.node-crm.active {

    transform:
        translateX(-50%) scale(1.07);
}


.node-erp {

    top: 105px;

    right: 10px;
}


.node-workflow {

    right: 5px;

    bottom: 95px;
}


.node-reports {

    bottom: 18px;

    left: 50%;

    transform: translateX(-50%);
}


.node-reports:hover,
.node-reports.active {

    transform:
        translateX(-50%) scale(1.07);
}


.node-api {

    bottom: 95px;

    left: 5px;
}


.node-quotation {

    top: 105px;

    left: 10px;
}


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

.eccrm-eco-v2-node-icon {

    width: 66px;

    height: 66px;

    display: grid;

    place-items: center;

    margin-bottom: 8px;

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

    border-radius: 50%;

    color: var(--eccrm-teal);

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

    box-shadow:
        0 12px 30px var(--eccrm-dark-08);

    transition:
        all .3s ease;
}


.eccrm-eco-v2-node:hover .eccrm-eco-v2-node-icon,
.eccrm-eco-v2-node.active .eccrm-eco-v2-node-icon {

    color: #ffffff;

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

    background: var(--eccrm-teal);

    box-shadow:
        0 14px 32px var(--eccrm-teal-25);
}


.eccrm-eco-v2-node-icon svg {

    width: 27px;

    height: 27px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   ALL NODE COLORS = ECCRM COLORS
========================================================= */

.node-orange,
.node-green,
.node-purple,
.node-blue {

    color: var(--eccrm-teal);

    background: transparent;
}


.eccrm-eco-v2-node strong {

    color: var(--eccrm-heading);

    font-size: 14px;

    font-weight: 850;
}


.eccrm-eco-v2-node small {

    margin-top: 4px;

    color: var(--eccrm-muted);

    font-size: 11px;

    line-height: 1.35;
}


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

.eccrm-eco-v2-integration-heading {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 22px;
}


.eccrm-eco-v2-link-icon {

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);
}


.eccrm-eco-v2-link-icon svg {

    width: 28px;

    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-eco-v2-integration-heading h3 {

    margin: 0;

    color: var(--eccrm-heading);

    font-size: 22px;

    line-height: 1.2;

    letter-spacing: -.7px;
}


.eccrm-eco-v2-integration-heading h3 span {

    display: block;
}


.eccrm-eco-v2-integration-heading p {

    margin: 7px 0 0;

    color: var(--eccrm-text);

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   INTEGRATION BOX
========================================================= */

.eccrm-eco-v2-integrations-box {

    padding: 15px;

    border-radius: 18px;

    background: var(--eccrm-teal-05);
}


.eccrm-eco-v2-integration-grid {

    display: grid;

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

    gap: 9px;
}


.eccrm-eco-v2-integration {

    min-height: 92px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

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

    border-radius: 13px;

    background: #ffffff;

    color: var(--eccrm-dark);

    cursor: pointer;

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


.eccrm-eco-v2-integration:hover {

    transform: translateY(-4px);

    border-color: var(--eccrm-teal-20);

    box-shadow:
        0 12px 28px var(--eccrm-teal-08);
}


/* =========================================================
   INTEGRATION ICONS
========================================================= */

.int-icon {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);
}


.int-icon svg {

    width: 21px;

    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ALL INTEGRATION ICONS SAME BRAND PALETTE */

.int-green,
.int-red,
.int-blue,
.int-cyan,
.int-purple,
.int-teal,
.int-orange,
.int-pink {

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);
}


.eccrm-eco-v2-integration strong {

    color: var(--eccrm-heading);

    font-size: 13px;

    font-weight: 800;

    text-align: center;
}


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

.eccrm-eco-v2-team-btn {

    width: 100%;

    margin-top: 15px;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-08);

    box-shadow: none;

    border: 1px solid var(--eccrm-teal-10);
}


.eccrm-eco-v2-team-btn:hover {

    color: #ffffff;

    background: var(--eccrm-teal);

}


/* =========================================================
   SECURITY / DATA SECTION
========================================================= */

.eccrm-eco-v2-security {

    margin-top: 22px;

    padding: 27px;

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

    border-radius: 25px;

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

    box-shadow:
        0 20px 70px var(--eccrm-dark-05);

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


.eccrm-eco-v2-security:hover {

    border-color: var(--eccrm-teal-20);

    box-shadow:
        0 28px 80px var(--eccrm-teal-08);
}


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

.eccrm-eco-v2-security-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 22px;
}


.eccrm-eco-v2-security-title {

    display: flex;

    align-items: flex-start;

    gap: 14px;
}


.eccrm-eco-v2-security-main-icon {

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);
}


.eccrm-eco-v2-security-main-icon svg {

    width: 28px;

    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-eco-v2-security-title h3 {

    margin: 1px 0 0;

    color: var(--eccrm-heading);

    font-size: 27px;

    line-height: 1.1;

    letter-spacing: -.8px;
}


.eccrm-eco-v2-security-title h3 span {

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


.eccrm-eco-v2-security-title p {

    max-width: 690px;

    margin: 7px 0 0;

    color: var(--eccrm-text);

    font-size: 13px;

    line-height: 1.55;
}


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

.eccrm-eco-v2-security-badge {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 320px;

    padding: 11px 13px;

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

    border-radius: 13px;

    background: var(--eccrm-teal-05);
}


.security-badge-icon {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    flex: 0 0 38px;

    border-radius: 11px;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);
}


.security-badge-icon svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-eco-v2-security-badge strong {

    display: block;

    color: var(--eccrm-heading);

    font-size: 14px;
}


.eccrm-eco-v2-security-badge small {

    display: block;

    margin-top: 3px;

    color: var(--eccrm-muted);

    font-size: 11px;
}


.badge-arrow {

    margin-left: auto;

    width: 28px;

    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);

    font-size: 14px;

    transition:
        transform .3s ease;
}


.eccrm-eco-v2-security-badge:hover .badge-arrow {

    transform: translateX(4px);
}


/* =========================================================
   SECURITY CARDS
========================================================= */

.eccrm-eco-v2-security-grid {

    display: grid;

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

    gap: 10px;
}


.eccrm-eco-v2-security-card {

    min-width: 0;

    min-height: 205px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding: 18px 12px;

    text-align: center;

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

    border-radius: 15px;

    background: #ffffff;

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


.eccrm-eco-v2-security-card:hover {

    transform: translateY(-6px);

    border-color: var(--eccrm-teal-20);

    box-shadow:
        0 16px 34px var(--eccrm-teal-08);
}


/* =========================================================
   SECURITY CARD ICON
========================================================= */

.security-card-icon {

    width: 54px;

    height: 54px;

    display: grid;

    place-items: center;

    margin-bottom: 11px;

    border-radius: 50%;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);
}


.security-card-icon svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ALL SECURITY ICONS */

.icon-user,
.icon-shield,
.icon-database,
.icon-permission,
.icon-audit,
.icon-maintenance {

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-10);
}


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

.eccrm-eco-v2-security-card h4 {

    margin: 0;

    color: var(--eccrm-heading);

    font-size: 14px;

    font-weight: 850;
}


.eccrm-eco-v2-security-card p {

    max-width: 150px;

    min-height: 40px;

    margin: 7px 0 12px;

    color: var(--eccrm-text);

    font-size: 11px;

    line-height: 1.5;
}


.security-card-tag {

    width: 100%;

    margin-top: auto;

    padding: 10px 6px;

    border-radius: 9px;

    color: var(--eccrm-teal);

    background: var(--eccrm-teal-08);

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   TRUST BAR
========================================================= */

.eccrm-eco-v2-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px 28px;

    margin-top: 17px;

    padding: 14px 18px;

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

    border-radius: 13px;

    background: var(--eccrm-teal-05);
}


.eccrm-eco-v2-trust span {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--eccrm-dark);

    font-size: 13px;

    font-weight: 750;
}


.eccrm-eco-v2-trust i {

    width: 17px;

    height: 17px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--eccrm-teal);

    font-size: 9px;

    font-style: normal;
}


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

@media (max-width: 1250px) {

    .eccrm-eco-v2-container {

        width: min(1200px,
                calc(100% - 40px));
    }


    .eccrm-eco-v2-top {

        grid-template-columns:
            minmax(270px, .8fr) minmax(390px, 1fr) minmax(270px, .8fr);

        gap: 15px;
    }


    .eccrm-eco-v2-custom,
    .eccrm-eco-v2-integrations {

        padding: 23px;
    }


    .eccrm-eco-v2-network {

        min-height: 500px;
    }


    .eccrm-eco-v2-security-grid {

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


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

@media (max-width: 1000px) {

    .eccrm-ecosystem-v2 {

        padding: 65px 0;
    }


    .eccrm-eco-v2-container {

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


    .eccrm-eco-v2-header {

        margin-bottom: 40px;
    }


    .eccrm-eco-v2-header h2 {

        font-size: clamp(36px,
                6vw,
                50px);
    }


    .eccrm-eco-v2-top {

        grid-template-columns:
            1fr 1fr;
    }


    /* NETWORK FULL WIDTH */

    .eccrm-eco-v2-network {

        grid-column: 1 / -1;

        grid-row: 1;

        min-height: 500px;
    }


    .eccrm-eco-v2-custom {

        grid-column: 1;

        grid-row: 2;
    }


    .eccrm-eco-v2-integrations {

        grid-column: 2;

        grid-row: 2;
    }


    .eccrm-eco-v2-security-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .eccrm-eco-v2-security-badge {

        width: 100%;

        min-width: 0;
    }


    .eccrm-eco-v2-security-grid {

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


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

@media (max-width: 820px) {

    .eccrm-eco-v2-top {

        grid-template-columns:
            1fr;
    }


    .eccrm-eco-v2-network {

        grid-column: auto;

        min-height: 480px;
    }


    .eccrm-eco-v2-custom {

        grid-column: auto;

        grid-row: auto;
    }


    .eccrm-eco-v2-integrations {

        grid-column: auto;

        grid-row: auto;
    }


    .eccrm-eco-v2-integration-grid {

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


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

@media (max-width: 700px) {

    .eccrm-ecosystem-v2 {

        padding: 55px 0;
    }


    .eccrm-eco-v2-container {

        width: calc(100% - 24px);
    }


    .eccrm-eco-v2-header {

        margin-bottom: 30px;
    }


    .eccrm-eco-v2-eyebrow {

        font-size: 11px;

        padding: 7px 12px;
    }


    .eccrm-eco-v2-header h2 {

        font-size: clamp(31px,
                9vw,
                44px);

        letter-spacing: -2px;
    }


    .eccrm-eco-v2-header h2 span {

        display: block;
    }


    .eccrm-eco-v2-header p {

        font-size: 13px;

        line-height: 1.65;
    }


    /* =====================================================
       TOP SECTION
    ===================================================== */

    .eccrm-eco-v2-top {

        display: flex;

        flex-direction: column;

        gap: 15px;
    }


    /* =====================================================
       NETWORK
    ===================================================== */

    .eccrm-eco-v2-network {

        order: 1;

        width: 100%;

        min-height: 410px;

        border-radius: 20px;
    }


    /* =====================================================
       CUSTOMIZATION
    ===================================================== */

    .eccrm-eco-v2-custom {

        order: 2;
    }


    /* =====================================================
       INTEGRATIONS
    ===================================================== */

    .eccrm-eco-v2-integrations {

        order: 3;
    }


    .eccrm-eco-v2-custom,
    .eccrm-eco-v2-integrations {

        padding: 21px;

        border-radius: 18px;
    }


    /* =====================================================
       NETWORK RESPONSIVE
    ===================================================== */

    .orbit-inner {

        width: 205px;

        height: 205px;
    }


    .orbit-outer {

        width: 310px;

        height: 310px;
    }


    .eccrm-eco-v2-core {

        width: 105px;

        height: 105px;
    }


    .eccrm-eco-v2-core-inner {

        width: 82px;

        height: 82px;
    }


    .eccrm-eco-v2-core-inner strong {

        font-size: 16px;
    }


    .eccrm-eco-v2-core-inner span {

        font-size: 8px;
    }


    .eccrm-eco-v2-node {

        width: 100px;
    }


    .eccrm-eco-v2-node-icon {

        width: 48px;

        height: 48px;
    }


    .eccrm-eco-v2-node-icon svg {

        width: 20px;

        height: 20px;
    }


    .eccrm-eco-v2-node strong {

        font-size: 13px;
    }


    .eccrm-eco-v2-node small {

        font-size: 6px;
    }


    .node-crm {

        top: 12px;
    }


    .node-erp {

        top: 75px;

        right: 0;
    }


    .node-workflow {

        right: 0;

        bottom: 70px;
    }


    .node-reports {

        bottom: 12px;
    }


    .node-api {

        bottom: 70px;

        left: 0;
    }


    .node-quotation {

        top: 75px;

        left: 0;
    }


    /* =====================================================
       INTEGRATION GRID
    ===================================================== */

    .eccrm-eco-v2-integration-grid {

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


    .eccrm-eco-v2-integration {

        min-height: 78px;
    }


    /* =====================================================
       SECURITY
    ===================================================== */

    .eccrm-eco-v2-security {

        padding: 20px;

        border-radius: 19px;
    }


    .eccrm-eco-v2-security-grid {

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


    .eccrm-eco-v2-security-card {

        min-height: 170px;
    }


    .eccrm-eco-v2-security-title {

        flex-direction: column;
    }


    .eccrm-eco-v2-security-title h3 {

        font-size: 23px;
    }


    .eccrm-eco-v2-security-badge {

        min-width: 0;
    }


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

    .eccrm-eco-v2-trust {

        justify-content: flex-start;

        gap: 10px 17px;
    }
}


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

@media (max-width: 520px) {

    .eccrm-eco-v2-container {

        width: calc(100% - 18px);
    }


    .eccrm-eco-v2-header h2 {

        font-size: 31px;

        letter-spacing: -1.7px;
    }


    .eccrm-eco-v2-network {

        min-height: 380px;
    }


    .orbit-inner {

        width: 190px;

        height: 190px;
    }


    .orbit-outer {

        width: 285px;

        height: 285px;
    }


    .eccrm-eco-v2-core {

        width: 96px;

        height: 96px;
    }


    .eccrm-eco-v2-core-inner {

        width: 74px;

        height: 74px;
    }


    .eccrm-eco-v2-core-inner strong {

        font-size: 14px;
    }


    .eccrm-eco-v2-core-inner span {

        font-size: 7px;
    }


    .eccrm-eco-v2-node {

        width: 85px;
    }


    .eccrm-eco-v2-node-icon {

        width: 43px;

        height: 43px;

        margin-bottom: 5px;
    }


    .eccrm-eco-v2-node-icon svg {

        width: 18px;

        height: 18px;
    }


    .eccrm-eco-v2-node strong {

        font-size: 13px;
    }


    .eccrm-eco-v2-node small {

        display: none;
    }


    .node-erp,
    .node-quotation {

        top: 65px;
    }


    .node-workflow,
    .node-api {

        bottom: 62px;
    }


    .eccrm-eco-v2-security-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .eccrm-eco-v2-security-card {

        min-height: 155px;

        padding: 16px 9px;
    }


    .eccrm-eco-v2-security-card h4 {

        font-size: 14px;
    }


    .eccrm-eco-v2-security-card p {

        font-size: 12px;

        min-height: 36px;
    }


    .eccrm-eco-v2-security-badge {

        padding: 10px;
    }


    .eccrm-eco-v2-security-badge small {

        display: none;
    }


    .eccrm-eco-v2-primary-btn {

        width: 100%;
    }
}


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

@media (max-width: 380px) {

    .eccrm-eco-v2-container {

        width: calc(100% - 14px);
    }


    .eccrm-eco-v2-network {

        min-height: 345px;
    }


    .orbit-inner {

        width: 170px;

        height: 170px;
    }


    .orbit-outer {

        width: 255px;

        height: 255px;
    }


    .eccrm-eco-v2-core {

        width: 86px;

        height: 86px;
    }


    .eccrm-eco-v2-core-inner {

        width: 66px;

        height: 66px;
    }


    .eccrm-eco-v2-core-inner strong {

        font-size: 12px;
    }


    .eccrm-eco-v2-core-inner span {

        font-size: 6px;
    }


    .eccrm-eco-v2-node {

        width: 70px;
    }


    .eccrm-eco-v2-node-icon {

        width: 39px;

        height: 39px;
    }


    .eccrm-eco-v2-node-icon svg {

        width: 16px;

        height: 16px;
    }


    .eccrm-eco-v2-node strong {

        font-size: 13px;
    }


    .eccrm-eco-v2-security-grid {

        grid-template-columns:
            1fr;
    }


    .eccrm-eco-v2-security-card {

        min-height: 145px;
    }
}


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

.eccrm-eco-v2 button:focus-visible,
.eccrm-eco-v2 a:focus-visible {

    outline:
        3px solid var(--eccrm-teal-30);

    outline-offset: 3px;
}


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

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

    .eccrm-ecosystem-v2 *,
    .eccrm-ecosystem-v2 *::before,
    .eccrm-ecosystem-v2 *::after {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;
    }
}

/* Integration */

/* Industries */
/* =========================================================
   ROOT / COLOR SYSTEM
========================================================= */

.eccrm-industry-section {

    --eccrm-teal: #04a49c;
    --eccrm-gray: #5b5c5c;

    position: relative;

    width: 100%;

    padding: 80px 20px;

    overflow: hidden;

    background: transparent;

    box-sizing: border-box;
}


/* =========================================================
   RESET INSIDE SECTION
========================================================= */

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

    box-sizing: border-box;
}


.eccrm-industry-section button,
.eccrm-industry-section a {

    font-family: inherit;

}


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

.eccrm-industry-container {

    width: min(1240px, 100%);

    margin: 0 auto;

    position: relative;

    z-index: 5;
}


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

.eccrm-industry-header {

    max-width: 760px;

    margin-bottom: 34px;
}


.eccrm-industry-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 13px;

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

    border-radius: 100px;

    color: var(--eccrm-teal);

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

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.eccrm-badge-dot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--eccrm-teal);

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


.eccrm-industry-header h2 {

    margin: 14px 0 8px;

    color: var(--eccrm-gray);

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

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.8px;
}


.eccrm-industry-header h2 span {

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


.eccrm-industry-header p {

    margin: 0;

    max-width: 690px;

    color: var(--eccrm-gray);

    font-size: 16px;

    line-height: 1.65;
    font-weight: 500;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.eccrm-industry-main {

    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr) minmax(330px, .75fr);

    gap: 20px;

    align-items: stretch;
}


/* =========================================================
   INDUSTRY GRID
========================================================= */

.eccrm-industry-grid {

    display: grid;

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

    gap: 10px;
}


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

.eccrm-industry-item {

    position: relative;

    min-width: 0;

    min-height: 108px;

    padding: 14px 7px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

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

    border-radius: 15px;

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

    color: var(--eccrm-gray);

    cursor: pointer;

    text-align: center;

    outline: none;

    transition:
        transform .3s cubic-bezier(.2, .8, .2, 1),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* top highlight */

.eccrm-industry-item::before {

    content: "";

    position: absolute;

    top: 0;

    left: 20px;

    right: 20px;

    height: 2px;

    border-radius: 0 0 10px 10px;

    background: transparent;

    transition:
        background .3s ease,
        left .3s ease,
        right .3s ease;
}


/* hover */

.eccrm-industry-item:hover {

    transform: translateY(-4px);

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

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

    background: rgba(255, 255, 255, .98);
}


/* active */

.eccrm-industry-item.active {

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

    background:
        linear-gradient(145deg,
            rgba(4, 164, 156, .07),
            rgba(255, 255, 255, .98));

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


.eccrm-industry-item.active::before {

    left: 0;

    right: 0;

    background: var(--eccrm-teal);
}


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

.eccrm-industry-icon {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: var(--eccrm-teal);

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

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


.eccrm-industry-item:hover .eccrm-industry-icon {

    transform:
        translateY(-2px) scale(1.06);

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


.eccrm-industry-item.active .eccrm-industry-icon {

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

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


.eccrm-industry-icon svg {

    width: 22px;

    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   INDUSTRY NAME
========================================================= */

.eccrm-industry-name {

    display: block;

    max-width: 100%;

    color: var(--eccrm-gray);

    font-size: 13px;

    line-height: 1.25;

    font-weight: 700;
}


.eccrm-industry-item.active .eccrm-industry-name {

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


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

.eccrm-industry-detail {

    position: relative;

    min-height: 100%;

    overflow: hidden;

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

    border-radius: 23px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .98),
            rgba(4, 164, 156, .07));

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

    transition:
        box-shadow .3s ease;
}


.eccrm-industry-detail:hover {

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


/* =========================================================
   DETAIL DECORATION
========================================================= */

.eccrm-industry-detail::before {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    right: -130px;

    top: -130px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 30px rgba(4, 164, 156, .025),
        0 0 0 60px rgba(4, 164, 156, .018);
}


.eccrm-industry-detail::after {

    content: "";

    position: absolute;

    width: 190px;

    height: 190px;

    left: -125px;

    bottom: -125px;

    border-radius: 50%;

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


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

.eccrm-detail-content {

    position: relative;

    z-index: 3;

    height: 100%;

    padding: 28px 27px 25px;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   DETAIL TOP
========================================================= */

.eccrm-detail-top {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;
}


.eccrm-detail-icon {

    width: 49px;

    height: 49px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: var(--eccrm-teal);

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

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


.eccrm-detail-icon svg {

    width: 25px;

    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-detail-label {

    color: var(--eccrm-teal);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.eccrm-industry-detail h3 {

    margin: 0 0 11px;

    max-width: 340px;

    color: var(--eccrm-gray);

    font-size: clamp(23px, 2vw, 30px);

    line-height: 1.08;

    letter-spacing: -.8px;

    font-weight: 800;
}


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

.eccrm-industry-detail>.eccrm-detail-content>p {

    margin: 0 0 18px;

    color: var(--eccrm-gray);

    font-size: 14px;

    line-height: 1.65;
}


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

.eccrm-detail-features {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-bottom: 21px;
}


.eccrm-detail-features>div {

    display: flex;

    align-items: flex-start;

    gap: 8px;
}


.eccrm-detail-features span {

    width: 17px;

    height: 17px;

    flex: 0 0 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--eccrm-teal);

    font-size: 9px;

    font-weight: 900;

    margin-top: 1px;
}


.eccrm-detail-features p {

    margin: 0;

    color: var(--eccrm-gray);

    font-size: 13px;

    line-height: 1.45;

    font-weight: 600;
}


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

.eccrm-detail-button {

    width: fit-content;

    max-width: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: auto;

    padding: 11px 15px;

    border-radius: 9px;

    color: #ffffff;

    background: var(--eccrm-teal);

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

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

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


.eccrm-detail-button:hover {

    transform: translateY(-3px);

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


.eccrm-detail-button svg {

    width: 15px;

    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .25s ease;
}


.eccrm-detail-button:hover svg {

    transform: translateX(4px);
}


/* =========================================================
   VIEW ALL
========================================================= */

.eccrm-industry-view-all {

    display: flex;

    justify-content: center;

    margin-top: 27px;
}


.eccrm-view-all-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 11px 17px;

    border-radius: 100px;

    color: #ffffff;

    background: var(--eccrm-teal);

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

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

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


.eccrm-view-all-button:hover {

    transform: translateY(-3px);

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


.eccrm-view-all-button svg {

    width: 15px;

    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .25s ease;
}


.eccrm-view-all-button:hover svg {

    transform: translateX(4px);
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.eccrm-industry-decoration {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;
}


.eccrm-decoration-1 {

    width: 420px;

    height: 420px;

    left: -270px;

    top: 130px;

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

    box-shadow:
        0 0 0 50px rgba(4, 164, 156, .018),
        0 0 0 100px rgba(4, 164, 156, .012);
}


.eccrm-decoration-2 {

    width: 300px;

    height: 300px;

    right: -210px;

    bottom: -150px;

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


.eccrm-industry-dots {

    position: absolute;

    width: 90px;

    height: 90px;

    opacity: .35;

    background-image:
        radial-gradient(rgba(4, 164, 156, .35) 1px,
            transparent 1px);

    background-size: 12px 12px;

    pointer-events: none;
}


.eccrm-dots-1 {

    right: 10px;

    top: 45px;
}


.eccrm-dots-2 {

    left: 30%;

    bottom: 15px;
}


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

@media (max-width: 1100px) {

    .eccrm-industry-section {

        padding: 70px 18px;
    }


    .eccrm-industry-main {

        grid-template-columns: 1fr;
    }


    .eccrm-industry-grid {

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


    .eccrm-industry-detail {

        min-height: 330px;
    }


    .eccrm-detail-content {

        padding: 27px;
    }

}


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

@media (max-width: 850px) {

    .eccrm-industry-grid {

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

        gap: 9px;
    }


    .eccrm-industry-item {

        min-height: 100px;
    }


    .eccrm-industry-header h2 {

        font-size: 38px;
    }

}


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

@media (max-width: 600px) {

    .eccrm-industry-section {

        padding: 55px 14px;
    }


    .eccrm-industry-header {

        margin-bottom: 24px;
    }


    .eccrm-industry-badge {

        font-size: 11px;

        padding: 6px 11px;
    }


    .eccrm-industry-header h2 {

        margin-top: 13px;

        font-size: 30px;

        line-height: 1.08;

        letter-spacing: -1px;
    }


    .eccrm-industry-header p {

        font-size: 13px;

        line-height: 1.6;
    }


    /* 2-column mobile grid */

    .eccrm-industry-grid {

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

        gap: 9px;
    }


    .eccrm-industry-item {

        min-height: 94px;

        padding: 12px 7px;

        border-radius: 13px;

        gap: 8px;
    }


    .eccrm-industry-icon {

        width: 39px;

        height: 39px;

        border-radius: 11px;
    }


    .eccrm-industry-icon svg {

        width: 20px;

        height: 20px;
    }


    .eccrm-industry-name {

        font-size: 13px;
    }


    /* Detail */

    .eccrm-industry-detail {

        min-height: auto;

        border-radius: 20px;
    }


    .eccrm-detail-content {

        padding: 24px 20px;
    }


    .eccrm-detail-top {

        margin-bottom: 17px;
    }


    .eccrm-detail-icon {

        width: 45px;

        height: 45px;

        border-radius: 12px;
    }


    .eccrm-detail-icon svg {

        width: 23px;

        height: 23px;
    }


    .eccrm-detail-label {

        font-size: 13px;
    }


    .eccrm-industry-detail h3 {

        font-size: 24px;

        max-width: 100%;
    }


    .eccrm-industry-detail>.eccrm-detail-content>p {

        font-size: 12px;
    }


    .eccrm-detail-features {

        gap: 8px;
    }


    .eccrm-detail-features p {

        font-size: 13px;
    }


    .eccrm-detail-button {

        width: 100%;

        padding: 12px 15px;

        font-size: 13px;
    }


    .eccrm-industry-view-all {

        margin-top: 20px;
    }


    .eccrm-view-all-button {

        width: 100%;

        font-size: 13px;
    }

}


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

@media (max-width: 380px) {

    .eccrm-industry-section {

        padding-left: 11px;

        padding-right: 11px;
    }


    .eccrm-industry-grid {

        gap: 7px;
    }


    .eccrm-industry-item {

        min-height: 88px;

        padding: 10px 5px;
    }


    .eccrm-industry-icon {

        width: 36px;

        height: 36px;
    }


    .eccrm-industry-icon svg {

        width: 18px;

        height: 18px;
    }


    .eccrm-industry-name {

        font-size: 13px;
    }


    .eccrm-industry-header h2 {

        font-size: 27px;
    }

}


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

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

    .eccrm-industry-item,
    .eccrm-industry-icon,
    .eccrm-detail-button,
    .eccrm-view-all-button,
    .eccrm-detail-button svg,
    .eccrm-view-all-button svg {

        transition: none !important;
    }

}

/* Industries */

/* Why ECCRM */
/* =========================================================
   ECCRM — WHY BUSINESSES CHOOSE ECCRM
   MODERN RESPONSIVE SECTION
   BRAND COLORS:
   #04a49c
   #5b5c5c
========================================================= */

.eccrm-choice-section {

    --eccrm-teal: #04a49c;
    --eccrm-grey: #5b5c5c;
    --eccrm-white: #ffffff;

    --teal-04: rgba(4, 164, 156, .04);
    --teal-07: rgba(4, 164, 156, .07);
    --teal-10: rgba(4, 164, 156, .10);
    --teal-15: rgba(4, 164, 156, .15);
    --teal-20: rgba(4, 164, 156, .20);
    --teal-30: rgba(4, 164, 156, .30);

    --grey-05: rgba(91, 92, 92, .05);
    --grey-08: rgba(91, 92, 92, .08);
    --grey-12: rgba(91, 92, 92, .12);
    --grey-18: rgba(91, 92, 92, .18);

    position: relative;

    width: 100%;

    padding: 50px 0;

    overflow: hidden;

    /* background: #ffffff; */

    color: var(--eccrm-grey);

    isolation: isolate;
}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.eccrm-choice-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;
}


.eccrm-choice-orb-one {

    width: 520px;

    height: 520px;

    top: -320px;

    right: -160px;

    background:
        radial-gradient(circle,
            var(--teal-10),
            transparent 68%);

    animation: eccrmChoiceOrbOne 9s ease-in-out infinite;
}


.eccrm-choice-orb-two {

    width: 420px;

    height: 420px;

    bottom: -260px;

    left: -160px;

    background:
        radial-gradient(circle,
            var(--teal-07),
            transparent 70%);

    animation: eccrmChoiceOrbTwo 11s ease-in-out infinite;
}


@keyframes eccrmChoiceOrbOne {

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

    50% {
        transform: translate3d(-25px, 25px, 0);
    }
}


@keyframes eccrmChoiceOrbTwo {

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

    50% {
        transform: translate3d(25px, -20px, 0);
    }
}


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

.eccrm-choice-container {

    width: min(1240px,
            calc(100% - 48px));

    margin: 0 auto;
}


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

.eccrm-choice-header {

    max-width: 780px;

    margin: 0 auto 48px;

    text-align: center;
}


.eccrm-choice-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    margin-bottom: 18px;

    border: 1px solid var(--teal-15);

    border-radius: 100px;

    color: var(--eccrm-teal);

    background: var(--teal-04);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.eccrm-choice-eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--eccrm-teal);

    box-shadow:
        0 0 0 5px var(--teal-10);

    animation: eccrmChoicePulse 2.2s ease-in-out infinite;
}


@keyframes eccrmChoicePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px var(--teal-10);
    }

    50% {
        box-shadow:
            0 0 0 8px var(--teal-10);
    }
}


.eccrm-choice-header h2 {

    margin: 0;

    color: var(--eccrm-grey);

    font-size: clamp(36px,
            5vw,
            48px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 850;
}


.eccrm-choice-header h2 span {

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


.eccrm-choice-header p {

    max-width: 690px;

    margin: 17px auto 0;

    color: var(--eccrm-grey);

    font-size: 16px;

    line-height: 1.7;
}


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

.eccrm-choice-grid {

    display: grid;

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

    gap: 16px;
}


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

.eccrm-choice-card {

    position: relative;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    padding: 24px;

    overflow: hidden;

    border: 1px solid var(--grey-08);

    border-radius: 22px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            var(--teal-04) 100%);

    box-shadow:
        0 12px 40px var(--grey-05);

    transform:
        translateY(20px);

    opacity: 0;

    transition:
        transform .65s cubic-bezier(.2, .8, .2, 1),
        opacity .65s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.eccrm-choice-card.is-visible {

    transform: translateY(0);

    opacity: 1;
}


.eccrm-choice-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:
        linear-gradient(90deg,
            transparent,
            var(--eccrm-teal),
            transparent);

    transform: scaleX(.15);

    transform-origin: center;

    transition:
        transform .45s ease;
}


.eccrm-choice-card:hover {

    transform:
        translateY(-8px);

    border-color: var(--teal-20);

    box-shadow:
        0 24px 65px var(--teal-10);
}


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

    transform: scaleX(1);
}


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

.eccrm-choice-featured {

    border-color: var(--teal-20);

    background:
        linear-gradient(145deg,
            #ffffff,
            var(--teal-07));

    box-shadow:
        0 18px 55px var(--teal-10);
}


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

.eccrm-choice-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 24px;
}


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

.eccrm-choice-icon {

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border: 1px solid var(--teal-15);

    border-radius: 17px;

    color: var(--eccrm-teal);

    background: var(--teal-10);

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


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

    color: #ffffff;

    background: var(--eccrm-teal);

    transform:
        rotate(-4deg) scale(1.06);

    box-shadow:
        0 12px 28px var(--teal-20);
}


.eccrm-choice-icon svg {

    width: 26px;

    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.eccrm-choice-number {

    color: var(--teal-30);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;
}


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

.eccrm-choice-content h3 {

    max-width: 280px;

    margin: 0;

    color: var(--eccrm-grey);

    font-size: 18px;

    line-height: 1.25;

    letter-spacing: -.4px;

    font-weight: 850;
}


.eccrm-choice-content p {

    max-width: 320px;

    margin: 11px 0 0;

    color: var(--eccrm-grey);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   PROOF BLOCK
========================================================= */

.eccrm-choice-proof {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    padding-top: 20px;
}


.eccrm-choice-proof strong {

    color: var(--eccrm-teal);

    font-size: 22px;

    line-height: 1;

    font-weight: 900;
}


.eccrm-choice-proof span {

    padding-left: 10px;

    border-left: 1px solid var(--grey-12);

    color: var(--eccrm-grey);

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   SALES → SERVICE → FIELD FLOW
========================================================= */

.eccrm-choice-flow {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: auto;

    padding: 11px;

    border: 1px solid var(--teal-10);

    border-radius: 12px;

    background: var(--teal-04);
}


.eccrm-choice-flow span {

    flex: 1;

    padding: 7px 4px;

    border-radius: 8px;

    color: var(--eccrm-teal);

    background: var(--teal-10);

    font-size: 13px;

    font-weight: 800;

    text-align: center;
}


.eccrm-choice-flow i {

    color: var(--eccrm-grey);

    font-size: 10px;

    font-style: normal;
}


/* =========================================================
   CONFIGURATION TAGS
========================================================= */

.eccrm-choice-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: auto;
}


.eccrm-choice-tags span {

    padding: 7px 9px;

    border: 1px solid var(--teal-10);

    border-radius: 100px;

    color: var(--eccrm-teal);

    background: var(--teal-04);

    font-size: 13px;

    font-weight: 750;
}


/* =========================================================
   INDUSTRY TAGS
========================================================= */

.eccrm-choice-industries {

    display: grid;

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

    gap: 6px;

    margin-top: auto;
}


.eccrm-choice-industries span {

    padding: 7px 8px;

    border-radius: 8px;

    color: var(--eccrm-grey);

    background: var(--teal-07);

    font-size: 13px;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   SUPPORT
========================================================= */

.eccrm-choice-support-line {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;

    padding: 11px;

    border: 1px solid var(--teal-10);

    border-radius: 11px;

    color: var(--eccrm-grey);

    background: var(--teal-04);

    font-size: 13px;

    font-weight: 700;
}


.support-check {

    width: 22px;

    height: 22px;

    flex: 0 0 22px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background: var(--eccrm-teal);

    font-size: 11px;
}


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

.eccrm-choice-bottom {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 18px;

    padding: 18px 20px;

    border: 1px solid var(--teal-15);

    border-radius: 18px;

    background:
        linear-gradient(90deg,
            var(--teal-07),
            #ffffff,
            var(--teal-04));

    box-shadow:
        0 15px 45px var(--grey-05);

    transform:
        translateY(20px);

    opacity: 0;

    transition:
        opacity .7s ease .2s,
        transform .7s ease .2s;
}


.eccrm-choice-bottom.is-visible {

    opacity: 1;

    transform: translateY(0);
}


.eccrm-choice-bottom-icon {

    width: 50px;

    height: 50px;

    flex: 0 0 50px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: var(--eccrm-teal);

    background: var(--teal-10);
}


.eccrm-choice-bottom-icon svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.eccrm-choice-bottom-content {

    flex: 1;
}


.eccrm-choice-bottom-content strong {

    display: block;

    color: var(--eccrm-grey);

    font-size: 16px;

    font-weight: 850;
}


.eccrm-choice-bottom-content span {

    display: block;

    margin-top: 4px;

    color: var(--eccrm-grey);

    font-size: 14px;
}


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

.eccrm-choice-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 45px;

    padding: 0 20px;

    border-radius: 10px;

    color: #ffffff;

    background: var(--eccrm-teal);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 12px 28px var(--teal-20);

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


.eccrm-choice-cta span {

    font-size: 15px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.eccrm-choice-cta:hover {

    color: #ffffff;

    background: var(--eccrm-grey);

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px var(--grey-18);
}


.eccrm-choice-cta:hover span {

    transform: translateX(4px);
}


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

@media (max-width: 1050px) {

    .eccrm-choice-section {

        padding: 75px 0;
    }


    .eccrm-choice-grid {

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


    .eccrm-choice-card {

        min-height: 285px;
    }
}


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

@media (max-width: 760px) {

    .eccrm-choice-container {

        width: calc(100% - 32px);
    }


    .eccrm-choice-header {

        margin-bottom: 32px;
    }


    .eccrm-choice-header h2 {

        font-size: 38px;

        letter-spacing: -1.8px;
    }


    .eccrm-choice-header p {

        font-size: 13px;
    }


    .eccrm-choice-grid {

        grid-template-columns:
            1fr;
    }


    .eccrm-choice-card {

        min-height: 250px;
    }


    .eccrm-choice-bottom {

        align-items: flex-start;

        flex-wrap: wrap;
    }


    .eccrm-choice-bottom-content {

        min-width:
            calc(100% - 75px);
    }


    .eccrm-choice-cta {

        width: 100%;
    }
}


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

@media (max-width: 520px) {

    .eccrm-choice-section {

        padding: 60px 0;
    }


    .eccrm-choice-container {

        width: calc(100% - 22px);
    }


    .eccrm-choice-eyebrow {

        font-size: 11px;

        padding: 7px 12px;
    }


    .eccrm-choice-header h2 {

        font-size: 28px;

        letter-spacing: -1.5px;
    }


    .eccrm-choice-header p {

        margin-top: 13px;

        font-size: 13px;

        line-height: 1.65;
    }


    .eccrm-choice-card {

        min-height: auto;

        padding: 20px;

        border-radius: 18px;
    }


    .eccrm-choice-card-top {

        margin-bottom: 18px;
    }


    .eccrm-choice-icon {

        width: 51px;

        height: 51px;

        border-radius: 15px;
    }


    .eccrm-choice-icon svg {

        width: 23px;

        height: 23px;
    }


    .eccrm-choice-content h3 {

        font-size: 16px;
    }


    .eccrm-choice-content p {

        font-size: 13px;

        line-height: 1.65;
    }


    .eccrm-choice-proof {

        margin-top: 22px;
    }


    .eccrm-choice-flow {

        margin-top: 22px;
    }


    .eccrm-choice-tags,
    .eccrm-choice-industries,
    .eccrm-choice-support-line {

        margin-top: 22px;
    }


    .eccrm-choice-bottom {

        gap: 13px;

        padding: 16px;
    }


    .eccrm-choice-bottom-icon {

        width: 44px;

        height: 44px;

        flex-basis: 44px;
    }


    .eccrm-choice-bottom-content {

        min-width:
            calc(100% - 60px);
    }


    .eccrm-choice-bottom-content strong {

        font-size: 13px;
    }


    .eccrm-choice-bottom-content span {

        font-size: 12px;

        line-height: 1.5;
    }
}


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

@media (max-width: 360px) {

    .eccrm-choice-section {

        padding: 50px 0;
    }


    .eccrm-choice-container {

        width: calc(100% - 16px);
    }


    .eccrm-choice-header h2 {

        font-size: 28px;
    }


    .eccrm-choice-card {

        padding: 17px;
    }


    .eccrm-choice-content h3 {

        font-size: 15px;
    }


    .eccrm-choice-content p {

        font-size: 9px;
    }


    .eccrm-choice-flow span {

        font-size: 13px;
    }


    .eccrm-choice-industries span {

        font-size: 13px;
    }
}


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

.eccrm-choice-section a:focus-visible {

    outline: 3px solid var(--teal-30);

    outline-offset: 3px;
}


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

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

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

        animation: none !important;

        transition: none !important;
    }

}

/* Why ECCRM */

/* Implementation */
/* =========================================================
   ECCRM GETTING STARTED
   COMPACT + MODERN RESPONSIVE VERSION

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

.eccrm-start-section {

    --eccrm-teal: #04a49c;
    --eccrm-grey: #5b5c5c;
    --eccrm-white: #ffffff;

    --teal-04: rgba(4, 164, 156, .04);
    --teal-06: rgba(4, 164, 156, .06);
    --teal-08: rgba(4, 164, 156, .08);
    --teal-10: rgba(4, 164, 156, .10);
    --teal-15: rgba(4, 164, 156, .15);
    --teal-20: rgba(4, 164, 156, .20);
    --teal-30: rgba(4, 164, 156, .30);

    --grey-05: rgba(91, 92, 92, .05);
    --grey-08: rgba(91, 92, 92, .08);
    --grey-12: rgba(91, 92, 92, .12);

    position: relative;

    width: 100%;

    padding: 55px 0 50px;

    overflow: hidden;

    background: #ffffff;

    color: var(--eccrm-grey);

    isolation: isolate;
}


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

.eccrm-start-glow {

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    background:
        radial-gradient(circle,
            var(--teal-08) 0%,
            transparent 70%);
}

.eccrm-start-glow-1 {

    top: -240px;

    left: -180px;
}

.eccrm-start-glow-2 {

    right: -200px;

    bottom: -250px;
}


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

.eccrm-start-container {

    width: min(1180px,
            calc(100% - 36px));

    margin: 0 auto;
}


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

.eccrm-start-header {

    max-width: 700px;

    margin: 0 auto 38px;

    text-align: center;
}


/* EYEBROW */

.eccrm-start-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 11px;

    margin-bottom: 12px;

    border: 1px solid var(--teal-15);

    border-radius: 100px;

    color: var(--eccrm-teal);

    background: var(--teal-04);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.eccrm-start-eyebrow-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--eccrm-teal);

    box-shadow:
        0 0 0 4px var(--teal-10);
}


/* HEADING */

.eccrm-start-header h2 {

    margin: 0;

    color: var(--eccrm-grey);

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

    line-height: 1.05;

    letter-spacing: -1.8px;

    font-weight: 850;
}


.eccrm-start-header h2 span {

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


/* DESCRIPTION */

.eccrm-start-header p {

    max-width: 600px;

    margin: 11px auto 0;

    color: var(--eccrm-grey);

    font-size: 15px;

    line-height: 1.55;
}


/* =========================================================
   JOURNEY
========================================================= */

.eccrm-start-journey {

    position: relative;

    display: grid;

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

    gap: 10px;

    padding-top: 27px;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.eccrm-start-line {

    position: absolute;

    top: 13px;

    left: 9%;

    width: 82%;

    height: 1px;

    background: var(--teal-15);

    overflow: visible;
}


.eccrm-start-line-progress {

    width: 100%;

    height: 100%;

    background: var(--eccrm-teal);

    transform-origin: left center;

    animation:
        eccrmCompactProgress 3s ease-out forwards;
}


@keyframes eccrmCompactProgress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


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

.eccrm-start-step {

    position: relative;

    min-width: 0;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity .55s ease,
        transform .55s ease;
}


.eccrm-start-step.visible {

    opacity: 1;

    transform:
        translateY(0);
}


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

.eccrm-start-step-number {

    position: absolute;

    top: -27px;

    left: 50%;

    z-index: 5;

    width: 28px;

    height: 28px;

    display: grid;

    place-items: center;

    transform:
        translateX(-50%);

    border: 1px solid var(--teal-20);

    border-radius: 50%;

    color: var(--eccrm-teal);

    background: #ffffff;

    box-shadow:
        0 4px 14px var(--teal-10);

    font-size: 7px;

    font-weight: 900;

    transition:
        .3s ease;
}


.eccrm-start-step.active .eccrm-start-step-number {

    color: #ffffff;

    background: var(--eccrm-teal);

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

    box-shadow:
        0 0 0 4px var(--teal-10),
        0 6px 18px var(--teal-20);
}


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

.eccrm-start-step-card {

    position: relative;

    min-height: 220px;

    display: flex;

    flex-direction: column;

    padding: 17px 15px;

    overflow: hidden;

    border: 1px solid var(--grey-08);

    border-radius: 14px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            var(--teal-04) 100%);

    box-shadow:
        0 7px 24px var(--grey-05);

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


.eccrm-start-step-card::after {

    content: "";

    position: absolute;

    right: -35px;

    bottom: -45px;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            var(--teal-10),
            transparent 70%);

    pointer-events: none;
}


.eccrm-start-step:hover .eccrm-start-step-card {

    transform:
        translateY(-5px);

    border-color:
        var(--teal-20);

    box-shadow:
        0 15px 35px var(--teal-10);
}


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

.eccrm-start-step-icon {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    margin-bottom: 11px;

    border: 1px solid var(--teal-15);

    border-radius: 10px;

    color: var(--eccrm-teal);

    background: var(--teal-08);

    transition:
        .3s ease;
}


.eccrm-start-step:hover .eccrm-start-step-icon {

    color: #ffffff;

    background: var(--eccrm-teal);

    transform:
        scale(1.05);
}


.eccrm-start-step-icon svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.eccrm-start-step-label {

    margin-bottom: 4px;

    color: var(--eccrm-teal);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .7px;
}


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

.eccrm-start-step-card h3 {

    max-width: 160px;

    margin: 0;

    color: var(--eccrm-grey);

    font-size: 14px;

    line-height: 1.22;

    letter-spacing: -.2px;

    font-weight: 850;
}


.eccrm-start-step-card h3 span {

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


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

.eccrm-start-step-card p {

    margin: 7px 0 0;

    color: var(--eccrm-grey);

    font-size: 13px;

    line-height: 1.55;
}


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

.eccrm-start-support {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 14px;

    padding: 11px 14px;

    border: 1px solid var(--teal-15);

    border-radius: 12px;

    background:
        linear-gradient(90deg,
            var(--teal-06),
            #ffffff);

    box-shadow:
        0 7px 25px var(--grey-05);

    opacity: 0;

    transform:
        translateY(10px);

    transition:
        opacity .6s ease,
        transform .6s ease;
}


.eccrm-start-support.visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* SUPPORT ICON */

.eccrm-start-support-icon {

    width: 37px;

    height: 37px;

    flex: 0 0 37px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: var(--eccrm-teal);

    background: var(--teal-10);
}


.eccrm-start-support-icon svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* SUPPORT CONTENT */

.eccrm-start-support-content {

    flex: 1;

    min-width: 0;
}


.eccrm-start-support-content>span {

    display: block;

    color: var(--eccrm-teal);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .7px;
}


.eccrm-start-support-content strong {

    display: block;

    margin-top: 2px;

    color: var(--eccrm-grey);

    font-size: 15px;

    font-weight: 850;
}


.eccrm-start-support-content p {

    margin: 2px 0 0;

    color: var(--eccrm-grey);

    font-size: 12px;

    line-height: 1.4;
}


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

.eccrm-start-support-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 34px;

    padding: 0 15px;

    border-radius: 8px;

    color: #ffffff;

    background: var(--eccrm-teal);

    text-decoration: none;

    font-size: 11px;

    font-weight: 850;

    white-space: nowrap;

    box-shadow:
        0 7px 18px var(--teal-20);

    transition:
        .3s ease;
}


.eccrm-start-support-btn span {

    font-size: 12px;

    transition:
        transform .3s ease;
}


.eccrm-start-support-btn:hover {

    color: #ffffff;

    background: var(--eccrm-grey);

    transform:
        translateY(-2px);
}


.eccrm-start-support-btn:hover span {

    transform:
        translateX(3px);
}


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

@media (max-width: 1050px) {

    .eccrm-start-section {

        padding: 50px 0 45px;
    }

    .eccrm-start-container {

        width:
            calc(100% - 32px);
    }

    .eccrm-start-journey {

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

        row-gap: 45px;

        padding-top: 27px;
    }

    .eccrm-start-line {

        display: none;
    }

    .eccrm-start-step-card {

        min-height: 205px;
    }
}


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

@media (max-width: 760px) {

    .eccrm-start-section {

        padding: 45px 0;
    }

    .eccrm-start-container {

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

    .eccrm-start-header {

        margin-bottom: 32px;
    }

    .eccrm-start-header h2 {

        font-size: 34px;

        letter-spacing: -1.4px;
    }

    .eccrm-start-header p {

        font-size: 13px;
    }

    /* Vertical journey */

    .eccrm-start-journey {

        display: flex;

        flex-direction: column;

        gap: 10px;

        padding: 0 0 0 40px;
    }

    .eccrm-start-journey::before {

        content: "";

        position: absolute;

        top: 14px;

        bottom: 14px;

        left: 15px;

        width: 1px;

        background:
            var(--teal-15);
    }

    .eccrm-start-line {

        display: block;

        top: 14px;

        bottom: 14px;

        left: 15px;

        width: 1px;

        height: auto;

        background:
            var(--teal-15);
    }

    .eccrm-start-line-progress {

        width: 100%;

        height: 100%;

        transform-origin:
            top center;

        animation:
            eccrmMobileProgress 3s ease-out forwards;
    }

    @keyframes eccrmMobileProgress {

        from {
            transform: scaleY(0);
        }

        to {
            transform: scaleY(1);
        }
    }

    .eccrm-start-step {

        width: 100%;
    }

    .eccrm-start-step-number {

        top: 20px;

        left: -40px;

        width: 29px;

        height: 29px;

        transform:
            translateY(-50%);
    }

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

        transform:
            translateY(-50%) scale(1.08);
    }

    .eccrm-start-step-card {

        min-height: auto;

        padding: 16px;

        border-radius: 13px;
    }

    .eccrm-start-step-icon {

        width: 37px;

        height: 37px;

        margin-bottom: 9px;
    }

    .eccrm-start-step-card h3 {

        font-size: 13px;
    }

    .eccrm-start-step-card p {

        max-width: 600px;

        font-size: 12px;
    }

    /* CTA */

    .eccrm-start-support {

        flex-wrap: wrap;

        margin-top: 14px;
    }

    .eccrm-start-support-content {

        min-width:
            calc(100% - 60px);
    }

    .eccrm-start-support-btn {

        width: 100%;
    }
}


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

@media (max-width: 520px) {

    .eccrm-start-section {

        padding: 40px 0;
    }

    .eccrm-start-container {

        width:
            calc(100% - 20px);
    }

    .eccrm-start-header {

        margin-bottom: 28px;
    }

    .eccrm-start-eyebrow {

        padding: 5px 9px;

        margin-bottom: 10px;

        font-size: 11px;
    }

    .eccrm-start-eyebrow-dot {

        width: 5px;

        height: 5px;
    }

    .eccrm-start-header h2 {

        font-size: 29px;

        line-height: 1.08;

        letter-spacing: -1.2px;
    }

    .eccrm-start-header p {

        margin-top: 9px;

        font-size: 12px;

        line-height: 1.5;
    }

    .eccrm-start-journey {

        padding-left: 35px;

        gap: 9px;
    }

    .eccrm-start-journey::before {

        left: 13px;
    }

    .eccrm-start-line {

        left: 13px;
    }

    .eccrm-start-step-number {

        left: -35px;

        width: 27px;

        height: 27px;

        font-size: 6px;
    }

    .eccrm-start-step-card {

        padding: 14px;

        border-radius: 12px;
    }

    .eccrm-start-step-icon {

        width: 34px;

        height: 34px;

        margin-bottom: 8px;

        border-radius: 9px;
    }

    .eccrm-start-step-icon svg {

        width: 16px;

        height: 16px;
    }

    .eccrm-start-step-label {

        font-size: 10px;
    }

    .eccrm-start-step-card h3 {

        font-size: 13px;
    }

    .eccrm-start-step-card p {

        margin-top: 5px;

        font-size: 12px;

        line-height: 1.5;
    }

    .eccrm-start-support {

        padding: 11px;

        gap: 9px;

        border-radius: 11px;
    }

    .eccrm-start-support-icon {

        width: 34px;

        height: 34px;

        flex-basis: 34px;

        border-radius: 9px;
    }

    .eccrm-start-support-icon svg {

        width: 16px;

        height: 16px;
    }

    .eccrm-start-support-content {

        min-width:
            calc(100% - 45px);
    }

    .eccrm-start-support-content>span {

        font-size: 10px;
    }

    .eccrm-start-support-content strong {

        font-size: 13px;
    }

    .eccrm-start-support-content p {

        font-size: 12px;
        font-weight: 500;
    }

    .eccrm-start-support-btn {

        min-height: 32px;

        font-size: 11px;
    }
}


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

@media (max-width: 360px) {

    .eccrm-start-section {

        padding: 35px 0;
    }

    .eccrm-start-container {

        width:
            calc(100% - 14px);
    }

    .eccrm-start-header h2 {

        font-size: 26px;
    }

    .eccrm-start-header p {

        font-size: 12px;
    }

    .eccrm-start-journey {

        padding-left: 32px;
    }

    .eccrm-start-journey::before {

        left: 12px;
    }

    .eccrm-start-line {

        left: 12px;
    }

    .eccrm-start-step-number {

        left: -32px;

        width: 25px;

        height: 25px;
    }

    .eccrm-start-step-card {

        padding: 12px;
    }

    .eccrm-start-step-card h3 {

        font-size: 13px;
    }

    .eccrm-start-step-card p {

        font-size: 12px;
    }
}


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

.eccrm-start-section a:focus-visible {

    outline:
        2px solid var(--eccrm-teal);

    outline-offset: 3px;
}


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

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

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

        animation: none !important;

        transition: none !important;
    }
}

/* Implementation */

/* FAQ */
/* ==========================================
   ECCRM FAQ SECTION
   Brand Colors:
   #04A49C
   #5B5C5C
========================================== */

.eccrm-faq {
    width: 100%;
    padding: 80px 20px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

.eccrm-faq *,
.eccrm-faq *::before,
.eccrm-faq *::after {
    box-sizing: border-box;
}


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

.eccrm-faq-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}


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

.eccrm-faq-header {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}


/* Badge */

.eccrm-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 13px;

    border: 1px solid rgba(4, 164, 156, 0.25);
    border-radius: 30px;

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

    color: #04a49c;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* Badge Dot */

.eccrm-faq-badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #04a49c;

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


/* Heading */

.eccrm-faq-header h2 {
    margin: 18px 0 12px;

    color: #5b5c5c;

    font-family: inherit;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -1.4px;
}


/* Teal heading portion */

.eccrm-faq-header h2 span {
    display: inline;
    color: #04a49c;
}


/* Description */

.eccrm-faq-header p {
    max-width: 650px;

    margin: 0 auto;

    color: #5b5c5c;

    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;

    opacity: 0.82;
}


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

.eccrm-faq-list {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ==========================================
   FAQ ITEM
========================================== */

.eccrm-faq-item {
    width: 100%;

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

    border-radius: 13px;

    background: #ffffff;

    overflow: hidden;

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


/* Hover */

.eccrm-faq-item:hover {
    border-color: rgba(4, 164, 156, 0.30);

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

    transform: translateY(-1px);
}


/* Active */

.eccrm-faq-item.active {
    border-color: rgba(4, 164, 156, 0.40);

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


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

.eccrm-faq-question {
    width: 100%;

    min-height: 68px;

    padding: 12px 17px;

    border: 0;
    outline: 0;

    background: #ffffff;

    display: grid;

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

    align-items: center;

    gap: 12px;

    cursor: pointer;

    text-align: left;

    color: #5b5c5c;

    font-family: inherit;
}


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

.eccrm-faq-number {
    width: 36px;
    height: 36px;

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

    border-radius: 9px;

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

    color: #04a49c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


/* Active number */

.eccrm-faq-item.active .eccrm-faq-number {
    background: #04a49c;
    color: #ffffff;
}


/* ==========================================
   QUESTION TEXT
========================================== */

.eccrm-faq-question-text {
    min-width: 0;

    color: #5b5c5c;

    font-size: 14px;
    line-height: 1.45;
    font-weight: 650;

    transition: color 0.25s ease;
}


/* Active question */

.eccrm-faq-item.active .eccrm-faq-question-text {
    color: #04a49c;
}


/* ==========================================
   PLUS / MINUS ICON
========================================== */

.eccrm-faq-icon {
    position: relative;

    width: 30px;
    height: 30px;

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

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

    border-radius: 7px;

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

    flex-shrink: 0;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.3s ease;
}


/* Horizontal line */

.eccrm-faq-icon span:first-child {
    position: absolute;

    width: 10px;
    height: 1.5px;

    background: #04a49c;

    border-radius: 10px;
}


/* Vertical line */

.eccrm-faq-icon span:last-child {
    position: absolute;

    width: 1.5px;
    height: 10px;

    background: #04a49c;

    border-radius: 10px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Active icon */

.eccrm-faq-item.active .eccrm-faq-icon {
    background: #04a49c;
    border-color: #04a49c;

    transform: rotate(0deg);
}


/* Active icon minus */

.eccrm-faq-item.active .eccrm-faq-icon span:last-child {
    opacity: 0;
    transform: scaleY(0);
}


.eccrm-faq-item.active .eccrm-faq-icon span:first-child {
    background: #ffffff;
}


/* ==========================================
   ANSWER
========================================== */

.eccrm-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.35s ease;
}


/* Active answer */

.eccrm-faq-item.active .eccrm-faq-answer {
    grid-template-rows: 1fr;
}


/* ==========================================
   ANSWER INNER
========================================== */

.eccrm-faq-answer-inner {
    min-height: 0;
    overflow: hidden;

    padding: 0 70px;

    transition:
        padding 0.35s ease;
}


/* Active answer inner */

.eccrm-faq-item.active .eccrm-faq-answer-inner {
    padding-top: 0;
    padding-bottom: 20px;
}


/* Answer paragraph */

.eccrm-faq-answer-inner p {
    max-width: 800px;

    margin: 0;

    color: #5b5c5c;

    font-size: 13px;
    line-height: 1.75;
    font-weight: 400;

    opacity: 0.85;
}


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

.eccrm-faq-question:focus-visible {
    outline: 2px solid #04a49c;
    outline-offset: -3px;

    border-radius: 12px;
}


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

@media (max-width: 768px) {

    .eccrm-faq {
        padding: 65px 18px;
    }

    .eccrm-faq-header {
        margin-bottom: 32px;
    }

    .eccrm-faq-header h2 {
        font-size: clamp(29px, 6vw, 38px);
        letter-spacing: -1px;
    }

    .eccrm-faq-header p {
        font-size: 13px;
        line-height: 1.65;
    }

    .eccrm-faq-list {
        gap: 8px;
    }

    .eccrm-faq-question {
        min-height: 62px;

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

        gap: 10px;

        padding: 11px 13px;
    }

    .eccrm-faq-number {
        width: 32px;
        height: 32px;

        font-size: 10px;
        border-radius: 8px;
    }

    .eccrm-faq-question-text {
        font-size: 14px;
    }

    .eccrm-faq-icon {
        width: 28px;
        height: 28px;
    }

    .eccrm-faq-answer-inner {
        padding-left: 58px;
        padding-right: 45px;
    }

    .eccrm-faq-item.active .eccrm-faq-answer-inner {
        padding-bottom: 17px;
    }

    .eccrm-faq-answer-inner p {
        font-size: 12.5px;
        line-height: 1.7;
    }
}


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

@media (max-width: 520px) {

    .eccrm-faq {
        padding: 52px 14px;
    }

    .eccrm-faq-header {
        margin-bottom: 27px;
    }

    .eccrm-faq-badge {
        padding: 6px 11px;

        font-size: 11px;
        letter-spacing: 0.65px;
    }

    .eccrm-faq-badge-dot {
        width: 6px;
        height: 6px;
    }

    .eccrm-faq-header h2 {
        margin-top: 15px;
        margin-bottom: 10px;

        font-size: 28px;
        line-height: 1.1;

        letter-spacing: -0.8px;
    }

    .eccrm-faq-header h2 span {
        display: block;
    }

    .eccrm-faq-header p {
        font-size: 12px;
        line-height: 1.65;
    }

    .eccrm-faq-list {
        gap: 7px;
    }

    .eccrm-faq-item {
        border-radius: 11px;
    }

    .eccrm-faq-question {
        min-height: 58px;

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

        gap: 9px;

        padding: 10px 10px;
    }

    .eccrm-faq-number {
        width: 30px;
        height: 30px;

        font-size: 9px;

        border-radius: 7px;
    }

    .eccrm-faq-question-text {
        font-size: 13px;
        line-height: 1.4;
    }

    .eccrm-faq-icon {
        width: 27px;
        height: 27px;

        border-radius: 6px;
    }

    .eccrm-faq-answer-inner {
        padding-left: 49px;
        padding-right: 20px;
    }

    .eccrm-faq-item.active .eccrm-faq-answer-inner {
        padding-bottom: 16px;
    }

    .eccrm-faq-answer-inner p {
        font-size: 12px;
        line-height: 1.7;
    }
}


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

@media (max-width: 360px) {

    .eccrm-faq {
        padding: 45px 10px;
    }

    .eccrm-faq-header h2 {
        font-size: 26px;
    }

    .eccrm-faq-header p {
        font-size: 11px;
    }

    .eccrm-faq-question {
        grid-template-columns:
            27px minmax(0, 1fr) 26px;

        gap: 7px;

        padding: 9px 8px;
    }

    .eccrm-faq-number {
        width: 27px;
        height: 27px;

        font-size: 8px;
    }

    .eccrm-faq-question-text {
        font-size: 12px;
    }

    .eccrm-faq-icon {
        width: 25px;
        height: 25px;
    }

    .eccrm-faq-answer-inner {
        padding-left: 42px;
        padding-right: 15px;
    }

    .eccrm-faq-answer-inner p {
        font-size: 11px;
    }
}


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

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

    .eccrm-faq-item,
    .eccrm-faq-icon,
    .eccrm-faq-number,
    .eccrm-faq-question-text,
    .eccrm-faq-answer,
    .eccrm-faq-answer-inner {
        transition: none !important;
    }
}

/* FAQ */

/* Final CTA */

/* =========================================================
   ECCRM PREMIUM DEMO SECTION
   RESPONSIVE CSS
========================================================= */


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

.eccrm-enquiry-section {

    width: 100%;

    padding: 70px 20px;

    background: #ffffff;

    overflow: hidden;
}


/* Prevent inherited styles from breaking the component */

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

    box-sizing: border-box;
}


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

.eccrm-enquiry-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   SINGLE UNIFIED CARD
========================================================= */

.eccrm-enquiry-card {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(390px, 0.78fr) minmax(600px, 1.22fr);

    overflow: hidden;

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

    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 25px 65px rgba(91, 92, 92, 0.12);
}


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

.eccrm-enquiry-intro {

    position: relative;

    min-width: 0;

    min-height: 590px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding: 25px 34px 30px;

    background:
        linear-gradient(145deg,
            #04a49c 0%,
            #04a49c 60%,
            #5b5c5c 100%);
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.eccrm-intro-decoration {

    position: absolute;

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

    border-radius: 50%;

    pointer-events: none;
}


.eccrm-decoration-one {

    width: 470px;

    height: 470px;

    top: -250px;

    left: -250px;
}


.eccrm-decoration-two {

    width: 350px;

    height: 350px;

    top: -185px;

    left: -185px;
}


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

.eccrm-intro-image {

    position: relative;

    z-index: 3;

    width: 100%;

    height: 285px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 5px;
}


.eccrm-intro-image img {

    display: block;

    width: 100%;

    max-width: 480px;

    height: 285px;

    object-fit: contain;

    object-position: center;

    filter:
        drop-shadow(0 18px 25px rgba(91, 92, 92, 0.18));

    transition:
        transform 0.35s ease;
}


.eccrm-enquiry-card:hover .eccrm-intro-image img {

    transform:
        translateY(-4px) scale(1.015);
}


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

.eccrm-intro-content {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 460px;

    margin-top: auto;
}


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

.eccrm-intro-badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 11px;

    margin-bottom: 11px;

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

    border-radius: 30px;

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

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    backdrop-filter: blur(8px);
}


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

.eccrm-intro-content h2 {

    margin: 0 0 12px;

    color: #ffffff;

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

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -1.4px;
}


.eccrm-intro-content h2 strong {

    display: block;

    color: #ffffff;

    font-weight: 800;
}


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

.eccrm-intro-content>p {

    max-width: 420px;

    margin: 0 0 18px;

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

    font-size: 13px;

    line-height: 1.65;
}


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

.eccrm-intro-points {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.eccrm-intro-point {

    display: flex;

    align-items: center;

    gap: 8px;
}


.eccrm-intro-point>span {

    width: 19px;

    height: 19px;

    flex: 0 0 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: #ffffff;

    font-size: 9px;

    font-weight: 800;
}


.eccrm-intro-point p {

    margin: 0;

    color: #ffffff;

    font-size: 13px;

    font-weight: 650;
}


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

.eccrm-intro-bottom {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    padding-top: 13px;

    border-top:
        1px solid rgba(255, 255, 255, 0.16);

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

    font-size: 12px;
}


.eccrm-intro-arrow {

    width: 22px;

    height: 22px;

    flex: 0 0 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

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

    color: #ffffff;

    font-size: 12px;
}


/* =========================================================
   FORM AREA
========================================================= */

.eccrm-enquiry-form {

    min-width: 0;

    padding:
        29px 90px 25px;

    background: #ffffff;
}


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

.eccrm-form-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 13px;

    margin-bottom: 15px;

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


.eccrm-form-label {

    color: #04a49c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.eccrm-form-top h3 {

    margin: 5px 0 0;

    color: #5b5c5c;

    font-size: 22px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -0.5px;
}


.eccrm-form-number {

    width: 31px;

    height: 31px;

    flex: 0 0 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

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

    color: #04a49c;

    font-size: 8px;

    font-weight: 800;
}


/* =========================================================
   FORM GRID
========================================================= */

.eccrm-form-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin-bottom: 9px;
}


/* =========================================================
   FIELD
========================================================= */

.eccrm-field {

    min-width: 0;
}


.eccrm-full-field {

    margin-bottom: 9px;
}


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

.eccrm-field label {

    display: block;

    margin-bottom: 6px;

    color: #252b2b;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 500;
}


.eccrm-field label span {

    color: #04a49c;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.eccrm-field input,
.eccrm-field select,
.eccrm-field textarea {

    width: 100%;

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

    border-radius: 7px;

    outline: none;

    background: #ffffff;

    color: #252b2b;

    font-family: inherit;

    font-size: 13px;

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


.eccrm-field input,
.eccrm-field select {

    height: 34px;

    padding:
        0 10px;
}


.eccrm-field textarea {

    height: 42px;

    min-height: 42px;

    padding:
        7px 10px;

    resize: vertical;

    line-height: 1.4;
}


.eccrm-field input::placeholder,
.eccrm-field textarea::placeholder {

    color: #5b5c5c;

    opacity: 0.45;
}


.eccrm-field input:hover,
.eccrm-field select:hover,
.eccrm-field textarea:hover {

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


.eccrm-field input:focus,
.eccrm-field select:focus,
.eccrm-field textarea:focus {

    border-color: #04a49c;

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

    box-shadow:
        0 0 0 3px rgba(4, 164, 156, 0.07);
}


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

.eccrm-phone-field {

    display: grid;

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

    gap: 5px;
}


.eccrm-phone-field select {

    padding:
        0 4px;

    font-size: 13px;
}


/* =========================================================
   CAPTCHA
========================================================= */

.eccrm-captcha-row {

    display: grid;

    grid-template-columns:
        115px minmax(100px, 1fr) 125px;

    gap: 7px;

    align-items: center;

    margin-top: 3px;
}


.eccrm-captcha-code {

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 6px 0 10px;

    border:
        1px dashed rgba(4, 164, 156, 0.35);

    border-radius: 8px;

    background:
        rgba(4, 164, 156, 0.035);
}


.eccrm-captcha-code strong {

    color: #5b5c5c;

    font-size: 14px;

    letter-spacing: 2px;
}


.eccrm-captcha-code button {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

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

    border-radius: 6px;

    background: #ffffff;

    color: #04a49c;

    font-size: 14px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.eccrm-captcha-code button:hover {

    background: #04a49c;

    color: #ffffff;
}


/* CAPTCHA INPUT */

#eccrmCaptchaInput {

    width: 100%;

    height: 40px;

    padding:
        0 10px;

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

    border-radius: 8px;

    outline: none;

    color: #252b2b;

    font-family: inherit;

    font-size: 13px;
}


#eccrmCaptchaInput:focus {

    border-color: #04a49c;

    box-shadow:
        0 0 0 3px rgba(4, 164, 156, 0.07);
}


/* VALIDATE */

.eccrm-validate-btn {

    height: 40px;

    border:
        1px solid #04a49c;

    border-radius: 8px;

    background: #ffffff;

    color: #04a49c;

    font-family: inherit;

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.eccrm-validate-btn:hover {

    background: #04a49c;

    color: #ffffff;

    transform:
        translateY(-1px);
}


/* =========================================================
   CAPTCHA MESSAGE
========================================================= */

.eccrm-captcha-message {

    min-height: 12px;

    margin: 10px 0px;

    color: red !important;

    font-size: 12px;

    font-weight: 500;
}


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

.eccrm-send-btn {

    width: 100%;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0 6px 0 14px;

    margin-top: 4px;

    border: 0;

    border-radius: 7px;

    background: #04a49c;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

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

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


.eccrm-send-btn:hover {

    /* background: #5b5c5c; */

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 24px rgba(91, 92, 92, 0.16);
}


.eccrm-send-arrow {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    /* background:
        rgba(255, 255, 255, 0.15); */

    font-size: 13px;

    transition:
        transform 0.2s ease;
}


.eccrm-send-btn:hover .eccrm-send-arrow {

    transform:
        translateX(3px);
}


/* =========================================================
   SECURITY
========================================================= */

.eccrm-form-security {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin-top: 7px;

    color: #5b5c5c;

    font-size: 10px;

    line-height: 1.35;

    text-align: center;

    opacity: 0.55;
}


.eccrm-form-security span:first-child {

    color: #04a49c;

    font-size: 8px;
}


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

@media (max-width: 1100px) {

    .eccrm-enquiry-container {

        max-width: 1000px;
    }


    .eccrm-enquiry-card {

        grid-template-columns:
            minmax(330px, 0.72fr) minmax(560px, 1.28fr);
    }


    .eccrm-enquiry-intro {

        padding-left: 25px;

        padding-right: 25px;
    }


    .eccrm-intro-image img {

        max-width: 420px;
    }


    .eccrm-enquiry-form {

        padding-left: 25px;

        padding-right: 25px;
    }


    .eccrm-captcha-row {

        grid-template-columns:
            105px minmax(100px, 1fr) 115px;
    }

}


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

@media (max-width: 900px) {

    .eccrm-enquiry-section {

        padding:
            55px 18px;
    }


    .eccrm-enquiry-card {

        grid-template-columns: 1fr;
    }


    /* INTRO */

    .eccrm-enquiry-intro {

        min-height: 440px;

        padding:
            20px 30px 30px;
    }


    .eccrm-intro-image {

        height: 245px;

        margin-bottom: 10px;
    }


    .eccrm-intro-image img {

        width: 100%;

        max-width: 470px;

        height: 245px;
    }


    .eccrm-intro-content {

        max-width: 650px;

        margin:
            0 auto;
    }


    .eccrm-intro-content h2 {

        font-size: 34px;
    }


    .eccrm-intro-content>p {

        max-width: 570px;
    }


    /* FORM */

    .eccrm-enquiry-form {

        padding:
            30px 35px 28px;
    }


    .eccrm-form-grid {

        gap: 11px;
    }

}


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

@media (max-width: 600px) {

    .eccrm-enquiry-section {

        padding:
            42px 12px;
    }


    .eccrm-enquiry-card {

        border-radius: 18px;
    }


    /* INTRO */

    .eccrm-enquiry-intro {

        min-height: auto;

        padding:
            15px 18px 25px;

        align-items: center;

        text-align: center;
    }


    .eccrm-intro-image {

        width: 100%;

        height: 195px;

        margin:
            0 0 4px;
    }


    .eccrm-intro-image img {

        width: 100%;

        max-width: 330px;

        height: 195px;
    }


    .eccrm-intro-content {

        width: 100%;

        max-width: 450px;
    }


    .eccrm-intro-badge {

        font-size: 7px;

        padding:
            5px 9px;
    }


    .eccrm-intro-content h2 {

        margin-bottom: 11px;

        font-size: 28px;

        line-height: 1.05;

        letter-spacing: -0.8px;
    }


    .eccrm-intro-content>p {

        margin:
            0 auto 17px;

        font-size: 13px;

        line-height: 1.6;
        font-weight: 500;
    }


    .eccrm-intro-points {

        width: fit-content;

        margin:
            0 auto;

        align-items: flex-start;

        text-align: left;

        gap: 7px;
    }


    .eccrm-intro-point p {

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


    .eccrm-intro-bottom {

        justify-content: center;

        margin-top: 17px;

        font-size: 7.5px;
    }


    /* FORM */

    .eccrm-enquiry-form {

        padding:
            23px 15px 20px;
    }


    .eccrm-form-top {

        margin-bottom: 14px;
    }


    .eccrm-form-top h3 {

        font-size: 20px;
    }


    .eccrm-form-label {

        font-size: 7px;
    }


    .eccrm-form-number {

        width: 28px;

        height: 28px;

        flex-basis: 28px;
    }


    .eccrm-form-grid {

        grid-template-columns: 1fr;

        gap: 9px;

        margin-bottom: 9px;
    }


    .eccrm-full-field {

        margin-bottom: 9px;
    }


    .eccrm-field label {

        font-size: 13px;
    }


    .eccrm-field input,
    .eccrm-field select {

        height: 39px;

        font-size: 13px;
    }


    .eccrm-field textarea {

        height: 50px;

        min-height: 50px;
    }


    /* CAPTCHA */

    .eccrm-captcha-row {

        grid-template-columns:
            1fr 1fr;

        gap: 7px;
    }


    .eccrm-captcha-code,
    #eccrmCaptchaInput {

        height: 40px;
    }


    .eccrm-validate-btn {

        grid-column:
            1 / -1;

        height: 40px;
    }


    .eccrm-send-btn {

        height: 43px;
    }

}


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

@media (max-width: 400px) {

    .eccrm-enquiry-section {

        padding:
            35px 8px;
    }


    .eccrm-enquiry-card {

        border-radius: 16px;
    }


    .eccrm-enquiry-intro {

        padding:
            12px 14px 22px;
    }


    .eccrm-intro-image {

        height: 165px;
    }


    .eccrm-intro-image img {

        max-width: 285px;

        height: 165px;
    }


    .eccrm-intro-content h2 {

        font-size: 25px;
    }


    .eccrm-intro-content>p {

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


    .eccrm-intro-point p {

        font-size: 13px;
    }


    .eccrm-enquiry-form {

        padding:
            21px 11px 18px;
    }


    .eccrm-form-top h3 {

        font-size: 18px;
    }


    .eccrm-field input,
    .eccrm-field select {

        height: 38px;

        font-size: 12px;
    }


    .eccrm-field textarea {

        height: 48px;
    }


    /*
       CAPTCHA becomes completely vertical
       on very small screens.
    */

    .eccrm-captcha-row {

        grid-template-columns: 1fr;

        gap: 7px;
    }


    .eccrm-validate-btn {

        grid-column: auto;
    }


    .eccrm-form-security {

        font-size: 6px;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .eccrm-intro-content h2 {

        font-size: 23px;
    }


    .eccrm-intro-image {

        height: 150px;
    }


    .eccrm-intro-image img {

        height: 150px;
    }


    .eccrm-form-top h3 {

        font-size: 17px;
    }

}


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

.eccrm-enquiry-section button:focus-visible,
.eccrm-enquiry-section input:focus-visible,
.eccrm-enquiry-section select:focus-visible,
.eccrm-enquiry-section textarea:focus-visible {

    outline: #04a49c;

    /* outline-offset: 2px; */
}




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

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

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

        transition: none !important;

        animation: none !important;
    }

}

/* Final CTA */