/* ============================================================
   Namankan Career Point — Stylesheet
   Palette pulled from the brand's own poster identity:
   deep navy + warm gold + signal red, on a soft paper cream.
   ============================================================ */

:root{
  --navy-deep:#0a1f42;
  --navy:#123a73;
  --navy-soft:#1c4b8f;
  --gold:#e2a83c;
  --gold-light:#f6d68a;
  --red:#c62a2a;
  --pink-dark:#9d174d;
  --yellow:#f7c600;
  --blue-bright:#1d6fe0;
  --cream:#faf7f0;
  --paper:#fffdf8;
  --ink:#182233;
  --muted:#5c6579;
  --line:#e7e1d3;

  --accent-1:#e2a83c; /* gold */
  --accent-2:#c62a2a; /* red */
  --accent-3:#1c8f6b; /* teal-green */
  --accent-4:#3a67c4; /* blue */
  --accent-5:#8a4fc4; /* purple */

  /* RGB triplets (for rgba() transparent card backgrounds) */
  --accent-1-rgb:226,168,60;
  --accent-2-rgb:198,42,42;
  --accent-3-rgb:28,143,107;
  --accent-4-rgb:58,103,196;
  --accent-5-rgb:138,79,196;
  --navy-rgb:18,58,115;

  --font-display:'Poppins', 'Noto Sans Devanagari', sans-serif;
  --font-body:'Hind', 'Noto Sans Devanagari', sans-serif;

  --radius-s:6px;
  --radius-m:12px;
  --shadow-card:0 10px 24px -14px rgba(10,31,66,.35);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-deep);
  line-height:1.25;
  margin:0 0 .5em;
}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{padding:72px 0;}
.eyebrow-none{margin:0;} /* placeholder to keep no ALLCAPS labels rule */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.96rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--navy-deep);}
.btn-gold:hover{background:var(--gold-light);box-shadow:0 10px 22px -10px rgba(226,168,60,.7);}
.btn-outline-light{border-color:rgba(255,255,255,.7);color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-soft);}
.btn-outline-navy{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-outline-navy:hover{background:var(--navy);color:#fff;}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:#a91f1f;}
.btn-block{width:100%;}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.topbar{
  background:var(--navy-deep);
  color:#cdd8ee;
  font-size:.86rem;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:9px;
  padding-bottom:9px;
  gap:16px;
}
.topbar-contact{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.topbar-contact a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#cdd8ee;
  transition:color .15s ease;
}
.topbar-contact a:hover{color:var(--gold-light);}
.topbar-contact svg{flex-shrink:0;}
.topbar-social{display:flex;align-items:center;gap:10px;}
.topbar-social a{
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;
  color:#fff;
  transition:transform .15s ease, filter .15s ease;
}
.topbar-social a:hover{transform:translateY(-2px);filter:brightness(1.12);}
.topbar-social a:nth-child(1){background:#1877F2;}                 /* Facebook blue */
.topbar-social a:nth-child(2){background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);} /* Instagram gradient */
.topbar-social a:nth-child(3){background:#FF0000;}                 /* YouTube red */
.topbar-social a:nth-child(4){background:#25D366;}                 /* WhatsApp green */

/* ============================================================
   MAIN NAVIGATION
   ============================================================ */
.navbar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:200;
}
.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  padding-bottom:12px;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.brand img{
  width:54px;height:54px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--gold);
}
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--navy-deep);
  font-size:1.28rem;
  line-height:1.1;
}
.brand-name span{
  display:block;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.02em;
}

