:root{
  --bg:#0b1020;             /* deep navy */
  --bg-soft:#0f1530;
  --primary:#5bbcff;         /* sky blue */
  --primary-600:#3aa9ff;
  --primary-700:#1a97ff;
  --accent:#7cf5d2;          /* mint */
  --muted:#98a3b8;
  --text:#e8eefc;
  --card:#121937;
  --border:rgba(255,255,255,0.1);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background-image:linear-gradient(76deg, #023AA8 0%, #132D5D 100%);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;}
a{color:var(--primary); text-decoration:none}
.container{width:min(1200px, 92%); margin:0 auto}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.2rem; border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:var(--text); font-weight:600; transition:.2s transform,.2s box-shadow,.2s background}
.btn:hover{transform:translateY(-2px); box-shadow: 0 8px 24px rgba(26,151,255,.25)}
.btn.primary{background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color:#0b1020; border:none}
.btn.ghost{background:transparent}
.pill{display:inline-block; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--border); color:var(--accent); font-weight:600; background:rgba(124,245,210,.08)}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(8px); background:rgba(11,16,32,.65); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.3px}
.brand .logo{width:34px; height:34px; border-radius:10px; background:conic-gradient(from 200deg, var(--primary), var(--accent)); box-shadow:0 6px 20px rgba(91,188,255,.35)}
nav ul{list-style:none; display:flex; gap:1.2rem; padding:0; margin:0}
nav a{color:var(--text); opacity:.9}
nav a:hover{opacity:1}
.nav-cta{display:flex; gap:.6rem}
/* Basic reset */
.menu, .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  position: relative;
  display: inline-block;
}

.menu a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #ebe4e4;
}

/* Hover state */
.menu a:hover {
  color: #0077cc;           /* Nice blue hover */
  background: #f0f0f0;      /* Light gray bg on hover */
  border-radius: 4px;
}

.dropdown, .subdropdown {
  display: none;
  position: absolute;
  background: #071a49;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
}

.menu .has-dropdown:hover > .dropdown {
  display: block;
}

.subdropdown {
  top: 0;
  left: 100%;
}

.has-subdropdown:hover > .subdropdown {
  display: block;
}


