/* ============================================================
   ZEBLEARN-HOME.CSS
   All homepage section styles — merged into a single file.
   Blue / White theme — fully mobile responsive

   Sections included (in order):
   1. Hero
   2. Students Placed (marquee)
   3. Certification Partners (marquee)
   4. CAP Certified Learners (video marquee)
   5. 7-Step Placement Process
   6. Google Reviews
   7. Video Slider (shared partial styles)
   8. Certified Students (vertical marquee)
   9. Webinar table
   10. Mock Interviews
   11. Hiring Partners (marquee)
   12. Students Photo Ticker (marquee)
   13. FAQ Accordion
   14. Real Learners + Quote
   15. Testimonial Video Marquee
   16. Lead Capture Modal

   HOW TO ADD A NEW SECTION:
   Scroll to the bottom "ADD NEW SECTION CSS HERE" marker and
   add your section's rules there, following the same pattern
   (wrapper class -> header -> content), then add its
   responsive rules to the matching breakpoint at the very end.
   ============================================================ */

:root{
  --hero-accent:#0056D2;
  --hero-accent-dark:#00419E;
  --hero-navy:#001E3C;
  --hero-text:#1c1d1f;
  --hero-muted:#5a6577;
  --hero-border:#D7E6FB;
  --hero-gold:#92660A;
  --hero-gold-bg:#FFF7E6;
  --hero-gold-border:#FCE3A3;
  --green:#10B981;
  --font:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --hwp-accent:#0056D2;
  --hwp-navy:#001E3C;
  --hwp-text:#1c1d1f;
  --hwp-muted:#5a6577;
  --hwp-border:#D7E6FB;
  --hwp-light:#F7FAFF;
  --hwp-green:#16a34a;
  --hwp-blue-badge:#2563eb;
  --hwp-amber:#d97706;
  --font-h:var(--font, system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif);
  --hwp-dark:#0B1424;
  --hwp-dark2:#111E33;
}

/* ================= from zeblearn-home.css ================= */
/* ============================================================
   ZEBLEARN-HOME.CSS
   Loaded on: home page (via @push('style') in home.blade.php)
   Blue / White theme — fully mobile responsive

   HOW TO ADD A NEW SECTION:
   1. Write its CSS in its own clearly-commented block below,
      following the same pattern (wrapper class → header →
      content → RESPONSIVE block at the bottom of this file).
   2. Keep using the shared tokens in :root below instead of
      hardcoding colors, so every section stays visually
      consistent automatically.
   3. If a section's CSS gets long (200+ lines), consider giving
      it its own file instead (like students-placed.css) and
      just adding one more @push('style') <link> line in
      home.blade.php.
   ============================================================ */


.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   SECTION: HERO
   ============================================================ */

.hero{
  background:linear-gradient(180deg,#EBF4FF 0%,#F7FAFF 45%,#fff 100%);
  padding:52px 2rem 48px;
  position:relative;
  overflow:hidden;
  min-height:520px;
}
.hero-sap-bg{
  position:absolute;
  right:320px;
  top:50%;
  transform:translateY(-50%);
  font-size:min(280px,28vw);
  font-weight:900;
  color:rgba(0,86,210,.05);
  line-height:1;
  pointer-events:none;
  letter-spacing:-10px;
  user-select:none;
}
.hero-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 380px;
  gap:3rem;
  align-items:center;
  position:relative;
  z-index:1;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--hero-gold-bg);
  border:1px solid var(--hero-gold-border);
  color:var(--hero-gold);
  padding:4px 12px;
  border-radius:20px;
  font-size:.7rem;
  font-weight:700;
  margin-bottom:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-family:var(--font);
}

.hero h1{
  font-size:clamp(1.7rem,3.5vw,2.6rem);
  font-weight:800;
  color:var(--hero-navy);
  line-height:1.22;
  margin:0 0 10px;
  font-family:var(--font);
}
.hero h1 em{
  color:var(--hero-accent);
  font-style:normal;
}
.hero-sub{
  color:var(--hero-muted);
  font-size:.85rem;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-family:var(--font);
}

.hero-checks{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.hero-checks li{
  display:flex;
  align-items:flex-start;
  gap:7px;
  color:#26313f;
  font-size:.77rem;
  line-height:1.45;
  font-family:var(--font);
}
.hero-checks li .ico{
  color:var(--green);
  flex-shrink:0;
  margin-top:2px;
}

.hero-btns{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.btn-hero-primary{
  background:var(--hero-accent);
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  font-weight:700;
  font-size:.88rem;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,86,210,.3);
  transition:background .2s,transform .2s;
  font-family:var(--font);
}
.btn-hero-primary:hover{
  background:var(--hero-accent-dark);
  transform:translateY(-1px);
}
.btn-hero-outline{
  background:#fff;
  color:var(--hero-accent);
  padding:12px 22px;
  border-radius:8px;
  font-weight:600;
  font-size:.88rem;
  border:2px solid var(--hero-accent);
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  transition:background .2s;
  font-family:var(--font);
}
.btn-hero-outline:hover{
  background:#EBF4FF;
}

.hero-trust-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  border-top:1px solid var(--hero-border);
  padding-top:16px;
}
.trust-pill{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--hero-muted);
  font-size:.75rem;
  font-weight:500;
  font-family:var(--font);
}
.trust-pill .ico{ color:var(--hero-accent); }
.trust-pill strong{ color:var(--hero-navy); }

