.elementor-kit-435{--e-global-color-primary:#01796C;--e-global-color-secondary:#1A237E;--e-global-color-text:#333333;--e-global-color-accent:#FFC635;--e-global-color-444146c4:#F7F9FB;--e-global-color-7978d0eb:#050A30;--e-global-color-8f13b03:#2ECC71;--e-global-color-3dc04f7:#E63946;--e-global-typography-primary-font-family:"poppins";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.3em;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.4em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-font-style:italic;--e-global-typography-accent-line-height:1.6em;}.elementor-kit-435 button,.elementor-kit-435 input[type="button"],.elementor-kit-435 input[type="submit"],.elementor-kit-435 .elementor-button{background-color:#FFC635;color:#050A30;border-style:none;border-radius:10px 10px 10px 10px;padding:12px 22px 12px 22px;}.elementor-kit-435 button:hover,.elementor-kit-435 button:focus,.elementor-kit-435 input[type="button"]:hover,.elementor-kit-435 input[type="button"]:focus,.elementor-kit-435 input[type="submit"]:hover,.elementor-kit-435 input[type="submit"]:focus,.elementor-kit-435 .elementor-button:hover,.elementor-kit-435 .elementor-button:focus{background-color:#E6B02D;color:#050A30;box-shadow:4px 4px 10px 5px rgba(0,0,0,0.5);border-style:solid;border-width:2px 2px 2px 2px;border-color:#1A237E;border-radius:8px 8px 8px 8px;}.elementor-kit-435 e-page-transition{background-color:#FFBC7D;}.elementor-kit-435 h1{font-family:"poppins", Sans-serif;font-size:40px;font-weight:700;line-height:1.25em;}.elementor-kit-435 h2{font-family:"poppins", Sans-serif;font-size:30px;font-weight:700;line-height:1.25em;}.elementor-kit-435 h3{font-family:"poppins", Sans-serif;font-size:22px;line-height:1.25em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:24px;--container-default-padding-right:24px;--container-default-padding-bottom:24px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1200px){.elementor-kit-435{--e-global-typography-primary-font-size:28px;}.elementor-kit-435 h1{font-size:28px;}.e-con{--container-default-padding-top:20px;--container-default-padding-right:20px;--container-default-padding-bottom:20px;--container-default-padding-left:20px;}}@media(max-width:1024px){.elementor-kit-435{--e-global-typography-primary-font-size:28px;}.elementor-kit-435 h1{font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:20px;--container-default-padding-right:20px;--container-default-padding-bottom:20px;--container-default-padding-left:20px;}}@media(max-width:880px){.elementor-kit-435{--e-global-typography-primary-font-size:24px;}.elementor-kit-435 h1{font-size:24px;}.e-con{--container-default-padding-top:16px;--container-default-padding-right:16px;--container-default-padding-bottom:16px;--container-default-padding-left:16px;}}@media(max-width:767px){.elementor-kit-435{--e-global-typography-primary-font-size:24px;--e-global-typography-primary-line-height:1.25em;}.elementor-kit-435 h1{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:16px;--container-default-padding-right:16px;--container-default-padding-bottom:16px;--container-default-padding-left:16px;}}/* Start custom CSS *//* ===== Zero-JS paging via anchors (:target) ===== */

/* Hide all pages by default */
#starter-pages .page-chunk { display: none; }

/* Show Page 1 only when there is NO target (default state) */
#starter-pages:not(:has(.page-chunk:target)) #starter-page-1.page-chunk { 
  display: block; 
}

/* Show whichever page is targeted (#starter-page-2, #starter-page-3, etc.) */
#starter-pages .page-chunk:target { display: block; }

/* Smooth scroll and sticky-header offset (adjust 80px to your header height) */
html { scroll-behavior: smooth; }
#starter-pages .page-chunk { scroll-margin-top: 80px; }

/* Page buttons row */
#starter-pages .zp-pagebar {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0 0 16px;
}
#starter-pages .zp-pagebar .elementor-button {
  border-radius:20px; font-weight:700; padding:8px 16px;
  background:#fff; color:#263159; box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
