/* Estilos para el Slider */
#slider {
    overflow: hidden;
    max-width: 100%;
    height: 700px;
    position: relative;

}

.slides-container {
    display: flex;
    width: 100%;
    height: 100%;
    animation: slide-animation 10s infinite;
}


#slide-1 {
    background-image: url('../assets/img/slider1.jpg');
}

#slide-2 {
    background-image: url('../assets/img/slider2.jpg');
}

#slide-3 {
    background-image: url('../assets/img/slider3.jpg');
}

#slide-4 {
    background-image: url('../assets/img/slider4.jpg');
}

/* Estilos para los títulos de los slides */
.slide-title {
    position: absolute;
    bottom: 50%;
    left: 10%;
    color: #fff;
    font-size: 24px;
    background-color: rgba(204, 32, 32, 0.5);
    padding: 10px;
    border-radius: 5px;
    font-family: Montserrat;
    font-weight: bold;
    font-size: 2rem;
}

.slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease-in-out;
}



/* Animación */
@keyframes slide-animation {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-100%);
    }

    45% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(-200%);
    }

    70% {
        transform: translateX(-200%);
    }

    75% {
        transform: translateX(-300%);
    }

    95% {
        transform: translateX(-300%);
    }

    100% {
        transform: translateX(-300%);
    }
}