/* ==========================================================================
   Hitesh Academy — Design System
   "Crest" — a premium, trust-first academic visual language: deep navy,
   heritage gold, and muted jewel-tone accents (maroon, teal) matching the
   Hitesh Academy crest logo. Clean white space, minimal decoration.
   ========================================================================== */

:root{
  /* --- Colour tokens --- */
  --ink:        #0F2A5C;   /* deep navy — headings, brand, dark text/borders */
  --ink-text:   #16233F;   /* body copy on paper */
  --ink-text-soft: #5B6478;
  --panel:      #E3EBFA;   /* light navy-tinted panel (replaces old "dark" sections) */
  --panel-2:    #FFFFFF;   /* raised element on a panel (badges etc.) */
  --panel-line: rgba(15,42,92,0.12);
  --chalk:      #0F2A5C;   /* heading colour on a light panel (kept name for compatibility) */
  --chalk-dim:  #5B6478;   /* muted text on a light panel */
  --paper:      #FDFCFA;   /* warm white page background */
  --paper-2:    #F0E9D9;   /* slightly deeper paper panel */
  --line:       #E7E2D6;   /* hairline rule on paper */
  --line-navy:  rgba(15,42,92,0.12);

  --amber:      #C9971C;   /* heritage gold — primary accent / primary buttons */
  --amber-dark: #A87D12;
  --amber-tint: #FBF0D9;
  --teal:       #0E6B60;   /* deep teal — secondary accent */
  --teal-dark:  #0A4F47;
  --teal-tint:  #DBEFEC;
  --coral:      #8C1F3B;   /* deep maroon — tertiary accent */
  --coral-dark: #6E1830;
  --coral-tint: #F3E1E6;
  --mint:       #0E6B60;   /* alias to teal — success/checkmark states */
  --mint-dark:  #0A4F47;
  --mint-tint:  #DBEFEC;

  --font-display: "Sora", sans-serif;
  --font-brand: "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Sora", sans-serif;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-soft: 0 20px 45px -25px rgba(27,35,64,0.18);
  --shadow-card: 0 12px 30px -18px rgba(27,35,64,0.14);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink-text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.08; font-weight:600; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* --- Graph-paper texture, used as a subtle watermark on paper sections --- */
.graph-bg{
  background-image: radial-gradient(900px circle at 85% -10%, rgba(201,151,28,0.05), transparent 55%);
}
.ink-bg{
  background: var(--panel);
  color: var(--chalk);
}
.chalk-bg{
  background-image: radial-gradient(760px circle at 90% -15%, rgba(201,151,28,0.12), transparent 55%);
}

/* --- Eyebrow / kicker label, set in mono like a formula caption --- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-dark);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--amber-dark);
  display:inline-block;
}
.on-ink .eyebrow, .eyebrow.on-ink{ color: var(--amber); }
.on-ink .eyebrow::before, .eyebrow.on-ink::before{ background: var(--amber); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-navy);
  transition: box-shadow .2s ease;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 28px;
  max-width: var(--container);
  margin:0 auto;
  gap: 20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color: var(--chalk);
  font-family: var(--font-brand);
  font-size: 21px;
  font-weight:700;
  letter-spacing: 0.01em;
}
.brand-mark{
  width:40px; height:40px;
  flex: none;
}
.brand-logo-img{
  height: 108px;
  width: auto;
  display: block;
  flex: none;
  mix-blend-mode: multiply;
}
.footer-brand .brand-logo-img{ height: 112px; }
@media (max-width: 560px){
  .brand-logo-img{ height: 74px; }
}
.brand small{
  display:block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--amber);
  font-weight:500;
  text-transform: uppercase;
}
.nav-links{
  display:flex; align-items:center; gap: 30px;
}
.nav-links a{
  color: var(--chalk-dim);
  font-size: 14.5px;
  font-weight:500;
  transition: color .2s ease;
  position:relative;
}
.nav-links a:hover{ color: var(--chalk); }
.nav-cta{
  display:flex; align-items:center; gap:14px;
  flex: none;
}
.nav-phone{
  display:flex; align-items:center; gap:8px;
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 13.5px;
  white-space: nowrap;
}
.nav-toggle{
  display:none;
  background:none; border:none; color:var(--chalk);
  padding: 4px;
}
@media (max-width: 940px){
  .nav-links{
    position:fixed; inset: 68px 0 0 0;
    background: #FFFFFF;
    flex-direction:column;
    align-items:flex-start;
    padding: 30px 28px;
    gap: 22px;
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:block; }
  .nav-phone{ display:none; }
}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight:600;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(201,151,28,0.55);
}
.btn-primary:hover{ background: var(--amber-dark); color:#FFFFFF; }
.btn-ghost{
  background: transparent;
  border-color: rgba(27,35,64,0.3);
  color: var(--chalk);
}
.btn-ghost:hover{ background: rgba(27,35,64,0.1); }
.btn-line{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-line:hover{ background: var(--ink); color: #FFFFFF; }
.btn-teal{
  background: var(--teal);
  color: #FFFFFF;
  box-shadow: 0 14px 28px -14px rgba(14,107,96,0.55);
}
.btn-teal:hover{ background: var(--teal-dark); }
.btn-block{ width:100%; }
.btn-whatsapp{
  background: #25D366;
  color: #0B3B22;
  box-shadow: 0 14px 28px -14px rgba(37,211,102,0.55);
}
.btn-whatsapp:hover{ background: #1EBE5B; color:#0B3B22; }
.btn-whatsapp svg{ flex:none; }
.nav-cta .btn-whatsapp{ padding: 11px 18px; }
@media (max-width: 940px){
  .nav-cta .btn-whatsapp .wa-text{ display:none; }
  .nav-cta .btn-whatsapp{ padding: 11px; }
}

/* ==========================================================================
   Section 1 — Hero
   ========================================================================== */
.hero{
  position:relative;
  padding: 62px 0 74px;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:auto -10% -30% auto;
  width: 620px; height:620px;
  background: radial-gradient(circle, rgba(201,151,28,0.14), transparent 68%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero h1{
  font-size: clamp(34px, 4.4vw, 56px);
  color: var(--chalk);
  margin: 18px 0 20px;
}
.hero h1 em{
  font-style: normal;
  font-weight: 800;
  color: var(--amber);
}
.hero-sub{
  font-size: 17px;
  color: var(--chalk-dim);
  max-width: 560px;
  margin-bottom: 34px;
  line-height:1.65;
}
.key-points{
  display:grid;
  gap: 16px;
  margin-bottom: 36px;
}
.key-point{
  display:flex;
  gap: 16px;
  align-items:flex-start;
  padding: 16px;
  border-radius: var(--radius-m);
  background: rgba(27,35,64,0.04);
  border: 1px solid var(--line-navy);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.key-point:hover{
  background: rgba(27,35,64,0.07);
  border-color: rgba(201,151,28,0.35);
  transform: translateX(3px);
}
.proof-mark{
  flex: none;
  width: 48px; height:48px;
  border-radius: 15px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #2E5AA8, #93264A 55%, #E8821E);
  border: none;
  color: #FFFFFF;
  box-shadow: 0 10px 20px -10px rgba(147,38,74,0.55);
}
.key-point-text h4{
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight:700;
  margin-bottom:4px;
}
.key-point-text p{
  color: var(--chalk-dim);
  font-size: 13.8px;
  line-height:1.55;
}
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap;
}

/* --- Demo form card --- */
.demo-card{
  background: var(--paper);
  border-radius: var(--radius-l);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  position:relative;
  z-index:2;
}
.demo-card-tag{
  position:absolute;
  top:-14px; right:28px;
  background: var(--teal);
  color:#FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.08em;
  padding: 7px 14px;
  border-radius: 999px;
  text-transform:uppercase;
}
.demo-card h3{
  font-size: 22px;
  margin-bottom: 6px;
}
.demo-card .demo-sub{
  font-size: 13.8px;
  color: var(--ink-text-soft);
  margin-bottom: 20px;
}
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.field{
  display:flex; flex-direction:column; gap:6px;
}
.field.full{ grid-column: 1 / -1; margin-bottom:12px; }
.field label{
  font-size: 12px;
  font-weight:600;
  color: var(--ink-text-soft);
  font-family: var(--font-mono);
  letter-spacing:.02em;
}
.field input, .field select, .field textarea{
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--radius-s);
  padding: 11px 13px;
  font-size: 14px;
  color: var(--ink-text);
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(201,151,28,0.18);
  outline:none;
}
.field textarea{ resize:vertical; min-height:68px; }
.form-note{
  font-size:12px;
  color: var(--ink-text-soft);
  margin-top:12px;
  text-align:center;
}
.form-success{
  display:none;
  text-align:center;
  padding: 30px 10px;
}
.form-success.show{ display:block; }
.form-success .proof-mark{ margin:0 auto 14px; }
.form-fields.hide{ display:none; }

/* ==========================================================================
   Section headers (shared)
   ========================================================================== */
.section{ padding: 90px 0; }
.section-head{
  max-width: 660px;
  margin: 0 auto 52px;
  text-align:center;
}
.section-head h2{
  font-size: clamp(28px, 3.4vw, 40px);
  margin-top: 14px;
}
.section-head p{
  margin-top: 16px;
  font-size: 15.5px;
  color: var(--ink-text-soft);
  line-height:1.7;
}
.section-head.on-ink p{ color: var(--chalk-dim); }
.section-head.left{
  text-align:left;
  margin: 0 0 44px;
}

/* ==========================================================================
   Section 2 — Courses
   ========================================================================== */
.courses{ background: var(--paper); }
.courses-layout{
  display:grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 60px;
  align-items:center;
  margin-bottom: 60px;
}
.course-illustration{
  position:relative;
}
.course-illustration svg{ width:100%; height:auto; }

/* --- Section watermark: one large, faint infinity emblem tucked in a corner —
   not a repeating pattern, just a quiet brand touch on otherwise plain sections --- */
/* --- Section watermark: a scattered field of original education-icon SVGs
   (cap, book, pencil, bulb, gear, ruler, clock, chart) placed directly in
   the page — not a CSS background image — so it renders reliably in every
   browser. Opacity set to 10% per brand request. --- */
.section-watermark{ position:relative; overflow:hidden; }
.watermark-icons{
  position:absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index:0;
  pointer-events:none;
  opacity: 0.10;
  color: var(--ink);
  overflow: hidden;
}
.watermark-icons svg{ display:block; }
.section-watermark > .container{ position:relative; z-index:1; }

/* --- Photographic banner component (real photo + colour blob + floating stat badge) --- */
.photo-illustration{
  position:relative;
  padding: 10px;
}
.photo-illustration .photo-blob{
  position:absolute;
  inset: -8% -6%;
  background: radial-gradient(65% 65% at 75% 20%, rgba(201,151,28,0.18), transparent 72%);
  z-index:0;
  border-radius: 40%;
}
.banner-photo{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  border: 4px solid #FFFFFF;
  display:block;
  background: var(--panel);
}
.photo-badge{
  position:absolute;
  z-index:2;
  left: 20px; bottom: 20px;
  display:flex; align-items:center; gap:12px;
  background: #FFFFFF;
  border-radius: var(--radius-m);
  padding: 12px 18px 12px 12px;
  box-shadow: var(--shadow-card);
}
.photo-badge .badge-icon{
  flex:none;
  width:42px; height:42px;
  border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  background: var(--amber-tint);
  color: var(--amber-dark);
}
.photo-badge b{
  display:block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  line-height:1.1;
}
.photo-badge small{
  font-size: 11.5px;
  color: var(--ink-text-soft);
}
@media (max-width: 560px){
  .photo-badge{ left:12px; bottom:12px; padding:10px 14px 10px 10px; }
  .photo-badge b{ font-size:15px; }
}

.courses-copy .eyebrow{ margin-bottom:16px; }
.courses-copy h2{
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom:18px;
}
.courses-copy p{
  color: var(--ink-text-soft);
  font-size:15.5px;
  line-height:1.75;
  margin-bottom:14px;
}
.courses-copy .tick-list{ margin-top: 20px; display:grid; gap:12px; }
.tick-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14.5px;
  color: var(--ink-text);
}
.tick-list li svg{ flex:none; margin-top:2px; }

.course-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.course-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px 20px;
  text-align:center;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.course-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, #2E5AA8, #93264A 55%, #E8821E);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.course-card:hover::before{ transform: scaleX(1); }
.course-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: var(--amber);
}
.course-card .proof-mark{
  margin: 0 auto 16px;
}
.course-card h4{
  font-size: 16px;
  margin-bottom:8px;
}
.course-card p{
  font-size: 13px;
  color: var(--ink-text-soft);
  line-height:1.55;
  margin-bottom: 16px;
}
.course-card .course-link{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight:600;
  color: var(--teal-dark);
  display:inline-flex; align-items:center; gap:6px;
}
.course-card .course-link svg{ transition: transform .2s ease; }
.course-card:hover .course-link svg{ transform: translateX(3px); }

