/* =========================================================================
   ORIGINAL DESIGN SYSTEM
   Written from scratch to replace copied template CSS. Re-uses the same
   class names the theme/widgets already output (class names are generic
   identifiers, not copyrightable expression) but every rule below —
   colors, spacing, shadows, layout — is original.
   Loads AFTER bootstrap.min.css / fontawesome.min.css / swiper-bundle.min.css
   (those remain: open-source libraries, not the copied template design).
========================================================================= */

/* ---------------------------------------------------------------------
   0. SplitText scroll-reveal support
   main.js (.text-anim2 headings) wraps each line in a
   <div class="split-line"> via GSAP's SplitText, then animates it
   sliding up into view. Without overflow:hidden here, the line can
   render in both its pre-animation and post-animation position at
   once, looking like duplicated/overlapping text.
--------------------------------------------------------------------- */
.split-line{ overflow: hidden; }

/* ---------------------------------------------------------------------
   1. Design tokens
--------------------------------------------------------------------- */
:root{
  /* Brand palette */
  --c-ink:        #1B2430;   /* near-black text / dark surfaces */
  --c-ink-soft:   #2E3A4B;
  --c-teal:       #0F9B8E;   /* primary accent */
  --c-teal-dark:  #0B7A70;
  --c-teal-light: #E4F5F3;
  --c-body:       #5B6472;   /* body text grey */
  --c-line:       #E4E7EC;
  --c-surface:    #F6F8F9;
  --c-white:      #FFFFFF;

  /* Fonts (already enqueued via Google Fonts) */
  --f-heading: "Raleway", sans-serif;
  --f-body:    "Roboto", sans-serif;

  /* Rhythm */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --section-y: 100px;
  --shadow-card: 0 10px 30px rgba(27,36,48,.08);
  --shadow-card-hover: 0 20px 45px rgba(27,36,48,.14);
}
@media (max-width: 991px){ :root{ --section-y: 70px; } }
@media (max-width: 575px){ :root{ --section-y: 56px; } }

/* ---------------------------------------------------------------------
   2. Base
--------------------------------------------------------------------- */
body{
  font-family: var(--f-body);
  color: var(--c-body);
  line-height: 1.75;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--f-heading);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}
a{ color: var(--c-teal); text-decoration: none; transition: .25s; }
a:hover{ color: var(--c-teal-dark); }
img{ max-width: 100%; height: auto; }
.space{ padding-top: var(--section-y); padding-bottom: var(--section-y); }
.space-bottom{ padding-bottom: var(--section-y); }

/* ---------------------------------------------------------------------
   3. Section header pattern (eyebrow + heading), used everywhere
--------------------------------------------------------------------- */
.title-area{ margin-bottom: 48px; }
.sub-title{
  display: inline-block;
  font-family: var(--f-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-teal);
  padding-left: 34px;
  position: relative;
  margin-bottom: 14px;
}
.sub-title::before{
  content:'';
  position:absolute; left:0; top:50%;
  width: 24px; height: 2px;
  background: var(--c-teal);
  transform: translateY(-50%);
}
.sec-title{ font-size: 38px; margin-bottom: 0; }
@media (max-width: 767px){ .sec-title{ font-size: 28px; } }
.sec-text{ font-size: 17px; }
.sec-btn{ text-align: center; }
.box-title{ font-size: 21px; margin-bottom: 8px; }
.box-title a{ color: inherit; }
.box-title a:hover{ color: var(--c-teal); }
.box-text{ margin-bottom: 0; color: var(--c-body); }

