/* ==============================================================================
   MAGADH ARCHERY FOUNDATION - SPORTS MANAGEMENT DESIGN SYSTEM
   Palette: Olympic Gold (#F59E0B), Target Crimson (#E11D48), Obsidian (#0B0F19), Slate (#1E293B)
   ============================================================================== */

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

:root {
  /* Brand Core Colors */
  --maf-primary: #E11D48;
  --maf-primary-dark: #BE123C;
  --maf-primary-light: #FDA4AF;
  --maf-gold: #F59E0B;
  --maf-gold-dark: #D97706;
  --maf-gold-light: #FDE68A;

  /* Surfaces & Backgrounds */
  --maf-bg-body: #F8FAFC;
  --maf-bg-section-light: #FFFFFF;
  --maf-bg-card-light: #FFFFFF;
  --maf-bg-dark: #0B0F19;
  --maf-bg-darker: #070A11;
  --maf-bg-card: #131A2A;
  --maf-bg-card-hover: #1A2338;

  /* Borders */
  --maf-border: #1E293B;
  --maf-border-light: #E2E8F0;
  --maf-border-accent: rgba(225, 29, 72, 0.25);

  /* Centralized Typography Tokens - Light Surfaces (WCAG AAA/AA Compliant) */
  --maf-heading-primary: #0F172A;     /* Slate 900 - 18.5:1 vs #FFF */
  --maf-heading-secondary: #1E293B;   /* Slate 800 - 14.8:1 vs #FFF */
  --maf-text-primary: #1E293B;        /* Slate 800 - 14.8:1 vs #FFF */
  --maf-text-secondary: #334155;      /* Slate 700 - 10.1:1 vs #FFF */
  --maf-text-muted-light: #475569;    /* Slate 600 - 7.0:1 vs #FFF */
  --maf-link-color: #BE123C;          /* Crimson Dark - 6.2:1 vs #FFF */
  --maf-input-text: #0F172A;          /* Slate 900 - 18.5:1 vs #FFF */
  --maf-placeholder-color: #64748B;   /* Slate 500 - 5.3:1 vs #FFF */
  --maf-table-text: #0F172A;          /* Slate 900 */
  --maf-table-header-text: #334155;   /* Slate 700 - 9.6:1 vs #F8F9FA */

  /* Centralized Typography Tokens - Dark Surfaces (WCAG AAA/AA Compliant) */
  --maf-heading-dark: #FFFFFF;        /* 20.1:1 vs #0B0F19 */
  --maf-text-light: #F8FAFC;          /* 19.3:1 vs #0B0F19 */
  --maf-text-muted: #94A3B8;          /* Slate 400 - 6.5:1 vs #0B0F19 */
  --maf-text-muted-dark: #94A3B8;     /* Slate 400 - 6.5:1 vs #0B0F19 */
  --maf-text-white-subtle: #CBD5E1;   /* Slate 300 - 10.4:1 vs #0B0F19 */

  /* Fonts & Geometry */
  --maf-font-heading: 'Outfit', sans-serif;
  --maf-font-body: 'Inter', sans-serif;
  --maf-radius: 12px;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: var(--maf-font-body);
  background-color: #F8FAFC;
  color: #1E293B;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  padding-right: 0 !important;
}

body.modal-open,
.modal-open {
  padding-right: 0 !important;
}

