:root{
      --bg: #0b1020;
      --bg-2: #0e1428;
      --glass: rgba(255,255,255,0.06);
      --text: #e7ebff;
      --muted: #9aa3b2;
      --brand: #6aa4ff; /* primary */
      --brand-2: #8b5cf6; /* accent */
      --ok: #22c55e;
      --warn: #f59e0b;
      --danger: #ef4444;
      --card: rgba(255,255,255,0.06);
      --blur: 14px;
      --radius-xl: 20px;
      --radius-2xl: 26px;
      --shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
      --grid: 1200px;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background: radial-gradient(1200px 600px at 80% -10%, rgba(138,92,246,0.18), transparent 60%), radial-gradient(1200px 600px at 10% 10%, rgba(106,164,255,0.18), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      min-height:100vh; overflow-x:hidden;
    }

    /* Layout */
    .container{ width: min(92vw, var(--grid)); margin-inline:auto; }
    section{ padding: 96px 0; position:relative; }

    /* Nav */
    .nav{
      position:sticky; top:0; z-index:1000; backdrop-filter:blur(var(--blur)); background: rgba(11,16,32,0.5); border-bottom:1px solid rgba(255,255,255,0.06);
    }
    .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 2px 0; }
    .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
    .nav {
  transition: transform 0.3s ease;
}
.logo {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;      
  justify-content: center;
  border-radius: 0; 
  background: none; 
  box-shadow: none; 
  overflow: hidden;
}

.logo img {
  width: 200%;
  height: 200%;
  object-fit: contain;
}
    .brand b{ font-size:18px; letter-spacing:0.3px; }

    .nav-links{ display:flex; gap:18px; align-items:center; }
    .nav-links a{ color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; transition:0.25s ease; font-weight:500; }
    .nav-links a:hover{ color:var(--text); background:var(--glass); }

    .cta{ padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:linear-gradient(135deg, rgba(106,164,255,0.12), rgba(139,92,246,0.12)); color:var(--text); text-decoration:none; font-weight:600; transition:0.25s; }
    .cta:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(106,164,255,0.15); }

    /* Hero */
    .hero{ padding: 120px 0 80px; }
    .hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:36px; align-items:center; }
    .eyebrow{ color:var(--brand); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; font-size:12px; }
    h1{ font-size: clamp(32px, 4vw, 56px); margin:10px 0 14px; line-height:1.06; }
    .lead{ color:var(--muted); font-size: clamp(15px, 1.5vw, 18px); max-width:60ch; }

    .buttons{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
    .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); text-decoration:none; color:var(--text); transition:0.25s; font-weight:600; }
    .btn.primary{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); border-color:transparent; }
    .btn:hover{ transform:translateY(-2px); filter:saturate(1.1); }

    .hero-card{
      border-radius: var(--radius-2xl);
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border:1px solid rgba(255,255,255,0.12);
      box-shadow: var(--shadow);
      padding: 22px; min-height: 320px; display:grid; gap:14px;
    }
    .stat{ display:flex; align-items:center; gap:12px; padding:10px; background:var(--glass); border-radius:14px; border:1px solid rgba(255,255,255,0.08); }

    /* Section titles */
