/* ==========================================================================
   VCSG UUHF PMS — PREMIER UNIVERSITY & RESEARCH PORTAL STYLESHEET
   Refinement Phase 2: University Blue (#0B4EA2), Academic Navy (#061B35),
   Deep Blue (#073B7A), White (#FFFFFF), Accent Gold (#F5B301), Emerald (#10B981)
   ========================================================================== */

:root {
  /* Centralized Design System Colors */
  --navy: #071B34;
  --navy-2: #0B2A50;

  --blue: #1264C7;
  --blue-dark: #0B4EA2;
  --blue-light: #EAF3FF;

  --sky: #38BDF8;

  --gold: #F4B400;
  --gold-light: #FFF3CD;

  --green: #0E9F6E;
  --green-light: #E8F8F1;

  --background: #F4F7FB;
  --surface: #FFFFFF;

  --text: #142238;
  --text-secondary: #52657D;
  --text-muted: #7B8BA1;

  --border: #DCE5EF;

  /* Primary & Palette Aliases */
  --color-primary-blue: #1264C7;
  --color-deep-blue: #071B34;
  --color-academic-navy: #071B34;
  --color-royal-blue: #1264C7;
  --color-sky-blue: #38BDF8;
  --color-white: #FFFFFF;
  --color-off-white: #F4F7FB;
  --color-soft-blue: #EAF3FF;
  
  /* Accents */
  --color-accent-gold: #F4B400;
  --color-gold-highlight: #F4B400;
  --color-accent-emerald: #0E9F6E;
  --color-emerald-light: #E8F8F1;
  
  /* Text & Borders */
  --color-dark-text: #142238;
  --color-muted-text: #7B8BA1;
  --color-border: #DCE5EF;
  --color-border-light: rgba(255, 255, 255, 0.15);
  
  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #071B34 0%, #0B2A50 55%, #1264C7 100%);
  --gradient-primary-btn: linear-gradient(135deg, #1264C7 0%, #0B4EA2 100%);
  --gradient-gold: linear-gradient(90deg, #F4B400 0%, #38BDF8 100%);
  --gradient-heading: linear-gradient(90deg, #F4B400 0%, #38BDF8 100%);
  
  /* Shadows */
  --shadow-subtle: 0 4px 18px rgba(7, 27, 52, 0.05);
  --shadow-card: 0 8px 24px rgba(15, 35, 60, 0.05);
  --shadow-card-hover: 0 12px 28px rgba(15, 35, 60, 0.08);
  --shadow-btn-primary: 0 4px 14px rgba(18, 100, 199, 0.28);
  --shadow-gold: 0 4px 14px rgba(244, 180, 0, 0.25);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Typography */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition-smooth: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

body.homepage {
  font-family: var(--font-main);
  color: var(--color-dark-text);
  background-color: var(--color-off-white);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   1. SLIM TOP UTILITY BAR (Refined Height & Palette)
   -------------------------------------------------------------------------- */
.uuhf-top-strip {
  background: #061B35;
  color: #E2E8F0;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1030;
}

.uuhf-top-strip a {
  color: #CBD5E1;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.uuhf-top-strip a:hover {
  color: var(--color-sky-blue);
}

.uuhf-badge-gold {
  background: rgba(245, 179, 1, 0.15);
  color: var(--color-gold-highlight);
  border: 1px solid rgba(245, 179, 1, 0.35);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 14px;
}

.uuhf-top-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.uuhf-top-contact-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.uuhf-social-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.uuhf-social-pills li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition-smooth);
  text-decoration: none !important;
}

.uuhf-social-pills li a:hover {
  background: var(--color-primary-blue);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   2. REBUILT NAVBAR (Slim Height 74px, Clean Brand, Subtle Pill Active)
   -------------------------------------------------------------------------- */
.uuhf-main-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1025;
  background: rgba(6, 27, 53, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: var(--transition-smooth);
}

.uuhf-main-header.scrolled {
  background: rgba(6, 27, 53, 0.98);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.uuhf-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  height: 74px;
  padding: 0;
}

/* Brand Lockup */
.uuhf-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
}

.uuhf-brand-logo-frame {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--color-accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: transform 0.3s ease;
}

.uuhf-brand-lockup:hover .uuhf-brand-logo-frame {
  transform: scale(1.05);
}

.uuhf-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.uuhf-brand-titles {
  display: flex;
  flex-direction: column;
}

.uuhf-brand-name {
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.15;
  margin: 0;
}

.uuhf-brand-sub {
  color: var(--color-sky-blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Nav Menu Links */
.uuhf-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}

.uuhf-nav-link {
  color: #E2E8F0 !important;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: var(--transition-smooth);
}

.uuhf-nav-link:hover {
  color: var(--color-sky-blue) !important;
}

/* Subtle Active Underline State (No heavy dark filled box) */
.uuhf-nav-link.active {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08);
}

.uuhf-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: var(--color-accent-gold);
  border-radius: var(--radius-full);
}

/* Dropdown Menu */
.uuhf-dropdown-wrapper {
  position: relative;
  margin-left: 12px;
}

.uuhf-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: #061B35;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  padding: 8px;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  z-index: 1050;
  list-style: none;
}

.uuhf-dropdown-wrapper:hover .uuhf-dropdown-menu,
.uuhf-dropdown-wrapper:focus-within .uuhf-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.uuhf-dropdown-item {
  color: #CBD5E1 !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  transition: var(--transition-smooth);
}

.uuhf-dropdown-item:hover {
  color: #FFFFFF !important;
  background: rgba(11, 78, 162, 0.35);
  padding-left: 18px;
}

/* Portal Login Button (Refined Proportions: 40-44px height, 150-170px width) */
.uuhf-btn-portal {
  background: linear-gradient(135deg, #0B4EA2 0%, #1468D4 100%);
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 14.5px;
  height: 42px;
  min-height: 42px;
  width: 160px;
  padding: 10px 16px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(11, 78, 162, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.uuhf-btn-portal i.fa-lock {
  color: var(--color-accent-gold);
  font-size: 15px;
}

.uuhf-btn-portal:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #0E5AC0 0%, #1B74EC 100%);
  box-shadow: 0 6px 18px rgba(11, 78, 162, 0.4);
  border-color: rgba(245, 179, 1, 0.4);
  color: #FFFFFF !important;
}

.uuhf-btn-portal.active {
  background: linear-gradient(135deg, #0E5AC0 0%, #1B74EC 100%);
  border-color: var(--color-accent-gold) !important;
  box-shadow: 0 0 0 2px rgba(244, 180, 0, 0.5), 0 6px 18px rgba(11, 78, 162, 0.4) !important;
  color: #FFFFFF !important;
}

/* Mobile Toggle */
.uuhf-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: #FFFFFF;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. HERO SECTION (100% Full-Width Viewport, 80% Max Height, Modern Glass Design)
   -------------------------------------------------------------------------- */
#main-slider.uuhf-hero,
.uuhf-hero {
  position: relative !important;
  width: 100% !important;
  height: 80vh !important;
  min-height: 540px !important;
  max-height: 80vh !important;
  display: block !important;
  background: #061B35 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main-slider #sliderCarousel,
.uuhf-hero-carousel {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 540px !important;
  max-height: 80vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#main-slider .carousel-inner,
.uuhf-hero-carousel .carousel-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

#main-slider .carousel .item,
#main-slider .item,
.uuhf-hero-carousel .item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 540px !important;
  max-height: 80vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  opacity: 0 !important;
  z-index: 1 !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#main-slider .carousel .item:first-child {
  top: 0 !important;
  position: absolute !important;
}

#main-slider .carousel .item.active,
#main-slider .item.active,
.uuhf-hero-carousel .item.active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Layer 1: Background image with subtle slow zoom */
.uuhf-hero-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  transform: scale(1.02);
  transition: transform 6.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.uuhf-hero-carousel .item.active .uuhf-hero-slide {
  transform: scale(1);
}

/* Layer 2: Dark Navy Gradient Overlay */
.uuhf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 27, 53, 0.92) 0%,
    rgba(6, 27, 53, 0.72) 48%,
    rgba(6, 27, 53, 0.38) 100%
  );
  z-index: 1;
}

/* Layer 3: Blue Atmospheric Glow Gradient */
.uuhf-hero-atmospheric {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 45%, rgba(11, 78, 162, 0.40) 0%, transparent 65%);
  z-index: 2;
  pointer-events: none;
}

/* Layer 4: Subtle Vignette */
.uuhf-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(6, 27, 53, 0.58) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Layer 5: Decorative Grid Pattern */
.uuhf-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(56, 189, 248, 0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.7;
  z-index: 4;
  pointer-events: none;
}

/* Hero Content Wrapper */
.uuhf-hero-content-wrap {
  position: relative;
  z-index: 5;
  padding: 10px 0 55px;
  max-width: 740px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s ease 0.15s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.uuhf-hero-carousel .item.active .uuhf-hero-content-wrap {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Eyebrow Capsule */
.uuhf-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 27, 53, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.45);
  padding: 0 16px;
  height: 35px;
  min-height: 35px;
  border-radius: var(--radius-full);
  color: #38BDF8;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Strong Editorial Heading */
.uuhf-hero-title {
  color: #FFFFFF;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.uuhf-hero-title span {
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero Description */
.uuhf-hero-desc {
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 26px;
  max-width: 660px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Hero CTA Buttons */
.uuhf-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.uuhf-btn-primary {
  background: var(--gradient-primary-btn);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 15px;
  padding: 0 28px;
  height: 48px;
  min-height: 48px;
  border-radius: 11px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-btn-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: var(--transition-smooth);
}

.uuhf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(11, 78, 162, 0.45);
  color: #FFFFFF !important;
}

.uuhf-btn-glass {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 15px;
  padding: 0 26px;
  height: 48px;
  min-height: 48px;
  border-radius: 11px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: var(--transition-smooth);
}

.uuhf-btn-glass:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF !important;
}

/* Modern Viewport-Anchored Glass Controls */
#main-slider .uuhf-hero-nav-arrow,
.uuhf-hero-nav-arrow {
  position: absolute !important;
  top: 48% !important;
  transform: translateY(-50%) !important;
  z-index: 25 !important;
  width: 48px !important;
  height: 48px !important;
  line-height: 46px !important;
  border-radius: 12px !important;
  background: rgba(6, 27, 53, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  margin-top: 0 !important;
}

#main-slider .uuhf-hero-nav-arrow:hover,
.uuhf-hero-nav-arrow:hover {
  background: #0B4EA2 !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 12px 30px rgba(11, 78, 162, 0.5) !important;
}

#main-slider .uuhf-hero-nav-arrow.uuhf-prev,
#main-slider .uuhf-hero-nav-arrow.prev {
  left: 28px !important;
  right: auto !important;
}

#main-slider .uuhf-hero-nav-arrow.uuhf-next,
#main-slider .uuhf-hero-nav-arrow.next {
  right: 28px !important;
  left: auto !important;
}

/* Slide Indicator & Progress Bar Strip */
.uuhf-hero-bottom-bar {
  position: absolute !important;
  bottom: 72px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 15 !important;
  pointer-events: none !important;
}

.uuhf-hero-bottom-content {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  pointer-events: auto !important;
}

.uuhf-hero-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}

