/* 
 * UAD Website Revamp Custom CSS
 * Inspired by UVAS Swat design guidelines
 * Green (#0F4C2A) and Gold (#D4AF37) palette
 */

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

:root {
  --primary-color: #0e5d32;      /* Forest Green */
  --primary-dark: #07331a;       /* Dark Green */
  --primary-light: #e8f5e9;      /* Light Green Tint */
  --secondary-color: #f1b422;    /* Vibrant Gold */
  --secondary-dark: #d4af37;     /* Classic Gold */
  --text-main: #2b2b2b;          /* Dark Gray for readability */
  --text-muted: #5e6d64;         /* Soft grayish green for secondary text */
  --bg-light: #f4f7f5;           /* Clean soft background tint */
  --white: #ffffff;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(14, 93, 50, 0.08);
  --shadow-lg: 0 15px 40px rgba(14, 93, 50, 0.12);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --radius: 8px;
}

/* Base Styles */
html, body {
  /* Legacy content pages (dept_*.php, contact pages, downloads, etc) carry
     raw fixed-pixel-width embeds (Google Maps <iframe width="600">, PDF
     <object>, plain <img> without .img-fluid) inherited from the pre-revamp
     site export. Constrain any of those that slip through so one oversized
     element can't force the whole page into horizontal scroll on mobile. */
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-main) !important;
  background-color: var(--bg-light) !important;
  line-height: 1.6 !important;
}

img, iframe, embed, object, video {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, .font-secondary {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
}

a {
  color: var(--primary-color);
  transition: var(--transition);
}

a:hover {
  color: var(--secondary-color);
  text-decoration: none;
}

/* Header Adjustments */
.fixed-top {
  box-shadow: var(--shadow-sm);
  background: var(--white);
}

/* Top Bar Styling */
.top-bar-custom {
  background-color: var(--primary-dark);
  color: var(--white);
  padding: 5px 0; /* Reduced from 8px */
  font-size: 0.82rem; /* Reduced from 0.85rem */
  font-weight: 500;
}

.top-bar-custom a {
  color: rgba(255, 255, 255, 0.9);
}

.top-bar-custom a:hover {
  color: var(--secondary-color);
}

/* Logo Branding Area */
.logo-area {
  background: var(--white);
  padding: 4px 0 !important; /* Narrower padding for compact 2-liner header */
  border-bottom: 3px solid var(--primary-color); /* Added green border bottom to branding area */
}

.logo-area img {
  max-height: 48px !important; /* Slightly smaller logo for 2-liner */
  width: auto !important;
  margin-right: 10px !important; /* Reduced from 16px to save space */
}

.logo-title {
  font-family: 'Montserrat', sans-serif;
  color: var(--primary-color);
  font-weight: 800;
  font-size: 1.18rem !important; /* Slightly smaller title to prevent layout clipping */
  line-height: 1.2;
  margin-bottom: 1px;
}

.logo-subtitle {
  font-family: 'Inter', sans-serif;
  color: var(--secondary-dark);
  font-weight: 600;
  font-size: 0.74rem !important; /* Slightly smaller subtitle */
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
}

/* Apply Online Button in Top Bar */
.btn-apply-top {
  background-color: var(--secondary-color) !important;
  color: var(--primary-dark) !important;
  padding: 4px 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
}

.btn-apply-top:hover {
  background-color: var(--white) !important;
  color: var(--primary-color) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* Navbar Menu Navigation */
.site-navbar-wrap {
  border-bottom: 3px solid var(--primary-color);
  background: var(--white);
  padding: 2px 0; /* Reduced from 5px */
}

.site-navigation .site-menu > li > a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important; /* Reset to normal to save space */
  font-size: 0.78rem !important; /* Compact font size to prevent wrapping */
  padding: 6px 6px !important; /* Tighter padding to keep menu in one row and leave a safety margin */
  position: relative;
  transition: var(--transition);
}

.site-navigation .site-menu > li > a:hover,
.site-navigation .site-menu > li.active > a {
  color: var(--primary-color) !important;
}

.site-navigation .site-menu > li > a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 6px !important;
  background-color: var(--secondary-color);
  transition: var(--transition);
}

.site-navigation .site-menu > li > a:hover::after,
.site-navigation .site-menu > li.active > a::after {
  width: calc(100% - 14px) !important;
}

