.slide-up {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s;
}
  
.slide-up.animar {
    animation: slide-up 1s ease-in forwards;
}

.slide-right-to-left {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s;
}
  
.slide-right-to-left.animar {
    animation: slide-right-to-left 0.5s ease-in forwards;
}

.slide-left-to-right  {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s;
  }
  
.slide-left-to-right.animar {
    animation: slide-left-to-right 0.5s ease-in forwards;
}
  
.slide-bottom-faqs {
    animation: slide-bottom-faqs 0.5s ease-in forwards;
}




@keyframes slide-up {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
}
@keyframes slide-right-to-left {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0); 
        opacity: 1;
    }
}

@keyframes slide-left-to-right {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0); 
        opacity: 1;
    }
}

@keyframes slide-bottom-faqs {
    0% {
        transform: translateY(-30%);
        opacity: 0;
    }
    100% {
        transform: translateY(0); 
        opacity: 1;
    }
}
@keyframes slide-bottom-faqs-close {
    0% {
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateY(100%); 
        opacity: 0;
    }
}