/* ---------------------------------------------------------------------
   4. Buttons
--------------------------------------------------------------------- */
.th-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-white);
  background: var(--c-teal);
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--c-teal);
  transition: .3s;
}
.th-btn:hover{ background: var(--c-teal-dark); border-color: var(--c-teal-dark); color: var(--c-white); }
.th-btn.style-border1{ background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.th-btn.style-border1:hover{ background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.th-btn.white-hover{ background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.th-btn.white-hover:hover{ background: transparent; color: var(--c-white); border-color: var(--c-white); }
.th-btn.btn-sm{ padding: 11px 20px; font-size: 14px; }
.th-arrow{ width: 16px; height: 16px; }
.btn-wrap{ display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   5. Header
--------------------------------------------------------------------- */
.th-header{ position: relative; z-index: 50; }
.header-top{ background: var(--c-ink); padding: 8px 0; }
.header-links ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.header-links li{ color: rgba(255,255,255,.85); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.header-links li i{ color: var(--c-teal); }
.header-links a{ color: inherit; }
.header-links a:hover{ color: var(--c-teal); }
.topbar-menu ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-menu li{ position: relative; }
.topbar-menu ul li a{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.85); }
.topbar-menu ul li a:hover{ color: var(--c-teal); }
.topbar-chevron{ font-size: 10px; transition: transform .25s ease; }
.topbar-menu li:hover > a .topbar-chevron{ transform: rotate(180deg); }
.topbar-menu ul.sub-menu{
  display: block;
  position: absolute; top: 100%; left: 0; min-width: 180px;
  background: var(--c-white); box-shadow: var(--shadow-card);
  border-radius: var(--radius-sm); padding: 8px; margin-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s; z-index: 20;
}
.topbar-menu li:hover > ul.sub-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.topbar-menu ul.sub-menu li a{ display: block; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--c-ink); }
.topbar-menu ul.sub-menu li a:hover{ background: var(--c-teal-light); color: var(--c-teal-dark); }
.header-top-right{ gap: 20px; }
.topbar-search{ position: relative; }
.topbar-search input{
  height: 42px; width: 200px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0 44px 0 18px;
  color: var(--c-ink);
  font-size: 14px;
}
.topbar-search input::placeholder{ color: var(--c-body); }
.topbar-search button{
  position: absolute; right: 4px; top: 4px;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: var(--c-teal); color: var(--c-white);
}
@media (max-width: 767px){ .topbar-search{ display: none; } }

.menu-area{ background: var(--c-white); padding: 18px 0; box-shadow: 0 1px 0 var(--c-line); }
.sticky-wrapper.sticky .menu-area{
  position: fixed; top: 0; left: 0; right: 0;
  box-shadow: var(--shadow-card); animation: none;
}
.header-logo img{ max-height: 46px; }
.header-right{ display: flex; align-items: center; gap: 36px; }
.main-menu ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.main-menu > ul > li{ position: relative; }
.main-menu > ul > li > a{
  display: block; padding: 8px 0;
  font-family: var(--f-heading); font-weight: 600; font-size: 15px;
  color: var(--c-ink);
}
.main-menu > ul > li > a:hover{ color: var(--c-teal); }
.main-menu ul.sub-menu{
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--c-white); box-shadow: var(--shadow-card);
  border-radius: var(--radius-sm); padding: 10px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: .25s; z-index: 20;
}
.main-menu li:hover > ul.sub-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.main-menu li.menu-mega.mega-open > ul.sub-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.main-menu ul.sub-menu li a{ display: block; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--c-ink); }
.main-menu ul.sub-menu li a:hover{ background: var(--c-teal-light); color: var(--c-teal-dark); }
.header-icons-wrap{ display: flex; align-items: center; gap: 14px; }
.icon-btn{
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); border-radius: 50%; color: var(--c-ink);
}
.icon-btn:hover{ background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
/* The search trigger is a <button> (JS-driven, not a real link) — reset
   the browser's native button chrome so it matches the <a>-based icon
   buttons beside it exactly. */
button.icon-btn{ background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.th-menu-toggle{
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--c-ink); color: var(--c-white); font-size: 16px;
}

/* ---------------------------------------------------------------------
   5b. Header — transparent-over-hero + smooth scroll motion
   Fully automatic, no per-page setup: assets/js/header-motion.js adds
   "has-hero" to <body> only when a page's first Elementor section is a
   Hero widget (.th-hero-wrapper) — every other page keeps the normal
   solid header untouched. ".is-scrolled" is toggled on .th-header
   itself by that same script, independent of the .sticky-wrapper/.sticky
   mechanism above (which still governs the "pin the menu bar after
   1000px" behavior everywhere else, unchanged).
--------------------------------------------------------------------- */
body.has-hero .th-header{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
}
body.has-hero .th-header .menu-area{
  background: transparent;
  box-shadow: none;
  transition: background-color .45s ease, box-shadow .45s ease, padding .35s ease, max-height .35s ease, backdrop-filter .45s ease;
}
/* The top utility bar goes solid white here — like the reference's top
   strip — deliberately different from its normal dark-ink background
   elsewhere (.header-top's default, higher up in this file). Only the
   logo/nav row below it goes transparent over the hero. */
body.has-hero .th-header .header-top{
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  transition: max-height .35s ease, padding .35s ease, border-color .35s ease;
}
body.has-hero .th-header .header-links li{ color: var(--c-body); }
body.has-hero .th-header .header-links li i{ color: var(--c-teal); }
body.has-hero .th-header .header-links a:hover{ color: var(--c-teal); }
body.has-hero .th-header .topbar-menu ul li a{ color: var(--c-body); }
body.has-hero .th-header .topbar-menu ul li a:hover{ color: var(--c-teal); }
body.has-hero .th-header .main-menu > ul > li > a{ color: var(--c-white); }
body.has-hero .th-header .main-menu > ul > li > a:hover{ color: rgba(255,255,255,.7); }
body.has-hero .th-header .icon-btn{ border-color: rgba(255,255,255,.35); color: var(--c-white); }
body.has-hero .th-header .th-menu-toggle{ background: rgba(255,255,255,.15); }
/* Search now lives in the menu-area (the transparent zone) on hero
   pages, not the white top bar — so it needs the light/translucent
   treatment at rest, then flips to the normal solid look once scrolled
   (see .is-scrolled block below), matching the rest of that row. */
body.has-hero .th-header .topbar-search input{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: var(--c-white);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
body.has-hero .th-header .topbar-search input::placeholder{ color: rgba(255,255,255,.65); }

/* Once scrolled past the threshold: crossfade to the normal solid
   header, now pinned in place. The top utility bar collapses (rather
   than just recoloring) so the sticky state reads as a deliberate
   "compact mode", not just a flat color swap. */
body.has-hero .th-header.is-scrolled{ position: fixed; }
body.has-hero .th-header.is-scrolled .header-top{
  padding-top: 0; padding-bottom: 0; max-height: 0; overflow: hidden;
  border-bottom-color: transparent;
}
body.has-hero .th-header.is-scrolled .menu-area{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
  padding: 12px 0;
}
body.has-hero .th-header.is-scrolled .header-links li,
body.has-hero .th-header.is-scrolled .main-menu > ul > li > a{ color: var(--c-ink); }
body.has-hero .th-header.is-scrolled .main-menu > ul > li > a:hover{ color: var(--c-teal); }
body.has-hero .th-header.is-scrolled .topbar-search input{
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-ink);
}
body.has-hero .th-header.is-scrolled .topbar-search input::placeholder{ color: var(--c-body); }
body.has-hero .th-header.is-scrolled .icon-btn{ border-color: var(--c-line); color: var(--c-ink); }
body.has-hero .th-header.is-scrolled .th-menu-toggle{ background: var(--c-ink); }

/* The older 1000px .sticky-wrapper mechanism would otherwise also try
   to fix .menu-area on hero pages once you scroll far enough — the
   .is-scrolled rules above already own the fixed/solid state there, so
   this stops two independent systems from both pinning the same bar. */
body.has-hero .sticky-wrapper.sticky .menu-area{ position: static; box-shadow: none; }

@media (prefers-reduced-motion: reduce){
  body.has-hero .th-header,
  body.has-hero .th-header .header-top,
  body.has-hero .th-header .menu-area{ transition: none; }
}

/* ---------------------------------------------------------------------
   5c. Nav dropdown — staggered reveal + optional full-width "mega" mode
   Default dropdowns already fade/slide in (see .sub-menu above);
   header-motion.js layers a GSAP stagger on top when GSAP is present,
   and appends a small arrow icon to each link.
   Opt-in full-width mode, no theme change needed: in Appearance > Menus,
   turn on Screen Options > CSS Classes, then add the class "menu-mega"
   to any top-level menu item — its dropdown becomes a full viewport-
   width panel (position: fixed, left:0/right:0 — no centering math
   against any ancestor, which is what caused the earlier overflow bug)
   with its top edge set by header-motion.js to sit right below the
   header, and links flowing into three columns with the content itself
   kept roughly centered via side padding.
--------------------------------------------------------------------- */
.main-menu ul.sub-menu li{
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.main-menu li:hover > ul.sub-menu li{ opacity: 1; transform: translateY(0); }
.main-menu ul.sub-menu li a{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-menu-arrow{ font-size: 12px; opacity: 0; transform: translateX(-4px); transition: .2s; }
.main-menu ul.sub-menu li a:hover .sub-menu-arrow{ opacity: 1; transform: translateX(0); }

.main-menu li.menu-mega{ position: static; }
.main-menu li.menu-mega > ul.sub-menu{
  position: fixed; top: var(--mega-top, 140px);
  left: 0; right: 0; width: auto; min-width: 0;
  border-radius: 0;
  transform: translateY(8px);
  padding: 40px max(24px, calc(50% - 570px));
  column-count: 3; column-gap: 32px;
}
.main-menu li.menu-mega:hover > ul.sub-menu{ transform: translateY(0); }
.main-menu li.menu-mega > ul.sub-menu li{ break-inside: avoid; margin-bottom: 4px; }

/* ---------------------------------------------------------------------
   5d. Topbar inverts to solid black + white text while the main menu
   is hovered/focused — header-motion.js toggles "topbar-dark" on
   .th-header. The body.has-hero variant below repeats the same
   selector prefix as the hero top-bar rule in 5b (same class count,
   one more element) purely so it wins on specificity, not source order.
--------------------------------------------------------------------- */
.th-header.topbar-dark .header-top{
  background: var(--c-ink);
  border-bottom-color: transparent;
}
.th-header.topbar-dark .header-links li,
.th-header.topbar-dark .topbar-menu ul li a{ color: rgba(255,255,255,.85); }
.th-header.topbar-dark .header-links li i{ color: var(--c-teal); }
body.has-hero .th-header.topbar-dark .header-top{ background: var(--c-ink); }
body.has-hero .th-header.topbar-dark .header-links li,
body.has-hero .th-header.topbar-dark .topbar-menu ul li a{ color: rgba(255,255,255,.85); }

/* ---------------------------------------------------------------------
   5e. Menu-area row turns solid white + dark text while the main menu
   is hovered/focused (logo row included — the topbar-only black rules
   in 5d above are untouched, stay black). header-motion.js toggles
   "header-inverted" on .th-header at the same time as "topbar-dark".
   The main payoff is on hero pages at rest, where the row is normally
   transparent over the photo — hovering solidifies it to a clean white
   bar for readability. On non-hero pages the row is already white by
   default, so this is a no-op there (nothing to invert).
--------------------------------------------------------------------- */
.th-header.header-inverted .menu-area{ background: var(--c-white); }
.th-header.header-inverted .main-menu > ul > li > a{ color: var(--c-ink); }
.th-header.header-inverted .main-menu > ul > li > a:hover{ color: var(--c-teal); }
.th-header.header-inverted .icon-btn{ border-color: var(--c-line); color: var(--c-ink); }
.th-header.header-inverted .th-menu-toggle{ background: var(--c-ink); }
.th-header.header-inverted .topbar-search input{
  background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink);
}
.th-header.header-inverted .topbar-search input::placeholder{ color: var(--c-body); }

/* Hero page, at rest — this is the state where the change is actually
   visible: transparent-over-hero solidifies to white on hover. */
body.has-hero .th-header.header-inverted .menu-area{ background: var(--c-white); }
body.has-hero .th-header.header-inverted .main-menu > ul > li > a{ color: var(--c-ink); }
body.has-hero .th-header.header-inverted .main-menu > ul > li > a:hover{ color: var(--c-teal); }
body.has-hero .th-header.header-inverted .icon-btn{ border-color: var(--c-line); color: var(--c-ink); }
body.has-hero .th-header.header-inverted .topbar-search input{
  background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink);
}
body.has-hero .th-header.header-inverted .topbar-search input::placeholder{ color: var(--c-body); }

/* Hero page, scrolled — already a white-ish blurred bar with dark text
   by default; hovering just solidifies it (drops the blur) for a
   crisper look, no color change needed. */
body.has-hero .th-header.is-scrolled.header-inverted .menu-area{
  background: var(--c-white); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* Sliding accent pill under whichever top-level link is hovered/focused —
   positioned/sized by header-motion.js, teal reads fine against the
   white bar in every state, so no extra overrides are needed. */
.main-menu{ position: relative; }
.nav-indicator{
  position: absolute; left: 0; bottom: -6px; height: 3px; width: 0;
  background: var(--c-teal); border-radius: 3px;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.main-menu.is-active .nav-indicator{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .nav-indicator{ transition: none; }
}

/* Off-canvas mobile menu / side menu */
.th-menu-wrapper, .sidemenu-wrapper{
  position: fixed; inset: 0; background: rgba(27,36,48,.6);
  opacity: 0; visibility: hidden; transition: .3s; z-index: 999;
}
.th-menu-wrapper.th-body-visible, .sidemenu-wrapper.show{ opacity: 1; visibility: visible; }
.th-menu-area, .sidemenu-content{
  background: var(--c-white); height: 100%; width: 320px; max-width: 85%;
  padding: 32px 24px; overflow-y: auto; position: relative;
}
.sidemenu-content{ margin-left: auto; }
.th-mobile-menu ul{ list-style: none; margin: 0; padding: 0; }
.th-mobile-menu ul li{ border-bottom: 1px solid var(--c-line); }
.th-mobile-menu ul li a{ display: block; padding: 12px 4px; color: var(--c-ink); font-weight: 600; }
.closeButton, .th-menu-toggle{ cursor: pointer; }

/* Search popup */
.popup-search-box{
  position: fixed; inset: 0; background: rgba(27,36,48,.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: .3s; z-index: 1000;
}
.popup-search-box.show{ opacity: 1; visibility: visible; }
.popup-search-box .th-search-form{ width: 100%; max-width: 600px; position: relative; padding: 0 20px; }
.popup-search-box input{ width: 100%; height: 64px; border-radius: 999px; border: 2px solid var(--c-teal); background: transparent; color: var(--c-white); padding: 0 60px 0 24px; }
.popup-search-box button{ position: absolute; right: 34px; top: 16px; background: none; border: none; color: var(--c-white); font-size: 20px; }
.popup-search-box .searchClose{ position: absolute; top: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--c-white); background: none; color: var(--c-white); }

/* Preloader */
.preloader{ position: fixed; inset: 0; background: var(--c-white); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
.preloader .loader{ font-family: var(--f-heading); font-size: 32px; font-weight: 700; color: var(--c-ink); }
.preloader .preloaderCls{ position: absolute; bottom: 40px; }

/* ---------------------------------------------------------------------
   6. Hero
--------------------------------------------------------------------- */
.th-hero-wrapper{ position: relative; overflow: hidden; }
.th-hero-bg{ position: absolute; inset: 0; z-index: -1; }
.th-hero-bg img, .th-hero-bg{ background-size: cover; background-position: center; }
.hero-1 .th-hero-bg::before{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(27,36,48,.75), rgba(27,36,48,.25)); }
.hero-inner{ position: relative; }
.hero-style1{ padding: 160px 0; max-width: 680px; }
@media (max-width: 991px){ .hero-style1{ padding: 120px 0 60px; text-align: center; } }
.hero-title{ font-size: 56px; color: var(--c-white); margin-bottom: 24px; }
@media (max-width: 767px){ .hero-title{ font-size: 36px; } }
.hero-text{ color: rgba(255,255,255,.85); font-size: 18px; margin-bottom: 36px; }
.hero-video{ display: flex; align-items: center; justify-content: center; height: 100%; }
.video-play-btn, .play-btn i{
  width: 78px; height: 78px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-white); color: var(--c-teal); font-size: 22px;
}
.slider-pagination{ position: absolute; right: 60px; bottom: 40px; display: flex; gap: 10px; z-index: 3; }
.swiper-pagination-bullet{ width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.4); opacity: 1; cursor: pointer; }
.swiper-pagination-bullet-active{ background: var(--c-teal); }

/* ---------------------------------------------------------------------
   7. Strap bar
--------------------------------------------------------------------- */
.strap-area{ position: relative; z-index: 6; margin-top: -70px; margin-bottom: var(--section-y); }
@media (max-width: 575px){ .strap-area{ margin-top: 24px; } }
.strap-wrap{ background: var(--c-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.strap-item{ padding: 40px 24px; text-align: center; position: relative; }
.strap-item:not(:last-child)::after{ content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background: var(--c-line); }
@media (max-width: 575px){ .strap-item::after{ display:none !important; } .strap-item{ border-bottom: 1px solid var(--c-line); } }
.strap-item .box-icon{ width: 52px; margin: 0 auto 16px; }
.strap-item .box-icon img{ width: 100%; }

/* ---------------------------------------------------------------------
   8. About section
--------------------------------------------------------------------- */
.about-img-wrap{ position: relative; max-width: 480px; margin: 0 auto; padding-left: 20px; }
.about-img-accent{ position: absolute; inset: 20px 0 20px 18px; background: var(--c-teal); border-radius: var(--radius-lg); }
.about-img-main{ position: relative; border-radius: var(--radius-md); overflow: hidden; }
.about-img-main img{ width: 100%; display: block; }
.about-img-play{ position: absolute; top: 20px; right: 20px; }
.about-img-play i{ width: 60px; height: 60px; font-size: 18px; }
.about-img-arrow{
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--c-teal); color: var(--c-white);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card);
}
.about-feature-box{ margin: 24px 0; }
.about-feature{ display: flex; gap: 20px; margin-bottom: 24px; }
.about-feature .box-icon{ flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--c-teal-light); display: flex; align-items: center; justify-content: center; }
.about-feature .box-icon img{ width: 24px; }
.about-stat-row{ display: flex; align-items: center; gap: 20px; margin: 6px 0 30px; }
.about-stat-badge{
  flex: none; width: 100px; height: 100px; border-radius: 50%;
  background: var(--c-ink); border: 4px solid var(--c-white); box-shadow: var(--shadow-card);
  color: var(--c-white); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.about-stat-badge .num{ font-family: var(--f-heading); font-size: 24px; font-weight: 700; }
.about-stat-badge .label{ font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.about-stat-img{ flex: 1; max-width: 210px; border-radius: var(--radius-sm); overflow: hidden; }
.about-stat-img img{ width: 100%; display: block; }

/* ---------------------------------------------------------------------
   9. Counter stats
--------------------------------------------------------------------- */
.counter-wrap1{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: var(--c-surface); border-radius: var(--radius-md); padding: 40px; }
.counter-card{ display: flex; align-items: center; gap: 16px; }
.counter-card .box-icon{ width: 52px; }
.counter-card .box-number{ font-size: 30px; margin-bottom: 2px; color: var(--c-ink); }
.counter-card .counter-number{ color: var(--c-teal); }
.divider{ width: 1px; height: 44px; background: var(--c-line); }
@media (max-width: 767px){ .divider{ display: none; } }

/* ---------------------------------------------------------------------
   10. Programs slider
--------------------------------------------------------------------- */
.academic-card{ background: var(--c-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); transition: .3s; height: 100%; }
.academic-card:hover{ box-shadow: var(--shadow-card-hover); transform: translateY(-6px); }
.academic-img{ position: relative; overflow: hidden; }
.academic-img img{ width: 100%; height: 220px; object-fit: cover; transition: transform .5s ease; }
.academic-card:hover .academic-img img{ transform: scale(1.08); }
.academic-tag{ position: absolute; top: 16px; left: 16px; transition: .3s; }
.academic-tag span{ background: var(--c-white); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.academic-card:hover .academic-tag{ transform: translateY(-2px); }
.academic-content{ padding: 24px; }
.academic-content .box-title a{ transition: .2s; }
.academic-card:hover .academic-content .box-title a{ color: var(--c-teal); }
.academic-review{ display: flex; align-items: center; gap: 4px; color: #F5A623; margin: 8px 0; font-size: 13px; }
.academic-review .review-text{ color: var(--c-body); margin-left: 6px; }
.academic-meta-wrap{ display: flex; align-items: center; justify-content: space-between; padding: 0 24px 24px; gap: 12px; flex-wrap: wrap; }
.academic-meta{ display: flex; gap: 16px; font-size: 13px; }
.academic-meta a{ color: var(--c-body); }
.slider-area{ position: relative; padding-bottom: 60px; }
.slider-area .swiper-slide{ height: auto; padding: 6px; }
.slider-area .slider-pagination{ position: static; justify-content: center; margin-top: 30px; }
.slider-area .swiper-pagination-bullet{ background: var(--c-line); }
.slider-area .swiper-pagination-bullet-active{ background: var(--c-teal); }

/* ---------------------------------------------------------------------
   11. Why choose us — numbered list + media panel
--------------------------------------------------------------------- */
.why-area{ background: var(--c-teal-light); }
.why-item .why-titlebox{ display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.why-item .why-number{
  flex: none; font-family: var(--f-heading); font-weight: 800; font-size: 26px;
  color: var(--c-teal); line-height: 1;
}
.why-item .box-title{ font-size: 20px; margin-bottom: 0; }
.why-item .box-text{ margin: 12px 0 20px; }
.why-item-btn{ background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.why-item-btn:hover{ background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.why-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 100%; min-height: 420px; }
.why-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.why-media-play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; background: var(--c-white);
  display: flex; align-items: center; justify-content: center; color: var(--c-teal); font-size: 24px;
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------------
   12. Campus cards
--------------------------------------------------------------------- */
.campus-card{
  text-align: left; background: var(--c-white); border-radius: var(--radius-md);
  padding: 16px 16px 24px; box-shadow: var(--shadow-card); transition: .3s; height: 100%;
}
.campus-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.campus-img{ border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px; }
.campus-img img{ width: 100%; height: 240px; object-fit: cover; transition: transform .5s ease; }
.campus-card:hover .campus-img img{ transform: scale(1.08); }
.campus-content .box-title a{ transition: .2s; }
.campus-card:hover .campus-content .box-title a{ color: var(--c-teal); }
@media (hover: hover){
  .campus-card .th-btn{ margin-left: 16px; opacity: 0; transform: translateY(6px); transition: .3s; }
  .campus-card:hover .th-btn{ opacity: 1; transform: translateY(0); }
}
.campus-slider{ padding-bottom: 60px; }
.campus-slider .swiper-slide{ height: auto; padding: 6px; }
.campus-slider .slider-pagination{ position: static; justify-content: center; margin-top: 30px; }
.campus-slider .swiper-pagination-bullet{ background: var(--c-line); }
.campus-slider .swiper-pagination-bullet-active{ background: var(--c-teal); }

/* ---------------------------------------------------------------------
   13. Testimonials — centered heading + 3-column card grid
--------------------------------------------------------------------- */
.testimonials-title{ font-size: 40px; margin-bottom: 20px; }
.testimonials-divider{ display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 24px; }
.testimonials-divider span{ width: 60px; height: 3px; background: var(--c-teal); border-radius: 2px; }
.testimonials-divider::before,
.testimonials-divider::after{ content: ''; width: 100px; height: 1px; background: var(--c-line); }
.testimonials-desc{ max-width: 640px; margin: 0 auto 50px; font-size: 17px; color: var(--c-ink); }
.testimonial-card{
  position: relative; height: 100%; background: var(--c-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 40px 32px; text-align: center;
}
.testimonial-avatar{ width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; overflow: hidden; border: 3px solid var(--c-line); }
.testimonial-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.testimonial-stars{ color: #F5A623; font-size: 15px; margin-bottom: 20px; letter-spacing: 3px; }
.testimonial-quote{ font-style: italic; color: var(--c-ink); font-size: 16px; line-height: 1.8; margin-bottom: 24px; }
.testimonial-name{ font-size: 19px; margin-bottom: 4px; }
.testimonial-role{ font-size: 14px; color: var(--c-body); margin-bottom: 0; }
.testimonial-icon{
  position: absolute; right: 24px; bottom: 24px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-teal-light); color: var(--c-teal-dark); display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.testimonial-slider{ padding-bottom: 60px; }
.testimonial-slider .swiper-slide{ height: auto; padding: 6px; }
.testimonial-slider .swiper-slide .testimonial-card{ height: 100%; }
.testimonial-slider .slider-pagination{ position: static; justify-content: center; margin-top: 30px; }
.testimonial-slider .swiper-pagination-bullet{ background: var(--c-line); }
.testimonial-slider .swiper-pagination-bullet-active{ background: var(--c-teal); }

/* ---------------------------------------------------------------------
   14. Events
--------------------------------------------------------------------- */
.event-card{
  background: var(--c-white); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card); transition: .3s; height: 100%;
}
.event-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.event-card-img{ position: relative; overflow: hidden; }
.event-card-img img{ width: 100%; height: 200px; object-fit: cover; transition: transform .5s ease; }
.event-card:hover .event-card-img img{ transform: scale(1.08); }
.event-card-tag{ position: absolute; top: 16px; left: 16px; background: var(--c-teal); color: var(--c-white); border-radius: var(--radius-sm); padding: 8px 14px; text-align: center; line-height: 1.2; }
.event-card-tag .tag-number{ display: block; font-size: 18px; font-weight: 700; }
.event-card .box-title a{ transition: .2s; }
.event-card:hover .box-title a{ color: var(--c-teal); }
.events-slider{ padding-bottom: 60px; }
.events-slider .swiper-slide{ height: auto; padding: 6px; }
.events-slider .slider-pagination{ position: static; justify-content: center; margin-top: 30px; }
.events-slider .swiper-pagination-bullet{ background: var(--c-line); }
.events-slider .swiper-pagination-bullet-active{ background: var(--c-teal); }
.event-content{ padding: 24px; }
.blog-meta{ display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; margin: 12px 0; }
.blog-meta a{ color: var(--c-body); }

/* ---------------------------------------------------------------------
   15. Apply CTA (split checklist)
--------------------------------------------------------------------- */
.apply-stadum-area{ background: var(--c-ink); }
.apply-stadum-area .sec-title{ color: var(--c-white); }
.apply-stadum-box{ display: flex; gap: 40px; flex-wrap: wrap; margin: 24px 0; }
.checklist ul{ list-style: none; margin: 0; padding: 0; }
.checklist li{ position: relative; padding-left: 28px; margin-bottom: 12px; color: rgba(255,255,255,.85); }
.checklist li::before{ content:'\2713'; position:absolute; left:0; top:0; color: var(--c-teal); font-weight: 700; }
.apply-stadum-thumb img{ width: 100%; border-radius: var(--radius-md); }

/* ---------------------------------------------------------------------
   16. Progress showcase
--------------------------------------------------------------------- */
.chancellor-thumb{ border-radius: var(--radius-md); overflow: hidden; max-height: 560px; background: var(--c-surface); display: flex; align-items: flex-end; justify-content: center; }
.chancellor-thumb img{ width: 100%; height: auto; max-height: 560px; object-fit: contain; display: block; }
.skill-feature{ margin-bottom: 20px; }
.skill-feature-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.skill-feature-title{ font-size: 16px; margin-bottom: 0; }
.skill-feature-percent{ font-size: 14px; font-weight: 700; color: var(--c-ink); }
.progress{ height: 8px; background: var(--c-line); border-radius: 999px; overflow: hidden; position: relative; }
.progress-bar{ height: 100%; background: var(--c-teal); border-radius: 999px; }
.chancellor-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.chancellor-signature img{ max-width: 120px; }
.faculty-slider{ padding-bottom: 10px; }
.faculty-slider .slider-pagination{ position: static; justify-content: center; margin-top: 40px; }
.faculty-slider .swiper-pagination-bullet{ background: var(--c-line); }
.faculty-slider .swiper-pagination-bullet-active{ background: var(--c-teal); }

/* ---------------------------------------------------------------------
   17. Marquee — scrolling partner/university logos
--------------------------------------------------------------------- */
.marquee-card{
  display: flex; align-items: center; justify-content: center;
  padding: 0 44px; white-space: nowrap;
}
.marquee-card img{
  max-height: 44px; width: auto; max-width: 160px;
  filter: grayscale(100%); opacity: .6; transition: .25s;
}
.marquee-card:hover img{ filter: grayscale(0%); opacity: 1; }
.marquee-card-text{ font-family: var(--f-heading); font-weight: 700; letter-spacing: 1px; color: var(--c-ink); }

/* ---------------------------------------------------------------------
   18. CTA banner (community)
--------------------------------------------------------------------- */
.community-area{ position: relative; background-color: var(--c-ink); background-size: cover; background-position: center; }
.community-area::before{ content: ''; position: absolute; inset: 0; background: rgba(27,36,48,.55); }
.community-area .container{ position: relative; z-index: 1; }
.community-area .sec-title{ color: var(--c-white); }
.community-area .box-text{ color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------------
   19. FAQ accordion
--------------------------------------------------------------------- */
.faq-imgbox{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq-imgbox img{ width: 100%; border-radius: var(--radius-md); object-fit: cover; height: 100%; }
.accordion-card{ border: 1px solid var(--c-line); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; }
.accordion-button{
  width: 100%; text-align: left; background: var(--c-white); border: none; padding: 18px 22px;
  font-family: var(--f-heading); font-weight: 600; font-size: 15px; color: var(--c-ink); cursor: pointer;
}
.accordion-button:not(.collapsed){ background: var(--c-teal-light); color: var(--c-teal-dark); }
.accordion-body{ padding: 4px 22px 20px; }
.faq-text{ margin: 0; }

/* ---------------------------------------------------------------------
   20. Blog grid
--------------------------------------------------------------------- */
.blog-card{ background: var(--c-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); height: 100%; transition: .3s; }
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.blog-img-box{ overflow: hidden; }
.blog-img-box img{ width: 100%; height: 220px; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-img-box img{ transform: scale(1.08); }
.blog-date{ position: absolute; top: 16px; left: 16px; background: var(--c-white); border-radius: var(--radius-sm); padding: 8px 14px; text-align: center; }
.blog-date-title{ font-size: 20px; margin-bottom: 0; color: var(--c-ink); }
.blog-date-text{ font-size: 11px; margin: 0; text-transform: uppercase; }
.blog-content{ padding: 24px; }
.blog-content .box-title a{ transition: .2s; }
.blog-card:hover .blog-content .box-title a{ color: var(--c-teal); }
.blog-slider{ padding-bottom: 60px; }
.blog-slider .swiper-slide{ height: auto; padding: 6px; }
.blog-slider .slider-pagination{ position: static; justify-content: center; margin-top: 30px; }
.blog-slider .swiper-pagination-bullet{ background: var(--c-line); }
.blog-slider .swiper-pagination-bullet-active{ background: var(--c-teal); }

/* ---------------------------------------------------------------------
   21. Footer
--------------------------------------------------------------------- */
.footer-wrapper{ background: var(--c-surface); color: var(--c-body); position: relative; }
.footer-wrapper .container{ padding-top: 70px; padding-bottom: 50px; }
.footer-brand{ font-size: 26px; color: var(--c-ink); margin-bottom: 20px; }
.footer-address{ font-style: normal; color: var(--c-body); line-height: 1.8; margin-bottom: 16px; }
.footer-contact-line{ margin-bottom: 8px; font-size: 15px; }
.footer-contact-line strong{ color: var(--c-ink); }
.footer-contact-line a{ color: var(--c-body); }
.footer-contact-line a:hover{ color: var(--c-teal); }
.footer-social{ display: flex; gap: 10px; margin-top: 20px; }
.footer-social a{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center; color: var(--c-ink); transition: .2s;
}
.footer-social a:hover{ background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }
.footer-col-title{ font-size: 18px; color: var(--c-ink); margin-bottom: 22px; }
.footer-menu{ list-style: none; margin: 0; padding: 0; }
.footer-menu li{ margin-bottom: 12px; }
.footer-menu a{ color: var(--c-body); }
.footer-menu a:hover{ color: var(--c-teal); }
.footer-bottom{ border-top: 1px solid var(--c-line); padding: 22px 0; text-align: center; }
.copyright-text{ margin: 0; font-size: 14px; color: var(--c-body); }
.copyright-text strong{ color: var(--c-ink); }

.scroll-top{ position: fixed; right: 30px; bottom: 30px; width: 48px; height: 48px; border-radius: 10px; background: var(--c-ink); color: var(--c-white); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: .3s; cursor: pointer; z-index: 50; }
.scroll-top.show{ opacity: 1; visibility: visible; }
.scroll-top svg{ position: absolute; inset: 0; }
.scroll-top i{ position: relative; z-index: 1; font-size: 16px; }

/* Login popup */
.popup-login-register{ background: var(--c-white); border-radius: var(--radius-md); padding: 40px; max-width: 420px; }

/* ---------------------------------------------------------------------
   22. Quick Links (featured card row)
--------------------------------------------------------------------- */
.quicklink-card{
  display: block; height: 100%; padding: 28px 26px;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-md);
  transition: .25s; color: inherit;
}
.quicklink-card:hover{ border-color: var(--c-teal); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.quicklink-card .box-title{ color: var(--c-ink); font-size: 18px; margin-bottom: 8px; }
.quicklink-card .box-text{ font-size: 14px; margin-bottom: 0; }
.quicklink-card-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-teal-light); color: var(--c-teal-dark); font-size: 18px;
  margin-bottom: 16px;
}
.quicklink-card--featured{ background: var(--c-teal); border-color: var(--c-teal); }
.quicklink-card--featured:hover{ border-color: var(--c-teal-dark); }
.quicklink-card--featured .box-title,
.quicklink-card--featured .box-text{ color: var(--c-white); }
.quicklink-card--featured .quicklink-card-icon{ background: rgba(255,255,255,.18); color: var(--c-white); }

/* ---------------------------------------------------------------------
   23. Degree Finder (search/filter form)
--------------------------------------------------------------------- */
.degree-finder-area{ background: var(--c-surface); padding: 40px; border-radius: var(--radius-md); }
.degree-finder-levels{ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.degree-finder-radio{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-ink); cursor: pointer; }
.degree-finder-radio input{ accent-color: var(--c-teal); width: 16px; height: 16px; }
.degree-finder-row{ display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.degree-finder-select{
  flex: 0 0 220px; height: 54px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 0 16px; background: var(--c-white); color: var(--c-ink); font-family: var(--f-body);
}
.degree-finder-search{
  flex: 1; min-width: 220px; height: 54px; display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 0 16px; background: var(--c-white);
}
.degree-finder-search i{ color: var(--c-body); }
.degree-finder-search input{ border: none; outline: none; flex: 1; font-family: var(--f-body); background: transparent; }
.degree-finder-area .th-btn{ height: 54px; padding: 0 30px; }

/* ---------------------------------------------------------------------
   24. Events Tabs
--------------------------------------------------------------------- */
.events-tabs-nav{ display: flex; gap: 8px; border-bottom: 1px solid var(--c-line); margin-bottom: 30px; flex-wrap: wrap; }
.events-tab-btn{
  padding: 14px 22px; background: none; border: none; border-bottom: 2px solid transparent;
  font-family: var(--f-heading); font-weight: 600; color: var(--c-body); cursor: pointer; transition: .2s;
}
.events-tab-btn.active{ color: var(--c-teal); border-bottom-color: var(--c-teal); }
.events-tab-pane{ display: none; }
.events-tab-pane.active{ display: block; }
.events-tab-group-title{ font-size: 16px; margin-bottom: 16px; color: var(--c-ink); }
.events-tab-list{ display: flex; flex-direction: column; gap: 12px; }
.events-tab-item{
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--c-surface); border-radius: var(--radius-sm); color: inherit; transition: .2s;
}
.events-tab-item:hover{ background: var(--c-teal-light); }
.events-tab-item-date{ font-size: 13px; color: var(--c-body); flex: none; }
.events-tab-item-title{ font-size: 15px; color: var(--c-ink); font-weight: 500; }

/* ---------------------------------------------------------------------
   25. Research Insights + Awards
--------------------------------------------------------------------- */
.research-col-title{ font-size: 20px; margin-bottom: 24px; }
.research-insights-list{ display: flex; flex-direction: column; gap: 18px; }
.research-insight-item{ display: flex; gap: 16px; align-items: center; color: inherit; }
.research-insight-thumb{
  flex: none; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--c-surface); display: flex; align-items: center; justify-content: center; color: var(--c-line);
}
.research-insight-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.research-insight-body{ display: flex; flex-direction: column; gap: 4px; }
.research-insight-date{ font-size: 12px; color: var(--c-body); }
.research-insight-title{ font-size: 15px; font-weight: 600; color: var(--c-ink); }
.research-awards-box{ background: var(--c-surface); border-radius: var(--radius-md); padding: 32px; height: 100%; }
.research-awards-list{ display: flex; flex-direction: column; }
.research-award-item{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); font-weight: 500;
}
.research-award-item:last-child{ border-bottom: none; }
.research-award-item i{ color: var(--c-teal); }

/* ---------------------------------------------------------------------
   26. Social Feed
--------------------------------------------------------------------- */
.social-feed-networks{ display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 30px; }
.social-feed-network{ display: flex; align-items: center; gap: 8px; font-family: var(--f-heading); font-weight: 600; color: var(--c-ink); }
.social-feed-network:hover{ color: var(--c-teal); }
.social-feed-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.social-feed-post{ position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface); }
.social-feed-post img{ width: 100%; height: 100%; object-fit: cover; }
.social-feed-post-placeholder{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--c-line); font-size: 28px; }
.social-feed-post-play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(27,36,48,.6); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   27. Course Results (paired with Degree Finder)
--------------------------------------------------------------------- */
.course-results-summary{ color: var(--c-body); margin-bottom: 30px; }
.course-results-empty{ text-align: center; padding: 60px 20px; color: var(--c-body); }
.course-result-card{ background: var(--c-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); height: 100%; }
.course-result-img{ display: block; }
.course-result-img img{ width: 100%; height: 200px; object-fit: cover; }
.course-result-img-placeholder{ display: flex; align-items: center; justify-content: center; height: 200px; background: var(--c-surface); color: var(--c-line); font-size: 36px; }
.course-result-content{ padding: 24px; }
.course-result-tag{ display: inline-block; background: var(--c-teal-light); color: var(--c-teal-dark); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.course-result-college{ font-size: 13px; color: var(--c-body); margin-bottom: 10px; }
.course-results-area .th-pagination{ display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.course-results-area .th-pagination .page-numbers{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-ink);
}
.course-results-area .th-pagination .page-numbers.current,
.course-results-area .th-pagination .page-numbers:hover{ background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }

/* ---------------------------------------------------------------------
   28. Small helpers
--------------------------------------------------------------------- */
.site-title-fallback{ font-family: var(--f-heading); font-weight: 800; font-size: 22px; color: var(--c-ink); }
.site-title-fallback--light{ color: var(--c-white); }
.blog-img-placeholder{ height: 220px; display: flex; align-items: center; justify-content: center; background: var(--c-surface); color: var(--c-line); font-size: 40px; }
.skip-link{ position:absolute; left:-9999px; top:-9999px; z-index:999999; background:var(--c-ink); color:var(--c-white); padding:12px 20px; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; top:0; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------------------------------------------------------------------
   29. Side Quick Links (fixed accessibility / sign language / phone /
   feedback bar — left edge of the viewport, sits over the hero slider
   on the front page since that's the top of the document)
--------------------------------------------------------------------- */
.side-quicklinks{ position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 200; transition: transform .3s ease; }
.side-quicklinks--collapsed{ transform: translateY(-50%) translateX(-100%); }
.side-quicklinks__toggle{
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: 28px; height: 48px; border: none; cursor: pointer;
  background: var(--c-teal); color: var(--c-white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: .25s;
}
.side-quicklinks__toggle:hover{ background: var(--c-teal-dark); }
.side-quicklinks__list{
  list-style: none; margin: 0; padding: 0;
  background: var(--c-ink); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-card); overflow: visible;
}
.side-quicklinks__list li{ position: relative; }
.side-quicklinks__list li:first-child .side-quicklinks__item{ border-top: none; }
.side-quicklinks__item{
  display: flex; align-items: center; gap: 10px;
  width: 52px; height: 52px; padding: 0 14px;
  color: var(--c-white); background: transparent; border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--f-body); font-size: 13px; white-space: nowrap;
  overflow: hidden; cursor: pointer; text-decoration: none;
  transition: width .3s ease, background .2s ease;
}
.side-quicklinks__item i{ font-size: 16px; width: 18px; flex: none; text-align: center; }
.side-quicklinks__label{ opacity: 0; transition: opacity .2s ease; }
.side-quicklinks__item:hover{ background: var(--c-teal); width: 190px; }
.side-quicklinks__item:hover .side-quicklinks__label{ opacity: 1; }
.side-quicklinks__item--phone:hover{ width: 210px; }

/* Accessibility panel */
.side-accessibility-panel{
  position: absolute; left: calc(100% + 8px); top: 0;
  background: var(--c-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 16px; width: 200px;
  display: flex; flex-direction: column; gap: 8px; z-index: 210;
}
.side-accessibility-panel[hidden]{ display: none; }
.side-accessibility-panel__title{ font-family: var(--f-heading); font-weight: 700; color: var(--c-ink); margin: 0 0 4px; }
.side-accessibility-panel button{
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--c-line); background: var(--c-surface);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px;
  color: var(--c-ink); cursor: pointer; transition: .2s; text-align: left;
}
.side-accessibility-panel button:hover{ border-color: var(--c-teal); color: var(--c-teal-dark); }

/* Text-scale / high-contrast toggles (applied by side-links.js) */
:root{ --a11y-scale: 100%; }
body{ font-size: calc(1em * var(--a11y-scale, 100%) / 100); }
body.a11y-high-contrast{ background: #000; filter: invert(1) hue-rotate(180deg); }
body.a11y-high-contrast img,
body.a11y-high-contrast video{ filter: invert(1) hue-rotate(180deg); }

/* Feedback popup */
.side-feedback-overlay{
  position: fixed; inset: 0; background: rgba(27,36,48,.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: .25s; z-index: 100000; padding: 20px;
}
.side-feedback-overlay.show{ opacity: 1; visibility: visible; }
.side-feedback-modal{
  position: relative; background: var(--c-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover); padding: 36px 30px 28px; width: 100%; max-width: 380px;
  transform: translateY(16px); transition: .25s;
}
.side-feedback-overlay.show .side-feedback-modal{ transform: translateY(0); }
.side-feedback-modal__close{
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border: none; background: var(--c-surface); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-ink);
}
.side-feedback-modal__close:hover{ background: var(--c-line); }
#sideFeedbackTitle{ font-family: var(--f-heading); font-size: 17px; color: var(--c-ink); margin: 0 0 18px; padding-right: 20px; }
.side-feedback-stars{ display: flex; gap: 6px; font-size: 24px; margin-bottom: 16px; }
.side-feedback-star{ background: none; border: none; padding: 0; cursor: pointer; color: var(--c-line); transition: color .15s; }
.side-feedback-star.is-active{ color: #F5B301; }
.side-feedback-textarea{
  width: 100%; min-height: 90px; resize: vertical; padding: 12px 14px;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  font-family: var(--f-body); font-size: 14px; color: var(--c-ink); margin-bottom: 16px;
}
.side-feedback-submit{ width: 100%; justify-content: center; }
.side-feedback-status{ margin: 12px 0 0; font-size: 13px; }
.side-feedback-status.is-success{ color: var(--c-teal-dark); }
.side-feedback-status.is-error{ color: #C0392B; }

@media (max-width: 991px){
  /* Starts collapsed on mobile (see side-links.js) — only the toggle icon
     shows; tapping it slides the full list into view. No hover on touch,
     so item labels are shown outright instead of on :hover. */
  .side-quicklinks__toggle{ width: 34px; height: 52px; font-size: 15px; }
  .side-quicklinks__item{ width: 190px; }
  .side-quicklinks__item--phone{ width: 210px; }
  .side-quicklinks__label{ opacity: 1; }
}