.uuhf-counter-active {
  color: var(--color-accent-gold);
  font-size: 16px;
}

.uuhf-counter-divider {
  color: rgba(255, 255, 255, 0.4);
}

.uuhf-counter-total {
  color: rgba(255, 255, 255, 0.75);
}

.uuhf-hero-progress-track {
  width: 130px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.uuhf-hero-progress-fill {
  height: 100%;
  width: 0%;
  background: #F5B301;
  border-radius: var(--radius-full);
}

#main-slider .uuhf-hero-indicators,
.uuhf-hero-indicators {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 0 0 10px !important;
  padding: 0 !important;
  width: auto !important;
}

#main-slider .uuhf-hero-indicators li,
.uuhf-hero-indicators li {
  width: 26px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.35s ease !important;
  display: inline-block !important;
}

#main-slider .uuhf-hero-indicators li:after,
.uuhf-hero-indicators li:after {
  display: none !important;
}

#main-slider .uuhf-hero-indicators li.active,
.uuhf-hero-indicators li.active {
  width: 44px !important;
  background: #F5B301 !important;
  box-shadow: 0 0 10px rgba(245, 179, 1, 0.6) !important;
}

/* Responsive Overrides for Hero */
@media (max-width: 991px) {
  #main-slider.uuhf-hero,
  #main-slider #sliderCarousel,
  .uuhf-hero-carousel,
  #main-slider .carousel .item,
  #main-slider .item {
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
  }
  .uuhf-hero-title {
    font-size: 36px !important;
  }
  .uuhf-hero-desc {
    font-size: 15px !important;
    margin-bottom: 22px !important;
  }
  .uuhf-hero-bottom-bar {
    bottom: 60px !important;
  }
}

