@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.animate-text {
  opacity: 0; /* Initially hidden */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-text.left-to-right {
  animation: fadeInUp 1.5s forwards;
  animation-delay: 1s;
}

@keyframes heightIncrease {
  0% {
    opacity: 1;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 100%;
  }
}
.animate-small-img {
  opacity: 0; /* Initially hidden */
}

.animate-small-img.top-to-bottom {
  animation: heightIncrease 2s forwards;
  animation-delay: 2s;
}

.aspects-arrow {
  animation: moveArrow 2.5s ease-in-out infinite; /* Total duration of 4s */
}

@keyframes moveArrow {
  0% {
    transform: translateY(0); /* Start at the top */
  }
  25% {
    transform: translateY(30px); /* Smoothly move down in 1s */
  }
  50% {
    transform: translateY(30px); /* Hold at the bottom for 1s */
  }
  75% {
    transform: translateY(0); /* Smoothly move up in 1s */
  }
  100% {
    transform: translateY(0); /* Hold at the top for 1s before the next cycle */
  }
}
.fade-in {
  opacity: 0;
  animation: fadeInAnimation 1s ease-in forwards;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}/*# sourceMappingURL=animation.css.map */