.carousel-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Oculta las imágenes fuera del área visible */
}

.carousel-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta las imágenes a la pantalla */
    opacity: 0; /* Hace que las imágenes no sean visibles inicialmente */
    transition: opacity 1s ease-in-out; /* Transición suave entre imágenes */
}

.carousel-image.active img {
    opacity: 1; /* Solo la imagen activa será visible */
}