@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100rem);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100rem);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.left-text {
    opacity: 0;
}
.left-text.animate {
    animation: slideInFromLeft 0.5s ease-out forwards;
}
.right-text {
    opacity: 0;
}
.right-text.animate {
    animation: slideInFromRight 0.5s ease-out forwards;
}