/*==================================================
WHY US
==================================================*/

.sidv-why-us {

    --why-primary:
        var(--sidv-primary, #FF9800);

    --why-dark:
        var(--sidv-secondary, #0D2137);

    --why-text:
        #667085;

    --why-border:
        #E7EDF3;

    --why-surface:
        #F7F9FC;

    --why-white:
        #FFFFFF;

    --why-radius:
        18px;

    position: relative;

    padding:
        4.5rem 0;

    background:
        #FFFFFF;

    overflow: hidden;

}


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

.sidv-why-us__header {

    width: 100%;

    max-width:
        760px;

    margin:
        0 auto 3.5rem;

    text-align:
        center;

}


.sidv-why-us__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    margin-bottom:
        .95rem;

    padding:
        .5rem 1rem;

    border:
        1px solid
        rgba(255, 152, 0, .14);

    border-radius:
        999px;

    background:
        rgba(255, 152, 0, .08);

    color:
        var(--why-primary);

    font-size:
        .72rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.sidv-why-us__title {

    margin:
        0;

    color:
        var(--why-dark);

    font-size:
        clamp(
            2.1rem,
            4vw,
            3.15rem
        );

    font-weight:
        900;

    line-height:
        1.1;

    letter-spacing:
        -.035em;

    text-wrap:
        balance;

}


.sidv-why-us__description {

    width:
        100%;

    max-width:
        650px;

    margin:
        1.2rem auto 0;

    color:
        var(--why-text);

    font-size:
        1.02rem;

    line-height:
        1.75;

}


/*==================================================
STATS
==================================================*/

.sidv-why-us__stats {

    display:
        grid;

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

    gap:
        1rem;

    margin-bottom:
        3.5rem;

}


.sidv-why-us__stat {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        120px;

    padding:
        1.35rem 1rem;

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

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

    background:
        var(--why-white);

    text-align:
        center;

    opacity:
        0;

    transform:
        translateY(18px);

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

}


.sidv-why-us__stat.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.sidv-why-us__stat:hover {

    border-color:
        rgba(255, 152, 0, .45);

    transform:
        translateY(-4px);

    box-shadow:
        0 14px 32px
        rgba(13, 33, 55, .07);

}


.sidv-why-us__stat-number {

    display:
        block;

    color:
        var(--why-dark);

    font-size:
        clamp(
            2rem,
            3vw,
            2.55rem
        );

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.03em;

}


.sidv-why-us__stat-label {

    display:
        block;

    margin-top:
        .6rem;

    color:
        var(--why-text);

    font-size:
        .9rem;

    font-weight:
        500;

    line-height:
        1.4;

}


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

.sidv-why-us__wrapper {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(280px, .9fr);

    gap:
        2rem;

    align-items:
        start;

}


/*==================================================
ADVANTAGES GRID
==================================================*/

.sidv-why-us__grid {

    display:
        grid;

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

    gap:
        1rem;

}


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

.sidv-why-us__card {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        1rem;

    min-width:
        0;

    min-height:
        145px;

    padding:
        1.35rem;

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

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

    background:
        var(--why-white);

    color:
        var(--why-dark);

    opacity:
        0;

    transform:
        translateY(20px);

    overflow:
        hidden;

    transition:
        opacity .5s ease,
        transform .35s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;

}


.sidv-why-us__card.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.sidv-why-us__card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        var(--why-primary);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .3s ease;

}


.sidv-why-us__card:hover {

    border-color:
        rgba(255, 152, 0, .4);

    background:
        #FFFFFF;

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 36px
        rgba(13, 33, 55, .08);

}


.sidv-why-us__card:hover::before {

    transform:
        scaleX(1);

}


.sidv-why-us__card:focus-within {

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

    box-shadow:
        0 12px 30px
        rgba(13, 33, 55, .07);

}


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

.sidv-why-us__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            var(--why-primary) 0%,
            #FFB84D 100%
        );

    color:
        #FFFFFF;

    box-shadow:
        0 7px 18px
        rgba(255, 152, 0, .16);

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

}