#starter-pages .zp-pagebar .elementor-button:hover {
  background:#263159; color:#fff;
}

/* Active button highlight */
#starter-pages:has(#starter-page-1:target) .zp-pagebar a[href="#starter-page-1"],
#starter-pages:has(#starter-page-2:target) .zp-pagebar a[href="#starter-page-2"],
#starter-pages:has(#starter-page-3:target) .zp-pagebar a[href="#starter-page-3"] {
  background:#263159; color:#fff;
}
/* Default state (no target → Page 1 active) */
#starter-pages:not(:has(.page-chunk:target)) .zp-pagebar a[href="#starter-page-1"] {
  background:#263159; color:#fff;
}





/***********************
  Zinlight Academy Header (Elementor + Astra)
  Non-sticky, compact, mobile-first
  Logo centered in its column on all screens
  Tagline visible on all devices (toggle via Elementor Responsive controls)
***********************/

/* ---- Brand tokens (tweak to your palette) ---- */
:root{
  --zla-bg: rgba(255,255,255,0.92);
  --zla-bg-solid: #ffffff;
  --zla-text: #0f172a;          /* slate-900 */
  --zla-text-dim: #475569;      /* slate-600 */
  --zla-accent: #0ea5e9;        /* sky-500 */
  --zla-accent-strong: #0284c7; /* sky-600 */
  --zla-border: rgba(2,8,23,0.06);
}

/* ---- Header shell (non-sticky by design) ---- */
.zla-header{
  background: var(--zla-bg);
  backdrop-filter: saturate(1.3) blur(6px);
  border-bottom: 1px solid var(--zla-border);
  padding: 10px 0;                    /* compact vertical height */
  position: relative;
  z-index: 1000;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}

/* Anti-sticky guard: even if sticky gets enabled, do not stick */
.zla-header.elementor-sticky,
.elementor-sticky--effects.zla-header{
  position: static !important;
  top: auto !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---- Layout: keep everything on one line, all devices ---- */
.zla-header .elementor-container,
.zla-header .e-con-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;                  /* critical: no second row */
}

/* Let columns size to content and stay on one line */
.zla-header .elementor-column{
  width: auto !important;
  flex: 0 1 auto;
}

/* ---- Logo column: center contents on all screens ---- */
.zla-logo{
  display: flex;
  flex-direction: column;
  align-items: center;                /* horizontal centering of logo/tagline */
  justify-content: center;
  text-align: center;                 /* centers tagline text */
  line-height: 0;
  margin-inline: auto;                /* ensures centering within its column */
}

/* Keep nav pushed to the right edge */
.zla-nav{ margin-left: auto; }

/* ---- Logo sizing (adaptive) ---- */
.zla-logo img{
  width: clamp(96px, 12vw, 300px);    /* desktop 160–170px target */
  max-height: clamp(28px, 4.2vw, 150px);
  height: auto;
  display: block;
}

/* ---- Tagline (visible on all devices; control via Elementor’s Responsive tab) ---- */
.zla-tagline{
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: .4px;
  color: var(--zla-text-dim);
  text-transform: lowercase;
  text-align: center;
}
/* No CSS hides the tagline on smaller screens—use Elementor's widget visibility if needed. */

/* ---- Main menu: links, hover underline, active state ---- */
.zla-nav .elementor-nav-menu a.elementor-item{
  color: var(--zla-text);
  font-weight: 600;
  padding: 10px 12px;
  position: relative;
  transition: color .2s ease;
}
.zla-nav .elementor-nav-menu a.elementor-item::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:6px;
  height:2px; background: var(--zla-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.zla-nav .elementor-nav-menu a.elementor-item:hover{ color: var(--zla-accent-strong); }
.zla-nav .elementor-nav-menu a.elementor-item:hover::after{ transform: scaleX(1); }

.zla-nav .elementor-nav-menu .current-menu-item > a.elementor-item{
  color: var(--zla-accent-strong);
}
.zla-nav .elementor-nav-menu .current-menu-item > a.elementor-item::after{
  transform: scaleX(1);
}

/* ---- Mobile & tablet behavior (hamburger and dropdown) ---- */
@media (max-width:1023px){
  /* Force desktop menu hidden; rely on hamburger */
  .zla-nav .elementor-nav-menu--main{ display: none !important; }

  /* Ensure toggle is visible and nicely styled; stays on same line as logo */
  .zla-nav .elementor-menu-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid rgba(2,8,23,0.08);
    border-radius: 10px;
  }
}

