:root{
      --bg0:#070A0F;
      --bg1:#0B1020;
      --text:#F3F4F6;
      --muted:#A7B0C0;
      --border:rgba(255,255,255,.10);
      --shadow:0 18px 60px rgba(0,0,0,.55);

      --gold:#D7B56D;
      --gold2:#F2E3B7;

      --radius:18px;
      --radius2:26px;
      --max:1160px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 15% -10%, rgba(215,181,109,.14), transparent 55%),
        radial-gradient(900px 500px at 85% 0%, rgba(110,231,248,.10), transparent 55%),
        radial-gradient(900px 700px at 50% 110%, rgba(215,181,109,.10), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      line-height:1.55;
      overflow-x:hidden;
    }
    .serif{font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;}

    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    .container{max-width:var(--max); margin:0 auto; padding:0 20px}

    /* Accessibility */
    .skip{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip:focus{
      left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
      background:#111827; border:1px solid var(--border); border-radius:999px; z-index:9999;
    }
    :focus-visible{
      outline: 3px solid rgba(215,181,109,.75);
      outline-offset: 3px;
      border-radius: 10px;
    }

    /* NAV */
    .topbar{
      position:sticky; top:0; z-index:60;
      background:rgba(7,10,15,.70);
      backdrop-filter:saturate(140%) blur(12px);
      border-bottom:1px solid var(--border);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 0; gap:4px;
    }
    .brand{
      display:flex; align-items:center; gap:12px; min-width:260px;
    }
    .mark{
      width:40px; height:40px;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(215,181,109,.22), rgba(242,227,183,.08));
      border:1px solid rgba(215,181,109,.35);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
      display:grid; place-items:center;
    }
    .brandTitle{display:flex; flex-direction:column; line-height:1.1}
    .brandTitle b{font-size:14px; letter-spacing:.4px}
    .brandTitle span{font-size:12px; color:var(--muted); font-weight:700}

    .navlinks{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center;
    }
    .navlinks a{
      padding:9px 10px;
      border-radius:999px;
      color:var(--muted);
      font-weight:800;
      font-size:12px;
      letter-spacing:.2px;
      border:1px solid transparent;
    }
    .navlinks a:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.08);
      color:var(--text);
    }
    .actions{display:flex; align-items:center; gap:10px; justify-content:flex-end; min-width:220px}
    
    .userMenu {
      position: relative;
      flex: none;
      display: inline-flex;
      align-items: center;
    }
    .userAvatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e7c77a, #c9a24d);
      color: #1a1a1a;
      font-weight: 700;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .userDropdown {
      position: absolute;
      right: 0;
      top: 100%;
      margin-top: 8px; /* visual spacing without hover gap */
      background: #0f1317;
      border-radius: 14px;
      min-width: 180px;
      padding: 8px;
      box-shadow: 0 20px 40px rgba(0,0,0,.45);
      display: none;
      z-index: 9999;
    }
    /* show dropdown */
    .userMenu:hover .userDropdown {
      display: block;
    }
        /* dropdown items */
    .dropdownItem {
      padding: 10px 12px;
      background: none;
      border: none;
      color: #eaeaea;
      text-align: left;
      border-radius: 10px;
      cursor: pointer;
    }

    .dropdownItem:hover {
      background: rgba(255,255,255,.08);
    }

    .dropdownItem.danger {
      color: #f87171;
    }

    .userName {
      padding: 8px 12px;
      font-size: 12px;
      opacity: .7;
    }
    .userDropdown > * {
      display: block;
      width: 100%;
    }
    /* ---------- Mobile Navigation Drawer ---------- */

.mobileNav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(7,10,15,.98);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}

.mobileNavInner {
  display: grid;
  gap: 14px;
  padding: 18px 20px 22px;
}

.mobileNavInner a {
  font-weight: 800;
  padding: 10px 0;
}

.mobileNavDivider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 6px 0 4px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* ---------- Desktop vs Mobile visibility ---------- */

.desktopActions {
  display: flex;
  gap: 10px;
}

