/* ============================================================
   GNMA - Ga North Municipal Assembly
   Main Stylesheet
   ============================================================ */

/* CSS Custom Properties - Light Theme */
:root {
  --primary: #1a5276;
  --primary-dark: #154360;
  --primary-light: #2e86c1;
  --secondary: #d4ac0d;
  --secondary-dark: #b7950b;
  --accent: #c0392b;
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #e74c3c;
  --info: #2980b9;

  --text-primary: #1a1a2e;
  --text-secondary: #555;
  --text-muted: #888;
  --text-light: #fff;

  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #eef2f7;
  --bg-card: #ffffff;

  --border-color: #dee2e6;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.16);

  --header-height: 80px;
  --topbar-height: 40px;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, sans-serif;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Dark Theme */
[data-theme="dark"] {
  --text-primary: #e8eaf0;
  --text-secondary: #b0bec5;
  --text-muted: #78909c;
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #1c2128;
  --bg-card: #1c2128;
  --border-color: #30363d;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: 1.7;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--secondary); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-primary);
  line-height: 1.3;
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--primary); color: #fff;
  padding: 8px 16px; z-index: 10000;
}
.skip-link:focus { top: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 80px 0; }
.section-sm { padding: 50px 0; }

.section-header {
  text-align: center;
  margin-bottom: 50px;
}
.section-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--primary);
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}
.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 4px;
  background: var(--secondary);
  border-radius: 2px;
}
.section-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-top: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
  background: var(--primary-dark);
  color: rgba(255,255,255,0.9);
  height: var(--topbar-height);
  font-size: 0.82rem;
  z-index: 1000;
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.top-bar-left span, .top-bar-right a {
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 6px;
  transition: color var(--transition);
}
.top-bar-right a:hover { color: var(--secondary); }
.top-bar i { font-size: 0.75rem; }

.social-links { display: flex; gap: 10px; }
.social-links a {
  width: 26px; height: 26px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff !important;
  font-size: 0.7rem;
  transition: background var(--transition);
}
.social-links a:hover { background: var(--secondary); }

.theme-toggle {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  transition: background var(--transition);
}
.theme-toggle:hover { background: var(--secondary); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  padding: 10px 0;
  font-size: 0.88rem;
}
.announcement-bar.type-info { background: #e3f2fd; color: #1565c0; }
.announcement-bar.type-warning { background: #fff3e0; color: #e65100; }
.announcement-bar.type-success { background: #e8f5e9; color: #2e7d32; }
.announcement-bar.type-danger { background: #ffebee; color: #c62828; }
[data-theme="dark"] .announcement-bar.type-info { background: #0d2137; color: #90caf9; }

.announcement-bar .container {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.announcement-bar .close-btn {
  margin-left: auto;
  font-size: 1.2rem;
  opacity: 0.7;
  cursor: pointer;
  background: none; border: none;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
.site-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.site-header.scrolled {
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 20px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  width: 178px;
  height: 58px;
  object-fit: contain;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.logo-text { display: none !important; }
.logo-main {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.logo-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: flex-end;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: 6px;
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-item.active .nav-link {
  color: var(--primary);
  background: var(--bg-tertiary);
}
.nav-item.active .nav-link {
  color: var(--primary);
  font-weight: 600;
}
.nav-link i { font-size: 0.65rem; transition: transform var(--transition); }
.nav-item:hover .nav-link i { transform: rotate(180deg); }

/* Dropdowns */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  min-width: 230px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition);
  z-index: 100;
  padding: 8px 0;
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.dropdown li a:hover {
  background: var(--bg-tertiary);
  color: var(--primary);
  padding-left: 20px;
}
.dropdown li a i {
  width: 18px;
  color: var(--primary);
  font-size: 0.8rem;
}

/* Mega dropdown for departments */
.dept-mega {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-width: 480px;
  padding: 12px;
  gap: 2px;
}

/* Sub-dropdown */
.has-dropdown-sub { position: relative; }
.dropdown-sub {
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all var(--transition);
  padding: 8px 0;
}
.has-dropdown-sub:hover .dropdown-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Nav Search */
.nav-search form {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  overflow: hidden;
  transition: all var(--transition);
}
.nav-search form:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,82,118,0.15);
}
.nav-search input {
  padding: 8px 14px;
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--text-primary);
  width: 160px;
  outline: none;
}
.nav-search button {
  padding: 8px 14px;
  color: var(--primary);
  background: none;
  font-size: 0.85rem;
}

/* Nav Auth */
.btn-login {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--primary);
  color: #fff !important;
  border-radius: 24px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-login:hover { background: var(--primary-dark); transform: translateY(-1px); }

.user-menu { position: relative; }
.user-menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--bg-secondary);
  border-radius: 24px;
  border: 1px solid var(--border-color);
  font-size: 0.88rem;
  color: var(--text-primary);
  cursor: pointer;
}
.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition);
  padding: 8px 0;
}
.user-menu:hover .user-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.user-dropdown li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.user-dropdown li a:hover { background: var(--bg-tertiary); color: var(--primary); }

/* Mobile Nav Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider {
  position: relative;
  overflow: hidden;
  height: 580px;
  background: var(--primary-dark);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.slide.active { opacity: 1; }

.slide-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.slide.active .slide-bg { transform: scale(1); }

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,82,118,0.85) 0%, rgba(21,67,96,0.6) 100%);
}

.slide-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 60px 40px;
  color: #fff;
  max-width: 700px;
}

.slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--secondary);
  color: #fff;
  padding: 4px 14px;
  border-radius: 24px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.slide-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.slide-content p {
  font-size: 1.05rem;
  opacity: 0.9;
  margin-bottom: 24px;
  max-width: 500px;
}

.slide-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-primary {
  background: var(--secondary);
  color: #fff;
  border: 2px solid var(--secondary);
}
.btn-primary:hover {
  background: var(--secondary-dark);
  border-color: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,172,13,0.4);
  color: #fff;
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.7);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* Slider Controls */
.slider-controls {
  position: absolute;
  bottom: 24px; right: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.slider-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slider-prev, .slider-next {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  font-size: 0.9rem;
}
.slider-prev:hover, .slider-next:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}

.slider-dots {
  display: flex;
  gap: 6px;
}
.slider-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}
.slider-dot.active {
  background: var(--secondary);
  width: 24px;
  border-radius: 4px;
}

/* ============================================================
   STATS BANNER
   ============================================================ */
