/* ===============================
   HERO TEXT ANIMATIONS
=============================== */


/* FADE UP ANIMATION (SLOW) */


.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 1.2s ease forwards; /* slower */
}

/* DELAYS – synced with typing */
.delay-1 {
  animation-delay: 1.8s; /* subtitle */
}

.delay-2 {
  animation-delay: 2.3s; /* CTA */
}

/* KEYFRAMES */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===============================
   TYPING CURSOR
=============================== */

#typing-text::after {
  content: "|";
  margin-left: 4px;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}




 /* ---------------------------------------- HERO SECTION END ---------------------------------------- */






 /* ===============================
   TRUST BADGE FLOAT ANIMATION
=============================== */

.about-badge {
  animation: badgeFloat 3.5s ease-in-out infinite;
}

@keyframes badgeFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-70px);
  }
  100% {
    transform: translateY(0);
  }
}





/* ---------------------------------------- STATS SECTION END ---------------------------------------- */





/* ===============================
   SCROLL REVEAL BASE
=============================== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   DIRECTION VARIANTS
=============================== */

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-left.active,
.reveal-right.active {
  transform: translateX(0);
}

/* ===============================
   IMAGE SCALE REVEAL
=============================== */

.reveal-scale {
  transform: scale(0.92);
}

.reveal-scale.active {
  transform: scale(1);
}




/* ---------------------------------------- WHY CHOOSE US END ---------------------------------------- */    





/* ===============================
   TIMELINE RAIL ANIMATION
=============================== */

.timeline-rail-progress {
  background: #f8332c; /* brand red */
  width: 2px;
  height: 0%;
  transition: height 0.25s ease-out;
}


/* ===============================
   TIMELINE STEP ANIMATIONS
=============================== */

/* base hidden state */
.timeline-item {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* content slide */
.timeline-item .timeline-content {
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

/* active step */
.timeline-item.active {
  opacity: 1;
}

.timeline-item.active .timeline-content {
  transform: translateY(0);
  opacity: 1;
}

/* DOT DEFAULT */
.timeline-dot {
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* DOT ACTIVE */
.timeline-item.active .timeline-dot {
  background: #f8332c;
  border-color: #f8332c;

  box-shadow:
    0 0 0 6px rgba(248, 51, 44, 0.15),
    0 0 18px rgba(248, 51, 44, 0.45);
}

/* NUMBER ACTIVE */
.timeline-item.active .timeline-number {
  color: #ffffff;
}




/* ---------------------------------------- HOW IT WORKS SECTION END ---------------------------------------- */ 



/* ===============================
   MARQUEE ANIMATION
=============================== */

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}




/* ---------------------------------------- OUR PARTNERS SECTION END ---------------------------------------- */










/* ---------------------------------------- ABOUT PAGE START ---------------------------------------- */

  /* ===============================
    ABOUT INTRO SECTION
  =============================== */


 /* ===============================
   FLOAT LOOP ANIMATION (WIDE RANGE)
================================ */

@keyframes floatLoop {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-12px); /* slight up */
  }
  50% {
    transform: translateY(120px);  /* noticeable down */
  }
  75% {
    transform: translateY(-6px);  /* soft return */
  }
  100% {
    transform: translateY(0);
  }
}

.float-loop {
  animation: floatLoop 6s ease-in-out infinite;
}

/* ===============================
   NEON BORDER (STROKE + GLOW)
================================ */

.about-intro-neon-border {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);

  border: 3px solid #1da1f2;
  border-radius: 36px; /* image radius (26) + offset */

  box-shadow:
    0 0 10px rgba(29, 161, 242, 0.9),
    0 0 22px rgba(147, 51, 234, 0.7),
    0 0 36px rgba(34, 211, 238, 0.6);

  animation: neonGlow 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes neonGlow {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(29, 161, 242, 0.9),
      0 0 22px rgba(147, 51, 234, 0.7),
      0 0 36px rgba(34, 211, 238, 0.6);
  }
  50% {
    box-shadow:
      0 0 16px rgba(29, 161, 242, 1),
      0 0 34px rgba(147, 51, 234, 0.85),
      0 0 54px rgba(34, 211, 238, 0.75);
  }
}