/* =============================================================
   SU Website — Design System Override
   Source: docs/mechanical-engineering-olive.vercel.app-DESIGN.md
   Palette: Deep Navy + Vibrant Magenta + Warm Amber
   Type: Poppins (700) headings, Montserrat (400/500/600) UI/body
   Style: Flat (0px radius) institutional, subtle shadow elevation
   Loaded AFTER template style.css to cascade-override variables.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────────────────── */
  --su-navy:           #2B3175;
  --su-navy-dark:      #1A1F50;
  --su-navy-text:      #1C1C1A;
  --su-magenta:        #CC1579;
  --su-magenta-dark:   #A81470;
  --su-amber:          #F8BD23;
  --su-white:          #FFFFFF;
  --su-black:          #000000;

  --su-navy-deep:      #282D72;
  --su-magenta-deep:   #9E2274;
  --su-orange:         #E97E24;
  --su-salmon:         #DF514E;
  --su-red:            #DC2428;
  --su-text-strong:    #111827;
  --su-text-muted:     #5B5B78;
  --su-bg-tint:        #F1F9FD;

  --su-grad-deep:    linear-gradient(135deg, #323075 0%, #CC1579 100%);
  --su-grad-medium:  linear-gradient(135deg, #2D479C 0%, #E44598 100%);
  --su-grad-light:   linear-gradient(135deg, #6F7CBB 0%, #DF9AC3 100%);
  --su-grad-vlight:  linear-gradient(135deg, #B8BDDF 0%, #F4CBDF 100%);

  --font-bangla:    "Hind Siliguri", "Montserrat", sans-serif;

  /* ── Neutrals ──────────────────────────────────────────────── */
  --su-gray-light:        #F2F2F2;
  --su-gray-surface:      #F5F5F5;
  --su-gray-border:       #E8E8E8;
  --su-gray-input-border: #E0E0E0;
  --su-gray-text-muted:   #666666;
  --su-gray-placeholder:  #999999;

  /* ── Override template (rt-*) variables ────────────────────── */
  --rt-primary:        var(--su-navy);
  --rt-primary-1:      var(--su-magenta);
  --rt-primary-2:      var(--su-navy);
  --rt-secondary:      var(--su-navy);
  --rt-hover:          var(--su-magenta);
  --rt-heading:        var(--su-navy);
  --rt-body:           var(--su-navy-text);
  --rt-theme:          var(--su-magenta);
  --rt-border:         var(--su-gray-border);
  --rt-line:           var(--su-gray-border);
  --rt-rating:         var(--su-amber);
  --rt-footer:         var(--su-navy);
  --footer-bg:         var(--su-navy);
  --color-warning:     var(--su-amber);
  --primary-color:     var(--su-navy);

  /* ── Typography ────────────────────────────────────────────── */
  --font-primary:   "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-hind:      var(--font-secondary);
  --rufina:         var(--font-primary);

  /* ── Heading scale (px) — see Section 3 of design spec ───── */
  /* Brand spec hierarchy — see spec §4. Desktop sizes; mobile drops at @media below. */
  --h1: 48px;
  --h2: 32px;
  --h3: 24px;
  --h4: 20px;
  --h5: 18px;
  --h6: 16px;
  --p-l: 16px;
  --p-m: 14px;
  --p-s: 14px;
  --p-xs: 11px;

  --line-height-b1: 20px;
  --line-height-b2: 20px;
  --line-height-b3: 1.5;

  /* ── Flat institutional style ──────────────────────────────── */
  --rt-radius:       0px;
  --rt-radius-btn:   8px;       /* secondary/icon buttons only */
  --rt-radius-badge: 3px;
}

/* === Bootstrap utility reclaim ============================== */
/* Template loads bootstrap.min.css, whose `.text-primary { color:#0d6efd
   !important }` (bright blue) hijacks every Tailwind `text-primary` we use
   (nav grid icons, drawer headings, …). Re-assert the brand navy/magenta.
   design-system.css loads AFTER bootstrap, so this later !important wins. */
.text-primary { color: var(--su-navy) !important; }
.text-accent  { color: var(--su-magenta) !important; }
/* Same clash for backgrounds: bootstrap's .bg-primary{#0d6efd}. */
.bg-primary { background-color: var(--su-navy) !important; }
.bg-accent  { background-color: var(--su-magenta) !important; }

/* Mega-menu links: on hover only a light tint background appears
   (border stays transparent — no box border). */
.su-mega-link:hover {
  background-color: rgba(204, 21, 121, 0.06);
}

/* === Fixed navbar offset ==================================== */
/* The navbar is position:fixed and its height changes per breakpoint
   (mobile = middle bar only; ≥768 adds the top bar; ≥1024 adds the bottom
   nav bar). Offset the page by the matching height so there's no empty gap
   on mobile (a single fixed value over-padded small screens). */
body.page { padding-top: 64px; }
@media (min-width: 768px)  { body.page { padding-top: 104px; } }
@media (min-width: 1024px) { body.page { padding-top: 158px; } }

/* Enable position:sticky. The template sets body{overflow-x:hidden} (and
   overflow:hidden at 768–1199px), which turns body into a scroll container
   and breaks sticky. `clip` clips horizontal overflow WITHOUT creating a
   scroll container, so sticky (the pinned hero) works. */
body.page { overflow-x: clip !important; overflow-y: visible !important; }

/* ---- Global mobile safety-net (responsive pass 2026-06-22) ---- */
/* No media should force the page wider than the viewport. */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
/* Wide content (tables) stays within its wrapper. */
table { max-width: 100%; }
/* Long unbroken strings (emails, URLs) wrap instead of overflowing. */
.su-break { overflow-wrap: anywhere; word-break: break-word; }

/* === Hero (banner v__2) — center the content on mobile/tablet ===== */
/* Template left-aligns the hero content (max-width:550px + left text);
   center it on small screens. Desktop keeps the original left layout. */
@media (max-width: 992px) {
  .banner.v__2 .banner__wrapper .banner__slides--content {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .banner.v__2 .banner__wrapper .banner__slides--content--sub {
    justify-content: center !important;
  }
  .banner.v__2 .banner__wrapper .banner__slides--content--title {
    text-align: center !important;
  }
  .banner.v__2 .banner__wrapper .banner__slides--navigation {
    justify-content: center !important;
  }
}

/* === Typography baseline ===================================== */
body {
  font-family: var(--font-secondary) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: var(--su-navy-text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title, .section-title, .title-area .title {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  /* Color: navy WITHOUT !important so context-specific rules in template
     (e.g. .rts__program--item--title--show { color: white }) and our own
     dark-context overrides further down win on cascade. The body cascade
     keeps headings navy by default; specific selectors override per section. */
  color: var(--su-navy);
  letter-spacing: 0 !important;
}

h1, .h1 { font-size: 48px; line-height: 1.2; }
h2, .h2 { font-size: 32px; line-height: 1.25; }
h3, .h3 { font-size: 24px; line-height: 1.3; }
h4, .h4 { font-size: 20px; line-height: 1.4; font-weight: 600 !important; }
h5, .h5 { font-size: 18px; line-height: 1.4; font-weight: 600 !important; }
h6, .h6 { font-size: 16px; line-height: 1.5; font-weight: 600 !important; }

@media (max-width: 767px) {
  h1, .h1 { font-size: 36px; line-height: 1.2; }
  h2, .h2 { font-size: 24px; }
  h3, .h3 { font-size: 20px; }
  h4, .h4 { font-size: 18px; }
  h5, .h5 { font-size: 16px; }
  h6, .h6 { font-size: 14px; }
}

p, .disc, .description {
  font-family: var(--font-secondary) !important;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--su-navy-text);
}

/* === Links =================================================== */
a {
  color: var(--su-navy);
  transition: color 0.25s ease;
  text-decoration: none;
}
a:hover {
  color: var(--su-magenta);
}

/* === Primary CTAs (Apply Now / theme buttons) → Magenta ====== */
.rts-theme-btn,
.rts-btn.btn-primary,
a.rts-theme-btn,
button.rts-theme-btn {
  background-color: var(--su-magenta) !important;
  background-image: none !important;
  color: var(--su-white) !important;
  border-radius: 8px !important;
  border: none !important;
  font-family: var(--font-secondary) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  padding: 12px 32px !important;
  line-height: 24px !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.rts-theme-btn:hover,
.rts-btn.btn-primary:hover,
a.rts-theme-btn:hover,
button.rts-theme-btn:hover {
  background-color: var(--su-magenta-dark) !important;
  color: var(--su-white) !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 20px -3px !important;
}

/* === Button variants (brand guide 5 styles) ================== */
.btn-navy,
.btn-amber,
.btn-grad-magenta,
.btn-grad-blue {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  box-shadow: rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.2s ease;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
}

.btn-navy        { background: var(--su-navy-deep); color: var(--su-white); }
.btn-navy:hover  { background: var(--su-navy); color: var(--su-white); box-shadow: rgba(0,0,0,0.2) 0px 12px 20px -3px; }

.btn-amber       { background: var(--su-amber); color: var(--su-navy-text); }
.btn-amber:hover { background: #E6A810; color: var(--su-navy-text); box-shadow: rgba(0,0,0,0.2) 0px 12px 20px -3px; }

.btn-grad-magenta       { background: linear-gradient(135deg, #2D3380 0%, #9E2274 100%); color: var(--su-white); }
.btn-grad-magenta:hover { background: linear-gradient(135deg, #232860 0%, #821C5F 100%); color: var(--su-white); box-shadow: rgba(0,0,0,0.2) 0px 12px 20px -3px; }

.btn-grad-blue       { background: linear-gradient(135deg, #353391 0%, #585BA7 100%); color: var(--su-white); }
.btn-grad-blue:hover { background: linear-gradient(135deg, #2A2876 0%, #4548A0 100%); color: var(--su-white); box-shadow: rgba(0,0,0,0.2) 0px 12px 20px -3px; }

/* CTAs in dark-bg contexts (hero/footer) keep magenta */
.hero-area .rts-theme-btn,
footer .rts-theme-btn {
  background-color: var(--su-magenta) !important;
  color: var(--su-white) !important;
}

/* === Secondary / icon buttons (light gray, 8px radius) ======= */
.search-icon,
.menu-btn,
.header-search-icon,
.icon-btn,
.rts-btn.btn-secondary {
  background-color: var(--su-gray-surface) !important;
  color: var(--su-navy) !important;
  border: 1px solid var(--su-gray-border) !important;
  border-radius: 8px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.search-icon:hover,
.menu-btn:hover,
.header-search-icon:hover,
.icon-btn:hover,
.rts-btn.btn-secondary:hover {
  background-color: var(--su-gray-border) !important;
  color: var(--su-navy-text) !important;
}

/* === Header (white bg, navy text) ============================ */
.header-area,
.header__one,
.header__two,
.header__three,
.header__five,
.header-style-one,
.header-style-two,
.header-style-three,
.header-style-five {
  background-color: var(--su-white) !important;
  border-bottom: 1px solid var(--su-gray-border);
  box-shadow: none !important;
}

.mainmenu > li > a,
.nav-main > ul > li > a {
  color: var(--su-navy) !important;
  font-family: var(--font-secondary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
}
.mainmenu > li > a:hover,
.nav-main > ul > li > a:hover,
.mainmenu > li.active > a,
.nav-main > ul > li.active > a {
  color: var(--su-magenta) !important;
}
.mainmenu > li.active > a {
  border-bottom: 3px solid var(--su-magenta) !important;
}

/* === Top bar (navy bg, white text) =========================== */
.header-top,
.header__top-one,
.header__top-two,
.header__top-three,
.header__top-five,
.top-bar,
.header-top-area {
  background-color: var(--su-navy) !important;
  color: var(--su-white) !important;
  min-height: 42px;
  padding: 12px 0;
}
.header-top a,
.top-bar a,
.header-top-area a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-secondary) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.header-top a:hover,
.top-bar a:hover {
  color: var(--su-white) !important;
}

/* === Inputs (flat, 48px, navy focus ring) ==================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select,
.nice-select {
  background: var(--su-white) !important;
  border: 1px solid var(--su-gray-input-border) !important;
  border-radius: 0px !important;
  font-family: var(--font-secondary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  color: var(--su-navy-text) !important;
  min-height: 48px;
  line-height: 24px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input::placeholder,
textarea::placeholder {
  color: var(--su-gray-placeholder) !important;
  font-weight: 400 !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--su-navy) !important;
  box-shadow: 0 0 0 3px rgba(43, 49, 117, 0.1) !important;
  outline: none !important;
}

label,
.form-label {
  font-family: var(--font-secondary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--su-navy) !important;
  margin-bottom: 8px;
  display: inline-block;
}

/* === Cards / containers (flat, subtle shadow) =============== */
.card,
.rts-card,
.program-card,
.blog-card,
.faculty-card,
.event-card,
.notice-card,
.scholarship-card {
  background: var(--su-white);
  border: none !important;
  border-radius: 0px !important;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 20px 0px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover,
.rts-card:hover,
.program-card:hover,
.blog-card:hover,
.faculty-card:hover,
.event-card:hover,
.notice-card:hover,
.scholarship-card:hover {
  box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px 0px;
}

/* === Footer (navy bg, white text) ============================ */
footer,
.footer-area,
.footer__one,
.footer__two,
.footer__three,
.footer__five,
.footer-style-one,
.footer-style-two {
  background-color: var(--su-navy) !important;
  color: var(--su-white) !important;
}
footer a {
  color: rgba(255, 255, 255, 0.85) !important;
}
footer a:hover {
  color: var(--su-white) !important;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer .title, footer .footer-title {
  color: var(--su-white) !important;
}
footer p, footer .disc {
  color: rgba(255, 255, 255, 0.8) !important;
}
.copyright-area,
.copyright {
  background-color: var(--su-navy-dark) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* === Hero / banner (navy gradient overlay over images) ====== */
.banner-area,
.hero-area,
.banner-style-one,
.banner-style-two,
.page-banner,
.rts-banner-area {
  position: relative;
}
.banner-area::before,
.hero-area::before,
.page-banner::before,
.rts-banner-area::before,
.rts-breadcrumb.breadcumb-bg::before {
  background: linear-gradient(to top, rgba(43, 49, 117, 0.90) 0%, rgba(43, 49, 117, 0.45) 42%, rgba(43, 49, 117, 0.05) 100%) !important;
}
/* Keep hero text readable over the lighter (top) part of the gradient. */
.rts-breadcrumb.breadcumb-bg .section-title,
.rts-breadcrumb.breadcumb-bg .breadcrumb-content .breadcrumb {
  text-shadow: 0 2px 14px rgba(17, 21, 43, 0.45);
}
/* Position helper — ONLY breadcrumb (single-bg container with simple structure).
   Homepage banner variants (.banner.v__1-5) have complex split-3 layouts where
   a ::before overlay would leak past the inner image and show as solid navy
   bars on the sides. Hero text white color is enough for readability. */
.rts-breadcrumb.breadcumb-bg {
  position: relative;
}
.rts-breadcrumb.breadcumb-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rts-breadcrumb.breadcumb-bg > * {
  position: relative;
  z-index: 2;
}
/* Hero heading must be 48px white regardless of template defaults */
.banner-area h1,
.hero-area h1,
.page-banner h1,
.rts-banner-area h1,
.banner__content--title,
.banner__slides--content--title,
.banner__heading__title,
.rts-slider-title,
.rts-breadcrumb .section-title {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 1.2 !important;
  color: var(--su-white) !important;
}
@media (max-width: 767px) {
  .banner-area h1,
  .hero-area h1,
  .page-banner h1,
  .rts-banner-area h1,
  .banner__content--title,
  .banner__slides--content--title,
  .banner__heading__title,
  .rts-slider-title,
  .rts-breadcrumb .section-title {
    font-size: 36px !important;
  }
}
.banner-area p,
.hero-area p,
.page-banner p,
.rts-banner-area p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* === Breadcrumb badge (amber accent per spec) ================ */
.breadcrumb-active,
.badge-status {
  background-color: var(--su-amber) !important;
  color: var(--su-navy-text) !important;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 3px;
}

/* === Section spacing ========================================= */
.rts-section-gap {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 1023px) {
  .rts-section-gap {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}
@media (max-width: 639px) {
  .rts-section-gap {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* === Flat radius reset for common UI containers ============== */
.btn:not(.rts-theme-btn):not(.rts-btn.btn-primary):not(.btn-secondary),
.thumbnail img,
.card img,
.rts-card img {
  border-radius: 0px;
}

/* === Mobile menu (off-canvas) drawer ========================= */
.side-bar,
#side-bar {
  background: var(--su-white) !important;
}
.side-bar .mobile-menu-main a {
  color: var(--su-navy) !important;
  font-family: var(--font-secondary);
  font-weight: 600;
}
.side-bar .mobile-menu-main a:hover {
  color: var(--su-magenta) !important;
}
.close-icon-menu {
  background: var(--su-gray-surface) !important;
  color: var(--su-navy) !important;
  border-radius: 8px !important;
}

/* === Selection / focus accent ================================ */
::selection {
  background-color: var(--su-magenta);
  color: var(--su-white);
}

/* === Accessibility — keep touch targets ≥ 44px =============== */
button, .btn, a.rts-theme-btn {
  min-height: 44px;
}

/* === Amber accent line — homepage hero H1 only =============== */
.home-hero-accent {
  display: block;
  width: 60px;
  height: 4px;
  background: var(--su-amber);
  margin: 20px 0;
  border: none;
}

/* === Bangla font (Hind Siliguri) — opt-in via lang="bn" ====== */
:lang(bn),
[lang="bn"],
.bn {
  font-family: var(--font-bangla) !important;
}

/* === Section header pattern ================================== */
.section-title,
.title-area {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-title .pre-title,
.title-area .pre-title,
.title-area .sub-title,
.section-title__eyebrow {
  font-family: var(--font-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--su-navy) !important;
  margin-bottom: 8px !important;
  display: inline-block;
}
.section-title h2,
.title-area h2,
.section-title__title {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.25 !important;
  color: var(--su-navy) !important;
  margin: 0 0 12px 0 !important;
}
.section-title p,
.title-area p,
.section-title__desc {
  font-family: var(--font-secondary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--su-text-muted) !important;
  max-width: 540px;
  margin: 0 auto !important;
}

/* === Category badge (events, news, blog, breadcrumb) ========= */
.category-badge,
.event-category,
.news-category,
.blog-category {
  display: inline-block;
  background: var(--su-amber);
  color: var(--su-navy-text);
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* === Image-overlay cards — force white text on dark photo backgrounds === */

/* Programs section cards (.rts__program--item has style.backgroundImage) */
.rts__program--item--title,
.rts__program--item--title a {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.rts__program--item--description {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 400 !important;
}
.rts__program--item .rts-nbg-btn,
.rts__program--item .rts-nbg-btn span {
  color: #FFFFFF !important;
}
.rts__program--item--title a:hover {
  color: var(--su-amber) !important;
}

/* NOTE: previously had .rts__section--wrapper.v__2 { color: white } rule here.
   Removed because the same wrapper class is used in /index-three Programs section
   (white bg) AND homepage Campus Life (white bg too). Forcing white made
   "Our Programs" title invisible. White-on-navy band fix lives in .campus.v__2/v__3
   block below — that targets the real dark-bg context by parent class. */

/* Campus life cards — template design: white card with dark text at rest,
   bg image fades in on hover and text turns white. Don't force colors at rest;
   template handles both states correctly. */

/* /index-three campus.v__2 navy band — title and description need white */
.campus.v__2 .campus__right--text--title,
.campus.v__2 .campus__right--text--description,
.campus.v__3 .campus__right--text--title,
.campus.v__3 .campus__right--text--description {
  color: #FFFFFF !important;
}
.campus.v__2 .campus__right--text--description,
.campus.v__3 .campus__right--text--description {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 400 !important;
}

/* Programs section — extend to cover --title--show (visible variant in .v__2) */
.rts__program--item--title--show,
.rts__program--item--title--show a {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ===============================================================
   COMPREHENSIVE SWEEP — re-assert all template `color: var(--rt-white)`
   selectors with !important so our heading-color cascade can't
   override them. Captured via static audit of style.css.
   Excludes removed kid/sc variants.
   =============================================================== */

/* — Homepage hero banners — */
.banner .banner__content--sub,
.banner .banner__content--description p,
.banner.v__2 .banner__wrapper .banner__slides--content--sub,
.banner.v__2 .banner__wrapper .banner__slides--content--title,
.banner.v__2 .banner__wrapper .banner__slides--navigation--single .nav__description {
  color: #FFFFFF !important;
}

/* — Hero slider variants (index-four etc.) — */
.rts-hero-slider-active .swiper-slide-active .rts-slider-content .rts-university-estd span,
.rts-hero-slider.v_2 .rt-slider-btn i {
  color: #FFFFFF !important;
}

/* — PageBanner / breadcrumb (internal pages: about, admission, etc.) — */
.rts-breadcrumb .breadcrumb-content .breadcrumb,
.rts-breadcrumb .breadcrumb-content .breadcrumb li a,
.rts-breadcrumb .breadcrumb-content .breadcrumb-item.active,
.rts-breadcrumb .breadcrumb-content .section-title {
  color: #FFFFFF !important;
}

/* — Section wrapper v__4 (used in some sections with dark bg) — */
.rts__section--wrapper.v__4 .rts__section--title,
.rts__section--wrapper.v__4 .rts__section--description {
  color: #FFFFFF !important;
}

/* — Campus life image cards (hover state reveals overlay content) — */
.campus__life--single:hover .campus__life--single--title a,
.campus__life--single:hover .campus__life--single--description,
.campus__life--single:hover .campus__life--single--button a,
.campus__life--single:hover .campus__life--single--button a i {
  color: #FFFFFF !important;
}

/* — Tuition fee boxes (.v__1 variant + hover) — */
.tution__single--box.v__1 .tution__single--box--title,
.tution__single--box.v__1 .tution__single--box--faculty,
.tution__single--box.v__1 .tution__single--box--feature li,
.tution__single--box:hover .tution__single--box--title,
.tution__single--box:hover .tution__single--box--faculty,
.tution__single--box:hover .tution__single--box--feature li {
  color: #FFFFFF !important;
}

/* — Event cards with hover state — */
.event__card__content .rts__section--subheading,
.event__card__content .event__title,
.event__card__content .event__link .rts-theme-btn {
  color: #FFFFFF !important;
}
.rts-event-section-content .single-event:hover .single-event-content h5,
.rts-event-section-content .single-event:hover .single-event-content-meta,
.rts-event-section-content .single-event:hover .single-event-counter .count-number,
.rts-event-section-content .single-event:nth-child(2n) .single-event-content h5,
.rts-event-section-content .single-event:nth-child(2n) .single-event-content-meta,
.rts-event-section-content .single-event:nth-child(2n) .single-event-counter .count-number,
.rts-event .single-event:hover {
  color: #FFFFFF !important;
}

/* — Feature & "What we offer" sections — */
.feature__left .feature__title,
.feature__left .rts-theme-btn,
.feature__right,
.what__we__offer__wrapper .content__section .content__description,
.what__we__offer__wrapper .content__section .offer__link .rts-theme-btn {
  color: #FFFFFF !important;
}

/* — About feature single items — */
.about__feature .single__af,
.about__feature .single__af p {
  color: #FFFFFF !important;
}

/* — Program single details cards (hover overlay) — */
.program__single--item:hover .program__single--item--title,
.program__single--item:hover .program__single--item--list--item .link__list,
.program__single--item.v__2 .program__single--item--title,
.program__single--item.v__2 .program__single--item--list--item .link__list,
.rts-program-single__content:hover .rts-program-hover .icon,
.rts-program-single__content:hover .rts-program-hover .program-link,
.rts-program-single__content:hover .rts-program-hover p,
.rts-program-single__content:hover .rts-program-hover .about-btn {
  color: #FFFFFF !important;
}

/* — Research procedure cards (primary style + hover) — */
.rts-research-section .research__items .research-procedure.primary-style a,
.rts-research-section .research__items .research-procedure.primary-style p,
.rts-research-section .research__items .research-procedure:hover a,
.rts-research-section .research__items .research-procedure:hover p {
  color: #FFFFFF !important;
}

/* — Campus content (index-three v__2, index-five v__3) — */
.campus.v__3 .campus__right--text--description,
.campus__right--text--title {
  color: #FFFFFF !important;
}

/* — Single procedure / service content cards — */
.single-procedure a:hover,
.single-procedure p,
.single-service-content .single-service .content,
.single-service-content .single-service .content p,
.single__subject .subject__description,
.academy__single__description {
  color: #FFFFFF !important;
}

/* — Scholarship description sections — */
.rts-scholarship-info p,
.rts-scholarship-description .repeating-content .single-information-box .single-info p {
  color: #FFFFFF !important;
}

/* — Single session (timeline/agenda) — */
.single-session-title,
.single-session p {
  color: #FFFFFF !important;
}

/* — Newsletter box — title white + magenta overlay (user request) — */
.rts-newsletter-box-content .newsletter-title {
  color: #FFFFFF !important;
}
/* /index-three CTA above footer: change navy overlay → magenta */
.rts-newsletter-box::before {
  background: var(--su-magenta) !important;
}
/* Mobile only: shrink the newsletter CTA (tighter padding + gaps).
   Desktop layout is unchanged. */
@media screen and (max-width: 576px) {
  .rts-newsletter.v_1 .rts-newsletter-box {
    padding: 20px !important;
  }
  .rts-newsletter-box-content {
    gap: 18px !important;
  }
  .rts-newsletter-box-content .newsletter-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
  }
  .rts-newsletter-box-content .newsletter-form form {
    gap: 14px !important;
  }
  .rts-newsletter-box-content .newsletter-form form input[type=email] {
    padding: 11px 18px !important;
  }
  .rts-newsletter-box-content .newsletter-form form button.rts-nbg-btn {
    padding: 12px 18px !important;
  }
}

/* — Funfact / CTA counter cards — REMOVED unscoped white rule.
   Template's cascade gives:
   - .rts-funfact-wrapper (default, navy bg)        → h2/p white (template line 24468)
   - .rts-funfact.v__1 .rts-funfact-wrapper (white) → __title navy, p navy (lines 24515, 24523)
   - .rts-funfact.v_3 / .v_2 variants               → other colors
   Applying !important on the default broke .v__1 (homepage) — invisible
   navy text rendered white-on-white. Leave template's variants intact. */

/* — About details info — */
.rts-about-details .single-about-info .desc p {
  color: #FFFFFF !important;
}

/* — Header navigation — per-variant per-state colors —
   v__1  = transparent header over dark banner → white text at rest
   v__2/3/5 = solid white header → navy text at rest (template default)
   .header__sticky.fixed (any variant) = solid white sticky header → navy text
   Common: Montserrat 600 font, magenta on hover/active.
*/
.navigation__menu--item__link {
  font-family: var(--font-secondary) !important;
  font-weight: 600 !important;
}
/* v__1 rest = white over banner */
.header.v__1 .navigation__menu--item__link {
  color: #FFFFFF !important;
}
/* v__2/3/5 rest = navy on white header */
.header.v__2 .navigation__menu--item__link,
.header.v__3 .navigation__menu--item__link,
.header.v__5 .navigation__menu--item__link {
  color: var(--su-navy) !important;
}
/* Sticky (.fixed) state — always navy on white sticky header */
.header__sticky.fixed .navigation__menu--item__link {
  color: var(--su-navy) !important;
}
/* Hover / active */
.navigation__menu--item__link:hover,
.navigation__menu--item.active > .navigation__menu--item__link {
  color: var(--su-magenta) !important;
}

/* — Blog hover overlays — */
.rts-blog.v_3 .single-blog:hover,
.rts-blog.v_4 .single-blog:hover,
.rts-blog.v_5 .single-blog:hover {
  color: #FFFFFF !important;
}

/* — Program/category sidebar hover states — */
.rts-sidebar .rts-single-widget.category-widget .single-cat:hover .button-tab {
  color: #FFFFFF !important;
}

/* — Reactheme fee table — */
.reactheme__table [class^=tb-] {
  color: #FFFFFF !important;
}

/* — Catch-all helper for any element using the .rt-white utility — */
.rt-white,
.rt-white * {
  color: #FFFFFF !important;
}

/* Watermark outline ("About University", "Admission Now" etc.) — re-assert
   clip-text fill transparency so heading color cascade doesn't null it.
   Also force single-line + relaxed line-height so multi-word watermarks
   ("Admission Now") don't wrap and overlap each other vertically. */
.bottom-text.rt-clip-text {
  -webkit-text-fill-color: transparent !important;
}
.rts-campus .bottom-text,
.rts-application-area .rts-section-big-text {
  white-space: nowrap !important;
  line-height: 1.1 !important;
}
.rts-campus .bottom-text {
  font-size: 84px !important;
}
.rts-application-area .rts-section-big-text {
  font-size: 76px !important;
}
@media (max-width: 767px) {
  .rts-campus .bottom-text {
    font-size: 56px !important;
  }
  .rts-application-area .rts-section-big-text {
    font-size: 52px !important;
  }
}