:root{
      --bg0:#05070d;
      --bg1:#070b14;
      --card:#0b1220cc;
      --border:rgba(148,163,184,.14);
      --text:#e5e7eb;
      --muted:#a7b2c3;
      --brand:#14b8ff;
      --brand2:#a855f7;
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --radius:18px;
    }
    *{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    body{
      background:
        radial-gradient(900px 500px at 50% 30%, rgba(20,184,255,.20), transparent 60%),
        radial-gradient(700px 500px at 75% 65%, rgba(168,85,247,.20), transparent 65%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      color:var(--text);
      overflow-x:hidden;
       padding-top:90px;
       
    }

    /* Background grid like screenshot */
    .grid-bg{
      position:relative;
    }
    .grid-bg:before{
      content:"";
      position:absolute; inset:-2px;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 64px 64px;
      opacity:.12;
      pointer-events:none;
      mask-image: radial-gradient(closest-side at 50% 30%, #000 55%, transparent 95%);
    }

    /* Section spacing */
    section{padding:140px 0}
    .section-title{
      font-weight:800;
      letter-spacing:-.02em;
      font-size: clamp(30px, 4vw, 56px);
    }
    .section-sub{
      color:var(--muted);
      max-width:860px;
      margin: 14px auto 0;
      font-size: 16px;
      line-height: 1.75;
    }

    /* Pills / badges */
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 14px;
      border:1px solid var(--border);
      background: rgba(2,6,23,.35);
      border-radius:999px;
      color:#b9c3d6;
      font-size:13px;
    }
    .dot{
      width:7px; height:7px; border-radius:50%;
      background:#22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,.18);
    }

    /* Buttons */
    .btn-brand{
      background: linear-gradient(90deg, #12b7ff, #16f2ff);
      border:0;
      color:#00131a;
      font-weight:700;
      border-radius:12px;
      box-shadow: 0 14px 30px rgba(20,184,255,.18);
      padding:12px 18px;
    }
    .btn-ghost{
      border:1px solid rgba(148,163,184,.25);
      background: rgba(2,6,23,.25);
      color:#e5e7eb;
      font-weight:700;
      border-radius:12px;
      padding:12px 18px;
    }
    .btn-ghost:hover{background:rgba(2,6,23,.40); color:#fff}

    /* Cards */
    .glass-card{
      background: rgba(11,18,32,.55);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .feature-card{
      padding:28px;
      height:100%;
    }
    .icon-box{
      width:48px;height:48px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(20,184,255,.12);
      border:1px solid rgba(20,184,255,.25);
      color:#64d2ff;
      margin-bottom:16px;
      font-size:18px;
    }
    .feature-card h5{font-weight:800}
    .feature-card p{color:var(--muted); margin:0; line-height:1.65}

    /* Hero */
    .hero-wrap{padding-top:80px; padding-bottom:70px}
    
    .hero-title{
      font-weight:900;
      line-height:1.04;
      letter-spacing:-.03em;
      font-size: clamp(36px, 5vw, 64px);
      margin-top:18px;
    }
    .hero-title .grad{
      background: linear-gradient(90deg, #0ea5ff, #22d3ee);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-title .grad2{
      background: linear-gradient(90deg, #60a5fa, #a855f7);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-sub{
      color:var(--muted);
      max-width:720px;
      margin: 18px auto 0;
      line-height:1.75;
    }
    .hero-actions{margin-top:26px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
    .mini-stats{
      margin-top:34px;
      display:flex; gap:46px; justify-content:center; flex-wrap:wrap;
      color:#dbe5f4;
    }
    
    /* ===== FULL SCREEN HERO LOCK ===== */

.hero-fullscreen {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;   /* adjust if header height changes */
  padding-bottom: 80px;
}

/* Ensure next section never overlaps */
.hero-fullscreen + section {
  position: relative;
  z-index: 2;
}

/* Prevent accidental scroll bleed */
body {
  scroll-behavior: smooth;
}
    
    
    .mini-stat{
      display:flex; align-items:center; gap:12px;
      min-width: 160px;
    }
    .mini-stat i{color:#4dd6ff}
    .mini-stat .num{font-size:26px; font-weight:900}
    .mini-stat .lbl{font-size:12px; color:var(--muted); margin-top:-2px}

    /* Tracks icons (colored squares like screenshot) */
    .track-ic{
      width:54px;height:54px;border-radius:16px;
      display:flex;align-items:center;justify-content:center;
      color:#fff; font-size:18px;
      margin-bottom:14px;
    }
    .bg-blue{background:linear-gradient(135deg,#20a5ff,#2563eb)}
    .bg-green{background:linear-gradient(135deg,#34d399,#10b981)}
    .bg-pink{background:linear-gradient(135deg,#fb7185,#db2777)}
    .bg-orange{background:linear-gradient(135deg,#fb923c,#f59e0b)}
    .bg-red{background:linear-gradient(135deg,#fb7185,#ef4444)}
    .bg-purple{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
    .bg-indigo{background:linear-gradient(135deg,#60a5fa,#6366f1)}

    /* Steps */
    .step-line{
      position:relative;
      margin-top:42px;
    }
    .step-line:before{
      content:"";
      position:absolute;
      left:8%;
      right:8%;
      top:28px;
      height:2px;
      background: rgba(148,163,184,.18);
    }
    .step{
      position:relative;
      padding:26px 18px;
      text-align:center;
    }
    .step .snum{
      position:absolute;
      top:-12px;
      left:50%;
      transform:translateX(-50%);
      width:32px;height:32px;border-radius:999px;
      background: linear-gradient(90deg,#12b7ff,#16f2ff);
      color:#00131a;
      font-weight:900;
      display:flex;align-items:center;justify-content:center;
      box-shadow: 0 10px 20px rgba(20,184,255,.22);
      font-size:12px;
    }
    .step .sicon{
      width:64px;height:64px;border-radius:18px;
      margin:0 auto 14px;
      display:flex;align-items:center;justify-content:center;
      border:1px solid rgba(148,163,184,.20);
      background: rgba(2,6,23,.35);
      color:#4dd6ff;
      font-size:22px;
    }
    .step h6{font-weight:900; margin:0 0 8px}
    .step p{color:var(--muted); margin:0; line-height:1.6}

    /* Testimonials */
    .stars{color:#22d3ee; letter-spacing:2px; font-size:12px}
    .quote{
      color:#cfe2ff;
      opacity:.92;
      line-height:1.75;
      font-size:14px;
      margin: 10px 0 18px;
    }
    .person{
      display:flex; align-items:center; gap:12px;
      margin-top:10px;
    }
    .avatar{
      width:46px;height:46px;border-radius:999px;
      background: rgba(148,163,184,.18);
      border: 1px solid rgba(148,163,184,.24);
      display:flex; align-items:center; justify-content:center;
      color:#dbe5f4;
      font-weight:800;
    }
    .pname{font-weight:900; margin:0}
    .prole{color:var(--muted); font-size:12px; margin:0}

    .metrics-bar{
      margin-top:28px;
      padding:26px;
      display:flex; gap:26px; justify-content:space-between; flex-wrap:wrap;
    }
    .metric{min-width: 170px; text-align:center}
    .metric .mnum{font-weight:900; font-size:28px; color:#4dd6ff}
    .metric .mlbl{color:var(--muted); font-size:12px}

    /* CTA banner */
    .cta-banner{
      padding:70px 26px;
      border-radius: 26px;
      background:
        radial-gradient(600px 320px at 30% 45%, rgba(20,184,255,.22), transparent 65%),
        radial-gradient(620px 360px at 75% 70%, rgba(168,85,247,.22), transparent 70%),
        rgba(11,18,32,.55);
      border: 1px solid rgba(148,163,184,.18);
      box-shadow: var(--shadow);
      text-align:center;
    }

    /* Footer */
    footer{padding:56px 0 34px}
    .footer-title{font-weight:900}
    .f-link{color:var(--muted); text-decoration:none}
    .f-link:hover{color:#fff}
    .social a{
      width:36px;height:36px;border-radius:10px;
      display:inline-flex;align-items:center;justify-content:center;
      border:1px solid rgba(148,163,184,.22);
      background: rgba(2,6,23,.25);
      color:#dbe5f4;
      margin-right:10px;
      text-decoration:none;
    }
    .social a:hover{background: rgba(2,6,23,.45)}
    


/* ===== PROGRAM CARDS ENHANCEMENT ===== */

.program-card {
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* .program-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20,184,255,.18),
    rgba(168,85,247,.18)
  );
  opacity: 0;
  transition: opacity .35s ease;
} */
.program-card::before{
  pointer-events:none;
}
.program-card > *{
  position:relative;
  z-index:2;
}
.program-card:hover::before {
  opacity: 1;
}

.program-card:hover {
 transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.75);
  border-color: rgba(20,184,255,.45);
}

/* Product badge */
.program-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  background: rgba(20,184,255,.15);
  color: #7dd3fc;
  border: 1px solid rgba(20,184,255,.35);
}

/* Institutional badge */
.program-badge.inst {
  background: rgba(251,191,36,.18);
  color: #fde68a;
  border-color: rgba(251,191,36,.45);
}

/* Program title */
.program-title {
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* Description */
.program-desc {
  color: #ffffff;
  opacity: .9;
  line-height: 1.7;
}

/* Feature list */
.program-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 14px;
}

.program-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: #e5e7eb;
  font-size: 14px;
}

.program-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #22d3ee;
  font-weight: 900;
}

/* Footer note */
.program-footer {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #93c5fd;
}

/* Stronger highlight for Pro program */
.program-card.pro {
  border-color: rgba(168,85,247,.45);
}

.program-card.pro .program-badge {
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.45);
  color: #ddd6fe;
}

 /* ===== WHAT YOU WILL DO – INDUSTRY IMMERSION ===== */

.work-env {
  position: relative;
}

.work-card {
  position: relative;
  height: 100%;
  padding: 30px;
  border-radius: 20px;
  background: rgba(11,18,32,.65);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  transition: all .35s ease;
}

.work-card:hover {
  transform: translateY(-8px);
  border-color: rgba(20,184,255,.45);
  box-shadow: 0 35px 90px rgba(0,0,0,.75);
}

.work-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5ff, #22d3ee);
  color: #00131a;
  font-size: 22px;
  margin-bottom: 16px;
}

.work-card h5 {
  font-weight: 900;
  margin-bottom: 10px;
}

.work-card p {
  color: #ffffff;
  opacity: .92;
  line-height: 1.75;
  margin-bottom: 14px;
}

.work-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #e5e7eb;
  font-size: 14px;
}

.work-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #22d3ee;
  font-weight: 900;
}

.work-highlight {
  margin-top: 22px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(20,184,255,.18),
    rgba(168,85,247,.18)
  );
  border: 1px solid rgba(148,163,184,.25);
  text-align: center;
}

.work-highlight strong {
  font-weight: 900;
  color: #ffffff;
}
  
  
 .hero-highlight {
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero-highlight span {
  display: inline-block;
}

@media (max-width: 768px) {
  .hero-highlight {
    font-size: 1rem;
  }
}
/* ================= APPLY MODAL ================= */
.modal-card{
  background:#fff;
  color:#111;
  border-radius:16px;
  padding:24px;
}
#applyModal .step { display:none }
#applyModal .step.active { display:block }
.option-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  margin-bottom:16px;
}


/* ===== MOBILE NUMBER UI ===== */

.mobile-field {
  position: relative;
}

.mobile-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
  display: block;
}

.mobile-input {
  display: flex;
  align-items: center;
  border: 1.5px solid #c7d2fe;
  border-radius: 10px;
  padding: 10px 12px;
  gap: 10px;
}

.mobile-input input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 15px;
}

.mobile-input .flag {
  font-size: 18px;
}

.mobile-input .code {
  font-weight: 600;
  color: #111;
}

/* ===== BUTTONS ===== */

.btn-otp {
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px;
}

.btn-otp:hover {
  background: #0b5ed7;
}

.btn-whatsapp {
  border: 2px solid #22c55e;
  color: #16a34a;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px;
  background: #ecfdf5;
}

.btn-whatsapp:hover {
  background: #dcfce7;
}

/* ===== OR DIVIDER ===== */

.or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.or-divider span {
  padding: 0 10px;
}

/* ===== OTP INPUT ===== */

.otp-input {
  font-size: 22px;
  letter-spacing: 6px;
  font-weight: 700;
}

.btn-outline-info {
  border-color: rgba(56,189,248,.6);
  color: #7dd3fc;
}
.btn-outline-info:hover {
  background: rgb(0, 128, 0);
}
/* ===== STICKY HEADER ===== */
header {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: all 0.3s ease;
}

/* When scrolled */
header.sticky {
  background: rgba(3, 10, 26, 0.85); /* dark glass */
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* ===== NAV LINK UNDERLINE EFFECT ===== */
.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 6px;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #22d3ee);
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}

/* ===== HERO GIF ===== */
.hero-gif {
  max-width: 100%;
  height: auto;
  animation: float 4s ease-in-out infinite;
}

/* subtle floating effect */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* ===== Modal Text Visibility Fix ===== */
#signinModal .modal-title {
	color: #0d6efd;          /* Bootstrap primary */
	font-weight: 700;
}

#signinModal .form-label {
	color: #212529;          /* Dark readable text */
	font-weight: 500;
}

#signinModal .form-control {
	background-color: #fff;
	color: #212529;
}

#signinModal .form-control::placeholder {
	color: #6c757d;
}
#signinModal .modal-content {
	background: #ffffff;
}

#signinModal .form-label,
#signinModal .modal-title {
	color: #111 !important;
}
#signinModal .form-label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
/* ================= MOBILE HERO FIX ================= */
@media (max-width: 768px){

  .hero-title{
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.2;
  }

  .hero-sub{
    font-size:14px;
    padding: 0 12px;
  }

  .hero-actions{
    flex-direction: column;
    gap: 12px;
  }

  .mini-stats{
    gap:20px;
  }
}
@media (max-width: 576px){
  section{
    padding: 80px 0;
  }
}

.navbar-logo{
  height: 80px;
}

@media (max-width:768px){
  .navbar-logo{
    height: 50px;
  }
}
@media (max-width:576px){
  .modal-dialog{
    margin: 12px;
  }
}
/* ================= Progrss  ================= */
/* ==========================================
   FULL SCREEN TRANSFORMATION TIMELINE
========================================== */

/* ==========================================
   HORIZONTAL PROCESS FLOW WITH ARROWS
========================================== */

.process-flow-section{
  padding:120px 0;
  position:relative;
}

/* Subtle glow background */
.process-flow-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 300px at 50% 20%, rgba(20,184,255,.08), transparent 70%);
  pointer-events:none;
}

.process-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
}

/* Step wrapper */
.process-step{
  flex:1;
  min-width:220px;
  max-width:260px;
}

/* Step card */
.step-card{
  position:relative;
  padding:30px 20px;
  text-align:center;
  border-radius:18px;
  transition:all .35s ease;
}

.step-card:hover{
  transform:translateY(-8px);
  border-color:rgba(20,184,255,.5);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}

/* Step number badge */
.step-number{
  display:inline-block;
  margin-bottom:12px;
  background:linear-gradient(135deg,#14b8ff,#a855f7);
  color:#00131a;
  font-weight:900;
  padding:8px 16px;
  border-radius:50px;
  font-size:13px;
  box-shadow:0 12px 25px rgba(20,184,255,.4);
}

/* Typography */
.step-card h6{
  font-weight:900;
  font-size:16px;
  margin-bottom:10px;
}

.step-card p{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

/* Arrow styling */
.process-arrow{
  font-size:22px;
  color:#4dd6ff;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:arrowPulse 2s infinite ease-in-out;
}

@keyframes arrowPulse{
  0%{ transform:translateX(0); opacity:0.7; }
  50%{ transform:translateX(6px); opacity:1; }
  100%{ transform:translateX(0); opacity:0.7; }
}

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

@media (max-width:992px){

  .process-flow{
    flex-direction:column;
  }

  .process-arrow{
    transform:rotate(90deg);
    animation:none;
    margin:10px 0;
  }
}
/* ==========================================
   PROCESS CARD – SUBTLE MULTICOLOR GLOW
========================================== */

/* Base glow */
.process-flow-section .step-card{
  position: relative;
  border: 1px solid rgba(255,255,255,.06);
  transition: all .35s ease;
}

/* Subtle outer glow */
.process-flow-section .step-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  background: linear-gradient(
    90deg,
    rgba(0,198,255,.4),
    rgba(0,255,136,.4),
    rgba(255,165,0,.4)
  );
  filter: blur(18px);
  opacity:0;
  transition:opacity .35s ease;
  z-index:-1;
}

/* Hover effect */
.process-flow-section .step-card:hover::after{
  opacity:.35;
}

/* Slight lift on hover */
.process-flow-section .step-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
/* ==========================================
   AUTO FLOWING GLOW – PROCESS STEPS
========================================== */

.process-flow-section .step-card{
  position: relative;
  transition: transform .3s ease;
}

/* Glow layer */
.process-flow-section .step-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  background: linear-gradient(
    90deg,
    rgba(0,198,255,.5),
    rgba(0,255,136,.5),
    rgba(255,165,0,.5)
  );
  filter: blur(18px);
  opacity:0;
  transition:opacity .6s ease;
  z-index:-1;
}

/* Active glowing card */
.process-flow-section .step-card.active::after{
  opacity:.45;
}

/* Slight lift */
.process-flow-section .step-card.active{
  transform: translateY(-6px);
}


/* ==========================================
   WHY THIS ISN'T TRAINING – ENHANCED CARDS
========================================== */

#program{
  position:relative;
  padding-top:120px;
  padding-bottom:120px;
}

/* Subtle background energy */
#program::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 300px at 30% 10%, rgba(20,184,255,.08), transparent 70%),
    radial-gradient(700px 400px at 80% 90%, rgba(168,85,247,.08), transparent 70%);
  pointer-events:none;
}

/* Enhanced feature card */
#program .feature-card{
  position:relative;
  padding:32px;
  border-radius:20px;
  transition:all .4s cubic-bezier(.22,.61,.36,1);
  border:1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  overflow:hidden;
}

/* Light reflection effect */
#program .feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.05),
    transparent
  );
  transition:all .8s ease;
}