/* Dropdown Menu styling */
.site-navigation .site-menu .dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px);
  border-top: 4px solid var(--primary-color) !important;
  border-bottom: 1px solid rgba(14, 93, 50, 0.1) !important;
  border-left: 1px solid rgba(14, 93, 50, 0.1) !important;
  border-right: 1px solid rgba(14, 93, 50, 0.1) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: 0 15px 35px rgba(14, 93, 50, 0.12) !important;
  padding: 10px 0 !important;
  transition: opacity 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), 
              visibility 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  width: 300px !important; /* Standard width for first level */
  transform: translateY(12px); /* Subtle animation drop */
  visibility: hidden;
  opacity: 0;
}

/* Invisible bridge to prevent hover loss on first level dropdown */
.site-navigation .site-menu .dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  right: 0 !important;
  height: 24px !important;
  background: transparent !important;
  display: block !important;
}

/* Show first-level dropdown on hover */
.site-navigation .site-menu .has-children:hover > .dropdown {
  transform: translateY(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.site-navigation .site-menu .dropdown li {
  position: relative !important;
}

.site-navigation .site-menu .dropdown li a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important; /* Elegant size */
  color: var(--text-main) !important;
  padding: 12px 22px !important; /* More breathing room */
  border-bottom: 1px solid rgba(14, 93, 50, 0.05) !important;
  transition: var(--transition) !important;
  height: auto !important; /* Force auto height to override inline styles */
  line-height: 1.45 !important; /* Better readability */
  white-space: normal !important; /* Allow wrapping if needed */
  display: block !important;
  border-left: 4px solid transparent !important; /* Reserve space for hover state */
}

.site-navigation .site-menu .dropdown li:last-child > a {
  border-bottom: none !important;
}

/* Maintain active parent state when hover is on submenu */
.site-navigation .site-menu .dropdown li:hover > a,
.site-navigation .site-menu .dropdown li a:hover {
  background-color: var(--primary-light) !important;
  color: var(--primary-color) !important;
  padding-left: 26px !important;
  border-left: 4px solid var(--secondary-color) !important; /* Prominent gold highlight border */
}

/* Sub-dropdown positioning and animations */
.site-navigation .site-menu .dropdown li.has-children > .dropdown {
  position: absolute !important;
  left: 100% !important; /* Position to the right */
  right: auto !important;
  top: -10px !important; /* Align with parent padding */
  border-top: 4px solid var(--primary-color) !important; /* Keep green top border for sub-dropdowns */
  border-radius: var(--radius) !important;
  box-shadow: 0 15px 35px rgba(14, 93, 50, 0.15) !important;
  transform: translateX(12px) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Invisible bridge to prevent hover loss on sub-dropdowns */
.site-navigation .site-menu .dropdown li.has-children > .dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -20px !important;
  width: 20px !important;
  height: auto !important;
  background: transparent !important;
  display: block !important;
}

/* Hover trigger for sub-dropdowns */
.site-navigation .site-menu .dropdown li.has-children:hover > .dropdown {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* For dropdowns on the right side of the navbar, open submenus to the left */
.site-navigation .site-menu > li:nth-last-child(-n+4) .dropdown li.has-children > .dropdown {
  left: auto !important;
  right: 100% !important;
  transform: translateX(-12px) !important;
}

/* Re-orient invisible bridge for left-opening submenus */
.site-navigation .site-menu > li:nth-last-child(-n+4) .dropdown li.has-children > .dropdown::before {
  left: auto !important;
  right: -20px !important;
  width: 20px !important;
}

.site-navigation .site-menu > li:nth-last-child(-n+4) .dropdown li.has-children:hover > .dropdown {
  transform: translateX(0) !important;
}

/* Width overrides based on specific menu section classes */
.site-navigation .site-menu .dropdown .dropdown {
  width: 220px !important; /* Default fallback width */
}

.about-dropdown .dropdown {
  width: 320px !important; /* offices sub-menu width */
}

.faculties-dropdown .dropdown {
  width: 420px !important; /* department sub-menu width */
}

/* Custom navigation arrow styling with FontAwesome for modern crisp look */
.site-navigation .site-menu .has-children > a {
  position: relative !important;
  padding-right: 17px !important; /* Reduced from 22px to save space */
}

.site-navigation .site-menu .has-children > a::before {
  position: absolute !important;
  content: "\f078" !important; /* FontAwesome Chevron Down */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 0.65rem !important; /* Tiny, elegant chevron */
  top: 50% !important;
  right: 2px !important;
  transform: translateY(-50%) !important;
  transition: transform 0.25s ease !important;
  display: inline-block !important;
  color: var(--primary-dark) !important;
}

/* Top-level menu item arrow color updates */
.site-navigation .site-menu > li > a::before {
  color: var(--primary-dark) !important;
}

.site-navigation .site-menu > li.active > a::before,
.site-navigation .site-menu > li > a:hover::before {
  color: var(--primary-color) !important;
}

.site-navigation .site-menu .has-children:hover > a::before {
  transform: translateY(-50%) rotate(180deg) !important; /* Elegant flip on hover */
}

/* Submenu right arrow in dropdowns */
.site-navigation .site-menu .dropdown > li.has-children > a::before {
  position: absolute !important;
  content: "\f054" !important; /* FontAwesome Chevron Right */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 0.65rem !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: transform 0.25s ease, right 0.25s ease, color 0.25s ease !important;
  display: inline-block !important;
  color: var(--text-main) !important;
}

.site-navigation .site-menu .dropdown > li.has-children:hover > a::before {
  transform: translateY(-50%) translateX(3px) !important; /* Subtle nudge on hover */
  color: var(--primary-color) !important;
}

/* Main content spacing for fixed headers */
.first-section {
  margin-top: 0 !important; /* Disable negative margin pulling content under fixed header */
  padding-top: 115px !important; /* Spacing for compact 2-liner header */
}

@media (min-width: 992px) {
  .logo-area .row {
    flex-wrap: nowrap !important;
    /* justify-content-between (the row's own Bootstrap class) pushes the logo to the
       far left and the nav to the far right edge, maximizing the empty gap between them.
       Pull the nav back in next to the logo instead, with just a modest fixed gap. */
    justify-content: flex-start !important;
    gap: 24px;
  }
  .logo-area .row > div[class^="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .first-section {
    margin-top: 0 !important;
    padding-top: 115px !important;
  }
}

/* Further reduce sizing for medium desktops (between 992px and 1200px) where the container is narrower */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .logo-title {
    font-size: 1.05rem !important;
  }
  .logo-subtitle {
    font-size: 0.68rem !important;
  }
  .site-navigation .site-menu > li > a {
    font-size: 0.74rem !important;
    padding: 6px 5px !important;
  }
  .site-navigation .site-menu .has-children > a {
    padding-right: 14px !important;
  }
  .site-navigation .site-menu > li > a::after {
    left: 5px !important;
  }
  .site-navigation .site-menu > li > a:hover::after,
  .site-navigation .site-menu > li.active > a::after {
    width: calc(100% - 10px) !important;
  }
}

/* The horizontal mega-menu (logo + 8 top-level items) needs roughly 1340px+ of header
   width to fit without clipping -- verified by rendering the header at 992px through
   1340px: "Links" and "Contact" (the last items) render entirely past the right edge
   of the viewport at every width below ~1340px, even though Bootstrap's d-lg-block
   utility treats 992px+ as "desktop". Bootstrap 4 (used here) has no built-in breakpoint
   between lg (992px) and xl (1200px) wide enough to cover this gap, so fall back to the
   already-working off-canvas mobile menu up to a custom 1366px breakpoint instead of
   Bootstrap's stock lg/xl cutoffs. */
@media (max-width: 1365.98px) {
  .site-navigation.d-lg-block {
    display: none !important;
  }
  /* Bootstrap's own d-lg-none already hides this at 992px+ -- re-show it up to
     1366px so the mobile toggle button fills the gap the rule above just opened.
     Scoped via :has() rather than an ancestor combinator because this toggle div
     is a sibling of .site-navbar-wrap in the markup, not a descendant of it. */
  .d-lg-none:has(> .site-menu-toggle) {
    display: block !important;
  }
}

@media (min-width: 1366px) {
  .d-lg-none:has(> .site-menu-toggle) {
    display: none !important;
  }
}

/* Premium Card Layouts */
.media-image, .event-item, .card {
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  border: 1px solid rgba(14, 93, 50, 0.08) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
}

.media-image:hover, .event-item:hover, .card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(14, 93, 50, 0.2) !important;
}