@media (max-width: 767px) {
  #main-slider.uuhf-hero,
  #main-slider #sliderCarousel,
  .uuhf-hero-carousel,
  #main-slider .carousel .item,
  #main-slider .item {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }
  .uuhf-hero-title {
    font-size: 27px !important;
    line-height: 1.2 !important;
  }
  .uuhf-hero-desc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }
  .uuhf-hero-eyebrow {
    font-size: 11px !important;
    height: 30px !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
  }
  .uuhf-hero-actions .uuhf-btn-primary,
  .uuhf-hero-actions .uuhf-btn-glass {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13.5px !important;
    padding: 0 18px !important;
  }
  .uuhf-hero-bottom-bar {
    bottom: 48px !important;
  }
  .uuhf-quick-panel-section {
    margin-top: -24px !important;
  }
}

/* --------------------------------------------------------------------------
   4. QUICK ACCESS FLOATING CARDS (105-120px height, 4 clean cards)
   -------------------------------------------------------------------------- */
.uuhf-quick-panel-section {
  position: relative;
  z-index: 20;
  margin-top: -46px;
}

.uuhf-quick-panel {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(6, 27, 53, 0.12);
  border: 1px solid rgba(11, 78, 162, 0.10);
  padding: 16px;
}

.uuhf-quick-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 18px;
  min-height: 110px;
  height: 110px;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  transition: var(--transition-smooth);
  color: var(--color-dark-text);
  background: #FFFFFF;
  border: 1px solid rgba(11, 78, 162, 0.08);
  box-shadow: 0 2px 8px rgba(6, 27, 53, 0.04);
}

.uuhf-quick-item:hover {
  background: #FFFFFF;
  border-color: rgba(11, 78, 162, 0.3);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.uuhf-quick-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: var(--transition-smooth);
}

.uuhf-quick-item:hover .uuhf-quick-icon {
  transform: scale(1.08);
}

.icon-blue { background: rgba(11, 78, 162, 0.12); color: var(--color-primary-blue); }
.icon-emerald { background: rgba(16, 185, 129, 0.12); color: #059669; }
.icon-gold { background: rgba(245, 179, 1, 0.15); color: #D97706; }
.icon-royal { background: rgba(20, 104, 212, 0.12); color: var(--color-royal-blue); }

.uuhf-quick-text h5 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--color-dark-text);
  line-height: 1.25;
}

.uuhf-quick-text p {
  font-size: 12px;
  color: var(--color-muted-text);
  margin: 0;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   5. RESEARCH AT A GLANCE (STATISTICS)
   -------------------------------------------------------------------------- */
.uuhf-glance-section {
  padding: 85px 0 65px 0;
  background: #FFFFFF;
}

.uuhf-section-header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 50px auto;
}

.uuhf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.uuhf-kicker.gold {
  color: var(--color-gold-highlight);
}

