.elementor-77 .elementor-element.elementor-element-24b5390{--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-77 .elementor-element.elementor-element-e138958{--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-77 .elementor-element.elementor-element-3b0d376{--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-77 .elementor-element.elementor-element-f062a5d{--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-77 .elementor-element.elementor-element-da709a7{--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-77 .elementor-element.elementor-element-70eccc2{width:100%;max-width:100%;}.elementor-77 .elementor-element.elementor-element-7622fc6{--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-77 .elementor-element.elementor-element-86b4e7a{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-70eccc2 *//* 🌸 Section Base */
.belhaven-feel {
  background: linear-gradient(180deg, #fffaf6 0%, #f9f7ff 100%);
  padding: 5rem 1.5rem 4rem;
  text-align: center;
}

.belhaven-feel h2 {
  color: #002b5c;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

/* 🎠 Flip Card Grid */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  justify-items: center;
}

/* 🎴 Flip Card Container */
.flip-card {
  perspective: 1000px;
  width: 100%;
  max-width: 280px;
  height: 260px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

/* 🧭 Card Faces */
.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  padding: 1.4rem;
  transition: background 0.3s ease;
}

/* ⭐ Front Face — reduced font size */
.flip-front {
  color: #002b5c;
  background: #fff;
}

.flip-front .icon {
  font-size: 2.3rem; /* slightly smaller icon */
  margin-bottom: 1rem;
  color: #002b5c;
}

.flip-front h3 {
  font-size: 0.95rem !important; /* reduced title size */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  padding: 0 0.4rem;
}

/* ⭐ Back Face — reduced font size */
.flip-back {
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.9rem; /* slightly smaller for balance */
  line-height: 1.55;
  padding: 1.6rem;
  text-align: center;
}

/* 🎨 ORIGINAL COLOURS */
.peach .flip-front {border-top: 5px solid #ffb999;}
.peach .flip-back {background: linear-gradient(135deg, #ffb999, #ff9a76);}

.teal .flip-front {border-top: 5px solid #00a6a6;}
.teal .flip-back {background: linear-gradient(135deg, #00a6a6, #00bfbf);}

.lavender .flip-front {border-top: 5px solid #b19cd9;}
.lavender .flip-back {background: linear-gradient(135deg, #b19cd9, #a48adb);}

.yellow .flip-front {border-top: 5px solid #f9c80e;}
.yellow .flip-back {background: linear-gradient(135deg, #f9c80e, #ffd84d);}

/* 🟢 Green — Emotional Self-Regulation */
.green .flip-front {border-top: 5px solid #b7d5c0;}
.green .flip-back {background: linear-gradient(135deg, #d6efe0, #a6cbb0);}

/* 🟢 Sage — Safety & Belonging */
.sage .flip-front {border-top: 5px solid #a8c9b7;}
.sage .flip-back {background: linear-gradient(135deg, #cfe7d9, #9fbdaa);}

/* 🔵 Sky — STEM Thinking */
.sky .flip-front {border-top: 5px solid #8fccff;}
.sky .flip-back {background: linear-gradient(135deg, #b8e0ff, #82baff);}

/* 🟣 Plum — Creative Arts */
.plum .flip-front {border-top: 5px solid #d3b8ff;}
.plum .flip-back {background: linear-gradient(135deg, #ecdfff, #c7a6ff);}

/* 🌈 Rainbow — Inquiry & Discovery */
.rainbow .flip-front {border-top: 5px solid #ffb3d1;}
.rainbow .flip-back {background: linear-gradient(135deg, #ffd7e9, #b0d8ff);}

/* 📚 Book — Language & Literacy */
.book .flip-front {border-top: 5px solid #6da8ff;}
.book .flip-back {background: linear-gradient(135deg, #a7cdff, #6da8ff);}

/* 📱 Responsive */
@media (max-width: 768px) {
  .belhaven-feel h2 {font-size: 1.7rem;}
  .flip-card {max-width: 240px; height: 220px;}
  .flip-front .icon {font-size: 2rem;}
}
/* ------------------------------------------------------------------
   🔵 GLOBAL CARD TEXT IMPROVEMENTS
------------------------------------------------------------------- */

/* Make ALL front titles bold & darker navy */
.flip-front h3 {
  font-size: 0.95rem !important;
  font-weight: 800 !important;     /* stronger */
  color: #002b5c !important;       /* BEL-C navy */
  letter-spacing: 0.3px;
}

/* Icons: darker + stronger presence */
.flip-front .icon {
  font-size: 2.3rem;
  margin-bottom: 1rem;
  color: #002b5c !important;       /* dark navy for contrast */
}

/* Back text: bold + BEL-C navy for accessibility */
.flip-back {
  color: #002b5c !important;       /* changed from white → NAVY */
  font-weight: 700 !important;     /* bold */
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 1.7rem;
  text-align: center;
}

/* Themed back gradients (unchanged, but text now navy + bold) */
.peach .flip-back {background: linear-gradient(135deg, #ffe1d6, #ffbfa8);}
.teal .flip-back {background: linear-gradient(135deg, #baf4f0, #95e0dd);}
.lavender .flip-back {background: linear-gradient(135deg, #e5d8ff, #c7b5f5);}
.yellow .flip-back {background: linear-gradient(135deg, #fff2c3, #f8df83);}
.green .flip-back {background: linear-gradient(135deg, #e3f7ec, #bfdcc6);}
.sage .flip-back {background: linear-gradient(135deg, #d8eee3, #b7d2c4);}
.sky .flip-back {background: linear-gradient(135deg, #cbe7ff, #a2cdff);}
.plum .flip-back {background: linear-gradient(135deg, #f0e7ff, #d2befc);}
.rainbow .flip-back {background: linear-gradient(135deg, #ffe2ee, #c9e1ff);}
.book .flip-back {background: linear-gradient(135deg, #cfe2ff, #93baff);}

/* Make front subtitles more visible on white */
.flip-front {
  color: #002b5c !important;
  background: #ffffff !important;
  font-weight: 700;
}

/* Stronger shadows for better visual separation */
.flip-front, .flip-back {
  box-shadow: 0 8px 22px rgba(0,0,0,0.12) !important;
}
/* -------------------------------------------------------
   🌿 GENTLER, SMALLER, TRUE NAVY BOLD TEXT
-------------------------------------------------------- */

/* TRUE BEL-C NAVY — not black */
:root {
  --belc-navy: #003366;
}

/* Front title: smaller + bold + real navy */
.flip-front h3 {
  font-size: 0.85rem !important;      /* smaller */
  font-weight: 700 !important;
  color: var(--belc-navy) !important;
  line-height: 1.3;
  padding: 0 0.4rem;
}

/* Front icon: smaller & navy */
.flip-front .icon {
  font-size: 2rem !important;          /* smaller */
  color: var(--belc-navy) !important;  /* no more black look */
  margin-bottom: 0.7rem;
}

/* Back text: smaller + bold + navy */
.flip-back {
  color: var(--belc-navy) !important;
  font-size: 0.85rem !important;       /* smaller */
  font-weight: 600 !important;         /* slightly less heavy */
  line-height: 1.45;
  text-align: center;
  padding: 1.4rem !important;
}

/* Keep pastel backgrounds but soften them slightly */
.flip-back {
  background-blend-mode: soft-light;
}

/* Ensure shadows stay soft, not heavy */
.flip-front, .flip-back {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
}/* End custom CSS */