.reactheme__service {
overflow: hidden;
position: relative;
text-align: center;
color: #f8f9fa;
--bg-dark-1-rgb: 28, 75, 65;
}
.reactheme__service * {
transition: var(--transition);
}
.reactheme__service_img {
width: 100%;
display: block;
transition: var(--transition);
transform: scale(1);
}
.reactheme__service_content {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
opacity: 0;
margin-top: 40px;
width: 100%;
padding-left: 24px;
padding-right: 24px;
}
.reactheme__service_title {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
margin-top: 16px;
width: 100%;
opacity: 1;
text-align: center;
}
.reactheme__service_title .title {
color: #fff;
}
.reactheme__service .gradient-trans-dark-bottom {
background: linear-gradient(180deg, rgba(var(--bg-dark-1-rgb), 0) 0%, rgba(var(--bg-dark-1-rgb), 1) 100%);
position: absolute;
height: 80%;
width: 100%;
bottom: 0;
transition: var(--transition);
}
.reactheme__service:hover .reactheme__service_content {
opacity: 1;
margin-top: 0;
}
.reactheme__service:hover .reactheme__service_overlay {
opacity: 1;
}
.reactheme__service:hover .reactheme__service_title {
opacity: 0;
}
.reactheme__service:hover .reactheme__service_img {
transform: scale(1.1);
}
.reactheme__service:hover .gradient-trans-dark-bottom {
opacity: 0;
}
.reactheme__service .centered__item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
opacity: 0;
margin-top: 40px;
width: 100%;
}
.reactheme__service.style2 .reactheme__service_title {
position: absolute;
top: 0;
z-index: 3;
width: 100%;
opacity: 1;
text-align: center;
height: 100%;
transform: translate(0);
left: 0;
margin: 0;
padding: 24px;
}
.reactheme__service.style2 .reactheme__service_title .title {
color: #fff;
}
.reactheme__service.style2 .gradient-edge-top {
background: linear-gradient(180deg, rgba(var(--bg-dark-1-rgb), 1) 0%, rgba(var(--bg-dark-1-rgb), 0) 100%);
position: absolute;
height: 50%;
width: 100%;
top: 0;
transition: var(--transition);
opacity: 0.8;
}
.reactheme__service.style2:hover .reactheme__service_img {
transform: scale(1);
}
.rt-swiper-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 9;
width: 100%;
display: flex;
justify-content: space-between;
}
.rt-swiper-navigation .swiper-prev, .rt-swiper-navigation .swiper-next {
display: block;
color: #ffffff;
padding: 5px 0;
font-size: 20px;
width: 40px;
height: 40px;
background: var(--e-global-color-primary);
text-align: center;
line-height: 1.5;
}
.rt-swiper-navigation .swiper-prev {
position: relative;
z-index: 1;
cursor: pointer;
border-radius: 0 20px 20px 0;
}
.rt-swiper-navigation .swiper-next {
position: relative;
z-index: 1;
cursor: pointer;
border-radius: 20px 0 0 20px;
}