/* About page */

.page-header {
  background: url('../../images/backgrounds/about-bg.jpg') center/cover no-repeat;
}

@keyframes bgFadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes headingSlideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  

/* White Floating Card */

/* animate background fade-in when section becomes visible */
.about-bg {
  opacity: 0;
  transition: opacity 1s ease-out;
}
.about-bg.visible {
  opacity: 1;
}

@keyframes bgFadeIn {
  to {
    opacity: 1;
  }
}

/* animate card sliding from top */
.about-card {
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  transition-delay: 0.3s;
}
.about-bg.visible .about-card {
  transform: translateY(0);
  opacity: 1;
}

@keyframes cardDrop {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* staggered delays for card text elements */
.about-card h2 {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.about-card p {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.about-bg.visible .about-card h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.about-bg.visible .about-card p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

@keyframes textFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stats Row */

.stat h3 {
  font-size: 32px;
  color: #0b3954;
  margin-bottom: 5px;
}

.about-logo {
  width: 250px;
  margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .about-bg {
    height: auto;
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Founders Row */
.founders-section {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

/* Each Founder Box */
.founder-box {
  text-align: center;
  width: 45%;
}

/* Signature Image */
.founder-img {
  width: 250px;
  height: auto;
  margin-bottom: 15px;

}

/* Founder Name */
.founder-box h3 {
  font-size: 24px;
  color: #0b3954;
  margin-bottom: 5px;
  font-weight: 700;
}

/* Founder Designation */
.founder-box p {
  color: #333;
  text-align: center;
}

/* Mobile */
@media(max-width: 768px) {
  .founders-section {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .founder-box {
    width: 100%;
  }
}