.media-image-body {
  padding: 24px !important;
}

.media-image-body h2 {
  font-size: 1.15rem !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

.media-image-body h2 a {
  color: var(--primary-dark) !important;
}

.media-image-body h2 a:hover {
  color: var(--primary-color) !important;
}

/* Carousel Control Indicators */
.carousel-indicators li {
  background-color: var(--primary-color) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  margin: 0 5px !important;
}

.carousel-indicators .active {
  background-color: var(--secondary-color) !important;
}

/* Department Sidebar Menu (Categories list) */
.categories {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 93, 50, 0.08);
  overflow: hidden;
}

.categories li a {
  display: block;
  padding: 14px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary-dark);
  border-bottom: 1px solid rgba(14, 93, 50, 0.08);
  transition: var(--transition);
}

.categories li:last-child a {
  border-bottom: none;
}

.categories li a:hover,
.categories li.active a {
  background: var(--primary-color);
  color: var(--white) !important;
  padding-left: 28px;
}

/* Buttons */
.btn-secondary, .btn-primary, .theme-btn, .btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-primary, .theme-btn {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--white) !important;
}

.btn-primary:hover, .theme-btn:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(14, 93, 50, 0.25) !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--primary-dark) !important;
}

.btn-secondary:hover {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(241, 180, 34, 0.25) !important;
}