.sidv-why-us__icon .sidv-icon {

    width:
        25px;

    height:
        25px;

    color:
        inherit;

}


.sidv-why-us__card:hover
.sidv-why-us__icon {

    transform:
        scale(1.05);

    box-shadow:
        0 10px 22px
        rgba(255, 152, 0, .2);

}


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

.sidv-why-us__card-content {

    min-width:
        0;

    flex:
        1;

}


.sidv-why-us__card-content h3 {

    margin:
        .05rem 0 .5rem;

    color:
        var(--why-dark);

    font-size:
        1.15rem;

    font-weight:
        800;

    line-height:
        1.3;

}


.sidv-why-us__card-content p {

    margin:
        0;

    color:
        var(--why-text);

    font-size:
        .94rem;

    line-height:
        1.65;

}


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

.sidv-why-us__cta {

    position:
        sticky;

    top:
        110px;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        2rem;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            var(--why-dark) 0%,
            #183B61 100%
        );

    color:
        #FFFFFF;

    box-shadow:
        0 20px 45px
        rgba(13, 33, 55, .12);

    opacity:
        0;

    transform:
        translateY(20px);

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

}


.sidv-why-us__cta.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.sidv-why-us__cta::before {

    content:
        "";

    position:
        absolute;

    top:
        -80px;

    right:
        -80px;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 152, 0, .2) 0%,
            rgba(255, 152, 0, 0) 70%
        );

    pointer-events:
        none;

}


.sidv-why-us__cta::after {

    content:
        "";

    position:
        absolute;

    right:
        -110px;

    bottom:
        -120px;

    width:
        260px;

    height:
        260px;

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

    border-radius:
        50%;

    pointer-events:
        none;

}


.sidv-why-us__cta > * {

    position:
        relative;

    z-index:
        2;

}


.sidv-why-us__cta-content {

    position:
        relative;

    z-index:
        2;

}