.sticky-top,
.fixed-top,
.public-header {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

h1, h2, h3, h4, h5, h6, .brand-font {
  font-family: var(--maf-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--maf-heading-primary);
}

/* Headings in dark containers */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-obsidian h1, .bg-obsidian h2, .bg-obsidian h3, .bg-obsidian h4, .bg-obsidian h5, .bg-obsidian h6,
.bg-dark-card h1, .bg-dark-card h2, .bg-dark-card h3, .bg-dark-card h4, .bg-dark-card h5, .bg-dark-card h6,
.bg-darker h1, .bg-darker h2, .bg-darker h3, .bg-darker h4, .bg-darker h5, .bg-darker h6,
.text-bg-dark h1, .text-bg-dark h2, .text-bg-dark h3, .text-bg-dark h4, .text-bg-dark h5, .text-bg-dark h6,
.hero-content h1, .hero-content h2, .hero-content h3,
.hero-title {
  color: var(--maf-heading-dark);
}

/* ==========================================
   PUBLIC THEME & BRANDING
   ========================================== */
.bg-obsidian {
  background-color: var(--maf-bg-dark) !important;
}

.bg-darker {
  background-color: var(--maf-bg-darker) !important;
  color: var(--maf-text-light);
}

.bg-dark-card {
  background-color: var(--maf-bg-card) !important;
  border: 1px solid var(--maf-border);
}

/* Contextual Muted & Subtle Text Contrast (WCAG AA Compliant) */
.text-muted,
.form-text,
small.text-muted {
  color: var(--maf-text-muted-light) !important;
}

.bg-obsidian .text-muted,
.bg-dark .text-muted,
.bg-dark-card .text-muted,
.bg-darker .text-muted,
.text-bg-dark .text-muted,
.bg-black .text-muted,
.modal-content.bg-dark .text-muted,
.public-offcanvas .text-muted,
.public-footer .text-muted {
  color: var(--maf-text-muted-dark) !important;
}

.bg-obsidian .text-white-50,
.bg-dark .text-white-50,
.bg-dark-card .text-white-50,
.bg-darker .text-white-50,
.text-bg-dark .text-white-50,
.bg-black .text-white-50,
.modal-content.bg-dark .text-white-50,
.public-offcanvas .text-white-50 {
  color: var(--maf-text-white-subtle) !important;
}

/* Breadcrumb Contrast */
.bg-obsidian .breadcrumb,
.bg-dark .breadcrumb,
.bg-darker .breadcrumb,
.breadcrumb.text-white-50,
.breadcrumb-dark {
  --bs-breadcrumb-divider-color: #94A3B8;
}

.bg-obsidian .breadcrumb .breadcrumb-item a,
.bg-dark .breadcrumb .breadcrumb-item a,
.bg-darker .breadcrumb .breadcrumb-item a,
.breadcrumb.text-white-50 .breadcrumb-item a {
  color: #CBD5E1 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bg-obsidian .breadcrumb .breadcrumb-item a:hover,
.bg-dark .breadcrumb .breadcrumb-item a:hover,
.bg-darker .breadcrumb .breadcrumb-item a:hover,
.breadcrumb.text-white-50 .breadcrumb-item a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

.bg-obsidian .breadcrumb .breadcrumb-item.active,
.bg-dark .breadcrumb .breadcrumb-item.active,
.bg-darker .breadcrumb .breadcrumb-item.active,
.breadcrumb.text-white-50 .breadcrumb-item.active {
  color: #FFFFFF !important;
  font-weight: 600;
}

.bg-obsidian .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.bg-dark .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.bg-darker .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb.text-white-50 .breadcrumb-item + .breadcrumb-item::before {
  color: #94A3B8 !important;
}

/* Table Typography & Contrast */
.table {
  color: var(--maf-table-text);
}

.table th,
.table thead th,
.table-light th,
thead.table-light th,
.table-light.text-muted,
.table-light .text-muted {
  color: var(--maf-table-header-text) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.table-hover tbody tr:hover {
  color: var(--maf-table-text);
}

/* Form Controls & Placeholders */
.form-control,
.form-select {
  color: var(--maf-input-text);
}

::placeholder,
.form-control::placeholder,
.form-select::placeholder {
  color: var(--maf-placeholder-color) !important;
  opacity: 1;
}

.bg-dark .form-control,
.bg-dark .form-select,
.bg-obsidian .form-control,
.bg-obsidian .form-select,
.bg-dark-card .form-control,
.bg-dark-card .form-select {
  color: #F8FAFC;
  background-color: rgba(11, 15, 25, 0.7);
  border-color: #334155;
}

.bg-dark .form-control:focus,
.bg-dark .form-select:focus,
.bg-obsidian .form-control:focus,
.bg-obsidian .form-select:focus {
  color: #FFFFFF;
  border-color: var(--maf-gold);
}

.bg-dark ::placeholder,
.bg-dark .form-control::placeholder,
.bg-obsidian ::placeholder,
.bg-obsidian .form-control::placeholder {
  color: #94A3B8 !important;
  opacity: 1;
}

/* Status Badges & Subtle Indicators */
.badge.bg-warning,
.badge.text-bg-warning {
  color: #0B0F19 !important;
}

.bg-warning-subtle.text-warning,
.bg-warning-subtle .text-warning,
.badge.bg-warning-subtle,
.badge.bg-warning-subtle.text-warning {
  color: #92400E !important;
  background-color: #FEF3C7 !important;
}

.bg-info-subtle.text-info,
.bg-info-subtle .text-info,
.badge.bg-info-subtle,
.badge.bg-info-subtle.text-info {
  color: #0369A1 !important;
  background-color: #E0F2FE !important;
}

.badge.bg-light.text-muted,
.badge.bg-light.text-secondary {
  color: #334155 !important;
  border-color: #CBD5E1 !important;
}

/* Mobile Offcanvas Sub-Menu Links */
.public-offcanvas .nav-link.text-muted {
  color: #CBD5E1 !important;
}

.public-offcanvas .nav-link.text-muted:hover,
.public-offcanvas .nav-link.text-muted:focus {
  color: #FFFFFF !important;
}

.text-gold {
  color: var(--maf-gold) !important;
}

.text-crimson {
  color: var(--maf-primary) !important;
}

.btn-crimson {
  background: linear-gradient(135deg, var(--maf-primary), var(--maf-primary-dark));
  color: #FFFFFF !important;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}

.btn-crimson:hover {
  background: linear-gradient(135deg, #F43F5E, var(--maf-primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
}

.btn-gold {
  background: linear-gradient(135deg, var(--maf-gold), var(--maf-gold-dark));
  color: #0B0F19 !important;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #FBBF24, var(--maf-gold));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.btn-outline-gold {
  border: 2px solid var(--maf-gold);
  color: var(--maf-gold) !important;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-outline-gold:hover {
  background-color: var(--maf-gold);
  color: #0B0F19 !important;
}

/* ==========================================
   PUBLIC NAVBAR & SUB-MENUS
   ========================================== */
.public-header {
  position: sticky;
  top: 0;
  z-index: 1045;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Ensure offcanvas drawer and backdrop render with correct stacking hierarchy */
.public-offcanvas,
.offcanvas-xl.public-offcanvas {
  z-index: 1050 !important;
}

.offcanvas-backdrop {
  z-index: 1040 !important;
}

.header-topbar {
  letter-spacing: 0.3px;
  color: #FFFFFF !important;
}

.header-topbar span,
.header-topbar a {
  color: #FFFFFF !important;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.header-topbar a:hover {
  color: var(--maf-gold, #F59E0B) !important;
  text-decoration: none;
}

.public-navbar {
  background-color: rgba(11, 15, 25, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.public-navbar .nav-link {
  color: #E2E8F0 !important;
  font-weight: 500;
  font-size: 0.94rem;
  padding: 8px 13px !important;
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.public-navbar .nav-link:hover,
.public-navbar .nav-link.active {
  color: var(--maf-gold) !important;
}

.public-navbar .nav-link.dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: middle;
  border-top-color: currentColor;
  transition: transform 0.2s ease;
}

.public-navbar .nav-item.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Navigation Login Button (Right side of Contact) */
@media (min-width: 1200px) {
  .public-navbar .nav-link.btn-login-nav {
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
    border-radius: 50px;
    padding: 6px 16px !important;
    color: var(--maf-gold) !important;
    font-weight: 600;
    transition: all 0.25s ease;
  }

  .public-navbar .nav-link.btn-login-nav:hover {
    background: var(--maf-gold);
    color: #070A11 !important;
    border-color: var(--maf-gold);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
  }

  .public-navbar .nav-link.btn-login-nav:hover i {
    color: #070A11 !important;
  }
}

/* Header Dropdown Sub-Menus */
.header-dropdown-menu {
  background: rgba(15, 23, 42, 0.98) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 12px;
  padding: 8px;
  min-width: 290px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 15px rgba(225, 29, 72, 0.15) !important;
}

@media (max-width: 1199.98px) {
  .public-offcanvas .header-dropdown-menu {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .public-navbar .nav-item.dropdown .header-dropdown-menu {
    display: none;
    margin-top: 0.2rem;
  }

  .public-navbar .nav-item.dropdown:hover > .header-dropdown-menu,
  .public-navbar .nav-item.dropdown > .header-dropdown-menu.show {
    display: block;
    animation: menuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@keyframes menuFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-dropdown-menu .dropdown-item {
  color: #E2E8F0;
  border-radius: 8px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}

.header-dropdown-menu .dropdown-item:hover,
.header-dropdown-menu .dropdown-item.active {
  background: rgba(225, 29, 72, 0.14) !important;
  color: #FFFFFF !important;
  transform: translateX(4px);
}

.dropdown-icon-box {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.header-dropdown-menu .dropdown-item:hover .dropdown-icon-box {
  transform: scale(1.1);
}

.dropdown-title {
  font-size: 0.9rem;
  line-height: 1.2;
}

.dropdown-subtitle {
  font-size: 0.75rem;
  color: #94A3B8 !important;
}

/* ==========================================
   RESPONSIVE CANVAS MENU (TOGGLE-SIDE / RIGHT DRAWER)
   ========================================== */
@media (max-width: 1199.98px) {
  #navbarOffcanvas,
  #navbarOffcanvas.offcanvas,
  #navbarOffcanvas.offcanvas-xl,
  #navbarOffcanvas.offcanvas-end,
  .public-offcanvas {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    width: min(320px, 85vw) !important;
    max-width: 85vw !important;
    box-sizing: border-box !important;
    background: #0B0F19 !important;
    background: linear-gradient(180deg, #0D111A 0%, #070A11 100%) !important;
    backdrop-filter: blur(24px) saturate(180%);
    border-left: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.8) !important;
    z-index: 1050 !important;
    border-radius: 0 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
  }

  /* Closed state: hidden off-screen to the right */
  #navbarOffcanvas:not(.show):not(.showing),
  #navbarOffcanvas.offcanvas:not(.show):not(.showing),
  #navbarOffcanvas.offcanvas-xl:not(.show):not(.showing),
  #navbarOffcanvas.offcanvas-end:not(.show):not(.showing),
  .public-offcanvas:not(.show):not(.showing) {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
  }

  /* Open state: fully visible and positioned at right: 0 */
  #navbarOffcanvas.show,
  #navbarOffcanvas.showing,
  #navbarOffcanvas.offcanvas.show,
  #navbarOffcanvas.offcanvas.showing,
  #navbarOffcanvas.offcanvas-xl.show,
  #navbarOffcanvas.offcanvas-xl.showing,
  #navbarOffcanvas.offcanvas-end.show,
  #navbarOffcanvas.offcanvas-end.showing,
  .public-offcanvas.show,
  .public-offcanvas.showing {
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* When hiding */
  #navbarOffcanvas.hiding,
  #navbarOffcanvas.offcanvas.hiding,
  #navbarOffcanvas.offcanvas-xl.hiding,
  #navbarOffcanvas.offcanvas-end.hiding,
  .public-offcanvas.hiding {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
  }

  /* Offcanvas Header */
  .public-offcanvas .offcanvas-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Navbar Toggler icon transition & accessibility */
  .navbar-toggler-icon-custom {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  }

  .navbar-toggler.is-active .navbar-toggler-icon-custom {
    transform: rotate(90deg);
    color: var(--maf-gold) !important;
  }

  .public-offcanvas .btn-close {
    opacity: 0.85;
    transition: all 0.25s ease;
    cursor: pointer;
    z-index: 1060;
  }

  .public-offcanvas .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg) scale(1.1);
  }

  .public-offcanvas .offcanvas-body {
    overflow-y: auto;
    height: calc(100vh - 75px);
    max-height: calc(100vh - 75px);
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.3) rgba(11, 15, 25, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem !important;
  }

  .public-offcanvas .offcanvas-body::-webkit-scrollbar {
    width: 4px;
  }

  .public-offcanvas .offcanvas-body::-webkit-scrollbar-track {
    background: rgba(11, 15, 25, 0.8);
  }

  .public-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.3);
    border-radius: 4px;
  }

  .public-offcanvas .navbar-nav .nav-link {
    padding: 12px 16px !important;
    border-radius: 8px;
    font-size: 0.96rem;
    font-weight: 600;
    color: #F1F5F9 !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
  }

  .public-offcanvas .navbar-nav .nav-link:hover,
  .public-offcanvas .navbar-nav .nav-link.active {
    background: rgba(225, 29, 72, 0.12);
    color: var(--maf-gold) !important;
    padding-left: 20px !important;
  }

  .public-offcanvas .mobile-sub-accordion {
    border-left: 2px solid rgba(245, 158, 11, 0.35);
    margin-left: 14px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 8px 8px 0;
  }

  .public-offcanvas .mobile-sub-accordion .nav-link {
    font-size: 0.86rem !important;
    padding: 7px 12px !important;
    border-bottom: none !important;
    color: #CBD5E1 !important;
  }

  .public-offcanvas .mobile-sub-accordion .nav-link:hover {
    color: var(--maf-gold) !important;
    background: rgba(255, 255, 255, 0.03);
    padding-left: 16px !important;
  }

  .public-offcanvas [data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
    color: var(--maf-gold);
  }

  .public-offcanvas [data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform 0.25s ease;
  }
}

@media (min-width: 1200px) {
  .public-offcanvas,
  .offcanvas-xl.public-offcanvas,
  .offcanvas-xl.offcanvas-end,
  .offcanvas-xl {
    display: flex !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    flex-grow: 1;
    z-index: auto !important;
    border-radius: 0 !important;
    transition: none !important;
    overflow: visible !important;
  }

  .public-offcanvas .offcanvas-header {
    display: none !important;
  }

  .public-offcanvas .offcanvas-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .public-offcanvas .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    width: auto !important;
  }

  .public-offcanvas .navbar-nav .nav-link {
    padding: 8px 13px !important;
    border-bottom: none !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    display: inline-block;
  }

  .public-offcanvas .navbar-nav .nav-link:hover,
  .public-offcanvas .navbar-nav .nav-link.active {
    background: transparent !important;
    padding-left: 13px !important;
  }
}

/* ==========================================
   HERO SECTION & DYNAMIC SLIDER
   ========================================== */
.hero-slider-container {
  position: relative;
  background-color: var(--maf-bg-dark);
  overflow: hidden;
  min-height: 580px;
}

@media (min-width: 992px) {
  .hero-slider-container {
    min-height: 680px;
  }
}

.hero-slide {
  display: none;
  position: relative;
  min-height: 580px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease-in-out;
  opacity: 0;
}

@media (min-width: 992px) {
  .hero-slide {
    min-height: 680px;
  }
}

.hero-slide.active {
  display: flex;
  align-items: center;
  opacity: 1;
}

/*
 * Hero Overlay:
 * 1. Desktop: Dark on the left (0% to 32%) behind headlines & buttons,
 *    smoothly transitioning to COMPLETELY TRANSPARENT on the right side (75% to 100%)
 *    so the archer/subject in the photo is unobstructed and vibrant.
 * 2. Responsive / Mobile: Overlay color is completely removed (display: none / transparent)
 *    so the image is viewed cleanly.
 */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(7, 10, 17, 0.95) 0%, 
    rgba(11, 15, 25, 0.88) 32%, 
    rgba(11, 15, 25, 0.55) 55%, 
    rgba(11, 15, 25, 0.15) 75%, 
    rgba(11, 15, 25, 0) 88%, 
    transparent 100%
  ) !important;
  z-index: 1;
  pointer-events: none;
}

/* Responsive mode: Remove overlay, hide all text on image, and hide arrow buttons */
@media (max-width: 991.98px) {
  /* Optimize hero slider height for mobile so images look crisp and proportionate */
  .hero-slider-container,
  .hero-slide {
    min-height: 320px;
    height: 48vh;
    max-height: 460px;
  }

  /* Completely remove overlay color so image views clearly */
  .hero-overlay {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Hide all text, headlines, subtitles, badges, descriptions, and action buttons on hero slider */
  .hero-content,
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-desc {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* Hide left and right arrow buttons in responsive mode */
  .hero-nav-btn,
  .hero-prev,
  .hero-next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 576px) {
  .hero-slider-container,
  .hero-slide {
    min-height: 260px;
    height: 40vh;
    max-height: 360px;
  }
}

/* Login Button in Navbar (Desktop & Mobile) */
.btn-login-nav {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 600 !important;
  transition: all 0.25s ease;
}

@media (min-width: 1200px) {
  .btn-login-nav {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.95), rgba(190, 18, 60, 1)) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #FFFFFF !important;
    padding: 7px 18px !important;
    border-radius: 50px !important;
    font-size: 0.88rem !important;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35);
  }

  .btn-login-nav:hover,
  .btn-login-nav.active {
    background: linear-gradient(135deg, var(--maf-crimson), #9F1239) !important;
    border-color: var(--maf-gold) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.45);
    transform: translateY(-1px);
  }
}

@media (max-width: 1199.98px) {
  .public-offcanvas .navbar-nav .btn-login-nav {
    background: rgba(225, 29, 72, 0.15) !important;
    border: 1px solid rgba(225, 29, 72, 0.35) !important;
    color: #FFFFFF !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 0.96rem !important;
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .public-offcanvas .navbar-nav .btn-login-nav:hover {
    background: rgba(225, 29, 72, 0.3) !important;
    border-color: var(--maf-gold) !important;
    color: var(--maf-gold) !important;
    padding-left: 20px !important;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(225, 29, 72, 0.18);
  border: 1px solid rgba(225, 29, 72, 0.4);
  color: #FDA4AF;
  padding: 6px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.hero-subtitle {
  color: var(--maf-gold);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.hero-desc {
  font-size: 1.1rem;
  color: #E2E8F0;
  max-width: 650px;
  line-height: 1.7;
  margin-bottom: 30px;
  opacity: 0.95;
}

/* Slider Controls */
.hero-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(11, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.hero-nav-btn:hover {
  background: var(--maf-primary);
  border-color: var(--maf-primary);
  transform: translateY(-50%) scale(1.1);
}

.hero-prev { left: 24px; }
.hero-next { right: 24px; }

.hero-indicators {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-dot.active {
  width: 32px;
  border-radius: 6px;
  background: var(--maf-gold);
}

/* ==========================================
   OUR ARCHERS / SPORTS PERSONS CARDS
   ========================================== */
.archer-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
}

.archer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.12);
  border-color: var(--maf-primary-light);
}

.archer-photo-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  background: #0B0F19;
  overflow: hidden;
}

.archer-photo-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.archer-card:hover .archer-photo-wrapper img {
  transform: scale(1.06);
}

.archer-badge-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.archer-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.archer-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
}

.archer-discipline {
  font-size: 0.85rem;
  color: var(--maf-primary);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

/* Filter Controls */
.filter-pill-btn {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.25s ease;
  cursor: pointer;
}

.filter-pill-btn:hover {
  border-color: var(--maf-primary);
  color: var(--maf-primary);
}

.filter-pill-btn.active {
  background: var(--maf-primary);
  border-color: var(--maf-primary);
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}

/* ==========================================
   TRAINING PROGRAMS & KNOWLEDGE CARDS
   ========================================== */
.program-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.program-card:hover {
  transform: translateY(-6px);
  border-color: var(--maf-primary);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.program-banner {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.knowledge-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.knowledge-card:hover {
  transform: translateY(-5px);
  border-color: var(--maf-gold-dark);
  box-shadow: 0 14px 28px rgba(245, 158, 11, 0.1);
}

/* ==========================================
   CARDS & COMPONENTS
   ========================================== */
.sports-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--maf-radius);
  transition: all 0.3s ease;
  overflow: hidden;
}

.sports-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  border-color: var(--maf-primary-light);
}

.champion-card {
  background: var(--maf-bg-card);
  border: 1px solid var(--maf-border);
  border-radius: var(--maf-radius);
  color: var(--maf-text-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.champion-card:hover {
  transform: translateY(-6px);
  border-color: var(--maf-gold);
  box-shadow: 0 16px 36px rgba(245, 158, 11, 0.15);
}

.champion-card .medal-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

/* ==========================================
   ADMIN & DASHBOARD LAYOUTS
   ========================================== */
.sidebar-wrapper {
  width: 260px;
  min-height: 100vh;
  background-color: var(--maf-bg-dark);
  border-right: 1px solid var(--maf-border);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.main-content {
  margin-left: 260px;
  min-height: 100vh;
  background-color: #F1F5F9;
  padding-bottom: 60px;
}

@media (max-width: 991.98px) {
  .sidebar-wrapper {
    margin-left: -280px;
    width: 280px;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.6);
  }
  .sidebar-wrapper.show {
    margin-left: 0;
  }
  .main-content {
    margin-left: 0;
  }
}

.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 10, 17, 0.7);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-brand {
  padding: 20px 24px;
  border-bottom: 1px solid var(--maf-border);
}

.sidebar-menu {
  padding: 16px 12px;
}

/* Sidebar Section Headings (Crisp, High Contrast, Accessible) */
.sidebar-heading,
.sidebar-menu .sidebar-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.25px;
  color: #CBD5E1; /* High contrast light slate on dark background */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 6px 14px;
  margin-top: 14px;
  margin-bottom: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
}

.sidebar-heading:first-child,
.sidebar-heading:first-of-type,
.sidebar-menu > .sidebar-heading:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}

.sidebar-heading i {
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
}

/* Heading color variations / accents */
.sidebar-heading.heading-info,
.sidebar-heading.text-info {
  color: #38BDF8 !important; /* Sky 400 vibrant */
}
.sidebar-heading.heading-warning,
.sidebar-heading.text-warning {
  color: #FBBF24 !important; /* Amber 400 vibrant */
}
.sidebar-heading.heading-gold {
  color: #F59E0B !important;
}
.sidebar-heading.heading-success {
  color: #34D399 !important;
}
.sidebar-heading.heading-danger {
  color: #FB7185 !important;
}

/* Safeguard for any legacy text-muted inside dark sidebar */
.sidebar-menu .text-muted {
  color: #CBD5E1 !important;
}

.sidebar-menu .nav-link {
  color: #94A3B8;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.sidebar-menu .nav-link i {
  font-size: 1.15rem;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.sidebar-menu .nav-link:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-menu .nav-link.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--maf-primary), var(--maf-primary-dark));
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}

.stat-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--maf-radius);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

/* ==========================================
   MODERN RESPONSIVE FIXED BOTTOM NAVIGATION
   ========================================== */
.maf-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  z-index: 1045 !important;
  background: #FFFFFF !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.08), 0 -1px 4px rgba(0, 0, 0, 0.03) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 4px 2px max(6px, env(safe-area-inset-bottom, 6px)) 2px !important;
  height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.maf-bottom-nav-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: center;
  text-decoration: none;
  color: #4B5563;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  min-height: 48px;
  padding: 2px 1px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none !important;
  box-shadow: none !important;
}

.maf-bottom-nav-item i {
  font-size: 1.25rem;
  line-height: 1;
  color: #4B5563;
  transition: transform 0.2s ease, color 0.2s ease;
}

.maf-bottom-nav-item span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1.1;
  font-size: clamp(0.55rem, 2.2vw, 0.65rem);
  transition: color 0.2s ease;
}

.maf-bottom-nav-item:hover,
.maf-bottom-nav-item:focus-visible {
  color: #8B0000;
  text-decoration: none;
}

.maf-bottom-nav-item:hover i,
.maf-bottom-nav-item:focus-visible i {
  color: #8B0000;
}

.maf-bottom-nav-item.active {
  color: #8B0000;
  font-weight: 700;
}

.maf-bottom-nav-item.active i {
  color: #8B0000;
  transform: translateY(-2px);
}

.maf-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #8B0000;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(139, 0, 0, 0.35);
}

/* Central Prominent "My Academy" Button */
.maf-center-nav-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  min-height: 48px;
  box-sizing: border-box;
}

