/* =====================================================================
   ETHER INFOTECH — PYTHON COURSE PAGE
   Design system stylesheet (replaces old embedded <style> blocks)
   Fonts   : Sora (display) + Inter (body)
   Base    : Bootstrap 5 grid retained, everything else custom
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* brand blues (kept close to the existing brand mark) */
  --navy-950:#081326;
  --navy-900:#0d1b2a;
  --navy-800:#13283c;
  --blue-800:#153e6b;
  --blue-700b:#1f579f;
  --blue-600:#2c6ec4;
  --blue-500:#4a8ad9;
  --blue-100:#e7f0fb;
  --sky-50:#f7fbff;
  --sky-100:#eef6ff;

  /* ink / neutrals */
  --ink-900:#0f2340;
  --ink-800:#173350;
  --ink-700:#2c3e53;
  --ink-600:#52677d;
  --ink-500:#5b6b80;
  --ink-400:#8a99ac;
  --line:#e4ecf6;
  --line-soft:#edf3fa;
  --white:#ffffff;

  /* accent */
  --amber:#f5a623;
  --amber-dark:#c97e0c;
  --mint:#22b57c;

  /* elevation */
  --shadow-xs:0 2px 8px rgba(15,35,64,.06);
  --shadow-sm:0 8px 24px rgba(15,35,64,.08);
  --shadow-md:0 16px 40px rgba(15,35,64,.10);
  --shadow-lg:0 28px 60px rgba(15,35,64,.14);
  --shadow-navy:0 20px 45px rgba(10,25,45,.28);

  /* radius */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;

  /* type */
  --f-display:'Sora', 'Segoe UI', sans-serif;
  --f-body:'Inter', 'Segoe UI', sans-serif;

  /* motion */
  --ease:cubic-bezier(.22,.9,.32,1);
}

/* ---------- 2. RESET / BASE ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-body);
  color:var(--ink-700);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--ink-900);
  letter-spacing:-.01em;
}
p{color:var(--ink-600);}
a{text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
::selection{background:var(--blue-600);color:#fff;}

/* visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--blue-500);
  outline-offset:2px;
  border-radius:6px;
}

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

/* thin brand scrollbar (progressive enhancement) */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--sky-50);}
::-webkit-scrollbar-thumb{background:#c7d7ea;border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--blue-500);}

/* ---------- 3. SCROLL PROGRESS + BACK TO TOP ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--blue-600),var(--amber));
  z-index:2000; transition:width .12s linear;
}

.back-to-top{
  position:fixed;
  right:22px;
  bottom:96px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:var(--navy-900);
  color:#fff;
  font-size:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  z-index:900;
  opacity:0;
  transform:translateY(14px) scale(.9);
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s ease;
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.back-to-top:hover{background:var(--blue-600);}

@media (max-width:576px){
  .back-to-top{right:16px; bottom:82px; width:42px; height:42px;}
}

/* =====================================================================
   4. NAVBAR
   ===================================================================== */

.navbar{
  background:rgba(255,255,255,.9) !important;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  box-shadow:none !important;
  padding:14px 0;
  transition:box-shadow .25s ease, padding .25s ease, border-color .25s ease, background .25s ease;
}
.navbar.is-scrolled{
  padding:8px 0;
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px rgba(15,35,64,.07) !important;
}
.navbar .logo{height:42px; width:auto; transition:height .25s ease;}
.navbar.is-scrolled .logo{height:36px;}

.navbar-nav{align-items:center; gap:2px;}
.nav-link{
  font-family:var(--f-body);
  font-weight:600;
  font-size:14.5px;
  color:var(--ink-800) !important;
  padding:10px 16px !important;
  border-radius:var(--r-pill);
  position:relative;
  transition:color .2s ease, background .2s ease;
}
.nav-link:hover{color:var(--blue-600) !important; background:var(--sky-100);}
.nav-link.active{color:var(--blue-600) !important; background:var(--blue-100);}
.dropdown-menu{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  padding:10px;
  margin-top:10px !important;
}
.dropdown-item{
  border-radius:10px;
  padding:10px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-700);
  transition:background .15s ease, color .15s ease, padding-left .15s ease;
}
.dropdown-item:hover{background:var(--sky-100); color:var(--blue-700b); padding-left:18px;}

.enroll-btn{
  border:none;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700b));
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:11px 24px;
  border-radius:var(--r-pill);
  margin-left:10px;
  box-shadow:0 10px 24px rgba(44,110,196,.28);
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s ease;
}
.enroll-btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(44,110,196,.38);}
.enroll-btn:active{transform:translateY(0);}

.navbar-toggler{border:none; box-shadow:none !important; padding:4px;}

@media (max-width:991px){
  .navbar-collapse{
    background:#fff;
    margin-top:14px;
    padding:14px;
    border-radius:var(--r-md);
    box-shadow:var(--shadow-md);
    border:1px solid var(--line);
  }
  .navbar-nav{align-items:stretch; gap:2px;}
  .nav-link{padding:12px 14px !important;}
  .enroll-btn{margin:8px 0 0; width:100%;}
}