@media (max-width: 1080px){
  .course-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px){
  .course-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ==========================================================================
   Section 3 — Features (Best Group & Home Tuitions)
   ========================================================================== */
.features{ background: var(--panel); color: var(--chalk); position:relative; }
.feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 20px;
}
.feature-card:nth-child(1){ grid-column: span 2; }
.feature-card:nth-child(5){ grid-column: span 2; }
@media (max-width: 1080px){
  .feature-card:nth-child(1), .feature-card:nth-child(5){ grid-column: span 2; }
}
@media (max-width: 640px){
  .feature-card:nth-child(1), .feature-card:nth-child(5){ grid-column: span 1; }
}
.feature-card{
  background: #FFFFFF;
  border: 1px solid var(--line-navy);
  border-radius: var(--radius-m);
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px -22px rgba(15,42,92,0.25);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.feature-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, #2E5AA8, #93264A 55%, #E8821E);
}
.feature-card:hover{
  box-shadow: 0 20px 38px -20px rgba(15,42,92,0.35);
  border-color: rgba(201,151,28,0.4);
  transform: translateY(-4px);
}
.feature-card .proof-mark{ margin-bottom: 18px; }
.feature-card:nth-child(4n+2){ background: var(--amber-tint); }
.feature-card:nth-child(4n+3){ background: var(--teal-tint); }
.feature-card:nth-child(4n+4){ background: var(--coral-tint); }
.feature-card h4{
  color: var(--ink);
  font-size: 16px;
  margin-bottom:8px;
}
.feature-card p{
  font-size: 13.5px;
  color: var(--chalk-dim);
  line-height:1.6;
}
@media (max-width: 1080px){ .feature-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .feature-grid{ grid-template-columns: 1fr;} }