@media (max-width: 720px) {
  .navlinks,
  .desktopActions {
    display: none;
  }

  .menuBtn {
    display: inline-flex;
  }
}
    .btn{
      border:0; border-radius:999px; padding:11px 14px;
      font-weight:900; cursor:pointer;
      display:inline-flex; align-items:center; gap:10px;
      transition: transform .06s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      will-change:transform;
      white-space:nowrap;
    }
    .btn:active{transform:translateY(1px)}
    .btn-primary{
      color:#130F07;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      box-shadow: 0 18px 50px rgba(215,181,109,.22);
    }
    .btn-primary:hover{box-shadow: 0 24px 70px rgba(215,181,109,.26)}
    .btn-ghost{
      color:var(--text);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.12);
    }
    .btn-ghost:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(215,181,109,.25);
    }
    .btn-small{padding:9px 12px; font-size:12px}
    .menuBtn{display:none}

    /* Cards */
    .card{
      border-radius:var(--radius2);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .card:before{
      content:"";
      position:absolute; inset:-120px -120px auto auto;
      width:320px; height:320px;
      background: radial-gradient(circle at 30% 30%, rgba(215,181,109,.22), transparent 60%);
      transform: rotate(12deg);
      pointer-events:none;
    }

    /* HERO */
    .hero{padding:34px 0 10px}
    .heroGrid{display:grid; grid-template-columns: 1.15fr .85fr; gap:16px; align-items:stretch}
    .heroMain{padding:28px}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:9px 12px; border-radius:999px;
      background:rgba(215,181,109,.10);
      border:1px solid rgba(215,181,109,.22);
      color:var(--gold2);
      font-weight:900;
      font-size:12px;
      letter-spacing:.2px;
      position:relative; z-index:1;
    }
    .dot{
      width:10px; height:10px; border-radius:10px;
      background:linear-gradient(135deg, var(--gold), var(--gold2));
      box-shadow:0 0 0 7px rgba(215,181,109,.14);
    }
    .heroTitle{
      margin:16px 0 10px;
      font-size:44px; line-height:1.04; letter-spacing:-.6px;
      position:relative; z-index:1;
    }
    .heroText{
      margin:0 0 18px;
      color:var(--muted);
      font-weight:700;
      max-width:60ch;
      position:relative; z-index:1;
    }
    .heroCtas{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1}
    .heroProof{
      margin-top:18px;
      display:grid; grid-template-columns: repeat(3, 1fr);
      gap:10px;
      position:relative; z-index:1;
    }
    .proof{
      padding:12px;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
    }
    .proof b{display:block; font-size:13px; letter-spacing:.2px}
    .proof span{display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:700}

    /* Hero art */
    .heroArtWrap{padding:18px; display:flex; flex-direction:column; gap:12px}
    .heroArt{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(17,26,43,.65), rgba(14,19,32,.35));
      overflow:hidden;
      position:relative;
      min-height:270px;
      display:grid; place-items:center;
    }

    /* Sections */
    section{padding:18px 0}
    .sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:22px 0 12px}
    .sectionHead h3{font-size:20px; letter-spacing:-.3px}
    .sectionHead p{margin:6px 0 0; color:var(--muted); font-weight:700; font-size:13px; max-width:68ch}

    /* Services grid */
    .cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
    .service{
      border-radius:22px;
      /* background:rgba(255,255,255,.03); */
      background:rgba(10,64,43,1);
      border:1px solid rgba(255,255,255,.10);
      padding:16px;
      transition: transform .10s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .service:hover{
      transform: translateY(-2px);
      border-color: rgba(215,181,109,.28);
      box-shadow: 0 18px 60px rgba(0,0,0,.40);
    }
    .serviceTop{display:flex; align-items:center; justify-content:space-between; gap:10px}
    .icon{
      width:42px; height:42px; border-radius:16px;
      display:grid; place-items:center;
      background: rgba(215,181,109,.10);
      border:1px solid rgba(215,181,109,.22);
      color:var(--gold2);
      font-weight:900;
    }
    .tag{
      font-size:11px; font-weight:900;
      padding:7px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      letter-spacing:.2px;
    }
    .service h4{margin-top:12px; font-size:14px; letter-spacing:.2px}
    .service p{margin:8px 0 14px; color:var(--gold); font-weight:700; font-size:13px}
    .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
    .meta{font-size:12px; color:var(--muted); font-weight:800}

    /* Dashboard + layout */
    .split{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
    .panel{padding:18px}
    .label{font-size:12px; font-weight:900; color:var(--muted); margin:0 0 6px; letter-spacing:.2px}
    .input,.select{
      width:100%;
      padding:11px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:var(--text);
      outline:none;
    }
    .input:focus,.select:focus{border-color: rgba(215,181,109,.35); box-shadow:0 0 0 5px rgba(215,181,109,.14)}
    .grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
    .rateRow{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:12px 12px;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
    }
    .rateRow b{font-size:12px; letter-spacing:.2px}
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight:900}
    .progress{height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); overflow:hidden}
    .bar{height:100%; width:56%; background: linear-gradient(90deg, var(--gold), var(--gold2))}
    .fine{margin:10px 0 0; color:var(--muted); font-weight:700; font-size:11px}

    /* Booking checks */
    .checks{
      display:grid; grid-template-columns: repeat(2, 1fr);
      gap:10px; padding:12px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.02);
    }
    .check{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 12px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
    }
    .check input{margin-top:3px; accent-color: var(--gold)}
    .check b{font-size:12px}
    .check span{display:block; margin-top:2px; color:var(--muted); font-weight:700; font-size:11px}
    .formGrid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}

    select {
      background-color: rgba(255,255,255,.03);
      color: #F3F4F6;
    }

    /* Options inside dropdown */
    select option {
      background-color: #0B1020; /* dark */
      color: #F3F4F6;
    }

    /* Hovered / selected option */
    select option:checked,
    select option:hover {
      background-color: #1F2937;
      color: #F2E3B7;
    }
    /* Alerts */
    .alert{
      margin-top:12px;
      padding:12px 14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      display:none;
    }
    .alert.success{border-color: rgba(215,181,109,.28); background: rgba(215,181,109,.10)}
    .alert.error{border-color: rgba(248,113,113,.40); background: rgba(248,113,113,.10)}
    .alert b{display:block; font-size:12px; letter-spacing:.2px}
    .alert p{margin:4px 0 0; color:var(--muted); font-weight:700; font-size:12px}

    /* Contact and FAQ */
    /* Contact section – informational (not form-like) */
