/* ==========================================================================
   BrainStorm Achievers — Public Site Design System v2
   Full visual redesign, brand-driven (navy + red + white from the logo),
   not a "blue everywhere" template. Additive/cascading over the existing
   template markup — no HTML structure was assumed beyond what the blade
   files actually render. Loaded LAST (after all existing CSS/inline
   <style> blocks) so it wins the cascade without !important spam.
   ========================================================================== */

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

:root{
  /* ---- Brand palette, sampled from the BrainStorm Achiever logo ---- */
  --navy:            #1b1464;   /* wordmark / primary brand identity */
  --navy-dark:       #100b3f;
  --navy-tint:       #eef0fb;   /* whisper-light navy surface, not a background formula */
  --sky:             #d8ebfa;   /* pale blue from the logo's icon backdrop */
  --sky-deep:        #2f7bc4;   /* usable mid-blue for links/icons, distinct from navy */
  --red:             #e2231a;   /* tagline / badge accent — primary CTA color */
  --red-dark:        #b81810;
  --red-tint:        #fdeceb;

  /* ---- Neutrals ---- */
  --ink:             #14172a;   /* near-black text on light surfaces */
  --body:            #545a70;   /* muted body copy */
  --line:            #e7e9f4;
  --surface:         #ffffff;
  --surface-soft:    #f6f7fb;   /* off-white, used for rhythm — not blue */

  /* ---- Scale ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sh-sm: 0 1px 3px rgba(20,23,42,.06);
  --sh-md: 0 10px 30px rgba(20,23,42,.10);
  --sh-lg: 0 24px 60px rgba(20,23,42,.16);
  --sh-navy: 0 16px 40px rgba(27,20,100,.28);
  --ease: cubic-bezier(.22,.9,.32,1);
}

*{ box-sizing: border-box; }

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--body);
  background: var(--surface);
}
h1, h2, h3, h4, h5, h6,
.sec-title h2, .course-title, .testi-name, .chead{
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
p{ line-height: 1.75; }
a{ color: var(--sky-deep); text-decoration: none; }
a:hover{ color: var(--navy); }

/* ---------------------------------------------------------------------- */
/* Section rhythm — every section decides its own treatment.               */
/* Only two sections on a typical page get a dark/navy background; the     */
/* rest use white or soft-neutral surfaces. Blue is never the default.     */
/* ---------------------------------------------------------------------- */
.sec-spacer{ padding: 88px 0 !important; position: relative; }
.rs-courses-2{ background: var(--surface-soft); }
.rs-testimonial{ background: linear-gradient(180deg, var(--navy-tint) 0%, var(--surface) 100%) !important; }

.sec-title{ margin-bottom: 48px !important; }
.sec-title h2{
  font-size: clamp(26px, 3vw, 36px);
  position: relative;
  padding-bottom: 16px;
  display: inline-block;
}
.sec-title h2::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red), var(--sky-deep));
}
.sec-title.text-center h2::after{ left: 50%; transform: translateX(-50%); }
.sec-title h2.white-blue{ color: var(--ink); }
.sec-title .view-more a,
.sec-title .view-more .view-more-btn{
  color: var(--navy);
  font-weight: 600;
  transition: color .18s var(--ease), transform .18s var(--ease);
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
}
.sec-title .view-more a:hover,
.sec-title .view-more .view-more-btn:hover{ color: var(--red); transform: translateX(4px); }
.sec-title .view-more .view-more-btn:focus{ outline: 2px solid var(--sky-deep); outline-offset: 3px; }

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll (driven by public/js/theme-modern.js)                  */
/* ---------------------------------------------------------------------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > *{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal-stagger].is-visible > *{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1){ transition-delay: .05s; }
[data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay: .13s; }
[data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay: .21s; }
[data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay: .29s; }
[data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay: .37s; }
[data-reveal-stagger].is-visible > *:nth-child(6){ transition-delay: .45s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-stagger] > *{ opacity: 1 !important; transform: none !important; transition: none !important; }
  *{ scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------- */