/* Hero */
.hero{position:relative; overflow:hidden}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; padding:5rem 0 3rem}
.hero h1{font-size: clamp(2rem, 4.6vw, 3.4rem); line-height:1.1; margin:.6rem 0 1rem}
.hero p{color:var(--muted); font-size:clamp(1rem,1.6vw,1.15rem)}
.hero-art{position:relative; min-height:380px; background:linear-gradient(180deg, rgba(91,188,255,.15), rgba(124,245,210,.05)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.hero-grid{position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 34px 34px; border-radius:var(--radius)}
.glow{position:absolute; width:480px; height:480px; border-radius:50%; filter:blur(60px); opacity:.55; background:radial-gradient(circle at 30% 30%, var(--primary), transparent 60%); top:-90px; right:-120px; pointer-events:none}
.hero-cards{position:absolute; inset:16px; display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: var(--shadow)}
.card h4{margin:.2rem 0 .4rem}
.tag{display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:#0b1020; background:linear-gradient(135deg, var(--accent), var(--primary)); padding:.28rem .6rem; border-radius:999px; font-weight:700}

.hero-cta{margin-top:1.2rem; display:flex; gap:.8rem; flex-wrap:wrap}
.meta{display:flex; gap:1.1rem; align-items:center; margin-top:1rem; color:var(--muted); font-size:.95rem}
.meta i{width:8px;height:8px;background:var(--accent);border-radius:50%;display:inline-block}

/* Trust bar */
.trust{display:grid; grid-template-columns: repeat(5,1fr); gap:16px; padding:1.2rem; background:rgba(124,245,210,.06); border:1px solid var(--border); border-radius:var(--radius); margin: 1rem 0 2.2rem}
.trust div{opacity:.8; text-align:center}

/* Sections */
section{padding: 3.2rem 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem); margin:0}
.section-head p{color:var(--muted); margin:0}

/* Cards grid */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.grid.cols-2{grid-template-columns: repeat(2, 1fr)}
.service{position:relative; overflow:hidden}
.service .icon{width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg, rgba(91,188,255,.25), rgba(124,245,210,.2)); border:1px solid var(--border)}
.service ul{padding-left:1rem; margin:.6rem 0 0; color:var(--muted)}

/* Split */
.split{display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:center}
.check{display:flex; gap:.6rem; align-items:flex-start; margin:.3rem 0; color:var(--muted)}
.check svg{flex:0 0 20px}

/* Stats */
.stats{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.stat{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:16px; text-align:center}
.stat b{font-size:1.6rem}

/* Testimonials */
.testimonials{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.quote{position:relative}
.quote:before{content:"\201C"; position:absolute; top:-24px; left:14px; font-size:54px; color:var(--primary); opacity:.35}
.avatar{width:40px;height:40px;border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent))}
.person{display:flex; align-items:center; gap:.6rem; margin-top:.8rem; color:var(--muted)}

/* CTA band */
.band{padding:2rem; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(135deg, rgba(91,188,255,.18), rgba(124,245,210,.14)); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* Contact */
form{display:grid; gap:.8rem}
input, textarea, select{background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text); padding:.8rem 1rem; border-radius:12px; outline:none}
textarea{min-height:120px; resize:vertical}

/* Footer */
footer{border-top:1px solid var(--border); padding:2.2rem 0; color:var(--muted)}

/* Utilities */
.hide-mobile{display:block}
.only-mobile{display:none}

@media (max-width: 980px){
  .hero-inner{grid-template-columns: 1fr; padding:3.6rem 0 2rem}
  .glow{top:-40px; right:-80px}
  .grid.cols-3{grid-template-columns: 1fr 1fr}
  .testimonials{grid-template-columns: 1fr 1fr}
  .stats{grid-template-columns: 1fr 1fr}
  .split{grid-template-columns: 1fr}
  .trust{grid-template-columns: repeat(3,1fr)}
  .hide-mobile{display:none}
  .only-mobile{display:block}
}
@media (max-width: 640px){
  .grid.cols-3,.grid.cols-2{grid-template-columns: 1fr}
  .testimonials{grid-template-columns: 1fr}
  .trust{grid-template-columns: repeat(2,1fr)}
}

/* Smooth scroll */
html{scroll-behavior:smooth}


/* Modal Styling on home page */
.modal {
  display:none;position:fixed;z-index:2000;
  left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,0.7);
}
.modal-content {
  position:relative;
  margin:5% auto;
  background:#fff;
  padding:20px;
  border-radius:10px;
  max-width:500px;
  animation:fadeIn 0.4s;
  text-align:center;
}
.modal .close {
  position:absolute;top:10px;right:15px;
  font-size:28px;font-weight:bold;color:#333;
  cursor:pointer;
}
.modal-buttons {
  display:flex;justify-content:center;gap:15px;margin-top:15px;
}
.modal-buttons .btn {
  padding:12px 18px;border-radius:6px;font-weight:600;text-decoration:none;
}
.modal-buttons .register {background:#25d366;color:#fff;}
.modal-buttons .register:hover {background:#128c7e;}
.modal-buttons .syllabus {background:#0a2540;color:#fff;}
.modal-buttons .syllabus:hover {background:#163d63;}
@keyframes fadeIn {
  from {opacity:0;transform:scale(0.9);}
  to {opacity:1;transform:scale(1);}
}
.brand {
    display: flex;
    align-items: center; /* vertically align logo + text */
    gap: 10px; /* spacing between logo and text */
}

.logo {
    width: 40px;   /* adjust as needed */
    height: 40px;
    background: url('your-logo.png') no-repeat center/cover; 
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.tagline {
    font-size: 0.9rem;
    color: #aaaf24;
    margin-top: 2px;
    font-style: italic;
    font-weight: 500;
}