/* Subtle multicolor glow layer */
#program .feature-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  background:linear-gradient(
    90deg,
    rgba(0,198,255,.4),
    rgba(0,255,136,.3),
    rgba(168,85,247,.4)
  );
  filter:blur(18px);
  opacity:0;
  transition:opacity .4s ease;
  z-index:-1;
}

/* Hover state */
#program .feature-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  border-color:rgba(20,184,255,.4);
}

#program .feature-card:hover::after{
  opacity:.35;
}

#program .feature-card:hover::before{
  left:100%;
}

/* Icon enhancement */
#program .icon-box{
  width:56px;
  height:56px;
  border-radius:16px;
  font-size:20px;
  transition:all .35s ease;
  background:rgba(20,184,255,.12);
  border:1px solid rgba(20,184,255,.25);
}

#program .feature-card:hover .icon-box{
  background:linear-gradient(135deg,#14b8ff,#a855f7);
  color:#00131a;
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 15px 30px rgba(20,184,255,.35);
}

/* Title */
#program .feature-card h5{
  font-weight:900;
  margin-bottom:12px;
  font-size:18px;
}

/* Paragraph */
#program .feature-card p{
  color:var(--muted);
  line-height:1.75;
  font-size:14px;
}

/* Mobile improvement */
@media (max-width:768px){
  #program .feature-card{
    padding:24px;
  }
}


