.rs-service-flex {
position: relative;
overflow: hidden;
}
.rs-service-flex > img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.1);
transition: all 0.6s ease-in-out;
opacity: 0;
visibility: hidden;
}
.rs-service-flex > img.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.rs-service-flex .row {
position: relative;
z-index: 1;
margin: 0;
}
.rs-service-flex .row .grid-item {
padding: 0;
}
.rs-service-flex .row .grid-item .service-inner {
border-right: 1px solid rgba(255, 255, 255, 0.2);
min-height: 600px;
display: flex;
flex-direction: column;
position: relative;
justify-content: flex-end;
padding: 30px;
transition: all 0.3s ease 0s;
background: transparent;
}
.rs-service-flex .row .grid-item .service-inner .title {
margin-bottom: 15px;
}
.rs-service-flex .row .grid-item .service-inner .title a {
color: #fff;
}
.rs-service-flex .row .grid-item .service-inner .title a:hover {
color: #2B4DFF;
}
.rs-service-flex .row .grid-item .service-inner .desc {
color: #fff;
height: 0;
transform: scaleY(0);
transition: all 0.3s ease 0s;
}
.rs-service-flex .row .grid-item .service-inner .btn-part {
margin-top: 15px;
}
.rs-service-flex .row .grid-item .service-inner .btn-part .service-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
color: #fff;
}
.rs-service-flex .row .grid-item .service-inner .btn-part .service-btn i {
font-size: 18px;
color: #fff;
}
.rs-service-flex .row .grid-item .service-inner .btn-part .service-btn svg {
width: 18px;
height: 18px;
}
.rs-service-flex .row .grid-item .service-inner .btn-part .service-btn svg path {
fill: #fff;
}
.rs-service-flex .row .grid-item.active .service-inner {
background: rgba(20, 74, 127, 0.4);
}
.rs-service-flex .row .grid-item.active .service-inner .desc {
height: 78px;
transform: scaleY(1);
}
.rs-service-flex .row .grid-item:last-child .service-inner {
border-right-width: 0;
}