/* Custom Table Design */
.table-custom {
  width: 100%;
  margin-bottom: 1rem;
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 93, 50, 0.08);
}

.table-custom th {
  background-color: var(--primary-color);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 15px;
  border: none;
}

.table-custom td {
  padding: 14px 15px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.9rem;
}

.table-custom tr:last-child td {
  border-bottom: none;
}

.table-custom tr:nth-of-type(even) {
  background-color: rgba(14, 93, 50, 0.02);
}

.table-custom tr:hover {
  background-color: var(--primary-light);
}

/* Sleek and Simple Footer Revamp */
.site-footer {
  background-color: #051a0e !important; /* Extremely dark premium forest obsidian */
  color: #a3b899 !important; /* Soft muted gray-green text for relaxed contrast */
  padding: 45px 0 0 0 !important; /* Reduced padding for cleaner height */
  border-top: 3px solid var(--secondary-color) !important; /* Sleeker brand divider border */
  font-family: 'Inter', sans-serif !important;
  font-size: 0.84rem !important; /* Clean modern size */
}

.site-footer h3, .site-footer h4, .footer-heading {
  color: var(--white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.94rem !important; /* More refined header size */
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important; /* Premium branding feel */
  position: relative !important;
  padding-bottom: 0 !important; /* Removed heavy padding */
}

/* Remove old footer underlines */
.site-footer h3::after, .site-footer h4::after {
  display: none !important; /* Completely hide underlines */
}

.site-footer p {
  line-height: 1.5 !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.site-footer ul {
  padding: 0 !important;
  list-style: none !important;
}

.site-footer ul li {
  margin-bottom: 6px !important; /* Tighter item spacing */
}

.site-footer ul li a {
  color: rgba(255, 255, 255, 0.65) !important; /* Sleek muted link colors */
  font-size: 0.82rem !important; /* Tighter font size */
  display: inline-block !important;
  transition: var(--transition) !important;
}

/* Elegant translation on hover, removing busy chevron icons */
.site-footer ul li a:hover {
  color: var(--secondary-color) !important;
  transform: translateX(6px) !important; /* Premium slide-in effect */
  text-decoration: none !important;
}

/* Muted icons for Contact info to look sleek */
.site-footer .list-unstyled i {
  color: rgba(255, 255, 255, 0.4) !important; /* Clean soft white icons instead of harsh yellow */
  font-size: 0.85rem !important; /* Reduced from 0.95rem */
  width: 18px;
  text-align: center;
  transition: var(--transition) !important;
}

.site-footer ul li a:hover i {
  color: var(--secondary-color) !important;
}

/* Custom Sleek Read More Link */
.footer-read-more {
  color: var(--secondary-color) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important; /* Reduced from 0.82rem */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 6px !important; /* Reduced from 10px */
  transition: var(--transition) !important;
}

.footer-read-more:hover {
  color: var(--white) !important;
  text-decoration: none !important;
}

.footer-read-more i {
  transition: transform 0.2s ease !important;
  font-size: 0.72rem !important;
}

.footer-read-more:hover i {
  transform: translateX(4px) !important;
}

/* Social Media styling */
.site-footer .footer-social a {
  display: inline-block !important;
  width: 30px !important; /* Reduced from 34px */
  height: 30px !important;
  line-height: 28px !important; /* Aligns with 1px border */
  text-align: center !important;
  background: transparent !important; /* Border only for sleek style */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
  font-size: 0.78rem !important; /* Reduced from 0.85rem */
  transition: var(--transition) !important;
}

.site-footer .footer-social a:hover {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
}

/* Muted copyright bar */
.site-footer .copyright-bar {
  background-color: #031109 !important; /* Deeper matching green shade */
  padding: 12px 0 !important; /* Reduced from 16px */
  margin-top: 25px !important; /* Reduced from 45px */
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-size: 0.76rem !important; /* Reduced from 0.8rem */
  letter-spacing: 0.5px !important;
}

.site-footer .copyright-bar p {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ==========================================================================
   Department Tabbed Navigation & Banner Revamp (UVAS Swat Layout Style)
   ========================================================================== */

/* Stack the sidebar and main content vertically on department pages */
.site-section .row:has(.categories) > .col-md-3,
.site-section .row:has(.categories) > .col-md-9 {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  padding: 0 15px !important;
}

/* Transform the category sidebar into a horizontal tab nav */
/* Transform the category sidebar into a horizontal tab nav */
.categories {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  background: var(--white) !important;
  padding: 0 !important;
  margin: 20px 0 35px 0 !important;
  border-radius: var(--radius) !important;
  border: 1px solid rgba(14, 93, 50, 0.1) !important;
  box-shadow: var(--shadow-sm) !important;
  list-style: none !important;
  width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important; /* Hide standard Firefox scrollbar */
  -ms-overflow-style: none !important; /* Hide IE scrollbar */
  border-bottom: none !important;
}

.categories::-webkit-scrollbar {
  display: none !important; /* Hide Chrome/Safari scrollbars */
}

.categories li {
  flex: 1 1 0% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  list-style: none !important;
}

.categories li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: var(--primary-dark) !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(14, 93, 50, 0.08) !important;
  transition: var(--transition) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-style: normal !important;
  background: transparent !important;
  text-decoration: none !important;
}

.categories li:last-child a {
  border-right: none !important;
}

.categories li a:hover {
  background: var(--primary-light) !important;
  color: var(--primary-color) !important;
  padding-left: 20px !important;
  font-style: normal !important;
}

.categories li.active a,
.categories li a.active {
  background: var(--primary-color) !important;
  color: var(--white) !important;
  padding-left: 20px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
  font-style: normal !important;
}

/* Beautiful count badges inside tabs */
.categories li a span {
  position: static !important;
  display: inline-block !important;
  margin-left: 8px !important;
  padding: 2px 8px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  background: rgba(14, 93, 50, 0.08) !important;
  color: var(--primary-color) !important;
  transition: var(--transition) !important;
  vertical-align: middle !important;
}

.categories li.active a span,
.categories li a.active span {
  background: rgba(255, 255, 255, 0.25) !important;
  color: var(--white) !important;
}

.categories li a:hover span {
  background: rgba(14, 93, 50, 0.15) !important;
  color: var(--primary-dark) !important;
}

.categories li.active a:hover span,
.categories li a.active:hover span {
  background: rgba(255, 255, 255, 0.25) !important;
  color: var(--white) !important;
}

@media (max-width: 768px) {
  .categories {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
  }
  .categories li {
    flex: 0 0 auto !important;
  }
  .categories li a {
    padding: 12px 16px !important;
    font-size: 0.8rem !important;
  }
}

/* Hide empty col-md-3 spacers used for sidebar layout on faculty subpages */
.site-section .row > .col-md-3:not(:has(.categories)) {
  display: none !important;
}

/* Transform plain department titles into a premium hero banner */
.site-section:has(.categories) .site-section-heading {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%) !important;
  color: var(--white) !important;
  padding: 50px 30px !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  border-bottom: 5px solid var(--accent) !important;
  margin-bottom: 25px !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Style main content panels */
.site-section:has(.categories) .section-title {
  background: var(--white) !important;
  padding: 35px !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(14, 93, 50, 0.08) !important;
  margin-top: 5px !important;
}

/* Faculty Grid & Premium Cards Layout (UVAS Swat Style) */
.faculty-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 30px !important;
  padding: 20px 0 40px 0 !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .faculty-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Faculty Card Layout matching UVAS Swat */
.faculty-card {
  background: var(--white) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(14, 93, 50, 0.1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  padding-top: 30px !important;
  height: 100% !important;
  min-height: 450px !important;
  cursor: pointer !important;
}

.faculty-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 30px rgba(14, 93, 50, 0.12) !important;
  border-color: rgba(14, 93, 50, 0.25) !important;
}

/* Faculty Avatar & Badge Overlay */
.faculty-avatar-container {
  position: relative !important;
  width: 140px !important;
  height: 140px !important;
  margin-bottom: 20px !important;
}

.faculty-avatar {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3.5px solid var(--primary-color) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.faculty-card:hover .faculty-avatar {
  border-color: var(--secondary-color) !important;
  transform: scale(1.03) !important;
}

.faculty-badge-sticker {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  width: 34px !important;
  height: 34px !important;
  background-image: url('../images/UAD_Logo1.png') !important;
  background-size: 85% 85% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: var(--white) !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--primary-color) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18) !important;
  z-index: 10 !important;
}

/* Faculty Details Content */
.faculty-card-body {
  padding: 0 20px 75px 20px !important; /* spacing for absolute footer */
  flex-grow: 1 !important;
  width: 100% !important;
}

.faculty-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: var(--primary-dark) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.faculty-position {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: #333333 !important;
  margin-bottom: 5px !important;
}

.faculty-qualification {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 12px !important;
}

.faculty-contact-info {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  padding-top: 12px !important;
  margin-top: 10px !important;
}

.faculty-email, .faculty-phone {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--text-main) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  word-break: break-all !important;
}

