.card-1, .card-6, .certificate img, .past-participants img, .fees-wrapper h3, .fees-wrapper p {
  scale: 0.8;
  opacity: 0;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range-start: 200px;
  animation-range-end: 300px;
}
.hero .card-1, .key-info .card-1, .testimonials-card {
  scale: 1;
  opacity: 1;
  animation: none;
}
h2 {
  opacity: 0;
  transform: translateX(-100px);
  animation: slide-in linear forwards;
  animation-timeline: view();
  animation-range-start: 100px;
  animation-range-end: 250px;
}

@keyframes fade-in {
  from {scale: 0.8; opacity: 0;}
  to {scale: 1; opacity: 1;}
}
@keyframes slide-in {
  from {opacity: 0; transform: translateX(-100px);}
  to {opacity: 1; transform: translateX(0);}
}

@media screen and (max-width: 760px) {
  .card-1, .card-6, .certificate img, .past-participants img, .fees-wrapper h3, .fees-wrapper p {
    animation-range-start: 100px;
    animation-range-end: 200px;
  }
  h2 {
    opacity: 0;
    transform: translateX(-100px);
    animation: slide-in linear forwards;
    animation-timeline: view();
    animation-range-start: 100px;
    animation-range-end: 150px;
  }
}