.elementor-13237 .elementor-element.elementor-element-1fefc44{--display:flex;--margin-top:-24px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13237 .elementor-element.elementor-element-1fefc44:not(.elementor-motion-effects-element-type-background), .elementor-13237 .elementor-element.elementor-element-1fefc44 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A5A6B;}.elementor-13237 .elementor-element.elementor-element-5298e8dc{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:94px 0px 0px 0px;}.elementor-13237 .elementor-element.elementor-element-36bd3bed{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:768px){.elementor-13237 .elementor-element.elementor-element-1fefc44{--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-5298e8dc *//* =====================================================
   BEE123 HERO SECTION — CSS (Lofentse SED Case Study)
   Scoped under .bee123-hero — safe to drop into any page.
   Paste this into Elementor's "Custom CSS" panel for this
   section/widget (Advanced tab), or into a <style> tag if
   using an HTML widget.
   ===================================================== */
.bee123-hero{
  --teal:#0d6c80;
  --teal-dark:#0a5a6b;
  --gold:#e9b529;
  --gold-dark:#c99a17;
  --cream:#ffffff;
  --text:#1c2b2f;
  --muted:#5c7278;
  --muted-on-white:#4c6167;
  --line:rgba(10,60,70,0.10);
}
.bee123-hero *{margin:0;padding:0;box-sizing:border-box}
/* =====================================================
   BACKGROUND: teal from the top, hard-cuts to white
   further down (~700px) — no fade. Adjust the "700px"
   value to move exactly where the color switches —
   nothing else in this file depends on it.
   ===================================================== */
.bee123-hero{
  font-family:'Barlow',sans-serif;
  background:linear-gradient(to bottom, var(--teal-dark) 0px, var(--teal) 700px, #fff 700px, #fff 100%);
  color:var(--text);line-height:1.75;-webkit-font-smoothing:antialiased;
}
.bee123-hero img{display:block;max-width:100%}
.bee123-hero a{color:inherit}
.bee123-hero a:focus-visible,
.bee123-hero button:focus-visible{
  outline:2.5px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
.bee123-hero .progress{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;z-index:99}
@media (prefers-reduced-motion: no-preference){
  .bee123-hero .progress{transition:width .1s linear}
}
.bee123-hero .skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--gold);color:var(--teal-dark);
  padding:12px 22px;border-radius:0 0 12px 0;
  font-weight:700;text-decoration:none;font-size:14px;
}
.bee123-hero .skip-link:focus{left:0}
/* ===== verification mark (signature element) ===== */
.bee123-hero .vmark{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
}
.bee123-hero .vmark svg{width:100%;height:100%}
/* ===== hero ===== */
.bee123-hero .hero{max-width:1200px;margin:0 auto;padding:36px 24px 0}
.bee123-hero .heroimg{
  height:clamp(340px, 48vw, 560px);
  border-radius:26px;
  overflow:hidden;
  position:relative;
  /* HERO IMAGE: Celebrating learning at Lofentse Girls High School */
  background:var(--teal-dark) url('https://www.bee123.co.za/wp-content/uploads/2026/10/Celebrating-Learning-at-Lofentse-Girls-High-School.png') center/cover;
}
.bee123-hero .card{
  max-width:800px;background:#fff;margin:-200px auto 0;
  padding:44px 48px;border-radius:22px;position:relative;
  box-shadow:0 24px 50px -20px rgba(8,40,48,.22);
}
.bee123-hero .badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(233,181,41,.14);color:var(--gold-dark);
  padding:7px 16px 7px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
}
.bee123-hero .badge .vmark{width:15px;height:15px}
.bee123-hero h1{font-size:48px;line-height:1.1;margin:18px 0 14px;font-weight:800;color:var(--text)}
.bee123-hero .lead{font-size:19px;color:var(--muted-on-white);max-width:640px}
.bee123-hero .meta{
  margin-top:22px;padding-top:18px;border-top:1px solid #e3e7e8;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.bee123-hero .meta-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--teal);
  flex-shrink:0;overflow:hidden;
  box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(8,40,48,.18);
}
.bee123-hero .meta-avatar img{width:100%;height:100%;object-fit:cover}
.bee123-hero .meta-text{color:var(--muted-on-white);font-size:14px}
.bee123-hero .meta-text strong{color:var(--text)}
.bee123-hero .meta-dot{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  background:#c3cacc;vertical-align:middle;
}
@media (max-width:640px){
  .bee123-hero .card{padding:30px 24px;margin-top:-60px;border-radius:16px}
  .bee123-hero h1{font-size:32px}
  .bee123-hero .lead{font-size:16px}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2c14e29e *//* =====================================================
   BEE123 ARTICLE SECTION — CSS (Lofentse SED Case Study)
   Scoped under .bee123-article-wrap — safe to drop into any page.
   Paste this into Elementor's "Custom CSS" panel for this
   section/widget (Advanced tab), or into a <style> tag if
   using an HTML widget.
   ===================================================== */

.bee123-article-wrap{
  --teal:#0d6c80;
  --teal-dark:#0a5a6b;
  --gold:#e9b529;
  --gold-dark:#c99a17;
  --cream:#ffffff;
  --text:#1c2b2f;
  --muted:#5c7278;
  --muted-on-white:#4c6167;
  --line:rgba(10,60,70,0.10);
}
.bee123-article-wrap *{margin:0;padding:0;box-sizing:border-box}
.bee123-article-wrap{font-family:'Barlow',sans-serif;background:var(--cream);color:var(--text);line-height:1.75;-webkit-font-smoothing:antialiased}
.bee123-article-wrap img{display:block;max-width:100%}
.bee123-article-wrap a{color:inherit}

.bee123-article-wrap a:focus-visible,
.bee123-article-wrap button:focus-visible{
  outline:2.5px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ===== table of contents ===== */
.bee123-article-wrap .toc{
  max-width:1040px;margin:36px auto 0;padding:0 24px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
}
.bee123-article-wrap .toc-label{
  font-size:12px;font-weight:700;color:var(--gold-dark);
  text-transform:uppercase;letter-spacing:.08em;margin-right:4px;
  white-space:nowrap;flex-shrink:0;
}
.bee123-article-wrap .toc a{
  font-size:13.5px;font-weight:600;color:var(--teal);
  background:#fff;border:1px solid var(--line);
  padding:8px 16px;border-radius:999px;text-decoration:none;
  white-space:nowrap;flex-shrink:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.bee123-article-wrap .toc a:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.bee123-article-wrap .toc a.active{background:var(--teal);color:#fff;border-color:var(--teal)}
@media (max-width:640px){
  .bee123-article-wrap .toc{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .bee123-article-wrap .toc::-webkit-scrollbar{height:4px}
  .bee123-article-wrap .toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
}

/* ===== verification mark (signature element) ===== */
.bee123-article-wrap .vmark{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
}
.bee123-article-wrap .vmark svg{width:100%;height:100%}

/* ===== article ===== */
.bee123-article-wrap article{max-width:680px;margin:0 auto;padding:32px 24px 10px;background:var(--cream)}
.bee123-article-wrap section{margin-bottom:56px;scroll-margin-top:110px}
.bee123-article-wrap section:last-child{margin-bottom:0}
.bee123-article-wrap .reveal{opacity:1;transform:none}
html.reveal-ready .bee123-article-wrap .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.reveal-ready .bee123-article-wrap .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html.reveal-ready .bee123-article-wrap .reveal{opacity:1;transform:none;transition:none}
}
.bee123-article-wrap .num{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--gold-dark);font-weight:700;letter-spacing:.15em;
}
.bee123-article-wrap .num .vmark svg{overflow:visible}
.bee123-article-wrap h2{font-size:30px;color:var(--teal);margin:10px 0 18px;font-weight:800;line-height:1.2}
.bee123-article-wrap p{color:var(--text)}
.bee123-article-wrap article > p,
.bee123-article-wrap article > section > p{color:#33474d;margin-bottom:20px}
.bee123-article-wrap article > section > p:last-child{margin-bottom:0}
.bee123-article-wrap h3.subhead{font-size:21px;color:var(--teal);font-weight:800;margin:40px 0 12px;line-height:1.3}

/* ===== callout ===== */
.bee123-article-wrap .callout{
  background:#fff;
  padding:22px 26px 22px 22px;border-radius:4px 14px 14px 4px;margin:28px 0;
  box-shadow:0 8px 22px -12px rgba(8,40,48,.15);
  border-left:4px solid var(--gold);
  display:flex;gap:14px;
}
.bee123-article-wrap .callout .vmark{margin-top:2px}
.bee123-article-wrap .callout .label{
  display:block;font-size:12px;font-weight:700;color:var(--gold-dark);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.bee123-article-wrap .callout p{margin:0;color:var(--text);font-weight:500}

/* ===== pull quote (optional attribution via <cite>) ===== */
.bee123-article-wrap .quote{
  display:flex;gap:14px;align-items:flex-start;
  margin:32px 0;padding:26px 0 26px 22px;
  border-left:3px solid var(--gold);
}
.bee123-article-wrap .quote .vmark{margin-top:6px}
.bee123-article-wrap .quote p{
  font-size:24px;font-weight:700;color:var(--teal);line-height:1.4;
}
.bee123-article-wrap .quote cite{
  display:block;margin-top:14px;font-style:normal;
  font-size:14px;color:var(--muted-on-white);line-height:1.5;
}
.bee123-article-wrap .quote cite strong{display:block;color:var(--text);font-size:15px}

/* ===== the usual question → the real question ===== */
.bee123-article-wrap .question-shift{margin:32px 0}
.bee123-article-wrap .question-shift .qs-from,
.bee123-article-wrap .question-shift .qs-to{padding:4px 0 4px 22px}
.bee123-article-wrap .question-shift .qs-from{border-left:3px solid #d5dcde}
.bee123-article-wrap .question-shift .qs-to{border-left:3px solid var(--gold)}
.bee123-article-wrap .question-shift .qs-label{
  display:block;font-size:14px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px;line-height:1.3;
}
.bee123-article-wrap .question-shift .qs-from .qs-label{color:#8a9a9e}
.bee123-article-wrap .question-shift .qs-to .qs-label{color:var(--gold-dark)}
.bee123-article-wrap .question-shift .old-q{
  font-size:16px;font-weight:500;color:#7d8d91;line-height:1.5;
}
.bee123-article-wrap .question-shift .qs-divider{
  display:flex;align-items:center;margin:12px 0 12px -9px;
}
.bee123-article-wrap .question-shift .qs-divider .vmark{width:20px;height:20px}
.bee123-article-wrap .question-shift .new-q{
  font-size:24px;font-weight:700;color:var(--teal);line-height:1.4;
}
.bee123-article-wrap .question-shift .new-q.is-long{font-size:21px;line-height:1.45}

/* ===== in-article image ===== */
.bee123-article-wrap .inlineimg{
  display:block;width:100%;height:auto;
  margin:32px 0;border-radius:16px;
}

/* ===== diamond bullet list ===== */
.bee123-article-wrap .doclist{margin:22px 0 22px 4px;padding:0;list-style:none}
.bee123-article-wrap .doclist li{
  position:relative;padding:6px 0 6px 22px;color:#33474d;font-size:16px;line-height:1.6;
}
.bee123-article-wrap .doclist li::before{
  content:"";position:absolute;left:0;top:16px;width:8px;height:8px;
  border-radius:2px;background:var(--gold);transform:rotate(45deg);
}

/* ===== impact at a glance ===== */
.bee123-article-wrap .stat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:26px 0 0;
}
.bee123-article-wrap .stat-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 18px;display:flex;flex-direction:column;
}
.bee123-article-wrap .stat-card.is-feature{background:var(--teal);border-color:var(--teal)}
.bee123-article-wrap .stat-big{
  font-size:48px;font-weight:800;line-height:1;color:var(--gold);
}
.bee123-article-wrap .stat-label{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-top:6px;
}
.bee123-article-wrap .stat-word{
  font-size:18px;font-weight:800;line-height:1.25;color:var(--teal);
  padding-top:10px;border-top:3px solid var(--gold);align-self:flex-start;
}
.bee123-article-wrap .stat-desc{font-size:14px;line-height:1.55;color:var(--muted-on-white);margin-top:10px}
.bee123-article-wrap .stat-card.is-feature .stat-desc{color:rgba(255,255,255,.85)}
@media (max-width:560px){
  .bee123-article-wrap .stat-grid{grid-template-columns:1fr}
}

/* ===== three pillars (B-BBEE value / impact / alignment) ===== */
.bee123-article-wrap .pillar-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:28px 0;
}
.bee123-article-wrap .pillar{
  border-radius:14px;padding:16px 14px;text-align:left;
  border:1px solid var(--line);background:#fff;
}
.bee123-article-wrap .pillar .dot{
  width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;flex-shrink:0;
}
.bee123-article-wrap .pillar .pl-label{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text);display:flex;align-items:center;line-height:1.3;
}
.bee123-article-wrap .pillar .pl-desc{font-size:13.5px;color:var(--muted-on-white);margin-top:10px;line-height:1.55}
.bee123-article-wrap .pillar-row.has-desc .pillar{padding:20px 18px}
.bee123-article-wrap .pillar.value{background:rgba(13,108,128,.06);border-color:rgba(13,108,128,.18)}
.bee123-article-wrap .pillar.value .dot{background:var(--teal)}
.bee123-article-wrap .pillar.impact{background:rgba(233,181,41,.1);border-color:rgba(233,181,41,.3)}
.bee123-article-wrap .pillar.impact .dot{background:var(--gold-dark)}
.bee123-article-wrap .pillar.align{background:rgba(28,43,47,.04);border-color:rgba(28,43,47,.12)}
.bee123-article-wrap .pillar.align .dot{background:var(--teal-dark)}
@media (max-width:560px){
  .bee123-article-wrap .pillar-row{grid-template-columns:1fr}
}

/* ===== SED123 approach: 5-step process ===== */
.bee123-article-wrap .process{
  list-style:none;margin:6px 0 30px;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  counter-reset:none;
}
.bee123-article-wrap .process li{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 6px 14px;
}
.bee123-article-wrap .process li:not(:last-child)::after{
  content:"";position:absolute;right:-7px;top:50%;width:6px;height:6px;
  border-top:2px solid var(--gold-dark);border-right:2px solid var(--gold-dark);
  transform:translateY(-50%) rotate(45deg);z-index:1;
}
.bee123-article-wrap .process-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--teal);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.bee123-article-wrap .process-word{font-size:13.5px;font-weight:700;color:var(--text)}
@media (max-width:560px){
  .bee123-article-wrap .process{grid-template-columns:1fr;gap:6px}
  .bee123-article-wrap .process li{flex-direction:row;justify-content:flex-start;padding:10px 14px;gap:12px}
  .bee123-article-wrap .process li:not(:last-child)::after{display:none}
}

/* ===== sponsor / beneficiary cards ===== */
.bee123-article-wrap .side-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 28px}
.bee123-article-wrap .side-card{
  padding:20px;border-radius:14px;background:rgba(13,108,128,.06);
  border-top:3px solid var(--teal);
}
.bee123-article-wrap .side-card:last-child{background:rgba(233,181,41,.1);border-top-color:var(--gold)}
.bee123-article-wrap .side-label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);margin-bottom:6px;
}
.bee123-article-wrap .side-card:last-child .side-label{color:var(--gold-dark)}
.bee123-article-wrap .side-card p{font-size:15px;line-height:1.6;color:#33474d}
@media (max-width:560px){
  .bee123-article-wrap .side-grid{grid-template-columns:1fr}
}

/* ===== subject tags ===== */
.bee123-article-wrap .tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.bee123-article-wrap .tag-list li{
  font-size:13.5px;font-weight:600;color:var(--teal);
  background:rgba(13,108,128,.06);border:1px solid rgba(13,108,128,.16);
  padding:6px 14px;border-radius:999px;line-height:1.4;
}

/* ===== measuring: outputs → outcomes → impact ===== */
.bee123-article-wrap .tiers{display:flex;flex-direction:column;gap:14px;margin:28px 0}
.bee123-article-wrap .tier{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;box-shadow:0 8px 22px -16px rgba(8,40,48,.18);
}
.bee123-article-wrap .tier-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bee123-article-wrap .tier-step{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--gold);color:var(--teal-dark);font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.bee123-article-wrap .tier-label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.bee123-article-wrap .tier-intro{font-weight:600;color:var(--text)}
.bee123-article-wrap .tier p{font-size:15.5px;line-height:1.65;color:#33474d}
.bee123-article-wrap .tier p + p{margin-top:12px}
.bee123-article-wrap .tier .doclist{margin:10px 0 0 4px}
.bee123-article-wrap .tier .doclist li{font-size:15.5px}

.bee123-article-wrap .statement{
  margin:28px 0 0;padding:26px 28px;border-radius:16px;
  background:var(--teal);
}
.bee123-article-wrap .statement p{color:rgba(255,255,255,.88);font-size:18px;line-height:1.5;font-weight:500}
.bee123-article-wrap .statement p + p{margin-top:8px}
.bee123-article-wrap .statement span{color:var(--gold);font-weight:800}

/* ===== three partners ===== */
.bee123-article-wrap .partners{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0}
.bee123-article-wrap .partner{
  padding:20px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);
}
.bee123-article-wrap .partner.is-bridge{background:var(--teal);border-color:var(--teal)}
.bee123-article-wrap .partner-name{
  display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);margin-bottom:8px;line-height:1.35;
}
.bee123-article-wrap .partner.is-bridge .partner-name{color:var(--gold)}
.bee123-article-wrap .partner p{font-size:14px;line-height:1.55;color:var(--muted-on-white)}
.bee123-article-wrap .partner.is-bridge p{color:rgba(255,255,255,.88)}
@media (max-width:640px){
  .bee123-article-wrap .partners{grid-template-columns:1fr}
}