.uuhf-section-title {
  font-size: 38px;
  font-weight: 800;
  color: var(--color-academic-navy);
  line-height: 1.2;
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.uuhf-section-title.light {
  color: #FFFFFF;
}

.uuhf-section-desc {
  font-size: 16px;
  color: var(--color-muted-text);
  line-height: 1.7;
  margin: 0;
}

.uuhf-section-desc.light {
  color: #CBD5E1;
}

/* --------------------------------------------------------------------------
   5. RESEARCH AT A GLANCE (STATISTICS) - REDESIGNED IMPACT CARDS
   -------------------------------------------------------------------------- */
.uuhf-glance-section {
  padding: 80px 0 70px 0;
  background: #F8FAFC;
  position: relative;
}

.uuhf-glance-link {
  text-decoration: none !important;
  display: block;
  height: 100%;
  color: inherit !important;
}

.uuhf-impact-card {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(11, 78, 162, 0.08);
  box-shadow: 0 10px 28px rgba(7, 27, 52, 0.05);
  padding: 30px 26px 22px 26px;
  height: 100%;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Top Accent Bar */
.uuhf-impact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transition: height 0.3s ease;
}

.uuhf-impact-card.card-projects::before {
  background: linear-gradient(90deg, #1268C4, #38BDF8);
}

.uuhf-impact-card.card-funding::before {
  background: linear-gradient(90deg, #059669, #34D399);
}

.uuhf-impact-card.card-achieve::before {
  background: linear-gradient(90deg, #D97706, #FBBF24);
}

.uuhf-glance-link:hover .uuhf-impact-card {
  transform: translateY(-8px);
  box-shadow: 0 20px 42px rgba(7, 27, 52, 0.12);
}

.uuhf-glance-link:hover .uuhf-impact-card::before {
  height: 6px;
}

.uuhf-glance-link:hover .uuhf-impact-card.card-projects {
  border-color: rgba(18, 104, 196, 0.35);
}

.uuhf-glance-link:hover .uuhf-impact-card.card-funding {
  border-color: rgba(16, 185, 129, 0.35);
}

.uuhf-glance-link:hover .uuhf-impact-card.card-achieve {
  border-color: rgba(245, 179, 1, 0.4);
}

/* Card Top Row: Icon, Tag Badge, External Arrow */
.uuhf-impact-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.uuhf-impact-icon-box {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.card-projects .uuhf-impact-icon-box {
  background: rgba(18, 104, 196, 0.10);
  color: #1268C4;
  border: 1px solid rgba(18, 104, 196, 0.20);
}

.card-funding .uuhf-impact-icon-box {
  background: rgba(16, 185, 129, 0.10);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.20);
}

.card-achieve .uuhf-impact-icon-box {
  background: rgba(245, 179, 1, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 179, 1, 0.25);
}

.uuhf-glance-link:hover .uuhf-impact-icon-box {
  transform: scale(1.08) rotate(-4deg);
  filter: brightness(1.1);
}

.uuhf-impact-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 11px;
  border-radius: 20px;
}

.card-projects .uuhf-impact-tag {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid rgba(30, 64, 175, 0.15);
}

.card-funding .uuhf-impact-tag {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid rgba(6, 95, 70, 0.15);
}

.card-achieve .uuhf-impact-tag {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid rgba(146, 64, 14, 0.15);
}

.uuhf-impact-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.25s ease;
}

.uuhf-glance-link:hover .uuhf-impact-arrow {
  background: #041F3D;
  color: #FFFFFF;
  transform: translate(2px, -2px);
}

/* Number / Stat Counter */
.uuhf-impact-number-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
}

.uuhf-impact-number {
  font-size: 44px;
  font-weight: 800;
  color: #041F3D;
  line-height: 1;
  letter-spacing: -1.2px;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  display: inline-block;
}

/* Card Title */
.uuhf-impact-title {
  font-size: 17px;
  font-weight: 700;
  color: #062B52;
  margin: 0 0 8px 0;
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.uuhf-impact-divider {
  height: 1px;
  background: rgba(11, 78, 162, 0.08);
  margin: 10px 0 12px 0;
}

/* Card Description */
.uuhf-impact-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 18px 0;
  flex-grow: 1;
}

/* Footer Action */
.uuhf-impact-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
  border-top: 1px dashed rgba(11, 78, 162, 0.12);
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.25s ease;
}

.card-projects .uuhf-impact-action {
  color: #1268C4;
}

.card-funding .uuhf-impact-action {
  color: #059669;
}

.card-achieve .uuhf-impact-action {
  color: #D97706;
}

.uuhf-impact-action i {
  font-size: 12px;
  transition: transform 0.25s ease;
}

.uuhf-glance-link:hover .uuhf-impact-action i {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   6. LEADERSHIP MESSAGES SECTION
   -------------------------------------------------------------------------- */
.uuhf-messages-section {
  padding: 70px 0;
  background: linear-gradient(135deg, #061B35 0%, #073B7A 100%);
  position: relative;
}

.uuhf-message-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 30px 34px;
  margin-bottom: 30px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  transition: var(--transition-smooth);
  width: 100%;
  box-sizing: border-box;
}

/* Strict requirement: Card max-height 500px on desktop */
@media (min-width: 992px) {
  .uuhf-message-card,
  .vc-message-card {
    max-height: 500px;
    overflow: hidden;
  }
}

.uuhf-message-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.vc-card-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

@media (min-width: 992px) {
  .vc-card-inner {
    max-height: 440px;
  }
}

.vc-portrait-col {
  flex: 0 0 230px;
  width: 230px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.uuhf-portrait-wrapper,
.vc-portrait-frame {
  width: 210px;
  height: 250px;
  max-height: 260px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(245, 179, 1, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  background: #041F3D;
  position: relative;
}

.uuhf-portrait-wrapper img,
.vc-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
  display: block;
}

.uuhf-message-card:hover .uuhf-portrait-wrapper img,
.uuhf-message-card:hover .vc-portrait-frame img {
  transform: scale(1.04);
}

.vc-content-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .vc-content-col {
    max-height: 440px;
  }
}

.vc-header-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.uuhf-quote-icon,
.vc-quote-badge {
  font-size: 26px;
  color: var(--color-accent-gold);
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
  margin-bottom: 0;
}

.uuhf-message-title,
.vc-title {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.uuhf-message-body {
  color: #E2E8F0;
  font-size: 14.5px;
  line-height: 1.75;
}

/* Subtle scrollbar for message body if content exceeds container */
.vc-message-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 180, 0, 0.45) rgba(255, 255, 255, 0.05);
}

.vc-message-scroll::-webkit-scrollbar {
  width: 6px;
}

.vc-message-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.vc-message-scroll::-webkit-scrollbar-thumb {
  background: rgba(244, 180, 0, 0.45);
  border-radius: 4px;
}

.vc-message-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 180, 0, 0.75);
}

/* Clean text colors on dark background for any rich-text paragraphs */
.vc-message-scroll p,
.vc-message-scroll font,
.vc-message-scroll span,
.vc-message-scroll div {
  color: #E2E8F0 !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}

.vc-message-scroll p {
  margin-bottom: 12px !important;
}

.vc-message-scroll p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 991px) {
  .vc-card-inner {
    gap: 22px;
  }
  .vc-portrait-col {
    flex: 0 0 190px;
    width: 190px;
    max-width: 190px;
  }
  .uuhf-portrait-wrapper,
  .vc-portrait-frame {
    width: 180px;
    height: 220px;
  }
  .uuhf-message-title,
  .vc-title {
    font-size: 20px;
  }
  .vc-message-scroll {
    max-height: 320px;
  }
}