/* ==========================================
   CAREER TRACKS – PREMIUM ENHANCEMENT
========================================== */

#tracks{
  position:relative;
  padding-top:120px;
  padding-bottom:120px;
}

/* Subtle background gradient energy */
#tracks::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 300px at 20% 10%, rgba(168,85,247,.08), transparent 70%),
    radial-gradient(800px 400px at 80% 90%, rgba(20,184,255,.08), transparent 70%);
  pointer-events:none;
}

/* Track card base */
#tracks .feature-card{
  position:relative;
  padding:30px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.05);
  transition:all .4s cubic-bezier(.22,.61,.36,1);
  overflow:hidden;
  backdrop-filter:blur(6px);
}

/* Soft gradient glow layer */
#tracks .feature-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  background:linear-gradient(
    135deg,
    rgba(20,184,255,.4),
    rgba(168,85,247,.4)
  );
  filter:blur(20px);
  opacity:0;
  transition:opacity .4s ease;
  z-index:-1;
}

/* Hover lift */
#tracks .feature-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  border-color:rgba(20,184,255,.4);
}

#tracks .feature-card:hover::after{
  opacity:.35;
}

/* Icon enhancement */
#tracks .track-ic{
  width:60px;
  height:60px;
  border-radius:18px;
  font-size:22px;
  transition:all .35s ease;
}

