.scroll-animate-left,
.scroll-animate-right,
.scroll-animate-top,
.scroll-animate-under {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.scroll-animate-left {
  transform: translateX(-60px);
}
.scroll-animate-right {
  transform: translateX(60px);
}
.scroll-animate-top {
  transform: translateY(60px);
}
.scroll-animate-under {
  transform: translateY(-60px);
}

.scroll-animate-cert,
.grid-item,
.card-3,
.e-section-item,
.s-section,
.step-block,
.benefit-card-box {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rd-header-section,
.card-vision {
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 0.5s ease, transform 1s ease;
}

.rd-rectangle-content-circle {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 1s ease;
}

.scroll-animate-zoom {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s ease, transform 1s ease;
}

.process-block {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease, transform 1s ease;
}

.rd-title {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.scroll-animate-left.active,
.scroll-animate-right.active,
.scroll-animate-top.active,
.scroll-animate-under.active,
.scroll-animate-cert.active,
.scroll-animate-zoom.active,
.grid-item.active,
.rd-header-section.active,
.rd-rectangle-content-circle.active,
.card-3.active,
.process-block.active,
.rd-title.active,
.e-section-item.active,
.card-vision.active,
.s-section.active,
.step-block.active,
.benefit-card-box.active {
  opacity: 1;
  transform: translate(0, 0);
}