@import '../../../scss/base';

.service-one-inner-four{
   background: #fff;
   .content{
    padding: 50px;
        .icon{
            padding: 20px;
            width: 100px;
            height: 100px;
            background: #F2F2F2;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            transition: 0.3s;    
        }
        .title{
            font-weight: 600;
            margin-bottom: 10px;
        }
        .disc p{
            margin-bottom: 0;
        }
    }
    .big-thumbnail-area{
        position: relative;
        img{
            border-top:2px solid $primaryColor;
        }
        a.rts-btn{
            position: absolute;
            left: 50px;
            top: 0;          
            border-radius: 0;  
            overflow: hidden;
            z-index: 1;
            text-transform: uppercase;
            padding:14px 33px;
            &:after{
                position: absolute;
                left: 0;
                top: 0px;
                width: 100%;
                height: 100%;
                content: "";
                background:$titleColor;
                transform: translateY(110%);
                transition: 0.3s;
                transition-delay: 0.1s;
                z-index: -1;
            }  
            &:hover{
                color:$whiteColor;
                &:after{
                    transform: translateY(0);
                    
                }
                
            }      
        }
    }
    &:hover{
        .content{
            .icon{
                background: $primaryColor;
                path{
                    fill: $whiteColor;
                }
            }
        }
    }
}
.rt-service--slider{
    .swiper-pagination-bullet{
        margin:0 15px !important;
    }
    .swiper-pagination-bullet-active{
        background: $primaryColor;
        position: relative;
        &:after{
            border: 2px solid #ff6600;
            width: 20px;
            height: 20px;
            line-height: 20px;
            content: "";
            position: absolute;
            border-radius: 50%;
            top: -7px;
            left: -7px;
        }
    }
}