/* Icon hover animation */
#tracks .feature-card:hover .track-ic{
  transform:scale(1.1) rotate(6deg);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
}

/* Title stronger */
#tracks .feature-card h5{
  font-weight:900;
  font-size:18px;
  margin-top:10px;
  margin-bottom:12px;
}

/* Paragraph */
#tracks .feature-card p{
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

/* Subtle light sweep */
#tracks .feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.05),
    transparent
  );
  transition:.8s;
}

#tracks .feature-card:hover::before{
  left:100%;
}

/* Mobile spacing improvement */
@media (max-width:768px){
  #tracks .feature-card{
    padding:24px;
  }
}


/*===============================================================================*/

/* ==========================================
   3D NETWORK BACKGROUND
========================================== */

/* ==========================================
   SUBTLE 3D NETWORK (BELOW HEADER ONLY)
========================================== */

#network-bg{
  position:fixed;
  top:80px; /* adjust if header height changes */
  left:0;
  width:100%;
  height:calc(100vh - 80px);
  z-index:-2;
  pointer-events:none;
  background:transparent;
}

/* ================= FIXED HEADER ================= */
/* ==========================================
   PREMIUM SAAS NAVBAR – EDURA
========================================== */

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  transition:all .35s ease;
  padding:14px 0;
}