/* ==========================================================================
   Section 4 — Why Hitesh Academy
   ========================================================================== */
.why{ background: var(--paper-2); }
.why-layout{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items:center;
}
.why-visual{ position:relative; }
.why-visual svg{ width:100%; height:auto; }
.why-list{ display:grid; gap:22px; margin-top: 8px; }
.why-item{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap:18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.why-item:last-child{ border-bottom:none; padding-bottom:0; }
.why-num{
  font-family: var(--font-mono);
  font-size: 13px;
  color: #FFFFFF;
  font-weight:700;
  background: linear-gradient(135deg, #2E5AA8, #93264A 55%, #E8821E);
  border-radius: 16px;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px -10px rgba(147,38,74,0.5);
}
.why-item h4{ font-size:17px; margin-bottom:6px; }
.why-item p{ font-size:14px; color:var(--ink-text-soft); line-height:1.65; }

/* ==========================================================================
   Section 5 — Mission / Vision / Approach
   ========================================================================== */
.mva{ background: var(--paper); }
.mva-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 26px;
}
.mva-card{
  padding: 34px 28px;
  border-radius: var(--radius-l);
  position:relative;
  overflow:hidden;
}
.mva-card.mission{ background: var(--amber-tint); color: var(--chalk); }
.mva-card.vision{ background: var(--teal-tint); color: var(--chalk); }
.mva-card.approach{ background: var(--coral-tint); color: var(--ink); }
.mva-mark{
  width:50px; height:50px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 6px 14px -8px rgba(27,35,64,0.25);
  margin-bottom: 22px;
}
.mva-card h3{ font-size:21px; margin-bottom:12px; }
.mva-card p{ font-size:14.5px; line-height:1.7; opacity:0.92; }
@media (max-width: 900px){ .mva-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Section 6 — FAQs
   ========================================================================== */
.faqs{ background: var(--paper-2); }
.faq-list{ max-width: 820px; margin:0 auto; display:grid; gap:14px; }
.faq-item{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow:hidden;
}
.faq-q{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 20px 24px;
  background:none; border:none;
  width:100%; text-align:left;
  font-family: var(--font-body);
  font-weight:600;
  font-size: 15.5px;
  color: var(--ink-text);
}
.faq-q span:first-child{ display:flex; gap:10px; align-items:flex-start; }
.faq-q .qmark{
  flex:none;
  font-family: var(--font-mono);
  color: var(--amber-dark);
  font-weight:700;
}
.faq-plus{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  border: 1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.faq-plus::before, .faq-plus::after{
  content:""; position:absolute; background: var(--ink-text-soft);
}
.faq-plus::before{ width:11px; height:1.6px; }
.faq-plus::after{ width:1.6px; height:11px; }
.faq-item.open .faq-plus{ transform: rotate(135deg); border-color:var(--amber); background:var(--amber-tint); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition: max-height .3s ease;
}
.faq-a-inner{
  padding: 0 24px 22px 24px;
  font-size: 14.3px;
  color: var(--ink-text-soft);
  line-height:1.7;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--panel);
  color: var(--chalk-dim);
  padding: 64px 0 0;
  border-top: 1px solid var(--panel-line);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line-navy);
}
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:13.8px; line-height:1.7; max-width:280px; }
.footer-col h5{
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom: 18px;
}
.footer-col ul{ display:grid; gap:11px; }
.footer-col a{ font-size:13.8px; transition:color .2s ease; }
.footer-col a:hover{ color: var(--amber); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 0 26px;
  font-size: 12.8px;
  flex-wrap:wrap;
  gap:10px;
}
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%;
  border: 1px solid var(--line-navy);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .2s ease, background .2s ease;
}
.footer-social a:hover{ border-color: var(--amber); background: rgba(201,151,28,0.12); }

