/* Initially hide elements */
.hero-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Fade in and slide up effect when class is added */
.hero-content.show {
    opacity: 1;
    transform: translateY(0);
}




/* Initially hidden */
.introduction-left h2,
.introduction-left p,
.introduction-left .cta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;

}

/* When in viewport, fade in and slide up */
.introduction-left.show h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.introduction-left.show p:nth-of-type(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.introduction-left.show p:nth-of-type(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.introduction-left.show .cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}



/* Initially hidden */
#mission-vision h2,
#mission-vision p,
#mission-vision .cta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When in viewport, fade in and slide up */
#mission-vision.show h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

#mission-vision.show p:nth-of-type(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

#mission-vision.show p:nth-of-type(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

#mission-vision.show .cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}



/* Initially hide elements */
#membership-plans h2,
#membership-plans .membership-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When in viewport, fade in and slide up with scale effect */
#membership-plans.show h2 {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.2s;
}

/* Membership Cards Animations with Delays */
#membership-plans.show .membership-card:nth-of-type(1) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.3s;
}

#membership-plans.show .membership-card:nth-of-type(2) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.5s;
}

#membership-plans.show .membership-card:nth-of-type(3) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.7s;
}

#membership-plans.show .membership-card:nth-of-type(4) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.9s;
}




/* Initially hide elements */
#contact h2,
#contact form div,
#contact form button {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When in viewport, fade in and slide up */
#contact.show h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Animate form fields one by one */
#contact.show form div:nth-of-type(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

#contact.show form div:nth-of-type(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

#contact.show form div:nth-of-type(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

#contact.show form div:nth-of-type(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

#contact.show form div:nth-of-type(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

/* Animate submit button */
#contact.show form button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
}




/* Initially hide elements */
#elite-cards img,
#elite-cards .prepaid-title,
#elite-cards p,
#elite-cards .benefit1,
#elite-cards .benefit2,
#elite-cards .benefit3,
#elite-cards .cta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* When in viewport, fade in and slide up with staggered delays */
#elite-cards.show img {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

#elite-cards.show .prepaid-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

#elite-cards.show p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* Animate benefits one by one */
#elite-cards.show .benefit1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

#elite-cards.show .benefit2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

#elite-cards.show .benefit3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.2s;
}

/* Animate button */
#elite-cards.show .cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.4s;
}
.cta {
    transition: 0.5s !important;
}
.card:hover {
    transition: 0.5s;
}


.transition-fade {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

#card-title:not(.transition-fade),
#card-subtitle:not(.transition-fade),
#card-image:not(.transition-fade) {
    opacity: 0;
}
/*---------------------CARDS PAGE------------------------*/
/* ===== KEYFRAMES ===== */
@keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-50px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(50px) rotate(10deg);
    }
    100% {
      opacity: 1;
      transform: translateY(0) rotate(10deg);
    }
  }
  
  @keyframes glowExpand {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* ===== LEFT COLUMN STAGGERED ===== */
  .left-animate-h1 {
    animation: fadeInLeft 0.8s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
  }
  
  .left-animate-p {
    animation: fadeInLeft 0.8s ease-out forwards;
    animation-delay: 0.5s;
    opacity: 0;
  }
  
  .left-animate-btn {
    animation: fadeInLeft 0.8s ease-out forwards;
    animation-delay: 0.7s;
    opacity: 0;
  }
  
  /* ===== RIGHT COLUMN ===== */
  .card-animate {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
  }
  
  .glow-animate {
    animation: glowExpand 1s ease-out forwards;
    animation-delay: 1s;
    opacity: 0;
  }