/* ════════════════════════════════════════════════════════════════
   modern-refresh.css  —  Light visual modernization layer
   Loads AFTER style.css. Keeps all layouts; upgrades colors,
   cards, shadows, spacing, buttons, typography and hover effects
   to match the auth/subscribe/hub pages.
   ════════════════════════════════════════════════════════════════ */

:root{
  --sv-blue:   #0ea5e9;
  --sv-blue2:  #0369a1;
  --sv-ink:    #0f172a;
  --sv-muted:  #64748b;
  --sv-bg:     #f1f7fd;
  --sv-card:   #ffffff;
  --sv-line:   rgba(219,234,254,.9);
  --sv-shadow: 0 14px 30px rgba(15,23,42,.10);
  --sv-shadow-hover: 0 20px 40px rgba(15,23,42,.16);
  --sv-radius: 16px;
}

body{
  background: var(--sv-bg);
  color: var(--sv-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ──────────────────────────────────────────────── */
h1,h2,h3,h4,h5{ color: var(--sv-ink); letter-spacing:-.01em; }

/* ── Smooth transitions everywhere useful ──────────────────── */
a, .btn, .textbox, .box-area, .hub-card, .widget li a,
.skill-home-solid .col-md-3, img, .social-network a{
  transition: all .22s ease;
}

/* ════════ HEADER / NAVBAR ════════ */
header .navbar-default{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(160%) blur(8px);
  border: none !important;
  box-shadow: 0 4px 18px rgba(15,23,42,.06);
}
header .navbar-nav > li > a{
  color: var(--sv-ink) !important;
  font-weight: 600;
  position: relative;
  padding-top: 22px; padding-bottom: 22px;
}
header .navbar-nav > li > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:14px;
  height:2px; background: var(--sv-blue); transform: scaleX(0);
  transform-origin:left; transition: transform .22s ease; border-radius:2px;
}
header .navbar-nav > li > a:hover::after,
header .navbar-nav > li.active > a::after{ transform: scaleX(1); }
header .navbar-nav > li > a:hover,
header .navbar-nav > li.active > a{ color: var(--sv-blue2) !important; background:transparent !important; }

/* Games Hub pill button in nav */
header .navbar-nav > li > a.btn-lms-login{
  background: var(--sv-blue); color:#fff !important;
  border-radius:999px; padding:10px 20px; margin:14px 6px;
  box-shadow:0 8px 18px rgba(14,165,233,.35);
}
header .navbar-nav > li > a.btn-lms-login::after{ display:none; }
header .navbar-nav > li > a.btn-lms-login:hover{ background: var(--sv-blue2); color:#fff !important; }

/* ════════ PAGE TITLE BANNER (#inner-headline) ════════ */
#inner-headline{
  background: linear-gradient(120deg, var(--sv-blue2), var(--sv-blue));
  padding: 54px 0; position:relative; overflow:hidden;
}
#inner-headline::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 80% -20%, rgba(255,255,255,.18), transparent 60%);
}
#inner-headline .pageTitle{
  color:#fff !important; font-weight:900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin:0; position:relative; z-index:1;
}

/* ════════ CALL-TO-ACTION BAND (home) ════════ */
.callaction{
  background: linear-gradient(120deg, rgba(14,165,233,.10), rgba(3,105,161,.06));
  border-top:1px solid var(--sv-line); border-bottom:1px solid var(--sv-line);
  padding: 40px 0;
}
.callaction h1, .callaction h2{ color: var(--sv-ink); }

/* ════════ SUBJECT FEATURE CARDS (home: .skill-home) ════════ */
.skill-home-solid .col-md-3{
  background: var(--sv-card);
  border:1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 28px 18px 22px !important;
  margin-bottom: 24px;
}
.skill-home-solid .col-md-3:hover{
  transform: translateY(-6px);
  box-shadow: var(--sv-shadow-hover);
  border-color: rgba(14,165,233,.4);
}
.skill-home .icons{
  display:inline-flex; align-items:center; justify-content:center;
  width:84px; height:84px; border-radius:50%;
  background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(3,105,161,.08));
  margin-bottom:14px;
}
.skill-home .icons img{ border-radius:0; }
.box-area h3{ font-weight:800; margin-bottom:8px; }
.box-area p{ color: var(--sv-muted); font-size:13.5px; line-height:1.7; }