.contactCard h4,
.faqCard h4 {
  margin-bottom: 14px;
}

.contactList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.contactList li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.contactIcon {
  font-size: 18px;
  line-height: 1;
}

.contactList b {
  display: block;
  font-size: 12px;
  letter-spacing: .2px;
}

.contactList a {
  font-weight: 800;
  color: var(--gold2);
}

.contactList a:hover {
  text-decoration: underline;
}

/* FAQ */
.faqItem {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.faqItem + .faqItem {
  margin-top: 10px;
}

.faqItem summary {
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.faqItem summary::-webkit-details-marker {
  display: none;
}

.faqItem p {
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.sectionHead {
  flex-wrap: wrap;
}

.sectionHead button {
  max-width: 100%;
}
    /* Footer */
    footer{margin-top:22px; padding:26px 0 34px; border-top:1px solid rgba(255,255,255,.10); color:var(--muted)}
    .footerGrid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:14px; align-items:start}
    .footerGrid h5{margin:0 0 10px; color:var(--text)}
    .footerGrid a{display:block; padding:6px 0; font-weight:800; color:var(--muted)}
    .footerGrid a:hover{color:var(--gold2)}
    .small{font-size:12px; color:var(--muted); font-weight:700}

    /* Sticky CTA */
    .stickyCta{position:fixed; right:24px; bottom:16px; z-index:80; 
      display:flex; gap:4px; align-items:center}
    /* Services validation state */
    .checks.is-invalid {
      border: 1px solid rgba(248,113,113,.55);
      box-shadow: 0 0 0 4px rgba(248,113,113,.12);
    }

    .checks.is-valid {
      border: 1px solid rgba(215,181,109,.35);
    }

    /* Modals - Login & Register */
    .auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .auth-overlay.show {
    display: flex;
  }
    .auth-modal {
      /* width: 420px; */
      background: rgba(10,64,43,1);
      border-radius: 22px;
      padding: 10px;
      position: relative;
    }
      .form-box {
      display: none;
    }

    .form-box.active {
      display: block;
    }
    .form-box form {
      padding: 24px;
      height: max-content;
    }

    .auth-modal .form-box{
      width: 100%;
      padding: 40px 20px;
    }
    .form-box .btn {
      display: block;
      margin: 20px auto 0;
      max-width: none;
    }
    .form-box h2{
      font-size: 35px;
      text-align: center;
    }
    .form-box .input-box {
      position: relative;
      width: 100%;
      /* height: 30px; */
      margin: 30px 0;

      color: var(--gold);
    }

    .form-box .input-box input {
      width: 100%;
      height: 100%;
      background: transparent;
      padding: 20px 45px 20px 20px;
    }

    .form-box .input-box input::placeholder{
      color: var(--gold2);
    }

    .form-box .input-box i {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }

    .form-box .btn{
      width: 100%;
      height: 45px;
      font-size: 16px;
      cursor: pointer; 
      text-align: center; 
      max-width: none;
    }

    .form-box p{
      font-size: 14.5px;
      text-align: center;
      margin: 25px 0 10px;
    }

    .form-box p a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;

    }

    .form-box p a:hover{
      text-decoration: underline;

    }
 .auth-modal .close-btn-modal{
  position: absolute;
  top: 10%;
  right: 10%;

  width: 35px;
  height: 35px;

  border: none;
  border-radius: 50%;
  background: transparent;

  cursor: pointer;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  line-height: 1;
  padding: 0;

  color: #fff;
}

.auth-msg{
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold2);
  min-height: 18px;
  opacity: 0;
  transition: opacity .25s ease;
}