.hero-form{
  background:#fff;
  border-radius:16px;
  padding:24px 22px;
  box-shadow:0 8px 40px rgba(0,86,210,.15);
  border:1px solid var(--hero-border);
}
.form-title{
  font-size:1.05rem;
  font-weight:700;
  color:var(--hero-navy);
  text-align:center;
  margin-bottom:3px;
  font-family:var(--font);
}
.form-sub{
  font-size:.75rem;
  color:var(--hero-muted);
  text-align:center;
  margin-bottom:14px;
  font-family:var(--font);
}
.finput{
  width:100%;
  padding:11px 13px;
  border:2px solid var(--hero-border);
  border-radius:8px;
  font-size:.85rem;
  font-family:var(--font);
  outline:none;
  display:block;
  margin-bottom:9px;
  color:var(--hero-text);
  background:#fff;
  transition:border-color .2s;
  box-sizing:border-box;
}
.finput:focus{ border-color:var(--hero-accent); }
.finput::placeholder{ color:#94a3b8; }

.btn-form{
  width:100%;
  background:var(--hero-accent);
  color:#fff;
  padding:13px;
  border:none;
  border-radius:8px;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-family:var(--font);
  transition:background .2s;
}
.btn-form:hover{ background:var(--hero-accent-dark); }

.form-wa{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#25D366;
  color:#fff;
  padding:9px;
  border-radius:6px;
  font-size:.76rem;
  font-weight:700;
  margin-top:8px;
  width:100%;
  text-decoration:none;
  box-sizing:border-box;
  font-family:var(--font);
}
.form-wa:hover{ background:#20bd5a; }

.form-guarantee{
  text-align:center;
  font-size:.7rem;
  color:var(--hero-muted);
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-family:var(--font);
}

/* ============================================================
   ⬇⬇⬇  ADD NEW HOMEPAGE SECTION CSS HERE  ⬇⬇⬇
   (Keep it above the RESPONSIVE block below, or add its own
   "RESPONSIVE: [section name]" subsection right after it.)
   ============================================================ */



/* ============================================================
   RESPONSIVE — MOBILE OPTIMISATION
   Breakpoints: 1024px → 768px → 480px → 380px
   ============================================================ */

/* ----- RESPONSIVE: HERO ----- */
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-form{ max-width:500px; margin:0 auto; }
  .hero-sap-bg{ right:20px; font-size:min(220px,32vw); }
}
@media (max-width:768px){
  .hero{ padding:28px 1rem 32px; }
  .hero-checks{ grid-template-columns:1fr; }
  .hero-btns{ flex-direction:column; }
  .btn-hero-primary,
  .btn-hero-outline{ width:100%; justify-content:center; text-align:center; }
  .hero-trust-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .hero-eyebrow{ font-size:.65rem; }
}
@media (max-width:480px){
  .hero{ padding:20px .85rem 24px; min-height:auto; }
  .hero h1{ font-size:1.45rem; line-height:1.28; }
  .hero-sub{ font-size:.78rem; gap:4px; }
  .hero-inner{ gap:1.75rem; }
  .hero-checks li{ font-size:.74rem; }
  .hero-form{ padding:20px 16px; border-radius:14px; }
  .form-title{ font-size:.98rem; }
  .finput{ padding:10px 12px; font-size:.82rem; }
  .btn-form,
  .btn-hero-primary,
  .btn-hero-outline{ padding:12px; font-size:.85rem; }
  .hero-sap-bg{ display:none; }
}
@media (max-width:380px){
  .hero{ padding:16px .7rem 20px; }
  .hero h1{ font-size:1.3rem; }
  .hero-eyebrow{ padding:3px 9px; font-size:.6rem; }
  .hero-form{ padding:16px 14px; }
}
@media (max-width:900px) and (max-height:480px) and (orientation:landscape){
  .hero{ padding:18px 1rem; }
  .hero-inner{ gap:1.25rem; }
  .hero-sap-bg{ display:none; }
}

/* ⬇ Add "RESPONSIVE: [new section]" media queries here as you add sections ⬇ */

/* ================= from students-placed.css ================= */
/* ============================================================
   STUDENTS-PLACED.CSS
   Loaded on: home page (via @push('style') in home.blade.php)
   Contains: "Our Students Placed" marquee + "Certification
   Partners" marquee — both are scroll-marquee style sections,
   grouped in one file since they share the same pattern.

   HOW TO ADD ANOTHER MARQUEE/CAROUSEL SECTION:
   Copy one of the two blocks below as a starting template
   (they already have hover-pause, edge fade-mask, and
   prefers-reduced-motion handling built in).
   ============================================================ */


/* ============================================================
   SECTION: STUDENTS PLACED — Auto-Scroll Marquee
   ============================================================ */

.hw-placed{
  background:var(--hwp-light);
  padding:44px 0 48px;
  overflow:hidden;
  font-family:var(--font);
}

.hw-placed__hd{
  max-width:1200px;
  margin:0 auto 24px;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.hw-placed__title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  font-weight:800;
  color:var(--hwp-navy);
}
.hw-placed__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hwp-green);
  flex-shrink:0;
  animation:hwpPulse 1.8s ease-in-out infinite;
}
@keyframes hwpPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,.5); }
  60%{ box-shadow:0 0 0 6px rgba(22,163,74,0); }
}
.hw-placed__count{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  color:var(--hwp-muted);
  background:#fff;
  border:1px solid var(--hwp-border);
  padding:6px 14px;
  border-radius:20px;
}
.hw-placed__count strong{
  color:var(--hwp-navy);
  font-weight:800;
}