.faculty-email i, .faculty-phone i {
  color: var(--primary-color) !important;
  margin-right: 6px !important;
  font-size: 0.85rem !important;
}

.faculty-socials {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 15px !important;
}

.faculty-socials a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(14, 93, 50, 0.05) !important;
  color: var(--primary-color) !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
}

.faculty-socials a:hover {
  background: var(--primary-color) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
}

/* Faculty Footer Button (View Profile Details) */
.faculty-card-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 50px !important;
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom-left-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
  transition: all 0.3s ease !important;
}

.faculty-card:hover .faculty-card-footer {
  background-color: var(--secondary-color) !important;
  color: var(--primary-dark) !important;
}

.faculty-card-footer i {
  transition: transform 0.3s ease !important;
}

.faculty-card:hover .faculty-card-footer i {
  transform: translateX(5px) !important;
}

/* Faculty Modal Styling */
.faculty-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.faculty-modal-content {
  background-color: var(--white);
  border-radius: 16px;
  max-width: 650px;
  width: 100%;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(14, 93, 50, 0.15);
  overflow: hidden;
  animation: modalFadeIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

.faculty-modal-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
  color: var(--white);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--secondary-color);
}

.faculty-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
  color: var(--white) !important;
}

.faculty-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.faculty-modal-close:hover {
  color: var(--secondary-color);
  transform: scale(1.1);
}