.auth-msg.show{
  opacity: 1;
}


    /* Responsive */
    @media (max-width: 980px){
      .heroGrid{grid-template-columns:1fr}
      .cards{grid-template-columns: repeat(2, 1fr)}
      .split{grid-template-columns:1fr}
      .footerGrid{grid-template-columns:1fr}
      .actions{min-width:auto}
    }
    @media (max-width: 720px){
      .navlinks{display:none}
      .menuBtn{display:inline-flex}
      .heroTitle{font-size:36px}
      .heroProof{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr}
      .formGrid{grid-template-columns:1fr}
      .checks{grid-template-columns:1fr}
    }
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }


    /* =========================
   Admin Dashboard Styles
   ========================= */

/* Stats grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03)
  );
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  text-align: center;
}

.stat b {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: var(--gold2);
  letter-spacing: -.3px;
}

.stat span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Recent Requests panel */
.panel h3 {
  margin: 0 0 14px;
}

/* Individual request item */
.request {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.request + .request {
  margin-top: 10px;
}

.request b {
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--gold2);
}

/* Status form */
.request form {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Compact select */
.request select.select {
  min-width: 140px;
}

/* Mobile responsiveness */
@media (max-width: 720px) {
  .dashboard-grid {
    /* grid-template-columns: 1fr; */
  }

  .request form {
    flex-direction: column;
    align-items: stretch;
  }

  .request button {
    width: 100%;
  }
}

/* =========================
   Admin Navigation
   ========================= */

.admin-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,10,15,.85);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.admin-nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.admin-brand b {
  font-size: 14px;
  letter-spacing: .4px;
  color: var(--gold2);
}

.admin-brand span {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.admin-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===========================
   UPSKILLING SECTION
   =========================== */

#upskilling .service {
  background: rgba(255,255,255,.035);
  transition: transform .12s ease, border-color .18s ease;
}

#upskilling .service:hover {
  transform: translateY(-2px);
  border-color: rgba(215,181,109,.28);
}

#upskilling .service p {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

#upskilling .icon {
  font-size: 18px;
}

#upskilling .tag {
  background: rgba(215,181,109,.12);
  border-color: rgba(215,181,109,.25);
  color: var(--gold2);
}