/* Glass container */
header .container{
  background:rgba(8,12,22,.65);
  backdrop-filter:blur(14px);
  border-radius:18px;
  padding:10px 24px;
  border:1px solid rgba(255,255,255,.06);
  transition:all .35s ease;
}

/* Multicolor gradient border glow */
header .container::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  background:linear-gradient(
    90deg,
    rgba(0,198,255,.5),
    rgba(168,85,247,.5),
    rgba(0,255,136,.4)
  );
  filter:blur(18px);
  opacity:0;
  transition:opacity .4s ease;
  z-index:-1;
}

/* Hover glow */
header:hover .container::before{
  opacity:.35;
}

/* Navbar links */
.navbar-nav .nav-link{
  font-weight:600;
  color:#cbd5e1 !important;
  position:relative;
  transition:all .3s ease;
}

/* Premium underline animation */
.navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,#38bdf8,#a855f7);
  transition:width .3s ease;
}

.navbar-nav .nav-link:hover{
  color:#ffffff !important;
}

.navbar-nav .nav-link:hover::after{
  width:100%;
}

/* Right buttons */
.btn-outline-info{
  border:1px solid rgba(56,189,248,.6);
  color:#7dd3fc;
  font-weight:600;
}

.btn-outline-info:hover{
  background:linear-gradient(90deg,#14b8ff,#22d3ee);
  color:#00131a;
  border-color:transparent;
}

.btn-brand{
  box-shadow:0 12px 30px rgba(20,184,255,.25);
  transition:all .3s ease;
}

.btn-brand:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 45px rgba(20,184,255,.4);
}