.faculty-modal-body {
  padding: 30px;
  max-height: 80vh;
  overflow-y: auto;
}

.faculty-modal-profile {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 25px;
}

@media (max-width: 576px) {
  .faculty-modal-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.faculty-modal-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 3.5px solid var(--primary-color);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.faculty-modal-info {
  flex-grow: 1;
}

.faculty-modal-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--primary-dark) !important;
  margin-bottom: 6px;
}

.faculty-modal-pos {
  font-weight: 600;
  font-size: 1.05rem;
  color: #333333;
  margin-bottom: 6px;
}

.faculty-modal-qual {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.faculty-modal-meta {
  font-size: 0.88rem;
  line-height: 1.6;
}

.faculty-modal-meta-item {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.faculty-modal-meta-item i {
  color: var(--primary-color);
  width: 20px;
  margin-right: 8px;
}

.faculty-modal-detail-block {
  background-color: var(--bg-light);
  border-left: 4px solid var(--secondary-color);
  padding: 15px 20px;
  border-radius: 0 8px 8px 0;
}

.faculty-modal-detail-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-dark) !important;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.faculty-modal-detail-content {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-main);
  text-align: justify;
}

/* Style academic program degrees section */
.site-section:has(.categories) .section-title h5 {
  color: var(--primary-color) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  margin-top: 30px !important;
  margin-bottom: 15px !important;
  border-bottom: 2px solid var(--primary-light) !important;
  padding-bottom: 10px !important;
}

