:root{
  --bg:#0b132b;
  --surface:#0d1324;
  --card:#111a32;
  --muted:rgba(255,255,255,0.92);
  --accent:#00d4ff;
  --gold:#f6d66e;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --header-h: 78px;
}

.theme-light{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --card:#f2f6fb;
  --muted:rgba(10,20,30,0.9);
  --accent:#0077cc;
  --glass: rgba(0,0,0,0.02);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Poppins, Inter, system-ui, -apple-system, 'Segoe UI', Roboto; background:var(--bg); color:var(--muted); -webkit-font-smoothing:antialiased;padding-top: var(--header-h);}
.container{max-width:1700px;margin:0 auto;padding:0 40px}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 9999;
  background: var(--surface, #0d1324);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  display: block;
}


.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 0 0; /* padding handled by container */
}


.brand { font-weight:700; color:var(--accent); font-size:28px; text-decoration:none; display:inline-block; padding-left:0; }

/* Nav */
.nav { margin-left: auto; position: relative; }
.nav-list {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* Link style */
.nav-list a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 6px; display:inline-block; }
.nav-list a:hover { color: var(--accent); }

/* hamburger - hidden on desktop */
.nav-toggle { display: none; background: none; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; }
.hamburger { display:inline-block; width:22px; height:2px; background:var(--muted); position:relative; }
.hamburger::before,.hamburger::after{ content:''; position:absolute; left:0; width:22px; height:2px; background:var(--muted); }
.hamburger::before{ top:-6px } .hamburger::after{ top:6px }

.hamburger::after{top:6px}

.controls{display:flex;align-items:center;gap:12px}

/* Buttons */
.btn-primary { background: linear-gradient(135deg,#007bff,var(--accent)); color:#fff; padding:12px 26px; border-radius:8px; text-decoration:none; font-weight:600; }
.btn { display:inline-block; background: linear-gradient(135deg, #007bff, #00d4ff); padding: 12px 26px; border-radius: 6px; font-weight: 600; color: #fff; transition: .3s; text-decoration:none; }
.btn:hover { opacity:.8; }

.btn-video{display:inline-flex;align-items:center;gap:8px;color:var(--accent);text-decoration:none;font-weight:600}
.btn-ghost{background:transparent;border:0;color:var(--muted);padding:8px;border-radius:8px}
.btn-outline{display:inline-block;padding:12px 20px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);text-decoration:none;color:var(--muted);font-weight:600}
.btn-disabled{display:inline-block;padding:10px 18px;border-radius:10px;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.5);pointer-events:none}

/* MOBILE: collapse nav into dropdown */
@media (max-width: 820px) {
  .nav-list { 
    display: none;                    /* hidden by default on mobile */
    position: absolute;
    top: calc(var(--header-h) + 6px); /* place below header */
    right: 20px;                      /* align to right inside header */
    background: var(--surface);
    padding: 14px;
    border-radius: 10px;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    min-width: 200px;
    z-index: 10000;
  }

  .nav-list.open { display: flex; }   /* when JS toggles this class it will show */

  .nav-toggle { display: inline-flex; } /* show hamburger on mobile */

  /* Make sure header inner spacing fits */
  .header-inner { padding: 0 20px; }

  /* reduce header height on smaller devices if needed */
  @media (max-width: 420px) {
    :root { --header-h: 72px; }
  }
}


/* HERO */
/* HERO spacing: reduce top padding to avoid double-spacing with body */
.hero {
  /* keep modest vertical breathing while body padding already offset for header */
  padding-top: 44px;    /* previously large - now tighter because body has padding-top */
  padding-bottom: 80px;
  background: var(--bg);
}

/* Hero grid adjustments to ensure hero image doesn't get hidden or clipped */
.hero-inner { display: grid; grid-template-columns: 1fr 700px; gap: 40px; align-items: center; }
.hero-media-frame { width:100%; max-width:690px; border-radius:16px; overflow:hidden; border:3px solid #007bff; z-index:1; position:relative; }

/* ensure hero image sits below header visually (header overlays top only) */
.hero-img { display:block; width:100%; height:100%; object-fit:cover; }


.hero-sub-header-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.banner-tag{font-weight:600;color:var(--accent);font-size:18px}
.gold-badge{font-weight:700;font-size:20px;text-align: center;padding:6px 14px;border-radius:6px;background:#000;color:var(--gold);border:1px solid rgba(246,214,110,0.45);box-shadow:0 0 12px rgba(246,214,110,0.12)}
.hero-title{font-size:48px;line-height:1.40;margin:0 0 20px;font-weight:700}
.accent{color:var(--accent)}
.lead{opacity:0.95;font-size:18px;line-height:1.65;margin-bottom:24px}
.hero-ctas{display:flex;gap:20px;margin-top:6px}
.stats{display:flex;gap:30px;margin-top:30px;list-style:none;padding:0}
.stats li{display:flex;flex-direction:column;align-items:flex-start}
.stats strong{font-size:28px}

/* Mobile view */
@media (max-width: 768px) {
    .hero-sub-header-wrapper {
        justify-content: center;
        text-align: center;
    }

    .gold-badge {
        text-align: center;
    }
}

/* Section */
.section{padding-top:70px;padding-bottom:70px}
.section-alt{background:linear-gradient(180deg,var(--surface), rgba(0,0,0,0.02))}
.section-title{display:flex;flex-direction:column;align-items:center;font-size:36px;margin-bottom:35px;font-weight:700}
#about .section-title {
  text-align: left;
  justify-content: flex-start;
}




/* smaller screens hero */
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; margin-bottom: 20px; }
  .hero { padding-top: 36px; padding-bottom: 60px; }
}

/* ensure overall section spacing not huge */
.section { padding-top: 70px; padding-bottom: 60px; }
@media (max-width:640px){ .section, .section-alt { padding: 45px 0; } }


@media (min-width: 1100px) {
  .hero {
    min-height: calc(100vh - 80px); /* adjust hero height */
    padding-top: 0;
  }

  .hero-inner {
    padding-top: 85px; /* reduced content spacing */
  }
}



/* Courses */
/* ---------------- COURSES SECTION ---------------- */
.course-box {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  background: #111a32;
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 40px;
  border: 1px solid #1f2b4d;
  transition: .3s;
}

.course-box:hover {
  border-color: #00d4ff;
}

.course-img {
  width: 45%;
  border-radius: 12px;
  border: 2px solid #007bff;
}

.course-content {
  width: 55%;
}

.course-points {
  list-style: none;
  padding-left: 0;
  margin-bottom: 22px;
}

.course-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  margin-bottom: 10px; /* reduced spacing */
  line-height: 1.5;
}

