/*************************** EFEITOS DE MOVIMENTO DOS ELEMENTOS - CSS ********************************/
.slide-left, .slide-right, .slide-up {
    will-change: transform, opacity;  /* Indica ao navegador para otimizar essas propriedades */
}

.slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Controle do atraso para cada slide-left */
.slide-left-1 {
    transition-delay: 0ms;
}
.slide-left-2 {
    transition-delay: 100ms;
}
.slide-left-3 {
    transition-delay: 200ms;
}
.slide-left-4 {
    transition-delay: 300ms;
}
.slide-left-5 {
    transition-delay: 400ms;
}

.slide-left.active {
    opacity: 1;
    transform: none;
}


.slide-right {
    opacity: 0;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Controle do atraso para cada slide-right */
.slide-right-1 {
    transition-delay: 0ms;
}
.slide-right-2 {
    transition-delay: 100ms;
}
.slide-right-3 {
    transition-delay: 200ms;
}
.slide-right-4 {
    transition-delay: 300ms;
}
.slide-right-5 {
    transition-delay: 400ms;
}

.slide-right.active {
    opacity: 1;
    transform: none;
}


.slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Controle do atraso para cada slide-up */
.slide-up-1 {
    transition-delay: 0ms;
}
.slide-up-2 {
    transition-delay: 100ms;
}
.slide-up-3 {
    transition-delay: 200ms;
}
.slide-up-4 {
    transition-delay: 300ms;
}
.slide-up-5 {
    transition-delay: 400ms;
}

.slide-up.active {
    opacity: 1;
    transform: translateY(0);
}