/* =========================================================
   TechPanda — Shared Course Page Stylesheet
   Theme: Navy / Teal (matched from itechpanda homepage)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Navy scale */
  --navy-950:#060b1f;
  --navy-900:#0a1230;
  --navy-850:#0c1838;
  --navy-800:#0d1b3e;
  --navy-700:#142a5c;
  --navy-600:#1c3a78;
  --indigo-600:#1e3a8a;
  --indigo-700:#172e6e;

  /* Teal scale */
  --teal-300:#7eead0;
  --teal-400:#2dd4bf;
  --teal-500:#14b8a6;
  --teal-600:#0d9488;
  --teal-glow:rgba(45,212,191,.18);

  /* Neutrals */
  --white:#ffffff;
  --gray-100:#eef1f8;
  --gray-300:#c4cce3;
  --gray-400:#9aa5c4;
  --gray-500:#717da3;
  --gray-700:#3c4666;
  --ink:#0b1330;

  --pink-500:#ec4899;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-full:999px;

  --shadow-card:0 10px 30px -12px rgba(10,20,50,.35);
  --shadow-pop:0 18px 45px -15px rgba(10,20,50,.45);

  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--gray-700);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;border:none;cursor:pointer;background:none;}
:focus-visible{outline:3px solid var(--teal-400);outline-offset:2px;}
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{font-family:var(--font-head);color:#1417b8;line-height:1.18;}

/* =================== UTILITY TOP BAR =================== */
.topbar{background:var(--navy-950);color:var(--gray-300);font-size:13.5px;}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:9px 24px;flex-wrap:wrap;gap:8px;}
.topbar-left{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.topbar-left span{display:flex;align-items:center;gap:7px;white-space:nowrap;}
.topbar-right{display:flex;align-items:center;gap:14px;color:var(--gray-400);white-space:nowrap;}
.topbar-right .divider{color:var(--navy-700);}
.dot-teal{color:var(--teal-400);}
.dot-pink{color:var(--pink-500);}

/* =================== HEADER / NAV =================== */
.site-header{background:var(--white);box-shadow:0 1px 0 rgba(10,20,50,.06);position:sticky;top:0;z-index:50;}
.container.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;}
.logo{font-family:var(--font-head);font-weight:800;font-size:24px;color:var(--ink);}

.logo span{color:var(--teal-500);}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-weight:500;font-size:15.5px;color:var(--navy-850);transition:.2s;}
.nav-links a:hover{color:var(--teal-600);}
.nav-links a.active{color:var(--ink);border-color:var(--teal-400);}
.nav-actions{display:flex;align-items:center;gap:18px;}
.menu-toggle{display:none;flex-direction:column;gap:5px;}
.menu-toggle span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;}

/* =================== BUTTONS =================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:15px;padding:13px 26px;border-radius:var(--radius-full);transition:transform .15s, box-shadow .15s, background .15s;}
.btn:active{transform:translateY(1px);}
.btn-teal{background:var(--teal-500);color:var(--navy-950);box-shadow:0 10px 24px -8px var(--teal-glow);}
.btn-teal:hover{background:var(--teal-400);}
.btn-outline{border:1.5px solid rgba(255,255,255,.55);color:var(--white);}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08);}
.btn-navy{background:var(--indigo-600);color:var(--white);}
.btn-navy:hover{background:var(--indigo-700);}
.btn-block{width:100%;}
.btn-sm{padding:10px 20px;font-size:14px;}

/* =================== HERO =================== */
.hero{
  position:relative;
     background: linear-gradient(135deg, rgb(15, 31, 92) 0%, rgb(26, 58, 143) 30%, rgb(30, 95, 116) 65%, rgb(15, 122, 90) 100%);
  overflow:hidden;
  padding:46px 0 60px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 85% 15%, rgba(45,212,191,.25), transparent 45%),
             radial-gradient(circle at 10% 90%, rgba(45,212,191,.12), transparent 40%);
  pointer-events:none;
}
.breadcrumb{position:relative;z-index:1;display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--gray-400);margin-bottom:22px;}
.breadcrumb a{color:var(--gray-300);}
.breadcrumb a:hover{color:var(--teal-300);}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--teal-300);}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.35);color:var(--teal-300);font-weight:600;font-size:13px;letter-spacing:.04em;padding:9px 18px;border-radius:var(--radius-full);margin-bottom:22px;}
.hero h1{color:var(--white);font-size:44px;font-weight:700;margin-bottom:18px;letter-spacing:-.01em;}
.hero h1 .accent{color:#31e864e0;}
.hero p.lead{color:var(--gray-300);font-size:16.5px;max-width:540px;margin-bottom:26px;}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}