.maf-center-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B0000 0%, #5B0000 100%);
  color: #F59E0B;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  box-shadow: 0 4px 14px rgba(139, 0, 0, 0.38), 0 0 0 3.5px #FFFFFF, 0 0 0 4.5px rgba(212, 175, 55, 0.3);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.maf-center-btn i {
  font-size: 1.35rem;
  color: #F59E0B;
}

.maf-center-nav-item:hover .maf-center-btn,
.maf-center-nav-item:active .maf-center-btn {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 18px rgba(139, 0, 0, 0.45), 0 0 0 3.5px #FFFFFF, 0 0 0 5.5px rgba(212, 175, 55, 0.4);
}

.maf-center-label {
  font-size: clamp(0.55rem, 2.2vw, 0.65rem);
  font-weight: 700;
  color: #1F2937;
  margin-top: 2px;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.maf-center-nav-item.active .maf-center-label {
  color: #8B0000;
}

/* Notification Count Badge */
.maf-bottom-nav-item .maf-nav-badge {
  position: absolute;
  top: 0;
  left: calc(50% + 4px);
  right: auto;
  width: auto;
  min-width: 16px;
  max-width: none;
  height: 16px;
  overflow: visible;
  text-overflow: clip;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.45);
  border: 1.5px solid #FFFFFF;
  line-height: 1;
  z-index: 2;
}

