@font-face {
    font-family: 'Gill Sans Ultra Bold';
    src: url('GILSANUB.TTF') format('truetype'); /* Update path if in a subfolder */
    font-weight: 800; /* Ultra Bold is usually mapped to 800 or 900 */
    font-style: normal;
}
   :root{
      --bg: #f5f6fb;
      --ink: #101114;

      --card: #ffffff;
      --soft: rgba(16, 17, 20, 0.06);

      --purple: #7c3aed;
      --blue: #2f6fed;
      --green: #16a34a;
      --orange: #f97316;

      --pill: #eef0ff;
      --shadow: 0 10px 25px rgba(0,0,0,.08);
      --radius: 18px;
    }

    *{ box-sizing: border-box; }
    body{
      margin:0;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow-x: hidden
    }
.align-items-stretch {
    align-items: stretch !important;
    height: 75vh;
}
    /* ---------- Top Nav ---------- */
    .topbar{
      background:#fff;
      border-bottom: 1px solid var(--soft);
      /* ADD THESE TWO LINES: */
    position: relative;
    z-index: 1000;
    }
    .brand-mark{
      width:44px;height:44px;border-radius:999px;
      background: radial-gradient(circle at 30% 30%, #4fd1ff, #2563eb);
      display:inline-grid;place-items:center;
      color:#fff;font-weight:800;
      box-shadow: 0 8px 18px rgba(37,99,235,.25);
    }
    .brand-name{
      font-weight:800;
      letter-spacing:.6px;
      font-size:22px;
    }
    .nav-links{
      font-size:14px;
      color:#222;
      white-space:nowrap;
    }
    .nav-links a{
      color:#222;
      text-decoration:none;
      padding: 0 8px;
    }
    .nav-links a:hover{ text-decoration:underline; }
    .nav-sep{
      opacity:.35;
      padding:0 2px;
      user-select:none;
    }

    .btn-login{
      border:1px solid rgba(0,0,0,.25);
      background:#fff;
      border-radius: 12px;
      padding: 6px 14px;
      font-weight:600;
      font-size:13px;
    }
    .btn-signup{
      background:#22c55e;
      border: 0;
      color:#08150c;
      border-radius: 999px;
      padding: 6px 14px;
      font-weight:800;
      font-size:13px;
      box-shadow: 0 10px 16px rgba(34,197,94,.22);
    }

    /* ---------- Hero ---------- */
    .hero-wrap{
      padding: 18px 0 8px;
    }
    .hero-card{
      background: linear-gradient(180deg, #f3f4ff, #f7f7ff);
      border: 1px solid rgba(124,58,237,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
      height: 100%;
    }
    .mini-kicker{
      display:inline-block;
      background: rgba(124,58,237,.10);
      border: 1px solid rgba(124,58,237,.16);
      color:#111;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: .22em;
      font-weight: 800;
      text-transform: uppercase;
    }
    .hero-title{
      margin-top: 50px;
      font-weight: 900;
      font-size: 60px;
      line-height: 1.05;
    }
    .grad-word{
      background: linear-gradient(90deg, #7c3aed, #a855f7);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 900;
    }
    .hero-sub{
      margin-top: 14px;
      color: rgba(16,17,20,.62);
      font-size: 26px;
    }

    /* Right hero: placeholder for video */
    .hero-media{
      background:#fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid var(--soft);
      height: 100%;
      overflow:hidden;
      position: relative;
      min-height: 260px;
    }
    .hero-media .media-placeholder{
      position:absolute; inset:0;
      display:grid; place-items:center;
      background:
        radial-gradient(circle at 30% 20%, rgba(124,58,237,.10), transparent 40%),
        radial-gradient(circle at 70% 30%, rgba(34,197,94,.12), transparent 45%),
        linear-gradient(180deg, #ffffff, #f6f7ff);
      color: rgba(16,17,20,.55);
      font-weight: 800;
      text-align:center;
      padding: 24px;
    }
    .hero-media .red-copy{
      position:relative;
      padding: 18px 18px 8px;
      text-align:center;
    }
    .hero-media .red-copy h3{
      color:#d11b1b;
      font-weight:900;
      margin: 4px 0 6px;
      font-size: 26px;
    }
    .hero-media .red-copy .big-word{
      color:#d11b1b;
      font-weight:900;
      font-size: 54px;
      line-height: .95;
      letter-spacing:.02em;
      margin: 4px 0;
    }
    .hero-media .red-copy p{
      margin: 6px 0;
      color:#d11b1b;
      font-weight:800;
      font-size: 15px;
    }

    /* ---------- Schools scroller ---------- */
.schools-strip{
  display:flex;
  align-items:center;
  gap:12px;
}
.schools-marquee{
   flex:1 1 auto;
  overflow:hidden;
  position:relative;
}
.school-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.school-pill.lead{
  flex:0 0 auto; /* stays fixed */
}

 .schools-inner{
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  width:max-content;
  will-change:transform;
  animation: schoolsMarquee 22s linear infinite;
}
.schools-strip:hover .schools-inner{
  animation-play-state: paused;
}
    .schools-inner::-webkit-scrollbar{ display:none; }
   .school-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 700;
  font-size: 13px;
  color: rgba(16,17,20,.85);
  box-shadow: 0 6px 12px rgba(0,0,0,.06);
}
    .school-pill.lead{
      background: rgba(124,58,237,.10);
      border-color: rgba(124,58,237,.14);
      color: rgba(16,17,20,.78);
    }
@keyframes schoolsMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
    /* ---------- Feature Cards ---------- */
    .feature-row{
      padding: 14px 0;
    }
    .feature-card{
      border-radius: 10px;
      padding: 58px 18px 18px;
      height: 100%;
      min-height: 215px;
      box-shadow: 0 10px 18px rgba(0,0,0,.10);
      position: relative;
      overflow: visible;
      color:#fff;
    }
    .feature-wrap{
  position: relative;
  padding-top: 34px; /* space for the icon above card */
}
.feature-icon{
  position: absolute;
  top: -6px;
  left: 18px;
  width: 92px;        /* adjust based on your PNG */
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  user-select: none;
  pointer-events: none;
}
    .feature-card::after{
      content:"";
      position:absolute; inset:-40px -40px auto auto;
      width:140px;height:140px;border-radius:999px;
      background: rgba(255,255,255,.14);
      transform: rotate(20deg);
    }
    .icon-bubble{
      width:52px;height:52px;border-radius:14px;
      background: rgba(255,255,255,.22);
      border: 1px solid rgba(255,255,255,.22);
      display:grid;place-items:center;
      font-weight:900;
      margin-bottom: 10px;
      position:relative;
      z-index:1;
    }
    .feature-title{
      font-weight: 900;
      margin-bottom: 6px;
      font-size: 20px;
      position:relative;
      line-height: 1.1;
      z-index:1;
    }
    .feature-desc{
    font-size: 13px;
  line-height: 1.35;
  opacity: .95;
  max-width: 240px;
    }
    .feature-btn{
      position: absolute;
  right: 14px;
  bottom: -14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.55);
  color: rgba(16,17,20,.85);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1.05;
  box-shadow: 0 8px 14px rgba(0,0,0,.20);
  backdrop-filter: blur(8px);
    }
.feature-btn .btn-top{
  font-size: 12px;
  opacity: .9;
}

.feature-btn .btn-bottom{
  font-size: 12px;
  font-style: italic;
}
    /* ---------- Section Title ---------- */
    .section-title{
      margin-top: 26px;
      font-weight: 900;
      font-size: clamp(28px, 3.1vw, 44px);
      line-height: 1.05;
    }
    .section-title .blue{
      color: #3b82f6;
    }

    /* ---------- Program: Global Classroom ---------- */
    .program-card{
      margin-top: 14px;
      background:#fff;
      border: 1px solid var(--soft);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }.program-card,
.program-left{
  overflow: visible !important;
  position: relative;
}

    .program-left{
      background: linear-gradient(180deg, rgba(249,115,22,.22), rgba(249,115,22,.10));
      padding: 18px;
      height: 100%;
    }
   .program-head{
  white-space: nowrap;          /* 👈 stops line break */
  display: inline-block;
  position: relative;
  color: #f97316;
  font-weight: 900;
  z-index: 3;                   /* 👈 goes above image */
  font-size: clamp(42px, 4vw, 76px);  /* adjust if needed */
  font-family: 'Gill Sans Ultra Bold', sans-serif;
}
    .program-left .program-sub{
      font-weight: 800;
      color: rgba(16,17,20,.72);
      margin-bottom: 10px;
    }
    .program-sub{
  font-size: clamp(22px, 1.8vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: #4a4a4a;
  margin: 0 0 18px 0;
  max-width: 26ch;              /* forces the same wrapping */
}
    .program-left p{
      font-size: 19px;
  line-height: 1.7;
  color: #111;
  margin: 0;
  max-width: 44ch;  
    }
    .program-sub, .program-left p{
  text-wrap: pretty;
}
    .program-media{
      position: relative;
      min-height: 220px;
      height: 100%;
      background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.06)),
        linear-gradient(90deg, rgba(59,130,246,.12), rgba(124,58,237,.10));
      display:grid;
      place-items:center;
      color: rgba(16,17,20,.55);
      font-weight: 900;
    }
    .learn-more-chip{
      position:absolute;
      left: 14px;
      bottom: 14px;
      background: rgba(0,0,0,.65);
      color:#fff;
      padding: 6px 12px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 11px;
      text-decoration:none;
      backdrop-filter: blur(4px);
    }

    /* ---------- Program: UpskillNow ---------- */
    .upskill-card{
      margin-top: 14px;
      background:#fff;
      border: 1px solid var(--soft);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .upskill-left{
      background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.06));
      padding: 18px;
      height: 100%;
    }
    .upskill-left .upskill-head{
      font-weight: 1000;
      font-size: clamp(42px, 4vw, 76px);
      color: #3b82f6;
      white-space: nowrap;
      line-height: 1;
      margin: 0 0 10px;
      letter-spacing: .01em;
      z-index: 3;  
      font-family: 'Gill Sans Ultra Bold', sans-serif;
    }
    .upskill-left .upskill-sub{
     font-size: clamp(22px, 1.8vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: #4a4a4a;
  margin: 0 0 18px 0;
  max-width: 26ch;   
    }
    .upskill-left p{
     font-size: 19px;
    line-height: 1.7;
    color: #111;
    margin: 0;
    max-width: 44ch;
    }
.skill-btn {
  border-radius: 15px; /* More rounded corners */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: all 0.1s ease; /* Quick transition for press effect */
  text-decoration: none;
  user-select: none;
  border-width: 3px; /* Thick border */
  border-style: solid;
}

/* Click Effect: Presses down */
.skill-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 3px rgba(0,0,0,0.05);
}
.btn-vibe {
  border-color: #ff80df;
  background: linear-gradient(to bottom right, #ffb6e6, #ff80df);
  color: #b832d9;
  /* White highlight top-left, dark shadow bottom-right */
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #d960bd;
}

/* Game Dev - Red */
.btn-game {
  border-color: #ff6666;
  background: linear-gradient(to bottom right, #ff9999, #ff6666);
  color: #d11b1b;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #cc4d4d;
}

/* Web Dev - Blue */
.btn-web {
  border-color: #6699ff;
  background: linear-gradient(to bottom right, #99ccff, #6699ff);
  color: #1d4ed8;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #4d7acc;
}

/* App Dev - Light Green */
.btn-app {
  border-color: #99cc99;
  background: linear-gradient(to bottom right, #b3e6b3, #99cc99);
  color: #15803d;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #7abb7a;
}

/* Graphic Design - Purple */
.btn-graphic {
  border-color: #b366ff;
  background: linear-gradient(to bottom right, #d999ff, #b366ff);
  color: #7c3aed;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #994dcc;
}

/* Fashion Design - Orange */
.btn-fashion {
  border-color: #ffb366;
  background: linear-gradient(to bottom right, #ffcc99, #ffb366);
  color: #c2410c;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #cc8f4d;
}

/* Interior Design - Brown */
.btn-interior {
  border-color: #c0a080;
  background: linear-gradient(to bottom right, #e0d0c0, #c0a080);
  color: #3d2e21;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #a08060;
}

/* Entrepreneurship - Light Blue */
.btn-entre {
  border-color: #80c0e0;
  background: linear-gradient(to bottom right, #b0e0f0, #80c0e0);
  color: #0369a1;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #60a0c0;
}

/* Leadership - Green */
.btn-lead {
  border-color: #80e0a0;
  background: linear-gradient(to bottom right, #b0f0d0, #80e0a0);
  color: #047857;
  box-shadow: -4px -4px 10px #ffffff, 4px 4px 10px #60c080;
}
    .skill-grid{
      padding: 14px;
      background: linear-gradient(180deg, rgba(16,17,20,.03), rgba(16,17,20,.02));
      height: 100%;
    }
    .skill-grid .col-4{
  display: flex;
}
    .grid-box{
      border-radius: 10px;
  border: 1px solid rgba(16,17,20,.10);
  width: 100%;
  flex: 1;              /* fills the col height */
  display: grid;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  padding: 8px;
  height: auto;         /* override your 64px */
  min-height: 0;
    }
    .pastel-1{ background: rgba(217,70,239,.14); color:#b832d9; }
    .pastel-2{ background: rgba(239,68,68,.12); color:#d11b1b; }
    .pastel-3{ background: rgba(59,130,246,.14); color:#1d4ed8; }
    .pastel-4{ background: rgba(34,197,94,.14); color:#15803d; }
    .pastel-5{ background: rgba(168,85,247,.14); color:#7c3aed; }
    .pastel-6{ background: rgba(249,115,22,.14); color:#c2410c; }
    .pastel-7{ background: rgba(16,17,20,.10); color:#111; }
    .pastel-8{ background: rgba(14,165,233,.14); color:#0369a1; }
    .pastel-9{ background: rgba(34,197,94,.12); color:#0f766e; }

    /* ---------- Footer spacing ---------- */
    .spacer{ height: 30px; }

    /* ---------- Responsive tweaks ---------- */
    @media (max-width: 991px){
      .nav-links{ display:none; } /* keep it simple like screenshot; you can add offcanvas later */
      .hero-media .red-copy .big-word{ font-size: 44px; }
    }
    /* =========================
   SuperStudy Section
   ========================= */
.superstudy-wrap{
  margin-top: 18px;
  padding: 0 24px;
}

.superstudy-frame{
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    background: #f5b86d; /* fallback */
  }

/* Background image placeholder */
.superstudy-bg{
  position:absolute;
  inset:0;
  z-index: 0;
}
.superstudy-bg img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}

/* Warm overlay + subtle vignette like screenshot */
.superstudy-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;

}

.superstudy-inner{
  position: relative;
  z-index: 2;
  padding: 26px;
  min-height: 620px;
}

/* Top line */
/* place header content ON TOP IMAGE */
  .superstudy-top{
    position:absolute;
    inset: 0;
    padding: 20px 22px;
    display:flex;
    align-items:flex-start;
    gap: 14px;
    z-index: 2;
  }
 .superstudy-brand{
    font-weight: 1000;
    letter-spacing: .02em;
    font-size: clamp(34px, 3.6vw, 56px);
    line-height: 1;
    color: #ffe08a;
    text-shadow: 0 8px 18px rgba(0,0,0,.28);
    font-family: 'Gill Sans Ultra Bold', sans-serif;
  }

  .superstudy-tag{
    margin-left: auto;
    margin-top: 10px;
    font-weight: 800;
    font-size: clamp(13px, 1.2vw, 18px);
    color: rgba(20,20,20,.78);
    text-shadow: 0 8px 16px rgba(255,255,255,.35);
    white-space: nowrap;
  }
/* Right description box */
 .superstudy-copy{
    position:absolute;
    right: 22px;
    top: 58px;
    width: min(420px, calc(100% - 44px));
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 12px 14px;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 18px rgba(0,0,0,.16);
  }
.superstudy-copy b{ font-weight: 1000; }
.superstudy-copy p{
    margin:0;
    color: rgba(16,17,20,.82);
    line-height: 1.5;
    font-size: 18px;
  }
.superstudy-bottom{
    background: #f5b86d;          /* warm orange like poster */
    padding: 16px 22px 22px;
  }
/* Course cards grid */
.superstudy-cards{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

/* Make it responsive */
@media (max-width: 992px){
  .superstudy-inner{ min-height: unset; }
  .superstudy-top{ flex-direction: column; }
  .superstudy-copy{ max-width: 100%; }
  .superstudy-cards{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 576px){
  .superstudy-cards{ grid-template-columns: 1fr; }
}

/* Single card */
.course-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.course-title{
  font-weight: 1000;
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.1;
}
.course-code{
    font-weight: 900;
    margin: 0 0 8px;
    color: rgba(16,17,20,.86);
    font-size: 12px;
  }
.course-desc{
  margin: 0;
  font-size: 18px;
  line-height: 1.42;
  color: rgba(16,17,20,.78);
}

/* Color accents (match screenshot vibe) */
.c-green .course-title{ color:#16a34a; }
.c-red   .course-title{ color:#dc2626; }
.c-pink  .course-title{ color:#d946ef; }
.c-blue  .course-title{ color:#2563eb; }
.c-purple .course-title{ color:#7c3aed; }
.c-cyan  .course-title{ color:#0284c7; }
.c-amber .course-title{ color:#f59e0b; }
.c-teal  .course-title{ color:#0f766e; }
/* =========================
   Learn2Win Section
   ========================= */
.learn2win-wrap{ margin-top: 18px; padding: 0 24px; }

.learn2win-frame{
  border-radius: 26px;
  overflow: hidden;
  background:#0d0f12;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

/* Top black bar */
.l2w-topbar{
  background: #14161a;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  gap: 16px;
}
.l2w-logo{
  font-weight: 1000;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1;
  letter-spacing: .01em;
}
.l2w-logo .learn{ color:#67e8f9; }  /* cyan */
.l2w-logo .two{ color:#22c55e; }    /* green-ish */
.l2w-logo .win{ color:#facc15; }    /* yellow */

.l2w-subtitle{
  color: rgba(255,255,255,.70);
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 20px);
  margin-left: 8px;
}

/* Hero image area */
.l2w-hero{
  position: relative;
  min-height: 360px;
  background: #0b0d10;
}
.l2w-hero img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.l2w-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));
}

/* Overlay text box */
.l2w-overlay{
  position:absolute;
  left: 18px;
  bottom: 18px;
  width: min(520px, calc(100% - 36px));
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  padding: 14px 14px;
  backdrop-filter: blur(6px);
  z-index: 2;
  color: rgba(16,17,20,.85);
  box-shadow: 0 12px 20px rgba(0,0,0,.18);
  font-size: 18px;
}
.l2w-overlay b{ font-weight: 1000; }

/* Bottom grid (2 columns, 3 rows) */
.l2w-grid{
  background:#101215;
  border-top: 1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.l2w-item{
  padding: 16px 18px;
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  min-height: 96px;
}
.l2w-item:nth-child(2n){ border-right: none; }
.l2w-item:nth-last-child(-n+2){ border-bottom:none; }

.l2w-title{
  margin: 0 0 4px;
  font-weight: 1000;
  font-size: 20px;
  line-height: 1.15;
}
.l2w-line{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.35;
}
.l2w-line.dim{ color: rgba(255,255,255,.64); }

/* Color accents (like poster) */
.l2w-magenta{ color:#ff4fd8; }
.l2w-blue{ color:#3b82f6; }
.l2w-green{ color:#22c55e; }
.l2w-purple{ color:#a855f7; }
.l2w-red{ color:#ef4444; }
.l2w-orange{ color:#f97316; }

/* Responsive */
@media (max-width: 992px){
  .l2w-grid{ grid-template-columns: 1fr; }
  .l2w-item{ border-right:none; }
  .l2w-item:nth-last-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,.10); }
  .l2w-item:last-child{ border-bottom:none; }
}


/* =========================
   Principal's Club Section
   ========================= */
.principal-wrap{ margin-top: 16px; padding: 0 24px}

.principal-frame{
  border-radius: 26px;
  overflow:hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  border: 1px solid rgba(0,0,0,.08);
  background: #0b1a44;
  display:flex;
  min-height: 250px;
}

/* Left info panel */
.principal-left{
  flex: 0 0 40%;
  padding: 22px 22px;
  background: linear-gradient(180deg, #0c2a6a, #071a44);
  color:#fff;
}
.principal-title{
  font-weight: 1000;
  font-size: clamp(44px, 4vw, 82px);
  line-height: 1.0;
  margin: 0 0 14px;
  color: #fde047; /* yellow */
  text-shadow: 0 10px 18px rgba(0,0,0,.25);
  font-family: 'Gill Sans Ultra Bold', sans-serif;
}
.principal-left p{
  margin: 0;
  font-size: 26px;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

/* Right map image placeholder */
.principal-right{
  flex: 1 1 auto;
  position: relative;
  background: #06163b;
  min-height: 250px;
}
.principal-right img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* small icon placeholder on map */
.principal-pin{
  position:absolute;
  top: 34%;
  right: 20%;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  font-weight: 1000;
  color: rgba(16,17,20,.72);
  box-shadow: 0 14px 22px rgba(0,0,0,.25);
}

/* Responsive */
@media (max-width: 992px){
  .principal-frame{ flex-direction: column; }
  .principal-left{ flex: 0 0 auto; }
  .principal-pin{ right: 10%; top: 20%; }
}
/* =========================
   Consultancy Section
   ========================= */
.consultancy-wrap{ margin-top: 18px; padding: 0 24px }

.consultancy-frame{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  min-height: 520px;
  background: #0b1b3a;
}

/* Background image placeholder */
.consultancy-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.consultancy-bg img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}

/* Dark overlay for readability */
.consultancy-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,.08)),
    radial-gradient(circle at 22% 30%, rgba(0,140,255,.22), transparent 40%),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.08), transparent 45%);
}

/* Content */
.consultancy-inner{
  position: relative;
  z-index: 2;
  padding: 22px;
}

/* Top-left heading block */
.consultancy-title{
  font-weight: 1000;
  font-size: clamp(34px, 3.2vw, 56px);
  line-height: 1;
  color: #fde047; /* deep blue like screenshot */
  text-shadow: 0 12px 18px rgba(0,0,0,.25);
  margin: 0 0 6px;
  font-family: 'Gill Sans Ultra Bold', sans-serif;
}
.consultancy-kicker{
  color: rgba(255,255,255,.85);
  font-weight: 700;
  line-height: 1.45;
  max-width: 420px;
}
.consultancy-kicker .hl{
  color: #facc15; /* yellow highlight */
  font-weight: 900;
}

/* Two translucent boxes */
.consultancy-panels{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.consultancy-panel{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(7px);
  box-shadow: 0 14px 22px rgba(0,0,0,.18);
}
.panel-block{ margin-bottom: 12px; }
.panel-block:last-child{ margin-bottom: 0; }

.panel-head{
  font-weight: 1000;
  margin: 0 0 6px;
  font-size: 22px;
}
.panel-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(16,17,20,.80);
  font-size: 18px;
  line-height: 1.45;
}
.panel-list li{ margin: 2px 0; }

/* Accent colors for headings */
.h-magenta{ color:#d946ef; }
.h-green{ color:#16a34a; }
.h-blue{ color:#1d4ed8; }
.h-purple{ color:#7c3aed; }
.h-orange{ color:#f97316; }

@media (max-width: 992px){
  .consultancy-panels{ grid-template-columns: 1fr; }
  .consultancy-frame{ min-height: unset; }
}


/* =========================
   NextGen Teaching Section
   ========================= */
.nextgen-wrap{ margin-top: 16px;padding: 0 24px }

.nextgen-frame{
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  position: relative;
  height: 75vh !important;
}

/* background image like faint campus */
.nextgen-bg{
  position:absolute;
  inset:0;
  z-index:0;
  opacity: .18;              /* faint */
}
.nextgen-bg img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: grayscale(.25) contrast(1.05);
}
/* subtle bottom fade */
.nextgen-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.85) 70%);
  pointer-events:none;
}
.nextgen-inner{
  position: relative;
  z-index: 1;
  padding: 22px;
}

.nextgen-title{
  font-weight: 1000;
  font-size: 49px;
  line-height: 1;
  margin: 0 0 10px;
  color:#ef4444; /* red */
  text-shadow: 0 10px 16px rgba(0,0,0,.08);
  font-family: 'Gill Sans Ultra Bold', sans-serif;
}
.nextgen-sub{
  font-weight: 700;
  color: rgba(16,17,20,.80);
  margin-bottom: 12px;
  font-size: 25px;
}

.nextgen-copy{
  color: rgba(16,17,20,.78);
  line-height: 1.6;
  font-size: 22px;
  max-width: 560px;
}
.nextgen-collage{
  position: relative;
  width: 100%;
  height: 320px;              /* poster-like height */
}
.nextgen-row{
  display:flex;
  gap: 12px;
}
.nextgen-row.top{ margin-bottom: 14px; }
.nextgen-row.bottom{
  justify-content: flex-start;
  gap: 14px;
}

/* Speaker grid on right */
.speakers-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.speaker-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}
.speaker-grid.bottom{
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  justify-content: start;
}

.speaker-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 12px 18px rgba(0,0,0,.10);
}
.speaker-photo{
  width:100%;
  height: 150px;
  background: #f3f4f6;
  display:grid;
  place-items:center;
  color: rgba(16,17,20,.55);
  font-weight: 1000;
  position: relative;
}
.speaker-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
/* Tile base */
.ng-tile{
  position: relative;
  background:#fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 22px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.10);
}

/* Photo */
.ng-photo{
  width:100%;
  height: 152px;
}
.ng-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Nameplate inside tile (like screenshot) */
.ng-label{
  background:#fff;
  padding: 6px 8px 7px;
  text-align:center;
}
.ng-name{
  margin: 0;
  font-weight: 1000;
  font-size: 11px;
  line-height: 1.1;
  color: rgba(16,17,20,.92);
}
.ng-affil{
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.15;
  color: rgba(16,17,20,.62);
}

/* dotted border like the poster */
.ng-tile::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 10px;
  border: 3px dotted rgba(59,130,246,.75); /* default blue */
  pointer-events:none;
}
.dot-yellow::after{ border-color: rgba(250,204,21,.95); }
.dot-green::after{ border-color: rgba(34,197,94,.85); }
.dot-blue::after{ border-color: rgba(59,130,246,.85); }

/* TOP row sizes + angle */
.ng-top-1, .ng-top-2, .ng-top-3{
  width: 33.333%;
}
.ng-top-1{ transform: rotate(-6deg); transform-origin: bottom left; }
.ng-top-2{ transform: rotate(-1deg); transform-origin: bottom center; }
.ng-top-3{ transform: rotate(6deg);  transform-origin: bottom right; }

/* BOTTOM row bigger tiles */
.ng-bottom-1, .ng-bottom-2{
  width: 48%;
}
.ng-bottom-1 .ng-photo,
.ng-bottom-2 .ng-photo{
  height: 162px;
}

/* responsive */
@media (max-width: 992px){
  .nextgen-collage{ height: auto; }
  .nextgen-row{ flex-direction: column; }
  .ng-top-1,.ng-top-2,.ng-top-3,.ng-bottom-1,.ng-bottom-2{ width:100%; transform:none; }
}
/* dotted frame effect like screenshot */
.speaker-photo::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 10px;
  border: 3px dotted rgba(59,130,246,.55);
  pointer-events:none;
}
.dot-yellow .speaker-photo::after{ border-color: rgba(250,204,21,.85); }
.dot-green  .speaker-photo::after{ border-color: rgba(34,197,94,.70); }
.dot-blue   .speaker-photo::after{ border-color: rgba(59,130,246,.70); }

.speaker-body{
  padding: 10px 10px 12px;
  text-align:center;
}
.speaker-name{
  font-weight: 1000;
  margin: 0;
  font-size: 13px;
}
.speaker-affil{
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(16,17,20,.68);
  line-height: 1.25;
}

@media (max-width: 992px){
  .speaker-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .speaker-grid.bottom{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 576px){
  .speaker-grid, .speaker-grid.bottom{ grid-template-columns: 1fr; }
}


/* =========================
   Footer
   ========================= */
.site-footer{
  margin-top: 18px;
  background: #0b1220;
  color: rgba(255,255,255,.82);
  padding: 32px 0 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footer-logo{
  width:52px;height:52px;border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #4fd1ff, #2563eb);
  box-shadow: 0 10px 18px rgba(37,99,235,.25);
}
.footer-brand h4{
  margin:0;
  font-weight: 1000;
  letter-spacing:.05em;
  color:#fff;
}
.footer-tagline{
  margin-top: 8px;
  font-weight: 800;
  color: rgba(255,255,255,.82);
}
.footer-mini-icons{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.footer-mini-icons a{
  width: 34px;height: 34px;
  display:grid;place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-weight: 1000;
}
.footer-mini-icons a:hover{ background: rgba(255,255,255,.08); }

.footer-col-title{
  font-weight: 1000;
  color:#fff;
  margin-bottom: 10px;
}
.footer-links{
  margin: 0;
  padding: 0;
  list-style:none;
}
.footer-links li{ margin: 8px 0; }
.footer-links a{
  color: rgba(255,255,255,.72);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
}
.footer-links a:hover{ text-decoration: underline; }

.footer-subtext{
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.45;
}
.footer-subscribe{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.footer-subscribe input{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 10px 12px;
  color:#fff;
  outline:none;
  flex: 1 1 auto;
}
.footer-subscribe button{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 1000;
  background: rgba(168,85,247,.95);
  color:#0b1220;
}
.footer-subscribe button:hover{ filter: brightness(1.03); }

.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  text-align:center;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  font-size: 12px;
}
 .superstudy-hero{
    position: relative;
    height: 310px;              /* adjust if needed */
    background: #222;
  }
   .superstudy-hero img{
    width: 100%;
    height: 230%;
    object-fit: cover;
    display:block;
  }
   .superstudy-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 72% 20%, rgba(255,255,255,.35), transparent 40%),
      linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.10));
    pointer-events:none;
  }

  /* nav*/ 
  /* General Nav Styling */
.nav-links a {
    text-decoration: none;
    color: #333; /* Dark color for links */
    font-weight: 500;
}

.nav-sep {
    margin: 0 10px;
    color: #ccc;
}

/* --- Portal Dropdown Styling --- */

/* The main container for the dropdown */
.portal-menu {
    width: 320px;
    border-radius: 12px !important;
    margin-top: 10px !important;
}

/* Hover effect for the list items */
.portal-item {
    transition: background-color 0.2s;
}

.portal-item:hover {
    background-color: #f8f9fa; /* Light gray on hover */
}

/* Icon Box Styling (The colored squares) */
.icon-box {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Specific Colors matching the screenshot */
.bg-pink {
    background-color: #f04e8b; /* Pinkish Red */
}

.bg-purple {
    background-color: #8c5bf5; /* Purple */
}

.bg-blue {
    background-color: #3b82f6; /* Blue */
}

.bg-orange {
    background-color: #f59e0b; /* Orange */
}

/* Ensure the Programs dropdown link looks like a normal link until clicked */
#programsDropdown {
    color: #333;
    font-size:14px;
    font-weight: 500;
}
/* Force dropdown to open on hover */
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    left: auto !important;
    right: 0 !important;
}
/* =========================
   Modern Dropdown Styling
   ========================= */

/* 1. UPDATE your existing .dropdown-menu class to allow the bridge to sit outside */
.dropdown-menu {
    /* ... keep your existing styles ... */
    margin-top: 12px !important; 
     left: 0 !important; /* Forces dropdown to open on the left */
  right: auto !important; /* Prevents it from opening on the right */
    /* ADD THIS LINE: */
    overflow: visible !important; 
}

/* 2. ADD THIS NEW SECTION: The Invisible Bridge */
.dropdown-menu::before {
    content: "";
    display: block;
    position: absolute;
    
    /* Position it above the menu to fill the gap */
    top: -15px; 
    left: 0;
    
    /* Make it cover the full width and the gap height */
    width: 100%;
    height: 15px; 
    
    /* Transparent so you can't see it, but the mouse can 'feel' it */
    background: transparent; 
}


/* bottom*/
/* FORCE Upskill grid boxes to fill full space */
.upskill-card .skill-grid .row{
  height: 100%;
}

.upskill-card .skill-grid .col-4{
  display: flex;
}

.upskill-card .skill-grid .grid-box{
  height: auto !important;     /* kills the 64px */
  flex: 1 1 auto !important;   /* fills column height */
  width: 100%;
  min-height: 0;
}
.l2w-logo{
    font-family: 'Gill Sans Ultra Bold', sans-serif;
}