.hw-placed__outer{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.hw-placed__track{
  display:inline-flex;
  gap:16px;
  padding:4px 2rem;
  animation:hwpScroll 45s linear infinite;
  will-change:transform;
}
.hw-placed__outer:hover .hw-placed__track{
  animation-play-state:paused;
}
@keyframes hwpScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.hw-placed__card{
  flex:0 0 168px;
  background:#fff;
  border:1px solid var(--hwp-border);
  border-radius:12px;
  overflow:hidden;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.hw-placed__card:hover{
  box-shadow:0 10px 28px rgba(0,86,210,.14);
  transform:translateY(-3px);
  border-color:#BFDBFE;
}

.hw-placed__photo{
  position:relative;
  height:126px;
  background:#EBF4FF;
  overflow:hidden;
}
.hw-placed__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
}
.hw-placed__ribbon{
  position:absolute;
  top:8px;
  left:0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  padding:3px 10px;
  border-radius:0 4px 4px 0;
  white-space:nowrap;
}
.hw-placed__ribbon.placed{ background:var(--hwp-green); }
.hw-placed__ribbon.upskilled{ background:var(--hwp-blue-badge); }
.hw-placed__ribbon.career-switch{ background:var(--hwp-amber); }

.hw-placed__body{
  padding:10px 10px 12px;
}
.hw-placed__name{
  font-size:12px;
  font-weight:700;
  color:var(--hwp-navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:1px;
}
.hw-placed__role{
  font-size:10.5px;
  color:var(--hwp-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:8px;
}
.hw-placed__logo img{
  max-height:16px;
  width:auto;
  object-fit:contain;
  filter:grayscale(20%);
  opacity:.9;
}

/* ============================================================
   SECTION: CERTIFICATION PARTNERS — Logo Marquee
   ============================================================ */

.hw-partners{
  background:#fff;
  padding:56px 0;
  overflow:hidden;
  font-family:var(--font);
}
.hw-partners__inner{
  max-width:1200px;
  margin:0 auto;
}

/* Shared section-heading pattern — reuse .hw-sh for any future
   section that needs an eyebrow + h2 + subtitle heading block */
.hw-sh{
  text-align:center;
  max-width:560px;
  margin:0 auto 36px;
  padding:0 2rem;
}
.hw-sh__ey{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hwp-accent);
  margin-bottom:12px;
}
.hw-sh__ey::before,
.hw-sh__ey::after{
  content:'';
  display:block;
  width:20px;
  height:2px;
  background:var(--hwp-accent);
  opacity:.45;
}
.hw-sh h2{
  font-size:clamp(22px,3.5vw,34px);
  font-weight:900;
  color:var(--hwp-navy);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.hw-sh h2 em{
  font-style:normal;
  color:var(--hwp-accent);
}
.hw-sh p{
  font-size:14px;
  color:var(--hwp-muted);
  line-height:1.6;
  margin:0;
}

.hw-partners__track{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to right,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
}
.hw-partners__scroll{
  display:inline-flex;
  align-items:center;
  gap:20px;
  padding:4px 2rem;
  animation:hwpScrollLogos 38s linear infinite;
  will-change:transform;
}
.hw-partners__track:hover .hw-partners__scroll{
  animation-play-state:paused;
}
@keyframes hwpScrollLogos{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.hw-partners__card{
  flex:0 0 auto;
  width:140px;
  height:80px;
  background:#fff;
  border:1px solid var(--hwp-border);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.hw-partners__card:hover{
  border-color:var(--hwp-accent);
  box-shadow:0 8px 24px rgba(0,86,210,.12);
  transform:translateY(-2px);
}
.hw-partners__card img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.65;
  transition:filter .25s,opacity .25s;
}
.hw-partners__card:hover img{
  filter:grayscale(0%);
  opacity:1;
}

/* Fade-in-on-scroll utility — pairs with zeblearn-home.js's
   IntersectionObserver. Add class="anim-fade" to any section. */
.anim-fade{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.anim-fade.in-view{
  opacity:1;
  transform:none;
}

/* ============================================================
   SECTION: CAP CERTIFIED LEARNERS — Video Testimonial Marquee
   ============================================================ */

.hw-cap{
  background:var(--hwp-light);
  padding:56px 0;
  overflow:hidden;
  font-family:var(--font);
}
.hw-cap__inner{
  max-width:1200px;
  margin:0 auto;
}
.hw-cap__sh{
  margin-bottom:32px;
}

/* Width variant of the shared .hw-sh heading pattern —
   slightly wider max-width for sections with more body copy */
.hw-sh--w{
  max-width:640px;
}

.hw-cap__outer{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to right,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
}
.hw-cap__track{
  display:inline-flex;
  gap:18px;
  padding:4px 2rem;
  animation:hwpCapScroll 50s linear infinite;
  will-change:transform;
}
.hw-cap__outer:hover .hw-cap__track{
  animation-play-state:paused;
}
@keyframes hwpCapScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.hw-cap__card{
  flex:0 0 220px;
  background:#fff;
  border:1px solid var(--hwp-border);
  border-radius:14px;
  overflow:hidden;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.hw-cap__card:hover{
  box-shadow:0 12px 30px rgba(0,86,210,.16);
  transform:translateY(-3px);
  border-color:#BFDBFE;
}
.hw-cap__card a{
  display:block;
  text-decoration:none;
  color:inherit;
}

.hw-cap__thumb{
  position:relative;
  aspect-ratio:16/9;
  background:var(--hwp-navy);
  overflow:hidden;
}
.hw-cap__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.hw-cap__card:hover .hw-cap__thumb img{
  transform:scale(1.06);
}
.hw-cap__ov{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,20,45,.05) 0%,rgba(0,20,45,.45) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.hw-cap__card:hover .hw-cap__ov{
  background:rgba(0,20,45,.15);
}
.hw-cap__play{
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--hwp-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:2px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:background .2s,transform .2s;
}
.hw-cap__card:hover .hw-cap__play{
  background:var(--hwp-accent);
  color:#fff;
  transform:scale(1.1);
}
.hw-cap__yt{
  position:absolute;
  top:8px;
  left:8px;
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  padding:3px 8px;
  border-radius:20px;
  backdrop-filter:blur(2px);
}

.hw-cap__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
}
.hw-cap__name{
  font-size:12.5px;
  font-weight:700;
  color:var(--hwp-navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hw-cap__arr{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--hwp-light);
  color:var(--hwp-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s,transform .2s;
}
.hw-cap__card:hover .hw-cap__arr{
  background:var(--hwp-accent);
  color:#fff;
  transform:translateX(2px);
}

/* ============================================================
   ⬇⬇⬇  ADD NEW MARQUEE/CAROUSEL SECTION CSS HERE  ⬇⬇⬇
   ============================================================ */



/* ============================================================
   RESPONSIVE — MOBILE OPTIMISATION
   ============================================================ */

/* ----- RESPONSIVE: STUDENTS PLACED + PARTNERS (shared breakpoint) ----- */
@media (max-width:1024px){
  .hw-placed__hd{ padding:0 1.5rem; }
  .hw-placed__track{ padding:4px 1.5rem; }
  .hw-sh{ padding:0 1.5rem; }
  .hw-partners__scroll{ padding:4px 1.5rem; }
}

@media (max-width:768px){
  .hw-placed{ padding:32px 0 36px; }
  .hw-placed__hd{
    padding:0 1rem;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:18px;
  }
  .hw-placed__title{ font-size:.85rem; }
  .hw-placed__count{ font-size:.72rem; padding:5px 12px; }
  .hw-placed__track{ padding:4px 1rem; gap:12px; animation-duration:32s; }
  .hw-placed__card{ flex-basis:148px; }
  .hw-placed__photo{ height:112px; }

  .hw-partners{ padding:40px 0; }
  .hw-sh{ margin-bottom:26px; padding:0 1rem; }
  .hw-sh h2{ font-size:22px; }
  .hw-sh p{ font-size:13px; }
  .hw-partners__scroll{ padding:4px 1rem; gap:14px; animation-duration:28s; }
  .hw-partners__card{ width:112px; height:64px; padding:10px 14px; border-radius:10px; }
  .hw-partners__track{
    mask-image:linear-gradient(to right,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
  }

  .hw-cap{ padding:40px 0; }
  .hw-cap__sh{ margin-bottom:22px; }
  .hw-cap__track{ padding:4px 1rem; gap:14px; animation-duration:36s; }
  .hw-cap__card{ flex-basis:180px; border-radius:12px; }
  .hw-cap__outer{
    mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  }
}

@media (max-width:480px){
  .hw-placed{ padding:26px 0 30px; }
  .hw-placed__hd{ padding:0 .85rem; }
  .hw-placed__track{ padding:4px .85rem; gap:10px; animation-duration:26s; }
  .hw-placed__card{ flex-basis:132px; border-radius:10px; }
  .hw-placed__photo{ height:98px; }
  .hw-placed__body{ padding:8px 8px 10px; }
  .hw-placed__name{ font-size:11px; }
  .hw-placed__role{ font-size:9.5px; margin-bottom:6px; }
  .hw-placed__ribbon{ font-size:8px; padding:2px 8px; }

  .hw-partners{ padding:30px 0; }
  .hw-sh__ey{ font-size:10px; }
  .hw-sh h2{ font-size:19px; }
  .hw-partners__scroll{ gap:10px; animation-duration:22s; }
  .hw-partners__card{ width:96px; height:56px; padding:8px 12px; }

  .hw-cap{ padding:30px 0; }
  .hw-cap__track{ padding:4px .85rem; gap:10px; animation-duration:28s; }
  .hw-cap__card{ flex-basis:158px; border-radius:10px; }
  .hw-cap__foot{ padding:8px 10px; }
  .hw-cap__name{ font-size:11px; }
  .hw-cap__play{ width:38px; height:38px; }
  .hw-cap__yt{ font-size:8px; padding:2px 7px; }
}

@media (max-width:380px){
  .hw-placed__card{ flex-basis:118px; }
  .hw-placed__photo{ height:88px; }
  .hw-partners__card{ width:86px; height:50px; padding:6px 10px; }
  .hw-cap__card{ flex-basis:140px; }
}

@media (prefers-reduced-motion:reduce){
  .hw-placed__track,
  .hw-partners__scroll,
  .hw-cap__track{
    animation:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .hw-placed__dot{ animation:none; }
  .anim-fade{ opacity:1; transform:none; transition:none; }
}

/* ⬇ Add "RESPONSIVE: [new section]" media queries here as you add sections ⬇ */

/* ================= from zeblearn-sections-2.css ================= */
/* ============================================================
   ZEBLEARN-SECTIONS-2.CSS
   All sections below the fold: placement process, reviews,
   video slider, certified students, webinar, mock interviews,
   hiring partners, students ticker, FAQ, lead modal, learners,
   testimonial marquee.
   Blue / White theme — fully mobile responsive

   Reuses tokens from students-placed.css (--hwp-accent, --hwp-navy,
   --hwp-muted, --hwp-border, --hwp-light, --font, .hw-sh, .anim-fade)
   so load this file AFTER students-placed.css.
   ============================================================ */


/* Shared scroll-reveal delay variants (pairs with .anim-fade) */
.anim-d1{ transition-delay:.05s; }
.anim-d2{ transition-delay:.15s; }
.anim-d3{ transition-delay:.25s; }
.anim-left{
  opacity:0; transform:translateX(-24px);
  transition:opacity .6s ease,transform .6s ease;
}
.anim-left.in-view{ opacity:1; transform:none; }
.anim-right{
  opacity:0; transform:translateX(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.anim-right.in-view{ opacity:1; transform:none; }

.hw-inner{ max-width:1200px; margin:0 auto; padding:0 2rem; }

/* ============================================================
   1. PLACEMENT PROCESS — 7-Step Zigzag Timeline
   ============================================================ */

.pp{
  background:var(--hwp-light);
  padding:56px 0 40px;
  font-family:var(--font-h);
}
.pp__head{
  max-width:600px;
  margin:0 auto 40px;
  text-align:center;
  padding:0 2rem;
}
.pp__ey{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hwp-accent); margin-bottom:12px;
}
.pp__head h2{
  font-size:clamp(22px,3.5vw,34px); font-weight:900; color:var(--hwp-navy);
  line-height:1.15; margin:0 0 8px;
}
.pp__head h2 em{ font-style:normal; color:var(--hwp-accent); }
.pp__head p{ font-size:14px; color:var(--hwp-muted); line-height:1.6; margin:0; }

.pp__outer{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
.pp__track{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
  min-width:1400px;
  padding:60px 40px;
}
.pp__connector{
  position:absolute; left:40px; right:40px; top:50%;
  height:3px; background:var(--hwp-border); transform:translateY(-50%);
  border-radius:3px; z-index:0;
}
.pp__connector-fill{
  height:100%; width:0%; background:var(--hwp-accent); border-radius:3px;
  transition:width 1.2s ease;
}
.pp__step{
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  position:relative; z-index:1;
}
.pp__arm{ width:2px; height:20px; background:var(--hwp-border); order:1; }
.pp__arm--bot{ order:3; }
.pp__dot-wrap{ order:2; }
.pp__dot{
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:3px solid var(--hwp-accent); color:var(--hwp-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}
.pp__card{
  width:200px;
  order:2;
}
.pp__step--up .pp__card{ order:0; margin-bottom:0; }
.pp__step--down .pp__card{ order:4; margin-top:0; }
.pp__card-inner{
  background:#fff; border:1px solid var(--hwp-border); border-radius:12px;
  padding:16px 14px; text-align:center;
  box-shadow:0 4px 16px rgba(0,86,210,.06);
  transition:box-shadow .2s,transform .2s;
}
.pp__step:hover .pp__card-inner{
  box-shadow:0 10px 28px rgba(0,86,210,.14); transform:translateY(-2px);
}
.pp__card-num{ font-size:22px; font-weight:900; color:var(--hwp-border); line-height:1; margin-bottom:4px; }
.pp__card-tag{ font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--hwp-accent); margin-bottom:4px; }
.pp__card-title{ font-size:13px; font-weight:800; color:var(--hwp-navy); margin-bottom:6px; }
.pp__card-desc{ font-size:11px; color:var(--hwp-muted); line-height:1.55; }
.pp__card-line{ display:none; }

.pp__scroll-hint{
  display:none;
  align-items:center; justify-content:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--hwp-accent);
  margin-top:10px;
}

/* ============================================================
   2. GOOGLE REVIEWS
   ============================================================ */

.hw-reviews{ background:#fff; padding:56px 0; overflow:hidden; font-family:var(--font-h); }
.hw-reviews__inner{ max-width:1200px; margin:0 auto; padding:0 2rem; }

.hw-reviews__sum{
  display:flex; align-items:center; gap:32px;
  background:var(--hwp-light); border:1px solid var(--hwp-border); border-radius:16px;
  padding:28px 32px; margin-bottom:32px; flex-wrap:wrap;
}
.hw-reviews__gscore{ text-align:center; flex-shrink:0; }
.hw-reviews__gnum{ font-size:40px; font-weight:900; color:var(--hwp-navy); line-height:1; }
.hw-reviews__gstars{ display:flex; justify-content:center; gap:2px; margin:6px 0; }
.hw-reviews__glabel{ font-size:11.5px; color:var(--hwp-muted); }
.hw-reviews__div{ width:1px; align-self:stretch; background:var(--hwp-border); }
.hw-reviews__plats{ flex:1; min-width:240px; display:flex; flex-direction:column; gap:10px; }
.hw-reviews__plat{ display:grid; grid-template-columns:80px 1fr 46px; align-items:center; gap:10px; }
.hw-reviews__plat-name{ font-size:12px; font-weight:700; color:var(--hwp-navy); }
.hw-reviews__plat-bar{ height:6px; background:var(--hwp-border); border-radius:4px; overflow:hidden; }
.hw-reviews__plat-fill{ height:100%; background:var(--hwp-accent); border-radius:4px; }
.hw-reviews__plat-score{ font-size:11.5px; font-weight:700; color:var(--hwp-muted); text-align:right; }

.hw-reviews__track{
  overflow:hidden; position:relative;
  mask-image:linear-gradient(to right,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
}
.hw-reviews__scroll{
  display:inline-flex; gap:16px; padding:4px 2rem;
  animation:hwpReviewScroll 55s linear infinite; will-change:transform;
}
.hw-reviews__track:hover .hw-reviews__scroll{ animation-play-state:paused; }
@keyframes hwpReviewScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.hw-rc{
  flex:0 0 300px; background:#fff; border:1px solid var(--hwp-border); border-radius:14px;
  padding:18px; transition:box-shadow .2s,transform .2s;
}
.hw-rc:hover{ box-shadow:0 10px 28px rgba(0,86,210,.12); transform:translateY(-2px); }
.hw-rc__top{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.hw-rc__av{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--hwp-accent),#00419E); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.hw-rc__name{ font-size:13px; font-weight:800; color:var(--hwp-navy); }
.hw-rc__desig{ font-size:11px; color:var(--hwp-muted); margin:1px 0 4px; }
.hw-rc__stars{ display:flex; gap:1px; }
.hw-rc__q{ font-size:12.5px; color:#374151; line-height:1.65; margin-bottom:14px; }
.hw-rc__foot{ display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--hwp-border); }
.hw-rc__verified{ font-size:10.5px; font-weight:700; color:#16a34a; }
.hw-rc__date{ font-size:10.5px; color:var(--hwp-muted); }

/* ============================================================
   3. VIDEO SLIDER (partial, used twice)
   ============================================================ */

.zl-vslider{ background:var(--hwp-light); padding:56px 0; font-family:var(--font-h); }
.zl-vslider__inner{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.zl-vslider__wrap{ display:flex; align-items:center; gap:14px; }
.zl-vslider__clip{ flex:1; overflow:hidden; }
.zl-vslider__track{
  display:flex; gap:14px; transition:transform .4s ease;
}
.zl-vslide{ flex:0 0 180px; text-decoration:none; color:inherit; }
.zl-vslide__thumb{
  position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden;
  background:var(--hwp-navy); border:1px solid var(--hwp-border);
}
.zl-vslide__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.zl-vslide:hover .zl-vslide__thumb img{ transform:scale(1.06); }
.zl-vslide__ov{
  position:absolute; inset:0; background:rgba(0,20,45,.18);
  display:flex; align-items:center; justify-content:center;
}
.zl-vslide__play{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9);
  color:var(--hwp-accent); display:flex; align-items:center; justify-content:center;
  padding-left:2px; transition:background .2s,transform .2s;
}
.zl-vslide:hover .zl-vslide__play{ background:var(--hwp-accent); color:#fff; transform:scale(1.08); }
.zl-vslide__name{
  margin-top:8px; font-size:12px; font-weight:700; color:var(--hwp-navy);
  text-align:center; text-transform:uppercase; letter-spacing:.03em;
}
.zl-vslider__nav{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--hwp-border); color:var(--hwp-navy);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.zl-vslider__nav:hover{ background:var(--hwp-accent); color:#fff; border-color:var(--hwp-accent); }
.zl-vslider__nav:disabled{ opacity:.35; cursor:default; pointer-events:none; }
.zl-vslider__dots{ display:flex; justify-content:center; gap:6px; margin-top:18px; }
.zl-vslider__dots .dot{
  width:7px; height:7px; border-radius:50%; background:var(--hwp-border);
  cursor:pointer; transition:background .2s,width .2s;
}
.zl-vslider__dots .dot.active{ background:var(--hwp-accent); width:20px; border-radius:4px; }

/* ============================================================
   4. CERTIFIED STUDENTS — Vertical Marquee (dark section)
   ============================================================ */

.zl-students{
  position:relative;
  background:linear-gradient(160deg,var(--hwp-dark) 0%,var(--hwp-dark2) 100%);
  padding:64px 0; overflow:hidden; font-family:var(--font-h);
}
.zl-students__orb{
  position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; opacity:.35;
}
.zl-students__orb--1{ width:340px; height:340px; background:#0056D2; top:-100px; left:-80px; }
.zl-students__orb--2{ width:280px; height:280px; background:#4A90F5; bottom:-80px; right:10%; }
.zl-students__orb--3{ width:200px; height:200px; background:#00419E; top:30%; right:-60px; }

.zl-students__content{ position:relative; z-index:1; color:#fff; padding:0 2rem; }
.zl-students__badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,86,210,.18); border:1px solid rgba(74,144,245,.4);
  padding:6px 14px; border-radius:20px; margin-bottom:16px;
}
.zl-students__badge-num{ font-size:14px; font-weight:900; color:#7CADF8; }
.zl-students__badge-txt{ font-size:11px; font-weight:700; color:rgba(255,255,255,.8); }
.zl-students__h2{ font-size:clamp(24px,3.6vw,36px); font-weight:900; line-height:1.18; margin:0 0 12px; }
.zl-students__h2 em{ font-style:normal; color:#7CADF8; display:block; }
.zl-students__p{ font-size:14px; color:rgba(255,255,255,.65); line-height:1.7; margin-bottom:26px; max-width:480px; }
.zl-students__stats{ display:flex; gap:28px; margin-bottom:26px; flex-wrap:wrap; }
.zl-students__stat-n{ display:block; font-size:22px; font-weight:900; color:#fff; }
.zl-students__stat-l{ display:block; font-size:11px; color:rgba(255,255,255,.55); margin-top:2px; }
.zl-students__btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--hwp-accent); color:#fff; padding:12px 24px; border-radius:8px;
  font-size:13px; font-weight:700; text-decoration:none; transition:background .2s,transform .2s;
}
.zl-students__btn:hover{ background:#00419E; transform:translateY(-1px); color:#fff; }

.zl-students__cols{
  position:relative; z-index:1; display:flex; gap:14px;
  height:520px; padding:0 2rem;
  mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.zl-students__col{ flex:1; overflow:hidden; }
.zl-students__track{ display:flex; flex-direction:column; gap:14px; }
.zl-students__track--up{ animation:zlColUp 26s linear infinite; }
.zl-students__track--down{ animation:zlColDown 26s linear infinite; }
.zl-students__col:hover .zl-students__track{ animation-play-state:paused; }
@keyframes zlColUp{ from{ transform:translateY(0);} to{ transform:translateY(-50%);} }
@keyframes zlColDown{ from{ transform:translateY(-50%);} to{ transform:translateY(0);} }
.zl-card{
  border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.zl-card img{ width:100%; height:auto; display:block; object-fit:cover; }

/* ============================================================
   5. WEBINAR TABLE
   ============================================================ */

.hw-webinar{ background:var(--hwp-light); padding:56px 0; font-family:var(--font-h); }
.hw-webinar__inner{ max-width:1000px; margin:0 auto; padding:0 2rem; }
.hw-webinar__header{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--hwp-border); border-radius:14px 14px 0 0;
  padding:18px 22px; flex-wrap:wrap; gap:10px;
}
.hw-webinar__header-left{ display:flex; align-items:center; gap:12px; }
.hw-webinar__hic{
  width:40px; height:40px; border-radius:10px; background:#EBF4FF; color:var(--hwp-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hw-webinar__header-left h4{ font-size:14px; font-weight:800; color:var(--hwp-navy); margin:0 0 2px; }
.hw-webinar__header-left p{ font-size:11.5px; color:var(--hwp-muted); margin:0; }
.hw-webinar__badge{
  background:#DCFCE7; color:#16a34a; font-size:11px; font-weight:800;
  padding:5px 12px; border-radius:20px;
}
.hw-webinar__body{
  background:#fff; border:1px solid var(--hwp-border); border-top:none;
  border-radius:0 0 14px 14px; overflow-x:auto;
}
.hw-webinar__tbl{ width:100%; border-collapse:collapse; min-width:520px; }
.hw-webinar__tbl th{
  text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hwp-muted); padding:12px 18px; border-bottom:1px solid var(--hwp-border);
}
.hw-webinar__tbl td{
  padding:14px 18px; font-size:13px; color:#26313f; border-bottom:1px solid var(--hwp-border);
}
.hw-webinar__tbl tr:last-child td{ border-bottom:none; }
.hw-webinar__empty{ text-align:center; color:var(--hwp-muted); padding:26px !important; }

/* Register/CTA button — used by both the old markup (.hw-webinar__reg)
   and the live-API markup (.hw-wcta) */
.hw-webinar__reg,
.hw-wcta{
  display:inline-flex; align-items:center; gap:5px; background:var(--hwp-accent); color:#fff;
  font-size:11.5px; font-weight:700; padding:7px 14px; border-radius:6px; text-decoration:none;
  transition:background .2s;
}
.hw-webinar__reg:hover,
.hw-wcta:hover{ background:#00419E; color:#fff; }

/* Date cell — green "live" dot + date text */
.hw-date-cell{ display:flex; align-items:center; gap:8px; }
.hw-date-dot{
  width:7px; height:7px; border-radius:50%; background:#16a34a; flex-shrink:0;
  animation:hwpPulse 1.8s ease-in-out infinite;
}
.hw-date-txt{ font-size:13px; font-weight:700; color:var(--hwp-navy); }

/* Time cell — clock icon + time */
.hw-time{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#374151;
}
.hw-time svg{ color:var(--hwp-accent); flex-shrink:0; }

/* Module/course name cell */
.hw-module{ font-size:13px; font-weight:600; color:var(--hwp-navy); }

/* ============================================================
   6. MOCK INTERVIEWS (dark section)
   ============================================================ */

.hw-mock{
  background:linear-gradient(160deg,var(--hwp-dark) 0%,var(--hwp-dark2) 100%);
  padding:64px 0; font-family:var(--font-h);
}
.hw-mock .hw-sh h2{ color:#fff; }
.hw-mock .hw-sh p{ color:rgba(255,255,255,.6); }
.hw-mock__inner{
  max-width:1200px; margin:32px auto 0; padding:0 2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
}
.hw-mock__img img{ width:100%; height:auto; display:block; border-radius:16px; }
.hw-mock__list{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:12px; }
.hw-mock__list li{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(255,255,255,.85); line-height:1.5; }
.hw-mock__ck{
  width:20px; height:20px; border-radius:50%; background:rgba(0,86,210,.25); color:#7CADF8;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.hw-mock__btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--hwp-accent); color:#fff;
  padding:13px 24px; border-radius:8px; font-size:12.5px; font-weight:800; letter-spacing:.03em;
  text-decoration:none; text-transform:uppercase; transition:background .2s,transform .2s; border:none; cursor:pointer;
}
.hw-mock__btn:hover{ background:#00419E; color:#fff; transform:translateY(-1px); }

/* ============================================================
   7. HIRING PARTNERS — Double Row Marquee
   ============================================================ */

.hw-hiring{ background:#fff; padding:56px 0; overflow:hidden; font-family:var(--font-h); }
.hw-hiring__inner{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.hw-hiring__rows{ display:flex; flex-direction:column; gap:16px; margin-top:12px; }
.hw-hiring__row{
  overflow:hidden; position:relative;
  mask-image:linear-gradient(to right,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
}
.hw-hiring__track{ display:inline-flex; gap:16px; will-change:transform; }
.hw-hiring__track--fwd{ animation:hwHiringFwd 40s linear infinite; }
.hw-hiring__track--rev{ animation:hwHiringRev 40s linear infinite; }
.hw-hiring__row:hover .hw-hiring__track{ animation-play-state:paused; }
@keyframes hwHiringFwd{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes hwHiringRev{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.hw-hiring__logo{
  flex:0 0 auto; width:120px; height:56px; background:var(--hwp-light);
  border:1px solid var(--hwp-border); border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:10px 14px;
}
.hw-hiring__logo img{
  max-width:100%; max-height:100%; object-fit:contain;
  filter:grayscale(100%); opacity:.6; transition:filter .2s,opacity .2s;
}
.hw-hiring__logo:hover img{ filter:grayscale(0%); opacity:1; }

/* ============================================================
   8. STUDENTS PHOTO TICKER — Double Row Marquee
   ============================================================ */

.hw-students{ background:var(--hwp-light); padding:56px 0; overflow:hidden; font-family:var(--font-h); }
.hw-students__inner{ max-width:1200px; margin:0 auto; }
.hw-students__head{ text-align:center; max-width:560px; margin:0 auto 32px; padding:0 2rem; }
.hw-students__head h2{ font-size:clamp(22px,3.5vw,32px); font-weight:900; color:var(--hwp-navy); line-height:1.2; margin:0 0 8px; }
.hw-students__head h2 em{ font-style:normal; color:var(--hwp-accent); }
.hw-students__head p{ font-size:14px; color:var(--hwp-muted); }
.hw-students__rows{ display:flex; flex-direction:column; gap:14px; }
.hw-students__row{
  overflow:hidden; position:relative;
  mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.hw-students__track{ display:inline-flex; gap:12px; will-change:transform; }
.hw-students__track--fwd{ animation:hwHiringFwd 34s linear infinite; }
.hw-students__track--rev{ animation:hwHiringRev 34s linear infinite; }
.hw-students__row:hover .hw-students__track{ animation-play-state:paused; }
.hw-stu-card{
  flex:0 0 auto; width:120px; height:160px; border-radius:12px; overflow:hidden;
  border:1px solid var(--hwp-border); background:#fff;
}
.hw-stu-card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   9. FAQ ACCORDION
   ============================================================ */

.hw-faq{ background:#fff; padding:56px 0; font-family:var(--font-h); }
.hw-faq__grid{ display:grid; gap:14px; }
.hw-faq__item{
  border:1px solid var(--hwp-border); border-radius:12px; overflow:hidden;
  background:var(--hwp-light); transition:border-color .2s;
}
.hw-faq__item:has(.hw-faq__q[aria-expanded="true"]){ border-color:var(--hwp-accent); background:#fff; }
.hw-faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; cursor:pointer; padding:16px 18px; text-align:left;
  font-family:var(--font-h);
}
.hw-faq__q-text{ font-size:13.5px; font-weight:700; color:var(--hwp-navy); }
.hw-faq__q-ic{
  width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid var(--hwp-border);
  color:var(--hwp-accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .25s,background .2s,color .2s;
}
.hw-faq__q[aria-expanded="true"] .hw-faq__q-ic{
  transform:rotate(45deg); background:var(--hwp-accent); color:#fff;
}
.hw-faq__a{
  max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s ease;
  padding:0 18px;
}
.hw-faq__q[aria-expanded="true"] + .hw-faq__a{ max-height:400px; padding:0 18px 16px; }
.hw-faq__a p{ margin:0; font-size:12.5px; color:var(--hwp-muted); line-height:1.65; }

/* ============================================================
   10. REAL LEARNERS + QUOTE
   ============================================================ */

.hw-learners{ background:var(--hwp-light); padding:56px 0; font-family:var(--font-h); }
.hw-learners__inner{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.hw-learners__head{
  text-align:center; font-size:12px; font-weight:800; letter-spacing:.12em;
  color:var(--hwp-accent); margin-bottom:28px;
}
.hw-learners__layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:stretch; }
.hw-learners__cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hw-sc{
  background:#fff; border:1px solid var(--hwp-border); border-radius:14px; padding:16px;
  position:relative; overflow:hidden; transition:box-shadow .2s,transform .2s;
}
.hw-sc:hover{ box-shadow:0 10px 26px rgba(0,86,210,.12); transform:translateY(-2px); }
.hw-sc__photo{ width:48px; height:48px; border-radius:50%; overflow:hidden; margin-bottom:10px; border:2px solid var(--hwp-border); }
.hw-sc__photo img{ width:100%; height:100%; object-fit:cover; }
.hw-sc__name{ font-size:13px; font-weight:800; color:var(--hwp-navy); }
.hw-sc__role{ font-size:11px; color:var(--hwp-muted); margin:1px 0; }
.hw-sc__company{ font-size:10.5px; color:var(--hwp-muted); margin-bottom:8px; }
.hw-sc__salary{ font-size:15px; font-weight:900; color:#16a34a; }
.hw-sc__salary span{ display:block; font-size:9.5px; font-weight:600; color:var(--hwp-muted); }
.hw-sc__hike{
  position:absolute; top:12px; right:12px; background:#FFF7E6; border:1px solid #FCE3A3; color:#92660A;
  font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:20px;
}
.hw-learners__quote{
  background:linear-gradient(160deg,var(--hwp-dark) 0%,var(--hwp-dark2) 100%);
  border-radius:16px; padding:28px 26px; color:#fff; display:flex; flex-direction:column; justify-content:space-between;
}
.hw-learners__qtext{ font-size:14px; line-height:1.75; color:rgba(255,255,255,.85); font-style:italic; margin-bottom:20px; }
.hw-learners__qauthor{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.hw-learners__qplay{
  width:36px; height:36px; border-radius:50%; background:var(--hwp-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hw-learners__qname{ font-size:13px; font-weight:800; }
.hw-learners__qrole{ font-size:11px; color:rgba(255,255,255,.55); margin-top:1px; }
.hw-learners__btn{
  display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); color:#fff; padding:11px 18px; border-radius:8px;
  font-size:12px; font-weight:700; text-decoration:none; transition:background .2s;
}
.hw-learners__btn:hover{ background:rgba(255,255,255,.18); color:#fff; }

/* ============================================================
   11. TESTIMONIAL VIDEO MARQUEE
   ============================================================ */

.zl-tmarq{ background:#fff; padding:56px 0; font-family:var(--font-h); }
.zl-tmarq__head{ text-align:center; max-width:560px; margin:0 auto 32px; padding:0 2rem; }
.zl-tmarq__ey{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--hwp-accent); margin-bottom:12px;
}
.zl-tmarq__head h2{ font-size:clamp(22px,3.5vw,32px); font-weight:900; color:var(--hwp-navy); margin:0 0 8px; }
.zl-tmarq__head p{ font-size:14px; color:var(--hwp-muted); }
.zl-tmarq__outer{ position:relative; }
.zl-tmarq__fade{
  position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.zl-tmarq__fade--left{ left:0; background:linear-gradient(to right,#fff,transparent); }
.zl-tmarq__fade--right{ right:0; background:linear-gradient(to left,#fff,transparent); }
.zl-tmarq__clip{ overflow:hidden; }
.zl-tmarq__track{
  display:inline-flex; gap:14px; padding:4px 2rem;
  animation:hwpTmarqScroll 60s linear infinite; will-change:transform;
}
.zl-tmarq__clip:hover .zl-tmarq__track{ animation-play-state:paused; }
@keyframes hwpTmarqScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.zl-tcard{ flex:0 0 200px; text-decoration:none; color:inherit; }
.zl-tcard__img-wrap{
  position:relative; aspect-ratio:220/391; border-radius:14px; overflow:hidden;
  background:var(--hwp-navy); border:1px solid var(--hwp-border);
}
.zl-tcard__img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.zl-tcard:hover .zl-tcard__img-wrap img{ transform:scale(1.06); }
.zl-tcard__overlay{
  position:absolute; inset:0; background:rgba(0,20,45,.15);
  display:flex; align-items:center; justify-content:center;
}
.zl-tcard__play{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--hwp-accent);
  display:flex; align-items:center; justify-content:center; padding-left:2px;
  transition:background .2s,transform .2s;
}
.zl-tcard:hover .zl-tcard__play{ background:var(--hwp-accent); color:#fff; transform:scale(1.08); }
.zl-tcard__strip{
  display:flex; align-items:center; gap:6px; margin-top:8px; padding:0 2px;
}
.zl-tcard__name{ font-size:12px; font-weight:700; color:var(--hwp-navy); text-transform:uppercase; letter-spacing:.02em; }

/* ============================================================
   12. LEAD CAPTURE MODAL
   ============================================================ */

.zl-modal-backdrop{
  display:none; position:fixed; inset:0; z-index:3000;
  background:rgba(0,20,45,.55); align-items:center; justify-content:center; padding:16px;
  font-family:var(--font-h);
}
.zl-modal-backdrop.show{ display:flex; }
.zl-modal{
  background:#fff; border-radius:18px; overflow:hidden; max-width:420px; width:100%;
  max-height:92vh; overflow-y:auto; position:relative; animation:zlModalIn .25s ease;
}
@keyframes zlModalIn{ from{ opacity:0; transform:scale(.95);} to{ opacity:1; transform:scale(1);} }
.zl-modal__close{
  position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; cursor:pointer; font-size:16px; color:var(--hwp-navy);
}
.zl-modal__top{ position:relative; height:150px; }
.zl-modal__top-img{ width:100%; height:100%; object-fit:cover; display:block; }
.zl-modal__top-ov{
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,20,45,.2) 0%,rgba(0,20,45,.85) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;
}
.zl-modal__eyebrow{
  display:inline-flex; align-items:center; gap:6px; color:#7CADF8; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;
}
.zl-modal__eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:#22c55e; }
.zl-modal__title{ color:#fff; font-size:18px; font-weight:800; line-height:1.25; }
.zl-modal__title em{ font-style:normal; color:#7CADF8; }
.zl-modal__sub{ color:rgba(255,255,255,.75); font-size:11.5px; margin-top:4px; }
.zl-modal__body{ padding:22px 22px 26px; }

.zl-modal__success{ display:none; text-align:center; padding:20px 0; }
.zl-modal__success.show{ display:block; }
.zl-success-ic{
  width:56px; height:56px; border-radius:50%; background:#DCFCE7; color:#16a34a;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.zl-success-title{ font-size:16px; font-weight:800; color:var(--hwp-navy); margin-bottom:6px; }
.zl-success-sub{ font-size:12.5px; color:var(--hwp-muted); }

.zl-field{ margin-bottom:14px; }
.zl-field label{ display:block; font-size:11.5px; font-weight:700; color:var(--hwp-navy); margin-bottom:5px; }
.zl-field-wrap{
  display:flex; align-items:center; gap:8px; border:1.5px solid var(--hwp-border); border-radius:9px;
  padding:0 12px; transition:border-color .2s; background:#fff;
}
.zl-field-wrap:focus-within{ border-color:var(--hwp-accent); }
.zl-field-wrap svg{ color:var(--hwp-muted); flex-shrink:0; }
.zl-field-wrap input{
  flex:1; border:none; outline:none; padding:11px 0; font-size:13.5px; font-family:var(--font-h); background:transparent;
}
.zl-field__err{ font-size:11px; color:#dc2626; margin-top:4px; min-height:14px; }

.zl-phone-wrap{ position:relative; padding-left:0; }
.zl-cc-select{
  display:flex; align-items:center; gap:5px; padding:11px 8px 11px 12px; cursor:pointer;
  border-right:1px solid var(--hwp-border); flex-shrink:0;
}
.zl-cc-select img{ border-radius:2px; }
.zl-cc-select span{ font-size:12.5px; font-weight:700; color:var(--hwp-navy); }
.zl-cc-drop{
  display:none; position:absolute; top:calc(100% + 6px); left:0; width:260px; max-height:280px;
  background:#fff; border:1px solid var(--hwp-border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  z-index:10; overflow:hidden;
}
.zl-cc-drop.show{ display:block; }
.zl-cc-search-wrap{
  display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--hwp-border);
  color:var(--hwp-muted);
}
.zl-cc-search-wrap input{ flex:1; border:none; outline:none; font-size:12.5px; font-family:var(--font-h); }
#zlCCList{ list-style:none; margin:0; padding:6px; max-height:220px; overflow-y:auto; }
#zlCCList li{
  display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12.5px; border-radius:6px;
  cursor:pointer; color:var(--hwp-navy);
}
#zlCCList li:hover{ background:var(--hwp-light); }

.zl-modal__submit{
  width:100%; background:var(--hwp-accent); color:#fff; border:none; border-radius:9px; padding:13px;
  font-size:13.5px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:7px; font-family:var(--font-h); transition:background .2s;
}
.zl-modal__submit:hover{ background:#00419E; }
.zl-modal__submit:disabled{ opacity:.6; cursor:default; }
.zl-modal__divider{
  text-align:center; font-size:11px; color:var(--hwp-muted); margin:14px 0; position:relative;
}
.zl-modal__divider::before,.zl-modal__divider::after{
  content:''; position:absolute; top:50%; width:calc(50% - 20px); height:1px; background:var(--hwp-border);
}
.zl-modal__divider::before{ left:0; }
.zl-modal__divider::after{ right:0; }
.zl-modal__wa{
  display:flex; align-items:center; justify-content:center; gap:8px; background:#25D366; color:#fff;
  padding:12px; border-radius:9px; font-size:13px; font-weight:700; text-decoration:none;
}
.zl-modal__wa:hover{ background:#20bd5a; color:#fff; }

/* ============================================================
   RESPONSIVE — MOBILE OPTIMISATION
   ============================================================ */

@media (max-width:1024px){
  .hw-mock__inner{ grid-template-columns:1fr; gap:28px; }
  .hw-learners__layout{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  .hw-inner,
  .pp__head,
  .hw-reviews__inner,
  .zl-vslider__inner,
  .hw-webinar__inner,
  .hw-learners__inner,
  .zl-students__content,
  .zl-students__cols{ padding-left:1rem; padding-right:1rem; }

  /* Placement process: keep horizontal scroll, just shrink */
  .pp{ padding:40px 0 28px; }
  .pp__track{ min-width:1100px; padding:44px 24px; gap:0; }
  .pp__card{ width:160px; }
  .pp__card-inner{ padding:12px 10px; }
  .pp__scroll-hint{ display:flex; }

  /* Reviews */
  .hw-reviews{ padding:40px 0; }
  .hw-reviews__sum{ flex-direction:column; align-items:stretch; gap:16px; padding:20px; }
  .hw-reviews__div{ width:100%; height:1px; }
  .hw-rc{ flex-basis:260px; }

  /* Video slider */
  .zl-vslider{ padding:40px 0; }
  .zl-vslide{ flex-basis:140px; }
  .zl-vslider__nav{ width:34px; height:34px; }

  /* Certified students */
  .zl-students{ padding:44px 0; }
  .zl-students__cols{ height:380px; margin-top:28px; }

  /* Webinar */
  .hw-webinar{ padding:40px 0; }

  /* Mock interviews */
  .hw-mock{ padding:44px 0; }

  /* Hiring partners / students ticker */
  .hw-hiring{ padding:40px 0; }
  .hw-hiring__logo{ width:100px; height:48px; }
  .hw-students{ padding:40px 0; }
  .hw-stu-card{ width:100px; height:134px; }

  /* FAQ */
  .hw-faq{ padding:40px 0; }
  .hw-faq__grid{ grid-template-columns:1fr; }

  /* Learners */
  .hw-learners{ padding:40px 0; }
  .hw-learners__cards{ grid-template-columns:1fr; }

  /* Testimonial marquee */
  .zl-tmarq{ padding:40px 0; }
  .zl-tcard{ flex-basis:150px; }
  .zl-tmarq__fade{ width:36px; }
}

@media (max-width:480px){
  .pp__track{ min-width:900px; }
  .hw-reviews__plat{ grid-template-columns:64px 1fr 40px; }
  .zl-students__stats{ gap:18px; }
  .zl-students__cols{ height:320px; }
  .hw-webinar__tbl th,.hw-webinar__tbl td{ padding:10px 12px; font-size:12px; }
  .zl-modal__top{ height:120px; }
  .zl-modal__title{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  .hw-reviews__scroll,
  .zl-students__track,
  .hw-hiring__track,
  .hw-students__track,
  .zl-tmarq__track{
    animation:none;
  }
  .anim-left,.anim-right{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   ⬇⬇⬇  ADD NEW SECTION CSS HERE  ⬇⬇⬇
   ============================================================ */