/* ===== closing CTA ===== */
.bee123-article-wrap .cta{
  padding:38px 36px;border-radius:20px;
  background:linear-gradient(135deg, var(--teal-dark), var(--teal));
  box-shadow:0 24px 50px -24px rgba(8,40,48,.45);
}
.bee123-article-wrap .cta-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--gold);
}
.bee123-article-wrap .cta-kicker .vmark{width:16px;height:16px}
.bee123-article-wrap .cta h2{color:#fff;margin:10px 0 16px}
.bee123-article-wrap .cta p{color:rgba(255,255,255,.85);margin-bottom:16px}
.bee123-article-wrap .cta .cta-line{color:#fff;font-weight:700;font-size:18px;margin:22px 0 22px}
.bee123-article-wrap .cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#EAB91F;color:var(--teal-dark);
  font-weight:800;font-size:15px;text-decoration:none;
  padding:14px 26px;border-radius:15px;
  transition:background .15s ease,transform .15s ease;
}
.bee123-article-wrap .cta-btn:hover{background:#f0c542;transform:translateY(-1px)}
.bee123-article-wrap .cta-btn:focus-visible{outline-color:#fff}

@media (max-width:640px){
  .bee123-article-wrap h2{font-size:26px}
  .bee123-article-wrap .quote p{font-size:20px}
  .bee123-article-wrap .question-shift .qs-from,
  .bee123-article-wrap .question-shift .qs-to{padding-left:18px}
  .bee123-article-wrap .question-shift .new-q.is-long{font-size:18px}
  .bee123-article-wrap .cta{padding:30px 24px}
}/* End custom CSS */