/* feature ---------------------------------- */
.feature-item {
    position: relative;
    background: #E9F6F9;
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    transition: all 0.4s ease-in-out;

    &_icon {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        display: block;
        margin: auto;
        background: rgba(28, 168, 203, 0.1);
        border-radius: 50px;
        margin-bottom: 24px;
    }

    &_text {
        font-weight: 400;
        line-height: 26px;
        margin-bottom: -0.4rem;
    }

    .box-title {
        font-size: 22px;
        margin-bottom: 7px;

        @include xl {
            font-size: 20px;
        }
    }

    img {
        transition: all 0.4s ease-in-out;
    }

    &:hover {
        background-color: $theme-color;

        .feature-item {
            &_icon {
                background-color: $white-color;

                img {
                    transform: rotateY(180deg);
                }
            }

            &_text {
                color: $white-color;
            }
        }

        .box-title {
            color: $white-color;
        }
    }
}

.feature-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;


    .feature-icon {
        i {
            font-size: 46px;
            font-weight: 300;
            line-height: 56px;
        }
    }

    .header-info {
        &_link {
            font-family: $title-font;
            font-size: 30px;
            font-weight: 600;
            line-height: 40px;
            color: $title-color;
            margin-bottom: -0.5rem;

            &:hover {
                color: $theme-color;
            }

            a {
                color: inherit;
            }
        }

        &_label {
            font-family: $body-font;
            color: $body-color;
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
            margin-bottom: 0;

        }
    }
}


// circle process -----------------------------
.feature-circle {
    &-wrap {
        display: grid;
        grid-template-columns: auto auto;
        gap: 40px;
        border-bottom: 1px solid #E4E4E4;
        border-top: 1px solid #E4E4E4;
        margin: 40px 0;
        padding: 40px 0;

        @include sm {
            display: block;
        }

        &.style2 {
            grid-template-columns: auto auto auto;
            border: none;
            padding: 0;
            margin: 0;
        }
    }

    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 289px;


    @include sm {
        &:not(:last-child) {
            margin-bottom: 30px;
        }
    }

    .box-title {
        line-height: 34px;
        margin-bottom: 0px;
    }

    &_text {
        margin-bottom: 0px;
        font-size: 14px;
    }

    .progressbar {
        position: relative;
        max-height: 100px;
    }

    .circle-num {
        font-size: 30px;
        font-weight: 600;
        color: $title-color;
        font-family: $title-font;
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        line-height: 100px;
        margin: 5px;
        text-align: center;
    }

}


.about-circle {
    &-wrap {
        display: grid;
        grid-template-columns: auto auto auto;  
        gap: 40px;
        margin-right: 50px;

        @include sm {
            display: block;
        }
    }

    .box-title {
        color: $white-color;
        font-weight: 500;
        text-align: center;
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 0px;
    }

    &_text {
        margin-bottom: 0px;
        font-size: 14px;
    }

    .progressbar {
        position: relative;
        max-height: 160px;
        margin-bottom: 24px;
    }

    .circle-num {
        font-size: 40px;
        font-weight: 600;
        color: $white-color;
        font-family: $title-font;
        position: absolute;
        top: 0;
        left: 0;
        width: 160px;
        height: 160px;
        line-height: 160px;
        margin: 5px;
        text-align: center;


        
    }

}


/* Choose ---------------------------------- */

.choose-about {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    max-width: 621px;

    &.style2 {
        gap: 16px;
        align-items: center;
        transition: all 0.4s ease-in-out;
        background-color: transparent;
        border-radius: 20px;
        padding: 20px 24px;

        .choose-about {
            &_icon {
                background-color: transparent;
                box-shadow: none;
                border-radius: 0;
            }

            &_text {
                margin-bottom: 0;
            }
        }

        .box-title {
            font-size: 20px;
            margin-bottom: 5px;
        }


        &:hover {
            background-color: $white-color;
            box-shadow: 0px 2px 6px rgba(40, 41, 61, 0.02), 0px 16px 24px rgba(96, 97, 112, 0.12);

        }

        &:not(:last-child) {
            margin-bottom: 0px;
        }

        &.item-active {
            background-color: $white-color;
            box-shadow: 0px 2px 6px rgba(40, 41, 61, 0.02), 0px 16px 24px rgba(96, 97, 112, 0.12);

        }
    }

    &:not(:last-child) {
        margin-bottom: 40px;
    }

    @include xs {
        gap: 20px;
    }

    @include vxs {
        display: block;
    }

    &_icon {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background-color: $theme-color;
        border-radius: 16px;

        @include vxs {
            display: block;
            margin: auto auto 20px auto;
        }

    }

    &_text {
        margin-bottom: 0;

        @include vxs {
            text-align: center;
        }
    }

    img {
        transition: all 0.4s ease-in-out;
    }

    .box-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 3px;

        @include vxs {
            text-align: center;
        }
    }

    &:hover {
        .choose-about {
            &_icon {
                img {
                    transform: rotateY(180deg);
                }
            }
        }
    }
}

