@use '../../../utils' as *;
/*----------------------------------------*/
/*   3.2 Service Style
/*----------------------------------------*/

.cst-service{
    &-ptb{
        @media #{$sm,$xs} {
            padding-bottom: 100px;
        }
    }
    &-item{
        border-radius: 32px;
        padding: 30px 16px 16px;
        &:hover{
            & .cst-service-item{
                &-thumb{
                    & img{
                        transform: scale(1.2);
                    }
                }
            }
        }
        &-icon{
            & span{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                text-align: center;
                display: inline-grid;
                place-content: center;
                background-color: rgba($color: #050312, $alpha: 0.1);
            }
        }
        &-title{
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 14px;
            text-transform: uppercase;
            color: var(--tp-common-black-7);
            font-family: var(--tp-ff-phudu);
        }
        &-content{
            padding: 0 20px 40px;
            @media #{$xl,$lg,$md,$sm,$xs} {
                padding: 0 20px 20px;
            }
            & p{
                font-family: var(--tp-ff-inter);
                font-size: 18px;
                & br{
                    @media #{$xl,$lg,$md,$sm,$xs} {
                        display: none;
                    }
                }
            }
        }
        &-thumb{
            overflow: hidden;
            border-radius: 16px;
            & img{
                border-radius: 16px;
                transition: all .5s ease-in-out;
            }
        }
    }
}


.cnt-service{
    &-mlr{
        overflow: hidden;
        margin-left: 60px;
        margin-right: 60px;
        @media #{$lg} {
            margin-left: 35px;
            margin-right: 35px;
        }
        @media #{$md} {
            margin-left: 30px;
            margin-right: 30px;
        }
        @media #{$sm,$xs} {
            margin-left: 20px;
            margin-right: 20px;
        }
        & .ar-service-height{
            border-radius: 20px;
        }
        & .ar-service-title-box {
            left: 5%;
            @media #{$xl} {
                margin: 90px 60px 60px 40px;
            }
            @media #{$md} {
                margin: 40px;
                left: 0;
            }
            @media #{$sm,$xs} {
                left: 0;
                margin: 20px;
            }
        }
    }
}

.ais-exp{
    &-ptb{
        @media #{$md,$sm,$xs} {
            padding-bottom: 60px;
        }
    }
    &-bg{
        &::after{
            position: absolute;
            content: "";
            top: -10%;
            left: 42%;
            width: 400px;
            height: 400px;
            transform: translateX(-50%);
            border-radius: 384px;
            background: #92E8ED96;
            filter: blur(250px);
        }
    }
    &-shape{
        &-3{
            position: absolute;
            right: -24%;
            top: -27%;
            animation: shake 2.5s ease infinite;
            -webkit-animation: shake 2.5s ease infinite;
            @media #{$x3l} {
                top: -34%;
                right: -8%;
            }
            @media #{$xxl} {
                top: -35%;
                right: -5%;
            }
            @media #{$xl} {
                right: -4%;
            }
            @media #{$lg} {
                right: -2%;
            }
            @media #{$md,$sm,$xs} {
                display: none;
            }
        }
    }
    &-heading{
        & p{
            color: #61616A;
            font-weight: 500;
            margin-bottom: 40px;
            font-family: var(--tp-ff-inter);
            font-size: 18px;
            @media #{$md,$sm,$xs} {
                margin-bottom: 20px;
            }
            & span{
                color: var(--tp-common-black-7);
            }
            & br{
                @media #{$lg,$md,$sm,$xs} {
                    display: none;
                }
            }
        }
    }
    &-thumb{
        &-shapes{
            @media #{$lg,$md,$sm,$xs} {
                display: none;
            }
            & .shape{
                &-1{
                    top: 8%;
                    left: -13%;
                    position: absolute;
                    @media #{$xxl,$xl} {
                        left: -4%;
                    }
                }
                &-2{
                    right: 5%;
                    bottom: 4%;
                    position: absolute;
                }
            }
        }
        &-wrapper{
            & img{
                @media #{$md,$sm,$xs} {
                    width: 100%;
                }
            }
        }
    }
}


.ais-service{
    &-bdr{
        border-top: 1px solid rgba(5, 3, 18, 0.10);
        border-bottom: 1px solid rgba(5, 3, 18, 0.10);
    }
    &-shape{
        position: absolute;
        left: -5%;
        bottom: 6%;
        z-index: 1;
        @media #{$sm,$xs} {
            display: none;
        }
    }
    &-wrapper{
        border-radius: 26px;
        padding: 50px 50px 50px 80px;
        @media #{$lg,$md} {
            padding: 50px 50px 50px 50px;
        }
        @media #{$sm,$xs} {
            padding: 40px;
        }
    }
}

.ar-service{
    &-mr{
        margin-right: 210px;
        @media #{$xxl,$xl,$lg,$md,$sm,$xs}{
            margin-right: 0;
        }
    }
    &-height{
        height: 800px;
        display: flex;
        @media #{$sm,$xs} {
            height: 600px;
        }
    }
    &-bg{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -2;
        opacity: 0;
        visibility: hidden;
        transition: .4s linear;
        transform: scale(1);
        background-size: cover;
        background-repeat: no-repeat;
        &::after{
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(20, 20, 20, 0.3);
        }
    }
    &-title{
        font-size: 18px;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--tp-common-white);
        font-family: var(--tp-ff-clash-medium);
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin-bottom: 50px;
        margin-right: 50px;
        &::before{
            content: "";
            height: 0px;
            width: 2px;
            margin-bottom: 5px;
            transition: all .4s;
            display: inline-block;
            transform: translateY(-4px);
            background-color: var(--tp-common-white);
        }
    }
    &-item{
        height: 100%;
        width: 25%;
        cursor: pointer;
        &:not(:last-child){
            border-right: 1px solid rgba(255, 255, 255, 0.2);
        }
        &.active{
            & .ar-service-bg{
                opacity: 1;
                visibility: visible;
                transform: scale(1.03);
            }
        }
        &:hover{
            & .ar-service-title{
                &::before{
                    height: 30px;
                }
            }
        }
    }
    &-title{
        &-box{
            position: absolute;
            top: 0;
            left: 0;
            margin: 150px 100px 100px 100px;
            @media #{$lg}{
                margin: 60px 60px 60px 60px;
            }
            @media #{$xs}{
                margin: 40px;
            }
        }
    }
}