/* =========================================================
   WHY KANGDE
   RESPONSIVE B2B SECTION
   ========================================================= */

.kd-why-section {

    width: 100%;
    max-width: 100%;

    padding:
        80px 20px
        50px;

    background:
        #FFFFFF;

    box-sizing:
        border-box;

    overflow:
        hidden;
}


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

.kd-why-container {

    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    box-sizing: border-box;
}


/* =========================================================
   MAIN LAYOUT
   PC:
   LEFT = INTRO
   RIGHT = REASONS
   ========================================================= */

.kd-why-layout {

    width: 100%;
    max-width: 100%;

    display: grid;

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

    gap:
        clamp(45px, 7vw, 95px);

    align-items:
        start;

    box-sizing: border-box;
}


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

.kd-why-intro {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


/* Eyebrow */

.kd-why-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;
}


/* Heading */

.kd-why-title {

    width: 100%;
    max-width: 600px;

    margin: 0;

    color:
        #14213D;

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

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

    line-height:
        1.08;

    font-weight:
        700;

    letter-spacing:
        -1.6px;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* Main intro paragraph */

.kd-why-description {

    width: 100%;
    max-width: 580px;

    margin:
        21px 0 0;

    color:
        #69757E;

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

    font-size:
        16px;

    line-height:
        1.78;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* Bottom statement */

.kd-why-note {

    width: 100%;
    max-width: 560px;

    margin:
        30px 0 0;

    padding:
        18px 0 0;

    border-top:
        2px solid #159A9C;

    color:
        #14213D;

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

    font-size:
        14px;

    line-height:
        1.65;

    font-weight:
        650;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   RIGHT REASON LIST
   NOT CARD GRID
   ========================================================= */

.kd-why-list {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    border-top:
        1px solid #E1E6EA;

    box-sizing:
        border-box;
}


/* Individual item */

.kd-why-item {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: grid;

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

    column-gap:
        20px;

    padding:
        25px 0;

    border-bottom:
        1px solid #E1E6EA;

    box-sizing:
        border-box;

    transition:
        background-color .2s ease;
}


/* Number */

.kd-why-number {

    color:
        #159A9C;

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

    font-size:
        11px;

    line-height:
        1.4;

    font-weight:
        800;

    letter-spacing:
        1.4px;

    box-sizing:
        border-box;
}


/* Text area */

.kd-why-item-content {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing:
        border-box;
}


/* Item heading */

.kd-why-item-title {

    width: 100%;
    max-width: 100%;

    margin: 0;

    color:
        #14213D;

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

    font-size:
        20px;

    line-height:
        1.35;

    font-weight:
        700;

    letter-spacing:
        -.25px;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* Item paragraph */

.kd-why-item-text {

    width: 100%;
    max-width: 720px;

    margin:
        8px 0 0;

    color:
        #69757E;

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

    font-size:
        14px;

    line-height:
        1.7;

    overflow-wrap:
        break-word;

    box-sizing:
        border-box;
}


/* =========================================================
   SMALL ACCENT LINE
   ========================================================= */

.kd-why-item-content::after {

    content:
        "";

    display:
        block;

    width:
        0;

    height:
        2px;

    margin-top:
        15px;

    background:
        #159A9C;

    transition:
        width .25s ease;
}


.kd-why-item:hover
.kd-why-item-content::after {

    width:
        36px;
}


/* =========================================================
   EXISTING ABOUT LINK
   ========================================================= */

.kd-why-link {

    display:
        inline-flex;

    align-items:
        center;

    margin:
        24px 0 0;

    color:
        #14213D;

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

    font-size:
        13px;

    line-height:
        1.4;

    font-weight:
        750;

    text-decoration:
        none;

    box-sizing:
        border-box;
}

.kd-why-link:hover {

    color:
        #159A9C;
}


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

@media (max-width: 1050px) {

    .kd-why-section {

        padding:
            75px 20px
            50px;
    }


    .kd-why-container {

        max-width:
            900px;
    }


    .kd-why-layout {

        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .kd-why-description {

        max-width:
            760px;
    }


    .kd-why-note {

        max-width:
            760px;
    }


    .kd-why-item-text {

        max-width:
            780px;
    }

}


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

@media (max-width: 640px) {

    .kd-why-section {

        padding:
            55px 16px
            15px;
    }


    .kd-why-container {

        width:
            100%;

        max-width:
            100%;
    }


    .kd-why-layout {

        width:
            100%;

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

        gap:
            40px;
    }


    /* Eyebrow */

    .kd-why-eyebrow {

        margin-bottom:
            13px;

        font-size:
            11px;

        letter-spacing:
            1.6px;
    }


    /* Heading */

    .kd-why-title {

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

        line-height:
            1.14;

        letter-spacing:
            -.8px;
    }


    /* Paragraph */

    .kd-why-description {

        margin-top:
            17px;

        font-size:
            15px;

        line-height:
            1.72;
    }


    /* Note */

    .kd-why-note {

        margin-top:
            24px;

        padding-top:
            16px;

        font-size:
            13px;
    }


    /* Reason list */

    .kd-why-item {

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

        column-gap:
            14px;

        padding:
            21px 0;
    }


    .kd-why-number {

        font-size:
            10px;

        letter-spacing:
            1.1px;
    }


    .kd-why-item-title {

        font-size:
            18px;

        line-height:
            1.35;
    }


    .kd-why-item-text {

        margin-top:
            7px;

        font-size:
            13.5px;

        line-height:
            1.68;
    }


    .kd-why-item-content::after {

        display:
            none;
    }


    .kd-why-link {

        margin-top:
            20px;

        font-size:
            13px;
    }

}


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

@media (max-width: 380px) {

    .kd-why-section {

        padding:
            62px 14px
            68px;
    }


    .kd-why-item {

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

        column-gap:
            12px;
    }


    .kd-why-title {

        font-size:
            31px;
    }


    .kd-why-item-title {

        font-size:
            17px;
    }


    .kd-why-item-text {

        font-size:
            13px;
    }

}


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

.kd-why-link:focus-visible {

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

    outline-offset:
        4px;
}


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

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

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

        transition:
            none !important;
    }

}