/* Initial state (Text screen ke bahar left par chupa hua hoga) */
.fade-left-initial {
  opacity: 0;
  transform: translateX(-50px); /* Left side par khiska hua */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Active state (Jab user scroll karke pohnchega) */
.fade-left-active {
  opacity: 1;
  transform: translateX(0); /* Original position par aa jayega */
}
   .card-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease-out, transform 0.8s ease-out;
}

/* Jab card scroll par view mein aaye (Original position) */
.card-animate.show {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Delay (Columns ke hisaab se eik-eik karke upar aane ke liye) */
.card-delay-1 { transition-delay: 0s; }
.card-delay-2 { transition-delay: 0.2s; }
.card-delay-3 { transition-delay: 0.4s; }
.card-delay-4 { transition-delay: 0.6s; }


/* Initial Hidden State (Left Side Par -50px Khiska Hua) */
.feature-animate {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Active State (View mein aate hi normal position par aa jayega) */
.feature-animate.show {
  opacity: 1;
  transform: translateX(0);
}

/* Sequence Delays (Taake cards ek ke baad ek aayein) */
.delay-1 { transition-delay: 0s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.4s; }
.delay-4 { transition-delay: 0.6s; }