/* Contenedor principal del carrusel en la zona de héroe */
.background_slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Asegura que las imágenes no se desborden */
    z-index: -1; /* Mantiene el carrusel detrás del contenido principal (header, slider_section) */
}

/* Contenedor individual de cada imagen */
.slide_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: quickSlide 55s linear infinite; /* Animación de 15s para 3 imágenes (5s por imagen) */
    background-size: cover;
    background-position: center;
    transform: translateX(100%); /* Todas las imágenes comienzan fuera de vista a la derecha */
}

/* Estilos de las imágenes dentro de cada slide */
.slide_image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin distorsionarse */
}

/* Si tienes 3 imágenes (como en el ejemplo anterior) */
/* La duración total de la animación es 15s, lo que da 5s por imagen. */
.background_slider .slide_image:nth-child(1) {
    animation-delay: 0s;
}

.background_slider .slide_image:nth-child(2) {
    animation-delay: 5s; /* La segunda imagen comienza 5 segundos después */
}

.background_slider .slide_image:nth-child(3) {
    animation-delay: 10s; /* La tercera imagen comienza 10 segundos después */
}

.background_slider .slide_image:nth-child(4) {
    animation-delay: 15s; /* La tercera imagen comienza 10 segundos después */
}

.background_slider .slide_image:nth-child(5) {
    animation-delay: 20s; /* La tercera imagen comienza 10 segundos después */
}

.background_slider .slide_image:nth-child(6) {
    animation-delay: 25s; /* La tercera imagen comienza 10 segundos después */
}

.background_slider .slide_image:nth-child(7) {
    animation-delay: 30s; /* La tercera imagen comienza 10 segundos después */
}

.background_slider .slide_image:nth-child(8) {
    animation-delay: 35s; /* La tercera imagen comienza 10 segundos después */
}


/* Define la nueva animación para un deslizamiento rápido, sin difuminado y pegado */
@keyframes quickSlide {
    0% {
        transform: translateX(100%); /* La imagen comienza completamente fuera, a la derecha */
    }
    5% { /* Se desliza rápidamente para aparecer */
        transform: translateX(0%); /* Entra al centro de la pantalla */
    }
    35% { /* Permanece en pantalla por un buen tiempo (30% del ciclo de la imagen) */
        transform: translateX(0%);
    }
    40% { /* Se desliza rápidamente para desaparecer */
        transform: translateX(-100%); /* Sale completamente a la izquierda */
    }
    100% {
        transform: translateX(-100%); /* Permanece oculta fuera de la pantalla hasta el siguiente ciclo */
    }
}