/* Estilos para el contenedor del slider */
#image-slider {
    position: relative;
    width: 100%;
    height: 60vh; /* Ajusta la altura en proporción al alto de la ventana del navegador */
    max-height: 850px; /* Altura máxima para pantallas grandes */
    overflow: hidden;
}

/* Estilos para las imágenes del slider */
.slider-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para que cubra el contenedor */
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.slider-image.active {
    opacity: 1;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    #image-slider {
        height: 30vh; /* Ajusta la altura del slider en pantallas pequeñas */
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 769px) {
    #image-slider {
        height: 70vh; /* Ajusta la altura del slider en pantallas grandes */
    }
}