/* Hybrid steps */
#upskilling .rateRow {
  background: rgba(255,255,255,.025);
}

#upskilling .rateRow b {
  font-size: 13px;
  letter-spacing: .2px;
}

/* CTA panel */
#upskilling #apply {
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(215,181,109,.18), transparent 60%),
    rgba(255,255,255,.03);
}

/* Prevent “form illusion” */
#upskilling .card,
#upskilling .service {
  cursor: default;
}

#upskilling button {
  cursor: pointer;
}

/* ===========================
   MODAL (Upskilling / Auth)
   =========================== */
/* =========================
   Upskilling Modal
   ========================= */

/* ============================= */
/* UPSKILLING – MODERN CLEAN UI  */
/* ============================= */

#upskilling-modern,
.up-pillars,
.up-tracks,
.up-steps,
.up-why,
.up-cta {
  padding: 70px 0;
}

/* HERO */
.up-hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
}

.up-hero-left h1 {
  font-size: 40px;
  margin-bottom: 18px;
}

.up-hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.up-hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.up-hero-shape {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(215,181,109,.18),
    transparent 70%);
}


/* SECTION HEAD */
.up-section-head {
  margin-bottom: 40px;
}

.up-section-head h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.up-section-head p {
  color: var(--muted);
  font-weight: 600;
}


/* GRID LAYOUTS */
.up-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.up-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}


/* CARDS */
.up-card,
.up-track-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.up-card h3,
.up-track-card h3 {
  margin: 14px 0 10px;
  font-size: 18px;
}

.up-card p,
.up-track-card p {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.up-icon {
  font-size: 22px;
}


/* TRACK BUTTON */
.up-track-card .btn {
  margin-top: 14px;
}


/* STEPS */
.up-step-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.up-step {
  flex: 1;
  min-width: 180px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.up-step span {
  font-size: 12px;
  font-weight: 900;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}

.up-step h4 {
  margin: 6px 0;
  font-size: 15px;
}

.up-step p {
  font-size: 13px;
  color: var(--muted);
}

.up-step-line {
  height: 1px;
  background: var(--border);
  flex: 0.5;
}


/* WHY SECTION */
.up-why-item {
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-weight: 600;
}


/* CTA */
.up-cta-box {
  text-align: center;
  padding: 40px 20px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}

.up-cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}


/* ============================= */
/* MOBILE RESPONSIVE             */
/* ============================= */

@media (max-width: 900px) {

  .up-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .up-hero-right {
    display: none;
  }

  .up-grid-3 {
    grid-template-columns: 1fr;
  }

  .up-grid-2 {
    grid-template-columns: 1fr;
  }

  .up-step-row {
    flex-direction: column;
  }

  .up-step-line {
    display: none;
  }

}



/* ===============================
   UPSKILLING — MOBILE REWORK
   =============================== */
@media (max-width: 768px) {

  /* Section spacing */
  #upskilling {
    padding: 20px 0;
  }

  #upskilling .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Headings */
  #upskilling .sectionHead h3 {
    font-size: 22px;
    line-height: 1.25;
  }

  #upskilling .sectionHead p {
    font-size: 13px;
    line-height: 1.6;
    max-width: 100%;
  }

  /* Card grid */
  #upskilling .cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Cards */
  #upskilling .service {
    padding: 16px;
    border-radius: 20px;
  }

  #upskilling .service h4 {
    font-size: 14px;
    margin-top: 10px;
  }

  #upskilling .service p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Tags + icons */
  #upskilling .icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 14px;
  }

  #upskilling .tag {
    font-size: 10px;
    padding: 6px 10px;
  }

  /* Hybrid model panel */
  #upskilling .panel {
    padding: 16px;
    border-radius: 22px;
  }

  #upskilling .rateRow {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* CTA section */
  #apply.panel {
    padding: 20px 16px;
    text-align: center;
  }

  #apply .heroText {
    font-size: 13px;
    line-height: 1.6;
  }

  #apply .btn {
    width: 100%;
    justify-content: center;
  }
}
  /* ============================= */
/* UPSKILLING FULL WHITE MODE   */
/* ============================= */

