/*=====================================================
  PREMIUM UPGRADE LAYER — v2 (restrained)
  Loaded after style.css / responsive.css.
  Keeps the original gold/navy character intact.
  Only adds: hero stats, always-visible Apply button,
  extra breathing room, a slightly bigger type scale,
  and cleaner (non-buggy) card hover states.
=====================================================*/

/*-----------------------------------------------------
  1. HERO IMPACT — bigger headline + stats strip
     (overlay/colors left as in the original)
     NOTE: every step of the fluid scale below is marked
     !important and mirrors style.css's own hero
     breakpoints (1200/992/768/576/400) — without a step
     at each of those widths, the flat 64px override would
     otherwise "win" over style.css's tablet-sized rules
     purely because of !important, causing overflow/wrap
     on tablets. Keep this ladder in sync with style.css.
-----------------------------------------------------*/
.hero-content h1{
  font-size:64px !important;
  letter-spacing:-.5px;
}
.hero-content p{
  font-size:19px !important;
}

.hero-stats{
  display:flex;
  gap:0;
  margin-top:46px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.25);
  max-width:560px;
}
.hero-stat{ flex:1; padding-right:24px; }
.hero-stat h3{
  color:#fff;
  font-size:2rem;
  font-weight:800;
  margin-bottom:4px;
  font-family:'Jost',sans-serif;
}
.hero-stat span{
  color:var(--yellow-dark);
  font-size:.82rem;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:600;
}

@media (max-width:1200px){
  .hero-content h1{ font-size:52px !important; }
}
@media (max-width:992px){
  .hero-content h1{ font-size:44px !important; }
  .hero-content p{ font-size:17px !important; }
  .hero-stats{ margin-left:auto; margin-right:auto; justify-content:center; }
}
@media (max-width:768px){
  .hero-content h1{ font-size:38px !important; }
}
@media (max-width:576px){
  .hero-content h1{ font-size:32px !important; }
  .hero-content p{ font-size:15.5px !important; }
  .hero-stats{ flex-wrap:wrap; gap:18px 0; }
  .hero-stat{ flex:0 0 50%; padding-right:12px; }
  .hero-stat h3{ font-size:1.6rem; }
}
@media (max-width:400px){
  .hero-content h1{ font-size:28px !important; }
}

/* Below 992px the hero text goes full-width and centered,
   so the floating flower decoration would otherwise sit
   on top of it — hide it there, same treatment as the
   ring decoration already gets in style.css. */
@media (max-width:992px){
  .hero-flower{ display:none; }
}

/*-----------------------------------------------------
  2. NAVIGATION — Apply button always visible
-----------------------------------------------------*/
.navbar-right-persistent{
  display:flex;
  align-items:center;
  gap:14px;
  order:3;
  margin-left:auto;
}
@media (min-width:1200px){
  .navbar-right-persistent{ margin-left:0; }
}
.navbar-toggler{ order:4; margin-left:14px; }
.navbar-collapse{ order:2; }
.navbar-nav.mx-auto{ margin-left:auto !important; }

/* Keep logo + search + Apply + hamburger from crowding
   or wrapping on narrow phones */
@media (max-width:576px){
  .navbar-brand img{ height:56px; }
  .search-btn{ width:42px; height:42px; font-size:16px; }
  .apply-btn{ padding:11px 18px; font-size:14px; gap:6px; }
  .navbar-right-persistent{ gap:10px; }
  .navbar-toggler{ margin-left:10px; padding:6px 10px; }
}
@media (max-width:400px){
  .navbar-brand img{ height:46px; }
  .search-btn{ display:none; }
  .apply-btn{ padding:10px 14px; font-size:13px; }
  .apply-btn i{ display:none; }
}

/*-----------------------------------------------------
  3. CARD POLISH — shadow + lift only.
     (No border-image top bar — that trick ignores
     border-radius and draws a broken hard-edged strip
     over rounded corners, so it's dropped entirely.)
-----------------------------------------------------*/
.feature-card,
.course-card,
.event-card,
.blog-card,
.teacher-card,
.why-card,
.dept-card,
.testi-card{
  transition:transform .3s ease, box-shadow .3s ease;
}

.feature-card:hover,
.course-card:hover,
.event-card:hover,
.blog-card:hover,
.teacher-card:hover,
.dept-card:hover,
.testi-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(11,31,61,.14);
}

.course-body h5{ font-size:1.15rem !important; }

.btn-course-apply{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; width:100%; justify-content:center;
  background:var(--navy); color:#fff !important;
  font-weight:600; padding:11px 20px; border-radius:30px 30px 30px 0;
  transition:.3s;
}
.btn-course-apply:hover{
  background:var(--yellow); color:var(--navy) !important;
}

/*-----------------------------------------------------
  4. WHITE SPACE — tightened rhythm between sections
-----------------------------------------------------*/
.section{ padding:60px 0 !important; }

@media (max-width:768px){
  .section{ padding:42px 0 !important; }
}

/*-----------------------------------------------------
  5. TYPOGRAPHY — modest bump, matches original weights
-----------------------------------------------------*/
.section-heading h2{ font-size:2.6rem !important; }

@media (max-width:992px){
  .section-heading h2{ font-size:2rem !important; }
}
@media (max-width:576px){
  .section-heading h2{ font-size:1.65rem !important; line-height:1.35 !important; }
  .section-heading{ margin-bottom:32px; }
}
@media (max-width:400px){
  .section-heading h2{ font-size:1.45rem !important; }
}

/*-----------------------------------------------------
  6. GLOBAL MOBILE SAFETY — belt & braces so nothing
     forces a horizontal scrollbar on small phones,
     regardless of any fixed-width decorative element.
-----------------------------------------------------*/
html, body{ overflow-x:hidden; max-width:100%; }

@media (max-width:576px){
  .btn-theme, .btn-white, .btn-accent, .btn-offer, .btn-outline-offer{
    font-size:14.5px;
  }
  .offer-buttons, .hero-buttons{ width:100%; }
}

/*-----------------------------------------------------
  7. TOP BAR — hidden on small devices. It's secondary
     contact info; on phones it just eats space above an
     already-tall navbar, so it drops off below tablet.
-----------------------------------------------------*/
@media (max-width:768px){
  .top-bar{ display:none; }
}

/*-----------------------------------------------------
  8. ACCESSIBLE FOCUS STATES — a premium build should
     still show a clear, on-brand focus ring for keyboard
     users instead of the browser default (or nothing).
-----------------------------------------------------*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
  border-radius:4px;
}

/*-----------------------------------------------------
  9. FORM POLISH — enroll form + newsletter form get a
     consistent, slightly more refined field treatment
     and a visible active state instead of the plain
     Bootstrap default.
-----------------------------------------------------*/
.enroll-form .form-control,
.enroll-form .form-select,
.newsletter-form input{
  transition:border-color .25s, box-shadow .25s;
}
.enroll-form .form-control:focus,
.enroll-form .form-select:focus,
.newsletter-form input:focus{
  border-color:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,182,6,.15);
}

/*-----------------------------------------------------
  10. RESPECT REDUCED MOTION — a premium build shouldn't
      force floating/zoom/parallax animation on visitors
      who've asked their OS to minimise it.
-----------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}