.animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
}


.fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.6s ease;
}

.fade-up.is-visible {
      opacity: 1;
      transform: translateY(0);
}


.fade-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-left.is-visible {
      opacity: 1;
      transform: translateX(0);
}


.fade-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-right.is-visible {
      opacity: 1;
      transform: translateX(0);
}


.fade-scale {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.5s ease, transform 0.5s ease;

}

.fade-scale.is-visible {
      opacity: 1;
      transform: scale(1);
}


.delay-1 {
      transition-delay: 0.1s;
}

.delay-2 {
      transition-delay: 0.3s;
}

.delay-3 {
      transition-delay: 0.5s;
}

.delay-4 {
      transition-delay: 0.6s;
}