/* Responsive Slides CSS */

/* Make slides responsive on all devices */
.slider-element .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-width: 100%;
}

/* Fix for mobile devices */
@media (max-width: 767.98px) {
    .slider-element {
        height: auto !important;
        min-height: auto !important;
    }
    
    .slider-element .swiper-slide {
        height: auto !important;
    }
    
    .slider-element .swiper-slide-bg {
        height: 100% !important;
        background-size: contain !important;
        background-position: center center !important;
    }
    
    .slider-element .slider-caption {
        position: relative;
        width: 100%;
        padding: 15px;
    }
    
    .slider-element .swiper-slide img.rev-slidebg {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Bootstrap 100% width for all devices */
.slider-element .container,
.slider-element .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.slider-element .slider-inner,
.slider-element .swiper-container,
.slider-element .swiper-wrapper,
.slider-element .swiper-slide {
    width: 100% !important;
}

/* Fix image display on all devices */
.swiper-slide-bg {
    background-size: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide duplicate images */
.slider-caption img {
    display: none !important;
}

/* Show background images properly */
.swiper-slide-bg {
    display: block !important;
    opacity: 1 !important;
}

/* Adjust height for different devices */
@media (min-width: 992px) {
    .slider-element {
        height: 70vh !important;
        min-height: 500px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .slider-element {
        height: 60vh !important;
        min-height: 400px;
    }
}

@media (max-width: 767.98px) {
    .slider-element {
        height: 50vh !important;
        min-height: 300px;
    }
}