/* =========================================
   Laasya Labs – Custom Overrides (Clean)
   ========================================= */

/* ============================
   HERO TITLE ANIMATION
   ============================ */

.hero-title {
  /* letter-spacing: 0.12em; */
}

/* Base state: hidden, then animated in */
.hero-word,
.hero-sep {
  opacity: 0;
  display: inline-block;
}

/* Words: fade + slight slide-up */
.hero-word {
  animation: heroWordIn 0.6s ease-out forwards;
}

/* Separators: fade + glow pulse */
.hero-sep {
  margin: 0 0.35em;
  font-weight: 700;
  animation: heroSepIn 0.4s ease-out forwards,
             heroSepGlow 1.8s ease-in-out 0.4s infinite alternate;
}

/* Staggered delays for words */
.word-1 { animation-delay: 0s; }
.word-2 { animation-delay: 0.6s; }
.word-3 { animation-delay: 1.2s; }

/* Staggered delays for separators */
.sep-1 { animation-delay: 0.3s, 0.3s; }
.sep-2 { animation-delay: 0.9s, 0.9s; }

/* Keyframes */

@keyframes heroWordIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSepIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Soft glowing effect for the separators */
@keyframes heroSepGlow {
  0% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.0);
  }
  100% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  }
}


/* ============================
   COURSE FLIP CARDS (FRONT <-> BACK)
   ============================ */

/* Make each course item a flip container */
.courses-item.flip-card {
  perspective: 1000px;
  -webkit-perspective: 1000px; /* iOS Safari */
}

/* Inner wrapper that rotates */
.courses-item.flip-card .flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s;
  -webkit-transition: -webkit-transform 0.7s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* When flipped, rotate inner */
.courses-item.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* Common front/back settings */
.courses-item.flip-card .flip-front,
.courses-item.flip-card .flip-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* FRONT: keep normal layout so original card design & hover work */
.courses-item.flip-card .flip-front {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* BACK: overlay on top of front when rotated */
.courses-item.flip-card .flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  background-color: #0b63ce;
  color: #fff;
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;  /* default: disabled until flipped */
}

/* Enable correct side for clicks */
.courses-item.flip-card.is-flipped .flip-front {
  pointer-events: none;
}
.courses-item.flip-card.is-flipped .flip-back {
  pointer-events: auto;
}

/* Detail rows on back panel */
.course-feature-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 14px;
  text-align:center;
}
.course-feature-row span:first-child {
  font-weight: 500;
}
.course-feature-price {
  font-size: 18px;
  font-weight: 600;
  margin-top: 12px;
}
.course-desc {
  font-size: 14px;
}
/* On smaller screens, ensure card is tall enough */
@media (max-width: 767.98px) {
  .courses-item.flip-card {
    min-height: 420px;
  }
}


/* =========================================
   COURSES CAROUSEL NAV ARROWS
   (Bottom on all devices, simple & reliable)
   ========================================= */

.courses-carousel {
  position: relative;
}

/* Nav below carousel */
.courses-carousel .owl-nav {
  margin-top: 10px;
  text-align: center;
}

.courses-carousel .owl-nav button.owl-prev,
.courses-carousel .owl-nav button.owl-next {
  background: #ffffff;
  color: #0b63ce;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  margin: 0 5px;
  cursor: pointer;
}

.courses-carousel .owl-nav i {
  font-size: 18px;
  color: #0b63ce;
  font-weight: 900;
}