/* Dropdown panel styling */
.zla-nav .elementor-nav-menu--dropdown{
  background: #ffffff;
  border: 1px solid var(--zla-border);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(2,8,23,0.12);
  margin-top: 10px;
  max-height: calc(100vh - 90px);
  overflow: auto;
  position: relative;
  z-index: 1001; /* stay above hero */
}
.zla-nav .elementor-nav-menu--dropdown a.elementor-item{
  padding: 12px 16px;
}

/* ---- CTA button (optional, right column) ---- */
.zla-cta .elementor-button{
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid var(--zla-accent-strong);
  color: #fff;
  background: linear-gradient(180deg, var(--zla-accent) 0%, var(--zla-accent-strong) 100%);
  box-shadow: 0 10px 22px rgba(2,132,199,0.25);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.zla-cta .elementor-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,132,199,0.30);
  opacity: 0.96;
}

/* ---- Login state logic (no plugin) ---- */
body.logged-in .only-guest{ display: none !important; }
body:not(.logged-in) .only-user{ display: none !important; }

/* ---- Accessibility focus states ---- */
.zla-header a:focus-visible,
.zla-header button:focus-visible{
  outline: 2px solid var(--zla-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Remove stubborn gaps above/below header ---- */
.elementor-location-header,
.elementor-location-header > .elementor-section{
  margin: 0 !important;
}
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-container .elementor-column{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
header.site-header, .site-header, .main-header-bar{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Neutralize extra top margin on first section after the header */
.elementor-location-header + #content,
.elementor-location-header + .site-content,
.elementor-location-header + .elementor{
  margin-top: 0 !important;
}
body .elementor > .elementor-section:first-of-type{
  margin-top: 0 !important;
}





/* ===== Bigger logo on mobile (safe defaults) ===== */
@media (max-width:767px){
  /* Make the logo a bit larger for legibility */
  .zla-logo img{
    width: 136px;      /* try 124–136px */
    max-height: 46px;  /* try 36–40px if your logo is short */
  }

  /* Keep the bar compact and on one line while the logo is larger */
  .zla-header{ padding-top: 10px; padding-bottom: 10px; } /* raise to 12px if needed */
  .zla-header .elementor-container{ gap: 10px; }          /* give the row a little room */
  .zla-nav .elementor-menu-toggle{ padding: 6px 8px; }    /* trims toggle so it stays on the same line */
}




/* Keep the hamburger clickable and place the dropdown UNDER it on mobile/tablet */
@media (max-width:1023px){
  /* Make the nav area a positioning context */
  .zla-nav{ position: relative; z-index: 1001; }

  /* Ensure the toggle sits on top and remains clickable */
  .zla-nav .elementor-menu-toggle{
    position: relative;
    z-index: 1003; /* higher than the dropdown */
  }

  /* Drop the panel below the toggle, aligned to the right edge */
  .zla-nav .elementor-nav-menu--dropdown{
    position: absolute !important;
    top: calc(100% + 8px) !important; /* sit just below the toggle */
    right: 0 !important;
    left: auto !important;
    z-index: 1002 !important;         /* below the toggle, above page content */
    margin-top: 0 !important;         /* neutralize any theme margins */
  }

  /* Make sure nothing clips the dropdown */
  .zla-header,
  .elementor-location-header,
  .elementor-location-header > .elementor-section,
  .zla-header .elementor-container{
    overflow: visible !important;
  }
}





<style>
  :root{
    --zl-emerald:#01796C;
    --zl-golden:#E4A91B;
    --zl-navy:#0E1C36;
    --zl-light:#FFF7E6;
    --zl-shadow:0 4px 12px rgba(0,0,0,.08);
    --zl-radius:16px;
  }

  /* Layout helpers */
  .zl-section{max-width:1200px;margin-inline:auto;padding:72px 24px;}
  .zl-center{text-align:center}
  .zl-grid{display:grid;gap:40px}
  @media (min-width:901px){ .zl-grid-2{grid-template-columns:1fr 1fr} }
  @media (max-width:900px){ .zl-grid-2{grid-template-columns:1fr} }

  /* Typography */
  .zl-h2{font-size:clamp(28px,3vw,36px);font-weight:700;line-height:1.2;color:var(--zl-emerald);margin:0 0 12px}
  .zl-h3{font-size:clamp(22px,2.5vw,28px);font-weight:700;line-height:1.25;color:var(--zl-emerald);margin:0 0 12px}
  .zl-body{font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--zl-navy);margin:0}
  .zl-small{font-size:14px;color:#6B7280}

  /* Divider */
  .zl-divider{width:72px;height:4px;background:var(--zl-golden);margin:0 auto 24px;border-radius:2px}

  /* Card / image */
  .zl-card{background:#fff;border-radius:var(--zl-radius);box-shadow:var(--zl-shadow);padding:24px}
  .zl-img{max-width:440px;width:100%;border-radius:var(--zl-radius);box-shadow:var(--zl-shadow)}

  /* Lists with check */
  .zl-list{list-style:none;margin:12px 0 0;padding:0}
  .zl-list li{display:flex;gap:10px;align-items:flex-start;margin:8px 0;color:var(--zl-navy)}
  .zl-list li::before{content:"✔";color:var(--zl-emerald);flex:0 0 auto;margin-top:2px}

  /* Buttons */
  .zl-btn{display:inline-block;background:var(--zl-emerald);color:#fff;text-decoration:none;
          font-weight:700;border-radius:999px;padding:14px 30px;transition:.3s ease}
  .zl-btn:hover{background:var(--zl-golden);color:var(--zl-emerald)}
  .zl-btn--center{display:inline-flex;justify-content:center;align-items:center}

  /* Badges (if you reuse the curricula chips) */
  .zl-badge{display:inline-block;border-radius:999px;padding:10px 22px;font-weight:600;font-size:14px}
  .zl-badge--ng{background:var(--zl-emerald);color:#fff}
  .zl-badge--cam{background:var(--zl-golden);color:var(--zl-emerald)}
  .zl-badge--us{background:var(--zl-navy);color:#fff}
  .zl-badge--caps{background:#007A6C;color:#fff}

  /* Section backgrounds */
  .zl-bg-light{background:var(--zl-light)}
</style>





/* GLOBAL PAGE BACKGROUND - BRIGHT LEARNING ENERGY */
body {
  background: linear-gradient(135deg,
    #A1E3FF 0%,
    #FDE68A 45%,
    #FFB6C1 100%
  );
  background-attachment: fixed;
  background-size: cover;
}

/* GLOBAL TEXT COLORS */
body, p, li {
  color: #0F172A;
}

/* HEADINGS */
h1, h2, h3, h4 {
  color: #1E293B;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

/* LINKS */
a {
  color: #01796C; /* Zinlight Brand Teal */
  text-decoration: none;
}
a:hover {
  color: #C2410C; /* Warm Orange Hover */
  text-decoration: underline;
}






/* GLOBAL BACKGROUND (BRIGHT) */
body {
  background: linear-gradient(135deg, #A1E3FF 0%, #FDE68A 40%, #FFB6C1 100%);
  background-attachment: fixed;
  background-size: cover;
  color: #0F172A; /* paragraph default */
}

/* HEADINGS & LINKS */
h1, h2, h3, h4 { color: #1E293B; font-family: 'Nunito', sans-serif; font-weight: 700; }
a { color: #01796C; text-decoration: none; }
a:hover { color: #C2410C; text-decoration: underline; }

/* “GLASS-CARD” READABILITY PANELS (applies to standard sections in the content area) */
.site-main .elementor-section {
  background: rgba(255,255,255,0.55);   /* SOFT glass */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 24px; /* This works together with Layout → Container Padding */
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Optional: a narrower text container class you can apply to long-form text sections */
.zl-readable { max-width: 760px; margin-inline: auto; }

/* Ensure Elementor containers don’t override transparency unintentionally */
.elementor-section, .elementor-container, .elementor-column { background-color: transparent; }

/* Mobile safe */
@media (max-width: 767px) {
  .site-main .elementor-section { border-radius: 12px; padding: 16px; }
}





/* ===============================
   GLOBAL BASE (BRIGHT BACKGROUND)
   =============================== */

/* Body + default text */
body {
  background: linear-gradient(135deg, #A1E3FF 0%, #FDE68A 40%, #FFB6C1 100%);
  background-attachment: fixed;
  background-size: cover;
  color: #0F172A;
}

/* Headings + links */
h1, h2, h3, h4 { color: #1E293B; font-family: 'Nunito', sans-serif; font-weight: 700; }
a { color: #01796C; text-decoration: none; }
a:hover { color: #C2410C; text-decoration: underline; }

/* Content card look (optional) */
.site-main .elementor-section {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
@media (max-width: 767px) {
  .site-main .elementor-section { border-radius: 12px; padding: 16px; }
}

/* ==================================
   DARK SECTION THEME (scoped toggle)
   ================================== */

/* Tokens (custom properties) live INSIDE .zin-dark */
.zin-dark {
  --zin-text: #F8FAFC;       /* light body text */
  --zin-muted: #CBD5E1;      /* secondary text */
  --zin-heading: #FFFFFF;    /* headings */
  --zin-link: #FBBF24;       /* link/CTA */
  --zin-link-hover: #FFD54F; /* link hover */
  --zin-card: rgba(255,255,255,0.08); /* dark-card bg */
}

/* Body text + lists */
.zin-dark,
.zin-dark p,
.zin-dark li,
.zin-dark span,
.zin-dark .elementor-widget-text-editor {
  color: var(--zin-text, #F8FAFC) !important;
}

/* Headings scoped to dark section */
.zin-dark h1,
.zin-dark h2,
.zin-dark h3,
.zin-dark h4,
.zin-dark h5,
.zin-dark h6 {
  color: var(--zin-heading, #FFFFFF) !important;
}

/* Links in dark section */
.zin-dark a {
  color: var(--zin-link, #FBBF24) !important;
  text-decoration: none;
}
.zin-dark a:hover,
.zin-dark a:focus,
.zin-dark a:visited:hover {
  color: var(--zin-link-hover, #FFD54F) !important;
  text-decoration: underline;
}

/* Buttons inside dark sections */
.zin-dark .elementor-button,
.zin-dark .elementor-button:visited {
  background: var(--zin-link, #FBBF24) !important;
  color: #0F172A !important;
  border: none !important;
}
.zin-dark .elementor-button:hover {
  background: var(--zin-link-hover, #FFD54F) !important;
  color: #0F172A !important;
}

/* Icons / icon lists */
.zin-dark .elementor-icon,
.zin-dark .elementor-icon i,
.zin-dark .elementor-icon-list-icon i,
.zin-dark .elementor-icon-list-text {
  color: var(--zin-link, #FBBF24) !important;
}
.zin-dark .elementor-icon-box-title,
.zin-dark .elementor-icon-box-description {
  color: var(--zin-text, #F8FAFC) !important;
}

/* Cards on dark background */
.zin-dark .zin-card,
.zin-dark .elementor-widget-container.zin-card {
  background: var(--zin-card, rgba(255,255,255,0.08));
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Accordion/Tabs inside dark sections */
.zin-dark .elementor-accordion .elementor-tab-title,
.zin-dark .elementor-accordion .elementor-tab-content,
.zin-dark .elementor-tab-title,
.zin-dark .elementor-tab-content {
  color: var(--zin-text, #F8FAFC) !important;
}

/* Ensure blend modes don’t affect text rendering */
.zin-dark.elementor-section,
.zin-dark .elementor-container,
.zin-dark .elementor-column {
  mix-blend-mode: normal !important;
}/* End custom CSS */