.box,
.box1,
.box2,
.box3 {
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.visible {
  opacity: 1;
  transform: translateX(0%);
}

/* Reverse animation for right-to-left */
.box-reverse,
.box1-reverse,
.box2-reverse,
.box3-reverse {
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.visible-reverse {
  opacity: 1;
  transform: translateX(0%);
}