@media (max-width: 767px) {
  .uuhf-message-card,
  .vc-message-card {
    padding: 24px 18px;
    max-height: none !important;
    height: auto !important;
  }
  .vc-card-inner {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-height: none !important;
  }
  .vc-portrait-col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .uuhf-portrait-wrapper,
  .vc-portrait-frame {
    width: 150px;
    height: 180px;
    margin: 0 auto;
  }
  .vc-content-col {
    width: 100%;
    max-height: none !important;
  }
  .vc-header-wrap {
    justify-content: center;
    text-align: center;
  }
  .uuhf-message-title,
  .vc-title {
    font-size: 19px;
    text-align: center;
  }
  .vc-message-scroll {
    max-height: 280px;
    padding-right: 8px;
  }
}

/* --------------------------------------------------------------------------
   7. RESEARCH DOMAINS & WORKFLOW
   -------------------------------------------------------------------------- */
.uuhf-areas-section {
  padding: 85px 0;
  background: var(--color-off-white);
}

.uuhf-area-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 30px 24px;
  box-shadow: var(--shadow-subtle);
  border: 1px solid rgba(11, 78, 162, 0.08);
  height: 100%;
  transition: var(--transition-smooth);
}

.uuhf-area-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-blue);
}

.uuhf-area-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-soft-blue);
  color: var(--color-primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
  transition: var(--transition-smooth);
}

.uuhf-area-card:hover .uuhf-area-badge {
  background: var(--color-primary-blue);
  color: #FFFFFF;
}

.uuhf-area-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-dark-text);
  margin-bottom: 10px;
}

.uuhf-area-card p {
  font-size: 14px;
  color: var(--color-muted-text);
  line-height: 1.6;
  margin: 0;
}

.uuhf-workflow-section {
  padding: 85px 0;
  background: #FFFFFF;
}

.uuhf-step-card {
  text-align: center;
  padding: 20px 14px;
}

.uuhf-step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient-primary-btn);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  box-shadow: 0 8px 20px rgba(11, 78, 162, 0.25);
}

.uuhf-step-card h5 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-dark-text);
  margin-bottom: 8px;
}

.uuhf-step-card p {
  font-size: 13px;
  color: var(--color-muted-text);
  line-height: 1.5;
  margin: 0;
}

.uuhf-cta-section {
  padding: 75px 0;
  background: linear-gradient(135deg, #061B35 0%, #0B4EA2 100%);
  color: #FFFFFF;
}

.uuhf-cta-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 55px 36px;
  text-align: center;
}

.uuhf-cta-title {
  font-size: 36px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 14px;
}

.uuhf-cta-desc {
  font-size: 16.5px;
  color: #E2E8F0;
  max-width: 650px;
  margin: 0 auto 30px auto;
  line-height: 1.7;
}

.uuhf-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   8. COMPACT FOOTER (Height 260–320px Desktop, Academic Navy & Gold Line)
   -------------------------------------------------------------------------- */
.uuhf-main-footer {
  background: linear-gradient(135deg, #061B35 0%, #073B7A 100%);
  color: #CBD5E1;
  padding: 45px 0 0 0;
  position: relative;
  border-top: 3px solid var(--color-accent-gold);
}

.uuhf-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.uuhf-footer-logo-frame {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--color-accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden;
}

.uuhf-footer-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.uuhf-footer-brand h4 {
  font-size: 17px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.2;
}

.uuhf-footer-brand small {
  color: var(--color-sky-blue);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.uuhf-footer-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #94A3B8;
  margin-bottom: 16px;
  max-width: 320px;
}

.uuhf-footer-col h4 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px 0;
  position: relative;
  padding-bottom: 8px;
}

.uuhf-footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--color-accent-gold);
}

/* Explore Column: Clean Vertical List with Colorful Icon Badges */
.uuhf-footer-explore-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
}

.uuhf-explore-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: transform 0.22s ease, color 0.22s ease;
}

.uuhf-explore-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 10px;
  transition: filter 0.22s ease, transform 0.22s ease;
}

