/* --------------------------------------------
   Base & Theme  (Cyber Blue)
---------------------------------------------*/
:root{
  --blue: #0055FF;          /* Cyber Blue */
  --blue-dark: #003dcc;
  --blue-ink: #0b1b3a;
  --ink: #11223a;
  --ink-70:#364b63;
  --bg:#f5f8ff;
  --card:#ffffff;
  --accent:#00d1ff;
  --warn:#ffb703;
  --shadow: 0 10px 24px rgba(6, 40, 140, 0.08);
  --shadow-strong: 0 16px 36px rgba(6, 40, 140, 0.15);
  --radius:14px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;              /* slight global zoom */
}

/* Utilities */
.hide{ display:none !important; }
.fade-in{ animation: fadeInUp .8s ease both; }
.section-title{ text-align:center; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem); color: var(--blue-ink); margin-bottom: 22px; }

/* Buttons */
.btn{
  display:inline-block; cursor:pointer; user-select:none;
  padding: .8rem 1.25rem; border-radius: 10px;
  font-weight: 700; letter-spacing:.2px; text-decoration:none; border:2px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:active{ transform: translateY(1px) }

.btn.primary{ background: var(--blue); color:#fff; box-shadow: var(--shadow) }
.btn.primary:hover{ background: var(--blue-dark); box-shadow: var(--shadow-strong) }

.btn.secondary{ background:#fff; color:var(--blue); border-color: var(--blue); }
.btn.secondary:hover{ background: var(--blue); color:#fff }

.btn.big{ padding: 1rem 1.75rem; font-size: 1.06rem }
.btn.whatsapp{ background:#25D366; color:#fff; border-color:#25D366 }
.btn.whatsapp:hover{ filter: brightness(0.95) }

/* --------------------------------------------
   Header  (TOP BAR NOW BLUE)
---------------------------------------------*/
.header{
  position: sticky; top:0; z-index:999;
  background: var(--blue);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
}
.logo{ height:48px; width:auto; object-fit:contain }
.brand-title{ font-size: 1.35rem; font-weight: 800; color:#fff; letter-spacing:.4px; margin-left:10px }
.logo-container{ display:flex; align-items:center; gap:12px }

.nav a{
  color:#fff; text-decoration:none; font-weight: 700; margin-left: 26px; position:relative;
  opacity:.95;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:#fff;
  transition: width .25s ease;
}
.nav a:hover{ opacity:1 }
.nav a:hover::after{ width:100% }

/* --------------------------------------------
   Highlight: Government Certification (top)
---------------------------------------------*/
.highlight-section{
  background: linear-gradient(135deg, var(--blue), #2f73ff 48%, #5ea0ff);
  color:#fff; text-align:center; padding: 44px 20px;
  border-bottom-left-radius: 22px; border-bottom-right-radius:22px;
  box-shadow: var(--shadow-strong);
}
.highlight-section h2{
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.6rem);
  font-weight:900; letter-spacing:.4px; text-shadow: 0 3px 16px rgba(0,0,0,.18);
}
.highlight-section p{
  margin: 12px auto 10px; max-width: 1000px; opacity:.96; font-weight:600;
}
.highlight-section ul{
  list-style:none; display:grid; gap:12px; margin: 16px auto 0;
  width: min(1400px, 96%);                            /* WIDER */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.highlight-section li{
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  padding: 12px 16px; border-radius: 12px; font-weight:800; backdrop-filter: blur(2px);
}

/* --------------------------------------------
   Hero  (BIGGER + WIDER FEEL)
---------------------------------------------*/
.hero{
  padding: 72px 20px 56px; text-align:center;
  background: radial-gradient(60rem 30rem at 50% -5%, #cfe0ff 0%, #f5f8ff 55%, transparent 70%) no-repeat;
}
.hero h2{
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.8rem);
  color: var(--blue-ink); font-weight: 900;
}
.hero p{ margin-top: 10px; color: var(--ink-70); font-weight: 650 }
.hero-buttons{ margin-top: 20px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* --------------------------------------------
   USP Banner
---------------------------------------------*/
.usp-highlight{
  margin: 20px auto;
  text-align:center; font-weight:900; color:#0b1b3a;
  background: linear-gradient(90deg, #fff 0%, #eaf1ff 20%, #eaf1ff 80%, #fff 100%);
  border:2px dashed var(--warn); padding: 16px 18px;
  width: min(1400px, 96%);                             /* WIDER */
  border-radius: 16px; box-shadow: var(--shadow);
  animation: pulseGlow 2.4s ease-in-out infinite;
}

/* --------------------------------------------
   Stats  (WIDER & BIGGER)
---------------------------------------------*/
.stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  width: min(1400px, 96%);                             /* WIDER */
  margin: 22px auto 0;
}
.stat-box{
  background:#fff; border:1px solid #e7eefc; border-radius: 16px; padding: 22px; text-align:center;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .25s ease;
}
.stat-box:hover{ transform: translateY(-4px); box-shadow: var(--shadow-strong) }
.stat-box h2{ color: var(--blue); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem) }
.stat-box p{ color: var(--ink-70); font-weight:700 }

/* --------------------------------------------
   Courses (3-per-row grid, WIDER)
---------------------------------------------*/
.course-section{ padding: 46px 20px }
.course-grid{
  width: min(1400px, 96%);                             /* WIDER */
  margin: 12px auto 0;
  display:grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
.course-card{
  background: var(--card); border:1px solid #e7eefc; border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow); position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.course-card::after{
  content:""; position:absolute; inset:auto -30% -30% auto; width:170px; height:170px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(0,85,255,.16), rgba(0,85,255,0));
  transform: rotate(18deg);
}
.course-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); border-color:#d7e4ff }

.course-card h3{
  font-size: 1.08rem; color: var(--blue-ink); font-weight: 900; margin-bottom: 6px;
}
.course-card p{ color: var(--ink-70); font-weight: 650 }

.toggle-btn{
  margin-top: 12px; background: var(--blue); color:#fff; border:none;
  padding:.6rem 1rem; border-radius: 10px; font-weight:800;
  box-shadow: var(--shadow); transition: background .25s ease, transform .18s ease, box-shadow .25s ease;
}
.toggle-btn:hover{ background: var(--blue-dark); box-shadow: var(--shadow-strong) }
.toggle-btn:active{ transform: translateY(1px) }

.course-details{
  margin-top: 12px; background: #f8fbff; border: 1px solid #e2ebff; border-radius: 12px;
  padding: 12px; display:none; box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
.course-details.active{ display:block; animation: detailsIn .28s ease both }
.course-details p{ color:#2a3d55; font-weight: 600 }

/* --------------------------------------------
   Why Us / About / Apply / Contact
---------------------------------------------*/
.why-us{
  padding: 42px 20px; background: #ffffff; border-top:1px solid #e7eefc; border-bottom:1px solid #e7eefc;
}
.why-us h2{ text-align:center; color: var(--blue-ink); margin-bottom: 16px; font-size: clamp(1.6rem, 1rem + 2vw, 2.1rem) }
.why-us ul{
  width:min(1400px, 96%);                               /* WIDER */
  margin: 0 auto; display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.why-us li{
  background:#f4f8ff; border:1px solid #e1e9ff; border-radius: 12px; padding: 14px 16px; font-weight: 700;
}

.about-section{
  padding: 48px 20px; background: linear-gradient(180deg, #ffffff, #f7faff);
}
.about-section h2{ text-align:center; color:var(--blue-ink); margin-bottom: 12px }
.about-section p{ text-align:center; color:var(--ink-70); font-weight: 650; margin: 0 auto 14px; max-width: 1100px }
.about-section ul{
  width:min(1400px, 96%);                               /* WIDER */
  margin: 0 auto; display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.about-section li{
  background:#ffffff; border:1px solid #e7eefc; border-radius: 12px; padding: 14px; font-weight: 700; box-shadow: var(--shadow);
}

.apply-section{
  padding: 54px 20px; text-align:center; background: linear-gradient(135deg, #edf4ff, #ffffff);
  border-top:1px solid #e7eefc;
}
.apply-section h2{ color: var(--blue-ink); margin-bottom: 16px }

.contact{
  padding: 50px 20px; text-align:center; background: #0c1a3a; color:#fff;
}
.contact h2{ margin-bottom: 10px; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem) }
.contact p{ opacity:.95; font-weight: 650 }
.contact .btn.whatsapp{ margin-top: 14px }

/* Footer */
.footer{
  text-align:center; padding: 16px 10px; color:#94a6c6; background:#0a1530; border-top:1px solid rgba(255,255,255,.06);
  font-weight:700; letter-spacing:.2px;
}

/* --------------------------------------------
   Animations
---------------------------------------------*/
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(14px) }
  to{ opacity:1; transform: translateY(0) }
}
@keyframes detailsIn{
  from{ opacity:0; transform: translateY(6px) }
  to{ opacity:1; transform: translateY(0) }
}
@keyframes pulseGlow{
  0%  { box-shadow: 0 0 0 0 rgba(255,183,3,.36) }
  70% { box-shadow: 0 0 0 14px rgba(255,183,3,0) }
  100%{ box-shadow: 0 0 0 0 rgba(255,183,3,0) }
}

/* --------------------------------------------
   Responsive
---------------------------------------------*/
@media (max-width: 1200px){
  .course-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 768px){
  .stats{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 560px){
  .header{ flex-wrap: wrap; gap:10px; padding: 12px 14px }
  .nav{ width:100%; display:flex; justify-content:space-between; gap:10px; overflow-x:auto; padding-bottom: 6px }
  .stats{ grid-template-columns: 1fr }
  .course-grid{ grid-template-columns: 1fr }
}