/* 1) Define the keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2) Apply to each element, start hidden/off-position */
.service-detail__header,
.service-detail__image,
.service-detail__content,
.about-cta {
  opacity: 0;
  transform: translateY(20px);
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

/* 3) Stagger their delays for a neat cascade */
.service-detail__header {
  animation-delay: 0.2s;
}
.service-detail__image {
  animation-delay: 0.4s;
}
.service-detail__content {
  animation-delay: 0.6s;
}
.about-cta {
  animation-delay: 0.8s;
}