/* =====================================================================
   5. HERO
   ===================================================================== */
.python-hero{
  position:relative;
  min-height:640px;
  padding-top:130px;
  padding-bottom:70px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(44,110,196,.14), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(245,166,35,.10), transparent 40%),
    linear-gradient(180deg,#f7fbff 0%, #ffffff 60%);
  display:flex;
  align-items:center;
}
.python-hero .container{position:relative; z-index:3;}

.hero-bg-shape{position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none;}
.shape-one{width:380px; height:380px; background:rgba(44,110,196,.08); top:-150px; right:-100px; animation:heroFloat 8s ease-in-out infinite;}
.shape-two{width:240px; height:240px; background:rgba(245,166,35,.08); bottom:-100px; left:-80px; animation:heroFloat 10s ease-in-out infinite reverse;}
@keyframes heroFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-25px);}}

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
  color:var(--blue-700b); font-size:13.5px; font-weight:700;
  margin-bottom:20px;
}
.badge-dot{width:8px; height:8px; border-radius:50%; background:var(--blue-600); box-shadow:0 0 0 5px rgba(44,110,196,.14);}

.python-hero h1{
  font-family:var(--f-display);
  max-width:720px;
  font-size:clamp(34px, 4.4vw, 54px);
  line-height:1.16;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--ink-900);
  margin-bottom:20px;
}
.python-hero h1 span{display:block; color:var(--blue-600);}

.hero-description{
  max-width:640px; font-size:17.5px; line-height:1.7;
  color:var(--ink-600); margin-bottom:26px;
}

.hero-highlights{display:flex; flex-wrap:wrap; gap:12px 22px; margin-bottom:30px;}
.hero-highlight{display:flex; align-items:center; gap:9px; color:var(--ink-800); font-size:14px; font-weight:600;}
.highlight-icon{
  width:21px; height:21px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--blue-600); color:#fff; font-size:11px; font-weight:800;
}

.hero-buttons{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px;}
.hero-primary-btn,.hero-secondary-btn{
  min-height:54px; padding:0 26px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:15px; font-weight:700; transition:all .25s var(--ease);
}
.hero-primary-btn{
  border:none; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700b));
  box-shadow:0 16px 32px rgba(44,110,196,.28);
}
.hero-primary-btn span{font-size:20px; transition:transform .25s ease;}
.hero-primary-btn:hover{transform:translateY(-3px); box-shadow:0 20px 38px rgba(44,110,196,.36); color:#fff;}
.hero-primary-btn:hover span{transform:translateX(5px);}
.hero-primary-btn:active{transform:translateY(-1px);}

.hero-secondary-btn{color:var(--ink-800); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-xs);}
.hero-secondary-btn:hover{color:var(--blue-600); border-color:var(--blue-600); transform:translateY(-3px);}

.hero-trust{display:flex; align-items:center; gap:22px; margin-top:26px;}
.trust-item{display:flex; flex-direction:column;}
.trust-item strong{color:var(--ink-900); font-size:19px; font-weight:800;}
.trust-item span{color:var(--ink-400); font-size:11px; margin-top:2px;}
.trust-line{width:1px; height:34px; background:var(--line);}

/* right visual / code card */
.hero-visual{position:relative; min-height:500px; display:flex; align-items:center; justify-content:center;}

.python-code-card{
  width:100%; max-width:440px; border-radius:20px; overflow:hidden;
  background:var(--navy-900); border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-navy);
  transform:perspective(1100px) rotateY(-6deg) rotateX(2deg);
  transition:transform .5s var(--ease);
}
.python-code-card:hover{transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-6px);}

