@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  opacity: 0;
  animation: slideInLeft 0.8s ease-out forwards;
}

.slide-hidden {
  opacity: 0;
  transform: translateX(-100px);
}

@keyframes slideFromTop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-from-top {
  opacity: 0;
  animation: slideFromTop 0.8s ease-out forwards;
}

@keyframes slideFromBottom {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-from-bottom {
  opacity: 0;
  animation: slideFromBottom 0.8s ease-out forwards;
}