/* --- Sticky mobile call bar --- */
.mobile-callbar{
  display:none;
}
@media (max-width: 640px){
  .mobile-callbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index: 200;
    background: #FFFFFF;
    border-top: 1px solid var(--line);
    padding: 12px 16px;
    gap: 10px;
  }
  .mobile-callbar .btn{ flex:1; }
  body{ padding-bottom: 68px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .courses-layout{ grid-template-columns: 1fr; }
  .why-layout{ grid-template-columns: 1fr; }
  .why-layout .why-visual{ order:2; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .section{ padding: 64px 0; }
  .hero{ padding: 48px 0 70px; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Course detail page specifics
   ========================================================================== */
.course-hero{
  position:relative;
  padding: 70px 0 90px;
  overflow:hidden;
}
.course-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:50px;
  align-items:center;
}
.breadcrumb{
  font-family: var(--font-mono);
  font-size:12.5px;
  color: var(--chalk-dim);
  margin-bottom:20px;
  display:flex; gap:8px; align-items:center;
  flex-wrap: wrap;
}
.breadcrumb a{ color: var(--chalk-dim); }
.breadcrumb a:hover{ color:var(--amber); }
.course-hero h1{
  color: var(--chalk);
  font-size: clamp(30px, 4vw, 46px);
  margin: 14px 0 18px;
}
.course-hero .hero-sub{ margin-bottom: 10px; }
.stat-row{
  display:flex; gap:34px; margin-top: 30px; flex-wrap:wrap;
}
.stat-row .stat b{
  display:block; font-family: var(--font-display); font-size:26px; color:var(--amber);
}
.stat-row .stat span{
  font-size:12px; color: var(--chalk-dim); font-family: var(--font-mono);
}

.syllabus-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.syllabus-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 24px;
  padding-left: 28px;
  display:flex; gap:16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px -24px rgba(15,42,92,0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.syllabus-card::before{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:4px;
  background: linear-gradient(180deg, #2E5AA8, #93264A 55%, #E8821E);
}
.syllabus-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(15,42,92,0.32);
}
.syllabus-card:nth-child(3n+2){ background: var(--amber-tint); }
.syllabus-card:nth-child(3n+3){ background: var(--teal-tint); }
.syllabus-card h4{ font-size:15.5px; margin-bottom:6px; }
.syllabus-card p{ font-size:13.3px; color:var(--ink-text-soft); line-height:1.6; }
@media (max-width: 780px){ .syllabus-grid{ grid-template-columns: 1fr; } .course-hero-grid{ grid-template-columns:1fr; } }

.approach-steps{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:18px;
}
.approach-step{
  padding: 26px 20px;
  border-radius: var(--radius-m);
  background: var(--paper-2);
  border: 1px solid var(--line);
  position:relative;
}
.approach-step .step-index{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal-dark);
  margin-bottom: 14px;
  display:block;
}
.approach-step h4{ font-size:15px; margin-bottom:8px; }
.approach-step p{ font-size:13px; color:var(--ink-text-soft); line-height:1.6; }
@media (max-width: 900px){ .approach-steps{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .approach-steps{ grid-template-columns: 1fr;} }

.mode-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px;
}
.mode-card{
  background: #FFFFFF; color:var(--chalk);
  border-radius: var(--radius-m);
  padding: 28px 24px;
  padding-top: 30px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 34px -24px rgba(15,42,92,0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mode-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, #2E5AA8, #93264A 55%, #E8821E);
}
.mode-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(15,42,92,0.34);
}
.mode-card h4{ font-size:17px; margin-bottom:10px; color:var(--amber-dark); }
.mode-card p{ font-size:13.6px; color:var(--ink-text-soft); line-height:1.65; }
@media (max-width: 860px){ .mode-grid{ grid-template-columns:1fr;} }

.course-cta{
  background: var(--amber);
  border-radius: var(--radius-l);
  padding: 46px;
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items:center;
  gap: 30px;
}
.course-cta h3{ font-size: clamp(22px,3vw,30px); color:var(--ink); margin-bottom:10px; }
.course-cta p{ color: rgba(15,42,92,0.72); font-size:14.5px; }
.course-cta .btn-line{ border-color: var(--ink); color:var(--ink); }
@media (max-width: 780px){ .course-cta{ grid-template-columns:1fr; text-align:center; } }

.related-courses{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
.related-chip{
  padding: 10px 20px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13.5px;
  font-weight:600;
  transition: border-color .2s ease, background .2s ease;
}
.related-chip:hover{ border-color: var(--amber); background: var(--amber-tint); }
.related-chip.active{ background: var(--amber); color:var(--ink); border-color:var(--amber); }

/* ==========================================================================
   Engineering page — Colleges We Cover
   ========================================================================== */
.college-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.college-card{
  display:flex;
  align-items:center;
  gap: 16px;
  background:#fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  box-shadow: 0 12px 28px -22px rgba(15,42,92,0.3);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.college-card:hover{
  border-color: var(--amber);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.college-card .college-mark{
  flex: none;
  width: 46px; height: 46px;
  border-radius: 15px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #2E5AA8, #93264A 55%, #E8821E);
  color: #FFFFFF;
}
.college-card .college-name{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink-text);
  line-height: 1.35;
}
.college-card .college-tag{
  display:block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-text-soft);
  margin-top: 3px;
  letter-spacing: .02em;
}
.college-note{
  text-align:center;
  margin-top: 26px;
  font-size: 14px;
  color: var(--ink-text-soft);
  max-width: 640px;
  margin-left:auto; margin-right:auto;
}
@media (max-width: 900px){ .college-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .college-grid{ grid-template-columns: 1fr; } }

.subject-tag-grid{
  display:flex; flex-wrap:wrap; gap:10px;
}
.subject-tag{
  padding: 9px 16px;
  border-radius:999px;
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: 13px;
  font-weight:600;
}

/* =====================================================================
   2026 PREMIUM POLISH — Hitesh Academy
   ===================================================================== */
:root{
  --premium-navy:#0b1f3a;
  --premium-blue:#173e73;
  --premium-gold:#d2a62a;
  --premium-cream:#fffdf8;
  --premium-shadow:0 24px 70px -35px rgba(11,31,58,.34);
}

body{background:linear-gradient(180deg,#fffefa 0%,#f9f7f1 100%);}
::selection{background:rgba(201,151,28,.22);color:var(--premium-navy);}

.site-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(15,42,92,.09);
  box-shadow:0 8px 30px -28px rgba(11,31,58,.55);
}
.nav{min-height:76px;padding-top:4px;padding-bottom:4px;}
.brand-logo-img{height:78px;mix-blend-mode:multiply;transition:transform .25s ease;}
.brand:hover .brand-logo-img{transform:scale(1.025);}
.nav-links{gap:26px;}
.nav-links a{color:#43506a;font-weight:600;font-size:13.5px;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--premium-gold);transition:right .25s ease;}
.nav-links a:hover{color:var(--premium-navy);}
.nav-links a:hover::after{right:0;}
.nav-phone{color:var(--premium-navy);font-weight:700;}

.btn{box-shadow:0 12px 26px -18px rgba(11,31,58,.45);}
.btn-primary{background:linear-gradient(135deg,#d7aa31,#b98512);color:#fff;box-shadow:0 16px 30px -18px rgba(168,125,18,.75);}
.btn-primary:hover{background:linear-gradient(135deg,#e0b63d,#a9780d);}
.btn-whatsapp{box-shadow:0 16px 30px -18px rgba(37,211,102,.7);}

.hero{
  padding:64px 0 78px;
  background:
    radial-gradient(circle at 92% 10%,rgba(210,166,42,.20),transparent 28%),
    radial-gradient(circle at 0% 100%,rgba(46,90,168,.12),transparent 35%),
    linear-gradient(135deg,#eef3fb 0%,#e2ebf9 58%,#f7f1df 100%);
}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 45%,rgba(255,255,255,.16));pointer-events:none;}
.hero::after{width:720px;height:720px;right:-18%;bottom:-42%;background:radial-gradient(circle,rgba(210,166,42,.16),transparent 68%);}
.hero-grid{gap:48px;align-items:center;}
.hero h1{font-size:clamp(38px,4.6vw,62px);letter-spacing:-.035em;color:var(--premium-navy);margin-top:20px;}
.hero h1 em{color:#a7780e;}
.hero-sub{color:#4b5870;font-size:17px;line-height:1.72;max-width:610px;}
.key-points{gap:12px;}
.key-point{background:rgba(255,255,255,.62);border:1px solid rgba(15,42,92,.10);backdrop-filter:blur(8px);box-shadow:0 14px 32px -26px rgba(11,31,58,.45);padding:15px 17px;}
.key-point:hover{background:rgba(255,255,255,.9);transform:translateY(-2px);box-shadow:0 18px 34px -24px rgba(11,31,58,.4);}
.proof-mark{background:linear-gradient(135deg,rgba(210,166,42,.18),rgba(46,90,168,.09));color:var(--premium-blue);border:1px solid rgba(201,151,28,.22);}
.key-point-text h4{color:var(--premium-navy);}
.key-point-text p{color:#5b667b;}

.demo-card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,42,92,.11);
  border-radius:30px;
  box-shadow:var(--premium-shadow);
  padding:30px;
  position:relative;
  overflow:hidden;
}
.demo-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#173e73,#d2a62a,#8c1f3b);}
.demo-card-tag{background:linear-gradient(135deg,#fff4d5,#f8e5a9);color:#7e5a08;border:1px solid rgba(201,151,28,.2);font-weight:800;letter-spacing:.05em;}
.demo-card h3{font-size:29px;color:var(--premium-navy);}
.demo-sub{color:#647087;}
.field label{color:#35425b;font-weight:700;font-size:12px;}
.field input,.field select,.field textarea{background:#fbfcff;border:1px solid #dfe5ee;border-radius:13px;color:#172641;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#c9971c;box-shadow:0 0 0 4px rgba(201,151,28,.10);background:#fff;outline:none;}

.section{padding:100px 0;}
.section-head h2,.courses-copy h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.025em;color:var(--premium-navy);}
.section-head p,.courses-copy>p{color:#657087;line-height:1.75;}
.courses{background:linear-gradient(180deg,#fffdf9,#f7f8fb);}
.courses-layout{align-items:center;gap:72px;}
.photo-illustration{filter:drop-shadow(0 30px 35px rgba(11,31,58,.16));}
.banner-photo{border-radius:34px;border:8px solid rgba(255,255,255,.86);box-shadow:0 25px 60px -30px rgba(11,31,58,.48);transform:rotate(-1.5deg);transition:transform .35s ease;}
.photo-illustration:hover .banner-photo{transform:rotate(0) scale(1.012);}
.photo-badge{box-shadow:0 20px 40px -25px rgba(11,31,58,.45);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(10px);}
.course-grid{gap:18px;margin-top:70px;}
.course-card{position:relative;background:rgba(255,255,255,.88);border:1px solid #e4e8ef;border-radius:22px;padding:25px;box-shadow:0 16px 38px -30px rgba(11,31,58,.5);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;overflow:hidden;}
.course-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#173e73,#d2a62a);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;}
.course-card:hover{transform:translateY(-7px);border-color:rgba(201,151,28,.38);box-shadow:0 28px 48px -30px rgba(11,31,58,.52);}
.course-card:hover::after{transform:scaleX(1);}
.course-card h4{color:var(--premium-navy);font-size:20px;}
.course-card p{color:#68748a;line-height:1.65;}
.course-link{color:#9a710e;font-weight:800;}

.features{background:linear-gradient(135deg,#0b1f3a 0%,#14375f 58%,#203e62 100%);color:#fff;position:relative;overflow:hidden;}
.features::before{content:"";position:absolute;width:520px;height:520px;right:-200px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(210,166,42,.18),transparent 65%);}
.features .section-head h2{color:#fff;}
.features .section-head p{color:rgba(255,255,255,.72);}
.features .eyebrow{color:#e0b83e;}
.features .eyebrow::before{background:#e0b83e;}
.feature-grid{gap:18px;position:relative;z-index:1;}
.feature-card{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:28px;backdrop-filter:blur(8px);transition:transform .28s ease,background .28s ease,border-color .28s ease;}
.feature-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.11);border-color:rgba(210,166,42,.45);}
.feature-card h4{color:#fff;}
.feature-card p{color:rgba(255,255,255,.68);line-height:1.7;}
.features .proof-mark{background:rgba(210,166,42,.12);border-color:rgba(210,166,42,.22);color:#e1b83f;}

.why{background:#fffdf9;}
.why-layout{gap:70px;}
.why-copy h2{color:var(--premium-navy);}
.why-item{border-bottom:1px solid #e9e5dc;padding:18px 0;}
.why-num{color:#b18113;font-weight:800;}
.why-item h4{color:var(--premium-navy);}
.why-item p{color:#68748a;line-height:1.7;}
.why-visual{border-radius:30px;background:linear-gradient(145deg,#edf2fa,#fff8e7);box-shadow:var(--premium-shadow);border:1px solid #e4e8ef;}

.mva{background:linear-gradient(180deg,#f5f7fb,#fffdf9);}
.mva-grid{gap:18px;}
.mva-card{background:#fff;border:1px solid #e3e7ee;border-radius:24px;box-shadow:0 18px 45px -32px rgba(11,31,58,.42);transition:transform .25s ease,box-shadow .25s ease;}
.mva-card:hover{transform:translateY(-5px);box-shadow:0 28px 50px -32px rgba(11,31,58,.5);}
.mva-card h3{color:var(--premium-navy);}
.mva-card p{color:#68748a;line-height:1.7;}

.faqs{background:#fffdf9;}
.faq-item{background:#fff;border:1px solid #e5e8ee;border-radius:18px;margin-bottom:12px;box-shadow:0 10px 28px -26px rgba(11,31,58,.4);overflow:hidden;}
.faq-item.open{border-color:rgba(201,151,28,.4);box-shadow:0 18px 35px -28px rgba(11,31,58,.45);}
.faq-q{padding:21px 24px;color:var(--premium-navy);font-weight:750;}
.faq-a-inner{color:#667287;line-height:1.75;padding:0 24px 22px;}
.qmark{color:#b18113;font-weight:900;}

.site-footer{background:#091a30;color:#fff;}
.site-footer .footer-brand p,.site-footer .footer-col a{color:rgba(255,255,255,.68);}
.site-footer .footer-col a:hover{color:#fff;}
.site-footer h5{color:#e1b83f;}
.footer-bottom{border-top-color:rgba(255,255,255,.12);}
.footer-brand .brand-logo-img{height:82px;mix-blend-mode:screen;filter:brightness(1.08) contrast(1.02);}

/* Scroll reveal */
.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.reveal-on-scroll.is-visible{opacity:1;transform:none;}

@media (max-width:940px){
  .nav{min-height:70px;padding-left:20px;padding-right:20px;}
  .brand-logo-img{height:68px;}
  .nav-links{top:70px;background:rgba(255,255,255,.98);box-shadow:0 25px 45px -30px rgba(11,31,58,.5);}
  .nav-links a{color:#253652;font-size:15px;}
  .hero{padding:64px 0 76px;}
  .hero-grid{gap:42px;}
}
@media (max-width:700px){
  .container{padding-left:20px;padding-right:20px;}
  .section{padding:76px 0;}
  .hero h1{font-size:39px;}
  .hero-sub{font-size:15.5px;}
  .key-point{padding:13px;}
  .demo-card{padding:22px;border-radius:24px;}
  .demo-card h3{font-size:25px;}
  .courses-layout{gap:42px;}
  .course-grid{margin-top:48px;}
  .course-card{padding:22px;}
  .faq-q{padding:18px;}
  .faq-a-inner{padding:0 18px 18px;}
}
@media (max-width:560px){
  .brand-logo-img{height:60px;}
  .nav-cta .btn-primary{display:none;}
  .hero{padding-top:48px;}
  .hero h1{font-size:34px;}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .hero-actions .btn:last-child{grid-column:1/-1;}
  .btn{padding:12px 18px;font-size:13.5px;}
}

/* ========================================================================
   Brand watermark treatment — refined wave motif + hero logo
   ======================================================================== */
.hero-logo-watermark{
  position:absolute;
  width:min(720px, 62vw);
  right:-105px;
  top:50%;
  transform:translateY(-50%) rotate(-3deg);
  opacity:.075;
  filter:grayscale(.15) saturate(.9);
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
}
.hero-grid{ z-index:3; }
.hero-form{ position:relative; z-index:4; }

/* Replace the previous icon-field watermarks with a quieter signature wave. */
.watermark-icons{ display:none !important; }
.section-watermark,
.section-watermark-alt,
.courses,
.features,
.why{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.section-watermark::before,
.section-watermark-alt::before,
.courses::before,
.features::before,
.why::before{
  content:"";
  position:absolute;
  width:min(1100px, 78vw);
  height:360px;
  right:-140px;
  bottom:-90px;
  background:url('../images/wave-watermark.svg') center/100% 100% no-repeat;
  pointer-events:none;
  z-index:0;
}
.section-watermark-alt::before{
  right:auto;
  left:-150px;
  transform:scaleX(-1) rotate(2deg);
  bottom:-70px;
}
.courses::before{ right:-180px; bottom:-120px; opacity:.82; }
.features::before{ right:-130px; bottom:-80px; transform:rotate(-2deg); }
.why::before{ left:-160px; right:auto; bottom:-120px; transform:scaleX(-1); }
.section-watermark > .container,
.section-watermark-alt > .container,
.courses > .container,
.features > .container,
.why > .container{ position:relative; z-index:2; }

/* A second, smaller wave trace keeps long sections visually connected. */
.section-watermark::after,
.section-watermark-alt::after,
.courses::after,
.features::after,
.why::after{
  content:"";
  position:absolute;
  width:520px;
  height:170px;
  left:-120px;
  top:28%;
  background:url('../images/wave-watermark.svg') center/100% 100% no-repeat;
  opacity:.42;
  transform:rotate(-8deg);
  pointer-events:none;
  z-index:0;
}
.section-watermark-alt::after{ left:auto; right:-120px; transform:scaleX(-1) rotate(-8deg); }
.courses::after{ opacity:.25; top:16%; }
.features::after{ opacity:.24; top:22%; }
.why::after{ opacity:.24; top:18%; }

@media (max-width: 900px){
  .hero-logo-watermark{
    width:560px;
    max-width:95vw;
    right:-150px;
    top:28%;
    opacity:.055;
  }
  .section-watermark::before,
  .section-watermark-alt::before,
  .courses::before,
  .features::before,
  .why::before{
    width:850px;
    height:300px;
    right:-220px;
    bottom:-100px;
  }
}
@media (max-width: 560px){
  .hero-logo-watermark{
    width:460px;
    right:-165px;
    top:25%;
    opacity:.045;
  }
  .section-watermark::before,
  .section-watermark-alt::before,
  .courses::before,
  .features::before,
  .why::before{
    width:720px;
    height:250px;
    right:-250px;
    bottom:-80px;
  }
  .section-watermark::after,
  .section-watermark-alt::after,
  .courses::after,
  .features::after,
  .why::after{ display:none; }
}

/* ========================================================================
   FINAL POLISH — student watermark, flowing waves, accessible contrast
   ======================================================================== */
:root{
  --hero-bg: #F5F8FC;
  --navy-deep: #102B55;
  --navy-mid: #173D6B;
  --text-dark: #13243F;
  --muted-dark: #53627A;
  --wave-opacity: .72;
}

/* Hero: soft paper-blue background + a large, quiet education illustration */
.hero{
  background: var(--hero-bg);
  color: var(--text-dark);
  min-height: 0;
}
.hero-logo-watermark{
  position:absolute;
  width:min(420px, 36vw);
  right:-30px;
  top:55px;
  opacity:.035;
  filter:grayscale(1);
  pointer-events:none;
  z-index:0;
}
.hero-student-watermark{
  position:absolute;
  width:min(620px, 48vw);
  right:-70px;
  bottom:-120px;
  opacity:.105;
  pointer-events:none;
  z-index:0;
}
.hero-grid{ z-index:2; }
.hero-copy,.hero-form{ position:relative; z-index:2; }

/* Demo card: keep the label fully inside the card so it can never be clipped */
.demo-card{
  padding: 38px 30px 30px;
  border:1px solid rgba(15,42,92,.10);
  box-shadow: 0 28px 65px -28px rgba(15,42,92,.28);
}
.demo-card-tag{
  top:14px;
  right:22px;
  padding:6px 12px;
  font-size:10px;
  background:var(--amber-tint);
  color:var(--amber-dark);
  border:1px solid rgba(201,151,28,.25);
}
.demo-card h3{
  font-size:clamp(24px,2.4vw,30px);
  color:var(--navy-deep);
}
.demo-card .demo-sub{ color:#60708A; }

/* Flowing watermark waves on every content section */
.section{
  position:relative;
  overflow:hidden;
}
.section::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-92px;
  height:280px;
  background:url('../images/wave-watermark.svg') center bottom / cover no-repeat;
  opacity:var(--wave-opacity);
  pointer-events:none;
  z-index:0;
}
.section::after{
  content:"";
  position:absolute;
  top:-105px;
  right:-10%;
  width:520px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,151,28,.075), transparent 68%);
  pointer-events:none;
  z-index:0;
}
.section > .container{ position:relative; z-index:1; }

/* Alternate wave direction to keep the long page visually alive */
.why::before, .faqs::before{ transform:scaleX(-1); }
.features::before{ opacity:.55; }

/* Features: strong navy canvas, but every card uses high-contrast typography */
.features{
  background:linear-gradient(145deg, #102B55 0%, #173D6B 100%);
  color:#fff;
}
.features .section-head h2{ color:#fff; }
.features .section-head p{ color:rgba(255,255,255,.78); }
.feature-grid{ position:relative; z-index:2; }
.feature-card{
  color:var(--text-dark) !important;
  background:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 38px -24px rgba(0,0,0,.38);
}
.feature-card:nth-child(2),
.feature-card:nth-child(6){ background:#FFF8E8 !important; }
.feature-card:nth-child(3),
.feature-card:nth-child(7){ background:#EDF8F6 !important; }
.feature-card:nth-child(4){ background:#FFF2F5 !important; }
.feature-card h4,
.feature-card p{
  color:var(--text-dark) !important;
  opacity:1 !important;
}
.feature-card h4{ font-size:17px; line-height:1.25; }
.feature-card p{ color:#56647A !important; font-size:14px; line-height:1.65; }
.feature-card .proof-mark{ background:linear-gradient(135deg,#2E5AA8,#7B3F75 55%,#C9971C); }

/* Section headings and body copy */
.section-head h2{ color:var(--navy-deep); }
.section-head p{ color:var(--muted-dark); }
.courses,.mva{ background:#FBFCFE; }
.why,.faqs{ background:#F3F6FA; }

/* Make all decorative watermark layers sit behind content */
.watermark-icons{ display:none !important; }

/* Better mobile balance */
@media (max-width: 900px){
  .hero{ padding-top:54px; min-height:auto; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-student-watermark{ width:520px; right:-170px; bottom:-90px; opacity:.075; }
  .hero-logo-watermark{ width:300px; right:-80px; top:160px; }
  .demo-card{ max-width:680px; margin:0 auto; }
}
@media (max-width: 560px){
  .hero{ padding:42px 0 68px; }
  .hero-student-watermark{ width:430px; right:-180px; bottom:-80px; opacity:.055; }
  .hero-logo-watermark{ display:none; }
  .demo-card{ padding:38px 18px 22px; border-radius:22px; }
  .demo-card-tag{ right:16px; }
  .section{ padding:70px 0; }
  .section::before{ height:190px; bottom:-70px; }
}


/* ========================================================================
   HERO BALANCE — tighter desktop composition, less empty space
   ======================================================================== */
.hero{
  min-height:0;
  padding:68px 0 78px;
}
.hero-grid{
  align-items:start;
  gap:46px;
}
.hero-copy{
  padding-top:4px;
}
.hero-form{
  padding-top:18px;
}
.key-points{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:28px;
}
.key-point{
  min-height:112px;
  padding:13px 14px;
  gap:12px;
}
.key-point .proof-mark{
  width:42px;
  height:42px;
  border-radius:13px;
}
.key-point-text h4{font-size:14px;line-height:1.3;}
.key-point-text p{font-size:12.5px;line-height:1.48;}
.hero-student-watermark{
  display:block;
  width:min(560px,43vw);
  right:-40px;
  bottom:-105px;
  opacity:.075;
}

@media (max-width:1100px){
  .hero-grid{gap:32px;}
  .key-points{grid-template-columns:1fr;}
  .key-point{min-height:0;}
}
@media (max-width:900px){
  .hero{padding:54px 0 72px;}
  .hero-grid{grid-template-columns:1fr;gap:30px;}
  .hero-form{padding-top:0;}
  .key-points{grid-template-columns:1fr 1fr;}
  .hero-student-watermark{width:520px;right:-170px;bottom:-90px;opacity:.065;}
}
@media (max-width:700px){
  .key-points{grid-template-columns:1fr;}
  .hero-student-watermark{width:450px;right:-170px;bottom:-75px;opacity:.05;}
}
@media (max-width:560px){
  .hero{padding:42px 0 62px;}
  .hero-student-watermark{width:390px;right:-165px;bottom:-60px;opacity:.045;}
}

/* ========================================================================
   FINAL VISUAL REFINEMENT — premium hero composition & academic watermark
   ======================================================================== */
.hero{
  min-height:0;
  padding:50px 0 48px;
}
.hero-grid{
  grid-template-columns:minmax(0,1.06fr) minmax(410px,.94fr);
  gap:44px;
  align-items:center;
}
.hero-copy{max-width:700px;}
.hero h1{
  max-width:690px;
  font-size:clamp(38px,4.35vw,58px);
  line-height:1.01;
  margin:14px 0 18px;
}
.hero-sub{max-width:620px;margin-bottom:24px;}
.key-points{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-bottom:18px;
}
.key-point{
  min-height:78px;
  padding:10px 12px;
  gap:10px;
  border-radius:16px;
}
.proof-mark{width:42px;height:42px;border-radius:13px;}
.key-point-text h4{font-size:13px;line-height:1.18;}
.key-point-text p{font-size:11.7px;line-height:1.35;}
.hero-actions{gap:10px;}
.hero-student-watermark{
  width:min(760px,58vw);
  right:-95px;
  bottom:-155px;
  opacity:.095;
  filter:saturate(.78);
}
.hero-logo-watermark{opacity:.025;right:15px;top:35px;}
.hero-form{width:100%;max-width:560px;justify-self:end;}
.demo-card{padding:30px 28px 24px;border-radius:26px;}
.demo-card h3{font-size:clamp(23px,2.2vw,29px);}
.demo-card .demo-sub{margin-bottom:14px;}

/* Engineering hero: subtle formula/grid watermark behind the photography. */
.course-hero{position:relative;}
.engineering-math-watermark{
  position:absolute;
  width:min(720px,62vw);
  right:-90px;
  top:-45px;
  opacity:.38;
  pointer-events:none;
  z-index:0;
}
.course-hero-grid{position:relative;z-index:1;}

/* Softer, less repetitive section transitions. */
.courses,.why,.mva,.faqs{position:relative;overflow:hidden;}
.courses::after,.why::after{opacity:.18;}
.features::after{opacity:.14;}
.section-watermark::after,.section-watermark-alt::after{opacity:.22;}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .hero-form{max-width:720px;justify-self:start;}
  .hero-student-watermark{width:650px;right:-180px;bottom:-100px;opacity:.07;}
}
@media (max-width:680px){
  .hero{padding:42px 0 48px;}
  .hero h1{font-size:35px;line-height:1.04;}
  .key-points{grid-template-columns:1fr;gap:9px;}
  .key-point{min-height:auto;}
  .hero-student-watermark{width:560px;right:-230px;bottom:-55px;opacity:.055;}
  .engineering-math-watermark{width:620px;right:-240px;top:10px;opacity:.22;}
}


/* ==========================================================================
   Final refinement — Engineering Teaching Approach
   Compact the section and strengthen card boundaries for a cleaner hierarchy.
   ========================================================================== */
.engineering-approach-section{
  background: var(--paper-2);
  padding: 58px 0 62px;
}
.engineering-approach-section .section-head.left{
  max-width: 900px;
  margin: 0 0 30px;
}
.engineering-approach-section .section-head h2{
  max-width: 820px;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.08;
  margin-top: 12px;
}
.engineering-approach-section .section-head p{
  max-width: 820px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
}
.engineering-approach-section .approach-steps{
  gap: 16px;
  align-items: stretch;
}
.engineering-approach-section .approach-step{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15,42,92,0.16);
  border-radius: 18px;
  padding: 23px 21px 24px;
  min-height: 190px;
  box-shadow: 0 8px 22px -18px rgba(15,42,92,0.38);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.engineering-approach-section .approach-step:hover{
  transform: translateY(-3px);
  border-color: rgba(196,145,16,0.48);
  box-shadow: 0 15px 28px -20px rgba(15,42,92,0.42);
}
.engineering-approach-section .approach-step .step-index{
  display:inline-flex;
  align-items:center;
  min-height: 28px;
  padding: 4px 9px;
  margin-bottom: 13px;
  border: 1px solid rgba(196,145,16,0.28);
  border-radius: 999px;
  background: rgba(196,145,16,0.08);
  color: #8b6500;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.engineering-approach-section .approach-step h4{
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 9px;
  color: var(--chalk);
}
.engineering-approach-section .approach-step p{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-text-soft);
}
@media (max-width: 900px){
  .engineering-approach-section{
    padding: 50px 0 54px;
  }
  .engineering-approach-section .section-head.left{
    margin-bottom: 26px;
  }
}
@media (max-width: 560px){
  .engineering-approach-section{
    padding: 44px 0 48px;
  }
  .engineering-approach-section .section-head h2{
    font-size: 31px;
  }
  .engineering-approach-section .approach-step{
    min-height: 0;
  }
}

/* Final mobile navigation refinement */
@media (max-width: 940px){
  .nav{position:relative; min-height:70px; padding-left:18px; padding-right:18px; gap:10px;}
  .nav-links{z-index:1000; top:70px; bottom:auto; width:100%; min-height:calc(100vh - 70px); overflow-y:auto; box-sizing:border-box;}
  .nav-cta{margin-left:auto; gap:8px;}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(15,42,92,.15); border-radius:12px; color:var(--premium-navy); background:#fff; cursor:pointer;}
}
@media (max-width:560px){
  .nav{min-height:64px; padding:4px 12px;}
  .brand-logo-img{height:58px; max-width:180px;}
  .nav-links{top:64px; min-height:calc(100vh - 64px); padding:24px 20px 32px; gap:0;}
  .nav-links li{width:100%;}
  .nav-links a{display:flex; width:100%; box-sizing:border-box; padding:13px 4px; font-size:15px;}
  .nav-cta .btn-primary{display:none;}
  .nav-cta .btn-whatsapp{display:inline-flex; padding:10px; min-width:40px; min-height:40px;}
  .nav-toggle{width:40px; height:40px;}
}


/* ========================================================================
   FINAL HERO COMPACTNESS — reduce vertical whitespace in Section 1
   ======================================================================== */
.hero{
  padding:32px 0 30px;
}
.hero-grid{
  align-items:start;
  gap:38px;
}
.hero-copy{
  padding-top:0;
}
.hero-form{
  padding-top:0;
}
.hero h1{
  margin:10px 0 14px;
}
.hero-sub{
  margin-bottom:18px;
  line-height:1.55;
}
.key-points{
  gap:8px;
  margin-bottom:12px;
}
.key-point{
  min-height:70px;
  padding:9px 11px;
}
.key-point-text h4{
  font-size:13px;
  margin-bottom:2px;
}
.key-point-text p{
  font-size:11.5px;
  line-height:1.3;
}
.demo-card{
  padding:26px 26px 21px;
}

@media (max-width:1000px){
  .hero{padding:38px 0 38px;}
  .hero-grid{gap:28px;}
}
@media (max-width:680px){
  .hero{padding:34px 0 38px;}
}

/* ========================================================================
   MOBILE MENU FIX — keep the menu fully above page content
   ======================================================================== */
.site-header{
  z-index:2000;
}

@media (max-width:940px){
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    height:calc(100vh - 70px);
    min-height:0;
    max-height:calc(100vh - 70px);
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:hidden;
    background:#fff;
    z-index:2001;
    padding:24px 20px 32px;
    gap:0;
    box-shadow:0 20px 40px -28px rgba(11,31,58,.45);
  }

  /* Hide the green WhatsApp icon next to the mobile menu button. */
  .nav-cta .btn-whatsapp{
    display:none !important;
  }

  body.mobile-menu-open{
    overflow:hidden;
  }
}

@media (max-width:560px){
  .nav-links{
    top:100%;
    height:calc(100vh - 64px);
    max-height:calc(100vh - 64px);
    padding:24px 20px 32px;
  }
}

/* ========================================================================
   LATEST HERO + HEADER REFINEMENT
   ======================================================================== */
@media (min-width: 941px){
  /* Reduce unnecessary vertical whitespace inside the desktop demo card. */
  .demo-card{
    padding:20px 24px 17px;
  }
  .demo-card h3{
    margin-top:2px;
    margin-bottom:4px;
  }
  .demo-card .demo-sub{
    margin-bottom:12px;
  }
}

/* Keep the WhatsApp icon visible beside the menu button on mobile/tablet. */
@media (max-width: 940px){
  .nav-cta .btn-whatsapp{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:10px !important;
    min-width:40px;
    min-height:40px;
  }
  .nav-cta .btn-whatsapp .wa-text{
    display:none !important;
  }
}

/* ========================================================================
   FINAL MOBILE WHATSAPP + MENU + WIDTH FIXES
   ======================================================================== */
.whatsapp-icon{
  width:18px;
  height:18px;
  display:block;
  flex:0 0 auto;
}
.nav-cta .btn-whatsapp .whatsapp-icon{
  width:20px;
  height:20px;
}

@media (max-width:940px){
  /* Keep the open menu as a true viewport overlay, below the header. */
  .nav-links,
  .nav-links.open{
    position:fixed !important;
    top:70px !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    height:calc(100vh - 70px) !important;
    max-height:calc(100vh - 70px) !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    background:#fff !important;
    z-index:3000 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:translateX(100%);
    transition:transform .28s ease;
    padding:24px 20px 32px !important;
  }
  .nav-links.open{ transform:translateX(0) !important; }
  .nav-cta .btn-whatsapp{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    padding:0 !important;
    border-radius:50%;
    color:#fff;
  }
  .nav-cta .btn-whatsapp .whatsapp-icon{width:21px;height:21px;}
  .nav-cta .btn-whatsapp .wa-text{display:none !important;}
}

@media (max-width:560px){
  .nav-links,
  .nav-links.open{
    top:64px !important;
    height:calc(100vh - 64px) !important;
    max-height:calc(100vh - 64px) !important;
  }
}

@media (max-width:640px){
  /* Prevent the sticky Call / WhatsApp / Free Demo bar from creating horizontal overflow. */
  .mobile-callbar{
    left:0;
    right:0;
    width:100%;
    box-sizing:border-box;
    padding:9px 10px;
    gap:8px;
    overflow:hidden;
  }
  .mobile-callbar .btn{
    min-width:0;
    box-sizing:border-box;
    flex:1 1 0;
    padding:11px 8px;
    font-size:13px;
  }
  .mobile-callbar .btn-whatsapp{
    flex:0 0 46px;
    width:46px !important;
    min-width:46px;
    padding:0 !important;
    height:42px;
    border-radius:999px;
  }
  .mobile-callbar .btn-whatsapp .whatsapp-icon{
    width:20px;
    height:20px;
  }
}

/* ========================================================================
   MOBILE-ONLY FINAL FIXES — do not alter desktop/tablet presentation
   ======================================================================== */
@media (max-width: 640px){
  /* Keep the entire mobile document locked to the viewport width. */
  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }
  body{
    width:100%;
    max-width:100vw;
    overflow-x:hidden !important;
  }

  /* Menu is a real viewport overlay. It cannot sit on top of hero text. */
  .nav-links,
  .nav-links.open{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100dvh !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:84px 20px 32px !important;
    background:#fff !important;
    box-shadow:none !important;
    z-index:5000 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    transform:translate3d(100%,0,0);
    transition:transform .25s ease !important;
  }
  .nav-links.open{
    transform:translate3d(0,0,0) !important;
  }
  .nav-links li{
    width:100% !important;
    flex:0 0 auto;
  }
  .nav-links a{
    display:flex !important;
    width:100% !important;
    min-height:44px;
    align-items:center;
    padding:10px 4px !important;
    font-size:16px !important;
  }

  /* Smaller WhatsApp button beside the mobile menu icon. */
  .nav-cta{
    gap:7px !important;
  }
  .nav-cta .btn-whatsapp{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    border-radius:50% !important;
  }
  .nav-cta .btn-whatsapp .whatsapp-icon{
    width:16px !important;
    height:16px !important;
  }
  .nav-toggle{
    width:38px !important;
    height:38px !important;
    padding:4px !important;
  }

  /* Bottom action bar: fit exactly inside the viewport, with no overflow. */
  .mobile-callbar{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100vw !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    gap:6px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .mobile-callbar .btn{
    min-width:0 !important;
    max-width:none !important;
    flex:1 1 0 !important;
    width:auto !important;
    padding:10px 5px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }
  .mobile-callbar .btn-whatsapp{
    flex:0 0 40px !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    padding:0 !important;
    border-radius:50% !important;
  }
  .mobile-callbar .btn-whatsapp .whatsapp-icon{
    width:18px !important;
    height:18px !important;
  }
}


/* ========================================================================
   MOBILE FINAL PATCH — menu overlay, no header WhatsApp, no horizontal drift
   Desktop/Web styles above are intentionally untouched.
   ======================================================================== */
@media (max-width:640px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  /* Header WhatsApp button: hide ONLY on mobile. */
  .site-header .nav-cta .btn-whatsapp{
    display:none !important;
  }

  .nav,
  .nav-cta,
  .brand,
  .hero,
  .hero-grid,
  .hero-copy,
  .hero-form,
  .hero-actions,
  .container,
  .section,
  main,
  footer{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* The hero action buttons were a common source of 390px viewport overflow. */
  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    gap:10px !important;
  }
  .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  /* Menu is moved to <body> by script, so fixed positioning is genuinely
     relative to the viewport rather than the sticky/backdrop-filter header. */
  body > .nav-links,
  body > .nav-links.open{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:92px 24px 32px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    background:#fff !important;
    z-index:2147483000 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    transform:translate3d(100%,0,0) !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:transform .22s ease, opacity .18s ease, visibility 0s linear .22s !important;
  }
  body > .nav-links.open{
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transition:transform .22s ease, opacity .18s ease !important;
  }
  body > .nav-links li{
    display:block !important;
    width:100% !important;
    flex:none !important;
  }
  body > .nav-links a{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:52px !important;
    padding:12px 4px !important;
    box-sizing:border-box !important;
    font-size:17px !important;
    color:#253652 !important;
  }

  /* Keep the mobile bottom action bar strictly inside the viewport. */
  .mobile-callbar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) !important;
    gap:6px !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    overflow:hidden !important;
  }
  .mobile-callbar .btn,
  .mobile-callbar .btn-whatsapp{
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }
  .mobile-callbar .btn{
    height:40px !important;
    padding:8px 4px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .mobile-callbar .btn-whatsapp{
    height:40px !important;
    width:42px !important;
    border-radius:50% !important;
    padding:0 !important;
  }
  .mobile-callbar .btn-whatsapp .whatsapp-icon{
    width:18px !important;
    height:18px !important;
  }

  /* Any oversized decorative/legacy element must stay clipped to its section. */
  .hero, .courses, .features, .why, .mva, .faqs, .footer{
    overflow-x:hidden !important;
  }
}