/* Profile Avatar in Bottom Nav */
.maf-nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #8B0000;
}

.maf-nav-avatar-placeholder {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B0000 0%, #5B0000 100%);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

/* Mobile Profile Bottom Sheet */
.maf-profile-sheet {
  border-top: 3px solid #D4AF37 !important;
  border-radius: 20px 20px 0 0 !important;
  max-height: 85vh !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18) !important;
  background: #FFFFFF !important;
  z-index: 1055 !important;
}

.maf-profile-sheet:not(.show) {
  display: none !important;
  visibility: hidden !important;
  transform: translateY(100%) !important;
}

.maf-drawer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #D4AF37;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.maf-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #1F2937;
  font-weight: 500;
  font-size: 0.88rem;
  transition: all 0.18s ease;
  margin-bottom: 4px;
}

.maf-drawer-link:hover,
.maf-drawer-link:active {
  background: #F8FAFC;
  color: #8B0000;
  transform: translateX(3px);
}

.maf-drawer-link i {
  font-size: 1.15rem;
  color: #8B0000;
  width: 22px;
  text-align: center;
}

/* Ensure Page Content has bottom padding on mobile/tablet so fixed footer never covers content */
@media (max-width: 991.98px) {
  body,
  main,
  .main-content,
  .player-main-content {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 12px)) !important;
  }
}

