.rs-service-slider-grid .grid-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px 30px;
align-items: flex-start;
}
.rs-service-slider-grid .service-item {
position: relative;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.rs-service-slider-grid .service-item .thumbnail {
margin: 0 0 30px;
overflow: hidden;
flex-shrink: 0;
}
.rs-service-slider-grid .service-item .thumbnail img {
width: 100%;
border-radius: 6px;
transition: var(--transition);
}
.rs-service-slider-grid .service-item .icon {
font-size: 50px;
color: var(--primaryColor);
margin: 0 0 25px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.rs-service-slider-grid .service-item .icon svg,
.rs-service-slider-grid .service-item .icon img {
width: 1em;
height: 1em;
}
.rs-service-slider-grid .service-item .icon svg {
fill: currentColor;
}
.rs-service-slider-grid .service-item .content {
position: relative;
transition: var(--transition);
}
.rs-service-slider-grid .service-item .sub-title {
transition: var(--transition);
}
.rs-service-slider-grid .service-item .feature-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
}
.rs-service-slider-grid .service-item .feature-list li {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 49.14%;
transition: var(--transition);
}
.rs-service-slider-grid .service-item .feature-list li:before {
content: "\eb7b";
font-family: remixicon;
color: var(--bodyColor);
line-height: 1;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--bodyColor);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-shrink: 0;
transition: var(--transition);
}
.rs-service-slider-grid .service-item .feature-list li.feature-cross:before {
content: "\eb99";
}
.rs-service-slider-grid .service-item .btn-wrap a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 30px;
background: var(--primaryColor);
color: var(--whiteColor);
transition: var(--transition);
}
.rs-service-slider-grid .service-item .btn-wrap a:hover {
background: var(--secondaryColor);
color: var(--whiteColor);
}
.rs-service-slider-grid .service-item .btn-wrap a svg {
fill: currentColor;
width: 1em;
height: 1em;
}
.rs-service-slider-grid .service-item .title {
margin: 0;
transition: var(--transition);
color: var(--titleColor);
}
.rs-service-slider-grid .service-item .title a {
color: var(--titleColor);
}
.rs-service-slider-grid .service-item .title-animated-border {
position: relative;
padding-bottom: 22px;
}
.rs-service-slider-grid .service-item .title-animated-border::before, .rs-service-slider-grid .service-item .title-animated-border::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: rgba(0, 0, 0, 0.15);
transition: 0.4s;
}
.rs-service-slider-grid .service-item .title-animated-border::after {
background-color: rgb(0, 0, 0);
width: 70px;
}
.rs-service-slider-grid .service-item .description {
margin: 20px 0 0;
transition: var(--transition);
}
.rs-service-slider-grid .service-item.hovered-item .title-animated-border::after, .rs-service-slider-grid .service-item:hover .title-animated-border::after {
width: 85%;
}
.rs-service-slider-grid .service-item.icon-effect-active:hover .icon {
animation: tubeline 0.6s;
}
.rs-service-slider-grid.style-one .service-item .thumbnail {
margin: 0;
}
.rs-service-slider-grid.style-one .service-item .content {
position: absolute;
left: 0;
bottom: 0;
width: calc(100% - 30px);
padding: 40px 30px;
border-radius: 0 6px 0 6px;
background: radial-gradient(175% 135% at 35% -15%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
backdrop-filter: blur(42px);
transition: 0.4s;
}
.rs-service-slider-grid.style-one .service-item .title,
.rs-service-slider-grid.style-one .service-item .title a,
.rs-service-slider-grid.style-one .service-item .description,
.rs-service-slider-grid.style-one .service-item .icon {
color: var(--whiteColor);
}
.rs-service-slider-grid.style-one .service-item .title-animated-border::before, .rs-service-slider-grid.style-one .service-item .title-animated-border::after {
background-color: rgba(255, 255, 255, 0.15);
}
.rs-service-slider-grid.style-one .service-item .title-animated-border::after {
background-color: rgb(255, 255, 255);
}
.rs-service-slider-grid.style-one .service-item .icon {
margin: 0 20px 0 0;
flex-shrink: 0;
}
.rs-service-slider-grid.style-one .service-item .title-icon-wrap {
display: flex;
align-items: center;
}
.rs-service-slider-grid.style-one .service-item .description {
display: none;
transition: none;
}
@keyframes tubeline {
from, to {
transform: scale(1, 1);
}
25% {
transform: scale(0.7, 1.1);
}
50% {
transform: scale(1.1, 0.7);
}
75% {
transform: scale(0.95, 1.05);
}
}