/*==================================================
INDUSTRIES
==================================================*/

.sidv-industries {

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

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

    --industries-muted:
        #667085;

    --industries-surface:
        #FFFFFF;

    --industries-background:
        #F6F8FB;

    --industries-border:
        #E7EDF3;

    --industries-radius:
        18px;

    position: relative;

    padding:
        4.5rem 0;

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

    overflow: hidden;

}


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

.sidv-industries__header {

    max-width:
        760px;

    margin:
        0 auto 3.5rem;

    text-align:
        center;

}


.sidv-industries__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    margin-bottom:
        .9rem;

    padding:
        .5rem 1rem;

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

    border-radius:
        999px;

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

    color:
        var(--industries-primary);

    font-size:
        .7rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.sidv-industries__title {

    margin:
        0;

    color:
        var(--industries-dark);

    font-size:
        clamp(
            2rem,
            3.6vw,
            3.1rem
        );

    font-weight:
        900;

    line-height:
        1.1;

    letter-spacing:
        -.04em;

    text-wrap:
        balance;

}


.sidv-industries__description {

    max-width:
        620px;

    margin:
        1.2rem auto 0;

    color:
        var(--industries-muted);

    font-size:
        clamp(
            .95rem,
            1.05vw,
            1.02rem
        );

    line-height:
        1.7;

}


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

.sidv-industries__grid {

    display:
        grid;

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

    gap:
        1rem;

}


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

.sidv-industries__card {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        1.15rem;

    min-width:
        0;

    min-height:
        0;

    padding:
        1.25rem;

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

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

    background:
        var(--industries-surface);

    color:
        var(--industries-dark);

    text-decoration:
        none;

    opacity:
        0;

    transform:
        translateY(22px);

    overflow:
        hidden;

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

}


/*==================================================
VISIBLE
==================================================*/

.sidv-industries__card.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/*==================================================
ANIMATION DELAY
==================================================*/

.sidv-industries__card:nth-child(2) {
    transition-delay: .05s;
}

.sidv-industries__card:nth-child(3) {
    transition-delay: .10s;
}

.sidv-industries__card:nth-child(4) {
    transition-delay: .15s;
}

.sidv-industries__card:nth-child(5) {
    transition-delay: .20s;
}

.sidv-industries__card:nth-child(6) {
    transition-delay: .25s;
}


/*==================================================
TOP ACCENT
==================================================*/

.sidv-industries__card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        var(--industries-primary);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .3s ease;

}


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

.sidv-industries__card:hover {

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

    color:
        var(--industries-dark);

    transform:
        translateY(-4px);

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

}


.sidv-industries__card:hover::before {

    transform:
        scaleX(1);

}


/*==================================================
FOCUS
==================================================*/

.sidv-industries__card:focus-visible {

    outline:
        3px solid
        rgba(255, 152, 0, .3);

    outline-offset:
        3px;

}


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

.sidv-industries__icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    flex-shrink:
        0;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            var(--industries-dark) 0%,
            #19395F 100%
        );

    color:
        #FFFFFF;

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

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

}


.sidv-industries__icon .sidv-icon {

    width:
        24px;

    height:
        24px;

    color:
        inherit;

}


.sidv-industries__card:hover
.sidv-industries__icon {

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

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(255, 152, 0, .16);

}


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

.sidv-industries__content {

    min-width:
        0;

    flex:
        1;

}


/*==================================================
CARD TITLE
==================================================
Actual markup:
<div class="sidv-industries__content">
    <h3>...</h3>
    <p>...</p>
</div>
==================================================*/

.sidv-industries__content h3 {

    margin:
        .05rem 0 .55rem;

    color:
        var(--industries-dark);

    font-size:
        1.12rem;

    font-weight:
        800;

    line-height:
        1.3;

}


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

.sidv-industries__content p {

    margin:
        0;

    color:
        var(--industries-muted);

    font-size:
        .92rem;

    line-height:
        1.6;

}


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

@media (max-width: 1200px) {

    .sidv-industries__grid {

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

    }

}


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

@media (max-width: 992px) {

    .sidv-industries {

        padding:
            4rem 0;

    }


    .sidv-industries__header {

        margin-bottom:
            3rem;

    }


    .sidv-industries__grid {

        gap:
            1rem;

    }


    .sidv-industries__card {

        padding:
            1.2rem;

    }

}


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

@media (max-width: 768px) {

    .sidv-industries {

        padding:
            3.5rem 0;

    }


    .sidv-industries__header {

        margin-bottom:
            2.25rem;

    }


    .sidv-industries__eyebrow {

        min-height:
            28px;

        margin-bottom:
            .8rem;

        padding:
            .45rem .85rem;

        font-size:
            .63rem;

    }


    .sidv-industries__title {

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

        letter-spacing:
            -.03em;

    }


    .sidv-industries__description {

        margin-top:
            .95rem;

        font-size:
            .9rem;

        line-height:
            1.65;

    }


    .sidv-industries__grid {

        grid-template-columns:
            1fr;

        gap:
            .8rem;

    }


    .sidv-industries__card {

        gap:
            1rem;

        padding:
            1.2rem;

        border-radius:
            16px;

    }


    .sidv-industries__icon {

        width:
            50px;

        height:
            50px;

        border-radius:
            13px;

    }


    .sidv-industries__icon .sidv-icon {

        width:
            23px;

        height:
            23px;

    }


    .sidv-industries__content h3 {

        margin-bottom:
            .45rem;

        font-size:
            1.05rem;

    }


    .sidv-industries__content p {

        font-size:
            .87rem;

        line-height:
            1.6;

    }

}


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

@media (max-width: 480px) {

    .sidv-industries {

        padding:
            3rem 0;

    }


    .sidv-industries__header {

        margin-bottom:
            2rem;

    }


    .sidv-industries__title {

        font-size:
            1.75rem;

    }


    .sidv-industries__card {

        gap:
            .9rem;

        padding:
            1.1rem;

    }


    .sidv-industries__icon {

        width:
            46px;

        height:
            46px;

        border-radius:
            12px;

    }


    .sidv-industries__icon .sidv-icon {

        width:
            21px;

        height:
            21px;

    }


    .sidv-industries__content h3 {

        font-size:
            1rem;

    }


    .sidv-industries__content p {

        font-size:
            .84rem;

    }

}


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

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

    .sidv-industries__card,
    .sidv-industries__card::before,
    .sidv-industries__icon {

        transition:
            none;

    }


    .sidv-industries__card {

        opacity:
            1;

        transform:
            none;

        transition-delay:
            0s;

    }


    .sidv-industries__card:hover {

        transform:
            none;

    }


    .sidv-industries__card:hover
    .sidv-industries__icon {

        transform:
            none;

    }

}