/* Hide on Desktop */
@media (min-width: 992px) {
  .maf-bottom-nav,
  .maf-profile-sheet {
    display: none !important;
  }
}

/* ==========================================
   AI ID BADGE
   ========================================== */
.ai-id-badge {
  background: linear-gradient(135deg, #1E293B, #0F172A);
  color: var(--maf-gold);
  border: 1px solid var(--maf-gold-dark);
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ==========================================
   FEE MONTH SELECTOR
   ========================================== */
.fee-month-row {
  transition: background-color 0.2s ease;
}

.fee-month-row:hover {
  background-color: rgba(245, 158, 11, 0.05);
}

.fee-month-row.selected {
  background-color: rgba(225, 29, 72, 0.08);
  border-left: 4px solid var(--maf-primary);
}

/* ==========================================
   PUBLIC FOOTER STYLES & ACCESSIBILITY
   ========================================== */
.public-footer {
  background: linear-gradient(180deg, #0B0F19 0%, #050811 100%);
  color: #CBD5E1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-top-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E11D48 0%, #F59E0B 50%, #E11D48 100%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.footer-logo-glow {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-logo-glow:hover {
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.6) !important;
}

.footer-heading {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--maf-gold);
  border-radius: 2px;
}

.footer-text {
  color: #CBD5E1 !important;
  font-size: 0.88rem;
  line-height: 1.7;
}

.footer-text-light {
  color: #E2E8F0 !important;
  line-height: 1.5;
}

.footer-badge-motto {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  backdrop-filter: blur(8px);
}

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F8FAFC !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.25s ease;
  text-decoration: none;
}