.site-section:has(.categories) .section-title ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.site-section:has(.categories) .section-title ul li {
  padding: 12px 18px !important;
  background: var(--bg-light) !important;
  border-left: 4px solid var(--accent) !important;
  margin-bottom: 10px !important;
  border-radius: 0 4px 4px 0 !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
}

.site-section:has(.categories) .section-title ul li:hover {
  background: var(--primary-light) !important;
  transform: translateX(4px) !important;
}

.site-section:has(.categories) .section-title ul li a {
  color: var(--primary-dark) !important;
  text-decoration: none !important;
  display: block !important;
}

.site-section:has(.categories) .section-title ul li a:hover {
  color: var(--primary-color) !important;
}

/* Custom Close Button for Flyer Modal */
.close-custom {
  position: absolute !important;
  right: 15px !important;
  top: 15px !important;
  z-index: 1050 !important;
  font-size: 1.8rem !important;
  color: #333 !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  line-height: 34px !important;
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  outline: none !important;
  padding: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.close-custom:hover {
  background: var(--white) !important;
  color: var(--primary-color) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 16px rgba(14, 93, 50, 0.2) !important;
}

/* ==========================================================================
   UVAS Swat Portal Layout Sample Page Styling
   ========================================================================== */

/* Hero Banner Overlay Buttons */
.hero-cta-group {
  margin-top: -30px;
  position: relative;
  z-index: 10;
}

.hero-cta-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(14, 93, 50, 0.1);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  text-align: center;
  transition: var(--transition);
}

.hero-cta-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary-color);
}

.hero-cta-card i {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.hero-cta-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--primary-dark);
}

.hero-cta-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 15px;
  line-height: 1.4;
}

/* Portals banner cards */
.portal-banner-bar {
  margin: 40px 0;
}

.portal-entry-card {
  border-radius: var(--radius);
  color: var(--white);
  padding: 24px 20px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.portal-entry-card::after {
  content: '';
  position: absolute;
  right: -15px;
  bottom: -15px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 5rem;
  opacity: 0.08;
  transition: var(--transition);
}

.portal-entry-card.news-card::after { content: "\f1ea"; }
.portal-entry-card.eportal-card::after { content: "\f507"; }
.portal-entry-card.admission-card::after { content: "\f19d"; }
.portal-entry-card.fee-card::after { content: "\f0d6"; }

.portal-entry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.portal-entry-card:hover::after {
  transform: scale(1.1) rotate(-10deg);
  opacity: 0.12;
}

.portal-entry-card h3 {
  color: var(--white) !important;
  font-size: 1.15rem !important;
  margin-bottom: 6px;
  font-weight: 700;
}

.portal-entry-card p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 12px;
}

.portal-entry-card .card-action-link {
  color: var(--white);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
}

.portal-entry-card .card-action-link i {
  transition: transform 0.25s ease;
}

.portal-entry-card:hover .card-action-link i {
  transform: translateX(5px);
}