.stats-banner {
  background: var(--primary);
  padding: 30px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.2);
}
.stat-item {
  background: var(--primary);
  padding: 24px 20px;
  text-align: center;
  color: #fff;
}
.stat-number {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.85rem;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   WELCOME SECTION
   ============================================================ */
.welcome-section {
  padding: 80px 0;
  background: var(--bg-primary);
}
.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.welcome-img-stack {
  position: relative;
}
.welcome-img-main {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.welcome-img-main img {
  width: 100%; height: 380px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.welcome-img-main:hover img { transform: scale(1.03); }

.welcome-img-badge {
  position: absolute;
  bottom: -20px; right: -20px;
  background: var(--secondary);
  color: #fff;
  padding: 20px;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: var(--shadow);
}
.welcome-img-badge strong {
  display: block;
  font-size: 2rem;
  font-family: var(--font-serif);
  line-height: 1;
}
.welcome-img-badge span { font-size: 0.78rem; opacity: 0.9; }

.welcome-content .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.welcome-content h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--primary);
  margin-bottom: 20px;
}
.welcome-content p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 1rem;
}
.welcome-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.feature-item i { color: var(--success); font-size: 0.9rem; }

/* ============================================================
   NEWS SECTION
   ============================================================ */
.news-section { background: var(--bg-secondary); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.news-card {
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.news-card-img {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.news-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.news-card:hover .news-card-img img { transform: scale(1.08); }

.news-card-category {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.news-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.news-card-meta span { display: flex; align-items: center; gap: 4px; }

.news-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  font-family: var(--font-serif);
}
.news-card h3 a {
  color: var(--text-primary);
  transition: color var(--transition);
}
.news-card h3 a:hover { color: var(--primary); }

.news-card-excerpt {
  color: var(--text-muted);
  font-size: 0.88rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.read-more {
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
}
.news-card:hover .read-more { gap: 10px; }

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-section { background: var(--bg-primary); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.service-icon {
  width: 70px; height: 70px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.6rem;
  color: var(--primary);
  transition: all var(--transition);
}
.service-card:hover .service-icon {
  background: var(--primary);
  color: #fff;
  transform: scale(1.1);
}

.service-card h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  font-family: var(--font-serif);
}
.service-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.service-card .btn-sm {
  padding: 8px 20px;
  font-size: 0.82rem;
  background: var(--bg-tertiary);
  color: var(--primary);
  border-radius: 24px;
  font-weight: 500;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.service-card:hover .btn-sm {
  background: var(--primary);
  color: #fff;
}

/* ============================================================
   MCE PROFILE SECTION
   ============================================================ */
.mce-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
  padding: 80px 0;
}
.mce-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: center;
}
.mce-photo-frame {
  position: relative;
}
.mce-photo-frame img {
  width: 100%;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.mce-photo-frame::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid var(--secondary);
  border-radius: calc(var(--border-radius-lg) + 10px);
  opacity: 0.5;
}
.mce-content .label { color: var(--secondary); }
.mce-content h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.mce-content p { opacity: 0.9; margin-bottom: 16px; }
.mce-content .btn-primary { background: var(--secondary); border-color: var(--secondary); }

/* ============================================================
   QUICK LINKS / DOWNLOADS
   ============================================================ */
.quick-links-section { background: var(--bg-secondary); }

.ql-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ql-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition);
  cursor: pointer;
}
.ql-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateX(4px);
}
.ql-icon {
  width: 50px; height: 50px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ql-card:hover .ql-icon { background: var(--primary); color: #fff; }
.ql-text strong { display: block; font-size: 0.9rem; margin-bottom: 2px; }
.ql-text span { font-size: 0.78rem; color: var(--text-muted); }

/* ============================================================
   GALLERY PREVIEW
   ============================================================ */
.gallery-section { background: var(--bg-primary); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 12px;
}
.gallery-item {
  overflow: hidden;
  border-radius: var(--border-radius);
  position: relative;
  cursor: pointer;
}
.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,82,118,0);
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-overlay i {
  color: #fff;
  font-size: 2rem;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition);
}
.gallery-item:hover .gallery-overlay { background: rgba(26,82,118,0.5); }
.gallery-item:hover .gallery-overlay i { opacity: 1; transform: scale(1); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,0.85); }

.footer-top { padding: 70px 0 40px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 40px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.footer-logo img {
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid var(--secondary);
}
.footer-logo strong {
  display: block;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.1rem;
}
.footer-logo span { font-size: 0.75rem; opacity: 0.7; }

.footer-about p {
  font-size: 0.88rem;
  line-height: 1.8;
  opacity: 0.8;
  margin-bottom: 20px;
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--secondary); color: #fff; transform: translateY(-3px); }

.footer-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-serif);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--secondary);
  display: inline-block;
}

.footer-links li { margin-bottom: 8px; }
.footer-links a {
  color: rgba(255,255,255,0.75);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}
.footer-links a:hover { color: var(--secondary); padding-left: 4px; }
.footer-links a i { font-size: 0.7rem; }

.footer-contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.88rem;
}
.footer-contact i {
  color: var(--secondary);
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
}
.footer-contact a { color: rgba(255,255,255,0.75); }
.footer-contact a:hover { color: var(--secondary); }

.footer-newsletter h5 {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 10px;
  margin-top: 20px;
}
.newsletter-form {
  display: flex;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow: hidden;
}
.newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 0.85rem;
  outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form button {
  padding: 10px 16px;
  background: var(--secondary);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition);
}
.newsletter-form button:hover { background: var(--secondary-dark); }

.footer-bottom {
  background: rgba(0,0,0,0.2);
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a, .footer-bottom a {
  color: rgba(255,255,255,0.6);
  transition: color var(--transition);
}
.footer-bottom-links a:hover, .footer-bottom a:hover { color: var(--secondary); }
.footer-credit { opacity: 0.5; }

/* ============================================================
   BACK TO TOP & CHATBOT
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 100px; right: 24px;
  width: 44px; height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all var(--transition);
  z-index: 500;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-3px); }

/* Chatbot */
.chatbot-widget {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 900;
}
.chatbot-toggle {
  width: 56px; height: 56px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(26,82,118,0.4);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: all var(--transition);
  animation: chatPulse 2s infinite;
}
.chatbot-toggle:hover { background: var(--primary-dark); transform: scale(1.1); }
@keyframes chatPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(26,82,118,0.4); }
  50% { box-shadow: 0 4px 30px rgba(26,82,118,0.7); }
}
.chat-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: #fff;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