.code-header{height:50px; padding:0 18px; display:flex; align-items:center; gap:16px; background:var(--navy-800); border-bottom:1px solid rgba(255,255,255,.07);}
.window-dots{display:flex; gap:7px;}
.window-dots span{width:10px; height:10px; border-radius:50%; background:#70849a;}
.window-dots span:nth-child(1){background:#ff6159;}
.window-dots span:nth-child(2){background:#ffbd2e;}
.window-dots span:nth-child(3){background:#28c840;}
.file-name{color:#a8bbce; font-size:12px; font-family:'SFMono-Regular',Consolas,monospace;}

.code-body{padding:24px;}
.code-body pre{margin:0; color:#d5e4f1; font-family:'SFMono-Regular',Consolas,monospace; font-size:12.5px; line-height:1.85; white-space:pre-wrap;}
.code-purple{color:#d29cff;}
.code-blue{color:#71c8ff;}
.code-green{color:#65e6a5;}
.code-orange{color:#ffcc75;}

.code-footer{padding:12px 20px; border-top:1px solid rgba(255,255,255,.07); color:#91a9bd; font-size:11px; display:flex; align-items:center; gap:8px;}
.status-dot{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px rgba(34,181,124,.7); animation:statusPulse 2s ease-in-out infinite;}
@keyframes statusPulse{0%,100%{opacity:1;} 50%{opacity:.4;}}

.floating-python{
  position:absolute; right:-5px; top:20px; width:72px; height:72px;
  display:flex; align-items:center; justify-content:center; border-radius:20px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-md);
  font-size:35px; animation:floatingCard 4s ease-in-out infinite; z-index:5;
}
.career-float-card{
  position:absolute; left:-25px; bottom:44px; display:flex; align-items:center; gap:12px;
  padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); animation:floatingCard 5s ease-in-out infinite;
}
.career-icon{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:var(--sky-100); font-size:24px;}
.career-float-card strong{display:block; color:var(--ink-900); font-size:13px;}
.career-float-card small{display:block; color:var(--ink-400); font-size:12px; margin-top:3px;}

.rating-float-card{
  position:absolute; right:-14px; bottom:100px; padding:14px 19px; background:#fff;
  border-radius:var(--r-md); box-shadow:var(--shadow-md); text-align:center;
  animation:floatingCard 4.5s ease-in-out infinite;
}
.rating-stars{color:var(--amber); font-size:14px !important; letter-spacing:2px;}
.rating-float-card strong{display:block; color:var(--ink-900); font-size:16px; margin-top:3px;}
.rating-float-card small{color:var(--ink-400); font-size:14px !important;}
@keyframes floatingCard{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}

@media (max-width:991px){
  .python-hero{padding:120px 0 60px; min-height:auto;}
  .hero-visual{margin-top:40px; min-height:420px;}
  .career-float-card{left:0;}
  .rating-float-card{right:0;}
}
@media (max-width:576px){
  .python-hero{padding:104px 0 48px;}
  .python-hero h1{font-size:32px; letter-spacing:-.01em;}
  .hero-description{font-size:15.5px; line-height:1.65;}
  .hero-highlights{grid-template-columns:1fr 1fr; display:grid; gap:12px;}
  .hero-buttons{flex-direction:column;}
  .hero-primary-btn,.hero-secondary-btn{width:100%;}
  .hero-trust{gap:12px; justify-content:space-between;}
  .trust-line{display:none;}
  .hero-visual{min-height:360px;}
  .python-code-card{transform:none;}
  .code-body{padding:16px;}
  .code-body pre{font-size:10px; line-height:1.7;}
  .floating-python{width:52px; height:52px; font-size:25px; top:0;}
  .career-float-card{left:-5px; bottom:16px; padding:10px 12px;}
  .rating-float-card{right:-5px; bottom:70px; padding:10px 13px;}
}

/* =====================================================================
   6. ABOUT (about-modern)
   ===================================================================== */
.about-modern{padding:90px 0;}
.about-modern .image-wrapper{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
}
.about-modern .content-box h2{
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.3;
  margin-bottom:0;
}
.about-modern .content-box p{font-size:16px; line-height:1.75;text-align: justify;}
.about-modern .btn.btn-dark{
  background:var(--navy-900); border:none; padding:14px 30px;
  border-radius:var(--r-pill); font-weight:700; font-size:15px;
  transition:transform .2s var(--ease), background .2s ease;
}
.about-modern .btn.btn-dark:hover{background:var(--blue-600); transform:translateY(-2px);}

@media (max-width:768px){ .about-modern{padding:60px 0;} }

/* =====================================================================
   7. COURSE OVERVIEW + ENROLL FORM
   ===================================================================== */
.course-overview-section{
  padding:80px 0;
  background:var(--sky-50);
}
.overview-wrapper{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.35fr .95fr; gap:44px; align-items:flex-start;
}
.overview-content h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:20px;}
.content-scroll{
  max-height:560px; overflow-y:auto; padding-right:14px; text-align: justify;
}
.content-scroll p{font-size:15.5px; line-height:1.8; margin-bottom:18px;}
.content-scroll::-webkit-scrollbar{width:5px;}
.content-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;}

.enroll-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; box-shadow:var(--shadow-md); position:sticky; top:110px;
}
.enroll-form::before{
  display:block; font-family:var(--f-display);
  font-weight:700; font-size:19px; color:var(--ink-900); margin-bottom:18px;
}
.enroll-form input,
.enroll-form select{
  width:100%; padding:13px 15px; margin-bottom:13px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:14.5px; font-family:var(--f-body); color:var(--ink-800);
  background:var(--sky-50);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.enroll-form input:focus,
.enroll-form select:focus{
  outline:none; border-color:var(--blue-600); background:#fff;
  box-shadow:0 0 0 4px rgba(44,110,196,.12);
}
.enroll-form button[type="submit"]{
  width:100%; border:none; padding:15px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700b)); color:#fff;
  font-weight:700; font-size:15.5px; cursor:pointer; margin-top:4px;
  box-shadow:0 12px 26px rgba(44,110,196,.3);
  transition:transform .2s var(--ease), box-shadow .2s ease;
}
.enroll-form button[type="submit"]:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(44,110,196,.4);}

@media (max-width:991px){
  .overview-wrapper{grid-template-columns:1fr; gap:34px;}
  .enroll-form{position:static;}
}
@media (max-width:576px){
  .course-overview-section{padding:56px 0;}
  .content-scroll{max-height:none;}
}

/* =====================================================================
   8. WHY CHOOSE (why-choose-modern) + SKILLS
   ===================================================================== */
.why-choose-modern{padding:60px 0; background:#fff;}
.container-modern{max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.choose-left h2,.skills-right h2{font-size:clamp(22px,2.4vw,28px); margin-bottom:26px;}

.feature-card{
  background:var(--sky-50); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:20px 22px; margin-bottom:14px; transition:transform .25s var(--ease), box-shadow .25s ease, border-color .2s ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--blue-100);}
.feature-card h4{font-size:16px; margin-bottom:6px; font-family:var(--f-body); font-weight:700;}
.feature-card p{font-size:16px; margin:0;}

.skills-right{background:var(--navy-900); border-radius:var(--r-lg); padding:34px; color:#fff;}
.skills-right h2{color:#fff;}
.skill-box{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm); padding:16px 18px; margin-bottom:12px;
  transition:background .2s ease, transform .2s var(--ease);
}
.skill-box:hover{background:rgba(255,255,255,.11); transform:translateX(4px);}
.skill-box h4{color:#fff; font-size:16px; margin-bottom:4px;}
.skill-box p{color:rgba(255,255,255,.68); font-size:16px; margin:0;}

@media (max-width:900px){
  .container-modern{grid-template-columns:1fr;}
}

/* =====================================================================
   9. WHY PREMIUM (institute pitch)
   ===================================================================== */
.why-premium{padding:20px 0; background:linear-gradient(180deg,#fff, var(--sky-50));}
.premium-content h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:18px;}
.premium-content p{font-size:16px; line-height:1.75; margin-bottom:26px; text-align: justify;}

.premium-buttons{display:flex; flex-wrap:wrap; gap:14px;}
.btn-glow,.btn-outline-glow,.btn-call{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:var(--r-pill); font-weight:700; font-size:16px;
  cursor:pointer; transition:all .25s var(--ease);
}
.btn-glow{background:linear-gradient(135deg,var(--amber),var(--amber-dark)); color:#fff; box-shadow:0 14px 28px rgba(245,166,35,.32);}
.btn-glow:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(245,166,35,.4); color:#fff;}
.btn-outline-glow{background:#fff; color:var(--blue-700b); border:1.5px solid var(--blue-600);}
.btn-outline-glow:hover{background:var(--blue-600); color:#fff; transform:translateY(-3px);}
.btn-call{background:var(--navy-900); color:#fff;}
.btn-call:hover{background:var(--ink-900); transform:translateY(-3px); color:#fff;}

.floating-cards{display:flex; flex-direction:column; gap:16px;}
.card-box{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 24px; font-weight:700; color:var(--ink-800); font-size:16px;
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:12px;
  transition:transform .25s var(--ease);
}
.card-box:hover{transform:translateX(6px);}
.card-box::before{content:"✓"; width:26px; height:26px; border-radius:50%; background:var(--blue-600); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.card-box:nth-child(2)::before{background:var(--amber);}
.card-box:nth-child(3)::before{background:var(--mint);}

@media (max-width:768px){ .why-premium{padding:20px 0;} .floating-cards{margin-top:28px;} }

/* =====================================================================
   10. INTRO / SCOPE CARDS
   ===================================================================== */
.intro-scope-modern{padding:70px 0; background:#fff;}
.modern-wrapper{max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.modern-card{
  background:var(--sky-50); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:34px; transition:transform .25s var(--ease), box-shadow .25s ease;
}
.modern-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm);}
.modern-card h2{font-size:21px; margin-bottom:14px; line-height:1.35;}
.modern-card p{font-size:16px; line-height:1.75; margin-bottom:14px; text-align: justify;}
.modern-card.highlight-card{
  background:linear-gradient(160deg,var(--navy-900),var(--blue-800));
  color:#fff;
}
.modern-card.highlight-card h2{color:#fff;}
.modern-card.highlight-card p{color:rgba(255,255,255,.78);}

@media (max-width:900px){ .modern-wrapper{grid-template-columns:1fr;} }

/* ---- Upcoming batches ---- */
.auto-batch-section{padding-top:10px;}
.auto-title{text-align:center; font-size:clamp(22px,2.4vw,28px); margin-bottom:34px;}
.auto-batch-wrapper{max-width:1000px; margin:0 auto; padding:0 20px;}
.auto-batch-card{
  display:flex; align-items:center; gap:22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 26px;
  margin-bottom:16px; box-shadow:var(--shadow-xs);
  transition:transform .25s var(--ease), box-shadow .25s ease, border-color .2s ease;
}
.auto-batch-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--blue-100);}
.auto-day{
  flex:0 0 96px; text-align:center; background:var(--sky-100); border-radius:var(--r-md);
  padding:14px 8px;
}
.auto-day h3{font-size:16px; margin:0 0 4px; color:var(--blue-700b);}
.auto-day span{font-size:14px; color:var(--ink-500); font-weight:600;}
.auto-info{flex:1; min-width:0;}
.auto-info p{margin:0; font-size:14.5px; color:var(--ink-700);}
.auto-info p:first-child{font-weight:700; color:var(--ink-900); margin-bottom:2px;}
.auto-batch-card .hero-primary-btn{flex:0 0 auto; padding:0 22px; min-height:46px; font-size:14px;}

@media (max-width:600px){
  .auto-batch-card{flex-wrap:wrap; padding:18px;}
  .auto-day{flex:0 0 100%; display:flex; align-items:center; justify-content:space-between; text-align:left; padding:10px 16px;}
  .auto-batch-card .hero-primary-btn{width:100%;}
}

/* =====================================================================
   11. FEES
   ===================================================================== */
.fees-modern-section{padding:90px 0; background:var(--sky-50);}
.fees-container{max-width:1100px; margin:0 auto; padding:0 20px;}
.fees-header{text-align:center; max-width:720px; margin:0 auto 44px;}
.fees-header h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:14px;}
.fees-header p{font-size:16px; line-height:1.7;}

.fees-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:800px; margin:0 auto;}
.fee-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; box-shadow:var(--shadow-xs); transition:transform .25s var(--ease), box-shadow .25s ease;
}
.fee-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.fee-card h3{font-size:19px; margin-bottom:10px;}
.fee-card > p{font-size:14.5px; margin-bottom:18px;}
.fee-card ul{list-style:none; padding:0; margin:0 0 24px;}
.fee-card ul li{
  font-size:16px; color:var(--ink-700); padding:9px 0 9px 26px; position:relative;
  border-bottom:1px dashed var(--line-soft);
}
.fee-card ul li:last-child{border-bottom:none;}
.fee-card ul li::before{
  content:"✓"; position:absolute; left:0; top:9px; width:18px; height:18px; border-radius:50%;
  background:var(--sky-100); color:var(--blue-600); font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.fee-card .hero-primary-btn{width:100%;}
.fee-card.featured{border:2px solid var(--blue-600); box-shadow:var(--shadow-md); transform:scale(1.02);}
.fee-card.featured:hover{transform:scale(1.02) translateY(-6px);}
.fee-card .badge{
  position:absolute; top:-13px; left:32px; background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff; font-size:14px; font-weight:800; letter-spacing:.3px;
  padding:6px 16px; border-radius:var(--r-pill); box-shadow:0 8px 18px rgba(245,166,35,.35);
}

@media (max-width:768px){
  .fees-modern-section{padding:56px 0;}
  .fees-cards{grid-template-columns:1fr;}
  .fee-card.featured{transform:none;}
  .fee-card.featured:hover{transform:translateY(-6px);}
}

/* =====================================================================
   12. COURSE OBJECTIVES
   ===================================================================== */
.course-objectives-modern{padding:90px 0;}
.section-header{text-align:center; max-width:680px; margin:0 auto 46px;}
.section-header h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:12px;}
.section-header p{font-size:15.5px;}

.objectives-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.objective-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px;
  transition:transform .25s var(--ease), box-shadow .25s ease, border-color .2s ease;
}
.objective-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:var(--blue-100);}
.objective-card .icon{
  width:44px; height:44px; border-radius:12px; background:var(--sky-100); color:var(--blue-700b);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; margin-bottom:16px;
}
.objective-card h3{font-size:17px; margin-bottom:8px;}
.objective-card p{font-size:14.5px; line-height:1.65; margin:0;}

@media (max-width:900px){ .objectives-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:576px){ .course-objectives-modern{padding:56px 0;} .objectives-grid{grid-template-columns:1fr;} }

/* =====================================================================
   13. CAREER SECTION
   ===================================================================== */
.career-section{padding:90px 0; background:var(--sky-50);}
.career-header{text-align:center; margin:0 auto 44px;}
.career-header h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:12px;}
.career-header p{font-size:15.5px;}

.career-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:40px;}
.career-card{
  background:#fff; padding:30px 24px; border-radius:var(--r-lg); text-align:left;
  border:1px solid var(--line); box-shadow:var(--shadow-xs);
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.career-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-sm);}
.career-card .career-icon{
  width:52px; height:52px; border-radius:14px; background:var(--sky-100);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px;
}
.career-card h3{font-size:17px; margin-bottom:8px;}
.career-card p{font-size:14.5px; line-height:1.6; margin:0;}

.career-growth{
  background:linear-gradient(135deg,var(--navy-900),var(--blue-800));
  border-radius:var(--r-lg); padding:38px; text-align:center; color:#fff;
  box-shadow:var(--shadow-navy);
}
.career-growth h3{color:#fff; font-size:22px; margin-bottom:12px;}
.career-growth p{color:rgba(255,255,255,.82); max-width:680px; margin:0 auto; font-size:15px; line-height:1.7;}

@media (max-width:900px){ .career-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:576px){ .career-section{padding:56px 0;} .career-grid{grid-template-columns:1fr;} .career-growth{padding:28px 22px;} }

/* =====================================================================
   14. SYLLABUS (syl2)
   ===================================================================== */
.syl2{padding:40px 0; background:linear-gradient(180deg,#f6f9fd 0%,#fff 100%);}
.syl2-container{max-width:1200px; margin:0 auto; padding:0 20px;}
.syl2 .career-header{margin-bottom:40px;}
.syl2-eyebrow{
  display:inline-block; padding:6px 16px; margin-bottom:14px; font-size:12px; font-weight:700;
  letter-spacing:.6px; color:var(--blue-700b); background:var(--sky-100); border-radius:var(--r-pill);
}

.syl2-card{
  display:grid; grid-template-columns:300px 1fr; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md);
}
.syl2-rail{background:var(--sky-50); border-right:1px solid var(--line-soft); padding:18px 14px; max-height:640px; overflow-y:auto;}
.syl2-rail::-webkit-scrollbar{width:5px;}
.syl2-rail::-webkit-scrollbar-thumb{background:#cfdcec; border-radius:6px;}
.syl2-rail-top{padding:4px 10px 14px; font-size:12px; font-weight:700; letter-spacing:.6px; color:var(--ink-400); text-transform:uppercase;}

.syl2-tab{
  display:flex; align-items:center; gap:12px; width:100%; margin-bottom:6px; padding:12px 14px;
  text-align:left; background:transparent; border:1px solid transparent; border-radius:12px; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.syl2-tab:hover{background:#fff; border-color:var(--line);}
.syl2-num{
  flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--blue-700b); background:var(--sky-100);
  border-radius:9px; transition:background .2s ease, color .2s ease;
}
.syl2-tab-txt{display:block; min-width:0;}
.syl2-tab-txt b{display:block; font-size:14.5px; font-weight:600; color:var(--ink-900); line-height:1.3;}
.syl2-tab.active{background:linear-gradient(135deg,var(--blue-600),var(--blue-700b)); border-color:transparent; box-shadow:0 8px 20px rgba(44,110,196,.3);}
.syl2-tab.active .syl2-num{background:rgba(255,255,255,.22); color:#fff;}
.syl2-tab.active .syl2-tab-txt b{color:#fff;}

.syl2-panel{padding:34px 36px; max-height:640px; overflow-y:auto;}
.syl2-pane{display:none;}
.syl2-pane.active{display:block; animation:syl2Fade .4s ease;}
@keyframes syl2Fade{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}

.syl2-pane-head{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-start;
  padding-bottom:22px; margin-bottom:24px; border-bottom:1px dashed var(--line-soft);
}
.syl2-chip{
  display:inline-block; margin-bottom:10px; padding:5px 12px; font-size:11px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; color:var(--blue-700b); background:var(--sky-100); border-radius:var(--r-pill);
}
.syl2-pane-head h3{font-size:24px; margin-bottom:8px;}
.syl2-pane-head p{max-width:560px; font-size:15px; line-height:1.6; margin:0;}

.syl2-topics{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; margin:0 0 26px; padding:0; list-style:none; text-align: left;}
.syl2-topics li{position:relative; padding-left:30px; font-size:14.5px; line-height:1.5; color:var(--ink-700); width: max-content;
}
.syl2-topics li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--sky-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'><path fill='none' stroke='%232C6EC4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 6.3 4.4 9.2 10.5 3'/></svg>") center no-repeat;
}
.syl2-project{
  padding:16px 20px; font-size:14px; color:var(--blue-800);
  background:linear-gradient(135deg,rgba(44,110,196,.08),rgba(44,110,196,.02));
  border-left:4px solid var(--blue-600); border-radius:0 10px 10px 0;
}
.syl2-project b{display:block; margin-bottom:4px; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--blue-700b);}

.syl2-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin-top:30px; padding:28px 34px; background:linear-gradient(135deg,var(--navy-900),var(--blue-600));
  border-radius:var(--r-lg); box-shadow:0 18px 40px rgba(44,110,196,.25);
}
.syl2-cta h4{margin:0 0 6px; font-size:20px; color:#fff;}
.syl2-cta p{margin:0; font-size:14.5px; color:rgba(255,255,255,.85);}
.syl2-btn{
  padding:14px 30px; font-size:15px; font-weight:700; color:var(--navy-900); background:#fff; border:none;
  border-radius:10px; cursor:pointer; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease;
}
.syl2-btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.25);}

@media (max-width:991px){
  .syl2-card{grid-template-columns:1fr;}
  .syl2-rail{display:flex; gap:10px; max-height:none; overflow-x:auto; overflow-y:hidden; border-right:none; border-bottom:1px solid var(--line-soft); padding:14px;}
  .syl2-rail-top{display:none;}
  .syl2-tab{width:auto; flex:0 0 auto; margin-bottom:0; background:#fff; border-color:var(--line);}
  .syl2-tab:hover{transform:none;}
  .syl2-panel{max-height:none; padding:28px 22px;}
}
@media (max-width:600px){
  .syl2{padding:0px 0;}
  .syl2-topics{grid-template-columns:1fr;}
  .syl2-pane-head h3{font-size:20px;}
  .syl2-cta{padding:24px; text-align:center; justify-content:center;}
  .syl2-btn{width:100%;}
  .g-5, .gy-5 {
    --bs-gutter-y: 1rem;
}
}

/* =====================================================================
   15. STUDENTS-WORK (logo marquee)
   ===================================================================== */
.students-work{padding:0px 0px 60px 0px; background:#fff; overflow:hidden;}
.students-work h2{font-size:clamp(22px,2.4vw,28px);}

.logo-row{overflow:hidden; padding:10px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.logo-track{display:flex; gap:22px; width:max-content;}
.logo-track.scroll-left{animation:marqueeLeft 32s linear infinite;}
.logo-track.scroll-right{animation:marqueeRight 32s linear infinite;}
.logo-row:hover .logo-track{animation-play-state:paused;}

.logo-card{
  flex:0 0 auto; width:150px; height:90px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; padding:12px;
  box-shadow:var(--shadow-xs);
}
.logo-card img{width:100%; height:100%; object-fit:contain; filter:grayscale(45%); opacity:.85; transition:filter .25s ease, opacity .25s ease;}
.logo-card:hover img{filter:grayscale(0); opacity:1;}

@keyframes marqueeLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes marqueeRight{from{transform:translateX(-50%);} to{transform:translateX(0);}}

@media (max-width:576px){
  .logo-card{width:120px; height:74px;}
}

/* =====================================================================
   16. WHY MODERN (certification + cards)
   ===================================================================== */
.why-modern{padding:90px 0; background:var(--sky-50);}
.why-header{text-align:center; max-width:640px; margin:0 auto 46px;}
.why-header h2{font-size:clamp(24px,2.6vw,32px); margin-bottom:12px;}

.why-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start;}
.why-left{position:sticky; top:110px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);}
.why-right{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.why-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:22px;
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.why-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-sm);}
.why-card h4{font-size:15.5px; margin-bottom:6px;}
.why-card p{font-size:16px; line-height:1.8; margin:0;}

@media (max-width:900px){
  .why-grid{grid-template-columns:1fr;}
  .why-left{position:static;}
  .why-right{grid-template-columns:1fr 1fr;}
}
@media (max-width:576px){
  .why-modern{padding:56px 0;}
  .why-right{grid-template-columns:1fr;}
}

/* =====================================================================
   17. FAQ + CONTACT
   ===================================================================== */
.faq-contact{padding:90px 0; background:#fff;}
.faq-contact-wrapper{display:grid; grid-template-columns:1.2fr .9fr; gap:46px; align-items:start;}
.faq-side h2{font-size:clamp(24px,2.6vw,30px); margin-bottom:26px;}

.faq-item{
  border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item.open{border-color:var(--blue-100); box-shadow:var(--shadow-xs);}
.faq-question{
  padding:18px 46px 18px 20px; font-weight:600; font-size:15px; color:var(--ink-900);
  cursor:pointer; position:relative; background:#fff; transition:background .2s ease;
}
.faq-item.open .faq-question,
.faq-question:hover{background:var(--sky-50);}
.faq-question::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--sky-100); color:var(--blue-700b);
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .2s ease, color .2s ease;
}
.faq-item.open .faq-question::after{transform:translateY(-50%) rotate(135deg); background:var(--blue-600); color:#fff;}

.faq-answer{
  font-size:14.5px; line-height:1.7; color:var(--ink-600);
  padding:0 20px; max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
}
.faq-item.open .faq-answer{padding:0 20px 20px;}

.contact-side{position:sticky; top:110px;}


@media (max-width:991px){
  .faq-contact-wrapper{grid-template-columns:1fr;}
  .contact-side{position:static;}
}
@media (max-width:576px){ .faq-contact{padding:56px 0;} }

/* =====================================================================
   18. BLOG
   ===================================================================== */
.blog-section{padding:90px 0; background:var(--sky-50);}
.blog-header{text-align:center; max-width:640px; margin:0 auto 44px;}
.blog-header h2{font-size:clamp(24px,2.6vw,30px); margin-bottom:10px;}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-xs); transition:transform .25s var(--ease), box-shadow .25s ease;
}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.blog-img{height:190px; overflow:hidden;}
.blog-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.blog-card:hover .blog-img img{transform:scale(1.06);}
.blog-content{padding:22px;}
.blog-date{display:inline-block; font-size:12px; font-weight:700; color:var(--blue-700b); background:var(--sky-100); padding:4px 10px; border-radius:var(--r-pill); margin-bottom:10px;}
.blog-content h4{font-size:16.5px; margin-bottom:8px; line-height:1.35;}
.blog-content p{font-size:14px; line-height:1.6; margin-bottom:14px;}
.blog-btn{color:var(--blue-600); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px;}
.blog-btn::after{content:"→"; transition:transform .2s ease;}
.blog-btn:hover::after{transform:translateX(4px);}

@media (max-width:900px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:576px){ .blog-section{padding:56px 0;} .blog-grid{grid-template-columns:1fr;} }

/* =====================================================================
   19. FOOTER
   ===================================================================== */
.footer{background:var(--navy-950); color:rgba(255,255,255,.72); padding:64px 0 0;}
.footer-container{
  max-width:1200px; margin:0 auto; padding:0 20px 40px;
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:36px;
}
.footer h3{color:#fff; font-size:16px; margin-bottom:18px;}
.footer-col ul{list-style:none; padding:0; margin:0;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{color:rgba(255,255,255,.66); font-size:14px; transition:color .2s ease, padding-left .2s ease;}
.footer-col ul li a:hover{color:#fff; padding-left:4px;}
.footer-col p{color:rgba(255,255,255,.66); font-size:14px; line-height:1.7; margin-bottom:8px;}
.footer-logo{ margin-bottom:20px;}
.qr-box,.msme-box{margin-top:16px;}
.qr-box img,.msme-box img{border-radius:12px;}

.review-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); padding:20px; text-align:center;}
.review-card h5{color:#fff; font-size:14.5px; margin-bottom:14px;}
.review-card img{margin:0 auto 14px; border-radius:10px;}
.review-btn{
  display:inline-block; background:var(--blue-600); color:#fff; font-weight:700; font-size:13.5px;
  padding:10px 20px; border-radius:var(--r-pill); transition:background .2s ease, transform .2s ease;
}
.review-btn:hover{background:var(--blue-500); color:#fff; transform:translateY(-2px);}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:20px; text-align:center;
}
.footer-bottom p{margin:0; font-size:13px; color:rgba(255,255,255,.5);}

@media (max-width:991px){
  .footer-container{grid-template-columns:1fr 1fr; gap:30px;}
}
@media (max-width:576px){
  .footer-container{grid-template-columns:1fr; text-align:left;}
  .footer{padding-top:48px;}
}

/* whatsapp float */
.whatsapp-float{
  position:fixed; right:22px; bottom:26px; width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 14px 30px rgba(37,211,102,.4); z-index:900;
  animation:wappPulse 2.4s ease-in-out infinite;
}
@keyframes wappPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
@media (max-width:576px){ .whatsapp-float{right:16px; bottom:16px; width:50px; height:50px; font-size:22px;} }

/* =====================================================================
   20. ENQUIRY POPUP
   ===================================================================== */
.popup{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(8,19,38,.68); backdrop-filter:blur(5px);
  align-items:center; justify-content:center; padding:20px;
}
.popup-content{
  position:relative; width:100%; max-width:460px; background:#fff; border-radius:var(--r-lg);
  padding:36px 32px 28px; box-shadow:var(--shadow-lg);
  animation:popupIn .3s var(--ease);
}
@keyframes popupIn{from{opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}

.popup-content h2{font-size:22px; margin-bottom:20px; text-align:center;}
.popup-content .close-btn{
  position:absolute; top:14px; right:18px; font-size:22px; color:var(--ink-400);
  cursor:pointer; line-height:1; transition:color .2s ease, transform .2s ease;
}
.popup-content .close-btn:hover{color:var(--ink-900); transform:rotate(90deg);}

.popup-content input,
.popup-content select{
  width:100%; padding:13px 15px; margin-bottom:13px; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:14.5px; background:var(--sky-50); color:var(--ink-800);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.popup-content input:focus,
.popup-content select:focus{outline:none; border-color:var(--blue-600); background:#fff; box-shadow:0 0 0 4px rgba(44,110,196,.12);}

.popup-content button[type="submit"]{
  width:100%; border:none; padding:15px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700b)); color:#fff; font-weight:700; font-size:15.5px;
  cursor:pointer; box-shadow:0 12px 26px rgba(44,110,196,.3); transition:transform .2s var(--ease), box-shadow .2s ease;
}
.popup-content button[type="submit"]:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(44,110,196,.4);}
.popup-content button[type="submit"]:active{transform:translateY(0);}

@media (max-width:480px){
  .popup-content{padding:28px 20px 22px; border-radius:14px;}
  .popup-content h2{font-size:19px;}
}