/* ════════ COURSE CARDS (.textbox) ════════ */
.courses{ padding: 48px 0; }
.courses .aligncenter h2{ font-weight:900; margin-bottom:10px; }
.courses .textbox-link, .textbox-link{ display:block; text-decoration:none !important; margin-bottom:24px; }
.courses .textbox, .textbox{
  background: var(--sv-card) !important;
  border:1px solid var(--sv-line) !important;
  border-radius: var(--sv-radius) !important;
  box-shadow: var(--sv-shadow) !important;
  padding: 26px 22px !important;
  height:100%;
  position:relative;
  border-top:4px solid var(--sv-blue) !important;
}
.courses .textbox-link:hover .textbox, .textbox-link:hover .textbox{
  transform: translateY(-6px);
  box-shadow: var(--sv-shadow-hover) !important;
}
.courses .textbox h3, .textbox h3{ font-weight:800; font-size:18px; margin-bottom:8px; color:var(--sv-ink); }
.courses .textbox p, .textbox p{ color: var(--sv-muted); font-size:14px; line-height:1.7; margin:0; }

/* ════════ BUTTONS ════════ */
.btn-color, .btn-color:focus,
.slide-btn,
.btn.btn-default{
  background: var(--sv-blue) !important;
  border:none !important; color:#fff !important;
  border-radius:999px !important;
  padding:12px 28px !important; font-weight:700 !important;
  box-shadow:0 8px 18px rgba(14,165,233,.32);
}
.btn-color:hover, .slide-btn:hover, .btn.btn-default:hover{
  background: var(--sv-blue2) !important; color:#fff !important;
  transform: translateY(-2px);
  box-shadow:0 12px 24px rgba(14,165,233,.40);
}

/* ════════ TESTIMONIALS ════════ */
.testimonial-area{
  background: linear-gradient(120deg, var(--sv-blue2), var(--sv-blue)) !important;
}
.testimonial-area .quote i{ color: rgba(255,255,255,.9); }
.testimonial-area p, .testimonial-area b{ color:#fff !important; }

/* ════════ ABOUT PAGE ════════ */
.about-logo h3{ font-weight:900; }
.about-logo .color, .color, .colored{ color: var(--sv-blue) !important; }
.about img, #content img{ border-radius: 14px; box-shadow: var(--sv-shadow); max-width:100%; height:auto; }
.list-unstyled li{ padding:6px 0; color: var(--sv-ink); }

/* ════════ TEACHER / SUBJECT HERO (mathematics, history, commerce) ════════ */
.teacher-photo, .teacher-photo-wrapper img{
  border-radius: 16px !important; box-shadow: var(--sv-shadow);
}
.badge-pill{
  background: rgba(14,165,233,.12) !important;
  color: var(--sv-blue2) !important; border:1px solid rgba(147,197,253,.7) !important;
  border-radius:999px;
}

/* ════════ CONTACT FORM ════════ */
.contact-form .form-control{
  border:2px solid rgba(203,213,225,.9); border-radius:10px;
  box-shadow:none; padding:11px 14px; background:#f8fafc;
}
.contact-form .form-control:focus{
  border-color: var(--sv-blue); background:#fff;
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
}

/* ════════ FOOTER ════════ */
footer{
  background: #0b1f33 !important;
  color: rgba(255,255,255,.78);
}
footer .widgetheading{ color:#fff !important; font-weight:800; margin-bottom:14px; }
footer address, footer p, footer a{ color: rgba(255,255,255,.72) !important; }
footer .link-list li a:hover, footer a:hover{ color: var(--sv-blue) !important; padding-left:4px; }
footer .social-network a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.08); color:#fff;
}
footer .social-network a:hover{ background: var(--sv-blue); transform: translateY(-3px); }
#sub-footer{ background:#081726 !important; }
#sub-footer p, #sub-footer a{ color: rgba(255,255,255,.6) !important; }

/* ════════ SCROLL-UP BUTTON ════════ */
.scrollup{
  background: var(--sv-blue) !important; border-radius:50% !important;
  width:44px !important; height:44px !important; line-height:44px !important;
  box-shadow:0 8px 18px rgba(14,165,233,.4);
}
.scrollup:hover{ background: var(--sv-blue2) !important; }

/* ════════ Generic section rhythm ════════ */
#content{ padding-top: 40px; padding-bottom: 20px; }