.swiper-slide {
height: auto;
}
.gallery-item {
box-shadow: 0 1px 11px rgba(0, 0, 0, .13);
border-radius: 15px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.gallery-item__bg {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px 15px 0 0;
padding: 15px;
flex-grow: 1;
}
.gallery-item__btn {
display: flex;
font-size: 15px;
justify-content: center;
gap: 5px;
text-decoration: none;
border-radius: 40px;
text-align: center;
color: #fff;
background: linear-gradient(177.44deg, #59d069 8.28%, #23902f 91.72%);
height: 40px;
border: 0;
padding: 0 20px;
line-height: 40px;
max-width: 160px;
width: 100%;
margin: 0;
margin-top: auto;
font-weight: 700;
}
.gallery-item__title {
color: #fff;
font-size: 14px;
font-weight: 700;
margin: auto;
max-width: 99%;
padding: 4px;
text-decoration: none;
text-align:center;
}
.gallery-item__btn img {
max-width: 15px;
}
.gallery-item__content {
background: #f8f8f8;
text-align: center;
padding: 0 16px 5px;
line-height: normal;
text-align: center;
padding: 10px;
color: #686868;
font-size: 9px;
}
.gallery-item__logo img {
height: 80px;
padding-top: 12px;
margin: 0 auto;
}
.swiper {
max-width: 830px;
width: 100%;
margin-bottom: 15px;
transform: scale(1.1);
transform-origin: bottom;
}
@media (max-width:640px) {
.swiper {
height: 810px;
}	
.swiper-vertical {
touch-action: auto;
}
}
@media (max-width:930px) {
.swiper {
transform: scale(1);
}
} .swiper-pagination-bullets {
bottom: 5px !important;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: #ccc;
opacity: 1;
border-radius: 50%;
transition: background-color 0.3s;
}
.swiper-pagination-bullet-active {
background-color: #333;
} .swiper-button-prev,
.swiper-button-next {
color: #FFD700;
width: 25px;
height: 35px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: background-color 0.3s;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 18px;
font-weight: bold;
}
@media (max-width: 580px) {
.swiper {
transform: scale(1);
}
}