/* feature ---------------------------------- */
.feature-item {
    position: relative;
    background-color: $theme-color;
    border-radius: 60px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    z-index: 4;


    .feature-shape {
        position: absolute;
        left: 50%;
        top: 0;
        width: 140px;
        height: 140px;
        background: $theme-color;
        border-radius: 50%;
        opacity: 0.2;
        transform: translate(-50%, -50%);
        z-index: -1;

    }

    @include xl {
        padding: 40px 20px;
    }

    &_icon {
        margin-bottom: 30px;
    }

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

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

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

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

    &:hover {

        .feature-item {

            &_icon {
                img {
                    transform: scale(-1) rotate(180deg);
                }
            }
        }
    }
}

.shape-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    mask-size: auto;
    background-size: auto;
    background-repeat: repeat-x;
    mask-repeat: repeat-x;
    background-position: top center;
    background-color: $white-color;
    z-index: 5;
}

.shape-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110px;
    mask-size: auto;
    background-size: auto;
    background-repeat: repeat-x;
    mask-repeat: repeat-x;
    background-position: bottom center;
    background-color: $white-color;
    z-index: 5;
}

/* program area ---------------------*/
.program-area {
    position: relative;
    padding: 180px 0 150px 0;
    overflow: hidden;

    .shape-bottom {
        bottom: -22px;
    }
}

.program-feature {
    position: relative;
    padding: 0 35px 45px 35px;
    --theme-color: #FEDDE6;
    --theme-color2: #FFBBCD;
    text-align: center;
    z-index: 4;

    @include xl {
        padding: 0 10px 45px 10px;
    }

    &:before {
        content: "";
        inset: 0;
        position: absolute;
        mask-image: url(../img/shape/program_shape.png);
        background-repeat: no-repeat;
        background-size: cover;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: auto;
        background-color: $theme-color;
        animation: morph 17s ease-in-out infinite;
        animation-delay: 0.2s;
        z-index: -2;
    }

    .program-shape {
        position: absolute;
        inset: 0;
        top: -31px;
        width: 238px;
        height: 252px;
        z-index: -1;

        @include lg {}
    }

    .prograp-line {
        position: absolute;
        inset: 0;
        top: -28px;
        left: 17px;
        background-color: #FE5A86;
        mask-size: auto;
        mask-repeat: no-repeat;
        z-index: -1;
    }

    &_wrapp {
        &:nth-child(2) {
            .program-feature {
                &:before {
                    --theme-color: #FFE8C7;
                }

                &_content {
                    &:before {
                        --theme-color2: #FED597;
                    }
                }

                &_year {
                    color: #FCA627;
                }

                .icon-btn {
                    background-color: #FCA627;

                    &:hover {
                        background-color: $title-color;
                    }
                }

                .prograp-line {
                    background-color: #FCA627;
                }
            }
        }

        &:nth-child(3) {
            .program-feature {
                &:before {
                    --theme-color: #DDF6C8;
                }

                &_content {
                    &:before {
                        --theme-color2: #B7E393;
                    }
                }

                &_year {
                    color: #7DBE48;
                }

                .icon-btn {
                    background-color: #7DBE48;

                    &:hover {
                        background-color: $title-color;
                    }
                }

                .prograp-line {
                    background-color: #7DBE48;
                }
            }
        }

        &:nth-child(4) {
            .program-feature {
                &:before {
                    --theme-color: #C4F0F8;
                }

                &_content {
                    &:before {
                        --theme-color2: #97E6F4;
                    }
                }

                &_year {
                    color: #16C4E3;
                }

                .icon-btn {
                    background-color: #16C4E3;

                    &:hover {
                        background-color: $title-color;
                    }
                }

                .prograp-line {
                    background-color: #16C4E3;
                }
            }
        }

    }

    &_content {
        position: relative;
        padding: 30px;
        max-width: 230px;
        display: block;
        margin: auto;
        z-index: 2;

        &:before {
            content: "";
            inset: 0;
            top: -30px;
            position: absolute;
            mask-image: url(../img/shape/program_shape2.png);
            background-repeat: no-repeat;
            background-size: cover;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: auto;
            background-color: $theme-color2;
            animation-delay: 0.2s;
            z-index: -2;

        }
    }

    .box-img {
        position: relative;
        z-index: 4;

        img {
            margin-top: -15px;
        }
    }

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

    &_year {
        font-family: $title-font;
        font-size: 16px;
        font-weight: 500;
        color: #FE5A86;
        display: block;
        margin-top: -0.3rem;
        margin-bottom: 5px;
    }

    &_text {
        margin-bottom: 20px;
    }

    .icon-btn {
        position: absolute;
        left: 50%;
        background-color: #FE5A86;
        color: $white-color;
        transform: translate(-50%, -50%);
        bottom: -24%;

        @include vxs {
            bottom: -17%;
        }

        &:hover {
            background-color: $title-color;
        }

    }
}

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


    .feature-icon {
        width: 56px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        border-radius: 50%;
        background: #16C4E3;
        transition: all 0.4s ease-in-out;

        &:hover {
            background: $title-color;
        }

    }

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

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

            a {
                color: inherit;
            }
        }

        &_label {
            font-family: $title-font;
            color: $body-color;
            font-size: 16px;
            font-weight: 500;
            line-height: 28px;
            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;
        }
    }

    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;
    }

}

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

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

    &: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: 50%;

        @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: 22px;
        letter-spacing: -0.44px;
        margin-bottom: 10px;

        @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;
    text-align: right;
    margin-right: -20px;

    @include lg {
        text-align: center;
        margin: 40px 0 0 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;
        }
    }
}

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