@use '../utils' as *;

/*----------------------------------------*/
/*  03. about css start 
/*----------------------------------------*/
.tp-about{
    &__space{
        padding-top: 85px;
        padding-bottom: 110px;
    }
    &__section-box{
        padding-bottom: 35px;
        & p {
            margin-bottom: 0;
            line-height: 32px;
            font-size: 18px;
            padding-right: 180px;
            @media #{$xl}{
                padding-right: 20px;
                font-size: 16px;
            }
            @media #{$lg}{
                font-size: 14px;
                padding-right: 0;
            }
            @media #{$md,$xs}{
                font-size: 14px;
                padding-right: 0;
            }
        }
    }
    &__item-wrap{
        margin-left: 31px;
        @media #{$xl}{
            margin-left: 0px;
        }
        @media #{$lg}{
            margin-left: 0px;
        }
        @media #{$md,$xs}{
            margin-left: 0px;
        }

    }
    &__title-sm{
        font-weight: 500;
        font-size: 16px;
    }
    &__icon{
        margin-right: 15px;
    }
    &__text{
        & p {
            font-size: 13px;
            line-height: 20px;
            font-weight: 400;
            padding-right: 30px;
            @media #{$xl}{
                padding-right: 40px;
            }
            @media #{$lg,$md,$xs}{
                padding-right: 10px;
            }
        }
    }
    &__list-box{
        & ul{
            & li {
                list-style: none;
                position: relative;
                padding-left: 30px;
                font-size: 15px;
                &:not(:last-child){
                    padding-bottom: 18px;
                }
                & span {
                    position: absolute;
                    top: -3px;
                    left: 0;
                }
            }
        }
    }
    &__item-box{
        padding-bottom: 30px;
        padding-right: 105px;
        @media #{$xl,$lg,$md,$xs}{
            padding-right: 0;
        }
        @media #{$xs}{
            flex-wrap: wrap;
        }
        @media #{$sm}{
            flex-wrap:nowrap;
        }
    }
    &__thumb-box{
        margin-left: -115px;
        position: relative;
        @media #{$xxl}{
            margin-left: -85px;
        }
        @media #{$xl}{
            margin-left: 0px;
        }
        @media #{$lg,$md,$xs}{
            margin-left: 0px;
            margin-bottom: 70px;
        }
    }
    &__thumb {
        & img {
            max-width: inherit;
            @media #{$xxl}{
                max-width: 100%;
            }
            @media #{$xl}{
                max-width: 100%;
            }
            @media #{$lg}{
                max-width: 100%;
            }
            @media #{$xs}{
                max-width: 100%;
            }
        }
    }
    &__thumb-text-box{
        position: absolute;
        right: 144px;
        bottom: -6px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);
        border-radius: 4px;
        background-color: #fff;
        padding: 11px 13px;
        z-index: 1;
        @media #{$xl}{
            right: 110px;
        }
        @media #{$lg}{
            right: 85px;
            bottom: -35px;
        }
        @media #{$xs}{
            right: 20px;
            bottom: -35px;
        }
        @media #{$sm}{
            right: 110px;
            bottom: -6px;
        }
        @media only screen and (min-width: 440px) and (max-width: 575px){
            right: 70px;
        }
    }
    &__thumb-text{
        border: 1px dashed rgba(0, 0, 0, 0.16);
        border-radius: 3px;
        padding: 13px 22px;
        & span {
            font-size: 18px;
            font-weight: 400;
            color: var(--tp-common-black);
            @media #{$xl}{
                font-size: 15px;
            }
            @media #{$lg}{
                font-size: 15px;
            }
            @media #{$xs}{
                font-size: 14px;
            }
            & b {
                color: var(--tp-theme-2);
                font-size: 25px;
                @media #{$xl}{
                    font-size: 20px;
                }
                @media #{$lg}{
                    font-size: 19px;
                }
                @media #{$xs}{
                    font-size: 15px;
                }
            }
        }
    }
    &__shape-1{
        position: absolute;
        bottom: 5px;
        left: 80px;
    }
    &__shape-2{
        position: absolute;
        top: 11%;
        left: 15%;
        animation: tpswing 1s forwards infinite alternate;
    }
    &__shape-3{
        position: absolute;
        bottom: 12%;
        left: 20%;
        z-index: -1;
        & img {
            @media #{$xl}{
                max-width: 80%;
            }
            @media #{$lg}{
                max-width: 95%;
            }
            @media #{$xs}{
                max-width: 90%;
            }
        }
        @media #{$lg}{
            bottom: -4%;
            left: 5%;
            z-index: -1;
        }
        @media #{$xs}{
            bottom: 4%;
            left: 5%;
        }
        @media #{$sm}{
            left:11%;
        }
    }
    &__shape-4{
        position: absolute;
        top: 9%;
        right: 17%;
        @media #{$xl}{
            right: 11%;
        }
    }
    &__shape-5{
        position: absolute;
        top: 34%;
        left: 17%;
    }
    &__shape-6{
        position: absolute;
        bottom: 8%;
        right: 6%;
        z-index: -1;
        animation: zoom 7s infinite;
        @media #{$xl}{
            right: 0%;
        }
    }
    &__shape-7{
        position: absolute;
        bottom: 13%;
        right: -3%;
        z-index: -1;
    }
    &__shape-8{
        position: absolute;
        left: 10%;
        bottom: 21%;
        animation: moving 9s linear infinite;
    }
    &__shape-9{
        position: absolute;
        right: 0;
        bottom: 0%;
        z-index: -1;
        @media #{$xxl,$xl,$lg,$md,$xs}{
            display: none;
        }
    }
    
}