.uuhf-explore-icon.icon-home {
  background: rgba(11, 78, 162, 0.3);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.uuhf-explore-icon.icon-projects {
  background: rgba(14, 165, 233, 0.25);
  color: #38BDF8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.uuhf-explore-icon.icon-funding {
  background: rgba(16, 185, 129, 0.25);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.uuhf-explore-icon.icon-achieve {
  background: rgba(245, 179, 1, 0.25);
  color: #FBBF24;
  border: 1px solid rgba(245, 179, 1, 0.35);
}

.uuhf-explore-icon.icon-lead {
  background: rgba(139, 92, 246, 0.25);
  color: #A78BFA;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

.uuhf-explore-text {
  flex: none;
  margin-right: 8px;
}

.uuhf-explore-arrow {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 0;
  transition: transform 0.22s ease, color 0.22s ease;
}

.uuhf-explore-link:hover {
  color: #FFFFFF !important;
  transform: translateX(4px);
}

.uuhf-explore-link:hover .uuhf-explore-icon {
  filter: brightness(1.25);
  transform: scale(1.06);
}

.uuhf-explore-link:hover .uuhf-explore-arrow {
  color: var(--color-sky-blue);
  transform: translateX(3px);
}

/* Secure Portals: Flex row, non-wrapping text, GPU-accelerated translateX on hover */
.uuhf-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uuhf-footer-links li {
  margin-bottom: 9px;
}

.uuhf-footer-links li a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: transform 0.2s ease, color 0.2s ease;
}

.uuhf-portal-text {
  white-space: nowrap;
  display: inline-block;
}

.uuhf-footer-links li a i {
  min-width: 15px;
  text-align: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.uuhf-footer-links li a:hover {
  color: #FFFFFF !important;
  transform: translateX(3px);
}

.uuhf-footer-links li a:hover i {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* --------------------------------------------------------------------------
   Footer - University Desk Institutional Contact Block
   -------------------------------------------------------------------------- */
.university-desk-block {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 4px;
}

.university-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.university-contact-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 1px;
  transition: transform 0.22s ease, filter 0.22s ease;
  flex-shrink: 0;
}

.university-contact-icon.icon-phone {
  background: rgba(14, 165, 233, 0.22);
  color: #38BDF8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.university-contact-icon.icon-email {
  background: rgba(16, 185, 129, 0.22);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.university-contact-icon.icon-campus {
  background: rgba(245, 179, 1, 0.22);
  color: #FBBF24;
  border: 1px solid rgba(245, 179, 1, 0.35);
}

.university-contact-item:hover .university-contact-icon {
  filter: brightness(1.2);
  transform: scale(1.06);
}

.university-contact-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.university-contact-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94A3B8;
  line-height: 1.2;
  margin-bottom: 3px;
}

.university-contact-value {
  font-size: 13.5px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.45;
  text-decoration: none !important;
  word-break: break-word;
  transition: color 0.2s ease;
}

a.university-contact-value:hover {
  color: var(--color-sky-blue) !important;
}

/* Backward compatibility for original list if referenced anywhere */
.uuhf-footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uuhf-footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #CBD5E1;
}

.uuhf-footer-contact-list li i {
  color: var(--color-accent-gold);
  margin-top: 3px;
  font-size: 13px;
}

.uuhf-footer-bottom {
  margin-top: 30px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: #64748B;
}

.uuhf-footer-bottom a {
  color: var(--color-accent-gold);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .uuhf-nav-toggle {
    display: block;
  }
  
  .uuhf-nav-menu-collapse {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: #061B35;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  }

  .uuhf-nav-menu-collapse.in {
    display: block;
  }

  .uuhf-nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .uuhf-nav-link {
    width: 100%;
    padding: 10px 14px;
  }

  .uuhf-dropdown-wrapper {
    margin-left: 0;
    width: 100%;
    margin-top: 10px;
  }

  .uuhf-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    margin: 6px 0 10px 0;
    width: 100%;
  }

  .uuhf-btn-portal {
    width: 100%;
    justify-content: center;
  }

  .uuhf-hero {
    min-height: 580px;
    height: 600px;
  }

  .uuhf-hero-content-wrap {
    padding: 30px 20px;
    max-width: 600px;
  }

  .uuhf-hero-title {
    font-size: 44px;
    line-height: 1.1;
  }

  .uuhf-hero-bottom-bar {
    bottom: 50px;
  }

  .uuhf-quick-panel-section {
    margin-top: -30px;
  }

  .uuhf-quick-item {
    min-height: auto;
    height: auto;
    margin-bottom: 10px;
  }

  .uuhf-footer-col {
    margin-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .uuhf-top-strip {
    display: none;
  }

  .uuhf-navbar {
    min-height: 68px;
    height: 68px;
  }

  .uuhf-brand-name {
    font-size: 16px;
  }

  .uuhf-brand-logo-frame {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .uuhf-hero {
    min-height: 540px;
    height: 560px;
  }

  .uuhf-hero-content-wrap {
    padding: 16px 12px;
    max-width: 100%;
  }

  .uuhf-hero-eyebrow {
    font-size: 11.5px;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    margin-bottom: 14px;
  }

  .uuhf-hero-title {
    font-size: 34px;
    line-height: 1.14;
    margin-bottom: 14px;
  }

  .uuhf-hero-desc {
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 22px;
  }

  .uuhf-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .uuhf-btn-primary,
  .uuhf-btn-glass {
    justify-content: center;
    width: 100%;
    height: 46px;
    min-height: 46px;
  }

  .uuhf-hero-nav-arrow {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .uuhf-hero-nav-arrow.prev { left: 8px; }
  .uuhf-hero-nav-arrow.next { right: 8px; }

  .uuhf-hero-bottom-bar {
    bottom: 25px;
  }

  .uuhf-hero-bottom-content {
    justify-content: center;
    gap: 14px;
  }

  .uuhf-hero-progress-track {
    width: 90px;
  }

  .uuhf-quick-panel-section {
    margin-top: 15px;
  }

  .uuhf-stat-number {
    font-size: 36px;
  }

  .uuhf-message-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .uuhf-hero-title {
    font-size: 32px;
  }

  .uuhf-hero {
    min-height: 520px;
    height: 540px;
  }
}

/* ==========================================================================
   10. PUBLIC SUBPAGE DESIGN SYSTEM (Projects, Funding Agencies, Achievements)
   ========================================================================== */

/* Universal Container: 1280px Desktop Width, Aligned Margins */
.uuhf-container,
.uuhf-subpage-hero .container,
.uuhf-subpage-body .container,
.uuhf-main-header .container,
.uuhf-top-strip .container,
.uuhf-main-footer .container {
  width: calc(100% - 48px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 1400px) {
  .uuhf-container,
  .uuhf-subpage-hero .container,
  .uuhf-subpage-body .container,
  .uuhf-main-header .container,
  .uuhf-top-strip .container,
  .uuhf-main-footer .container {
    max-width: 1320px !important;
  }
}

@media (max-width: 768px) {
  .uuhf-container,
  .uuhf-subpage-hero .container,
  .uuhf-subpage-body .container,
  .uuhf-main-header .container,
  .uuhf-top-strip .container,
  .uuhf-main-footer .container {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Subpage Hero Banner (Height 220-250px Maximum) */
.uuhf-subpage-hero {
  position: relative;
  height: 235px;
  min-height: 220px;
  max-height: 250px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue) 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  border-bottom: 2px solid var(--gold);
}

.uuhf-subpage-hero .uuhf-subpage-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(56, 189, 248, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.75;
  pointer-events: none;
}

.uuhf-subpage-hero .uuhf-subpage-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.14) 0%, transparent 70%);
  top: -120px;
  right: -50px;
  pointer-events: none;
}

.uuhf-subpage-content {
  position: relative;
  z-index: 5;
  max-width: 740px;
}

.uuhf-subpage-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(7, 27, 52, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  color: var(--sky);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
}

.uuhf-subpage-title {
  color: #FFFFFF;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.4px;
  margin: 0 0 10px 0;
}

.uuhf-subpage-title span {
  background: linear-gradient(90deg, #F4B400 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uuhf-subpage-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}

/* Subpage Main Body */
.uuhf-subpage-body {
  background-color: var(--background);
  background-image: radial-gradient(circle at 50% 0%, rgba(18, 100, 199, 0.03), transparent 70%);
  padding: 36px 0 64px 0;
  min-height: calc(100vh - 350px);
}

/* Page Entrance Animation */
.uuhf-page-anim {
  animation: uuhfFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes uuhfFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Compact Segmented Status & Category Tab Navigation */
.uuhf-custom-tabs-nav,
.uuhf-segmented-tabs {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: #FFFFFF !important;
  padding: 5px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(7, 27, 52, 0.04) !important;
  margin-bottom: 24px !important;
  list-style: none !important;
}

.uuhf-custom-tabs-nav.tabs-projects,
.uuhf-segmented-tabs.tabs-projects {
  max-width: 680px;
  width: 100%;
}

.uuhf-custom-tabs-nav.tabs-funding,
.uuhf-segmented-tabs.tabs-funding {
  max-width: 880px;
  width: 100%;
}

.uuhf-custom-tabs-nav > li,
.uuhf-segmented-tabs > li {
  margin: 0 !important;
  border: none !important;
  flex: 1;
}

.uuhf-custom-tabs-nav > li > a,
.uuhf-segmented-tabs > li > a {
  height: 44px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap;
  position: relative !important;
}

/* ABSOLUTE OVERRIDE FOR LEGACY TRIANGLE ARROW FROM main.css */
.uuhf-custom-tabs-nav > li > a:after,
.uuhf-custom-tabs-nav > li.active > a:after,
.uuhf-custom-tabs-nav > li > a:before,
.uuhf-custom-tabs-nav > li.active > a:before,
.uuhf-segmented-tabs > li > a:after,
.uuhf-segmented-tabs > li.active > a:after,
.uuhf-segmented-tabs > li > a:before,
.uuhf-segmented-tabs > li.active > a:before,
.nav-tabs.uuhf-custom-tabs-nav > li.active > a:after {
  display: none !important;
  content: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

.uuhf-custom-tabs-nav > li > a:hover,
.uuhf-segmented-tabs > li > a:hover {
  color: var(--blue) !important;
  background: var(--blue-light) !important;
}

.uuhf-custom-tabs-nav > li.active > a,
.uuhf-custom-tabs-nav > li.active > a:focus,
.uuhf-custom-tabs-nav > li.active > a:hover,
.uuhf-segmented-tabs > li.active > a,
.uuhf-segmented-tabs > li.active > a:focus,
.uuhf-segmented-tabs > li.active > a:hover {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 0 0 var(--gold), 0 4px 14px rgba(18, 100, 199, 0.28) !important;
}

.uuhf-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--blue-light);
  color: var(--blue);
  transition: all 0.2s ease;
}

.uuhf-custom-tabs-nav > li.active .uuhf-tab-badge,
.uuhf-segmented-tabs > li.active .uuhf-tab-badge {
  background: rgba(255, 255, 255, 0.24);
  color: #FFFFFF;
}

/* Utility Row (Search + Stat Card) */
.uuhf-utility-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .uuhf-utility-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Search Bar (Projects full width & Utility row) */
.uuhf-search-card {
  height: 52px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(7, 27, 52, 0.05);
  display: flex;
  align-items: center;
  padding: 0 18px;
  margin-bottom: 24px;
  transition: all 0.2s ease;
}

.uuhf-utility-row .uuhf-search-card {
  margin-bottom: 0;
  height: 54px;
}

.uuhf-search-card:focus-within,
.uuhf-search-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 100, 199, 0.10), 0 4px 18px rgba(7, 27, 52, 0.05);
}

.uuhf-search-card i {
  color: var(--blue);
  font-size: 16px;
  margin-right: 14px;
  pointer-events: none;
}

.uuhf-search-card input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
  padding: 0;
}

.uuhf-search-card input::placeholder {
  color: var(--text-muted);
}

/* Total Stat Card (Subpages Utility Row) */
.uuhf-utility-row .uuhf-stat-card,
.uuhf-stat-summary-card {
  height: 54px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(7, 27, 52, 0.05);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}

.uuhf-stat-icon-box,
.uuhf-stat-summary-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.uuhf-stat-icon-box.gold,
.uuhf-stat-summary-icon.gold {
  background: var(--gold-light);
  color: #D97706;
}

.uuhf-stat-info,
.uuhf-stat-summary-text {
  display: flex;
  flex-direction: column;
}

.uuhf-stat-label,
.uuhf-stat-summary-text small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.2;
  margin: 0 0 1px 0;
}

.uuhf-stat-value,
.uuhf-stat-summary-text h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin: 0;
}

/* Modernized University Data Table */
.uuhf-table-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid #E0E8F0;
  box-shadow: 0 8px 24px rgba(15, 35, 60, 0.05);
  overflow: hidden;
  margin-bottom: 32px;
}

