/* Fade-in */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.fade-in.animate {
  opacity: 1;
}

/* Slide-right-to-left */
.slide-right-to-left {
  opacity: 0;
  transform: translateX(100px);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.slide-right-to-left.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Slide-left-to-right */
.slide-left-to-right {
  opacity: 0;
  transform: translateX(-100px);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.slide-left-to-right.animate {
  opacity: 1;
  transform: translateX(0);
}

.slide-up-to-down {
  opacity: 0;
  transform: translate3d(0, -50px, 0); /* Updated for 3D translation */
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.slide-up-to-down.animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.slide-down-to-up {
  opacity: 0;
  transform: translate3d(0, 50px, 0); /* Updated for 3D translation */
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.slide-down-to-up.animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}