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

/*----------------------------------------*/
/*  7.1 About css
/*----------------------------------------*/

.#{$theme-prefix}-about{
    &-area{
        @media #{$lg,$md,$sm,$xs} {
            padding-bottom: 120px;
        }
    }
    &-shape{
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
    }
    &-thumb{
        &-wrapper{
            & .main{
                position: relative;
                overflow: hidden;
                &::after{
                    position: absolute;
                    top: 0;
                    left: -100%;
                    display: block;
                    content: "";
                    width: 50%;
                    height: 100%;
                    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
                    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
                    -webkit-transform: skewX(-25deg);
                    transform: skewX(-25deg);
                    z-index: 1;
                }
            }
            &:hover{
                & .main{
                    &::after{
                        animation: shine 1.5s;
                    }
                }
            }
            @media #{$md,$sm,$xs} {
                margin-bottom: 50px;
            }
            & img{
                border-radius: 20px;
                @media #{$lg,$md,$sm,$xs} {
                    max-width: 100%;
                }
            }
            & .shape-1{
                position: absolute;
                bottom: -30%;
                right: 32px;
                z-index: 2;
                filter: drop-shadow(0px 10px 60px rgba(0, 0, 0, 0.07));
                @media #{$xl} {
                    right: 0;
                }
                @media #{$lg} {
                    bottom: -40%;
                }
                @media #{$md} {
                    right: 0;
                    bottom: 42px;
                }
                @media #{$sm,$xs} {
                    display: none;
                }
            }
            & .shape-2{
                position: absolute;
                bottom: -100px;
                left: -90px;
                z-index: -1;
                @media #{$md,$sm,$xs} {
                    display: none;
                }
            }
            & .shape-3{
                position: absolute;
                right: 30px;
                top: 30%;
                z-index: -1;
                border-radius: 0;
                @media #{$xl} {
                    right: 2px;
                }
                @media #{$md,$sm,$xs} {
                    display: none;
                }
            }
            & .shape-4{
                position: absolute;
                right: 20px;
                top: -10px;
                animation: tptranslateX2 4s forwards infinite alternate;
                @media #{$xl} {
                    right: -40px;
                }
                @media #{$lg,$md,$sm,$xs} {
                    display: none;
                }
            }
        }
    }
    &-title{
        &-wrapper{
            & .tp-section-title{
                margin-bottom: 13px;
            }
        }
    }
    &-wrapper{
        margin-top: 50px;
        @media #{$lg,$md,$sm,$xs} {
            margin-top: 0;
        }
        & p{
            margin-bottom: 32px;
            color: var(--tp-text-1);
        }
        &-list{
            display: inline-block;
            margin-bottom: 20px;
            & ul{
                & li{
                    list-style: none;
                    float: left;
                    width: 50%;
                    font-size: 20px;
                    font-weight: 500;
                    color: var(--tp-text-body);
                    margin-bottom: 10px;
                    @media #{$xl,$lg,$md,$sm,$xs} {
                        float: none;
                        width: 100%;
                    }
                    & span{
                        font-size: 8px;
                        @include textGradient();
                        display: inline-block;
                        margin-right: 4px;
                        transform: translateY(-3px);
                    }
                    &:nth-child(even) {
                        padding-left: 30px;
                        @media #{$xl,$lg,$md,$sm,$xs} {
                            padding-left: 0;
                        }
                    }
                }
            }
        }
    }
    &-btn{
        line-height: 1;
        & .tp-btn{
            padding: 22px 52px;
        }
    }



    &-area-2{}
    &-thumb{
        &-wrapper{
            &-2{
                &:hover{
                    & .img-2{
                        &::after{
                            animation: shine 1.5s;
                        }
                    }
                }
                @media #{$md,$sm,$xs} {
                    margin-bottom: 50px;
                }
                & img{
                    border-radius: 10px;
                }
                & .img-1{
                    margin-top: 70px;
                    margin-left: -30px;
                    @media #{$lg,$sm,$xs} {
                        margin-left: 0;
                    }
                    @media #{$xs} {
                        width: 100%;
                    }
                }
                & .img-2{
                    position: absolute;
                    top: 0;
                    right: 20px;
                    overflow: hidden;
                    &::after{
                        position: absolute;
                        top: 0;
                        left: -100%;
                        display: block;
                        content: "";
                        width: 50%;
                        height: 100%;
                        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
                        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
                        -webkit-transform: skewX(-25deg);
                        transform: skewX(-25deg);
                        z-index: 1;
                    }
                    @media #{$xs} {
                        display: none;
                    }
                }
                & .img-3{
                    position: absolute;
                    top: 0;
                    left: -60px;
                    z-index: -1;
                }
            }
        }
    }
    &-item{
        &-2{
            border-bottom: 2px solid #E3E3E3;
            margin-bottom: 40px;
            @media #{$lg,$sm,$xs} {
                flex-wrap: wrap;
            }
            &-inner{
                &:not(:last-of-type){
                    margin-right: 20px;
                    @media #{$xl} {
                        margin-right: 15px;
                    }
                }
            }
            &-icon{
                margin-right: 25px;
                @media #{$xl} {
                    margin-right: 14px;
                }
            }
            &-content{
                & p{
                    color: var(--tp-text-1);
                    margin-bottom: 0;
                }
            }
            &-title{
                font-weight: 500;
                font-size: 20px;
                letter-spacing: -0.8px;
                color: var(--tp-heading-primary);
            }
        }
    }
    &-wrapper-2{
        & p{
            margin-bottom: 40px;
            color: var(--tp-text-1);
        }
    }
    &-btn{
        &-wrapper-2{
            @media #{$xs} {
                flex-wrap: wrap;
            }
        }
        &-2{
            line-height: 1;
            margin-right: 50px;
            @media #{$xs} {
                margin-bottom: 20px;
            }
            & .tp-btn{
                padding: 21px 53px;
            }
        }
    }
    &-user{
        @media #{$xs} {
            margin-bottom: 20px;
        }
        &-thumb{
            margin-right: 18px;
        }
        &-content{
            & p{
                @include textGradient();
                margin-bottom: 0;
            }
            & h4{
                font-weight: 500;
                font-size: 20px;
                letter-spacing: -0.8px;
                margin-bottom: 0;
                color: var(--tp-heading-primary);
            }
        }
    }
    &-progressbar{
        position: absolute;
        bottom: 2%;
        right: 45px;
        height: 268px;
        width: 232px;
        padding: 53px;
        text-align: center;
        border-radius: 10px;
        background: var(--tp-common-white);
        box-shadow: 0px 0px 18px 5px rgba(0, 0, 0, 0.05);
        animation: updown-two 2.6s linear 0s infinite alternate;
        @media #{$lg} {
            right: 30px;
        }
        @media #{$xs} {
            right: -2px;
            bottom: -15px;
        }
        & .circular{
            margin-bottom: 15px;
            & .knob{
                font-family: var(--tp-ff-p) !important;
                color: var(--tp-theme-secondary) !important;
                font-size: 25px !important;
                font-weight: 700 !important;
                margin-left: -75px !important;
            }
        }
        & h3{
            font-family: var(--tp-ff-p);
            font-weight: 700;
            font-size: 20px;
            letter-spacing: -0.4px;
            color: #2B2B5E;
        }
    }




    &-area-3{
        @media #{$xs} {
            padding-top: 90px;
            padding-bottom: 90px;
        }
    }
    &-wrapper-3{
        & p{
            margin-bottom: 45px;
            @media #{$xl,$lg,$md,$sm,$xs} {
                margin-bottom: 20px;
            }
        }
    }
    &-thumb{
        &-wrapper-3{
            margin-top: 45px;
            margin-right: 20px;
            @media #{$md,$sm,$xs} {
                margin-bottom: 80px;
                margin-top: 0;
                margin-right: 0;
            }
            & .shape{
                position: absolute;
                top: -40px;
                right: 60px;
                z-index: -1;
                @media #{$lg} {
                    right: -45px;
                    top: -60px;
                }
                @media #{$md} {
                    right: 95px;
                    top: -60px;
                }
                @media #{$sm} {
                    right: 0;
                    top: -60px;
                }
                @media #{$xs} {
                    display: none;
                }
            }
            & .shape-2{
                position: absolute;
                top: -18%;
                right: 51%;
                animation: updown-two 2.6s linear 0s infinite alternate;
                @media #{$lg} {
                    right: 35%;
                }
                @media #{$sm} {
                    right: 45%;
                    top: -100px;
                }
                @media #{$xs} {
                    display: none;
                }
            }
            & .main{
                position: relative;
                overflow: hidden;
                & img{
                    border-radius: 170px 170px 0 0;
                }
                &::after{
                    position: absolute;
                    top: 0;
                    left: -100%;
                    display: block;
                    content: "";
                    width: 50%;
                    height: 100%;
                    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
                    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
                    -webkit-transform: skewX(-25deg);
                    transform: skewX(-25deg);
                    z-index: 1;
                }
                &:hover{
                    &::after{
                        animation: shine 1.5s;
                    }
                }
                @media #{$xs} {
                    width: 100%;
                }
            }
        }
        &-title{
            font-weight: 600;
            font-size: 48px;
            letter-spacing: -1.92px;
            color: var(--tp-common-white);
            margin: 0;
        }

        &-counter{
            background: var(--tp-gradient-primary);
            width: 244px;
            height: 252px;
            border-radius: 35px;
            padding-top: 45px;
            position: absolute;
            bottom: -77px;
            left: 20%;
            z-index: 1;
            @media #{$md,$sm} {
                left: 2%;
                bottom: -50px;
            }
            @media #{$xs} {
                left: 2%;
                bottom: -35px;
            }
            & img{
                margin-bottom: 30px;
            }
            & p{
                color: var(--tp-common-white);
            }
        }
    }
    &-btn-3{
        line-height: 1.1;
        & .tp-btn{
            padding: 22px 52px;
        }
        @media #{$lg} {
            margin-right: 15px;
        }
        @media #{$xs} {
            margin-bottom: 20px;
        }
    }
    &-video{
        @media #{$xs} {
            margin-bottom: 20px;
        }
        & a{
            font-weight: 500;
            font-size: 20px;
            letter-spacing: -0.8px;
            color: var(--tp-heading-primary);
            & span{
                font-size: 16px;
                font-weight: 900;
                width: 54px;
                height: 54px;
                display: inline-block;
                text-align: center;
                line-height: 54px;
                border-radius: 50%;
                color: var(--tp-common-white);
                background: var(--tp-gradient-primary);
                margin-right: 15px;
                @media #{$lg} {
                    margin-right: 10px;
                }
            }
        }
    }
    &-item{
        &-wrapper-3{}
        &-3{
            padding: 34px 35px;
            border-radius: 5px;
            background: var(--tp-common-gray);
        }
        &-icon-3{
            & span{
                display: inline-block;
                height: 80px;
                width: 80px;
                text-align: center;
                line-height: 80px;
                border-radius: 50%;
                background: var(--tp-common-white);
                box-shadow: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06);
                margin-right: 30px;
            }
        }
        &-title-3{
            font-weight: 600;
            font-size: 24px;
            line-height: 1.4;
            letter-spacing: -0.96px;
        }
    }




    &-breadcrumb{
        &-area{
            @media #{$xl,$lg,$md} {
                padding-bottom: 130px;
            }
            @media #{$sm,$xs} {
                padding-top: 120px;
                padding-bottom: 120px;
            }
        }
    }
}