.elementor-74 .elementor-element.elementor-element-a44fd1d{--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-74 .elementor-element.elementor-element-fe54efc{width:100%;max-width:100%;}.elementor-74 .elementor-element.elementor-element-1468838{--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-74 .elementor-element.elementor-element-aa2cfa9{--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-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-74 .elementor-element.elementor-element-c5b18ee{width:100%;max-width:100%;}.elementor-74 .elementor-element.elementor-element-0bb5bf1{--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-74 .elementor-element.elementor-element-550cc38{--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-74 .elementor-element.elementor-element-87590d6{--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-74 .elementor-element.elementor-element-4a36f7e{--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-74 .elementor-element.elementor-element-b811db2{--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-74 .elementor-element.elementor-element-df8e6ae{--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-74 .elementor-element.elementor-element-aa328cb{width:100%;max-width:100%;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-74 .elementor-element.elementor-element-50c52d4{width:100%;max-width:100%;}.elementor-74 .elementor-element.elementor-element-991300e{width:100%;max-width:100%;}}/* Start custom CSS for html, class: .elementor-element-fe54efc *//* ============================================================
   BEL-C Pathways Hero — Vibrant Gradient + Wave Accent
   Scoped to .hero-pathways
============================================================ */

.hero-pathways {
  position: relative;
  padding: 6rem 0 7rem;
  text-align: center;
  color: var(--belc-navy);
  background: linear-gradient(
      135deg,
      rgba(47,185,185,0.12) 0%,
      rgba(244,197,66,0.12) 50%,
      rgba(164,126,217,0.12) 100%
  );
  overflow: hidden;
}

/* Decorative colour wave */
.hero-pathways::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 120px;
  background: url('https://svgshare.com/i/14uB.svg'); /* placeholder wave */
  background-size: cover;
  opacity: 0.65;
  pointer-events: none;
}

/* Headline */
.hero-pathways h1 {
  font-family: "Poppins", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--belc-navy);
  animation: belcFadeUp 0.8s ease-out forwards;
}

/* Optional subheading */
.hero-pathways .subheading {
  font-family: "Poppins", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: belcFadeUp 1s ease-out forwards;
  animation-delay: 0.2s;
}

/* Paragraph */
.hero-pathways .lede {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.8;
  color: #444;
  opacity: 0;
  animation: belcFadeUp 1.2s ease-out forwards;
  animation-delay: 0.35s;
}

/* Smooth fade-up animation */
@keyframes belcFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-pathways {
    padding: 4.5rem 0 5.5rem;
  }
  .hero-pathways h1 {
    font-size: 2.2rem;
  }
  .hero-pathways .lede {
    font-size: 1.05rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e8151b4 *//* ============================================================
   BEL-C Pathways Intro — Modern, Colourful, Professional
   (Uses ONLY the classes already in your HTML)
============================================================ */

.pathways-intro {
  position: relative;
  padding: 4.5rem 0 5.5rem;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(47,185,185,0.10) 0%,
    rgba(242,157,82,0.10) 40%,
    rgba(164,126,217,0.10) 100%
  );
  overflow: hidden;
}

/* Soft floating colour accents */
.pathways-intro::before,
.pathways-intro::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.40;
  z-index: 0;
}

.pathways-intro::before {
  width: 240px;
  height: 240px;
  top: -60px;
  left: -60px;
  background: var(--belc-teal);
}

.pathways-intro::after {
  width: 260px;
  height: 260px;
  bottom: -70px;
  right: -70px;
  background: var(--belc-lavender);
}

/* Heading */
.pathways-intro h2 {
  font-family: "Poppins", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--belc-navy);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 3;
  animation: fadeUp 0.8s ease-out forwards;
}

/* Lead paragraph */
.pathways-intro .lead {
  max-width: 800px;
  margin: 0 auto 2.25rem;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #333;
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.15s;
}

/* Program tags */
.program-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  position: relative;
  z-index: 4;
  margin-bottom: 2rem;
}

.program-tags .tag {
  padding: 0.6rem 1.1rem;
  border-radius: 50px;
  background: white;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border: 2px solid var(--belc-navy);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: 0.25s ease;
  cursor: default;
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.25s;
}

.program-tags .tag:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}

/* Colour-coded borders & text */
.tag.childcare {
  border-color: var(--belc-peach);
  color: var(--belc-peach);
}
.tag.beyond {
  border-color: var(--belc-blue);
  color: var(--belc-blue);
}
.tag.tlh {
  border-color: var(--belc-green);
  color: var(--belc-green);
}
.tag.talent {
  border-color: var(--belc-yellow);
  color: var(--belc-yellow);
}
.tag.homeroots {
  border-color: var(--belc-orange);
  color: var(--belc-orange);
}

/* Note at the bottom */
.pathways-intro .note {
  font-style: italic;
  color: #444;
  max-width: 750px;
  margin: 2rem auto 0;
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: fadeUp 1.2s ease-out forwards;
  animation-delay: 0.45s;
}

/* Animation */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .pathways-intro h2 {
    font-size: 1.85rem;
  }
  .pathways-intro .lead {
    font-size: 1.05rem;
  }
  .program-tags .tag {
    font-size: 0.9rem;
    padding: 0.55rem 0.95rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-04acd35 *//* ============================================================
   BEL-C PROGRAMS PATHWAYS PAGE — COMPLETE CSS (PALETTE A)
   Scoped to .belc-pathways-page
============================================================ */

.belc-pathways-page * {
  box-sizing: border-box;
}

/* ----------------------------------------------
   BEL-C Palette
---------------------------------------------- */
:root {
  --belc-navy: #0C1D36;
  --belc-teal: #2FB9B9;
  --belc-orange: #F29D52;
  --belc-green: #57A773;
  --belc-lavender: #A47ED9;
  --belc-peach: #F5C3A8;
  --belc-yellow: #F4C542;
  --belc-blue: #4A90E2;
  --belc-bg-light: #FAFAFB;
  --belc-soft-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

/* ----------------------------------------------
   Global Section Styling
---------------------------------------------- */
.belc-pathways-page section {
  padding: 4rem 0;
}

.belc-pathways-page h1,
.belc-pathways-page h2,
.belc-pathways-page h3,
.belc-pathways-page h4 {
  font-family: "Poppins", sans-serif;
  color: var(--belc-navy);
  margin-bottom: 1rem;
}

.belc-pathways-page p,
.belc-pathways-page li {
  font-family: "Montserrat", sans-serif;
  color: #333;
  line-height: 1.7;
}

.belc-pathways-page .container {
  width: min(1200px, 90%);
  margin: 0 auto;
}

/* ============================================================
   1. HERO — PROGRAM PATHWAYS
============================================================ */

.belc-pathways-page .hero-pathways {
  text-align: center;
  background: var(--belc-bg-light);
  border-top: 12px solid var(--belc-teal);
  border-bottom: 12px solid var(--belc-blue);
  padding: 5rem 0;
}

.belc-pathways-page .hero-pathways h1 {
  font-size: 2.6rem;
}

.belc-pathways-page .hero-pathways .lede {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.2rem;
  margin-top: 1rem;
}

/* ============================================================
   2. PATHWAYS INTRO + TAGS
============================================================ */

.belc-pathways-page .pathways-intro h2 {
  text-align: center;
}

.belc-pathways-page .pathways-intro .program-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0;
}

.belc-pathways-page .program-tags .tag {
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: white;
  border: 1px solid #ddd;
  font-size: 0.9rem;
  white-space: nowrap;
}

.tag.childcare { border-color: var(--belc-peach); }
.tag.beyond { border-color: var(--belc-blue); }
.tag.tlh { border-color: var(--belc-green); }
.tag.talent { border-color: var(--belc-yellow); }
.tag.homeroots { border-color: var(--belc-orange); }

.pathways-intro .note {
  text-align: center;
  max-width: 700px;
  margin: 2rem auto;
  font-style: italic;
  opacity: 0.85;
}

/* ============================================================
   3. BEL-C DIFFERENCE
============================================================ */

.belc-pathways-page .belc-difference {
  background: var(--belc-bg-light);
  border-top: 10px solid var(--belc-orange);
  border-bottom: 10px solid var(--belc-yellow);
}

.belc-pathways-page .difference-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.belc-pathways-page .diff-card {
  background: white;
  padding: 1.75rem;
  border-left: 6px solid var(--belc-teal);
  border-radius: 15px;
  box-shadow: var(--belc-soft-shadow);
}

/* ============================================================
   4. WHAT LEARNING LOOKS LIKE
============================================================ */

.belc-pathways-page .belc-in-action {
  border-top: 10px solid var(--belc-lavender);
  border-bottom: 10px solid var(--belc-green);
}

.belc-pathways-page .action-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 2rem;
}

.belc-pathways-page .action-card {
  background: white;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--belc-soft-shadow);
  border-top: 6px solid var(--belc-orange);
}

/* ============================================================
   5. CHILD & YOUTH PATHWAYS (JK–GR 12)
============================================================ */

.belc-pathways-wrapper h2 {
  text-align: center;
}

.belc-pathways-legend {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Montserrat", sans-serif;
  color: #444;
}

.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.legend-dot.teal { background: var(--belc-teal); }
.legend-dot.gold { background: var(--belc-yellow); }

.belc-pathways-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.belc-pathway-card {
  background: white;
  padding: 1.75rem;
  border-radius: 1.25rem;
  box-shadow: var(--belc-soft-shadow);
  border-top: 10px solid #ddd;
  border-bottom: 10px solid #ddd;
}

/* Colour-coded borders by order */
.belc-pathways-grid article:nth-child(1) {
  border-color: var(--belc-teal);
}
.belc-pathways-grid article:nth-child(2) {
  border-color: var(--belc-orange);
}
.belc-pathways-grid article:nth-child(3) {
  border-color: var(--belc-lavender);
}
.belc-pathways-grid article:nth-child(4) {
  border-color: var(--belc-blue);
}
.belc-pathways-grid article:nth-child(5) {
  border-color: var(--belc-green);
}

/* Optional small note under Gr 9–12 card */
.belc-pathway-note {
  margin-top: 1rem;
  font-size: 0.95rem;
  opacity: 0.85;
  font-style: italic;
}

/* ============================================================
   6. ADULT & PROVIDER PATHWAYS
============================================================ */

.adult-provider-pathways {
  background: var(--belc-bg-light);
  border-top: 8px solid var(--belc-blue);
  border-bottom: 8px solid var(--belc-peach);
}

.pathways-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.pathway-card {
  background: white;
  padding: 1.75rem;
  border-radius: 1rem;
  border-left: 6px solid var(--belc-green);
  box-shadow: var(--belc-soft-shadow);
}

/* Inline links */
.card-links-inline {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.card-link {
  color: var(--belc-blue);
  text-decoration: none;
  font-weight: 600;
}
.card-link:hover {
  opacity: 0.8;
}

/* ============================================================
   7. FRAMEWORKS CALLOUT
============================================================ */

.frameworks-callout {
  text-align: center;
  background: white;
  border-top: 10px solid var(--belc-yellow);
  border-bottom: 10px solid var(--belc-teal);
}

.framework-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.framework-btn {
  padding: 0.9rem 1.6rem;
  border-radius: 50px;
  color: white;
  text-decoration: none;
  background: var(--belc-blue);
  font-weight: 600;
  transition: 0.3s;
}
.framework-btn.light {
  background: var(--belc-orange);
}
.framework-btn:hover {
  opacity: 0.85;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 700px) {
  .hero-pathways h1 {
    font-size: 1.95rem;
  }
  .framework-buttons {
    flex-direction: column;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-991300e *//* ============================================================
   🌟 BEL-C Spotlight Slideshow (Safe / Namespaced / No Overrides)
   ============================================================ */

.enhanced-spotlight .spotlight-hero {
  position: relative;
  width: 100%;
  height: 380px;
  max-height: 420px;
  overflow: hidden;
  border-radius: 20px;
}

.enhanced-spotlight .spotlight-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.enhanced-spotlight .spot-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  border-radius: 20px;
}

/* ACTIVE SLIDE */
.enhanced-spotlight .spot-slide.active {
  opacity: 1;
  z-index: 2;
}

/* CAPTION */
.enhanced-spotlight .slide-caption {
  position: absolute;
  bottom: 20px;
  left: 25px;
  right: 25px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

/* BUTTONS (non-override, only inside this section) */
.enhanced-spotlight .spotlight-buttons {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.enhanced-spotlight .spot-btn {
  padding: 10px 22px;
  font-size: 0.95rem;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  background: #003366;
  color: #fff !important;
  transition: background 0.3s ease;
}

.enhanced-spotlight .spot-btn:hover {
  background: #0055aa;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .enhanced-spotlight .spotlight-hero {
    height: 260px;
  }

  .enhanced-spotlight .slide-caption {
    font-size: 0.95rem;
    padding: 10px 14px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aa328cb *//******************************************************
✨ BEL-C Learning Page — Full CSS
Sections:
1. Hero
2. Difference Cards
3. STREALM Wrapper
4. STREALM Details + Cards
5. BEACONS’ Way + Cards
6. Learning in Action
7. CTA
8. Responsive Tweaks
******************************************************/

:root {
  --navy: #002b5c;
  --teal: #00a6a6;
  --lavender: #b19cd9;
  --peach: #ffb999;
  --yellow: #f9c80e;
  --green: #a6e6c3;
  --blue: #8fc7ff;
  --radius: 1.25rem;
  --shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ------------------------------
   1. HERO
------------------------------ */

.hero-belc-learning {
  background: linear-gradient(135deg, #00a6a6 0%, #b19cd9 100%);
  color: #fff;
  text-align: center;
  padding: 6rem 1.5rem 4.5rem;
}

.hero-belc-learning h1 {
  font-size: 2.7rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero-belc-learning .lede {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.15rem;
  opacity: .95;
  line-height: 1.7;
}

/* ------------------------------
   2. WHAT MAKES BEL-C DIFFERENT
------------------------------ */

.belc-difference {
  background: #fffaf6;
  padding: 5rem 1.5rem;
  text-align: center;
}

.belc-difference h2 {
  color: var(--navy);
  margin-bottom: 1rem;
}

.belc-difference .lead {
  max-width: 760px;
  margin: 0 auto 3rem;
  color: #444;
}

.difference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.diff-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

.diff-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.diff-card h3 {
  color: var(--teal);
  font-size: 1.25rem;
  margin-bottom: .5rem;
}

/* ------------------------------
   3. STREALM WRAPPER (INTRO)
------------------------------ */

.strealm-wrapper {
  background: linear-gradient(180deg, #f7f5ff 0%, #ffffff 100%);
  padding: 5rem 1.5rem;
  text-align: center;
}

.strealm-wrapper h2 {
  color: var(--navy);
  margin-bottom: 1rem;
}

.strealm-wrapper .lead {
  max-width: 820px;
  margin: 0 auto;
  color: #444;
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* Buttons */
.strealm-buttons {
  margin-top: 1rem;
}

.strealm-btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  margin: .4rem;
  background: var(--teal);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background .3s ease, transform .2s ease;
}

.strealm-btn:hover {
  background: #008b8b;
  transform: translateY(-2px);
}

.strealm-btn.light {
  background: var(--lavender);
}

.strealm-btn.light:hover {
  background: #987dc8;
}

/* ------------------------------
   4. STREALM DETAILS + GRID
------------------------------ */

.strealm-details {
  background: #ffffff;
  padding: 4rem 1.5rem;
}

.strealm-details h3 {
  color: var(--navy);
  margin-bottom: .8rem;
  text-align: left;
}

.strealm-details p {
  color: #444;
  line-height: 1.7;
  max-width: 960px;
}

.strealm-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.8rem;
}

.st-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.8rem 1.4rem;
  box-shadow: var(--shadow);
  text-align: left;
}

.st-card .emoji {
  font-size: 2rem;
  margin-bottom: .4rem;
}

.st-card h4 {
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: .2rem;
  font-weight: 700;
}

.st-card .tag {
  font-size: .85rem;
  color: var(--teal);
  margin-bottom: .6rem;
  font-weight: 600;
}

.st-card p {
  font-size: .95rem;
  color: #444;
}

/* ------------------------------
   5. BEACONS’ WAY
------------------------------ */

.beacons-way {
  background: #fffaf6;
  padding: 5rem 1.5rem;
}

.beacons-way h2 {
  color: var(--navy);
  margin-bottom: 1rem;
  text-align: center;
}

.beacons-way .lead {
  max-width: 780px;
  margin: 0 auto 2.2rem;
  color: #444;
  text-align: center;
}

.beacons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.8rem;
}

.b-card {
  background: #fff;
  padding: 1.8rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
}

.b-card span {
  font-size: 2rem;
  margin-bottom: .4rem;
  display: block;
}

.b-card h4 {
  color: var(--navy);
  font-weight: 700;
  margin-bottom: .3rem;
}

.b-card p {
  color: #444;
  font-size: .96rem;
  line-height: 1.6;
}

/* ------------------------------
   6. WHAT THIS LOOKS LIKE IN ACTION
------------------------------ */

.belc-in-action {
  background: #f9fafc;
  padding: 5rem 1.5rem;
}

.belc-in-action h2 {
  text-align: center;
  color: var(--navy);
  margin-bottom: 2rem;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.8rem;
}

.action-card {
  background: #fff;
  padding: 1.8rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
}

.action-card h4 {
  color: var(--teal);
  margin-bottom: .4rem;
  font-size: 1.15rem;
}

.action-card p {
  color: #444;
  font-size: .95rem;
  line-height: 1.6;
}

/* ------------------------------
   7. CTA
------------------------------ */

.belc-cta {
  background: linear-gradient(135deg, #00a6a6 0%, #b19cd9 100%);
  color: #fff;
  padding: 6rem 1.5rem;
  text-align: center;
}

.belc-cta h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.belc-cta .lead {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  opacity: .95;
}

.btn-belc {
  display: inline-block;
  background: #fff;
  color: var(--navy);
  padding: .9rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .3s ease;
}

.btn-belc:hover {
  transform: translateY(-3px);
}

/* ------------------------------
   8. RESPONSIVE TWEAKS
------------------------------ */

@media (max-width: 768px) {
  .hero-belc-learning h1 {
    font-size: 2.2rem;
  }

  .hero-belc-learning {
    padding: 5rem 1rem;
  }

  .belc-cta h2 {
    font-size: 1.9rem;
  }
}
.hero-belc-learning {
  background: linear-gradient(135deg, #00a6a6 0%, #b19cd9 100%), 
              url('YOUR-HERO-IMAGE.jpg') center/cover no-repeat;
  background-blend-mode: overlay;
}/* End custom CSS */