.nav-menu .menu-list{
  display:flex;
  align-items:center;
  gap:6px;
}
.menu-list li a{
  display:inline-block;
  padding:8px 14px;
  font-weight:600;
  font-size:.98rem;
  color:var(--ink);
  border-bottom:3px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.menu-list li:nth-child(1) a:hover,.menu-list li:nth-child(1) a.active{border-color:var(--accent-1);color:var(--navy-deep);}
.menu-list li:nth-child(2) a:hover,.menu-list li:nth-child(2) a.active{border-color:var(--accent-2);color:var(--navy-deep);}
.menu-list li:nth-child(3) a:hover,.menu-list li:nth-child(3) a.active{border-color:var(--accent-3);color:var(--navy-deep);}
.menu-list li:nth-child(4) a:hover,.menu-list li:nth-child(4) a.active{border-color:var(--accent-4);color:var(--navy-deep);}
.menu-list li:nth-child(5) a:hover,.menu-list li:nth-child(5) a.active{border-color:var(--accent-5);color:var(--navy-deep);}
.menu-list li:nth-child(6) a:hover,.menu-list li:nth-child(6) a.active{border-color:var(--accent-1);color:var(--navy-deep);}

.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-actions .btn{padding:10px 22px;font-size:.9rem;}

/* Mobile-only round login icon button — shown just before the hamburger toggle */
.nav-login-icon{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--pink-dark);
  color:#fff;
  flex-shrink:0;
  box-shadow:0 6px 14px -6px rgba(157,23,77,.65);
  transition:transform .18s ease, background .18s ease;
}
.nav-login-icon:hover{background:#7d1240;transform:translateY(-2px);}
.nav-login-icon svg{width:19px;height:19px;}

.nav-mobile-actions{
  display:none;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  height:3px;
  width:100%;
  background:var(--navy-deep);
  border-radius:3px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Mobile panel extras (hidden on desktop) */
.mobile-panel-extra{display:none;}
.mp-auth-row{display:none;}

/* Mobile menu close (X) button — hidden on desktop, shown inside the sliding panel on mobile */
.nav-close{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border:none;
  border-radius:50%;
  background:rgba(198,42,42,.1);
  color:var(--red);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
}
.nav-close:hover{background:rgba(198,42,42,.18);}

/* Dark backdrop shown behind the sliding mobile menu */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,31,66,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, visibility .32s;
  z-index:140;
}
.nav-overlay.is-open{opacity:1;visibility:visible;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:linear-gradient(150deg,var(--navy-deep) 0%,var(--navy) 62%,var(--navy-soft) 100%);
  color:#fff;
  padding:64px 0 0;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:40px;
}
.hero-copy{
  position:relative;
  z-index:1;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(226,168,60,.15);
  border:1px solid rgba(226,168,60,.5);
  color:var(--gold-light);
  padding:7px 16px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  margin-bottom:22px;
}
.hero h1{
  color:#fff;
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:700;
  margin-bottom:16px;
}
.hero h1 em{
  font-style:normal;
  color:var(--gold-light);
}
.hero p.lead{
  color:#d6dfef;
  font-size:1.08rem;
  max-width:52ch;
  margin-bottom:30px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px;}
.hero-stats{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:26px;
}
.hero-stats div strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--gold-light);
}
.hero-stats div span{font-size:.85rem;color:#b9c5de;}

.hero-media{
  position:relative;
  display:flex;
  justify-content:center;
  align-self:end;
}
.hero-media img{
  width:min(360px,88%);
  border-radius:18px 18px 0 0;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
}
.hero-media .hero-tag{
  position:absolute;
  top:14px;
  left:-6px;
  background:var(--paper);
  color:var(--navy-deep);
  padding:10px 16px;
  border-radius:var(--radius-m);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.9rem;
  box-shadow:var(--shadow-card);
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.trust-strip .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:18px;
  padding-top:22px;
  padding-bottom:22px;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  color:var(--navy-deep);
}
.trust-item svg{color:var(--gold);flex-shrink:0;}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.section-head{
  max-width:640px;
  margin-bottom:44px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-kicker{
  display:inline-block;
  color:var(--red);
  font-weight:700;
  font-size:.9rem;
  margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.section-head p{color:var(--muted);font-size:1.02rem;}

/* ============================================================
   ABOUT
   ============================================================ */
.about .container{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:56px;
  align-items:center;
}
.about-content{
  display:flex;
  flex-direction:column;
}
.about-media{position:relative;}
.about-media img{
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
}
.about-media .about-badge{
  position:absolute;
  bottom:-22px;
  right:-18px;
  background:var(--navy-deep);
  color:#fff;
  padding:18px 22px;
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
}
.about-badge strong{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--gold-light);}
.about-badge span{font-size:.8rem;color:#c8d3e8;}
.about-list{margin-top:22px;display:grid;gap:14px;}
.about-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:.98rem;
  color:var(--ink);
}
.about-list svg{color:var(--accent-3);flex-shrink:0;margin-top:3px;}

/* ============================================================
   COURSES GRID
   ============================================================ */
.courses{background:var(--paper);}
.course-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.course-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px 20px;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.course-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-card);
  background:#fff;
}
.course-card .ico{
  width:46px;height:46px;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--navy-deep);
  color:var(--gold-light);
}
.course-card h4{font-size:1.02rem;margin-bottom:4px;}
.course-card p{font-size:.84rem;color:var(--muted);margin:0;}

