@use '../utils' as *;

/*----------------------------------------*/
/*  07. busienss css start 
/*----------------------------------------*/
.tp-business{
    &__bg{
        background: linear-gradient(180deg, #FCF5FC 0.01%, rgba(246, 245, 250, 0) 100%);
        border-radius: 40px;
        margin:0 60px;
        padding-top: 95px;
        @media #{$lg}{
            margin:0 20px;
        }
        @media #{$md,$xs}{
            margin:0px;
        }
    }
    &__item{
        & span {
            height: 105px;
            width: 105px;
            line-height: 105px;
            border-radius: 50%;
            display: inline-block;
            align-items: center;
            text-align: center;
            margin-bottom: 20px;
            transition: all 0.3s ease-out 0s;
            color: var(--tp-common-purple-2);
            background-color: var(--tp-common-white);
        }
        &:hover {
            & svg {
                animation: icon-bounce 0.8s 1;
            }
        }
    }
    &__title{
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        text-transform: capitalize;
        @media #{$lg}{
           font-size: 15px;
        }
        @media #{$md}{
           font-size: 16px;
        }
        @media #{$xs}{
           font-size: 13px;
        }
    }
    &__left-thumb {
        position: relative;
        @media #{$md,$xs}{
            margin-bottom: 70px;
        }
    }
    &__shape-1{
        position: absolute;
        bottom: -16px;
        right: 58px;
        @media #{$lg}{
           right: -40px;
           bottom: -25px;
         }
        & img {
            @media #{$lg}{
                max-width: 80%;
             }
            @media #{$md,$xs}{
                font-size: 16px;
             }
        }
    }
    &__shape-2{
        position: absolute;
        bottom: 32%;
        left: -14%;
        animation: moving 9s linear infinite;
    }
    &__shape-3{
        position: absolute;
        bottom: 50.3%;
        left: -20%;
    }
    &__shape-4{
        position: absolute;
        top: 15%;
        left: 6%;
        animation: zoom 7s infinite;
        @media #{$xl}{
            top: 12%;
            left: -2%;
        }
    }
    &__content{
        position: relative;
        z-index: 1;
        &.active{
            & .tp-business__number{
                & span {
                    color: var(--tp-common-white);
                    &::after{
                        background: linear-gradient(166.19deg, #F15C92 5.02%, #9364D6 56.44%, #6790F5 90.14%);
                    }
                }
            }
        }
    }
    &__number {
        & span {
            font-weight: 500;
            font-size: 20px;
            font-family: var(--tp-ff-heading);
            color: var(--tp-common-black);
            display: inline-block;
            height: 59px;
            width: 59px;
            border-radius: 50%;
            line-height: 59px;
            text-align: center;
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04);
            margin-right: 42px;
            position: relative;
            transition: transform 300ms ease;
            @media #{$xs}{
                margin-right: 20px;
            }
            &::after{
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background: #fff;
                transition: transform 300ms ease;
                border-radius: 50%;
                z-index: -1;
            }
        }
    }
    &__content-title{
        font-weight: 500;
        font-size: 22px;
        line-height: 30px;
        text-transform: capitalize;
        padding-bottom: 5px;
        @media #{$xl}{
            font-size: 20px;
         }
         @media #{$lg}{
            font-size: 17px;
        }
         @media #{$md,}{
            font-size: 20px;
        }
         @media #{$xs}{
            font-size:17px;
        }
    }
    &__content-box{
        margin-left: 10px;
        @media #{$lg,$md,$xs}{
            margin-left: 0;
        }
        & ul {
            & li {
                list-style: none;
                &:not(:last-child){
                    padding-bottom: 50px;
                    @media #{$xl}{
                        padding-bottom: 20px;
                    }
                    @media #{$lg}{
                        padding-bottom: 20px;
                    }
                    @media #{$md,$xs}{
                        padding-bottom: 30px;
                    }
                }
            }
        }
    }
    &__content-text{
        & p {
            padding-right: 140px;
            @media #{$xl}{
               font-size: 15px;
               padding-right: 40px;
             }
            @media #{$lg}{
               font-size: 14px;
               padding-right: 40px;
             }
            @media #{$md}{
                font-size: 14px;
                padding-right: 172px;
            }
            @media #{$xs}{
                font-size: 14px;
                padding-right:0;
            }
        }
    }
    &__content-shape{
        position: absolute;
        left: 5%;
        top: 4%;
        @media #{$xl}{
            left: 6%;
          }
        @media #{$lg}{
            left: 7%;
            top: 0;
        }
        @media #{$md}{
            left: 4.4%;
            top: 4%;
        }
    }
    &__section-box{
       & .tp-section-subtitle{
        margin-bottom: 10px;
       }
    }
}