/* 100% Width Layout Container */
.city-gallery-slider {
    width: 100%;
    max-width: 100%;
    height: 450px;

    position: relative;
    overflow: hidden;
}

.city-gallery-slider .swiper-slide {
    width: 80%;
    /* Takes up 80% width when using slidesPerView: 'auto' */
    height: 100%;
}

.city-gallery-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prevents image distortion */
    border-radius: 30px;
    /* Smooth card edges */
}

/* Modern Dots Styles */
.city-gallery-slider .modern-dots {
    bottom: 20px !important;
    /* Move dots above bottom line */
}

.city-gallery-slider .modern-dots .swiper-pagination-bullet {
    background: #0093DA;
    /* Base color for inactive dots */
    opacity: 0.6;
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}

/* Modern active dot transition into an elongated pill */
.city-gallery-slider .modern-dots .swiper-pagination-bullet-active {
    background: #0093DA;
    /* Accent color for active slide */
    opacity: 1;
    width: 24px;
    /* Makes it a capsule/pill */
    border-radius: 4px;
}

@media (max-width: 768px) {
    .city-gallery-slider .swiper-slide {
        width: 100%;
        max-width: 100%;

        position: relative;
        overflow: hidden;
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .city-gallery-slider {
        height: 250px;
    }
    .city-gallery-slider .swiper-slide {
        width: 100%;
        max-width: 100%;
        height: 250px;

        position: relative;
        overflow: hidden;
        padding: 0 10px;
    }
}