/* ============================================================
   FEATURED PROGRAMS (BLIS / PGDCA / MLIS)
   ============================================================ */
.featured{background:var(--navy-deep);color:#fff;}
.featured .section-head h2{color:#fff;}
.featured .section-head p{color:#b9c5de;}
.featured-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.featured-card{
  background:rgba(var(--accent-1-rgb),.08);
  border:1px solid rgba(var(--accent-1-rgb),.35);
  border-radius:var(--radius-m);
  padding:30px 26px;
  backdrop-filter:blur(6px);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.featured-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px -18px rgba(0,0,0,.45);}
.featured-card:nth-child(2){background:rgba(var(--accent-3-rgb),.08);border-color:rgba(var(--accent-3-rgb),.35);}
.featured-card:nth-child(3){background:rgba(var(--accent-5-rgb),.08);border-color:rgba(var(--accent-5-rgb),.35);}
.featured-card .tag{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.4rem;
  color:var(--navy-deep);
  background:var(--gold);
  padding:4px 14px;
  border-radius:var(--radius-s);
  margin-bottom:16px;
}
.featured-card:nth-child(2) .tag{background:var(--accent-3);color:#fff;}
.featured-card:nth-child(3) .tag{background:var(--accent-5);color:#fff;}
.featured-card h3{color:#fff;font-size:1.15rem;}
.featured-card p{color:#c8d3e8;font-size:.94rem;}
.featured-card .goal{
  font-weight:700;
  color:var(--gold-light);
}

/* ============================================================
   WHY US
   ============================================================ */
.why-us{background:var(--cream);}
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.why-card{
  text-align:center;
  padding:20px 14px;
  border-radius:var(--radius-m);
  background:rgba(var(--accent-1-rgb),.07);
  border:1px solid rgba(var(--accent-1-rgb),.25);
  transition:transform .18s ease;
}
.why-card:hover{transform:translateY(-4px);}
.why-card:nth-child(1){background:rgba(var(--accent-1-rgb),.07);border-color:rgba(var(--accent-1-rgb),.25);}
.why-card:nth-child(2){background:rgba(var(--accent-2-rgb),.07);border-color:rgba(var(--accent-2-rgb),.25);}
.why-card:nth-child(3){background:rgba(var(--accent-3-rgb),.07);border-color:rgba(var(--accent-3-rgb),.25);}
.why-card:nth-child(4){background:rgba(var(--accent-4-rgb),.07);border-color:rgba(var(--accent-4-rgb),.25);}
.why-card .ico{
  width:64px;height:64px;
  margin:0 auto 16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-light);
  color:var(--navy-deep);
}
.why-card:nth-child(1) .ico{background:rgba(var(--accent-1-rgb),.2);color:#8a6416;}
.why-card:nth-child(2) .ico{background:rgba(var(--accent-2-rgb),.16);color:var(--accent-2);}
.why-card:nth-child(3) .ico{background:rgba(var(--accent-3-rgb),.16);color:var(--accent-3);}
.why-card:nth-child(4) .ico{background:rgba(var(--accent-4-rgb),.16);color:var(--accent-4);}
.why-card h4{font-size:1.02rem;}
.why-card p{font-size:.88rem;color:var(--muted);}

/* ============================================================
   UNIVERSITIES MARQUEE
   ============================================================ */
.universities{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.uni-track-wrap{overflow:hidden;position:relative;margin-top:10px;}
.uni-track-wrap::before,.uni-track-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:70px;z-index:2;
}
.uni-track-wrap::before{left:0;background:linear-gradient(90deg,var(--paper),transparent);}
.uni-track-wrap::after{right:0;background:linear-gradient(270deg,var(--paper),transparent);}
.uni-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation:scroll-left 38s linear infinite;
}
.uni-track:hover{animation-play-state:paused;}
.uni-chip{
  flex-shrink:0;
  padding:14px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.88rem;
  color:var(--navy-deep);
  background:var(--cream);
  white-space:nowrap;
}
@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============================================================
   OTHER COURSES STRIP
   ============================================================ */
.other-courses{background:var(--cream);}
.other-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.other-card{
  background:rgba(var(--accent-1-rgb),.07);
  border-left:4px solid var(--gold);
  border-radius:var(--radius-s);
  padding:22px 24px;
  box-shadow:var(--shadow-card);
  transition:transform .18s ease, background .18s ease;
}
.other-card:hover{transform:translateY(-4px);}
.other-card:nth-child(2){border-left-color:var(--red);background:rgba(var(--accent-2-rgb),.07);}
.other-card:nth-child(3){border-left-color:var(--accent-3);background:rgba(var(--accent-3-rgb),.07);}
.other-card h4{font-size:1.05rem;margin-bottom:6px;}
.other-card p{font-size:.88rem;color:var(--muted);margin:0;}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  background:linear-gradient(120deg,var(--red),#8f1f1f);
  color:#fff;
}
.cta-band .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.cta-band h2{color:#fff;margin:0;font-size:1.5rem;}
.cta-band p{margin:6px 0 0;color:#f6d3d3;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact .container{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
}
.contact-info-card{
  background:var(--navy-deep);
  color:#fff;
  border-radius:var(--radius-m);
  padding:34px 30px;
}
.contact-info-card h3{color:#fff;}
.contact-info-card .row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:20px;
}
.contact-info-card .row svg{color:var(--gold-light);flex-shrink:0;margin-top:2px;}
.contact-info-card .row strong{display:block;font-family:var(--font-display);font-size:.86rem;color:#b9c5de;font-weight:500;}
.contact-info-card .row span,.contact-info-card .row a{color:#fff;font-size:.98rem;}
.contact-info-card .social-row{display:flex;gap:12px;margin-top:26px;}
.contact-info-card .social-row a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.contact-info-card .social-row a:hover{background:var(--gold);color:var(--navy-deep);}

.contact-form{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:34px 30px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1 / -1;}
.form-grid label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--navy-deep);
  margin-bottom:6px;
}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  font-family:var(--font-body);
  font-size:.96rem;
  background:var(--cream);
  color:var(--ink);
}
.form-grid textarea{resize:vertical;min-height:90px;}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
  background:#fff;
}
.contact-form .btn{margin-top:6px;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--navy-deep);
  color:#c8d3e8;
  padding-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{display:flex;gap:12px;align-items:center;margin-bottom:16px;}
.footer-brand img{width:48px;height:48px;border-radius:50%;border:2px solid var(--gold);}
.footer-brand strong{font-family:var(--font-display);color:#fff;font-size:1.1rem;display:block;}
.footer-brand span{font-size:.76rem;color:#9fb0cc;}
.site-footer p{font-size:.92rem;color:#a9b7d3;}
.site-footer h5{
  color:#fff;
  font-family:var(--font-display);
  font-size:.98rem;
  margin-bottom:16px;
}
.footer-links li{margin-bottom:10px;}
.footer-links a{
  font-size:.9rem;
  color:#a9b7d3;
  border-bottom:2px solid transparent;
  padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}
.footer-links li:nth-child(1) a:hover{border-color:var(--accent-1);color:#fff;}
.footer-links li:nth-child(2) a:hover{border-color:var(--accent-2);color:#fff;}
.footer-links li:nth-child(3) a:hover{border-color:var(--accent-3);color:#fff;}
.footer-links li:nth-child(4) a:hover{border-color:var(--accent-4);color:#fff;}
.footer-links li:nth-child(5) a:hover{border-color:var(--accent-5);color:#fff;}
.footer-contact li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.9rem;
  margin-bottom:14px;
  color:#a9b7d3;
}
.footer-contact svg{color:var(--gold-light);flex-shrink:0;margin-top:2px;}
.footer-social{display:flex;gap:10px;margin-top:6px;}
.footer-social a{
  width:36px;height:36px;border-radius:9px;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, filter .15s ease;
}
.footer-social a:hover{transform:translateY(-2px);filter:brightness(1.12);}
.footer-social a:nth-child(1){background:#1877F2;}
.footer-social a:nth-child(2){background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);}
.footer-social a:nth-child(3){background:#FF0000;}
.footer-social a:nth-child(4){background:#25D366;}
.footer-bottom{
  padding:20px 0 26px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:.82rem;
  color:#8ea0c2;
}
.footer-bottom a{color:#c8d3e8;}

/* ============================================================
   DIGITAL MARKETING COURSE (animated, colorful spotlight section)
   ============================================================ */
.dm-course{
  position:relative;
  overflow:hidden;
  padding:70px 0;
  background:linear-gradient(120deg,#0a1f42,#3a1c6e,#8a2f8f,#c62a2a,#e2a83c,#0a1f42);
  background-size:300% 300%;
  animation:dmGradient 16s ease infinite;
  color:#fff;
}
@keyframes dmGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.dm-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(6px);
  opacity:.35;
  animation:dmFloat 7s ease-in-out infinite;
  pointer-events:none;
}
.dm-blob1{width:90px;height:90px;top:8%;left:5%;background:var(--gold-light);animation-delay:0s;}
.dm-blob2{width:60px;height:60px;top:18%;right:8%;background:#8bd3ff;animation-delay:1.2s;}
.dm-blob3{width:70px;height:70px;bottom:12%;left:10%;background:#ff9ecb;animation-delay:2s;}
.dm-blob4{width:50px;height:50px;bottom:18%;right:14%;background:#b6ffb0;animation-delay:.6s;}
@keyframes dmFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-22px) scale(1.08);}
}

.dm-head{max-width:720px;margin:0 auto 20px;text-align:center;position:relative;z-index:1;}
.dm-kicker{
  display:inline-block;
  padding:6px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.03em;
  margin-bottom:14px;
  animation:dmPulseBadge 2.4s ease-in-out infinite;
}
@keyframes dmPulseBadge{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35);}
  50%{box-shadow:0 0 0 8px rgba(255,255,255,0);}
}
.dm-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:10px;}
.dm-head h2 span{
  background:linear-gradient(90deg,var(--gold-light),#ff9ecb,#8bd3ff,var(--gold-light));
  background-size:300% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:dmTextShine 5s linear infinite;
}
@keyframes dmTextShine{
  0%{background-position:0% center;}
  100%{background-position:300% center;}
}
.dm-head p{color:#e7ecf7;font-size:1rem;}

.dm-badges{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin:22px 0 40px;position:relative;z-index:1;
}
.dm-badge{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  color:var(--navy-deep);
  box-shadow:0 10px 20px -10px rgba(0,0,0,.4);
  animation:dmBob 3s ease-in-out infinite;
}
.dm-badge svg{flex-shrink:0;}
.dm-badge:nth-child(1){background:var(--gold-light);}
.dm-badge:nth-child(2){background:#8bd3ff;animation-delay:.3s;}
.dm-badge:nth-child(3){background:#ff9ecb;animation-delay:.6s;}
.dm-badge:nth-child(4){background:#b6ffb0;animation-delay:.9s;}
@keyframes dmBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}

.dm-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  position:relative;z-index:1;
}
.dm-card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:30px 24px;
  text-align:center;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.dm-card:hover{
  transform:translateY(-8px) scale(1.02);
  background:rgba(255,255,255,.14);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.5);
}
.dm-card-ico{
  width:64px;height:64px;
  margin:0 auto 16px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;
  animation:dmSpinIn .6s ease;
}
.dm-card:nth-child(1) .dm-card-ico{background:linear-gradient(135deg,var(--gold),var(--gold-light));}
.dm-card:nth-child(2) .dm-card-ico{background:linear-gradient(135deg,#1c8f6b,#4fd39a);}
.dm-card:nth-child(3) .dm-card-ico{background:linear-gradient(135deg,#c62a2a,#ff7a7a);}
@keyframes dmSpinIn{
  0%{transform:rotate(-25deg) scale(.7);opacity:0;}
  100%{transform:rotate(0) scale(1);opacity:1;}
}
.dm-card h3{font-size:1.15rem;margin-bottom:8px;color:#fff;}
.dm-card p{color:#dbe2f1;font-size:.92rem;line-height:1.55;}

.dm-cta{text-align:center;margin-top:38px;position:relative;z-index:1;}
.dm-cta .btn{
  background:linear-gradient(90deg,var(--gold),#ff9ecb,var(--gold));
  background-size:250% auto;
  color:var(--navy-deep);
  font-weight:800;
  padding:14px 34px;
  animation:dmCtaShine 4s linear infinite;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.5);
}
@keyframes dmCtaShine{
  0%{background-position:0% center;}
  100%{background-position:250% center;}
}

@media (max-width:768px){
  .dm-grid{grid-template-columns:1fr;}
  .dm-course{padding:52px 0;}
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-section{
  padding:70px 0 90px;
  background:
    radial-gradient(circle at 12% 15%, rgba(226,168,60,.16), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(198,42,42,.14), transparent 45%),
    linear-gradient(180deg, var(--cream), var(--paper));
  min-height:60vh;
}
.login-wrap{
  max-width:960px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:var(--paper);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(10,31,66,.35);
  border:1px solid var(--line);
}
.login-aside{
  background:linear-gradient(155deg, var(--navy-deep), var(--navy) 55%, var(--pink-dark));
  color:#fff;
  padding:46px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.login-aside::before,
.login-aside::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.login-aside::before{width:220px;height:220px;top:-70px;right:-70px;}
.login-aside::after{width:160px;height:160px;bottom:-60px;left:-40px;background:rgba(226,168,60,.18);}
.login-aside-ico{
  width:56px;height:56px;
  border-radius:16px;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  position:relative;z-index:1;
}
.login-aside h2{font-size:1.5rem;margin-bottom:10px;position:relative;z-index:1;}
.login-aside p{color:#d7deee;font-size:.96rem;line-height:1.6;position:relative;z-index:1;}
.login-aside-points{margin-top:22px;display:grid;gap:12px;position:relative;z-index:1;}
.login-aside-points li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#eef2fa;}
.login-aside-points li svg{flex-shrink:0;color:var(--gold-light);}

.login-form-side{padding:46px 40px;}
.login-form-side h1{font-size:1.5rem;color:var(--navy-deep);margin-bottom:6px;}
.login-form-side>p{color:var(--muted);margin-bottom:26px;font-size:.94rem;}
.login-alert{
  padding:12px 14px;
  border-radius:var(--radius-s);
  margin-bottom:18px;
  font-size:.9rem;
  font-weight:600;
}
.login-alert-error{background:rgba(198,42,42,.1);color:var(--red);border:1px solid rgba(198,42,42,.25);}
.login-alert-success{background:rgba(28,143,107,.1);color:var(--accent-3);border:1px solid rgba(28,143,107,.25);}
.login-form-group{margin-bottom:18px;}
.login-form-group label{
  display:block;font-size:.85rem;font-weight:600;color:var(--navy-deep);margin-bottom:6px;
}
.login-input-wrap{position:relative;}
.login-input-wrap svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);
}
.login-input-wrap input{
  width:100%;
  padding:12px 14px 12px 42px;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  font-family:var(--font-body);
  font-size:.96rem;
  background:var(--cream);
  color:var(--ink);
}
.login-input-wrap input:focus{outline:2px solid var(--gold);outline-offset:1px;background:#fff;}
.login-row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:.85rem;}
.login-row-between label{display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;}
.login-row-between a{color:var(--pink-dark);font-weight:600;}
.login-form-side .btn{width:100%;padding:13px;font-size:.98rem;}
.login-form-side .btn-pink{background:var(--pink-dark);color:#fff;}
.login-form-side .btn-pink:hover{background:#7d1240;}
.login-bottom-note{margin-top:22px;text-align:center;font-size:.9rem;color:var(--muted);}
.login-bottom-note a{color:var(--navy);font-weight:700;}

@media (max-width:768px){
  .login-wrap{grid-template-columns:1fr;border-radius:16px;}
  .login-aside{padding:34px 26px;}
  .login-form-side{padding:34px 24px;}
  .login-section{padding:40px 0 60px;}
}

/* ============================================================
   FLOATING ACTION BUTTONS (index page only)
   Left  = Enquiry + lead-generation CTA (vertical stack, mid-left)
   Right = Call + WhatsApp (fixed bottom-right, animated)
   ============================================================ */

/* ---- LEFT: Enquiry / Lead-gen vertical buttons ---- */
.float-side-actions{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.fsa-btn{
  display:flex;
  align-items:center;
  gap:8px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  padding:16px 9px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.02em;
  color:#fff;
  border-radius:0 10px 10px 0;
  box-shadow:0 8px 18px -8px rgba(10,31,66,.5);
  transition:padding .2s ease, transform .2s ease;
}
.fsa-btn svg{writing-mode:horizontal-tb;transform:rotate(180deg);flex-shrink:0;}
.fsa-btn:hover{padding-left:14px;transform:translateX(4px);}
.fsa-enquiry{background:var(--red);}
.fsa-enquiry:hover{background:#a91f1f;}
.fsa-lead{background:var(--yellow);color:var(--navy-deep);}
.fsa-lead:hover{background:#ffd633;}

/* ---- RIGHT: fixed call + WhatsApp, animated ---- */
.float-bottom-actions{
  position:fixed;
  right:18px;
  bottom:20px;
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.fba-btn{
  position:relative;
  width:56px;height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 10px 22px -8px rgba(10,31,66,.55);
  animation:fba-bounce 2.6s ease-in-out infinite;
}
.fba-btn:hover{animation-play-state:paused;transform:scale(1.08);}
.fba-call{background:var(--blue-bright);}
.fba-whatsapp{background:#25D366;animation-delay:.3s;}
.fba-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:inherit;
  opacity:.55;
  animation:fba-pulse 2.2s ease-out infinite;
  z-index:-1;
}
.fba-whatsapp::before{animation-delay:.3s;}
@keyframes fba-pulse{
  0%{transform:scale(1);opacity:.55;}
  100%{transform:scale(1.9);opacity:0;}
}
@keyframes fba-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width:1024px){
  .hero .container{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .about .container{grid-template-columns:1fr;}
  .course-grid{grid-template-columns:repeat(3,1fr);}
  .featured-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .other-grid{grid-template-columns:1fr;}
  .contact .container{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width:768px){
  section{padding:52px 0;}

  /* Top utility bar (phone / email / social icons) is desktop-only.
     On mobile these live inside the hamburger menu panel instead. */
  .topbar{display:none;}

  .nav-mobile-actions{display:flex;}
  .nav-login-icon{display:flex;}
  .nav-toggle{display:flex;}

  /* Slide-in panel: opens from the LEFT, slightly more than half the screen width */
  .nav-menu{
    position:fixed;
    top:0;left:0;
    bottom:0;
    width:62%;
    max-width:360px;
    min-width:250px;
    background:var(--paper);
    display:block;
    padding:78px 20px 30px;
    height:100vh;
    overflow-y:auto;
    transform:translateX(-100%);
    opacity:0;
    visibility:hidden;
    box-shadow:14px 0 34px -12px rgba(10,31,66,.35);
    transition:transform .32s ease, opacity .28s ease, visibility .32s;
    z-index:150;
  }
  .nav-menu.is-open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
  }

  /* Close (X) button pinned to the top of the sliding panel */
  .nav-close{
    display:flex;
    position:absolute;
    top:16px;right:16px;
  }

  .menu-list{flex-direction:column;align-items:stretch;gap:0;display:flex;}
  .menu-list li{width:100%;}
  .menu-list li a{
    display:block;
    padding:13px 4px;
    font-size:.98rem;
    border-bottom:3px solid var(--line);
  }
  .menu-list li:nth-child(1) a{border-color:var(--accent-1);}
  .menu-list li:nth-child(2) a{border-color:var(--accent-2);}
  .menu-list li:nth-child(3) a{border-color:var(--accent-3);}
  .menu-list li:nth-child(4) a{border-color:var(--accent-4);}
  .menu-list li:nth-child(5) a{border-color:var(--accent-5);}
  .menu-list li:nth-child(6) a{border-color:var(--accent-1);}

  .nav-actions{display:none;} /* desktop-only actions hidden; mobile has its own set below */

  .mobile-panel-extra{
    display:block;
    margin-top:16px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }

  /* Login + Register shown together in a single row, each with its own color */
  .mp-auth-row{
    display:flex;
    gap:8px;
    margin-bottom:0;
  }
  .mp-auth-row .btn{
    flex:1;
    margin-bottom:0;
    padding:11px 6px;
    font-size:.82rem;
    white-space:nowrap;
  }
  .mp-auth-row .btn-outline-navy{border-color:var(--navy);color:var(--navy);background:rgba(var(--navy-rgb),.06);}
  .mp-auth-row .btn-gold{background:var(--gold);color:var(--navy-deep);}
  .mobile-panel-extra .mp-contact{
    margin-top:18px;
    display:grid;
    gap:10px;
    font-size:.92rem;
    color:var(--muted);
  }
  .mobile-panel-extra .mp-contact a{display:flex;gap:8px;align-items:center;color:var(--ink);}
  .mobile-panel-extra .mp-social{
    display:flex;gap:10px;margin-top:16px;
  }
  .mobile-panel-extra .mp-social a{
    width:38px;height:38px;border-radius:10px;
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:.78rem;
    font-weight:700;
  }
  .mobile-panel-extra .mp-social a:nth-child(1){background:#1877F2;}
  .mobile-panel-extra .mp-social a:nth-child(2){background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);}
  .mobile-panel-extra .mp-social a:nth-child(3){background:#FF0000;}
  .mobile-panel-extra .mp-social a:nth-child(4){background:#25D366;}

  .brand-name{font-size:1.05rem;}
  .brand img{width:46px;height:46px;}

  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-stats{gap:18px;}
  .course-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .cta-band .container{flex-direction:column;text-align:center;}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .about-media .about-badge{right:0;}

  .fsa-btn{padding:12px 7px;font-size:.72rem;}

  /* Mobile only: swap sides — Enquiry/Lead-gen move to the RIGHT,
     Call/WhatsApp move to the LEFT. Desktop layout stays unchanged. */
  .float-side-actions{left:auto;right:0;}
  .fsa-btn{border-radius:10px 0 0 10px;}
  .fsa-btn:hover{padding-left:9px;padding-right:14px;transform:translateX(-4px);}

  .float-bottom-actions{left:14px;right:auto;bottom:16px;gap:12px;}
  .fba-btn{width:48px;height:48px;}
  .fba-btn svg{width:22px;height:22px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}

/* Visible keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
