/* skill section */

#skills {
    /* background-color: rgba(0, 0, 255, 0.192); */
    /* border: 2px rgb(0, 255, 21) solid; */

    display: flex;
    /* grid-template-columns: repeat(2, 0fr); */
    gap: 60px;
    flex-direction: column;
    /* justify-items: center; */
    align-items: center;
}

.box-skill-1th {
    /* display: flex; */
    /* height: 700px; */
    width: max(55%, 850px);
    opacity: 0;

    /* margin-left: calc(max(20%, 200px) - 200px); */
}
.skillbox1.load {
    animation: slideRight 0.8s ease-out forwards;  
    animation-delay: 0s;
}
.skillbox2.load {
    animation: slideRight 1s ease-out forwards;  
    animation-delay: 0.2s;
}
.skillbox3.load {
    animation: slideRight 1s ease-out forwards;  
    animation-delay: 0.4s;
}

.box-skill-1th:last-child {
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5px;
}

/* .box-skill-2th {
    display: flex;
    width: 50%;
} */

    .head-box-skill {
        /* width: auto; */
        display: flex;
        text-transform: capitalize;
        font-weight: 400;
    }
        .head-box-skill div {
            background-color: #666666;
            color: #e7e7e7;
            padding: 10px 35px;
            font-size: clamp(10px, 4vw, var(--head-font-size));
            position: relative;

            margin-bottom: 50px;
        }

        .head-box-skill div:after {
            content: "";
            width: 100%;
            height: 100%;
            bottom: -15px;
            right: -20px;
            z-index: -1;
            position: absolute;
        }

        .head-box-skill.light div:after {
            background-color: rgb(56, 56, 56);
        }

        .head-box-skill.dark div:after {
            background-color: rgb(43, 43, 43);
        }

    .body-box-skill {
        display: flex;
        flex-direction: column;
        row-gap: 17px;
    }

    .body-box-skill-2col{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 5px;
    }

        .detail-box-skill {
            padding-left: 50px;
            display: flex;
        }

            .percent-nonslider-skill {
                font-weight: 400;
                font-size: clamp(20px, 6vw, 30px);
                bottom: 0px;
                /* color: var(--main-color); */
                margin-top: 21px;
                /* margin-right: 27px; */
                min-width: clamp(50px, 17vw, 85px);
            }
                .percent-nonslider-skill.light {
                    color: var(--main-color);
                }

                .percent-nonslider-skill.dark {
                    color: var(--main-color-dark); 
                }

                .percent-nonslider-skill::after {
                    content: "%";
                }

            .content-box-skill {
                display: flex;
                flex-direction: column;
            }

                .name-detail-box-skill {
                    padding-bottom: 2px;
                    text-transform: capitalize;
                    color: #585858;
                    font-weight: 450;
                    font-size: clamp(13px, 3.2vw, 17px);
                }

                .nonslider-skill {
                    /* background-color: aquamarine; */
                    width: clamp(100px, 55vw, 300px);
                    height: clamp(20px, 7vw, 31px);
                    position: relative;
                    display: flex;
                    align-items: center;
                }
                .nonslider-skill::after {
                    content: "";
                    width: 100%;
                    height: 11px;
                    background-color: rgb(214, 214, 214);
                }
                    
                    .nonslider-skill-detail {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        height: 100%;
                        /* background-color: var(--main-color); */
                        width: 0%;     
                        transition: width 1s;
                    }
                        .nonslider-skill-detail.light {
                            background-color: var(--main-color);
                        }
                        .nonslider-skill-detail.dark {
                            background-color: var(--main-color-dark);
                        }

                    .start-nonslider {
                        width: 0% !important;
                    }


@media screen and (max-width: 1060px){
    .box-skill-1th:last-child, .body-box-skill-2col{
        display: flex !important;
        flex-direction: column;
    }

    .box-skill-1th {
        margin-left: 0px;
        width: auto;
    }

    .box-skill-1th:last-child {
        display: flex;
        gap: 100px;
    }

    /*  */

    .detail-box-skill {
        padding: 0px;
    }
}