.upskill-white-page {
  background: #ffffff;
  color: #111;
  min-height: 100vh;
  padding-bottom: 80px;
}

.upskill-white-page h1,
.upskill-white-page h2,
.upskill-white-page h3,
.upskill-white-page h4 {
  color: #111;
}

.upskill-white-page p {
  color: #555;
}

.upskill-white-page .btn-primary {
  background: #070A0F;
  color: #fff;
}

.upskill-white-page .btn-ghost {
  border: 1px solid #ddd;
  color: #111;
  background: transparent;
}

.upskill-white-page .btn-ghost:hover {
  background: #f3f3f3;
}

.upskill-white-page .up-corp-block,
.upskill-white-page .up-corp-track,
.upskill-white-page .up-corp-cta {
  background: #fafafa;
  border: 1px solid #e5e5e5;
}

.upskill-white-page ul {
  color: #555;
}

.upskill-white-page .timeline-dot {
  background: #070A0F;
  color: #D7B56D;
}
/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 900px) {

  .up-corp-grid {
    grid-template-columns: 1fr;
  }

}

/* ============================= */
/* FORCE WHITE PAGE MODE */
/* ============================= */

body.upskill-white-page {
  background: #ffffff !important;
  color: #111 !important;
}

/* Remove dark radial overlays */
body.upskill-white-page::before,
body.upskill-white-page::after {
  display: none !important;
}

/* Reset containers */
body.upskill-white-page .card,
body.upskill-white-page .panel,
body.upskill-white-page .service {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: none;
}

/* Section spacing */
body.upskill-white-page section {
  padding: 70px 0;
}

/* Headings */
body.upskill-white-page h1,
body.upskill-white-page h2,
body.upskill-white-page h3,
body.upskill-white-page h4 {
  color: #111;
}

/* Paragraphs */
body.upskill-white-page p {
  color: #555;
}

/* Buttons */
body.upskill-white-page .btn-primary {
  background: #070A0F;
  color: #fff;
  box-shadow: none;
}

body.upskill-white-page .btn-ghost {
  border: 1px solid #ddd;
  color: #111;
  background: transparent;
}

body.upskill-white-page .btn-ghost:hover {
  background: #f5f5f5;
}
/* ============================= */
/* UPSKILL2 STRUCTURE (WHITE)    */
/* ============================= */
body.upskill-white-page #upskill-white-page {
  padding: 40px 0 70px;
}

body.upskill-white-page #upskill-white-page .container {
  max-width: 1040px;
}

body.upskill-white-page .up-corp-hero {
  padding: 34px;
  border: 1px solid #e7e7e7;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  margin-bottom: 24px;
}

body.upskill-white-page .up-corp-hero h1 {
  font-size: clamp(30px, 4.8vw, 46px);
  line-height: 1.08;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

body.upskill-white-page .up-corp-hero p {
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.65;
  color: #474747;
  margin: 0;
}

body.upskill-white-page .up-corp-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

body.upskill-white-page .up-corp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

body.upskill-white-page .up-corp-block,
body.upskill-white-page .up-corp-track,
body.upskill-white-page .up-corp-cta {
  border-radius: 18px;
  padding: 22px;
}

body.upskill-white-page .up-corp-block h3,
body.upskill-white-page .up-corp-track h3 {
  margin: 0 0 10px;
  font-size: 19px;
  color: #111;
}

body.upskill-white-page .up-corp-block p,
body.upskill-white-page .up-corp-track li {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #555;
}

body.upskill-white-page .up-corp-section {
  margin: 0 0 18px;
}

body.upskill-white-page .up-corp-section > h2 {
  font-size: 28px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

body.upskill-white-page .up-corp-section > .up-corp-track + .up-corp-track {
  margin-top: 10px;
}

body.upskill-white-page .up-corp-track ul {
  margin: 0;
  padding-left: 18px;
}

body.upskill-white-page .up-corp-track li + li {
  margin-top: 6px;
}

body.upskill-white-page .up-corp-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.upskill-white-page .up-corp-timeline > div {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 1.45;
}

body.upskill-white-page .up-corp-cta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.upskill-white-page .up-corp-cta h2 {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.15;
}

@media (max-width: 900px) {
  body.upskill-white-page #upskill-white-page {
    padding: 24px 0 56px;
  }

  body.upskill-white-page .up-corp-hero {
    padding: 24px;
  }

  body.upskill-white-page .up-corp-grid {
    grid-template-columns: 1fr;
  }

  body.upskill-white-page .up-corp-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.upskill-white-page .up-corp-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  body.upskill-white-page .up-corp-hero h1 {
    font-size: 32px;
  }

  body.upskill-white-page .up-corp-section > h2 {
    font-size: 24px;
  }

  body.upskill-white-page .up-corp-timeline {
    grid-template-columns: 1fr;
  }

  body.upskill-white-page .up-corp-actions .btn,
  body.upskill-white-page .up-corp-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================= */
/* UPSKILL2 DEPTH ENHANCEMENTS   */
/* ============================= */
body.upskill-white-page #upskill-white-page {
  position: relative;
  isolation: isolate;
}

body.upskill-white-page #upskill-white-page::before,
body.upskill-white-page #upskill-white-page::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
}