.uuhf-table-card .table-responsive {
  border: none;
  margin: 0;
  overflow-x: auto;
}

.uuhf-table,
.table.uuhf-table,
table.uuhf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 820px;
  margin-bottom: 0 !important;
}

.uuhf-table tr,
.table.uuhf-table tr,
.table.uuhf-table > tbody > tr,
.table.uuhf-table > thead > tr {
  height: auto !important;
}

.uuhf-table thead th,
.table.uuhf-table thead th,
.table.uuhf-table > thead > tr > th,
.table.uuhf-table th {
  padding: 14px 12px !important;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #333 !important;
  border: none !important;
  border-bottom: 2px solid var(--gold) !important;
  white-space: nowrap;
  vertical-align: middle !important;
  display: table-cell !important;
}

.uuhf-table tbody tr,
.table.uuhf-table tbody tr,
.table.uuhf-table > tbody > tr {
  height: auto !important;
  transition: background-color 0.18s ease;
  border-bottom: 1px solid #EDF2F7;
}

.uuhf-table tbody tr:hover,
.table.uuhf-table tbody tr:hover,
.table.uuhf-table > tbody > tr:hover {
  background-color: #F8FAFD !important;
}

.uuhf-table tbody td,
.table.uuhf-table tbody td,
.table.uuhf-table > tbody > tr > td,
.table.uuhf-table td {
  padding: 14px 12px !important;
  font-size: 14px;
  font-weight: 450;
  color: var(--text) !important;
  border: none !important;
  border-bottom: 1px solid #EDF2F7 !important;
  vertical-align: middle !important;
  display: table-cell !important;
  line-height: 1.45;
  white-space: normal !important;
  word-break: break-word;
}

