@use '../../utils' as *;

/*----------------------------------------*/
/*  7.27 skill css start
/*----------------------------------------*/

.#{$theme-prifix}-skill{
    &-wd{
        &-icon{
            border-radius: 100%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            display: inline-block;
        }
        &-border{
            position: absolute;
            top: 0;
            right: 0;
            @media #{$lg,$md,$sm,$xs}{
                right: -25px;
            }
            @media #{$md,$sm,$xs}{
                display: none;
            }
            &.borders-2{
                right: -30px;
            }
        }
        &-para{
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            background: #0d0d0d;
            display: inline-block;
            padding: 8px 10px 8px 30px;
        }
        &-item{
            @media #{$md,$sm,$xs}{
                margin-left: 0;
            }
        }
    }
    &-pb{
        &-title{
            font-size: 170px;
            line-height: 1;
            @media #{$md,$sm,}{
                font-size: 100px;
            }
            @media #{$xs}{
                font-size: 60px;
                & span{
                    margin-top: 0;
                }
            }
        }
        &-top{
            &-text{
                display: flex;
                align-items: start;
                white-space: nowrap;
            }
        }
        &-slider{
            &-active{
                & .swiper-slide{
                    display: inline-block;
                    width: auto;
                }
            }
        }
        &-numbar{
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            &.tp-border{
                border: 1px solid #291A10;
            }
        }
        &-doted{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        &-circale{
            &-wrap{
                gap: 32px;
                margin-top: -90px;
                @media #{$xl,$lg,$md,$sm,$xs}{
                    margin-top: 0;
                }
                @media #{$md,$sm,$xs}{
                    flex-wrap: wrap;
                    justify-content: center!important;
                }
            }
            &.circale-1{
                width: 678px;
                height: 678px;
                background: var(--tp-theme-secondary);
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                @media #{$xxl,$xl}{
                    width: 478px;
                    height: 478px;
                }
                @media #{$lg,$md,$sm,$xs}{
                    width: 400px;
                    height: 400px;
                }
                @media #{$xs}{
                    width: 325px;
                    height: 325px;
                }
            }
            &.circale-2{
                width: 484px;
                height: 484px;
                @media #{$xxl,$xl}{
                    width: 378px;
                    height: 378px;
                }
                @media #{$lg,$md,$sm,$xs}{
                    width: 280px;
                    height: 280px;
                }
            }
            &.circale-3{
                width: 218px;
                height: 218px;
            }
            &-content{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                right: 0;
                text-align: center;
            }
        }
        &-border{
            overflow: hidden;
            &-2{
                & .tp-skill-pb-numbar.tp-border {
                    border: 1px solid #DCDBDC;
                }
                & .tp-skill-pb-circale.circale-1 {
                    background: var(--tp-common-black-5);
                }
            }
        }
        &-panel{
            width: 100%;
            height: 100%;
            will-change: transform;
            opacity: 1 !important;
            &-wrap{
                width: 100%;
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: no-wrap;
                flex-wrap: no-wrap;
                @media #{$lg,$md,$sm,$xs}{
                    flex-wrap: wrap;
                }
            }
        }
        &-para{
            @media #{$lg,$md,$sm,$xs}{
                margin-left: 0;
                & br{
                    display: none;
                }
            }
        }
    }
}