/* Define keyframes */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in {
  from {scale: 0.8; opacity: 0;}
  to {scale: 1; opacity: 1;}
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Common heading animation class */
h1, h2, h3, h4, p ,li {
  /* Initial state before animation */
  opacity: 0;
  transform: translateX(-100px);

  /* Animation settings */
  animation: slide-in linear forwards;
  animation-timeline: view();
  animation-range-start: 50px;
  animation-range-end: 150px;
}
/* ❌ Exclude headings inside banner */
.hero-slider h1,
.hero-slider h2,
.hero-slider h3,
.hero-slider h4,
.blog-list h4,
.blog-list p,
.hero-slider li,
.hero-slider p,
header li,
footer h2, footer h3, footer li, footer p, footer h4, .clients p {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important; /* stay visible */
}
.services img, .paathshala img, .team img, .clientSwiper, .faq img, .freedom img, .blog-list .blog-card {
  scale: 0.8;
  opacity: 0;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range-start: 200px;
  animation-range-end: 300px;
}

/* Adjust animation range for smaller screens */
@media screen and (max-width: 760px) {
  h1, h2, h3, h4, p, li {
    animation-range-end: 200px;
  }
}