.footer-social-btn:hover {
  background: linear-gradient(135deg, var(--maf-primary), var(--maf-gold));
  color: #FFFFFF !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.4);
}

.footer-nav-list li {
  margin-bottom: 10px;
}

.footer-link {
  color: #CBD5E1 !important;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.footer-chevron {
  font-size: 0.65rem;
  color: rgba(245, 158, 11, 0.7);
  transition: transform 0.2s ease;
}

.footer-link:hover {
  color: #FBBF24 !important;
  transform: translateX(4px);
}

.footer-link:hover .footer-chevron {
  color: #F59E0B;
  transform: translateX(2px);
}

.footer-link-highlight {
  background: rgba(245, 158, 11, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.footer-link-highlight:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: var(--maf-gold);
}

.footer-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-contact-link {
  color: #FDE68A !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-contact-link:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
}

.footer-bottom-bar {
  background: #04060C;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
}

.footer-copyright {
  color: #94A3B8;
}

.footer-sub-link {
  color: #CBD5E1 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-sub-link:hover {
  color: var(--maf-gold) !important;
}

.footer-back-to-top {
  color: #E2E8F0 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.footer-back-to-top:hover {
  color: var(--maf-gold) !important;
  transform: translateY(-2px);
}

/* ==========================================
   FOUNDATION LEADERSHIP & ADMINISTRATION
   ========================================== */
.leadership-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.leadership-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 158, 11, 0.15) !important;
}