.choose-area {
    position: relative;
    z-index: 2;
    clip-path: path("M1920 0H0V597V603V647.237L162.995 713.921C283.181 763.091 411.793 788.383 541.648 788.383H1378.35C1508.21 788.383 1636.82 763.091 1757.01 713.921L1920 647.237V603V597V0Z");

    @media(min-width: 1930px) {
        clip-path: path("M0 0H3333V645.762L2852.45 764.707C2773.84 784.164 2693.16 794 2612.18 794H720.818C639.838 794 559.158 784.164 480.551 764.707L0 645.762V0Z");
    }

    @include lg {
        clip-path: none;
    }
}

.choose-tab-area {
    @include lg {
        margin: 80px 0;
    }
}

.choose-image {
    position: relative;
    margin-left: -110px;

    @include lg {
        margin: 0;
    }

    .choose-text {
        -webkit-text-fill-color: rgba(255, 255, 255, 0.06);
        -webkit-text-stroke-color: rgba(255, 255, 255, 0.06);
        font-family: $title-font;
        font-weight: 900;
        font-size: 114px;
        line-height: 94px;
        text-transform: uppercase;
        transform: rotate(-90deg);
        position: absolute;
        top: 38%;
        left: -58.5%;
        margin: 0;
    }
}

.choose-text {
    color: #888C97;
}

.mission-content {
    .checklist {
        li {
            color: $white-color;
        }
    }

    .mission-text {
        color: $gray-color;
    }
}

.features-wrapper {
    display: flex;
    justify-content: space-between;


    @include xl {
        display: block;
    }

    .features-img {
        min-width: 300px;

        @include xl {
            min-width: 100%;
            margin-top: 20px;
        }

        img {
            width: 100%;
        }
    }
}

.features-content {
    .box-title {
        margin-bottom: 5px;
    }

    .checklist li:not(:last-child) {
        margin-bottom: 5px;
    }
}

.feature-text {
    font-size: 18px;
    max-width: 773px;
    display: block;
    margin: auto;
}

/* choose-item */
.choose-item {
    display: flex;
    gap: 24px;

    &_wrapper {
        display: grid;
        grid-template-columns: auto auto auto auto auto;

        @include lg {
            grid-template-columns: auto auto auto;
            gap: 40px 10px;
        }

        @include md {
            grid-template-columns: auto auto;
            gap: 40px 20px;
        }

        @include xs {
            grid-template-columns: auto;
        }
    }

    &.style3 {
        display: block;
        text-align: center;

        .box-icon {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 50%;
            display: block;
            margin: auto auto 30px auto;
        }

        .box-title {
            font-size: 18px;
        }

        .box-text {
            max-width: 300px;
            display: block;
            margin: auto;

            @media(max-width: 1699px) {
                max-width: 250px;
            }

            @include ml {
                max-width: 230px;
            }

            @include lg {
                max-width: 100%;
            }
        }
    }

    .box-icon {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #E9F6F9;
        border-radius: 30px;

        img {
            transform: all 0.4s ease-in-out;
        }

    }

    .box-title {
        margin-bottom: 10px;
    }

    .box-text {
        max-width: 277px;
        margin-bottom: 0;
    }

    &:hover {
        .box-icon {
            img {
                transform: rotateY(180deg);
            }
        }
    }
}

/* choose-area2 start -------------------*/
.choose-area2 {
    max-width: 1760px;
    display: block;
    margin: auto;
    background: $title-color;
    border-radius: 30px;
    padding: 60px 0;

    @media(max-width: 1799px) {
        border-radius: 0;
    }

}

// .feature-wrap1 {
//     position: absolute; 
//     height: 200px;
//     width: 100%;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     z-index: -1;
//     p {
//         margin-bottom: 0;
//         position: absolute;
//         display: inline-block;
//         left: 0;
//         top: 0;
//         user-select: none;
//         pointer-events: auto;
//         transition: none;
//     }
//     .feature-item {
//         display: inline-block;
//         font-size: 18px;
//         font-weight: 600;
//         font-family: $title-font;
//         border-radius: 48px;
//         padding: 13.5px 32px;
//         line-height: 1;
//         color: $title-color;
//         background: $theme-color;
//     }
//     @include md {
//         .feature-item {
//             padding: 10px 25px;
//             font-size: 16px;
//         }
//     }
//     @include xs {
//         position: relative;
//         margin-top: -200px;
//     }
// }