/* Header Slide-In Animation */
@keyframes slideInDown {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  header {
    animation: slideInDown 0.8s ease-out forwards; /* Reduced duration */
  }
  
  /* Fade and Slide-In Up Animation */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .left-home p,
  .left-home h1,
  .left-home .cta,
  .left-home .learnmore {
    opacity: 0; /* Hidden initially */
    transform: translateY(50px); /* Slightly off-screen */
  }
  
  .left-home p.fade,
  .left-home h1.fade,
  .left-home .cta.fade,
  .left-home .learnmore.fade {
    animation: fadeInUp 1s ease-out forwards; /* Slightly faster */
  }
  
  .left-home p.fade {
    animation-delay: 0.15s; /* Reduced delay */
  }
  
  .left-home h1.fade {
    animation-delay: 0.3s; /* Reduced delay */
  }
  
  .left-home p:last-of-type.fade {
    animation-delay: 0.5s;
  }
  
  .left-home .cta.fade {
    animation-delay: 0.7s;
  }
  
  .left-home .learnmore.fade {
    animation-delay: 0.9s;
  }

  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fade {
    animation: fadeInUp 1s ease-out forwards;
  }
  
  .benefit-box:nth-child(1).fade {
    animation-delay: 0.2s;
  }
  
  .benefit-box:nth-child(2).fade {
    animation-delay: 0.4s;
  }
  
  .benefit-box:nth-child(3).fade {
    animation-delay: 0.6s;
  }

  

  /* Fade and Slide-Up Animation */
@keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(50px); /* Slide from below */
    }
    100% {
      opacity: 1;
      transform: translateY(0); /* Original position */
    }
  }
  
  /* Fade-In Animation for the Image */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  /* Animations for Content */
  .mother-baby-content {
    opacity: 0;
    transform: translateY(50px);
  }
  
  .mother-baby-content.fade {
    animation: fadeInUp 1s ease-out forwards;
  }
  
  .mother-baby-content h2 {
    animation-delay: 0.2s;
  }
  
  .mother-baby-content p {
    animation-delay: 0.4s;
  }
  
  .mother-baby-content .cta {
    animation-delay: 0.6s;
  }
  
  .mother-baby-content .learnmore {
    animation-delay: 0.8s;
  }
  
  /* Animation for the Image */
  .best-right img {
    opacity: 0;
    transform: scale(0.95); /* Slightly smaller initially */
    transition: all 1s ease-out;
  }
  
  .best-right img.fade {
    opacity: 1;
    transform: scale(1); /* Normal size */
  }

  




  /* Initial Hidden State */
.left-about-image,
.left-about h2,
.left-about p,
.left-about .cta,
.left-about .learnmore {
  opacity: 0;
  transform: translateX(50px); /* Start from slightly right */
}

/* Fade-In Animations */
.left-about-image.fade {
  animation: fadeInZoom 1s ease-out forwards;
}

.left-about h2.fade,
.left-about p.fade,
.left-about .cta.fade,
.left-about .learnmore.fade {
  animation: fadeInRight 0.8s ease-out forwards;
}

.left-about p:nth-of-type(2).fade {
  animation-delay: 0.2s;
}

.left-about p:nth-of-type(3).fade {
  animation-delay: 0.4s;
}

.left-about .cta.fade {
  animation-delay: 0.6s;
}

.left-about .learnmore.fade {
  animation-delay: 0.8s;
}

/* Ensure Keyframes */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px); /* Slightly off-screen */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* Original position */
  }
}

@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: scale(0.95); /* Slightly smaller */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Normal size */
  }
}