body.upskill-white-page #upskill-white-page::before {
  width: 420px;
  height: 420px;
  top: -80px;
  left: -120px;
  background: radial-gradient(circle, rgba(215, 181, 109, 0.16), rgba(215, 181, 109, 0) 68%);
}

body.upskill-white-page #upskill-white-page::after {
  width: 360px;
  height: 360px;
  right: -120px;
  bottom: -40px;
  background: radial-gradient(circle, rgba(7, 10, 15, 0.06), rgba(7, 10, 15, 0) 70%);
}

body.upskill-white-page .up-corp-hero {
  box-shadow:
    0 28px 70px rgba(7, 10, 15, 0.08),
    0 8px 22px rgba(7, 10, 15, 0.05);
}

body.upskill-white-page .up-corp-block,
body.upskill-white-page .up-corp-track,
body.upskill-white-page .up-corp-cta {
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  box-shadow:
    0 14px 34px rgba(7, 10, 15, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.upskill-white-page .up-corp-block:hover,
body.upskill-white-page .up-corp-track:hover {
  transform: translateY(-2px);
  border-color: #d9d9d9;
  box-shadow:
    0 18px 38px rgba(7, 10, 15, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.upskill-white-page .up-corp-timeline > div {
  box-shadow:
    0 8px 20px rgba(7, 10, 15, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
}

@media (max-width: 640px) {
  body.upskill-white-page #upskill-white-page::before {
    width: 260px;
    height: 260px;
    left: -100px;
  }

  body.upskill-white-page #upskill-white-page::after {
    width: 220px;
    height: 220px;
    right: -90px;
    bottom: 40px;
  }
}

/* Program track image backgrounds */
body.upskill-white-page .up-corp-track {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.upskill-white-page .up-corp-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 10, 15, 0.82), rgba(7, 10, 15, 0.58));
}

body.upskill-white-page .up-corp-track > * {
  position: relative;
  z-index: 1;
}

body.upskill-white-page .up-corp-track h3,
body.upskill-white-page .up-corp-track li {
  color: #f7f7f7;
}

body.upskill-white-page .up-corp-track.track-business {
  background-image: url("assets/images/upskill01.jpg");
}

body.upskill-white-page .up-corp-track.track-cyber {
  background-image: url("assets/images/upskill05.jpg");
}

body.upskill-white-page .up-corp-track.track-software {
  background-image: url("assets/images/upskill04.jpg");
}



body.upskill-white-page .card {
  position: relative;
  padding: 32px;
  border-radius: 12px;
  background: #f7f7f7;
  min-height: 220px; /* important */
}

body.upskill-white-page .model {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 120px;
  height: 90px;  /* make it smaller */
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
body.upskill-white-page .card p{
  padding-right: 140px;
}
body.upskill-white-page .model.prof{
  background-image: url("assets/images/model01.jpg");
}
body.upskill-white-page .model.switch{
  background-image: url("assets/images/model02.jpg");
}
body.upskill-white-page .model.orgs{
  background-image: url("assets/images/model03.jpg");
}