/* =========================================================
   KANGDE SILICONE
   HOW WE WORK
   ORIGINAL APPROVED LAYOUT
   ========================================================= */


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

.kd-process-section {

    width: 100%;

    max-width: 100%;

    padding:
        75px 20px
        80px;

    background:
        #F7F8FA;

    color:
        #27323C;

    box-sizing:
        border-box;

    overflow:
        hidden;
}


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

.kd-process-container {

    width: 100%;

    max-width: 1320px;

    margin:
        0 auto;

    box-sizing:
        border-box;
}


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

.kd-process-header {

    width:
        100%;

    max-width:
        780px;

    margin:
        0 0 58px;

    box-sizing:
        border-box;
}


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

.kd-process-eyebrow {

    margin:
        0 0 16px;

    color:
        #159A9C;

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

    font-size:
        12px;

    line-height:
        1.4;

    font-weight:
        750;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


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

.kd-process-title {

    width:
        100%;

    max-width:
        760px;

    margin:
        0;

    color:
        #14213D;

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

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

    line-height:
        1.08;

    font-weight:
        700;

    letter-spacing:
        -1.5px;

    overflow-wrap:
        break-word;
}


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

.kd-process-description {

    width:
        100%;

    max-width:
        720px;

    margin:
        18px 0 0;

    color:
        #69757E;

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

    font-size:
        16px;

    line-height:
        1.76;

    overflow-wrap:
        break-word;
}


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

.kd-process-flow {

    width:
        100%;

    max-width:
        100%;

    display:
        grid;

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

    gap:
        10px;

    min-width:
        0;

    box-sizing:
        border-box;
}


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

.kd-process-item {

    position:
        relative;

    min-width:
        0;

    padding:
        0 24px 0 0;

    box-sizing:
        border-box;
}


/* =========================================================
   CONNECTING LINE
   ========================================================= */

.kd-process-item:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    top:
        22px;

    right:
        10px;

    width:
        calc(100% - 58px);

    height:
        1px;

    background:
        #D9E0E4;

    box-sizing:
        border-box;
}


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

.kd-process-number {

    position:
        relative;

    z-index:
        2;

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #FFFFFF;

    border:
        1px solid #DDE4E8;

    border-radius:
        50%;

    color:
        #159A9C;

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

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .5px;

    box-sizing:
        border-box;

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


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

.kd-process-content {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


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

.kd-process-item-title {

    width:
        100%;

    max-width:
        100%;

    margin:
        20px 0 0;

    color:
        #14213D;

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

    font-size:
        19px;

    line-height:
        1.35;

    font-weight:
        700;

    letter-spacing:
        -.2px;

    overflow-wrap:
        break-word;
}


/* =========================================================
   ITEM TEXT
   ========================================================= */

.kd-process-item-text {

    width:
        100%;

    max-width:
        225px;

    margin:
        9px 0 0;

    color:
        #69757E;

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

    font-size:
        13px;

    line-height:
        1.68;

    overflow-wrap:
        break-word;
}


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

.kd-process-item:hover
.kd-process-number {

    border-color:
        #159A9C;

    background:
        #EAF4F4;

    transform:
        translateY(-2px);
}


/* =========================================================
   SMALL SUPPORTING NOTE
   ========================================================= */

.kd-process-note {

    width:
        100%;

    max-width:
        860px;

    margin:
        42px 0 0;

    padding-top:
        18px;

    border-top:
        1px solid #E1E6EA;

    color:
        #69757E;

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

    font-size:
        12px;

    line-height:
        1.65;

    box-sizing:
        border-box;
}


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

@media (max-width: 1050px) {

    .kd-process-section {

        padding:
            60px 20px
            65px;
    }


    .kd-process-container {

        width:
            100%;

        max-width:
            900px;
    }


    .kd-process-header {

        margin-bottom:
            48px;
    }


    .kd-process-flow {

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

        row-gap:
            45px;

        column-gap:
            24px;
    }


    .kd-process-item {

        padding:
            0;
    }


    .kd-process-item::after {

        display:
            none !important;
    }


    .kd-process-item-text {

        max-width:
            250px;
    }

}


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

@media (max-width: 640px) {

    .kd-process-section {

        padding:
            30px 16px
            35px;
    }


    .kd-process-container {

        width:
            100%;

        max-width:
            100%;
    }


    .kd-process-header {

        margin-bottom:
            38px;
    }


    .kd-process-eyebrow {

        margin-bottom:
            13px;

        font-size:
            11px;

        letter-spacing:
            1.6px;
    }


    .kd-process-title {

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

        line-height:
            1.12;

        letter-spacing:
            -.9px;
    }


    .kd-process-description {

        margin-top:
            17px;

        font-size:
            15px;

        line-height:
            1.72;
    }


    /* Vertical mobile flow */

    .kd-process-flow {

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

        row-gap:
            0;

        column-gap:
            0;
    }


    .kd-process-item {

        display:
            grid;

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

        column-gap:
            16px;

        min-width:
            0;

        padding:
            0 0 28px;
    }


    /* Vertical connecting line */

    .kd-process-item:not(:last-child)::after {

        display:
            block !important;

        top:
            44px;

        left:
            21px;

        right:
            auto;

        width:
            1px;

        height:
            calc(100% - 44px);

        background:
            #D9E0E4;
    }


    .kd-process-number {

        width:
            44px;

        height:
            44px;

        grid-column:
            1;

        grid-row:
            1;

        font-size:
            10px;
    }


    .kd-process-content {

        grid-column:
            2;

        grid-row:
            1;

        min-width:
            0;
    }


    .kd-process-item-title {

        margin:
            1px 0 0;

        font-size:
            18px;

        line-height:
            1.35;
    }


    .kd-process-item-text {

        max-width:
            100%;

        margin-top:
            7px;

        font-size:
            13px;

        line-height:
            1.68;
    }


    .kd-process-note {

        margin-top:
            20px;

        padding-top:
            16px;

        font-size:
            11px;

        line-height:
            1.6;
    }

}


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

@media (max-width: 380px) {

    .kd-process-section {

        padding:
            62px 14px
            68px;
    }


    .kd-process-item {

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

        column-gap:
            14px;

        padding-bottom:
            24px;
    }


    .kd-process-number {

        width:
            38px;

        height:
            38px;
    }


    .kd-process-item:not(:last-child)::after {

        left:
            18px;

        top:
            38px;

        height:
            calc(100% - 38px);
    }


    .kd-process-item-title {

        font-size:
            17px;
    }


    .kd-process-item-text {

        font-size:
            12.5px;
    }

}


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

.kd-process-item:focus-within
.kd-process-number {

    outline:
        3px solid
        rgba(21,154,156,.25);

    outline-offset:
        3px;
}


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

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

    .kd-process-section *,
    .kd-process-section *::before,
    .kd-process-section *::after {

        transition:
            none !important;
    }

}