.bahero-wrapper {
position: relative;
width: 100%;
overflow: hidden;
height: calc(100vh - 140px);
max-height: calc(100vh - 140px);
min-height: 400px;
} .bahero-wrapper .swiper {
width: 100%;
height: 100%;
} .bahero-wrapper .swiper-slide {
overflow: hidden;
}
.bahero-wrapper .swiper-slide a {
display: block;
width: 100%;
height: 100%;
} .bahero-wrapper .swiper-slide img.bahero-img-desktop {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.bahero-wrapper .swiper-slide img.bahero-img-mobile {
display: none;
} .bahero-btn-prev,
.bahero-btn-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 42px;
height: 42px;
background: #1554ff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
}
.bahero-btn-prev svg,
.bahero-btn-next svg {
width: 20px;
height: 20px;
fill: none;
stroke: #fff;
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.bahero-btn-prev {
left: 16px;
}
.bahero-btn-next {
right: 16px;
}
.bahero-btn-prev:hover,
.bahero-btn-next:hover {
background: #0d3fcc;
} .bahero-pagination {
position: absolute !important;
bottom: 18px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10;
display: flex !important;
align-items: center;
gap: 8px;
width: auto !important;
}
.bahero-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.85);
opacity: 1;
border-radius: 50%;
cursor: pointer;
margin: 0 !important;
transition: background 0.2s ease, transform 0.2s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.3);
}
.bahero-pagination .swiper-pagination-bullet-active {
background: #1554ff;
transform: scale(1.2);
box-shadow: 0 1px 6px rgba(21,84,255,0.6), 0 0 2px rgba(0,0,0,0.3);
} @media (max-width: 768px) { .bahero-wrapper {
height: 177.78vw; max-height: 100svh;
min-height: 500px;
} .bahero-wrapper .swiper-slide img.bahero-img-desktop {
display: none;
}
.bahero-wrapper .swiper-slide img.bahero-img-mobile {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} .bahero-btn-prev,
.bahero-btn-next {
display: none;
} .bahero-pagination {
bottom: 14px;
}
}