.quick-facts{display:flex;flex-wrap:wrap;gap:12px;}
.quick-facts li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--gray-100);font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:var(--radius-full);}
.quick-facts li b{color:var(--teal-300);font-weight:600;}

/* Lead form card */
.lead-card{background:rgba(8,16,42,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-pop);}
.lead-card h3{color:var(--white);font-size:21px;margin-bottom:6px;}
.lead-card .sub{color:var(--gray-400);font-size:13.5px;margin-bottom:20px;}
.field{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--white);font-family:var(--font-body);font-size:14.5px;padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:13px;}
.field::placeholder{color:var(--gray-400);}
select.field{appearance:none;color:var(--gray-300);}
select.field option{color:var(--ink);}
.lead-card .btn{margin-top:6px;}
.form-note{display:none;color:var(--teal-300);font-size:13px;margin-top:12px;text-align:center;}
.form-note.show{display:block;}

/* =================== TRUST STRIP =================== */
.trust-strip{background:var(--navy-900);padding:26px 0;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:18px;}
.trust-grid .num{font-family:var(--font-head);color:var(--teal-400);font-size:30px;font-weight:700;}
.trust-grid .lbl{color:var(--gray-400);font-size:13px;margin-top:4px;}

/* =================== SECTION COMMON =================== */
.section{padding:72px 0;}
.section-alt{background:#f6f8fc;}
.section-head{max-width:680px;margin:0 auto 44px;text-align:center;}
.eyebrow{display:inline-block;color:var(--teal-600);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.section-head h2{font-size:32px;font-weight:700;margin-bottom:12px;}
.section-head p{color:var(--gray-500);font-size:15.5px;}

/* =================== HIGHLIGHTS GRID =================== */
.highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.highlight-card{background:var(--white);border:1px solid #e7ebf5;border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow-card);}
.highlight-card .ic{width:46px;height:46px;border-radius:12px;background:#0a0d6e;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;}
.highlight-card h4{font-size:17px;margin-bottom:8px;}
.highlight-card p{color:var(--gray-500);font-size:14px;}

/* =================== CURRICULUM ACCORDION =================== */
.curriculum-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.acc-item{border:1px solid #e3e8f3;border-radius:var(--radius-md);overflow:hidden;background:var(--white);}
.acc-head{display:flex;align-items:center;gap:16px;width:100%;padding:18px 22px;text-align:left;}
.acc-num{font-family:var(--font-head);font-weight:700;color:var(--teal-500);font-size:14px;min-width:34px;}
.acc-title{flex:1;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:15.5px;}
.acc-plus{font-size:20px;color:var(--gray-400);transition:transform .2s;}
.acc-item.open .acc-plus{transform:rotate(45deg);color:var(--teal-500);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.acc-item.open .acc-body{max-height:320px;}
.acc-body-inner{padding:0 22px 20px 72px;color:var(--gray-500);font-size:14px;}
.acc-body-inner ul{display:flex;flex-direction:column;gap:6px;}
.acc-body-inner li::before{content:"– ";color:var(--teal-500);}

/* =================== TOOLS CHIPS =================== */
.tools-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:880px;margin:0 auto;}
.tool-chip{background:var(--white);border:1px solid #e3e8f3;color:var(--navy-850);font-weight:600;font-size:14px;padding:11px 20px;border-radius:var(--radius-full);box-shadow:var(--shadow-card);}

/* =================== ELIGIBILITY =================== */
.eligibility-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:980px;margin:0 auto;}
.elig-box h4{font-size:18px;margin-bottom:14px;}
.elig-box ul{display:flex;flex-direction:column;gap:10px;}
.elig-box li{display:flex;gap:10px;align-items:flex-start;color:var(--gray-700);font-size:14.5px;}
.elig-box li .chk{color:var(--teal-500);font-weight:700;}

/* =================== CAREER CARDS =================== */
.career-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.career-card{background:var(--navy-900);border-radius:var(--radius-md);padding:22px 18px;text-align:center;}
.career-card .role{color:var(--white);font-family:var(--font-head);font-weight:600;font-size:15px;}

/* =================== PROCESS STEPS =================== */
.process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.process-step{position:relative;background:var(--white);border:1px solid #e3e8f3;border-radius:var(--radius-md);padding:26px 18px;text-align:center;}
.process-step .pn{font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--teal-500);margin-bottom:10px;}
.process-step h4{font-size:14.5px;margin-bottom:6px;}
.process-step p{font-size:12.5px;color:var(--gray-500);}

/* =================== FAQ =================== */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid #e3e8f3;border-radius:var(--radius-md);background:var(--white);overflow:hidden;}
.faq-head{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 22px;text-align:left;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:15px;}
.faq-plus{font-size:20px;color:var(--gray-400);transition:transform .2s;}
.faq-item.open .faq-plus{transform:rotate(45deg);color:var(--teal-500);}
.faq-body{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-body{max-height:220px;}
.faq-body-inner{padding:0 22px 20px;color:var(--gray-500);font-size:14px;}

/* =================== CTA BANNER =================== */
.cta-banner{background:linear-gradient(120deg,var(--navy-900),var(--navy-700));text-align:center;padding:56px 0;}
.cta-banner h2{color:var(--white);font-size:27px;margin-bottom:10px;}
.cta-banner p{color:var(--gray-300);margin-bottom:26px;}
.cta-banner-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

/* =================== FOOTER =================== */
.site-footer{background:var(--navy-950);padding:56px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:40px;}
.footer-logo-box{display:inline-block;background:var(--white);border-radius:8px;padding:8px 14px;margin-bottom:16px;}
.footer-grid p{color:var(--gray-400);font-size:14px;margin-bottom:18px;padding: 10px 0px;}
.social-row{display:flex;gap:10px;}
.social-row a{width:36px;height:36px;border-radius:8px;background:var(--navy-800);color:var(--gray-300);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:.2s;}
.social-row a:hover{background:var(--teal-500);color:var(--navy-950);}
.footer-grid h5{color:var(--white);font-size:15.5px;margin-bottom:18px;}
.footer-grid .flinks{display:flex;flex-direction:column;gap:11px;}
.footer-grid .flinks a{color:var(--gray-400);font-size:14px;}
.footer-grid .flinks a:hover{color:var(--teal-400);}
.contact-list{display:flex;flex-direction:column;gap:14px;}
.contact-list li{display:flex;gap:10px;color:var(--gray-300);font-size:13.5px;align-items:flex-start;}
.contact-list .ic{color:var(--teal-400);margin-top:1px;}
.footer-bottom{border-top:1px solid var(--navy-800);padding:20px 0;display:flex;justify-content:space-between;color:var(--gray-500);font-size:13px;flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:var(--gray-500);}
.footer-bottom a:hover{color:var(--teal-400);}

/* =================== FLOATING ACTION BUTTONS =================== */
.fab-stack{position:fixed;right:20px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:60;}
.fab{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:13.5px;color:var(--white);padding:11px 18px;border-radius:var(--radius-full);box-shadow:var(--shadow-pop);}
.fab-call{background:#3b6ef0;}
.fab-whatsapp{background:#25c277;}
.fab-demo{background:var(--teal-500);color:var(--navy-950);}

/* =================== RESPONSIVE =================== */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;}
  .career-grid{grid-template-columns:repeat(2,1fr);}
  .process-row{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;background:var(--white);flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:90px 28px 28px;gap:22px;transform:translateX(100%);transition:transform .25s ease;box-shadow:-10px 0 40px rgba(0,0,0,.12);}
  .nav-links.open{transform:translateX(0);}
  .menu-toggle{display:flex;}
  .nav-actions .btn-navy{display:none;}
  .highlights-grid{grid-template-columns:1fr 1fr;}
  .eligibility-grid{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media (max-width:640px){
  .hero h1{font-size:32px;}
  .highlights-grid{grid-template-columns:1fr;}
  .career-grid{grid-template-columns:1fr 1fr;}
  .process-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .acc-body-inner{padding-left:22px;}
  .fab span.fab-label{display:none;}
  .fab{padding:13px;border-radius:50%;}
}

/* ============================================================
   TechPanda Tambaram — Lead Popup Styles
   ============================================================ */

:root{
  --navy-1:#11163a;
  --navy-2:#1b2358;
  --teal:#00d9b5;
  --text-light:#eef0fb;
  --text-muted:#9ba3c9;
  --form-bg:#fbfaf7;
  --form-text:#1b2358;
  --error:#ff6b6b;
  --success:#1f9d55;
}

.popup-overlay{
  position:fixed; inset:0;
  background:rgba(8,10,28,0.78);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center; justify-content:center;
  z-index:9999;
  padding:20px;
}
.popup-overlay.open{ display:flex; }

.popup-card{
  position:relative;
  width:100%; max-width:760px; max-height:90vh;
  display:grid; grid-template-columns:1fr 1.2fr;
  background:var(--form-bg);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  font-family:'Inter',sans-serif;
}

/* ── Close button (✕ top-right of the popup) ── */
.popup-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  border:none; background:rgb(20 19 58 / 97%);
  color:#fff; font-size:16px; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
}
.popup-close:hover{ background:rgba(3, 22, 133, 0.3); }

.popup-left{
  background:linear-gradient(160deg,var(--navy-1),var(--navy-2));
  color:var(--text-light);
  padding:38px 30px;
  display:flex; flex-direction:column; justify-content:center;
}
.popup-eyebrow{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fafafa; font-weight:700; margin-bottom:14px;
}
.popup-headline{
  font-family:'Sora',sans-serif;
  font-size:26px; font-weight:700; line-height:1.25;
  margin:0 0 12px;
}
.popup-sub{ font-size:14px; color:var(--text-muted); margin:0 0 14px; }
.popup-timer{
  display:inline-block;
  font-family:'Sora',sans-serif;
  font-size:30px; font-weight:800; letter-spacing:0.04em;
  color:#19d0d3;
  background:rgba(0,217,181,0.12);
  border:1px solid rgba(0,217,181,0.35);
  border-radius:12px;
  padding:8px 18px;
  margin-bottom:18px;
  animation:pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 rgba(0,217,181,0.0); }
  50%{ box-shadow:0 0 18px rgba(0,217,181,0.35); }
}
.popup-note{ font-size:13px; color:var(--text-muted); margin:0; }

.popup-right{ position:relative; display:flex; flex-direction:column; }
.popup-right-scroll{ padding:38px 30px; overflow-y:auto; max-height:90vh; }
.popup-form-title{
  font-family:'Sora',sans-serif;
  font-size:19px; font-weight:700;
  color:var(--form-text); margin:0 0 18px;
}
.popup-field{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.popup-field label{ font-size:13px; font-weight:600; color:var(--form-text); }
.popup-field input, .popup-field select{
  padding:11px 13px; border-radius:10px;
  border:1.5px solid #d8d6cd; font-size:14px;
  font-family:'Inter',sans-serif; color:var(--form-text);
  background:#fff;
}
.popup-field input:focus, .popup-field select:focus{
  outline:none; border-color:#0c255a;
  box-shadow:0 0 0 3px rgba(0,217,181,0.18);
}
.popup-field input.field-error, .popup-field select.field-error{ border-color:var(--error); }
.field-err{ font-size:12px; color:var(--error); display:none; margin-top:-2px; }

.popup-submit-btn{
  width:100%; padding:14px; margin-top:6px;
  border:none; border-radius:10px;
  background:#0c255a; color:#dedfe5;
  font-weight:700; font-size:15px; cursor:pointer;
  transition:transform 0.15s ease, opacity 0.15s ease;
}
.popup-submit-btn:hover{ transform:translateY(-1px); }
.popup-submit-btn:disabled{ opacity:0.7; cursor:not-allowed; transform:none; }

.popup-success{
  display:none; margin-top:14px;
  background:rgba(31,157,85,0.12);
  border:1px solid rgba(31,157,85,0.4);
  color:var(--success); font-weight:600; font-size:14px;
  padding:10px 12px; border-radius:10px;
}

.scroll-btn{
  display:none;
  position:absolute; right:14px; z-index:4;
  width:30px; height:30px; border-radius:50%;
  border:1px solid #d8d6cd; background:#fff;
  color:var(--form-text); font-size:14px; cursor:pointer;
}
.scroll-up{ top:10px; }
.scroll-down{ bottom:10px; }

/* ✅ FIX: on mobile, scroll the whole popup as ONE unit instead of a
   capped inner box — prevents the submit button / success message
   from being clipped and unreachable on short screens */
@media (max-width:680px){
  .popup-card{ grid-template-columns:1fr; max-height:92vh; overflow-y:auto; }
  .popup-left{ padding:26px 22px 18px;display: none; }
  .popup-right-scroll{ padding:22px; max-height:none; overflow-y:visible; }
  .scroll-btn{ display:none; } /* not needed once the whole card scrolls naturally */
}

@media (prefers-reduced-motion: reduce){
  .popup-timer{ animation:none; }
  .popup-submit-btn{ transition:none; }
}