.sidv-why-us__cta-eyebrow {

    display:
        block;

    margin-bottom:
        .65rem;

    color:
        #FFB84D;

    font-size:
        .72rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.sidv-why-us__cta h3 {

    margin:
        0 0 .75rem;

    color:
        #FFFFFF;

    font-size:
        1.6rem;

    font-weight:
        800;

    line-height:
        1.25;

    text-wrap:
        balance;

}


.sidv-why-us__cta p {

    margin:
        0 0 1.5rem;

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

    font-size:
        .94rem;

    line-height:
        1.7;

}


.sidv-why-us__cta .sidv-button {

    width:
        100%;

}


/*==================================================
ANIMATION DELAYS
==================================================*/

.sidv-why-us__stat:nth-child(2) {

    transition-delay:
        .08s;

}

.sidv-why-us__stat:nth-child(3) {

    transition-delay:
        .16s;

}

.sidv-why-us__stat:nth-child(4) {

    transition-delay:
        .24s;

}


.sidv-why-us__card:nth-child(2) {

    transition-delay:
        .12s;

}

.sidv-why-us__card:nth-child(3) {

    transition-delay:
        .24s;

}

.sidv-why-us__card:nth-child(4) {

    transition-delay:
        .36s;

}


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

@media (max-width: 1100px) {

    .sidv-why-us__stats {

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

    }


    .sidv-why-us__wrapper {

        grid-template-columns:
            1fr;

    }


    .sidv-why-us__cta {

        position:
            relative;

        top:
            auto;

    }

}


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

@media (max-width: 900px) {

    .sidv-why-us {

        padding:
            4rem 0;

    }


    .sidv-why-us__header {

        margin-bottom:
            3rem;

    }


    .sidv-why-us__grid {

        gap:
            .85rem;

    }


    .sidv-why-us__card {

        min-height:
            140px;

        padding:
            1.2rem;

    }


    .sidv-why-us__card-content h3 {

        font-size:
            1.1rem;

    }


    .sidv-why-us__card-content p {

        font-size:
            .92rem;

    }

}


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

@media (max-width: 768px) {

    .sidv-why-us {

        padding:
            3.75rem 0;

    }


    .sidv-why-us__header {

        margin-bottom:
            2.5rem;

    }


    .sidv-why-us__eyebrow {

        min-height:
            28px;

        padding:
            .45rem .85rem;

        font-size:
            .66rem;

    }


    .sidv-why-us__title {

        font-size:
            clamp(
                1.85rem,
                7vw,
                2.3rem
            );

    }


    .sidv-why-us__description {

        margin-top:
            1rem;

        font-size:
            .96rem;

        line-height:
            1.7;

    }


    .sidv-why-us__stats {

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

        gap:
            .75rem;

        margin-bottom:
            2.5rem;

    }


    .sidv-why-us__stat {

        min-height:
            105px;

        padding:
            1rem .75rem;

    }


    .sidv-why-us__stat-number {

        font-size:
            1.9rem;

    }


    .sidv-why-us__stat-label {

        margin-top:
            .45rem;

        font-size:
            .82rem;

    }


    .sidv-why-us__grid {

        grid-template-columns:
            1fr;

        gap:
            .8rem;

    }


    .sidv-why-us__card {

        min-height:
            0;

        padding:
            1.15rem;

        border-radius:
            16px;

    }


    .sidv-why-us__icon {

        width:
            48px;

        height:
            48px;

        flex-basis:
            48px;

        border-radius:
            14px;

    }


    .sidv-why-us__icon .sidv-icon {

        width:
            23px;

        height:
            23px;

    }


    .sidv-why-us__card-content h3 {

        margin-bottom:
            .4rem;

        font-size:
            1.08rem;

    }


    .sidv-why-us__card-content p {

        font-size:
            .91rem;

        line-height:
            1.65;

    }


    .sidv-why-us__cta {

        margin-top:
            .25rem;

        padding:
            1.6rem;

        border-radius:
            19px;

    }


    .sidv-why-us__cta h3 {

        font-size:
            1.45rem;

    }


    .sidv-why-us__cta p {

        font-size:
            .91rem;

        margin-bottom:
            1.25rem;

    }

}


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

@media (max-width: 480px) {

    .sidv-why-us {

        padding:
            3.25rem 0;

    }


    .sidv-why-us__header {

        margin-bottom:
            2.25rem;

    }


    .sidv-why-us__title {

        font-size:
            1.8rem;

    }


    .sidv-why-us__description {

        font-size:
            .92rem;

    }


    .sidv-why-us__stats {

        gap:
            .65rem;

    }


    .sidv-why-us__stat {

        min-height:
            100px;

        padding:
            .9rem .6rem;

    }


    .sidv-why-us__stat-number {

        font-size:
            1.7rem;

    }


    .sidv-why-us__stat-label {

        font-size:
            .78rem;

    }


    .sidv-why-us__card {

        gap:
            .85rem;

        padding:
            1rem;

    }


    .sidv-why-us__icon {

        width:
            45px;

        height:
            45px;

        flex-basis:
            45px;

        border-radius:
            13px;

    }


    .sidv-why-us__icon .sidv-icon {

        width:
            21px;

        height:
            21px;

    }


    .sidv-why-us__card-content h3 {

        font-size:
            1.04rem;

    }


    .sidv-why-us__card-content p {

        font-size:
            .89rem;

        line-height:
            1.6;

    }


    .sidv-why-us__cta {

        padding:
            1.4rem;

    }


    .sidv-why-us__cta h3 {

        font-size:
            1.35rem;

    }

}


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

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

    .sidv-why-us__stat,
    .sidv-why-us__card,
    .sidv-why-us__cta,
    .sidv-why-us__icon {

        transition:
            none;

    }


    .sidv-why-us__stat,
    .sidv-why-us__card,
    .sidv-why-us__cta {

        opacity:
            1;

        transform:
            none;

        transition-delay:
            0s;

    }


    .sidv-why-us__stat:hover,
    .sidv-why-us__card:hover {

        transform:
            none;

    }


    .sidv-why-us__card:hover
    .sidv-why-us__icon {

        transform:
            none;

    }

}