.swiper {
width: 100%;
height: 90vh;
border-radius: 8px;
}
.swiper-slide {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.slide-content {
position: absolute;
top: 25%;
right: 10%;
transform: translateY(-50%);
text-align: left;
z-index: 10;
}
.slide-content h4 {
font-size: 16px;
letter-spacing: 2px;
margin-bottom: 10px;
font-weight: 300;
color: white;
}
.slide-content h1 {
font-size: 48px;
line-height: 1.2;
font-weight: bold;
margin-bottom: 20px;
color: white;
}
.slide-content.white-clr h1,
.slide-content.white-clr h4 {
color: #fff;
} .swiper-pagination {
display: flex;
justify-content: center;
gap: 10px;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 3rem;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
opacity: 0.6;
transition: 0.3s;
}
.swiper-pagination-bullet-active {
width: 40px;
border-radius: 20px;
background-color: #8a6b52;
opacity: 1;
}
@media screen and (max-width: 1024px) {
.swiper {
height: 70vh;
}
}
@media screen and (max-width: 788px) {
.slide-content h1 {
font-size: 24px;
color: white;
}
.slide-content{
left: 10%;
right: unset;
}
}