/* Fade-in and slide animation for the header */
header {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Fade-in and slide animation for the hero content */
#home .row {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* Fade-in animation for buttons */
#home .cta-btn, #home .learn-btn {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}




/* Initial state for the programs */
.program {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Delayed animations */
.program1 {
    transition-delay: 0.2s;
}
.program2 {
    transition-delay: 0.5s;
}
.program3 {
    transition-delay: 0.8s;
}



/* Initially hide elements */
.step-number, .step, .image-stack img, .stats-card {
    opacity: 0;
    transform: translateY(30px); /* Reduced movement for a snappier effect */
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Left side animation - number and card appear together */
.step-wrapper:nth-child(1) .step-number, 
.step-wrapper:nth-child(1) .step { transition-delay: 0.1s; }

.step-wrapper:nth-child(2) .step-number, 
.step-wrapper:nth-child(2) .step { transition-delay: 0.3s; }

.step-wrapper:nth-child(3) .step-number, 
.step-wrapper:nth-child(3) .step { transition-delay: 0.5s; }

/* Right side images - appear after the first step */
.image-stack img:nth-child(1) { transition-delay: 0.7s; }
.image-stack img:nth-child(2) { transition-delay: 0.9s; }
.stats-card { transition-delay: 1.1s; }



/* Initial state: elements are hidden and slightly moved */
#locations h2,
#locations p,
#locations ul li,
#locations .cta-btn {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Apply staggered delay to list items */
#locations ul li:nth-child(1) { transition-delay: 0.2s; }
#locations ul li:nth-child(2) { transition-delay: 0.4s; }
#locations ul li:nth-child(3) { transition-delay: 0.6s; }
#locations ul li:nth-child(4) { transition-delay: 0.8s; }

#locations .cta-btn { transition-delay: 1s; }

/* Image animation: fade-in with slight zoom */
#locations img {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out 0.5s;
}



/* Initially hide the section */
#faq-section {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* When it comes into view */
#faq-section.fade-in {
    opacity: 1;
}





/* Initially hide elements */
#testimonials {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.testimonial-box,
.testimonial-image {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* When section comes into view */
#testimonials.fade-in {
    opacity: 1;
    transform: translateY(0);
}

#testimonials.fade-in .testimonial-box {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s; /* Delayed animation for testimonial box */
}

#testimonials.fade-in .testimonial-image {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s; /* Image appears slightly after the text */
}



/* Initially hide the section */
#contact {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* Initially hide individual elements */
.contact-form,
#contact img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* When the section comes into view */
#contact.fade-in {
    opacity: 1;
    transform: translateY(0);
}

#contact.fade-in .contact-form {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s; /* Form appears slightly after */
}

#contact.fade-in img {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s; /* Image appears slightly after */
}