/* Shrink on scroll */
header.scrolled{
  padding:8px 0;
}

header.scrolled .container{
  padding:6px 20px;
  border-radius:14px;
}


/* Add space for fixed header */

/* ===========================
   FUTURISTIC AI DARK NEON
=========================== */

.ai-modal {
  background: rgba(8, 12, 25, 0.95);
  backdrop-filter: blur(30px);
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow:
    0 0 40px rgba(99,102,241,0.25),
    0 0 80px rgba(139,92,246,0.15);
  color: #e5e7eb;
  overflow: hidden;
}

.ai-header {
  padding-top: 20px;
}

.ai-title {
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.5px;
}

.ai-subtitle {
  font-size: 12px;
  color: #8b5cf6;
}

/* Center text */
.ai-text-center {
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 20px;
}

/* Input container */

.ai-input-group {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
}

.ai-prefix {
  margin-right: 8px;
  color: #8b5cf6;
  font-weight: 500;
}

/* Inputs */

.ai-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: 0.3s ease;
}

.ai-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.3),
              0 0 15px rgba(139,92,246,0.3);
}

/* OTP */

.ai-otp {
  width: 100%;
  text-align: center;
  font-size: 20px;
  letter-spacing: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
}

/* Neon Button */

.ai-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-weight: 600;
  color: white;
  transition: 0.3s ease;
  box-shadow: 0 0 20px rgba(139,92,246,0.4);
}