.leadership-poster-wrapper {
  overflow: hidden;
  position: relative;
  background: #001233;
}

.leadership-poster-img {
  transition: transform 0.5s ease;
  display: block;
}

.leadership-card:hover .leadership-poster-img {
  transform: scale(1.025);
}

.leadership-expand-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 15, 25, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.leadership-card:hover .leadership-expand-overlay {
  opacity: 1;
}

.tracking-wider {
  letter-spacing: 1.5px;
}

/* ==========================================
   IMMERSIVE HERO LOGIN VIEW (Screenshot Match)
   ========================================== */
.login-hero-body {
  background-color: #0B0F19;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.login-page-wrapper {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: 
    linear-gradient(180deg, rgba(7, 10, 18, 0.72) 0%, rgba(7, 10, 18, 0.3) 38%, rgba(7, 10, 18, 0.65) 75%, rgba(7, 10, 18, 0.9) 100%),
    url('/images/login-hero-bg.jpg') no-repeat center top / cover;
  background-attachment: scroll;
}

.login-header {
  position: relative;
  z-index: 10;
  width: 100%;
}

.login-brand-bar {
  width: 4px;
  height: 42px;
  background: #E11D48;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 1px;
}

.login-brand-title {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.5px;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.login-brand-subtitle {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.5px;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.login-brand-location {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 3px;
  margin-top: 3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.login-menu-btn {
  background: transparent;
  border: none;
  padding: 4px 8px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.login-menu-btn:hover {
  opacity: 0.8;
  color: #FFFFFF;
}

.login-content-container {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: center;
}

.min-vh-hero {
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  width: 100%;
}

/* Hero Motivational Typography */
.login-hero-text-block {
  padding-left: 8px;
  user-select: none;
}

.login-hero-title {
  font-family: var(--maf-font-display, 'Outfit', 'Inter', sans-serif);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.login-hero-title span {
  display: block;
  color: #FFFFFF;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.login-hero-title .text-discipline {
  color: #0084FF !important;
  text-shadow: 0 4px 20px rgba(0, 132, 255, 0.45);
}

.login-hero-tagline {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  margin-bottom: 0;
}

/* Floating White Login Card */
.login-card-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.login-card {
  background: #FFFFFF;
  border-radius: 28px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45);
  padding: 34px 26px 28px 26px;
  position: relative;
  z-index: 10;
}

@media (max-width: 575.98px) {
  .login-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 30px 20px 24px 20px;
  }
}

.login-logo-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.login-title {
  font-size: 1.68rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 0.88rem;
  color: #64748B;
  margin-bottom: 0;
}

/* Login Input Groups */
.login-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-icon {
  position: absolute;
  left: 16px;
  color: #94A3B8;
  font-size: 1.15rem;
  pointer-events: none;
  z-index: 5;
}

.login-prefix {
  position: absolute;
  left: 16px;
  color: #64748B;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 5;
}

.login-input {
  height: 50px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding-left: 48px;
  font-size: 0.95rem;
  color: #0F172A;
  background-color: #FFFFFF;
  transition: all 0.2s ease;
}

.login-input:focus {
  background-color: #FFFFFF;
  color: #0F172A;
  border-color: #0084FF;
  box-shadow: 0 0 0 3.5px rgba(0, 132, 255, 0.15);
}

.login-input::placeholder {
  color: #94A3B8;
  font-size: 0.92rem;
}

.login-toggle-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94A3B8;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 6;
  font-size: 1.1rem;
}

.login-toggle-eye:hover {
  color: #475569;
}

/* Primary Button */
.login-primary-btn {
  height: 50px;
  background: #0084FF;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 132, 255, 0.35);
  transition: all 0.2s ease;
}

.login-primary-btn:hover {
  background: #0070DE;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 132, 255, 0.42);
}

.login-primary-btn:active {
  transform: translateY(0);
}

/* Secondary Button */
.login-secondary-btn {
  height: 50px;
  background: #FFFFFF;
  color: #0F172A;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.login-secondary-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

.login-phone-icon {
  color: #0084FF;
  font-size: 1.25rem;
}

/* Divider */
.login-divider-row {
  display: flex;
  align-items: center;
  margin: 18px 0;
}

.login-divider-line {
  flex-grow: 1;
  height: 1px;
  background-color: #E2E8F0;
}

.login-divider-text {
  padding: 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-link {
  color: #0084FF;
  text-decoration: none;
  font-weight: 600;
}

.login-link:hover {
  color: #0066CC;
  text-decoration: underline;
}