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

.cst-service{
    &-ptb{
        @media #{$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,$xs} {
                padding: 0 20px 20px;
            }
            & p{
                & br{
                    @media #{$xl,$lg,$md,$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 #{$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 #{$xs} {
                left: 0;
                margin: 20px;
            }
        }
    }
}

.ais-exp{
    &-ptb{
        @media #{$md,$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,$xs} {
                display: none;
            }
        }
    }
    &-heading{
        & p{
            color: #61616A;
            font-weight: 500;
            margin-bottom: 40px;
            @media #{$md,$xs} {
                margin-bottom: 20px;
            }
            & span{
                color: var(--tp-common-black-7);
            }
            & br{
                @media #{$lg,$md,$xs} {
                    display: none;
                }
            }
        }
    }
    &-thumb{
        &-shapes{
            @media #{$lg,$md,$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,$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 #{$xs} {
            display: none;
        }
    }
    &-wrapper{
        border-radius: 26px;
        padding: 50px 50px 50px 80px;
        @media #{$lg,$md} {
            padding: 50px 50px 50px 50px;
        }
        @media #{$xs} {
            padding: 40px;
        }
    }
}