.ai-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 30px rgba(139,92,246,0.6),
    0 0 60px rgba(99,102,241,0.3);
}

/* Neon Link */

.ai-link {
  color: #8b5cf6;
  font-size: 13px;
  text-decoration: none;
}

.ai-link:hover {
  text-decoration: underline;
}
/* Fix dropdown text visibility in dark theme */

.ai-input option {
  background-color: #0f172a;   /* dark background */
  color: #ffffff;              /* white text */
}

/* Also improve select appearance */
.ai-input {
  color: #ffffff;
  background-color: rgba(255,255,255,0.04);
}
.ai-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
/* ================= GET DETAILS BUTTON ================= */
.btn-get-details{
  font-size:.82rem;
  padding:.55rem .8rem;
  border-radius:10px;
  font-weight:600;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:none;
  color:#fff;
  letter-spacing:.3px;
  transition:all .25s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.btn-get-details:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  filter:brightness(1.08);
}

.btn-get-details:active{
  transform:scale(.98);
}
/* ================= GLASS MODAL ================= */
.glass-modal{
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  color:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.modal-sub{
  font-size:.85rem;
  opacity:.7;
  text-align:center;
  margin-bottom:1rem;
}

/* ================= INPUT ================= */
.glass-input-group{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.06);
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.glass-input-group span{
  padding:.65rem .8rem;
  opacity:.7;
  font-weight:600;
}

.glass-input-group input{
  flex:1;
  background:transparent;
  border:none;
  padding:.65rem;
  color:#fff;
  outline:none;
}

/* ================= OTP ================= */
.glass-otp{
  width:100%;
  text-align:center;
  letter-spacing:.45rem;
  font-size:1.3rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  padding:.6rem;
  color:#fff;
}