@keyframes fade-top {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    transform: translateY(140);
    opacity: 1;
  }
}

@keyframes fade-bottom {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

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

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

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


.hide-scroll {
  overflow-x: hidden;
  /* Hide horizontal scrollbar */
}

.reveal {
  position: relative;
  /* transform: translateX(150px); */
  opacity: 0;
  transition: 1s all ease;
}

/* body {
    overflow-x: hidden;
  } */

.reveal.active {
  transform: translateX(0);
  opacity: 1;
}

.active.fade-top {
  animation: fade-top 1s ease-in;
}

.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}

.active.fade-left {
  animation: fade-left 1s ease-in;
}

.active.fade-right {
  animation: fade-right 1s ease-out;
  animation-duration: 2s;
}