.uuhf-table tbody tr:last-child td,
.table.uuhf-table tbody tr:last-child td,
.table.uuhf-table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* Ensure inner blocks and text elements don't add parasitic top/bottom margins */
.uuhf-table td > *:first-child,
.table.uuhf-table td > *:first-child,
.table.uuhf-table > tbody > tr > td > *:first-child {
  margin-top: 0 !important;
}

.uuhf-table td > *:last-child,
.table.uuhf-table td > *:last-child,
.table.uuhf-table > tbody > tr > td > *:last-child {
  margin-bottom: 0 !important;
}

.uuhf-table td p,
.uuhf-table td h4,
.uuhf-table td h5,
.uuhf-table td small {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Structural Vertical Centering for Multiline Cell Stacks */
.uuhf-cell-stack {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px;
}

/* Flex row containers inside cells (e.g. researcher avatar + name) */
.uuhf-cell-flex,
.uuhf-researcher-cell,
.uuhf-table .cell-content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

.uuhf-table .col-sr,
.uuhf-col-sr {
  width: 6%;
  min-width: 55px;
  font-weight: 700;
  color: var(--text-muted) !important;
  text-align: center;
  vertical-align: middle !important;
}

.uuhf-col-project {
  width: 20%;
}

.uuhf-col-funding {
  width: 25%;
}

.uuhf-col-pi {
  width: 18%;
}

.uuhf-col-dept {
  width: 20%;
}

.uuhf-col-copi {
  width: 11%;
}

.uuhf-table .project-title-cell {
  font-weight: 600;
  color: var(--blue) !important;
  line-height: 1.4;
  vertical-align: middle !important;
  white-space: normal !important;
  word-break: break-word;
}

.uuhf-table .project-title-cell:hover {
  color: var(--blue-dark) !important;
  text-decoration: underline;
}

.uuhf-agency-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(18, 100, 199, 0.12);
  line-height: 1.35;
  margin: 0 !important;
  vertical-align: middle !important;
}

.uuhf-pi-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 0 !important;
}

.uuhf-pi-desig {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.25;
  margin: 0 !important;
}

.uuhf-dept-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
  margin: 0 !important;
}

.uuhf-college-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.25;
  margin: 0 !important;
}

.uuhf-copi-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 !important;
  display: block;
}

.uuhf-agency-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--navy);
  line-height: 1.35;
  vertical-align: middle !important;
  white-space: normal !important;
  word-break: break-word;
}

/* Status count link badges in Funding table */
.uuhf-status-count-badge,
.uuhf-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  vertical-align: middle !important;
  margin: 0 auto !important;
}

.uuhf-count-badge.badge-new {
  background: var(--blue-light);
  color: var(--blue) !important;
  border: 1px solid rgba(18, 100, 199, 0.16);
}

.uuhf-count-badge.badge-ongoing {
  background: var(--green-light);
  color: var(--green) !important;
  border: 1px solid rgba(14, 159, 110, 0.18);
}

.uuhf-count-badge.badge-completed {
  background: var(--gold-light);
  color: #B45309 !important;
  border: 1px solid rgba(244, 180, 0, 0.22);
}

.uuhf-status-count-badge:hover,
.uuhf-count-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(7, 27, 52, 0.1);
}

/* View PDF Button (Achievements) */
.uuhf-btn-pdf {
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(18, 100, 199, 0.22);
  transition: all 0.2s ease;
  border: none;
  vertical-align: middle !important;
  margin: 0 auto !important;
}

.uuhf-btn-pdf:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(18, 100, 199, 0.35);
  color: #FFFFFF !important;
}

/* Subpage Responsive Breakpoints */
@media (max-width: 991px) {
  .uuhf-subpage-title {
    font-size: 34px;
  }

  .uuhf-subpage-desc {
    font-size: 14.5px;
  }
}

@media (max-width: 767px) {
  .uuhf-subpage-hero {
    height: auto;
    min-height: 190px;
    padding: 30px 0;
  }

  .uuhf-subpage-title {
    font-size: 28px;
  }

  .uuhf-subpage-body {
    padding: 24px 0 48px 0;
  }

  .uuhf-custom-tabs-nav,
  .uuhf-segmented-tabs {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column;
  }

  .uuhf-custom-tabs-nav > li,
  .uuhf-segmented-tabs > li {
    width: 100%;
  }

  .uuhf-custom-tabs-nav > li > a,
  .uuhf-segmented-tabs > li > a {
    width: 100%;
    justify-content: space-between !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* Add More / Action Button */
.btn-add-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--blue) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: 52px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(18, 100, 199, 0.25) !important;
  transition: all 0.22s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.btn-add-more:hover {
  background: var(--navy) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(7, 27, 52, 0.25) !important;
}

.btn-add-more:active {
  transform: translateY(0) !important;
}