/* Colors matching UVAS template */
.portal-entry-card.bg-green-primary { background: linear-gradient(135deg, #0e5d32, #07331a); }
.portal-entry-card.bg-gold-primary { background: linear-gradient(135deg, #f1b422, #d4af37); color: var(--primary-dark); }
.portal-entry-card.bg-green-dark { background: linear-gradient(135deg, #07331a, #03180c); }
.portal-entry-card.bg-gold-dark { background: linear-gradient(135deg, #d4af37, #b29026); color: var(--primary-dark); }

.portal-entry-card.bg-gold-primary h3, .portal-entry-card.bg-gold-primary .card-action-link,
.portal-entry-card.bg-gold-dark h3, .portal-entry-card.bg-gold-dark .card-action-link {
  color: var(--primary-dark) !important;
}

.portal-entry-card.bg-gold-primary p, .portal-entry-card.bg-gold-dark p {
  color: rgba(7, 51, 26, 0.85);
}

/* Leadership Card Styling */
.leadership-row {
  margin: 40px 0;
}

.leadership-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(14, 93, 50, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  display: flex;
  align-items: flex-start;
  transition: var(--transition);
  height: 100%;
}

.leadership-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(14, 93, 50, 0.15);
}

.leadership-img-container {
  position: relative;
  flex: 0 0 130px;
  margin-right: 25px;
}

.leadership-img {
  width: 130px;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  border: 3px solid var(--primary-color);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: var(--transition);
}

.leadership-card:hover .leadership-img {
  border-color: var(--secondary-color);
}

.leadership-info {
  flex: 1;
}

.leadership-title {
  color: var(--secondary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.leadership-name {
  color: var(--primary-dark);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.leadership-role {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.leadership-message {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.5;
  text-align: justify;
}

/* Digital Services Dashboard */
.services-section {
  padding: 50px 0;
}

.service-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(14, 93, 50, 0.08);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  text-align: center;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary-color);
}

.service-icon-box {
  width: 55px;
  height: 55px;
  line-height: 55px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-size: 1.4rem;
  margin: 0 auto 16px auto;
  transition: var(--transition);
}

.service-card:hover .service-icon-box {
  background-color: var(--secondary-color);
  color: var(--primary-dark);
}

.service-card h3 {
  font-size: 1.05rem;
  color: var(--primary-dark);
  margin-bottom: 8px;
  font-weight: 700;
}

.service-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 15px;
}

.service-card .btn-service-action {
  font-size: 0.76rem !important;
  padding: 6px 16px !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  background: transparent !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: var(--transition) !important;
}

.service-card:hover .btn-service-action {
  background: var(--primary-color) !important;
  color: var(--white) !important;
}

/* Life At University (Facilities) */
.life-section {
  padding: 50px 0;
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14, 93, 50, 0.05);
}

.facility-card {
  padding: 16px;
  border-radius: 6px;
  background-color: var(--bg-light);
  border-left: 4px solid var(--primary-color);
  display: flex;
  align-items: center;
  transition: var(--transition);
  margin-bottom: 20px;
}

.facility-card:hover {
  background-color: var(--primary-light);
  border-left-color: var(--secondary-color);
  transform: translateX(4px);
}

.facility-icon {
  font-size: 1.35rem;
  color: var(--primary-color);
  margin-right: 15px;
  flex: 0 0 24px;
  text-align: center;
  transition: var(--transition);
}

.facility-card:hover .facility-icon {
  color: var(--secondary-dark);
}

.facility-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-dark);
}

/* Faculty Switcher Section */
.switcher-section {
  padding: 50px 0;
}

.switcher-tab-bar {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid rgba(14, 93, 50, 0.1);
  margin-bottom: 30px;
}

.switcher-tab-btn {
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 24px;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
}

.switcher-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--secondary-color);
  transition: var(--transition);
}

.switcher-tab-btn.active {
  color: var(--primary-color);
}

.switcher-tab-btn.active::after {
  width: 100%;
}

.switcher-tab-btn:hover {
  color: var(--primary-color);
}

.switcher-content-panel {
  display: none;
  animation: fadeIn 0.4s ease;
}

.switcher-content-panel.active {
  display: block;
}

.dept-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}

.dept-item-box {
  background: var(--white);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  display: flex;
  align-items: center;
  transition: var(--transition);
}

.dept-item-box:hover {
  border-color: rgba(14, 93, 50, 0.15);
  box-shadow: 0 5px 15px rgba(14, 93, 50, 0.05);
  transform: translateY(-2px);
}

.dept-item-box i {
  color: var(--secondary-dark);
  font-size: 0.8rem;
  margin-right: 10px;
}

.dept-item-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.dept-item-link:hover {
  color: var(--primary-color);
  text-decoration: none;
}

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

@media (max-width: 768px) {
  .leadership-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .leadership-img-container {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .leadership-message {
    text-align: center;
  }
  .switcher-tab-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .switcher-tab-btn::after {
    display: none;
  }
}