/*Animação dos elementos do hero carroulsel*/
.animar-element {
    opacity: 0;
    transition: opacity 1s ease;
}

.animacao {
    opacity: 1;
}


/* in-view-h -> diferenciais */

.animar-h {
    opacity: 0;
    transition: all 1s ease;
    transform: translateX(-50px);
}

.in-view-h {
    opacity: 1;
    transform: translateX(0px);
}


/*css dos cards*/
.animacao-cards-h {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease;
}

.in-view-cards {
    opacity: 1;
    transform: translateX(0px);
}

/* css de reveal usado pelo IntersectionObserver (in-view) */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left {
    transform: translateX(-10px);
}

.reveal-right {
    transform: translateX(10px);
}

.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view {
    opacity: 1;
    transform: translate(0, 0);
}