.elementor-75 .elementor-element.elementor-element-bdb8f04{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-5bfc569{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-d3b2dab{width:100%;max-width:100%;}.elementor-75 .elementor-element.elementor-element-56f3cc6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-56f3cc6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-75 .elementor-element.elementor-element-09b93d5{width:100%;max-width:100%;}.elementor-75 .elementor-element.elementor-element-356a988{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-5139c9a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-4bfe38c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-3dedbbc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-47623cb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-75 .elementor-element.elementor-element-6175d4b{width:100%;max-width:100%;}.elementor-75 .elementor-element.elementor-element-6175d4b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-75 .elementor-element.elementor-element-5948aa9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-75 .elementor-element.elementor-element-56f3cc6{--width:98.158%;}}/* Start custom CSS for html, class: .elementor-element-f589ac0 *//* ---------------------------------------------------------
   📌 BEYOND ENRICHMENT PAGE — MOBILE FIXES ONLY
   Prevents header overlap + stuck hero scrolling
--------------------------------------------------------- */

body.page-id-562 .beyond-intro,
body.page-id-562 section.beyond-intro {
  position: relative !important;
  z-index: 1;
}

@media (max-width: 1024px) {

  /* Add protective padding so hero never hides behind header */
  body.page-id-562 .beyond-intro {
    padding-top: 100px !important; /* adjust to your header height */
    margin-top: 0 !important;
  }

  /* Ensure nothing causes mobile scrolling lock */
  body.page-id-562 .beyond-intro .container,
  body.page-id-562 .beyond-intro .intro-grid {
    overflow: visible !important;
  }

  /* Fix any inherited fixed/sticky issues */
  body.page-id-562 header,
  body.page-id-562 .belc-header,
  body.page-id-562 #masthead {
    position: relative !important;
    top: 0 !important;
    z-index: 9999 !important;
  }
}
.beyond-intro {
  padding: 3.5rem 2rem;
}

.wave-divider-beyond svg {
  height: 80px;
  margin-top: -20px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d3b2dab *//* ============================================================
   🌈 BEYOND HIGHLIGHTS — PAGE CSS (2025)
   Fully Rewritten • Image-Safe • Balanced • Namespaced
   ============================================================ */

/* ===== SECTION WRAPPER ===== */
#beyond-highlights-section {
  background: linear-gradient(180deg, #f9f7ff 0%, #fffaf6 100%);
  padding: 5rem 2rem;
  text-align: center;
}

/* ===== STRUCTURE ===== */
#beyond-highlights-section .beyond-container {
  max-width: 1200px;
  margin: 0 auto;
}

#beyond-highlights-section .section-title {
  color: #002b5c;
  font-size: 2.25rem;
  font-weight: 700;
}

#beyond-highlights-section .section-subtitle {
  color: #444;
  font-size: 1.075rem;
  max-width: 720px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

/* ===== GRID ===== */
#beyond-highlights-section .flip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ===== CARD ===== */
#beyond-highlights-section .flip-card {
  width: 100%;
  max-width: 320px;
  height: 480px;
  justify-self: center;
  perspective: 1000px;
  position: relative;
}

/* ===== FLIP CORE ===== */
#beyond-highlights-section .flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

#beyond-highlights-section .flip-card:hover .flip-inner,
#beyond-highlights-section .flip-inner:focus {
  transform: rotateY(180deg);
}

/* ===== SHARED FACES ===== */
#beyond-highlights-section .flip-face {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

/* ============================================================
   FRONT FACE — FINAL FIX FOR IMAGE + LABEL
   ============================================================ */
#beyond-highlights-section .flip-front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* label anchored to bottom */
  height: 100%;
  position: relative;
}

/* IMAGE: NO MORE OVERLAP, NO SUPPRESSION */
#beyond-highlights-section .flip-front img {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;           /* overrides global CSS */
  max-height: calc(100% - 50px);     /* ALWAYS leaves room for label */
  object-fit: cover;
  display: block;
}

/* LABEL ALWAYS VISIBLE */
#beyond-highlights-section .flip-label {
  position: relative;
  z-index: 2;
  background: rgba(0, 43, 92, 0.82);
  color: #fff;
  font-weight: 650;
  font-size: 1.075rem;
  text-align: center;
  padding: 0.75rem 0;
}

/* ============================================================
   BACK FACE
   ============================================================ */
#beyond-highlights-section .flip-back {
  background: #fff;
  color: #002b5c;
  transform: rotateY(180deg);
  padding: 1.75rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}

#beyond-highlights-section .flip-back h3 {
  color: #00a6a6;
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

#beyond-highlights-section .flip-back p {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

#beyond-highlights-section .time {
  font-weight: 700;
  margin-top: 0.5rem;
}

/* ===== BUTTON ===== */
#beyond-highlights-section .flip-btn {
  margin-top: 0.9rem;
  background: #00a6a6;
  color: #fff;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
  transition: background 0.25s ease;
}

#beyond-highlights-section .flip-btn:hover,
#beyond-highlights-section .flip-btn:focus {
  background: #007f7f;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
  #beyond-highlights-section .flip-card {
    height: 520px;
  }
}

@media (max-width: 480px) {
  #beyond-highlights-section .flip-card {
    height: 560px;
  }
}

/* ===== MOTION REDUCTION ===== */
@media (prefers-reduced-motion: reduce) {
  #beyond-highlights-section .flip-inner {
    transition: none;
  }
  #beyond-highlights-section .flip-card:hover .flip-inner,
  #beyond-highlights-section .flip-inner:focus {
    transform: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6175d4b *//* 🧭 Timeline Layout */
.timeline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.timeline-step {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: center;
  padding: 2rem 1.25rem 1.75rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.timeline-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.timeline-icon {
  overflow: hidden;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

/* Default image behavior */
.timeline-icon img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.75rem;
  transition: transform 0.5s ease;
}

/* ⭐ FIX: Make the 4th image NOT cropped */
.timeline-step.literacy .timeline-icon img {
  height: auto;          /* let it size naturally */
  max-height: 260px;     /* prevents giant images */
  object-fit: contain;   /* show whole picture */
}

/* Hover */
.timeline-step:hover img {
  transform: scale(1.05);
}

/* Titles + Text */
.timeline-step h4 {
  color: #002b5c;
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.timeline-step p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Borders */
.timeline-step.morning { border-top: 6px solid #f9c80e; }
.timeline-step.noon { border-top: 6px solid #00a6a6; }
.timeline-step.evening { border-top: 6px solid #b19cd9; }
.timeline-step.literacy { border-top: 6px solid #f77f00; }

/* Responsive */
@media (max-width: 768px) {
  .timeline-section h2 { font-size: 1.9rem; }
  .timeline-section { padding: 4rem 1.5rem; }
  .timeline-step { padding: 1.75rem 1rem; }

  /* For small screens we limit the image height gently */
  .timeline-icon img {
    height: 180px;
  }

  .timeline-step.literacy .timeline-icon img {
    height: auto;
    max-height: 220px;
    object-fit: contain;
  }
}/* End custom CSS */