/* Header / navigation                                                     */
/* ---------------------------------------------------------------------- */
.rs-toolbar{ background: var(--navy-dark) !important; }
.rs-toolbar, .rs-toolbar *{ color: #dfe1f5; font-size: 13px; }

.rs-header-top{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.header-contact .widget-text .info-text a{ color: var(--ink); font-weight: 600; }
.header-contact .widget-text .info-text a span{
  display: block; color: var(--body); font-weight: 400;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.header-contact .glyph-icon{ color: var(--red); }
.logo-area img{ max-height: 58px; width: auto; }

.menu-area,
.home1 .menu-area{
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: saturate(160%) blur(6px);
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s var(--ease);
  position: relative;
  z-index: 500;
}
.menu-area.is-scrolled{ box-shadow: var(--sh-md); }

.rs-menu.nav-menu > li > a,
.rs-menu > .nav-menu > li > a{
  color: var(--ink) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  position: relative;
}
.rs-menu ul.nav-menu > li > a::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  width: 0; height: 2px;
  background: var(--red);
  border-radius: var(--r-pill);
  transition: width .22s var(--ease), left .22s var(--ease);
}
.rs-menu ul.nav-menu > li:hover > a::after,
.rs-menu ul.nav-menu > li.current-menu-item > a::after{
  width: 22px; left: calc(50% - 11px);
}
.rs-menu ul.nav-menu > li:hover > a,
.rs-menu ul.nav-menu > li.current-menu-item > a{ color: var(--navy) !important; }

.mega-menu, .rs-menu ul.sub-menu{
  background: var(--surface) !important;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg) !important;
  border: 1px solid var(--line);
  z-index: 1000 !important;
}
.rs-menu ul.sub-menu{ overflow: hidden; }
.rs-menu ul.sub-menu li a,
.mega-menu li a{ color: var(--body) !important; font-size: 14px; }
.rs-menu ul.sub-menu li a:hover,
.mega-menu li a:hover{ color: var(--navy) !important; background: var(--navy-tint); }
.mega-rs h2{ color: #ffffff; }
.rs-menu-toggle{ color: var(--navy); }

/* ---------------------------------------------------------------------- */
/* Nav menu icons — one distinct, premium-muted color per item; the label  */
/* text itself stays the existing dark/navy (via the color rule above) so */
/* only the icon accents read as colorful, per request. Icons reuse the   */
/* FA4 library already loaded in header.blade.php (font-awesome.min.css)  */
/* — no new icon dependency added.                                        */
/* ---------------------------------------------------------------------- */
.rs-menu.nav-menu > li > a,
.rs-menu > .nav-menu > li > a{
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-icon{
  font-size: 19px;
  line-height: 1;
  display: inline-block;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.nav-label{ display: inline-block; }

.nav-icon-home{ color: var(--red); }
.nav-icon-about{ color: var(--sky-deep); }
.nav-icon-ese{ color: #7c5cbf; }
.nav-icon-gate{ color: #c9821a; }
.nav-icon-net{ color: #0e93a6; }
.nav-icon-test{ color: #2f9e5c; }
.nav-icon-fee{ color: #0d8a72; }
.nav-icon-contact{ color: #d1447a; }

/* Subtle hover/active lift — the label color swap and underline are
   already handled by the existing hover/current-menu-item rules above;
   this only adds the icon's own gentle motion so the color system is
   never flattened by the active/hover state. */
.rs-menu ul.nav-menu > li:hover > a .nav-icon,
.rs-menu ul.nav-menu > li.current-menu-item > a .nav-icon{
  transform: translateY(-2px) scale(1.08);
}

/* Root-cause fix #1: the base template ships a dead rule
   (".rs-mega-menu > a span:after") meant for a dropdown-arrow glyph, which
   never fired because those links never contained a <span>. Now that
   ESE/GATE/NET use a real <span class="nav-label"> for their text, that
   old selector starts matching and would silently inject an unwanted
   arrow character next to those three labels only. Neutralized here
   rather than editing the legacy rule itself. */
.nav-menu .rs-mega-menu > a .nav-label:after{ content: none !important; }

/* Root-cause fix #2: rsmenu-main.css hides ALL nav icons below 1080px
   ("@media (max-width:1080px){ .nav-menu > li > a i{ display:none } }") —
   presumably written for a version of this template that never actually
   shipped icons. That rule would silently erase every icon added above on
   any screen 1080px and narrower (including common laptop/tablet widths).
   Restored here with matching/higher specificity. */
@media (max-width: 1080px){
  .nav-menu > li > a .nav-icon{
    display: inline-block !important;
  }
}
@media (max-width: 575px){
  .nav-icon{ font-size: 17px; }
}

/* ---------------------------------------------------------------------- */
/* Desktop nav width — the menu-links block now spreads across ~70% of    */
/* the available header row instead of hugging the left edge (its old     */
/* fixed 40px-per-item margin left the row mostly empty). Flexbox with    */
/* space-between distributes the 8 items evenly across that width;        */
/* centering it (rather than pinning to one side) keeps empty space        */
/* balanced on both edges instead of piling up on one side. Scoped to     */
/* desktop only — mobile/tablet keep the template's existing stacked      */
/* hamburger menu untouched. */
/* ---------------------------------------------------------------------- */
@media (min-width: 992px){
  .rs-menu > .nav-menu,
  .rs-menu.nav-menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 74%;
    margin: 0 auto;
  }
  /* Same selector/specificity as the legacy fixed-margin rules (base +
     the 992-1199px tablet-range override in responsive.css) so this wins
     purely by loading later in the cascade — no !important needed. Flex
     `justify-content: space-between` is now the single source of spacing
     instead of stacking margins on top of it. */
  .home1 .rs-menu ul.nav-menu > li{
    margin-right: 0;
  }
  .rs-menu.nav-menu > li > a,
  .rs-menu > .nav-menu > li > a{
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------- */
/* Hero (slider + enquiry) — premium split composition, not a blue block   */
/* ---------------------------------------------------------------------- */
.hero-band{
  position: relative;
  background: linear-gradient(155deg, var(--surface) 0%, var(--navy-tint) 62%, var(--sky) 130%);
  padding: 20px 0 36px;
  overflow: hidden;
}
.hero-band::before, .hero-band::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
}
.hero-band::before{
  width: 220px; height: 220px;
  right: 6%; top: -60px;
  background: radial-gradient(circle at 30% 30%, rgba(226,35,26,.16), transparent 70%);
}
.hero-band::after{
  width: 320px; height: 320px;
  left: -80px; bottom: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(27,20,100,.10), transparent 70%);
}
.hero-band .container{ position: relative; z-index: 1; }

/* Slider and enquiry card must match height exactly on desktop. Bootstrap 4's
   .row is a flex container (align-items: stretch by default), so the two
   columns already stretch to equal height — the fix is making every layer
   inside the slider column (including Owl Carousel's own generated
   wrapper markup, which uses "fade" transitions and needs an explicit
   height since faded slides are position-stacked, not stacked in flow)
   actually fill that stretched height down to the image itself. */
@media (min-width: 768px){
  .hero-band .row{ align-items: stretch; }
  .hero-band .row > [class*="col-"]{ display: flex; }
  .hero-band .row > [class*="col-"] > *{ width: 100%; }
}

/* Compact, premium banner: height is driven by the slider itself (aspect
   ratio + clamp), NOT by matching the enquiry form's natural content
   height. Previously the two columns force-stretched to equal height,
   which made both the slider AND the enquiry card balloon to match the
   taller of the two (the form). Now the slider owns its own height and
   the enquiry card is a flexible container that fills whatever height the
   slider ends up with, instead of the other way around. */
#rs-slider{
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  height: clamp(220px, 26vw, 360px);
}
#home-slider,
#home-slider .owl-stage-outer,
#home-slider .owl-stage,
#home-slider .owl-item,
#home-slider .item{
  height: 100%;
}
#home-slider{ border-radius: var(--r-xl); overflow: hidden; flex: 1; }
#home-slider .item{
  overflow: hidden;
}
#home-slider .item img,
#home-slider .item svg,
#home-slider .owl-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Below the breakpoint where the columns stack, let the slider use its own
   compact aspect ratio instead of forcing a match against the form. */
@media (max-width: 767px){
  #rs-slider{ height: auto; }
  #home-slider .item{ aspect-ratio: 16 / 9; }
}

/* Enquiry card: compact, premium form that fills the slider's (now
   compact) height instead of dictating it. Content is vertically centered
   so there's no large empty gap when the card has extra room. */
.hero-band .course-card-box{
  background: linear-gradient(165deg, var(--navy) 0%, #241a7a 100%) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-navy);
  padding: 20px 22px !important;
  margin-top: 0 !important;
  border: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}
.hero-band .chead{
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 10px;
}
.hero-band .inputmm{ padding: 3px 0 !important; list-style: none; }
.hero-band .form-control{
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  min-height: 38px;
  padding: 6px 12px;
  font-size: 13.5px;
}
.hero-band .form-control::placeholder{ color: rgba(255,255,255,.65); }
.hero-band .form-control:focus{
  background: rgba(255,255,255,.14);
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(226,35,26,.25);
  color: #fff;
}
.hero-band select.form-control option{ color: var(--ink); }
.hero-band .btn-danger{
  background: var(--red) !important;
  border-color: var(--red) !important;
  border-radius: var(--r-sm);
  font-weight: 700;
  padding: 8px 20px;
  width: 100%;
  box-shadow: 0 10px 24px rgba(226,35,26,.35);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.hero-band .btn-danger:hover{ transform: translateY(-2px); filter: brightness(1.06); }

/* ---------------------------------------------------------------------- */
/* Buttons — clear hierarchy: red primary CTA, navy secondary, ghost       */
/* ---------------------------------------------------------------------- */
.readon, .readon2, .btn{
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease), background-color .15s var(--ease);
}
.readon:hover, .readon2:hover, .btn:hover{ transform: translateY(-2px); }
.btn-danger{
  background: var(--red) !important; border-color: var(--red) !important;
  box-shadow: 0 10px 24px rgba(226,35,26,.28);
}
.btn-danger:hover{ background: var(--red-dark) !important; border-color: var(--red-dark) !important; }
.btn-primary{ background: var(--navy) !important; border-color: var(--navy) !important; }
.btn-primary:hover{ background: var(--navy-dark) !important; border-color: var(--navy-dark) !important; }
.custom_d.btn-danger{ box-shadow: var(--sh-lg); font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* Services (icon row) — DB-authored content, styled via shared classes    */
/*                                                                          */
/* The original theme (style.css) styles .services-item with a hard-coded */
/* !important dark-blue-gradient background, absolute-positioned icon     */
/* circle (top:-50px, z-index:-1) and light (#ccc/#fff) text meant for     */
/* that dark background. Because that rule carries !important, it beat    */
/* the plain (non-!important) light-card version originally added here,   */
/* so the cards kept rendering with legacy positioning while any loose    */
/* DB-authored intro text above them (plain <h2>/<p>, no special class)    */
/* sat on this section's plain white background — an invisible-text bug.  */
/* Fully re-owning the component with !important (matching the original's */
/* specificity/importance) and switching the icon to static, in-flow      */
/* positioning removes the fragile absolute/negative-offset dependency    */
/* and gives every card equal height via native Bootstrap row/col stretch */
/* behavior — no HTML changes required.                                   */
/* ---------------------------------------------------------------------- */
.rs-services{ padding: 56px 0 16px; background: var(--surface); }
.rs-services h1, .rs-services h2, .rs-services h3, .rs-services h4, .rs-services h5{
  color: var(--ink) !important;
}
.rs-services p, .rs-services li, .rs-services span{ color: var(--body) !important; }
.rs-services a:not(.btn):not(.services-item){ color: var(--sky-deep) !important; }

/* Equal-height cards: Bootstrap's .row is already a flex container with
   align-items:stretch, so the column stretches — we just need the visible
   card box inside each column to actually fill that stretched height. */
.rs-services-style1 .row{ display: flex; flex-wrap: wrap; }
.rs-services-style1 .row > [class*="col-"]{ display: flex; margin-bottom: 24px; }
.rs-services-style1 .services-item{
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  background: var(--surface) !important;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  padding: 32px 16px 26px !important;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.rs-services-style1 .services-item:hover{
  box-shadow: var(--sh-md);
  transform: translateY(-6px);
  border-color: transparent;
  background: var(--surface) !important;
}
.rs-services-style1 .services-icon{
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  margin: 0 auto 18px !important;
  z-index: 1 !important;
  width: 76px !important; height: 76px !important;
  line-height: 76px !important;
  font-size: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--sky-deep) 100%) !important;
  color: #ffffff !important;
  box-shadow: var(--sh-md);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.rs-services-style1 .services-item:hover .services-icon{
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  transform: translateY(-3px) scale(1.05);
}
.rs-services-style1 .services-icon i{ color: inherit !important; }
.rs-services-style1 .services-desc{ margin-top: 0; flex: 1; width: 100%; }
/* Use the full card width for the text (a narrower max-width actually
   forces MORE line breaks on long, unedited admin copy — counterproductive).
   Instead: full width + a slightly smaller size + text-wrap:balance, so
   the longest strings settle into a clean two lines instead of three. */
.rs-services-style1 .services-desc .services-title{
  display: block;
  color: var(--ink) !important;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  max-width: 100%;
  width: 100%;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.rs-services-style1 .services-desc p{
  color: var(--body) !important;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 100%;
  width: 100%;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.rs-services-style1 .services-item:hover .services-desc p,
.rs-services-style1 .services-item:hover .services-desc .services-title{
  color: var(--ink) !important;
}

/* ---------------------------------------------------------------------- */
/* About sections — image depth + DB content cascade                      */
/* ---------------------------------------------------------------------- */
.rs-about{ background: var(--surface); }
.about-img{
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.about-img::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}
.about-img img{ border-radius: var(--r-xl) !important; transition: transform .5s var(--ease); }
.about-img:hover img{ transform: scale(1.04); }
.rs-about .about-desc p{ text-align: left; color: var(--body); }
.rs-about .about-title, .rs-about h2, .rs-about h3{ color: var(--ink); }

/* The second "About" content block (title_five) reads as a highlights/
   feature block in the source data — give it the page's one deliberate
   dark, premium treatment so the homepage has real rhythm rather than an
   endless white/blue loop. */
#rs-about:nth-of-type(2), .rs-about + .rs-about{ background: var(--surface); }

/* Layered, colorful-but-professional background: a navy→deep-red diagonal
   wash plus soft glowing blurred shapes, instead of one flat rectangle. */
.rs-about.bg-navy-feature{
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, #201761 45%, var(--navy-dark) 100%);
  overflow: hidden;
}
.rs-about.bg-navy-feature::before,
.rs-about.bg-navy-feature::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(6px);
}
.rs-about.bg-navy-feature::before{
  width: 420px; height: 420px;
  top: -140px; right: -120px;
  background: radial-gradient(circle at 35% 35%, rgba(226,35,26,.30), transparent 70%);
}
.rs-about.bg-navy-feature::after{
  width: 360px; height: 360px;
  bottom: -160px; left: -100px;
  background: radial-gradient(circle at 35% 35%, rgba(47,123,196,.28), transparent 70%);
}
.rs-about.bg-navy-feature .container{ position: relative; z-index: 1; }

/* Glassmorphism panel wrapping the DB-authored content, so the text reads
   as one deliberate premium surface rather than sitting loose on the
   gradient. */
.navy-feature-panel{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-navy);
  padding: 44px clamp(20px, 4vw, 48px);
  margin-left: 0; margin-right: 0;
}

.rs-about.bg-navy-feature,
.rs-about.bg-navy-feature p,
.rs-about.bg-navy-feature h1,
.rs-about.bg-navy-feature h2,
.rs-about.bg-navy-feature h3,
.rs-about.bg-navy-feature h4,
.rs-about.bg-navy-feature li,
.rs-about.bg-navy-feature span{ color: #f2f3fc; }
.rs-about.bg-navy-feature .about-desc p{ color: #cfd2ee; }
.rs-about.bg-navy-feature h1, .rs-about.bg-navy-feature h2, .rs-about.bg-navy-feature h3{
  position: relative;
  font-size: clamp(24px, 2.6vw, 32px);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.rs-about.bg-navy-feature h1::after, .rs-about.bg-navy-feature h2::after, .rs-about.bg-navy-feature h3::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red), var(--sky-deep));
}
.rs-about.bg-navy-feature p{
  max-width: 900px;
  line-height: 1.85;
  margin-bottom: 16px;
}
.rs-about.bg-navy-feature strong, .rs-about.bg-navy-feature b{
  color: #ffffff;
  background: rgba(226,35,26,.18);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Scoped fix: the "Why BrainStorm is Best GATE/ESE Coaching?" accordion
   lives inside this same dark .bg-navy-feature section (it's part of the
   admin-authored title_five content), but the accordion body itself has
   its OWN light/white background (set in the accordion rules below this
   one, and in style.css). The rules directly above are correct for text
   sitting straight on the dark gradient — but CSS gives a same-element
   color declaration priority over an inherited one regardless of the
   ancestor's specificity, so that near-white paragraph/badge styling was
   leaking into the accordion's white card-body and making the text nearly
   invisible there. Rather than touching the global .acdn-title/.card-body
   rules (which many other pages rely on) or removing anything above (used
   correctly elsewhere in this same section), this is a dedicated,
   self-contained override scoped ONLY to an accordion's card-body when
   it's nested inside .bg-navy-feature — it cannot affect any other
   section or page, and every selector here is deliberately more specific
   than the rules above so it always wins. */
.rs-about.bg-navy-feature .card-body,
.rs-about.bg-navy-feature .card-body p,
.rs-about.bg-navy-feature .card-body li,
.rs-about.bg-navy-feature .card-body span,
.rs-about.bg-navy-feature .card-body div{
  color: var(--body) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.rs-about.bg-navy-feature .card-body h1,
.rs-about.bg-navy-feature .card-body h2,
.rs-about.bg-navy-feature .card-body h3,
.rs-about.bg-navy-feature .card-body h4,
.rs-about.bg-navy-feature .card-body h5,
.rs-about.bg-navy-feature .card-body h6{
  color: var(--ink) !important;
}
.rs-about.bg-navy-feature .card-body strong,
.rs-about.bg-navy-feature .card-body b{
  color: var(--navy) !important;
  background: var(--red-tint) !important;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Accordions (.acdn-title / rs-accordion-style1) manage their own contrast
   regardless of the section they're placed in — collapsed state has a
   light background (from style.css) and must always get dark text;
   expanded state has a red/dark background and must always get white
   text. These need to win over ANY ancestor text-color rule (including
   .bg-navy-feature above), so the colors are !important on purpose. */
.rs-accordion-style1 .card{ margin-bottom: 14px; }
.rs-accordion-style1 .card .card-header{ margin-bottom: 0 !important; }
.acdn-title,
.acdn-title.collapsed,
.rs-accordion-style1 .card .card-header .acdn-title{
  background-color: var(--surface-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-md) !important;
  height: auto !important;
  min-height: 56px;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center;
  padding: 14px 44px 14px 22px !important;
  box-shadow: var(--sh-sm);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease);
}
.acdn-title:hover,
.acdn-title.collapsed:hover{
  background-color: var(--navy-tint) !important;
  color: var(--navy) !important;
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.acdn-title:after,
.rs-accordion-style1 .card .card-header .acdn-title:after{
  color: var(--navy) !important;
  transition: transform .3s var(--ease), color .25s var(--ease);
}
.acdn-title:not(.collapsed),
.rs-accordion-style1 .card .card-header .acdn-title:not(.collapsed){
  background-color: var(--red) !important;
  color: #ffffff !important;
  border-color: var(--red);
  box-shadow: var(--sh-md);
}
.acdn-title:not(.collapsed):after,
.rs-accordion-style1 .card .card-header .acdn-title:not(.collapsed):after{
  color: #ffffff !important;
}
.acdn-title:focus{ outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.rs-accordion-style1 .card .card-body{
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: 16px 22px 20px;
  line-height: 1.75;
}
.rs-about.bg-navy-feature a:not(.btn){ color: #9fd0ff; }

/* ---------------------------------------------------------------------- */
/* Course cards — 3D-inspired tilt on hover, image zoom, clear hierarchy   */
/* ---------------------------------------------------------------------- */
.rs-courses-2 .row{ perspective: 1200px; }
.rs-courses-2 .cource-item{
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.rs-courses-2 .cource-item:hover{
  box-shadow: var(--sh-lg);
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
}
.cource-img{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  display: block;
}
.cource-img img, .cource-img svg{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .5s var(--ease);
}
.rs-courses-2 .cource-item:hover .cource-img img,
.rs-courses-2 .cource-item:hover .cource-img svg{ transform: scale(1.08); }
.cource-img .image-link{
  position: absolute; right: 14px; bottom: -20px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red);
  color: #fff !important;
  border-radius: 50%;
  box-shadow: var(--sh-md);
  transition: bottom .3s var(--ease);
}
.rs-courses-2 .cource-item:hover .image-link{ bottom: 14px; }
.course-body{ padding: 20px 22px 22px; }
.course-body .course-category{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-bottom: 8px;
}
.course-body .course-title{ font-size: 18px; margin-bottom: 12px; color: var(--ink); }
/* The button HTML itself is free-text, admin-authored content (Summernote
   field on each course) — its destination link is controlled by what the
   admin enters there, not by this template. We only style it consistently
   so whatever markup they use reads as a clear, modern button. */
.course-body .cource-btn, .course-body > div > a, .course-body .mt-auto > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-weight: 700;
  font-size: 13.5px;
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.course-body .cource-btn a{ color: var(--navy); font-weight: 700; font-size: 13.5px; }
.course-body .cource-btn a:hover, .course-body .mt-auto > a:hover{ color: var(--red); }

/* ---------------------------------------------------------------------- */
/* Testimonials — quote-card treatment                                     */
/* ---------------------------------------------------------------------- */
.rs-testimonial .sec-title h2{ color: var(--ink); }
.testimonial-item{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 32px 28px 26px;
  margin: 6px 10px 30px;
  position: relative;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.testimonial-item:hover{ box-shadow: var(--sh-md); transform: translateY(-4px); }
.testimonial-item::before{
  content: "\201C";
  position: absolute;
  top: 14px; right: 24px;
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 1;
  color: var(--red-tint);
}
.testi-img{
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--sh-sm);
  border: 3px solid var(--surface-soft);
}
.testi-img img, .testi-img svg{ width: 100%; height: 100%; object-fit: cover; }
.testi-name{ font-size: 16px; margin-bottom: 6px; color: var(--ink); }
.testi-desc p{ color: var(--body); font-size: 14.5px; }
.owl-nav button, .owl-dot span{ transition: background .2s var(--ease); }
.owl-theme .owl-dots .owl-dot.active span{ background: var(--navy) !important; }

/* ---------------------------------------------------------------------- */
/* Forms (general)                                                         */
/* ---------------------------------------------------------------------- */
.form-control{
  border-radius: var(--r-sm);
  border-color: var(--line);
  min-height: 46px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control:focus{
  border-color: var(--sky-deep);
  box-shadow: 0 0 0 3px rgba(47,123,196,.15);
}

/* ---------------------------------------------------------------------- */
/* Enquiry modal (header.blade.php popup) — full redesign                  */
/*                                                                          */
/* Previous version wrapped the whole form in .course-card-box, a solid    */
/* navy gradient block reused from the hero sidebar — on a compact modal   */
/* that read as one giant dark rectangle with no visible close affordance  */
/* and an inline position:absolute/width:50% hack fighting Bootstrap's     */
/* own centering. This is a from-scratch component: a light, compact card */
/* with a short gradient header band (icon/title/subtitle/close button)    */
/* and a clean white form area below it.                                  */
/* ---------------------------------------------------------------------- */
.enquiry-modal-dialog{
  max-width: 460px;
  width: 100%;
}
@media (max-width: 575px){
  .enquiry-modal-dialog{ max-width: calc(100% - 24px); margin: 12px auto; }
}

/* Smoother, slightly-scaled entrance instead of Bootstrap's default
   straight vertical slide — same .fade/.show hooks BS4 already toggles,
   so no extra JS is needed. */
.enquiry-modal.fade .enquiry-modal-dialog{
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition: transform .32s cubic-bezier(.22,.9,.32,1), opacity .28s ease;
}
.enquiry-modal.show .enquiry-modal-dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.enquiry-modal-content{
  border: none;
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(20,23,42,.35), 0 10px 26px rgba(20,23,42,.18);
  overflow: hidden;
  background: var(--surface);
}

/* Close button — always visible, top-right, on top of the gradient band */
.enquiry-modal-close{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .25s var(--ease);
}
.enquiry-modal-close:hover{ background: rgba(255,255,255,.34); transform: rotate(90deg); }
.enquiry-modal-close:focus{ outline: 2px solid #ffffff; outline-offset: 2px; background: rgba(255,255,255,.34); }

/* Header band: gradient + soft glow shapes, not the whole card */
.enquiry-modal-header{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--sky-deep) 100%);
  padding: 30px 30px 22px;
  text-align: center;
}
.enquiry-modal-header::before{
  content: "";
  position: absolute;
  width: 170px; height: 170px;
  top: -70px; right: -50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(226,35,26,.35), transparent 70%);
  pointer-events: none;
}
.enquiry-modal-header::after{
  content: "";
  position: absolute;
  width: 140px; height: 140px;
  bottom: -70px; left: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.15), transparent 70%);
  pointer-events: none;
}
.enquiry-modal-icon{
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  color: #ffffff;
  font-size: 22px;
}
.enquiry-modal-title{
  position: relative;
  z-index: 1;
  color: #ffffff !important;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 6px;
}
.enquiry-modal-subtitle{
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.85) !important;
  font-size: 13.5px;
  margin-bottom: 0;
}

/* Form area — clean and light, capped height with scroll as a safety net
   on very short viewports rather than ever clipping content. */
.enquiry-modal-body{
  padding: 22px 26px 20px;
  max-height: 72vh;
  overflow-y: auto;
}
.enquiry-field{ margin-bottom: 13px; }
.enquiry-label{
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 5px;
}
.enquiry-input-wrap{ position: relative; }
.enquiry-input-icon{
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--sky-deep);
  font-size: 13.5px;
  pointer-events: none;
}
.enquiry-input-icon-textarea{ top: 15px; transform: none; }
.enquiry-input.form-control{
  height: 42px;
  min-height: 42px;
  padding: 6px 14px 6px 36px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
  font-size: 13.5px;
  box-shadow: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.enquiry-input.form-control::placeholder{ color: #9aa0b4; }
.enquiry-input.form-control:focus{
  border-color: var(--sky-deep) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(47,123,196,.16) !important;
  outline: none;
}
.enquiry-select.form-control{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231b1464' stroke-width='2'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px !important;
}
.enquiry-textarea.form-control{
  height: auto;
  min-height: 76px;
  padding-top: 9px !important;
  line-height: 1.5;
  resize: vertical;
}

.enquiry-submit-btn{
  width: 100%;
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 14px 30px rgba(226,35,26,.32), 0 2px 6px rgba(226,35,26,.24);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.enquiry-submit-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 36px rgba(226,35,26,.38); }
.enquiry-submit-btn:active{ transform: translateY(0); }
.enquiry-submit-btn:focus{ outline: 2px solid var(--navy); outline-offset: 2px; }
.enquiry-submit-btn:disabled{ opacity: .75; cursor: not-allowed; transform: none; filter: none; }

.enquiry-privacy-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 2px;
  text-align: center;
  font-size: 11.5px;
  color: var(--body);
}

/* Backdrop: elegant dark + subtle blur, page stays faintly visible behind it */
.modal-backdrop{
  background-color: rgba(15,15,35,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-backdrop.show{ opacity: 1; }

@media (max-width: 575px){
  .enquiry-modal-header{ padding: 24px 22px 18px; }
  .enquiry-modal-body{ padding: 18px 20px 16px; }
  .enquiry-modal-close{ top: 10px; right: 10px; width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------------- */
/* Footer — premium navy, mandatory light text                             */
/*                                                                          */
/* The footer's entire content (address, phone, email, social links) is   */
/* free-text admin-authored HTML (Main.title_six), not template markup —  */
/* it was very likely originally written/pasted with dark text colors     */
/* (inline styles or inherited from wherever it was authored) intended    */
/* for a light background. Since inline styles beat non-!important class  */
/* rules regardless of specificity, the previous (non-!important) color   */
/* rule below could lose to that inline styling, making the text nearly   */
/* invisible on this section's dark navy gradient. Every rule here is     */
/* !important and deliberately broad so the footer is readable no matter  */
/* what markup/inline styling the stored content contains — without       */
/* editing that content itself. */
/* ---------------------------------------------------------------------- */
.rs-footer{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%) !important;
  padding-top: 0;
  overflow: visible;
}

/* ---------------------------------------------------------------------- */
/* Footer structure — brand/links/contact columns + address + bottom bar.  */
/* Everything here is real: nav routes already used in the header mega     */
/* menu (no invented destinations), title_two/title_seven (the same phone/ */
/* email already shown in the header top bar), and a computed copyright    */
/* year. title_six (the admin's own footer content) still renders exactly */
/* as before, just inside its own contained, properly-spaced area instead  */
/* of being the entire footer.                                             */
/* ---------------------------------------------------------------------- */
.footer-top{ padding: 56px 0 28px; }
.footer-col-title{
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
.footer-col-title::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red), var(--sky-deep));
}
.footer-logo{ max-width: 168px; margin-bottom: 14px; }
.footer-tagline{ font-size: 13.5px; line-height: 1.7; max-width: 280px; margin-bottom: 16px; }
.footer-contact-list{ list-style: none; margin: 0; padding: 0; }
.footer-contact-list li{ margin-bottom: 8px; }
.footer-contact-list a{ font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.footer-contact-list i{ color: var(--red) !important; width: 16px; text-align: center; }
.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li{ margin-bottom: 10px; }
.footer-links a{
  font-size: 13.5px;
  display: inline-block;
  transition: transform .15s var(--ease), color .15s var(--ease);
}
.footer-links a:hover{ transform: translateX(4px); }
.footer-cta-btn{
  display: inline-flex;
  margin-bottom: 14px;
  font-weight: 700;
  border-radius: var(--r-sm);
}
.footer-whatsapp-link{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.footer-whatsapp-link i{ color: #25D366 !important; font-size: 16px; }

.footer-address-area{
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 13.5px;
}

/* Head Office + Branch Office — two compact rows sharing one component so
   they read as a consistent pair, not two different designs. */
.footer-office-area{
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-office-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.footer-office-icon{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #ffffff !important;
  font-size: 14px;
  margin-top: 2px;
}
.footer-office-title{
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 3px;
}
.footer-office-address{
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 520px;
}

.footer-bottom{ padding: 18px 0; }
.footer-copyright{ font-size: 12.5px; margin-bottom: 0; opacity: .85; }

@media (max-width: 767px){
  .footer-office-area{ flex-direction: row; flex-wrap: wrap; gap: 24px; }
  .footer-office-row{ flex: 1 1 240px; }
}
@media (max-width: 575px){
  .footer-office-area{ flex-direction: column; }
  .footer-office-row{ flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .footer-office-address{ max-width: 100%; }
}

@media (max-width: 767px){
  .footer-top{ padding: 40px 0 12px; text-align: center; }
  .footer-col{ margin-bottom: 28px; }
  .footer-col-title::after{ left: 50%; transform: translateX(-50%); }
  .footer-tagline{ margin-left: auto; margin-right: auto; }
  .footer-contact-list a, .footer-whatsapp-link{ justify-content: center; }
  .footer-logo-link{ display: inline-block; }
}
/* Root cause of the "invisible footer icons" report: this wildcard rule
   (".rs-footer *") has TWO classes in its selector (.rs-footer plus the
   .social-icon class inside :not()), giving it specificity (0,2,0). The
   dedicated icon-color rule further down was only ".rs-footer i"
   — one class, one element, specificity (0,1,1). In CSS, class-count is
   compared before element-count, so (0,2,0) silently beat (0,1,1) despite
   looking "more specific" — every icon in the footer was actually being
   painted the body-text lavender colour, not the intended white, and on
   some icons that reads as barely-there. Icons are now explicitly
   excluded from this wildcard so the single dedicated icon rule below is
   the only thing controlling icon colour — one source of truth instead of
   a specificity contest. */
.rs-footer, .rs-footer *:not(.social-icon *):not(i):not(.fa):not([class*="flaticon-"]){
  color: #cfd2ee !important;
}
.rs-footer h1, .rs-footer h2, .rs-footer h3, .rs-footer h4, .rs-footer h5, .rs-footer h6,
.rs-footer strong, .rs-footer b{ color: #ffffff !important; }
.rs-footer a:hover, .rs-footer a:hover *{ color: var(--red) !important; }
.rs-footer i, .rs-footer .fa, .rs-footer [class*="flaticon-"]{
  color: #ffffff !important;
  opacity: 1 !important;
  font-style: normal;
}
.rs-footer hr{ border-color: rgba(255,255,255,.12); }
.rs-footer .widget-text, .rs-footer .info-text, .rs-footer address{
  display: block;
}
/* Social icons already get a deliberate white circle + brand-blue icon
   from the footer's own inline style block — keep that combo intact
   rather than flattening it to the same light lavender as body text. */
.rs-footer .social-icon li a{
  color: var(--sky-deep) !important;
  background: #ffffff !important;
}
.rs-footer .social-icon li a:hover{
  color: #ffffff !important;
  background: var(--red) !important;
}
.social-icon li a{
  border-radius: 50%;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.social-icon li a:hover{ transform: translateY(-3px); background: var(--red) !important; }

/* ---------------------------------------------------------------------- */
/* Floating elements — Enquire Now / WhatsApp+Call / Back-to-top           */
/*                                                                          */
/* Each of these previously had its own ad-hoc fixed-position rule from    */
/* different legacy stylesheets (header inline style used rotate(90deg)    */
/* + left:-45px/top:250px with z-index:9; footer inline style used         */
/* bottom:100px/right:0 with z-index:999; #scrollUp had no explicit        */
/* bottom/right at all). None of them agreed on a stacking order, and      */
/* z-index:9 on the Enquire Now tab put it below the sticky nav             */
/* (z-index:500) and mega-menu (z-index:1000), which is why it could end   */
/* up hidden. They're unified here into one consistent system: Enquire     */
/* Now anchored bottom-left, WhatsApp/Call stacked bottom-right, Back-to-  */
/* top above them — all comfortably above the nav/mega-menu but below      */
/* Bootstrap's modal layer (backdrop 1040 / modal 1050) so the enquiry     */
/* modal always opens on top of them.                                     */
/* ---------------------------------------------------------------------- */
.custom_d{
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
  top: auto !important;
  transform: none !important;
  z-index: 1020 !important;
  max-height: none !important;
  border-radius: var(--r-pill) !important;
  padding: 12px 20px !important;
  font-size: 14px;
}
@media (max-width: 575px){
  .custom_d{ left: 14px !important; bottom: 14px !important; padding: 10px 16px !important; font-size: 13px; }
}

.whatsappIcon.whatsapp{
  position: fixed !important;
  right: 20px !important;
  left: auto !important;
  bottom: 20px !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-top: 0 !important;
  z-index: 1015 !important;
}
.whatsappIcon.whatsapp ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.whatsappIcon.whatsapp li{ margin: 0; }
.whatsappIcon.whatsapp a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-md);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.whatsappIcon.whatsapp a:hover{ transform: translateY(-3px) scale(1.05); box-shadow: var(--sh-lg); }
.whatsappIcon.whatsapp img{ width: 26px; height: 26px; }
@media (max-width: 575px){
  .whatsappIcon.whatsapp{ right: 14px !important; bottom: 14px !important; }
  .whatsappIcon.whatsapp a{ width: 44px; height: 44px; }
  .whatsappIcon.whatsapp img{ width: 22px; height: 22px; }
}

#scrollUp{
  position: fixed !important;
  right: 20px !important;
  left: auto !important;
  bottom: 152px !important;
  top: auto !important;
  z-index: 1010 !important;
  border-radius: var(--r-md);
  background: var(--navy);
  box-shadow: var(--sh-md);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
#scrollUp:hover{ background: var(--red); transform: translateY(-3px); }
#scrollUp i{
  position: static !important;
  left: auto !important;
  right: auto !important;
  background-color: transparent !important;
  height: 40px;
  width: 42px;
  color: #ffffff;
  line-height: 40px;
  display: block;
  text-align: center;
}
@media (max-width: 575px){
  #scrollUp{ right: 14px !important; bottom: 128px !important; }
}

/* ---------------------------------------------------------------------- */
/* Tables inside DB-authored content (fee structure, syllabus, etc.)      */
/* ---------------------------------------------------------------------- */
.container table{
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  font-size: 14.5px;
  color: var(--ink);
}
.container table th{ background: var(--navy) !important; color: #fff !important; text-align: left; }
.container table td, .container table th{ padding: 10px 14px; }

/* ---------------------------------------------------------------------- */
/* Legacy DB-content compatibility utilities                               */
/*                                                                          */
/* footer.blade.php used to carry a large, twice-duplicated inline <style> */
/* block (the same ~90 lines appeared verbatim two times) mixing dead      */
/* rules for classes that don't exist anywhere in this project (e.g.       */
/* .menu-area-two, .mainmenu-two — a second-menu variant this site never   */
/* uses) with a handful of short utility class names (.colo/.colf/.colt,   */
/* .listing-fullsize, .fet-icon) that admin-authored WYSIWYG content might */
/* plausibly still reference. Those few are kept here — deduplicated, and  */
/* using the project's actual design tokens/fonts instead of a hard-coded  */
/* "roboto" font-family that was never loaded on this site — everything    */
/* else (the dead selectors, a stray global .nav-link diagonal-stripe      */
/* gradient override, and a .sec-spacer/.social-icon redefinition that     */
/* was silently fighting the real design system because it loaded later   */
/* in the document — see below) was dropped rather than migrated.          */
/* ---------------------------------------------------------------------- */
.colo{ color: var(--red); }
.colf{ color: #4267b2; }
.colt{ color: #665ed0; }
.listing-fullsize li{
  list-style: none;
  width: 100%;
  margin-bottom: 5px;
  padding-left: 18px;
  position: relative;
}
.listing-fullsize li::before{
  content: "\f0da";
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  color: var(--red);
}
.fet-icon img{ width: 54px; }

/* ---------------------------------------------------------------------- */
/* Inner pages — page.blade.php (About, GATE, ESE, NET, Fee Structure,     */
/* Contact, every other admin-authored page) and the 404 view. These used  */
/* to render with zero design-system treatment: raw admin HTML dropped     */
/* into a bare .container with a couple of orphaned/meaningless grid       */
/* classes (order-sm-1, col-xl-12 with no .row parent). Now every inner    */
/* page gets the same premium first impression as the homepage (a compact  */
/* gradient hero + breadcrumb) and the admin-authored content gets real    */
/* typography treatment instead of relying on browser defaults.            */
/* ---------------------------------------------------------------------- */
.page-hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--sky-deep) 100%);
  padding: 46px 0 34px;
  text-align: center;
}
.page-hero::before{
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  top: -100px; right: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(226,35,26,.28), transparent 70%);
  pointer-events: none;
}
.page-hero-title{
  position: relative;
  z-index: 1;
  color: #ffffff !important;
  font-size: clamp(26px, 3.4vw, 38px);
  margin-bottom: 10px;
}
.page-breadcrumb{
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  font-weight: 600;
}
.page-breadcrumb a{ color: rgba(255,255,255,.8); }
.page-breadcrumb a:hover{ color: #ffffff; }
.page-breadcrumb-sep{ margin: 0 8px; color: rgba(255,255,255,.5); }
.page-breadcrumb-current{ color: #ffffff; }

.page-content-wrap{ padding-top: 48px; }
.page-main-content{ color: var(--body); font-size: 15.5px; line-height: 1.85; }
.page-main-content h1, .page-main-content h2, .page-main-content h3,
.page-main-content h4, .page-main-content h5{
  color: var(--ink);
  font-weight: 800;
  margin-top: 28px;
  margin-bottom: 14px;
}
.page-main-content h1:first-child, .page-main-content h2:first-child,
.page-main-content h3:first-child{ margin-top: 0; }
.page-main-content p{ margin-bottom: 16px; }
.page-main-content ul, .page-main-content ol{ margin-bottom: 16px; padding-left: 22px; }
.page-main-content li{ margin-bottom: 6px; }
.page-main-content img{ max-width: 100%; height: auto; border-radius: var(--r-md); }
.page-main-content a:not(.btn){ color: var(--sky-deep); text-decoration: underline; text-decoration-color: rgba(47,123,196,.35); }
.page-main-content a:not(.btn):hover{ color: var(--navy); }

.page-sidebar-widget{
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  position: sticky;
  top: 90px;
}
.page-sidebar-widget .subtitle{
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.page-sidebar-widget ul{ list-style: none; margin: 0; padding: 0; }
.page-sidebar-widget li{ border-bottom: 1px solid var(--line); }
.page-sidebar-widget li:last-child{ border-bottom: none; }
.page-sidebar-widget a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
  color: var(--body);
  font-size: 14px;
  font-weight: 600;
  transition: color .15s var(--ease), padding-left .15s var(--ease);
}
.page-sidebar-widget a i{ color: var(--red); font-size: 12px; }
.page-sidebar-widget a:hover{ color: var(--navy); padding-left: 6px; }

.page-not-found{
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 0 12px;
}
.page-not-found-code{
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--navy), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.page-not-found > i{ font-size: 40px; color: var(--sky-deep); margin-bottom: 14px; display: inline-block; }
.page-not-found h2{ color: var(--ink); margin-bottom: 10px; }
.page-not-found p{ color: var(--body); margin-bottom: 24px; }
.page-not-found-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-outline-navy{
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.btn-outline-navy:hover{ background: var(--navy); color: #fff; }

@media (max-width: 991px){
  .page-sidebar-widget{ position: static; margin-top: 12px; }
}
@media (max-width: 575px){
  .page-hero{ padding: 34px 0 26px; }
}

/* ---------------------------------------------------------------------- */
/* Responsive guardrails                                                   */
/* ---------------------------------------------------------------------- */
html, body{ max-width: 100%; overflow-x: hidden; }
@media (max-width: 991px){
  .sec-spacer{ padding: 56px 0 !important; }
  .hero-band{ padding: 24px 0 36px; }
  .rs-courses-2 .cource-item:hover{ transform: translateY(-4px); }
}
/* The two hero columns (slider / enquiry form) only actually stack below
   the Bootstrap `md` breakpoint (767px) — col-md-8 / col-md-4 stay side by
   side from 768px up, so the "stacked" top margin must only apply there,
   not from 991px, or it misaligns the card while still side-by-side. */
@media (max-width: 767px){
  .hero-band .course-card-box{ margin-top: 24px !important; }
}
@media (max-width: 575px){
  .sec-title h2{ font-size: 24px; }
  .testimonial-item{ margin: 6px 4px 24px; padding: 24px 20px; }
  .navy-feature-panel{ padding: 30px 18px; }
  .rs-services-style1 .services-item{ padding: 30px 18px 24px !important; }
  .acdn-title, .acdn-title.collapsed{ padding: 12px 40px 12px 16px !important; font-size: 15px; }
}

/* ---------------------------------------------------------------------- */
/* Hero Intro — headline + CTA band, sits above the slider/enquiry hero    */
/* ---------------------------------------------------------------------- */
.hero-intro{
  position: relative;
  background: linear-gradient(180deg, var(--navy-tint) 0%, var(--surface) 100%);
  padding: 56px 0 12px;
}
.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-tint);
  color: var(--red-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.hero-title{
  font-size: 42px;
  line-height: 1.18;
  margin-bottom: 18px;
  color: var(--ink);
}
.hero-title span{ color: var(--navy); }
.hero-sub{
  font-size: 17px;
  color: var(--body);
  max-width: 560px;
  margin-bottom: 26px;
}
.hero-cta-group{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.hero-btn{
  border-radius: var(--r-sm);
  font-weight: 700;
  padding: 13px 26px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.hero-btn.btn-danger{
  background: var(--red) !important;
  border-color: var(--red) !important;
  box-shadow: 0 10px 24px rgba(226,35,26,.30);
}
.hero-btn.btn-danger:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.hero-btn.btn-outline-light{
  color: var(--navy) !important;
  border-color: var(--navy) !important;
  background: transparent !important;
}
.hero-btn.btn-outline-light:hover{
  background: var(--navy) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.hero-trust-row{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 30px;
}
.hero-trust-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--body) !important;
  font-weight: 600;
  font-size: 14px;
}
.hero-trust-item i{ color: var(--red); }
.hero-trust-item:hover{ color: var(--navy) !important; }

/* Enlarged per request: this used to be a compact col-lg-4 filler card
   next to the headline; it now takes a wider column (col-lg-5, up from
   col-lg-4) and a much more generous internal size so it reads as a real,
   prominent visual anchor rather than a small decorative afterthought. */
.hero-badge-card{
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--navy) 0%, #241a7a 100%);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-navy);
  padding: 64px 44px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.hero-badge-card::before{
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  top: -80px; right: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(226,35,26,.30), transparent 70%);
  pointer-events: none;
}
.hero-badge-card::after{
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  bottom: -80px; left: -50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.10), transparent 70%);
  pointer-events: none;
}
.hero-badge-icon{
  position: relative;
  z-index: 1;
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  margin-bottom: 24px;
}
.hero-badge-card i{
  position: relative;
  z-index: 1;
  font-size: 40px;
  color: var(--red);
  display: inline-block;
}
.hero-badge-card h5{
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 16px;
}
.hero-badge-card p{
  position: relative;
  z-index: 1;
  color: #cfd2ee;
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 0;
}
@media (max-width: 1199px) and (min-width: 992px){
  .hero-badge-card{ padding: 48px 32px; min-height: 300px; }
}

.hero-stats-row{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 26px 0 34px;
  border-top: 1px solid var(--line);
}
.hero-stat-item{ text-align: left; }
.hero-stat-num{
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 34px;
  color: var(--navy);
  line-height: 1;
}
.hero-stat-label{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  text-transform: uppercase;
  letter-spacing: .02em;
}
@media (max-width: 991px){
  .hero-title{ font-size: 32px; }
}
@media (max-width: 767px){
  .hero-intro{ padding: 40px 0 4px; text-align: center; }
  .hero-cta-group{ justify-content: center; }
  .hero-trust-row{ justify-content: center; }
  .hero-stats-row{ justify-content: center; gap: 28px; }
  .hero-stat-item{ text-align: center; }
}

/* ---------------------------------------------------------------------- */
/* Why Choose Us — admin-authored content (title_nine), feature-grid look  */
/* ---------------------------------------------------------------------- */
.rs-why-choose-us{ background: var(--surface-soft); }
.why-choose-content{ row-gap: 24px; }
.why-choose-content > *{
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 28px 24px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.why-choose-content > *:hover{
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.why-choose-content i{ color: var(--red); font-size: 28px; margin-bottom: 12px; display: inline-block; }
.why-choose-content h1, .why-choose-content h2, .why-choose-content h3,
.why-choose-content h4, .why-choose-content h5{ color: var(--ink); margin-bottom: 10px; }
.why-choose-content p{ color: var(--body); margin-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* Final CTA — high-contrast closing band before the footer                */
/* ---------------------------------------------------------------------- */
.rs-final-cta{
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 52px 0;
}
.rs-final-cta h2{ color: #fff; margin-bottom: 8px; font-size: 28px; }
.rs-final-cta p{ color: #cfd2ee; margin-bottom: 0; }
.rs-final-cta .cta-btn{
  background: #fff !important;
  color: var(--navy) !important;
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  padding: 13px 28px;
  box-shadow: var(--sh-md);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.rs-final-cta .cta-btn:hover{ transform: translateY(-2px); box-shadow: var(--sh-lg); }
@media (max-width: 991px){
  .rs-final-cta{ text-align: center; }
  .rs-final-cta .text-lg-right{ text-align: center !important; margin-top: 18px; }
}