.chatbot-window {
  position: absolute;
  bottom: 70px; right: 0;
  width: 360px;
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-header {
  background: var(--primary);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-logo { width: 72px; height: 36px; object-fit: contain; border-radius: 0 !important; background: transparent !important; border: 0 !important; }
.chat-header-info strong { display: block; color: #fff; font-size: 0.92rem; }
.chat-status { font-size: 0.75rem; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 4px; }
.chat-status i { color: #4ade80; font-size: 0.5rem; animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.chat-close-btn { color: rgba(255,255,255,0.8); font-size: 1rem; background: none; border: none; cursor: pointer; }

.chat-messages {
  height: 300px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-secondary);
}
.chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.bot .msg-bubble {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}
.user .msg-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-time { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.bot .msg-time { text-align: left; }
.user .msg-time { text-align: right; }

.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.chat-quick-replies button {
  padding: 5px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--primary);
  cursor: pointer;
  transition: all var(--transition);
}
.chat-quick-replies button:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.chat-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.chat-typing span {
  width: 8px; height: 8px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typing 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.chat-input-area {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
}
.chat-input-row {
  display: flex;
  gap: 8px;
}
#chatInput {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  font-size: 0.88rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition);
}
#chatInput:focus { border-color: var(--primary); }
#sendBtn {
  width: 40px; height: 40px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition);
}
#sendBtn:hover { background: var(--primary-dark); }
.chat-disclaimer { font-size: 0.7rem; color: var(--text-muted); text-align: center; margin-top: 6px; }

/* App Install Prompt */
.app-install-prompt {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: 12px 20px;
  z-index: 800;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.app-install-inner {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-install-inner img { width: 40px; height: 40px; border-radius: 8px; }
.app-install-inner strong { display: block; font-size: 0.92rem; }
.app-install-inner p { font-size: 0.78rem; color: var(--text-muted); }
.btn-install {
  padding: 8px 20px;
  background: var(--primary);
  color: #fff;
  border-radius: 24px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-dismiss { font-size: 1rem; opacity: 0.5; cursor: pointer; }

/* ============================================================
   PAGE HERO / BREADCRUMB
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  padding: 60px 0 50px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/pattern.svg') repeat;
  opacity: 0.05;
}
.page-hero-content { position: relative; }
.page-hero h1 {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--secondary); }
.breadcrumb span { color: var(--secondary); }
.breadcrumb i { color: rgba(255,255,255,0.4); font-size: 0.7rem; }

/* ============================================================
   CARDS & COMMON COMPONENTS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-primary { background: rgba(26,82,118,0.1); color: var(--primary); }
.badge-success { background: rgba(39,174,96,0.1); color: var(--success); }
.badge-warning { background: rgba(243,156,18,0.1); color: var(--warning); }
.badge-danger { background: rgba(231,76,60,0.1); color: var(--danger); }

/* Forms */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 0.92rem;
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: all var(--transition);
  outline: none;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,82,118,0.12);
  background: var(--bg-card);
}
textarea.form-control { resize: vertical; min-height: 120px; }

/* Alerts */
.alert {
  padding: 14px 18px;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.alert-success { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #2e7d32; }
.alert-danger { background: #ffebee; color: #c62828; border-left: 4px solid #c62828; }
.alert-info { background: #e3f2fd; color: #1565c0; border-left: 4px solid #1565c0; }
.alert-warning { background: #fff3e0; color: #e65100; border-left: 4px solid #e65100; }

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
}
.page-btn {
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 0.88rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.page-btn:hover, .page-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Loading spinner */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 992px) {
  .welcome-grid, .mce-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ql-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; }
  .gallery-item:first-child { grid-column: span 1; grid-row: span 1; }
  .hero-slider { height: 440px; }
  
  .nav-menu, .nav-search { display: none; }
  .nav-toggle { display: flex; }
  
  .main-nav.open .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 300px;
    background: var(--bg-card);
    padding: 80px 20px 20px;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    z-index: 1000;
  }
  .main-nav.open .nav-search { display: flex; }
  
  .dropdown, .dropdown-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--bg-secondary);
    border: none;
    border-radius: 0;
    display: none;
    padding: 0 0 0 16px;
  }
  .nav-item.open > .dropdown { display: block; }
  .dept-mega { grid-template-columns: 1fr; min-width: auto; }
}

@media (max-width: 768px) {
  .top-bar-left { display: none; }
  .news-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-slider { height: 360px; }
  .slide-content { padding: 30px 20px; }
  .ql-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .chatbot-window { width: 300px; }
  :root { --header-height: 60px; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .top-bar, .site-header, .hero-slider, .chatbot-widget,
  .back-to-top, .site-footer, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ============================================================
   FINAL RESPONSIVE + HEADER + SLIDER FIXES
   ============================================================ */
@media (min-width: 993px) {
  .container { max-width: 1360px; }
  .header-inner { gap: 10px; }
  .site-logo { gap: 8px; max-width: 210px; }
  .logo-img { width: 48px; height: 48px; }
  .logo-main { font-size: 1.05rem; }
  .logo-sub { font-size: 0.62rem; letter-spacing: .25px; }
  .main-nav { gap: 8px; min-width: 0; }
  .nav-menu { gap: 0; }
  .nav-link { padding: 8px 7px; font-size: 0.76rem; gap: 3px; }
  .dropdown li a { font-size: 0.8rem; }
  .nav-search input { width: 105px; padding: 7px 10px; font-size: 0.78rem; }
  .nav-search button { padding: 7px 10px; }
  .btn-login { padding: 8px 14px; font-size: 0.78rem; }
  .dept-mega { min-width: 420px; }
}

@media (min-width: 1200px) and (max-width: 1320px) {
  .nav-search input { width: 82px; }
  .nav-link { padding-left: 5px; padding-right: 5px; font-size: 0.72rem; }
  .btn-login { padding-left: 11px; padding-right: 11px; }
}

.hero-slider .slide-bg { filter: saturate(1.08) contrast(1.06); }
.slide-overlay { background: linear-gradient(90deg, rgba(10,30,45,0.70) 0%, rgba(10,30,45,0.42) 45%, rgba(10,30,45,0.18) 100%) !important; }
.slide-content { text-shadow: 0 3px 18px rgba(0,0,0,.55); }
.slide-content h2 { text-shadow: 0 4px 20px rgba(0,0,0,.75); }
.slide-content p { opacity: 1; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.72); font-weight: 500; }
.slide-badge { box-shadow: 0 8px 20px rgba(0,0,0,.25); }

@media (max-width: 992px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .container { width: 100%; max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .top-bar { height: auto; min-height: 36px; }
  .top-bar .container { justify-content: center; padding-top: 6px; padding-bottom: 6px; }
  .top-bar-right { gap: 10px; flex-wrap: wrap; justify-content: center; }
  .site-header { position: sticky; top: 0; }
  .header-inner { height: 64px; gap: 10px; }
  .site-logo { min-width: 0; }
  .logo-img { width: 46px; height: 46px; }
  .logo-main { font-size: 1rem; }
  .logo-sub { font-size: .58rem; }
  .main-nav { flex: 0 0 auto; }
  .nav-toggle { display: flex; z-index: 1202; }
  .main-nav .nav-auth { display: none; }
  .main-nav.open .nav-auth { display: block; width: 100%; padding: 14px 18px; }
  .main-nav.open .nav-search { display: block; width: 100%; padding: 0 18px 14px; }
  .main-nav.open .nav-search form { width: 100%; }
  .main-nav.open .nav-search input { width: 100%; flex: 1; }
  .main-nav.open .nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: min(92vw, 360px);
    max-width: 100%;
    background: var(--bg-card);
    padding: 86px 18px 24px;
    box-shadow: -18px 0 45px rgba(0,0,0,.20);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1200;
  }
  .nav-menu .nav-item { width: 100%; }
  .nav-link { width: 100%; justify-content: space-between; padding: 12px 10px; white-space: normal; font-size: .92rem; }
  .dropdown, .dropdown-sub {
    position: static !important;
    display: none;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 4px 0 8px;
    padding: 8px;
  }
  .nav-item:hover > .dropdown, .has-dropdown-sub:hover > .dropdown-sub { display: none; }
  .nav-item.open > .dropdown, .has-dropdown-sub.open > .dropdown-sub { display: block; }
  .dropdown li a { white-space: normal; font-size: .86rem; padding: 10px 12px; }
  .dept-mega { display: none; grid-template-columns: 1fr; }
  .nav-item.open > .dept-mega { display: grid; }

  section, .section, .section-sm { overflow-x: hidden; }
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="gap:50px"] { gap: 24px !important; }
  [style*="gap:40px"] { gap: 24px !important; }
  [style*="gap:28px"] { gap: 18px !important; }
  [style*="margin-bottom:60px"] { margin-bottom: 34px !important; }
  .card { max-width: 100%; }
  table { width: 100%; }
  .admin-table-wrap, .table-wrap, [class*="table"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .chatbot-widget { right: 12px; bottom: 14px; max-width: calc(100vw - 24px); }
  .chatbot-toggle { width: 50px; height: 50px; }
  .chatbot-window { position: fixed; left: 12px; right: 12px; bottom: 78px; width: auto; max-width: none; }
  .back-to-top { right: 14px; bottom: 76px; width: 40px; height: 40px; z-index: 650; }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  .section { padding: 52px 0; }
  .section-sm { padding: 34px 0; }
  .page-hero { padding: 42px 0 34px; }
  .breadcrumb { flex-wrap: wrap; }
  .hero-slider { height: 430px; }
  .slide-content { padding: 28px 16px 38px; max-width: 100%; }
  .slide-content h2 { font-size: clamp(1.55rem, 8vw, 2.15rem); }
  .slide-content p { font-size: .98rem; }
  .slider-controls { transform: scale(.88); transform-origin: right bottom; }
  .mce-photo-frame img { max-height: 420px; object-fit: cover; object-position: top; }
  .footer-grid, .footer-bottom-inner { text-align: left; }
}

@media (max-width: 480px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .logo-text { max-width: 145px; }
  .logo-main { font-size: .92rem; }
  .logo-sub { font-size: .52rem; }
  .hero-slider { height: 400px; }
  .slide-btns .btn, .btn { width: 100%; justify-content: center; }
  .chat-messages { height: 260px; }
  .chatbot-window { bottom: 74px; }
}

/* Default accessibility text size requested */
html { font-size: 14px; }
@media (max-width: 768px) { html { font-size: 14px; } }


/* ============================================================
   GNMA V3 FULL RESPONSIVE + GOD MODE MOBILE MENU PATCH
   ============================================================ */
.mobile-header-login{display:none;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff!important;font-weight:800;font-size:.88rem;box-shadow:0 10px 24px rgba(26,82,118,.24);white-space:nowrap}
@media (min-width:993px){
  .nav-link{font-size:.84rem!important;padding:9px 9px!important;font-weight:700!important}.btn-login{font-size:.84rem!important;padding:9px 15px!important}.main-nav{gap:7px!important}.nav-search input{width:100px!important}.site-logo{max-width:200px!important}.logo-main{font-size:1.02rem!important}.logo-sub{font-size:.58rem!important}.header-inner{gap:8px!important}
}
@media (min-width:1200px){.nav-link{font-size:.86rem!important;padding:9px 10px!important}.nav-search input{width:118px!important}.btn-login{font-size:.86rem!important;padding:9px 17px!important}.site-logo{max-width:215px!important}}
@media (min-width:1400px){.nav-link{font-size:.9rem!important;padding:10px 12px!important}.nav-search input{width:150px!important}.site-logo{max-width:245px!important}}
@media (max-width:992px){
  .mobile-header-login{display:inline-flex;margin-left:auto}.main-nav{flex:0 0 auto!important}.main-nav>.nav-auth{display:none!important}.site-header{z-index:1205}.header-inner{display:flex;align-items:center}.nav-toggle{margin-left:8px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:14px;width:48px;height:44px;justify-content:center;align-items:center;box-shadow:0 12px 30px rgba(26,82,118,.28)}.nav-toggle span{background:#fff!important;width:22px;height:2px;border-radius:99px}.main-nav.open:before{content:"";position:fixed;inset:0;background:rgba(4,16,28,.58);backdrop-filter:blur(8px);z-index:1198}.main-nav.open .nav-menu{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96))!important;border-left:1px solid rgba(255,255,255,.7);box-shadow:-28px 0 70px rgba(0,0,0,.30)!important;padding-top:94px!important}.main-nav.open .nav-menu:before{content:"GNMA Menu";position:absolute;top:22px;left:18px;right:18px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-weight:900;letter-spacing:.3px;box-shadow:0 14px 35px rgba(26,82,118,.25)}.nav-link{font-size:1rem!important;font-weight:800!important;border-radius:14px!important;padding:14px 14px!important;background:rgba(26,82,118,.05);margin-bottom:6px}.nav-link:hover,.nav-item.active .nav-link{background:linear-gradient(135deg,var(--primary),var(--primary-light))!important;color:#fff!important}.dropdown,.dropdown-sub{border-radius:16px!important;background:rgba(26,82,118,.055)!important;border:1px solid rgba(26,82,118,.12)!important}.dropdown li a{font-size:.92rem!important;border-radius:12px}.dept-mega{grid-template-columns:1fr!important}.main-nav.open .nav-search{display:block!important;position:fixed;right:18px;bottom:18px;width:min(92vw,324px);z-index:1201;padding:0!important}.main-nav.open .nav-search form{box-shadow:0 18px 40px rgba(0,0,0,.18);background:#fff}.btn-login{justify-content:center;width:100%}
}
@media (max-width:768px){
  .top-bar{display:none}.site-header{top:0!important}.site-logo{flex:1;min-width:0}.mobile-header-login{font-size:.8rem;padding:8px 11px}.logo-text{max-width:170px}.logo-main{font-size:1rem!important}.logo-sub{font-size:.55rem!important}.page-hero h1{font-size:clamp(1.45rem,7vw,2.1rem)!important}.section,.section-sm{padding-left:0!important;padding-right:0!important}.container{max-width:100%!important;width:100%!important;box-sizing:border-box}img,video,iframe{max-width:100%;height:auto}.card{width:100%;box-sizing:border-box}form[style*="display:flex"]{flex-wrap:wrap}form[style*="display:flex"] .form-control{min-width:0}.btn,.btn-admin,.btn-outline,.btn-primary{max-width:100%;white-space:normal}.hero-slider .slide-bg{filter:saturate(1.15) contrast(1.12) brightness(.88)!important}.slide-overlay{background:linear-gradient(180deg,rgba(4,18,30,.78),rgba(4,18,30,.48))!important}.slide-content h1,.slide-content h2{color:#fff!important;text-shadow:0 4px 22px rgba(0,0,0,.92)!important}.slide-content p{color:#fff!important;text-shadow:0 3px 18px rgba(0,0,0,.92)!important;font-weight:700!important}.chatbot-widget{right:10px!important;bottom:12px!important}.back-to-top{right:14px!important;bottom:76px!important;z-index:640!important}
}
@media (max-width:560px){
  .mobile-header-login{position:absolute;right:66px;top:50%;transform:translateY(-50%)}.header-inner{position:relative;padding-right:0}.site-logo{padding-right:138px}.logo-text{max-width:130px}.logo-main{font-size:.9rem!important}.logo-sub{font-size:.48rem!important}.main-nav.open .nav-menu{width:94vw!important;padding-left:14px!important;padding-right:14px!important}.nav-link{font-size:.96rem!important}.hero-slider{height:420px!important}.slide-content{padding-left:14px!important;padding-right:14px!important}.slide-btns{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}body{overflow-x:hidden!important}
}
@media (max-width:992px){
  .services-grid,.departments-grid,.documents-grid,.downloads-grid,.news-grid,.gallery-grid,.stats-grid,.ql-grid,.footer-grid,.mce-grid{grid-template-columns:1fr!important}.service-card,.department-card,.document-card,.news-card,.gallery-card{max-width:100%!important}main .container>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}main div[style*="grid-template-columns:repeat"]{grid-template-columns:1fr!important}main div[style*="grid-template-columns: repeat"]{grid-template-columns:1fr!important}main div[style*="grid-template-columns:1fr 300px"],main div[style*="grid-template-columns: 1fr 300px"],main div[style*="grid-template-columns:320px 1fr"],main div[style*="grid-template-columns: 320px 1fr"],main div[style*="grid-template-columns:1fr 340px"],main div[style*="grid-template-columns: 1fr 340px"],main div[style*="grid-template-columns:2fr 1fr"],main div[style*="grid-template-columns: 2fr 1fr"]{grid-template-columns:1fr!important}main [style*="width:320px"],main [style*="width: 320px"],main [style*="width:300px"],main [style*="width: 300px"]{width:100%!important}main [style*="height:420px"],main [style*="height:360px"],main [style*="height:300px"]{height:auto!important;min-height:220px}main [style*="padding:40px"]{padding:22px!important}main [style*="padding:32px"]{padding:20px!important}main [style*="gap:50px"],main [style*="gap:40px"]{gap:24px!important}.post-content img{height:auto!important}.post-content table{display:block;overflow-x:auto}.pagination{flex-wrap:wrap}.admin-table,.admin-card table{min-width:720px}.admin-card{overflow-x:auto}
}


/* ==========================================================
   GNMA V6 live-content + full responsive polish
   ========================================================== */
img{max-width:100%;height:auto} iframe,embed,object{max-width:100%}
.page-hero{background-size:cover;background-position:center}
.post-content img,.card img{max-width:100%;height:auto}
@media (max-width:1200px){
  .container{max-width:100%;padding-left:18px;padding-right:18px}
  .nav-menu{gap:8px}.nav-menu a{font-size:.82rem;padding:8px 6px}.btn,.nav-cta,.login-btn{white-space:nowrap}
}
@media (max-width:991px){
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:1fr 300px"],[style*="grid-template-columns: 1fr 300px"]{grid-template-columns:1fr!important}
  .hero-slider,.slide{min-height:480px}.slide h1{text-shadow:0 4px 18px rgba(0,0,0,.65)}
}
@media (max-width:768px){
  body{overflow-x:hidden}.top-bar{font-size:.78rem}.header,.main-header{max-width:100vw;overflow:visible}
  .mobile-menu,.hamburger,.nav-toggle{display:flex!important}
  .nav-menu{position:fixed!important;inset:0 0 0 auto!important;width:min(88vw,380px)!important;height:100vh!important;overflow-y:auto!important;background:linear-gradient(160deg,#063b2d 0%,#0b5f45 45%,#d4af37 140%)!important;box-shadow:-22px 0 60px rgba(0,0,0,.35)!important;padding:88px 22px 28px!important;z-index:99999!important;transform:translateX(110%);transition:transform .35s ease!important;border-left:1px solid rgba(255,255,255,.16)}
  .nav-menu.active,.nav-menu.open,.nav-menu.show{transform:translateX(0)!important}
  .nav-menu li,.nav-menu a{width:100%;display:block!important;color:#fff!important}.nav-menu a{font-size:1rem!important;padding:14px 12px!important;border-radius:14px;background:rgba(255,255,255,.08);margin-bottom:8px}.nav-menu a:hover{background:rgba(212,175,55,.24)!important}
  .dropdown-menu,.submenu{position:static!important;width:100%!important;display:none;background:rgba(0,0,0,.16)!important;border:0!important;box-shadow:none!important;margin:6px 0 12px!important;padding:8px!important;max-height:none!important}.dropdown.open .dropdown-menu,.has-dropdown.open .submenu,.dropdown:hover .dropdown-menu{display:block!important}
  .login-btn,.signin-btn,.nav-login,.bigh-signin-btn,.btn-login{display:inline-flex!important;visibility:visible!important;opacity:1!important}
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],[style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],[style*="grid-template-columns:repeat(2"],[style*="grid-template-columns: repeat(2"]{grid-template-columns:1fr!important}
  [style*="display:grid"]{max-width:100%!important}
  .section{padding:46px 0}.page-hero{padding:72px 0 46px!important}.page-hero h1{font-size:1.75rem!important;line-height:1.2}
  .card{max-width:100%;overflow:hidden}.table-responsive,table{display:block;max-width:100%;overflow-x:auto;white-space:nowrap}
  .ai-chatbot,.chatbot-widget,.chatbot-toggle{right:12px!important;bottom:84px!important;max-width:calc(100vw - 24px)!important}.scroll-top,.back-to-top,#scrollTop{right:14px!important;bottom:22px!important;z-index:9998!important}
  .accessibility-panel .font-size button:first-child,.accessibility-panel button[data-size="small"]{font-weight:800;transform:scale(.98)}
}
@media (max-width:480px){.container{padding-left:14px;padding-right:14px}.slide h1{font-size:1.7rem!important}.slide p{font-size:.95rem!important}.card{border-radius:14px!important}[style*="padding:40px"]{padding:22px!important}[style*="height:420px"]{height:240px!important}}


/* GNMA V7: official uploaded transparent logo everywhere */
.site-logo{min-width:178px;max-width:210px;overflow:visible!important;background:transparent!important}
.logo-img, .footer-logo img, .login-logo img, .logo img, .sidebar-logo img, .admin-topbar img, .chatbot-header img, .chat-logo{
  object-fit:contain!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.login-logo img, .logo img{width:190px!important;height:auto!important;max-height:70px!important;margin-bottom:12px!important;}
.sidebar-logo img{width:120px!important;height:auto!important;max-height:52px!important;}
.footer-logo img{width:190px!important;height:auto!important;max-height:70px!important;}
.hero-slider .slide-bg{filter:saturate(1.12) contrast(1.1) brightness(.95)!important;image-rendering:auto!important;}
.slide-overlay{background:linear-gradient(90deg,rgba(0,0,0,.70),rgba(0,0,0,.34),rgba(0,0,0,.18))!important;}
.slide-content h1,.slide-content h2{color:#fff!important;text-shadow:0 5px 24px rgba(0,0,0,.92)!important;font-weight:800!important;}
.slide-content p{color:#fff!important;text-shadow:0 3px 18px rgba(0,0,0,.94)!important;font-weight:700!important;}
@media (max-width:991px){.site-logo{min-width:150px;max-width:170px}.logo-img{width:158px!important;height:52px!important}.logo-text{display:none!important}}
@media (max-width:480px){.site-logo{min-width:132px;max-width:148px}.logo-img{width:140px!important;height:46px!important}.mobile-header-login{right:60px!important}.hero-slider .slide-bg{object-fit:cover!important}}


/* V8 mobile menu close behavior */
.mobile-menu-close{display:none;position:fixed;top:18px;right:18px;width:48px;height:48px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-size:1.2rem;align-items:center;justify-content:center;box-shadow:0 16px 38px rgba(0,0,0,.28);cursor:pointer;z-index:1215}
@media (max-width:992px){
  .main-nav.open ~ .nav-toggle,
  .nav-toggle.active{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .main-nav.open .mobile-menu-close{display:flex!important}
  .main-nav.open{z-index:1210}
  .main-nav.open .nav-menu{z-index:1208!important;padding-top:96px!important}
}

/* ==========================================================
   GNMA V9: restore proper logo size + premium mobile menu
   ========================================================== */
.site-logo,
.site-logo:visited{
  display:flex!important;
  align-items:center!important;
  min-width:230px!important;
  max-width:300px!important;
  width:240px!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
}
.logo-img{
  width:230px!important;
  height:auto!important;
  max-height:84px!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.header-inner{overflow:visible!important;}

@media (min-width:993px){
  .site-logo{width:230px!important;min-width:220px!important;max-width:250px!important;}
  .logo-img{width:230px!important;max-height:80px!important;}
  .nav-link{font-size:.82rem!important;padding:8px 8px!important;}
  .main-nav{gap:7px!important;}
  .nav-menu{gap:0!important;}
  .nav-search input{width:108px!important;}
  .btn-login{font-size:.82rem!important;padding:8px 15px!important;}
}
@media (min-width:1300px){
  .site-logo{width:250px!important;min-width:240px!important;max-width:270px!important;}
  .logo-img{width:250px!important;max-height:86px!important;}
  .nav-link{font-size:.86rem!important;padding:9px 10px!important;}
  .nav-search input{width:130px!important;}
}

@media (max-width:992px){
  .site-header{z-index:1300!important;}
  .header-inner{
    height:72px!important;
    display:grid!important;
    grid-template-columns:minmax(150px,1fr) auto auto!important;
    align-items:center!important;
    gap:8px!important;
    position:relative!important;
  }
  .site-logo{
    width:178px!important;
    min-width:0!important;
    max-width:178px!important;
    flex:0 1 auto!important;
    padding:0!important;
    grid-column:1!important;
  }
  .logo-img{width:178px!important;height:auto!important;max-height:62px!important;}
  .mobile-header-login{
    display:inline-flex!important;
    position:static!important;
    transform:none!important;
    grid-column:2!important;
    margin:0!important;
    z-index:1302!important;
    padding:9px 12px!important;
    font-size:.82rem!important;
    white-space:nowrap!important;
  }
  .nav-toggle{
    display:flex!important;
    grid-column:3!important;
    position:static!important;
    margin:0!important;
    width:46px!important;
    height:42px!important;
    z-index:1303!important;
    flex:0 0 46px!important;
  }
  .nav-toggle.active{display:none!important;}
  .main-nav{
    position:static!important;
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    height:auto!important;
    z-index:auto!important;
  }
  .main-nav .nav-menu,
  .main-nav .nav-auth,
  .main-nav .nav-search{display:none!important;}
  .main-nav.open{
    position:fixed!important;
    inset:0!important;
    z-index:1400!important;
    display:block!important;
    pointer-events:auto!important;
  }
  .main-nav.open:before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(2,12,21,.72)!important;
    backdrop-filter:blur(10px)!important;
    z-index:1400!important;
  }
  .main-nav.open .mobile-menu-close{
    display:flex!important;
    position:fixed!important;
    top:18px!important;
    right:18px!important;
    z-index:1425!important;
  }
  .main-nav.open .nav-menu{
    display:flex!important;
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    bottom:0!important;
    width:min(92vw,390px)!important;
    height:100vh!important;
    min-height:100vh!important;
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    overflow-y:auto!important;
    padding:94px 18px 120px!important;
    margin:0!important;
    background:linear-gradient(160deg,#ffffff 0%,#f5fbff 52%,#eef7f2 100%)!important;
    border-left:1px solid rgba(26,82,118,.16)!important;
    box-shadow:-28px 0 80px rgba(0,0,0,.36)!important;
    z-index:1410!important;
  }
  .main-nav.open .nav-menu:before{
    content:"GNMA Menu"!important;
    position:absolute!important;
    top:18px!important;
    left:18px!important;
    right:78px!important;
    padding:14px 16px!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,var(--primary),var(--secondary))!important;
    color:#fff!important;
    font-weight:900!important;
    letter-spacing:.3px!important;
  }
  .main-nav.open .nav-item{width:100%!important;display:block!important;}
  .main-nav.open .nav-link{
    width:100%!important;
    display:flex!important;
    justify-content:space-between!important;
    color:var(--text-primary)!important;
    background:rgba(26,82,118,.07)!important;
    border:1px solid rgba(26,82,118,.10)!important;
    padding:14px 14px!important;
    margin:0 0 7px!important;
    border-radius:15px!important;
    font-size:1rem!important;
    font-weight:800!important;
  }
  .main-nav.open .nav-item.active>.nav-link,
  .main-nav.open .nav-link:hover{
    background:linear-gradient(135deg,var(--primary),var(--primary-light))!important;
    color:#fff!important;
  }
  .main-nav.open .dropdown,
  .main-nav.open .dropdown-sub{
    position:static!important;
    display:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    box-shadow:none!important;
    border:1px solid rgba(26,82,118,.10)!important;
    border-radius:16px!important;
    padding:8px!important;
    margin:0 0 10px!important;
    background:rgba(26,82,118,.05)!important;
  }
  .main-nav.open .nav-item.open>.dropdown,
  .main-nav.open .has-dropdown-sub.open>.dropdown-sub{display:block!important;}
  .main-nav.open .dropdown li a,
  .main-nav.open .dropdown-sub li a{
    color:var(--text-primary)!important;
    background:rgba(255,255,255,.68)!important;
    border-radius:12px!important;
    display:flex!important;
    width:100%!important;
    padding:12px 12px!important;
    margin-bottom:5px!important;
    white-space:normal!important;
    font-size:.94rem!important;
  }
  .main-nav.open .dept-mega{grid-template-columns:1fr!important;}
  .main-nav.open .nav-auth{
    display:block!important;
    position:fixed!important;
    right:18px!important;
    bottom:72px!important;
    width:min(calc(92vw - 36px),354px)!important;
    z-index:1415!important;
    padding:0!important;
  }
  .main-nav.open .nav-auth .btn-login{width:100%!important;justify-content:center!important;padding:13px 16px!important;}
  .main-nav.open .nav-search{
    display:block!important;
    position:fixed!important;
    right:18px!important;
    bottom:18px!important;
    width:min(calc(92vw - 36px),354px)!important;
    z-index:1415!important;
    padding:0!important;
  }
  .main-nav.open .nav-search form{width:100%!important;background:#fff!important;box-shadow:0 14px 34px rgba(0,0,0,.16)!important;}
  .main-nav.open .nav-search input{width:100%!important;flex:1!important;}
}
@media (max-width:480px){
  .header-inner{grid-template-columns:minmax(126px,1fr) auto auto!important;gap:6px!important;}
  .site-logo{width:150px!important;max-width:150px!important;}
  .logo-img{width:150px!important;max-height:54px!important;}
  .mobile-header-login{padding:8px 10px!important;font-size:.78rem!important;}
  .nav-toggle{width:43px!important;height:40px!important;flex-basis:43px!important;}
  .main-nav.open .nav-menu{width:94vw!important;padding-left:14px!important;padding-right:14px!important;}
}

/* V11: Slider images must fit inside slide without zoom/cropping */
.hero-slider,
.hero-slider .slide {
  background: #071827 !important;
}
.hero-slider .slide-bg,
.slide-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  scale: 1 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.hero-slider .slide.active .slide-bg,
.slide.active .slide-bg {
  transform: none !important;
}
@media (max-width: 768px) {
  .hero-slider .slide-bg,
  .slide-bg {
    object-fit: contain !important;
    transform: none !important;
  }
}


/* V12: slider images fill slide area cleanly. Small images are enlarged to cover the slide without leaving black/empty borders. */
.hero-slider,
.hero-slider .slide{
  background:#071827!important;
  overflow:hidden!important;
}
.hero-slider .slide-bg,
.slide-bg{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  scale:1!important;
  image-rendering:auto!important;
  filter:saturate(1.08) contrast(1.06) brightness(.92)!important;
}
.hero-slider .slide.active .slide-bg,
.slide.active .slide-bg{transform:none!important;}
.slide-overlay{background:linear-gradient(90deg,rgba(2,12,24,.78) 0%,rgba(2,12,24,.48) 48%,rgba(2,12,24,.25) 100%)!important;}
.slide-content h1,.slide-content h2,.slide-content p{ text-shadow:0 4px 22px rgba(0,0,0,.88)!important; }
@media(max-width:768px){
  .hero-slider .slide-bg,.slide-bg{object-fit:cover!important;object-position:center center!important;}
  .slide-overlay{background:linear-gradient(180deg,rgba(2,12,24,.72),rgba(2,12,24,.38))!important;}
}

/* GNMA V13: Mobile chat icon lower and closer to up-scroll button */
@media (max-width: 768px){
  .chatbot-widget,
  .ai-chatbot,
  .chatbot-toggle{
    right: 12px !important;
    bottom: 70px !important;
    z-index: 9999 !important;
  }
  .back-to-top,
  .scroll-top,
  #scrollTop{
    right: 14px !important;
    bottom: 18px !important;
    z-index: 9998 !important;
  }
  .chatbot-window{
    bottom: 128px !important;
    max-height: calc(100vh - 150px) !important;
  }
}
@media (max-width: 420px){
  .chatbot-widget,
  .ai-chatbot,
  .chatbot-toggle{
    bottom: 66px !important;
  }
  .back-to-top,
  .scroll-top,
  #scrollTop{
    bottom: 16px !important;
  }
}

/* GNMA V14: desktop AI assistant opens safely below sticky header */
@media (min-width: 769px){
  .chatbot-window{
    position: fixed !important;
    top: 108px !important;
    right: 24px !important;
    bottom: auto !important;
    width: 380px !important;
    max-height: calc(100vh - 132px) !important;
    display: flex;
    flex-direction: column;
  }
  .chatbot-window[style*="display:none"]{
    display: none !important;
  }
  .chat-messages{
    height: auto !important;
    max-height: calc(100vh - 330px) !important;
  }
}

/* GNMA V14: keep the new building image clear on index/about without distortion */
.about-image img[src*="service2.png"],
img[src*="service2.png"]{
  object-fit: cover !important;
  object-position: center center !important;
}

/* V18 department head live import + mobile card fixes */
.departments-grid{align-items:stretch}
.department-card img{max-width:100%;height:auto}
@media(max-width:1024px){.departments-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:640px){.departments-grid{grid-template-columns:1fr!important}.department-card{border-radius:20px!important}.department-card [style*="height:190px"]{height:220px!important}}

/* V27 footer + NADMO image fixes */
.footer-logo-only{display:flex;align-items:center;gap:0;}
.footer-logo-only img{width:220px!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.department-card img, .hod-card img{object-fit:contain!important;object-position:center top!important;background:#fff!important;}
@media (max-width: 768px){.footer-logo-only img{width:200px!important;}.departments-grid .department-card img{padding:6px!important;}}


/* V36: final GNMA updates - footer logo-only, NADMO logo, assembly image top crop */
.footer-logo.footer-logo-only{display:flex!important;align-items:center!important;gap:0!important;}
.footer-logo.footer-logo-only > div,.footer-logo.footer-logo-only strong,.footer-logo.footer-logo-only span{display:none!important;}
.footer-logo.footer-logo-only img{width:220px!important;max-width:100%!important;height:auto!important;object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.assembly-photo-wrap{align-items:flex-start!important;overflow:hidden!important;background:#fff!important;}
.assembly-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:top center!important;transform:none!important;background:#fff!important;}
.department-card img[src*="nadmo-logo"], .hod-card img[src*="nadmo-logo"], img[src*="nadmo-logo"]{object-fit:contain!important;object-position:center center!important;background:#fff!important;padding:10px!important;}
@media (max-width:768px){.footer-logo.footer-logo-only img{width:190px!important}.assembly-photo-wrap{height:390px!important}.assembly-photo{object-fit:cover!important;object-position:top center!important;}}


/* V37: NADMO website image layout - official logo in department header, director portrait in head card */
.dept-logo-mark img[src*="nadmo-logo-official"]{object-fit:contain!important;object-position:center!important;background:#fff!important;padding:0!important;border:0!important;box-shadow:none!important;}
.department-card img[src*="nadmo-director-official"], .hod-card img[src*="nadmo-director-official"], img[src*="nadmo-director-official"]{object-fit:contain!important;object-position:center top!important;background:#fff!important;padding:0!important;}
@media(max-width:768px){.dept-logo-mark{width:82px!important;height:82px!important}.department-layout{grid-template-columns:1fr!important}}

/* V41 Departments/Units menu grouping */
.dept-menu-heading{grid-column:1/-1;padding:8px 14px 4px!important;pointer-events:none;}
.dept-menu-heading span{display:block;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);border-bottom:1px solid rgba(26,82,118,.14);padding-bottom:6px;}
@media (max-width: 991px){.departments-grid{grid-template-columns:repeat(2,1fr)!important;}}
@media (max-width: 640px){.departments-grid{grid-template-columns:1fr!important;}.dept-menu-heading{padding:10px 10px 3px!important;}}


/* V44: Ultra premium Facebook live video player on index */
.live-video-section{
  background:
    radial-gradient(circle at 10% 10%, rgba(214, 0, 0, .10), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(212, 175, 55, .16), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #ffffff 48%, #f7f9fc 100%);
  position:relative;
  overflow:hidden;
}
.live-video-section:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(135deg, rgba(10,47,75,.045) 25%, transparent 25%, transparent 50%, rgba(10,47,75,.045) 50%, rgba(10,47,75,.045) 75%, transparent 75%, transparent);
  background-size:18px 18px;
  opacity:.38;
  pointer-events:none;
}
.live-video-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(320px,1.18fr);
  gap:34px;
  align-items:center;
  padding:34px;
  border-radius:34px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,57,90,.10);
  box-shadow:0 28px 80px rgba(10,47,75,.14);
  backdrop-filter:blur(14px);
}
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#c40000,#ff2b2b);
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.78rem;
  box-shadow:0 14px 26px rgba(196,0,0,.25);
}
.live-pill i{font-size:.62rem;animation:gnmaLivePulse 1.2s infinite ease-in-out;}
@keyframes gnmaLivePulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.22)}}
.live-video-copy h2{
  margin:18px 0 12px;
  color:var(--primary);
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.02;
  letter-spacing:-.04em;
}
.live-lead{font-size:1.06rem;line-height:1.8;color:var(--text);max-width:620px;}
.live-lead strong{color:var(--secondary-dark);font-weight:900;}
.live-video-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.live-video-player-wrap{
  border-radius:30px;
  padding:12px;
  background:linear-gradient(135deg,rgba(9,46,75,.98),rgba(3,22,40,.98));
  box-shadow:0 28px 60px rgba(5,31,51,.25), inset 0 0 0 1px rgba(255,255,255,.09);
  position:relative;
}
.live-video-player-wrap:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:32px;
  background:linear-gradient(135deg,rgba(212,175,55,.65),rgba(196,0,0,.38),rgba(15,82,118,.55));
  z-index:-1;
  filter:blur(2px);
}
.live-video-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#fff;
  padding:7px 10px 13px;
  font-size:.82rem;
  font-weight:800;
}
.live-video-topbar span{display:inline-flex;align-items:center;gap:8px;}
.live-video-topbar strong{color:#f8d765;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;}
.live-video-player{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:22px;
  background:#061626;
}
.live-video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#061626;}
@media(max-width:991px){
  .live-video-shell{grid-template-columns:1fr;padding:24px;border-radius:28px;}
  .live-video-copy h2{font-size:clamp(1.85rem,7vw,2.7rem);}
}
@media(max-width:575px){
  .live-video-section{padding-top:48px!important;padding-bottom:48px!important;}
  .live-video-shell{padding:16px;border-radius:24px;gap:22px;}
  .live-video-player-wrap{border-radius:24px;padding:8px;}
  .live-video-player{border-radius:18px;}
  .live-video-actions .btn{width:100%;justify-content:center;}
  .live-video-topbar{font-size:.74rem;padding:6px 8px 10px;}
}

/* V47: PC-only scrollable Departments submenu so all departments/units are accessible */
@media (min-width: 993px) {
  .nav-item.has-dropdown > .dropdown.dept-mega,
  .main-nav .nav-menu > .nav-item.has-dropdown:nth-child(3) > .dropdown {
    max-height: calc(100vh - 155px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--primary) rgba(15, 57, 90, .10) !important;
    padding-right: 10px !important;
    z-index: 3000 !important;
  }
  .nav-item.has-dropdown > .dropdown.dept-mega::-webkit-scrollbar,
  .main-nav .nav-menu > .nav-item.has-dropdown:nth-child(3) > .dropdown::-webkit-scrollbar {
    width: 8px !important;
  }
  .nav-item.has-dropdown > .dropdown.dept-mega::-webkit-scrollbar-track,
  .main-nav .nav-menu > .nav-item.has-dropdown:nth-child(3) > .dropdown::-webkit-scrollbar-track {
    background: rgba(15, 57, 90, .08) !important;
    border-radius: 999px !important;
  }
  .nav-item.has-dropdown > .dropdown.dept-mega::-webkit-scrollbar-thumb,
  .main-nav .nav-menu > .nav-item.has-dropdown:nth-child(3) > .dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary)) !important;
    border-radius: 999px !important;
  }
  .nav-item.has-dropdown > .dropdown.dept-mega li a {
    white-space: nowrap !important;
  }
}