.title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  margin-bottom: 32px;
}
.title-row h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
}
.title-row p {
  margin: 0;
  max-width: 700px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 1rem;
  
}

    /* Cards grid */
    .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
    .card{ background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:20px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; position:relative; overflow:hidden; }
    .card:before{ content:""; position:absolute; inset:-1px -1px auto auto; width:160px; height:160px; background: radial-gradient(120px 120px at 100% 0%, rgba(106,164,255,0.25), transparent 70%); filter: blur(6px); pointer-events:none; }
    .card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,0.22); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
    .card h3{ margin: 8px 0 6px; font-size: 18px; }
    .card p{ color:var(--muted); margin: 0 0 14px; }

    .chip{ display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color:var(--text); }

    .pilllist{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

    /* Program */
    .program{ background: radial-gradient(800px 400px at 10% 10%, rgba(106,164,255,0.12), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(139,92,246,0.12), transparent 60%); }
    .program .wrap{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap:26px; align-items:center; }
    .program .panel{ background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding:22px; box-shadow: var(--shadow); }
    .countries{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
    .flag{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); font-size:12px; }

    /* About */
    .about{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:26px; }
    .about .panel{ background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding:22px; box-shadow: var(--shadow); }

    /* Contact */
    .contact{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; }
    .form{ background:var(--card); border:1px solid rgba(255,255,255,0.08); border-radius: 18px; padding:20px; box-shadow: var(--shadow); }
    .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    label{ font-size:12px; color:var(--muted); }
    input, textarea, select{ width:100%; margin-top:6px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); outline:none; background:rgba(255,255,255,0.04); color:var(--text); }
    textarea{ min-height:120px; resize:vertical; }

    /* Footer */
    footer{ padding:28px 0 40px; color:var(--muted); border-top:1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); }
    .foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .social{ display:flex; gap:10px; }
    .social a{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--glass); border:1px solid rgba(255,255,255,0.1); color:var(--text); text-decoration:none; }

    /* Utilities */
    .hide{ display:none; }

    /* Responsive */
    @media (max-width: 960px){
      .hero-grid, .grid, .about, .program .wrap, .contact{ grid-template-columns:1fr; }
      .grid{ grid-template-columns:1fr; }
      .nav-links{ display:none; }
      .hero{ padding-top: 96px; }
    }

    /* Reduce space above the Contact section on home */
#home-contact {
  margin-top: 20px !important;
  padding-top: 20px !important;
}

/* Reduce top gap for all pages on mobile */
@media (max-width: 960px) {
  #page-services,
  #page-program,
  #page-about {
    padding-top: 40px !important; /* match the home section spacing */
  }
}
@media (max-width: 960px) {
  body {
    width: 100vw;
    overflow-x: hidden;
  }
}
/* Prevent zoom-out causing horizontal gaps on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

    /* Responsive */
@media (max-width: 960px){
  .hero-grid, .grid, .about, .program .wrap, .contact{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .hero{ padding-top: 96px; }
}

/* Override mobile hero spacing — reduces big empty space */
@media (max-width: 960px) {
  .hero {
    padding-top: 40px !important;
  }
}

    /* Page transition animation */
/* Page transition animation */
.page-transition-start {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.page-transition-end {
  opacity: 0;
  transform: translateY(20px);
}

/* --- Mobile menu button + dropdown (minimal, paste near end of existing <style>) --- */
/* Hide mobile menu and button by default (desktop) */
.mobile-menu-btn { display: none; }
.mobile-menu { display: none; }

/* Styling for hamburger button */
.mobile-menu-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  padding: 8px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile dropdown container (hidden by default) */
.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  left: 12px;
  z-index: 1200;
  background: rgba(11,16,32,0.95);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  flex-direction: column;
  gap: 6px;
  display: none; /* JS toggles this */
}

/* Mobile links style */
.mobile-menu a {
  color: var(--text);
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 8px;
  display: block;
  font-weight: 600;
}

/* Remove default blue link color everywhere inside nav area */
.nav a { color: inherit; }

/* Responsive: show hamburger on small screens, hide desktop links */
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
  .nav-inner { position: relative; } /* make dropdown absolute positioned relative to nav-inner */
}

/* Hide mobile menu button on desktop */
.mobile-menu-btn {
  display: none;
}

/* Show hamburger ONLY on mobile screens */
@media (max-width: 960px) {
  .mobile-menu-btn {
    display: inline-flex;
  }
}
@media (max-width: 960px) {
  #services-preview {
    margin-top: -40px !important;
  }
}
/* Reduce large vertical padding on mobile */
@media (max-width: 960px) {

  /* Reduce space after HERO */
  .hero {
    padding-bottom: 40px !important;
  }

  /* Reduce space around WHAT WE DO section */
  #services-preview {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Reduce space above CONTACT (inside home page) */
  #home-contact {
    padding-top: 30px !important;
  }
}