.course-points li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('https://cdn-icons-png.flaticon.com/512/845/845646.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 3px;
}

/* UPCOMING COURSE SPECIAL EFFECT */
.course-box.upcoming {
  position: relative;
}
.upcoming-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(0,0,0,0.8);
  z-index: 10;
  pointer-events: none;
}
.upcoming-card {
  opacity: 0.55;
  filter: blur(4.9px);
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 35px;
  background: #111a32;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid #9b9b9b;
}

.btn { display: inline-block; background: linear-gradient(135deg, #007bff, #00d4ff); padding: 12px 26px; border-radius: 6px; font-weight: 600; color: #fff; transition: .3s;text-decoration: none; }
.btn:hover { opacity: .8; }

/* RESPONSIVE */
@media(max-width: 820px) {
  .course-box,
  .upcoming-card {
    flex-direction: column;
    text-align: center;
  }
  /* 🔥 Forces IMAGE first + TEXT after, even if .reverse exists */
  .course-box .course-img,
  .upcoming-card .course-img {
    order: -1;
  }

  .course-img {
    width: 100%;
  }
  .course-content {
    width: 100%;
  }
}





/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}
.card{background:var(--card);padding:20px;border-radius:12px;overflow:hidden}
.card img{width:100%;height:180px;object-fit:cover;border-bottom:2px solid #007bff;margin-bottom:16px}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 480px;gap:60px;align-items:center}
.photo-frame{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 20px 40px rgba(0,212,255,0.12)}
.photo-frame img{width:480px;height:580px;object-fit:cover}
.socials{display:flex;gap:20px;margin-top:18px}
.socials a{text-decoration:none;color:var(--accent);font-weight:600}
.impact{display:flex;gap:25px;margin-top:20px}
.impact div{background:#1f2b4d;padding:25px 30px;border-radius:15px;min-width:130px;text-align:center}
.impact div strong{font-size:26px;color:var(--accent)}

/* Testimonials */
.grid-testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.testimonial{background:#1f2b4d;padding:30px;border-radius:15px}
.testimonial p{font-size:16px;line-height:1.6}
.testimonial cite{display:block;margin-top:18px;font-weight:700}

/* Footer */
.site-footer{padding:50px 0;margin-top:60px;background:var(--surface);color:var(--muted)}
.footer-grid{display:flex;flex-wrap:wrap;gap:40px;max-width:1200px;margin:0 auto;padding:0 40px}
.footer-grid > div{flex:1;min-width:200px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links a{text-decoration:none;color:var(--muted)}
.legal{text-align:center;margin-top:30px;opacity:0.75}



/* Responsive */
@media (max-width:1100px){
  .hero-inner{grid-template-columns:1fr 420px}
  .about-grid{grid-template-columns:1fr 360px}
}


@media (max-width:820px){
  .container{padding:0 20px}
  .nav-list{display:none;position:absolute;top:74px;right:20px;background:var(--surface);padding:16px;border-radius:10px;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,0.5)}
  .nav-list.open{display:flex}
  .nav-toggle{display:inline-flex}
  .hero-inner{grid-template-columns:1fr}
  .hero-media{order:-1;margin-bottom:20px}
  .hero-title{font-size:36px}
  .hero{padding-top:80px;padding-bottom:80px}
  .course{grid-template-columns:1fr}
  .course.reverse{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .footer-grid{flex-direction:column}
}
@media (max-width:480px){
  .brand{font-size:24px}
  .hero-title{font-size:30px;line-height:1.05}
  .hero{padding-top:60px;padding-bottom:60px}
  .section{padding-top:60px;padding-bottom:60px}
  .photo-frame img{width:320px;height:360px}
}

/* Subtle fade on scroll */
.fade-in{opacity:0;transform:translateY(6px);transition:opacity 0.35s ease, transform 0.35s ease}
.fade-in.visible{opacity:1;transform:none}

a:focus{outline:3px solid rgba(0,212,255,0.12);outline-offset:4px}

/* ========== end style.css ========== */