/*
Umeed Education System — Enhanced Brand & Theme CSS Variables
Dynamic theming system with content adaptation
*/
:root {
  /* Brand Colors */
  --brand-mehroon: #6A1B1A;
  --brand-yellow:  #FFF9C4;
  --primary-burgundy: #8B2635;
  --primary-gold: #F4D03F;
  --dark-burgundy: #6A1B1A;
  
  /* Base Colors */
  --text-dark:     #1F1F1F;
  --text-light:    #FDFDFD;
  --card-bg-light: #FFFFFF;
  --card-bg-dark:  #2A2A2A;
  --body-bg-light: #FAFAFA;
  --body-bg-dark:  #171717;
  --shadow:        0 8px 24px rgba(0,0,0,.12);
  --shadow-dark:   0 8px 24px rgba(0,0,0,.4);
  
  /* Gradient Variables */
  --gradient-light: linear-gradient(135deg, #F4D03F 0%, #8B2635 100%);
  --gradient-dark: linear-gradient(135deg, #FFF9C4 0%, #F4D03F 100%);
  
  /* Section Background Variables */
  --section-light-bg: #FAFAFA;
  --section-dark-bg: linear-gradient(135deg, var(--primary-burgundy) 0%, var(--dark-burgundy) 100%);
  --section-light-overlay: rgba(255, 255, 255, 0.95);
  --section-dark-overlay: rgba(26, 26, 26, 0.95);
  
  /* Text Enhancement Variables */
  --text-enhanced-light: #4A4A4A;
  --text-enhanced-dark: #E0E0E0;
  --text-muted-light: #6C757D;
  --text-muted-dark: #B0B0B0;
  
  /* Border Variables */
  --border-light: rgba(0, 0, 0, 0.1);
  --border-dark: rgba(255, 255, 255, 0.2);
}

/* Light Theme Variables */
html[data-theme="light"] {
  --bg: var(--body-bg-light);
  --fg: var(--text-dark);
  --card-bg: var(--card-bg-light);
  --accent: var(--brand-mehroon);
  --accent-contrast: var(--text-light);
  --shadow-current: var(--shadow);
  --gradient-current: var(--gradient-light);
  --section-bg-current: var(--section-light-bg);
  --section-overlay-current: var(--section-light-overlay);
  --text-enhanced-current: var(--text-enhanced-light);
  --text-muted-current: var(--text-muted-light);
  --border-current: var(--border-light);
}

/* Dark Theme Variables */
html[data-theme="dark"] {
  --bg: var(--body-bg-dark);
  --fg: var(--text-light);
  --card-bg: var(--card-bg-dark);
  --accent: var(--brand-yellow);
  --accent-contrast: var(--text-dark);
  --shadow-current: var(--shadow-dark);
  --gradient-current: var(--gradient-dark);
  --section-bg-current: var(--section-dark-bg);
  --section-overlay-current: var(--section-dark-overlay);
  --text-enhanced-current: var(--text-enhanced-dark);
  --text-muted-current: var(--text-muted-dark);
  --border-current: var(--border-dark);
}

/* Dynamic Body and Base Elements */
body {
  background: var(--bg);
  color: var(--fg);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Dynamic Card Styling - Enhanced */
.card {
  background: var(--card-bg);
  box-shadow: var(--shadow-current);
  border: 1px solid var(--border-current);
  border-radius: 15px;
  padding: 25px;
  margin: 15px auto;
  max-width: 350px;
  transition: all 0.3s ease;
  transform: translateY(0);
}

.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(244, 208, 63, 0.1);
  border-color: rgba(244, 208, 63, 0.3);
}

[data-theme="dark"] .card {
  background: var(--card-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(255, 249, 196, 0.05);
}

[data-theme="dark"] .card:hover {
  border-color: rgba(255, 249, 196, 0.3);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 249, 196, 0.1);
}

/* Enhanced Card Text Styling */
.card .card-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--fg) !important;
  transition: all 0.3s ease;
}

.card .card-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-enhanced-current) !important;
  transition: all 0.3s ease;
}

.card:hover .card-title {
  color: var(--primary-gold) !important;
  transform: scale(1.02);
}

[data-theme="dark"] .card:hover .card-title {
  color: var(--brand-yellow) !important;
}

/* Dynamic Button Styling */
.btn-accent {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  transition: all 0.3s ease;
}

.btn-accent:hover, .btn-accent:focus {
  background: var(--accent-contrast);
  color: var(--accent);
  outline: 2px solid var(--accent);
}

/* Fix for btn-outline-primary in dark mode */
.btn-outline-primary {
  border-color: var(--brand-mehroon) !important;
  color: var(--brand-mehroon) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .btn-outline-primary {
  border-color: var(--brand-yellow) !important;
  color: var(--brand-yellow) !important;
  background: transparent !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--brand-mehroon) !important;
  border-color: var(--brand-mehroon) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .btn-outline-primary:hover, 
[data-theme="dark"] .btn-outline-primary:focus, 
[data-theme="dark"] .btn-outline-primary:active {
  background-color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: var(--text-dark) !important;
}

/* Fix for btn-outline-secondary in dark mode */
.btn-outline-secondary {
  border-color: #6c757d !important;
  color: #6c757d !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .btn-outline-secondary {
  border-color: #adb5bd !important;
  color: #adb5bd !important;
  background: transparent !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover, 
[data-theme="dark"] .btn-outline-secondary:focus, 
[data-theme="dark"] .btn-outline-secondary:active {
  background-color: #adb5bd !important;
  border-color: #adb5bd !important;
  color: var(--text-dark) !important;
}

/* Enhanced Small Button Visibility */
.btn-sm {
  font-size: 0.9rem !important;
  padding: 0.6rem 1.2rem !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  border-width: 2px !important;
  letter-spacing: 0.5px;
  text-transform: none;
  transition: all 0.3s ease;
  border-radius: 8px !important;
}

/* Enhanced visibility for outline buttons */
.btn-outline-primary {
  border-width: 2px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(139, 38, 53, 0.15);
}

[data-theme="dark"] .btn-outline-primary {
  background: rgba(244, 208, 63, 0.1) !important;
  text-shadow: 0 0 3px rgba(244, 208, 63, 0.3);
  box-shadow: 0 2px 8px rgba(244, 208, 63, 0.2);
}

.btn-outline-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(139, 38, 53, 0.3);
}

[data-theme="dark"] .btn-outline-primary:hover {
  box-shadow: 0 6px 15px rgba(244, 208, 63, 0.4);
}

.btn-outline-secondary {
  border-width: 2px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.15);
}

[data-theme="dark"] .btn-outline-secondary {
  background: rgba(173, 181, 189, 0.1) !important;
  box-shadow: 0 2px 8px rgba(173, 181, 189, 0.2);
}

.btn-outline-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(108, 117, 125, 0.3);
}

[data-theme="dark"] .btn-outline-secondary:hover {
  box-shadow: 0 6px 15px rgba(173, 181, 189, 0.4);
}

/* Enhanced Read More Buttons */
.read-more-btn {
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-height: 38px !important;
  border-radius: 25px !important;
  min-width: 120px !important;
}

.read-more-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Gallery and Action Buttons Enhancement */
.btn-sm.px-4 {
  padding: 0.7rem 1.8rem !important;
  font-size: 0.95rem !important;
  min-width: 140px !important;
  text-align: center;
  font-weight: 700 !important;
}

/* Theme Adaptive Buttons */
.theme-adaptive-btn {
  background: var(--card-bg) !important;
  color: var(--fg) !important;
  border: 2px solid var(--border-current) !important;
  font-weight: 700 !important;
  padding: 0.6rem 1.2rem !important;
  transition: all 0.3s ease;
  min-height: 42px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-adaptive-btn {
  background: var(--card-bg-dark) !important;
  color: var(--text-enhanced-dark) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-adaptive-btn:hover {
  background: var(--primary-burgundy) !important;
  color: white !important;
  border-color: var(--primary-burgundy) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(139, 38, 53, 0.3);
}

/* Mobile Responsive Button Enhancements */
@media (max-width: 768px) {
  .btn-sm {
    font-size: 1rem !important;
    padding: 0.7rem 1.5rem !important;
    min-height: 44px !important;
    min-width: 120px !important;
  }
  
  .read-more-btn {
    font-size: 0.9rem !important;
    padding: 0.6rem 1.2rem !important;
    min-height: 42px !important;
    min-width: 130px !important;
  }
  
  .theme-adaptive-btn {
    font-size: 1rem !important;
    padding: 0.7rem 1.5rem !important;
    min-height: 44px !important;
  }
  
  .btn-outline-primary,
  .btn-outline-secondary {
    font-size: 1rem !important;
    padding: 0.7rem 1.5rem !important;
    min-height: 44px !important;
    border-width: 3px !important;
  }
}

@media (max-width: 576px) {
  .btn-sm {
    font-size: 1.1rem !important;
    padding: 0.8rem 1.8rem !important;
    min-height: 48px !important;
    width: 100% !important;
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }
  
  .read-more-btn {
    font-size: 1rem !important;
    padding: 0.7rem 1.5rem !important;
    min-height: 46px !important;
    width: 100% !important;
    max-width: 180px;
  }
}

/* Focus and Touch Improvements */
.btn-sm:focus,
.btn-outline-primary:focus,
.btn-outline-secondary:focus,
.theme-adaptive-btn:focus,
.read-more-btn:focus {
  outline: 3px solid var(--primary-gold) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(244, 208, 63, 0.25) !important;
}

[data-theme="dark"] .btn-sm:focus,
[data-theme="dark"] .btn-outline-primary:focus,
[data-theme="dark"] .btn-outline-secondary:focus,
[data-theme="dark"] .theme-adaptive-btn:focus,
[data-theme="dark"] .read-more-btn:focus {
  outline-color: var(--brand-yellow) !important;
  box-shadow: 0 0 0 4px rgba(244, 208, 63, 0.3) !important;
}

/* Touch Device Improvements */
@media (hover: none) and (pointer: coarse) {
  .btn-sm,
  .btn-outline-primary,
  .btn-outline-secondary,
  .theme-adaptive-btn,
  .read-more-btn {
    min-height: 48px !important;
    font-size: 1.1rem !important;
    padding: 0.8rem 1.5rem !important;
  }
  
  .btn-sm:active,
  .btn-outline-primary:active,
  .btn-outline-secondary:active,
  .theme-adaptive-btn:active,
  .read-more-btn:active {
    transform: scale(0.98);
    background-color: var(--primary-burgundy) !important;
    color: white !important;
  }
  
  [data-theme="dark"] .btn-sm:active,
  [data-theme="dark"] .btn-outline-primary:active,
  [data-theme="dark"] .btn-outline-secondary:active,
  [data-theme="dark"] .theme-adaptive-btn:active,
  [data-theme="dark"] .read-more-btn:active {
    background-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
  }
}

/* Fix for btn-gradient in dark mode */
.btn-gradient {
  background: linear-gradient(45deg, var(--brand-mehroon), var(--primary-burgundy)) !important;
  border: none !important;
  color: var(--brand-yellow) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

[data-theme="dark"] .btn-gradient {
  background: linear-gradient(45deg, var(--brand-yellow), var(--primary-gold)) !important;
  color: var(--text-dark) !important;
}

.btn-gradient:hover, .btn-gradient:focus, .btn-gradient:active {
  background: linear-gradient(45deg, var(--primary-burgundy), var(--dark-burgundy)) !important;
  color: var(--brand-yellow) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 38, 53, 0.4);
}

[data-theme="dark"] .btn-gradient:hover, 
[data-theme="dark"] .btn-gradient:focus, 
[data-theme="dark"] .btn-gradient:active {
  background: linear-gradient(45deg, var(--primary-gold), var(--brand-yellow)) !important;
  color: var(--text-dark) !important;
  box-shadow: 0 6px 20px rgba(244, 208, 63, 0.4);
}

/* Fix for theme-adaptive-btn */
.theme-adaptive-btn {
  border-color: var(--brand-mehroon) !important;
  color: var(--brand-mehroon) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .theme-adaptive-btn {
  border-color: var(--brand-yellow) !important;
  color: var(--brand-yellow) !important;
  background: transparent !important;
}

.theme-adaptive-btn:hover, .theme-adaptive-btn:focus, .theme-adaptive-btn:active {
  background-color: var(--brand-mehroon) !important;
  border-color: var(--brand-mehroon) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .theme-adaptive-btn:hover, 
[data-theme="dark"] .theme-adaptive-btn:focus, 
[data-theme="dark"] .theme-adaptive-btn:active {
  background-color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: var(--text-dark) !important;
}

/* Fix for read-more-btn */
.read-more-btn {
  border-color: var(--brand-mehroon) !important;
  color: var(--brand-mehroon) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .read-more-btn {
  border-color: var(--brand-yellow) !important;
  color: var(--brand-yellow) !important;
  background: transparent !important;
}

.read-more-btn:hover, .read-more-btn:focus, .read-more-btn:active {
  background-color: var(--brand-mehroon) !important;
  border-color: var(--brand-mehroon) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .read-more-btn:hover, 
[data-theme="dark"] .read-more-btn:focus, 
[data-theme="dark"] .read-more-btn:active {
  background-color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: var(--text-dark) !important;
}

/* Dynamic Navbar Styling */
.navbar {
  background: var(--card-bg) !important;
  box-shadow: var(--shadow-current);
  transition: all 0.3s ease;
}

[data-theme="dark"] .navbar {
  background: var(--card-bg-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enhanced Navbar Theme Styling - Fixed */
.theme-responsive-navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar {
  background: rgba(26, 26, 26, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-responsive-navbar .navbar-brand {
  color: #1F1F1F !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .navbar-brand {
  color: #FDFDFD !important;
}

.theme-responsive-navbar .nav-link {
  color: #1F1F1F !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .nav-link {
  color: #FDFDFD !important;
}

.theme-responsive-navbar .nav-link:hover {
  color: #8B2635 !important;
}

[data-theme="dark"] .theme-responsive-navbar .nav-link:hover {
  color: #F4D03F !important;
}

.theme-responsive-navbar .btn-outline-warning {
  border-color: #8B2635 !important;
  color: #8B2635 !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .btn-outline-warning {
  border-color: #F4D03F !important;
  color: #F4D03F !important;
}

.theme-responsive-navbar .btn-outline-warning:hover {
  background-color: #8B2635 !important;
  border-color: #8B2635 !important;
  color: white !important;
}

[data-theme="dark"] .theme-responsive-navbar .btn-outline-warning:hover {
  background-color: #F4D03F !important;
  border-color: #F4D03F !important;
  color: #1F1F1F !important;
}

.theme-responsive-navbar .btn-outline-light {
  border-color: var(--text-dark) !important;
  color: var(--text-dark) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .btn-outline-light {
  border-color: var(--text-light) !important;
  color: var(--text-light) !important;
  background: transparent !important;
}

.theme-responsive-navbar .btn-outline-light:hover {
  background-color: var(--text-dark) !important;
  border-color: var(--text-dark) !important;
  color: white !important;
}

[data-theme="dark"] .theme-responsive-navbar .btn-outline-light:hover {
  background-color: var(--text-light) !important;
  border-color: var(--text-light) !important;
  color: var(--text-dark) !important;
}

.theme-responsive-navbar .navbar-toggler {
  border-color: #1F1F1F !important;
  transition: border-color 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .navbar-toggler {
  border-color: #FFFFFF !important;
}

.theme-responsive-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  transition: background-image 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .theme-responsive-navbar .navbar-toggler {
  border-color: var(--text-light) !important;
}

.theme-responsive-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  transition: background-image 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Enhanced Theme Toggle Button Styling - Fixed for Light Mode */
.theme-responsive-navbar .btn-outline-light {
  border: 2px solid #1F1F1F !important;
  color: #1F1F1F !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .theme-responsive-navbar .btn-outline-light {
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

.theme-responsive-navbar .btn-outline-light:hover {
  background-color: #1F1F1F !important;
  border-color: #1F1F1F !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .theme-responsive-navbar .btn-outline-light:hover {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #1F1F1F !important;
}

/* Specific Theme Toggle Button Fix - Enhanced */
#themeToggle {
  border: 2px solid #1F1F1F !important;
  color: #1F1F1F !important;
  background: transparent !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
}

[data-theme="dark"] #themeToggle {
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

#themeToggle:hover,
#themeToggle:focus,
#themeToggle:active {
  background-color: #1F1F1F !important;
  border-color: #1F1F1F !important;
  color: #FFFFFF !important;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(31, 31, 31, 0.3);
}

[data-theme="dark"] #themeToggle:hover,
[data-theme="dark"] #themeToggle:focus,
[data-theme="dark"] #themeToggle:active {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #1F1F1F !important;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* Dynamic Navbar Brand */
.navbar-brand {
  color: var(--accent) !important;
  transition: color 0.3s ease;
}

/* Dynamic Navigation Links */
.navbar-nav .nav-link {
  color: var(--fg) !important;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--accent) !important;
}

/* Dynamic Section Backgrounds */
.section-light-bg {
  background: var(--section-bg-current) !important;
  transition: background 0.3s ease;
}

[data-theme="dark"] .section-light-bg {
  background: var(--body-bg-dark) !important;
}

.section-dark-bg {
  background: var(--section-dark-bg) !important;
  transition: background 0.3s ease;
}

[data-theme="dark"] .section-dark-bg {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
}

/* Dynamic Section Background Overlays */
.section-bg-overlay {
  background: var(--section-overlay-current);
  transition: background 0.3s ease;
}

[data-theme="dark"] .section-bg-overlay {
  background: var(--section-dark-overlay);
}

/* Dynamic Text Enhancement */
.text-enhanced {
  color: var(--text-enhanced-current) !important;
  transition: color 0.3s ease;
}

.text-muted {
  color: var(--text-muted-current) !important;
  transition: color 0.3s ease;
}

/* Dynamic Hero Section with Educational Building Background */
.hero-section {
  background: linear-gradient(135deg, rgba(139, 38, 53, 0.85) 0%, rgba(106, 27, 26, 0.85) 100%), 
              url('https://lh3.googleusercontent.com/gps-cs-s/AC9h4noz2clBqahgCJYamACk5GiP-oxQLCIwr0FkGwhXcoqoo5p5iwOMPAQ368R2QGOwucVgMKSfwvvftbxye7qgychpJTzvnovAQNbCUnhC61XcsHV37z0oD5Yl4FdO82WmV4tL52i5Uw=w141-h235-n-k-no-nu') center/cover no-repeat !important;
  min-height: 100vh;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .hero-section {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.85) 0%, rgba(26, 26, 26, 0.85) 100%), 
              url('https://lh3.googleusercontent.com/gps-cs-s/AC9h4noz2clBqahgCJYamACk5GiP-oxQLCIwr0FkGwhXcoqoo5p5iwOMPAQ368R2QGOwucVgMKSfwvvftbxye7qgychpJTzvnovAQNbCUnhC61XcsHV37z0oD5Yl4FdO82WmV4tL52i5Uw=w141-h235-n-k-no-nu') center/cover no-repeat !important;
}

/* Particles Container */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

/* Hero Content Centering */
.hero-section .row {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}

.hero-section .col-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

/* Dynamic Hero Text */
.hero-title {
  color: var(--text-light) !important;
  transition: color 0.3s ease;
}

.hero-subtitle {
  color: var(--text-light) !important;
  opacity: 0.9;
  transition: color 0.3s ease, opacity 0.3s ease;
}

[data-theme="dark"] .hero-subtitle {
  opacity: 0.95;
}

/* Dynamic Hero Stats Cards - Enhanced & Larger */
.hero-stats-card {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 30px 25px;
  margin: 0 auto;
  max-width: 280px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(244, 208, 63, 0.1);
  transform: translateY(0);
}

.hero-stats-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(244, 208, 63, 0.5);
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(244, 208, 63, 0.3);
}

[data-theme="dark"] .hero-stats-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 249, 196, 0.1);
}

[data-theme="dark"] .hero-stats-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 249, 196, 0.4);
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 249, 196, 0.3);
}

.hero-stats-card .text-light {
  color: var(--text-light) !important;
  transition: all 0.3s ease;
}

.hero-stats-card h4 {
  font-size: 2.8rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: #F4D03F !important;
  text-shadow: 
    0 0 15px rgba(244, 208, 63, 0.8),
    2px 2px 4px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

[data-theme="dark"] .hero-stats-card h4 {
  color: #FFF9C4 !important;
  text-shadow: 
    0 0 20px rgba(255, 249, 196, 0.9),
    2px 2px 6px rgba(0, 0, 0, 0.8);
}

.hero-stats-card p {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: #FFFFFF !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  opacity: 0.95;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.hero-stats-card:hover h4 {
  transform: scale(1.05);
  text-shadow: 
    0 0 20px rgba(244, 208, 63, 1),
    2px 2px 6px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .hero-stats-card:hover h4 {
  text-shadow: 
    0 0 25px rgba(255, 249, 196, 1),
    2px 2px 8px rgba(0, 0, 0, 0.9);
}

/* Dynamic 3D School Title */
.main-school-title-3d .school-name-3d {
  color: var(--text-light) !important;
  text-shadow: 
    0 0 10px rgba(244, 208, 63, 0.8),
    0 0 20px rgba(244, 208, 63, 0.6),
    0 0 30px rgba(244, 208, 63, 0.4),
    2px 2px 0px rgba(139, 38, 53, 0.8),
    4px 4px 0px rgba(139, 38, 53, 0.6),
    6px 6px 0px rgba(139, 38, 53, 0.4);
  transition: all 0.3s ease;
}

[data-theme="dark"] .main-school-title-3d .school-name-3d {
  text-shadow: 
    0 0 15px rgba(255, 249, 196, 0.9),
    0 0 25px rgba(255, 249, 196, 0.7),
    0 0 35px rgba(255, 249, 196, 0.5),
    2px 2px 0px rgba(244, 208, 63, 0.8),
    4px 4px 0px rgba(244, 208, 63, 0.6),
    6px 6px 0px rgba(244, 208, 63, 0.4);
}

/* Dynamic School Tagline */
.school-tagline-3d .tagline-text {
  color: var(--text-light) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  transition: all 0.3s ease;
}

[data-theme="dark"] .school-tagline-3d .tagline-text {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
}

/* Dynamic Feature Cards */
.feature-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-current);
  transition: all 0.3s ease;
}

[data-theme="dark"] .feature-card {
  background: var(--card-bg-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card .card-title {
  color: var(--fg) !important;
  transition: color 0.3s ease;
}

.feature-card .card-text {
  color: var(--text-muted-current) !important;
  transition: color 0.3s ease;
}

/* Enhanced Environment Cards */
.environment-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-current);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px !important;
}

[data-theme="dark"] .environment-card {
  background: var(--card-bg-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.environment-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(139, 38, 53, 0.2);
}

[data-theme="dark"] .environment-card:hover {
  box-shadow: 0 12px 40px rgba(244, 208, 63, 0.15);
}

.environment-card .card-img-top {
  border-radius: 20px 20px 0 0 !important;
  transition: transform 0.3s ease;
}

.environment-card:hover .card-img-top {
  transform: scale(1.05);
}

.environment-card .card-title {
  color: var(--primary-burgundy) !important;
  transition: color 0.3s ease;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}

[data-theme="dark"] .environment-card .card-title {
  color: var(--primary-gold) !important;
}

.environment-card .card-title i {
  color: var(--primary-gold) !important;
  font-size: 1.1rem;
}

[data-theme="dark"] .environment-card .card-title i {
  color: var(--brand-yellow) !important;
}

.environment-card .card-text {
  color: var(--text-dark) !important;
  transition: color 0.3s ease;
  line-height: 1.7 !important;
  font-size: 0.95rem;
}

[data-theme="dark"] .environment-card .card-text {
  color: var(--text-enhanced-dark) !important;
}

/* Enhanced Environment Section Styling */
#school-environment {
  background: linear-gradient(135deg, var(--primary-burgundy) 0%, var(--dark-burgundy) 100%) !important;
  transition: background 0.3s ease;
  position: relative;
  overflow: hidden;
}

#school-environment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(244, 208, 63, 0.1) 0%, transparent 50%);
  z-index: 1;
}

[data-theme="dark"] #school-environment {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
}

[data-theme="dark"] #school-environment::before {
  background: radial-gradient(circle at 30% 70%, rgba(244, 208, 63, 0.05) 0%, transparent 50%);
}

#school-environment .container {
  position: relative;
  z-index: 2;
}

#school-environment h2 {
  color: var(--text-light) !important;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
  transition: all 0.3s ease;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

[data-theme="dark"] #school-environment h2 {
  color: var(--text-light) !important;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
}

#school-environment .lead {
  color: var(--text-light) !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  opacity: 0.95;
}

[data-theme="dark"] #school-environment .lead {
  color: var(--text-light) !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  opacity: 0.9;
}

#school-environment .floating-icon-enhanced {
  color: var(--primary-gold) !important;
  transition: all 0.3s ease;
  display: inline-block;
  animation: gentle-float 3s ease-in-out infinite;
}

[data-theme="dark"] #school-environment .floating-icon-enhanced {
  color: var(--brand-yellow) !important;
  text-shadow: 0 0 10px rgba(244, 208, 63, 0.3);
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

#school-environment .badge {
  transition: all 0.3s ease;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 25px !important;
  letter-spacing: 0.5px;
  border: 2px solid transparent;
}

#school-environment .badge[style*="background: var(--primary-gold)"] {
  background: var(--primary-gold) !important;
  color: var(--primary-burgundy) !important;
  border-color: rgba(139, 38, 53, 0.2) !important;
}

[data-theme="dark"] #school-environment .badge[style*="background: var(--primary-gold)"] {
  background: var(--brand-yellow) !important;
  color: var(--text-dark) !important;
  border-color: rgba(244, 208, 63, 0.3) !important;
  box-shadow: 0 0 15px rgba(244, 208, 63, 0.2);
}

#school-environment .badge[style*="background: var(--primary-burgundy)"] {
  background: var(--primary-burgundy) !important;
  color: white !important;
  border-color: rgba(244, 208, 63, 0.3) !important;
}

[data-theme="dark"] #school-environment .badge[style*="background: var(--primary-burgundy)"] {
  background: var(--primary-gold) !important;
  color: var(--text-dark) !important;
  border-color: rgba(244, 208, 63, 0.4) !important;
  box-shadow: 0 0 15px rgba(244, 208, 63, 0.15);
}

/* Dynamic Timeline Cards */
.timeline-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-current);
  transition: all 0.3s ease;
}

[data-theme="dark"] .timeline-card {
  background: var(--card-bg-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-card .card-title {
  color: var(--primary-gold) !important;
  transition: color 0.3s ease;
}

.timeline-card .card-text {
  color: var(--fg) !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] .timeline-card .card-text {
  color: var(--text-enhanced-dark) !important;
}

/* Contact Section Responsive Design */
#contact {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 !important;
}

@media (max-width: 768px) {
  #contact {
    padding: 2rem 0 !important;
  }
  
  #contact .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  #contact .row {
    gap: 2rem !important;
  }
  
  #contact .col-lg-6 {
    margin-bottom: 2rem;
  }
}

#contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 1;
}

[data-theme="dark"] #contact::before {
  background: var(--bg-dark);
}

#contact .container {
  position: relative;
  z-index: 2;
}

#contact h2 {
  color: var(--fg) !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
  margin-bottom: 1rem !important;
}

@media (max-width: 768px) {
  #contact h2 {
    font-size: 2.5rem !important;
  }
}

@media (max-width: 576px) {
  #contact h2 {
    font-size: 2rem !important;
  }
}

[data-theme="dark"] #contact h2 {
  color: var(--text-enhanced-dark) !important;
}

#contact .lead {
  color: var(--text-muted-current) !important;
  font-size: 1.1rem !important;
  margin-bottom: 3rem !important;
}

@media (max-width: 768px) {
  #contact .lead {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
}

[data-theme="dark"] #contact .lead {
  color: var(--text-muted-dark) !important;
}

/* Contact Items Responsive */
.contact-item {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-current);
  transition: all 0.3s ease;
  border-radius: 15px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 768px) {
  .contact-item {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
  }
}

@media (max-width: 576px) {
  .contact-item {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
}

[data-theme="dark"] .contact-item {
  background: var(--card-bg-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
}

.contact-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(139, 38, 53, 0.15);
  border-color: var(--primary-gold);
}

[data-theme="dark"] .contact-item:hover {
  box-shadow: 0 8px 35px rgba(244, 208, 63, 0.1);
  border-color: var(--brand-yellow);
}

.contact-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-burgundy), var(--primary-gold));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .contact-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    border-radius: 12px;
  }
}

@media (max-width: 576px) {
  .contact-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
  }
}

[data-theme="dark"] .contact-icon {
  background: linear-gradient(135deg, var(--primary-gold), var(--brand-yellow));
}

.contact-icon i {
  color: white !important;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .contact-icon i {
    font-size: 1.25rem;
  }
}

[data-theme="dark"] .contact-icon i {
  color: var(--text-dark) !important;
}

.contact-item:hover .contact-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(139, 38, 53, 0.3);
}

[data-theme="dark"] .contact-item:hover .contact-icon {
  box-shadow: 0 4px 20px rgba(244, 208, 63, 0.2);
}

.contact-item:hover .contact-icon i {
  transform: scale(1.1);
}

.contact-details {
  flex: 1;
}

.contact-item h5 {
  color: var(--fg) !important;
  transition: color 0.3s ease;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.1rem !important;
}

@media (max-width: 768px) {
  .contact-item h5 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
}

[data-theme="dark"] .contact-item h5 {
  color: var(--text-enhanced-dark) !important;
}

.contact-item p {
  color: var(--text-muted-current) !important;
  margin-bottom: 0 !important;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .contact-item p {
    font-size: 0.95rem;
  }
}

[data-theme="dark"] .contact-item p {
  color: var(--text-muted-dark) !important;
}

.contact-link {
  color: var(--accent) !important;
  transition: all 0.3s ease;
  font-weight: 600 !important;
  text-decoration: none !important;
}

[data-theme="dark"] .contact-link {
  color: var(--primary-gold) !important;
}

.contact-link:hover {
  color: var(--primary-gold) !important;
  text-shadow: 0 0 8px rgba(244, 208, 63, 0.3);
}

[data-theme="dark"] .contact-link:hover {
  color: var(--brand-yellow) !important;
  text-shadow: 0 0 10px rgba(244, 208, 63, 0.4);
}

/* Contact Form Responsive Enhancements */
.contact-form-wrapper {
  background: var(--card-bg) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-current);
  transition: all 0.3s ease;
  width: 100%;
}

@media (max-width: 768px) {
  .contact-form-wrapper {
    padding: 1.5rem !important;
    border-radius: 15px !important;
    margin-top: 2rem;
  }
}

@media (max-width: 576px) {
  .contact-form-wrapper {
    padding: 1rem !important;
    border-radius: 12px !important;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}

[data-theme="dark"] .contact-form-wrapper {
  background: var(--card-bg-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

.contact-form-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 50px rgba(139, 38, 53, 0.15);
}

@media (max-width: 768px) {
  .contact-form-wrapper:hover {
    transform: none;
  }
}

[data-theme="dark"] .contact-form-wrapper:hover {
  box-shadow: 0 12px 50px rgba(244, 208, 63, 0.1);
}

/* Enhanced Form Elements - Mobile Responsive */
.form-control-enhanced {
  background: var(--card-bg) !important;
  border: 2px solid var(--border-current);
  color: var(--fg) !important;
  transition: all 0.3s ease;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  width: 100%;
}

@media (max-width: 768px) {
  .form-control-enhanced {
    padding: 0.8rem 1rem !important;
    font-size: 1.05rem !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 576px) {
  .form-control-enhanced {
    padding: 0.9rem 1rem !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
  }
}

[data-theme="dark"] .form-control-enhanced {
  background: var(--card-bg-dark) !important;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--text-enhanced-dark) !important;
}

.form-control-enhanced:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.25) !important;
  background: var(--card-bg) !important;
}

[data-theme="dark"] .form-control-enhanced:focus {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.15) !important;
  background: var(--card-bg-dark) !important;
}

.form-control-enhanced::placeholder {
  color: var(--text-muted-current) !important;
  opacity: 0.7;
}

[data-theme="dark"] .form-control-enhanced::placeholder {
  color: var(--text-muted-dark) !important;
  opacity: 0.6;
}

.form-label {
  color: var(--fg) !important;
  transition: color 0.3s ease;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1rem !important;
}

@media (max-width: 768px) {
  .form-label {
    font-size: 1.05rem !important;
    margin-bottom: 0.6rem !important;
  }
}

@media (max-width: 576px) {
  .form-label {
    font-size: 1.1rem !important;
    margin-bottom: 0.7rem !important;
  }
}

[data-theme="dark"] .form-label {
  color: var(--text-enhanced-dark) !important;
}

/* Input Group Responsive */
.input-group {
  width: 100%;
}

@media (max-width: 576px) {
  .input-group {
    flex-direction: column !important;
  }
  
  .input-group-text {
    border-radius: 8px 8px 0 0 !important;
    border-bottom: none !important;
    justify-content: center !important;
    padding: 0.8rem !important;
  }
  
  .form-control-enhanced {
    border-radius: 0 0 8px 8px !important;
    border-top: none !important;
  }
  
  .form-control-enhanced:focus {
    border-top: 2px solid var(--accent) !important;
  }
}

/* Input Group Text Enhancement */
.input-group-text {
  background: var(--card-bg) !important;
  border: 2px solid var(--border-current) !important;
  color: var(--fg) !important;
  transition: all 0.3s ease;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
}

@media (max-width: 768px) {
  .input-group-text {
    padding: 0.8rem 1rem !important;
    border-radius: 10px !important;
  }
}

[data-theme="dark"] .input-group-text {
  background: var(--card-bg-dark) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--text-enhanced-dark) !important;
}

/* Form Submit Button Responsive */
.contact-form .btn[type="submit"] {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-size: 1.1rem !important;
  min-height: 50px !important;
}

@media (max-width: 768px) {
  .contact-form .btn[type="submit"] {
    padding: 14px 35px !important;
    font-size: 1.15rem !important;
    min-height: 52px !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

@media (max-width: 576px) {
  .contact-form .btn[type="submit"] {
    padding: 16px 40px !important;
    font-size: 1.2rem !important;
    min-height: 54px !important;
    border-radius: 30px !important;
  }
}

.contact-form .btn[type="submit"]:hover {
  background: linear-gradient(135deg, #128C7E, #25D366) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
}

@media (max-width: 768px) {
  .contact-form .btn[type="submit"]:hover {
    transform: translateY(-2px);
  }
}

.contact-form .btn[type="submit"] i {
  animation: whatsapp-bounce 1.5s ease-in-out infinite;
  font-size: 1.2rem !important;
}

@media (max-width: 768px) {
  .contact-form .btn[type="submit"] i {
    font-size: 1.3rem !important;
  }
}

/* Form Spacing Mobile */
@media (max-width: 768px) {
  .contact-form .mb-4 {
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .contact-form .mb-4 {
    margin-bottom: 1.8rem !important;
  }
}

/* Form Info Text Mobile */
.contact-form .text-muted {
  color: var(--text-muted-current) !important;
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: center;
}

@media (max-width: 768px) {
  .contact-form .text-muted {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .contact-form .text-muted {
    font-size: 0.95rem;
    line-height: 1.4;
  }
}

[data-theme="dark"] .contact-form .text-muted {
  color: var(--text-muted-dark) !important;
}

/* Section Divider Enhancements */
.section-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-burgundy), var(--primary-gold));
  border-radius: 2px;
  margin: 2rem auto;
  position: relative;
}

[data-theme="dark"] .section-divider {
  background: linear-gradient(90deg, var(--primary-gold), var(--brand-yellow));
}

.section-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--primary-gold);
  border-radius: 50%;
  border: 3px solid var(--bg);
}

[data-theme="dark"] .section-divider::before {
  background: var(--brand-yellow);
  border-color: var(--bg-dark);
}

/* Text Gradient Enhancements */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-burgundy), var(--primary-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}

[data-theme="dark"] .text-gradient {
  background: linear-gradient(135deg, var(--primary-gold), var(--brand-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Enhanced Typography */
.text-enhanced {
  color: var(--text-muted-current) !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] .text-enhanced {
  color: var(--text-muted-dark) !important;
}

/* WhatsApp Integration Styles */
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, #128C7E, #25D366) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
  color: white !important;
}

.btn-whatsapp:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.25) !important;
}

.btn-whatsapp i.fab.fa-whatsapp {
  font-size: 1.1em;
  animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* WhatsApp Contact Item Enhancement */
.contact-item .contact-icon[style*="25D366"] {
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3) !important;
}

.contact-item:hover .contact-icon[style*="25D366"] {
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.4) !important;
}

/* Form Enhancement for WhatsApp Integration */
.contact-form .btn[type="submit"] {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
  border-radius: 50px !important;
  padding: 12px 30px !important;
}

.contact-form .btn[type="submit"]:hover {
  background: linear-gradient(135deg, #128C7E, #25D366) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
}

.contact-form .btn[type="submit"] i {
  animation: whatsapp-bounce 1.5s ease-in-out infinite;
}

@keyframes whatsapp-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  60% { transform: translateY(-2px); }
}

/* Form Info Text Styling */
.contact-form .text-muted {
  color: var(--text-muted-current) !important;
  font-size: 0.85rem;
  opacity: 0.8;
}

[data-theme="dark"] .contact-form .text-muted {
  color: var(--text-muted-dark) !important;
}

/* Contact Number Field Enhancement */
#contact {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

#contact:focus {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.25) !important;
}

[data-theme="dark"] #contact:focus {
  border-color: var(--brand-yellow) !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.15) !important;
}

/* Username Field Enhancement */
#username {
  position: relative;
}

#username:focus {
  border-color: var(--primary-burgundy) !important;
  box-shadow: 0 0 0 0.2rem rgba(139, 38, 53, 0.25) !important;
}

[data-theme="dark"] #username:focus {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.15) !important;
}

/* Input Icon Styling */
.input-group-text i.fa-user-circle {
  color: var(--primary-burgundy) !important;
}

[data-theme="dark"] .input-group-text i.fa-user-circle {
  color: var(--primary-gold) !important;
}

.input-group-text i.fa-phone {
  color: #25D366 !important;
}

/* Form Field Help Text */
.form-help-text {
  font-size: 0.8rem;
  color: var(--text-muted-current);
  margin-top: 0.25rem;
  display: block;
}

[data-theme="dark"] .form-help-text {
  color: var(--text-muted-dark);
}

/* Mobile Responsive Form Enhancements */
@media (max-width: 576px) {
  .contact-form .input-group {
    flex-direction: column;
  }
  
  .contact-form .input-group-text {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: none !important;
  }
  
  .contact-form .form-control-enhanced {
    border-radius: 0 0 12px 12px !important;
    border-top: none !important;
  }
  
  .contact-form .form-control-enhanced:focus {
    border-top: 2px solid var(--accent) !important;
  }
}

/* Enhanced Input Group Text */
.input-group-text {
  background: var(--card-bg) !important;
  border: 2px solid var(--border-current) !important;
  color: var(--fg) !important;
  transition: all 0.3s ease;
  border-radius: 12px !important;
}

[data-theme="dark"] .input-group-text {
  background: var(--card-bg-dark) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--text-enhanced-dark) !important;
}

/* Card 3D Effect Enhancement */
.card-3d-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.card-3d-effect:hover {
  transform: translateY(-8px) rotateX(5deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .card-3d-effect:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Mobile Responsive Enhancements */
@media (max-width: 768px) {
  .environment-card {
    margin-bottom: 2rem;
  }
  
  .contact-item {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem !important;
  }
  
  .contact-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
  }
  
  .contact-icon i {
    font-size: 1.25rem;
  }
  
  #school-environment h2 {
    font-size: 2.5rem !important;
  }
  
  #school-environment .lead {
    font-size: 1rem !important;
  }
  
  .contact-form-wrapper {
    padding: 1.5rem !important;
    margin-top: 2rem;
  }
}

@media (max-width: 576px) {
  .environment-card .card-body {
    padding: 1.25rem !important;
  }
  
  .environment-card .card-title {
    font-size: 1.1rem !important;
  }
  
  .environment-card .card-text {
    font-size: 0.9rem !important;
  }
  
  .contact-item h5 {
    font-size: 1rem !important;
  }
  
  #school-environment h2 {
    font-size: 2rem !important;
  }
}

/* Focus and Accessibility Improvements */
.environment-card:focus-within,
.contact-item:focus-within {
  outline: 3px solid var(--primary-gold);
  outline-offset: 2px;
}

[data-theme="dark"] .environment-card:focus-within,
[data-theme="dark"] .contact-item:focus-within {
  outline-color: var(--brand-yellow);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .environment-card,
  .contact-item {
    border-width: 2px !important;
  }
  
  .environment-card .card-title,
  .contact-item h5 {
    font-weight: 900 !important;
  }
  
  .contact-link {
    text-decoration: underline !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .environment-card,
  .contact-item,
  .floating-icon-enhanced,
  .card-3d-effect {
    transition: none;
    animation: none;
    transform: none !important;
  }
  
  .environment-card:hover,
  .contact-item:hover,
  .card-3d-effect:hover {
    transform: none !important;
  }
}
  border: 2px solid var(--border-current);
  color: var(--accent) !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .input-group-text {
  background: var(--card-bg-dark) !important;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Dynamic Gradient Buttons */
.btn-gradient {
  background: var(--gradient-current) !important;
  border: none;
  color: var(--text-light) !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .btn-gradient {
  color: var(--text-dark) !important;
}

.btn-outline-gradient {
  background: transparent !important;
  border: 2px solid var(--accent);
  color: var(--accent) !important;
  transition: all 0.3s ease;
}

.btn-outline-gradient:hover {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* Dynamic Text Gradient */
.text-gradient {
  background: var(--gradient-current);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

/* Dynamic Footer */
footer {
  background: var(--card-bg-dark) !important;
  color: var(--text-light) !important;
  transition: all 0.3s ease;
}

[data-theme="light"] footer {
  background: var(--primary-burgundy) !important;
}

/* Dynamic Notification Cards */
.notification-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-current);
  color: var(--fg) !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .notification-card {
  background: var(--card-bg-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.notification-card .card-title {
  color: var(--fg) !important;
  transition: color 0.3s ease;
}

.notification-card .card-text {
  color: var(--text-enhanced-current) !important;
  transition: color 0.3s ease;
}

/* Dynamic Priority Badges */
.badge.urgent {
  background: #dc3545 !important;
  color: white !important;
}

.badge.medium {
  background: #fd7e14 !important;
  color: white !important;
}

.badge.low {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* Dynamic Welcome Overlay */
.welcome-overlay {
  background: rgba(0, 0, 0, 0.9) !important;
  transition: background 0.3s ease;
}

[data-theme="dark"] .welcome-overlay {
  background: rgba(0, 0, 0, 0.95) !important;
}

.welcome-title {
  color: var(--primary-gold) !important;
  text-shadow: 0 0 20px rgba(244, 208, 63, 0.8);
  transition: all 0.3s ease;
}

[data-theme="dark"] .welcome-title {
  text-shadow: 0 0 25px rgba(255, 249, 196, 0.9);
}

.welcome-subtitle {
  color: var(--text-light) !important;
  transition: color 0.3s ease;
}

/* Dynamic Section Titles */
.section-title-dark {
  color: var(--text-light) !important;
  transition: color 0.3s ease;
}

.section-title-light {
  color: var(--fg) !important;
  transition: color 0.3s ease;
}

/* Dynamic Text Glow */
.text-glow {
  text-shadow: 0 0 10px rgba(244, 208, 63, 0.6);
  transition: text-shadow 0.3s ease;
}

[data-theme="dark"] .text-glow {
  text-shadow: 0 0 15px rgba(255, 249, 196, 0.8);
}

/* Dynamic Floating Icons */
.floating-icon-enhanced {
  color: var(--primary-gold) !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] .floating-icon-enhanced {
  color: var(--brand-yellow) !important;
}

/* Theme Adaptive Classes for Dynamic Content */
.theme-adaptive-title {
  transition: all 0.3s ease;
}

.theme-adaptive-subtitle {
  transition: all 0.3s ease;
}

.theme-adaptive-accent {
  color: var(--primary-gold) !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] .theme-adaptive-accent {
  color: var(--brand-yellow) !important;
}

.theme-adaptive-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
  transition: all 0.3s ease;
}

.theme-adaptive-btn:hover {
  background: var(--accent-contrast) !important;
  border-color: var(--accent-contrast) !important;
  color: var(--accent) !important;
}

.theme-adaptive-btn-outline {
  border-color: var(--text-light) !important;
  color: var(--text-light) !important;
  transition: all 0.3s ease;
}

.theme-adaptive-btn-outline:hover {
  background: var(--text-light) !important;
  color: var(--accent) !important;
}

/* Enhanced Theme Adaptive Cards */
.theme-adaptive-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-current) !important;
  color: var(--fg) !important;
  transition: all 0.3s ease;
}

.theme-adaptive-card-title {
  color: var(--fg) !important;
  transition: color 0.3s ease;
}

.theme-adaptive-card-text {
  color: var(--text-enhanced-current) !important;
  transition: color 0.3s ease;
}

/* Advanced Theme Responsive Elements */
.theme-responsive-bg {
  background: var(--bg) !important;
  transition: background 0.3s ease;
}

.theme-responsive-surface {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-current) !important;
  transition: all 0.3s ease;
}

.theme-responsive-text {
  color: var(--fg) !important;
  transition: color 0.3s ease;
}

.theme-responsive-muted {
  color: var(--text-muted-current) !important;
  transition: color 0.3s ease;
}

.theme-responsive-enhanced {
  color: var(--text-enhanced-current) !important;
  transition: color 0.3s ease;
}

/* Smart Section Theming */
.smart-section-light {
  background: var(--section-bg-current) !important;
  color: var(--fg) !important;
  transition: all 0.3s ease;
}

.smart-section-dark {
  background: var(--section-dark-bg) !important;
  color: var(--text-light) !important;
  transition: all 0.3s ease;
}

[data-theme="dark"] .smart-section-light {
  background: var(--body-bg-dark) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .smart-section-dark {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
}

/* Dynamic Icon Colors */
.theme-icon-primary {
  color: var(--accent) !important;
  transition: color 0.3s ease;
}

.theme-icon-gold {
  color: var(--primary-gold) !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] .theme-icon-gold {
  color: var(--brand-yellow) !important;
}

/* Enhanced Badge Theming */
.theme-badge-primary {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  transition: all 0.3s ease;
}

.theme-badge-secondary {
  background: var(--text-muted-current) !important;
  color: var(--bg) !important;
  transition: all 0.3s ease;
}

/* Advanced Border Theming */
.theme-border {
  border-color: var(--border-current) !important;
  transition: border-color 0.3s ease;
}

.theme-border-accent {
  border-color: var(--accent) !important;
  transition: border-color 0.3s ease;
}

/* Enhanced Shadow Theming */
.theme-shadow {
  box-shadow: var(--shadow-current) !important;
  transition: box-shadow 0.3s ease;
}

/* Smooth Theme Transitions for All Elements */
* {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease,
    text-shadow 0.3s ease !important;
}

/* Focus states for accessibility */
:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Animations (for entry effects) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

.fadeInUp { animation-name: fadeInUp; }
.zoomIn { animation-name: zoomIn; }

/* Theme Toggle Button Animation */
@keyframes toggleBounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.1) rotate(10deg); }
  50% { transform: scale(1.2) rotate(-5deg); }
  75% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Enhanced Theme Toggle with Glow Effect */
#themeToggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--primary-gold) 0%, transparent 70%);
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -1;
}

#themeToggle:hover::before {
  width: 100px;
  height: 100px;
}

[data-theme="dark"] #themeToggle::before {
  background: radial-gradient(circle, var(--brand-yellow) 0%, transparent 70%);
}

/* Professional Educational UMEED Title Styling */
.main-school-title-3d-professional {
  text-align: center;
  margin: 40px auto;
  perspective: 1000px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.school-name-professional {
  display: block;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin: 15px auto;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #FFFFFF;
  animation: dynamicShadowAnimation 4s ease-in-out infinite, letterSpacing 3s ease-in-out infinite;
  text-shadow: 
    0 0 20px rgba(244, 208, 63, 0.9),
    0 0 40px rgba(244, 208, 63, 0.7),
    0 0 60px rgba(244, 208, 63, 0.5),
    2px 2px 0px rgba(139, 38, 53, 0.9),
    4px 4px 0px rgba(139, 38, 53, 0.7),
    6px 6px 0px rgba(139, 38, 53, 0.5),
    8px 8px 20px rgba(0, 0, 0, 0.8),
    12px 12px 30px rgba(0, 0, 0, 0.6);
  transform-style: preserve-3d;
  transition: all 0.4s ease;
  position: relative;
  text-align: center;
  width: 100%;
}
}
}

.school-name-professional::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(244, 208, 63, 0.3);
  text-shadow: 
    0 0 30px rgba(244, 208, 63, 0.8),
    0 0 60px rgba(244, 208, 63, 0.6),
    2px 2px 0px rgba(139, 38, 53, 0.5);
  transform: translateZ(-10px) scale(1.05);
  filter: blur(3px);
  opacity: 0.7;
  animation: depthPulse 4s ease-in-out infinite;
  z-index: -1;
}

.school-name-professional.umeed {
  color: #F4D03F;
  font-weight: 1000;
  text-shadow: 
    0 0 25px rgba(244, 208, 63, 1),
    0 0 50px rgba(244, 208, 63, 0.8),
    0 0 75px rgba(244, 208, 63, 0.6),
    2px 2px 0px rgba(139, 38, 53, 1),
    4px 4px 0px rgba(139, 38, 53, 0.8),
    6px 6px 0px rgba(139, 38, 53, 0.6),
    8px 8px 25px rgba(0, 0, 0, 0.9),
    12px 12px 40px rgba(0, 0, 0, 0.7);
}

.school-name-professional.education {
  color: #FFFFFF;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 40px rgba(244, 208, 63, 0.7),
    2px 2px 0px rgba(139, 38, 53, 0.9),
    4px 4px 0px rgba(139, 38, 53, 0.7),
    6px 6px 0px rgba(139, 38, 53, 0.5),
    8px 8px 20px rgba(0, 0, 0, 0.8);
  animation-delay: -1s;
}

.school-name-professional.system {
  color: #8B2635;
  text-shadow: 
    0 0 20px rgba(139, 38, 53, 0.9),
    0 0 40px rgba(244, 208, 63, 0.6),
    2px 2px 0px rgba(244, 208, 63, 0.8),
    4px 4px 0px rgba(244, 208, 63, 0.6),
    6px 6px 0px rgba(255, 255, 255, 0.4),
    8px 8px 20px rgba(0, 0, 0, 0.8);
  animation-delay: -2s;
}

[data-theme="dark"] .school-name-professional {
  color: #FFF9C4;
  text-shadow: 
    0 0 30px rgba(255, 249, 196, 1),
    0 0 60px rgba(255, 249, 196, 0.8),
    0 0 90px rgba(255, 249, 196, 0.6),
    2px 2px 0px rgba(244, 208, 63, 1),
    4px 4px 0px rgba(244, 208, 63, 0.8),
    6px 6px 0px rgba(244, 208, 63, 0.6),
    8px 8px 30px rgba(0, 0, 0, 0.95),
    12px 12px 45px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .school-name-professional.umeed {
  color: #FFF9C4;
  text-shadow: 
    0 0 35px rgba(255, 249, 196, 1),
    0 0 70px rgba(255, 249, 196, 0.9),
    0 0 105px rgba(255, 249, 196, 0.7),
    2px 2px 0px rgba(244, 208, 63, 1),
    4px 4px 0px rgba(244, 208, 63, 0.9),
    6px 6px 0px rgba(244, 208, 63, 0.7),
    8px 8px 35px rgba(0, 0, 0, 1),
    12px 12px 50px rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .school-name-professional.education {
  color: #F4D03F;
  text-shadow: 
    0 0 25px rgba(244, 208, 63, 0.9),
    0 0 50px rgba(255, 249, 196, 0.8),
    2px 2px 0px rgba(255, 249, 196, 0.9),
    4px 4px 0px rgba(255, 249, 196, 0.7),
    6px 6px 0px rgba(255, 255, 255, 0.5),
    8px 8px 30px rgba(0, 0, 0, 0.95);
}

[data-theme="dark"] .school-name-professional.system {
  color: #FFFFFF;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 40px rgba(244, 208, 63, 0.7),
    2px 2px 0px rgba(244, 208, 63, 0.8),
    4px 4px 0px rgba(255, 249, 196, 0.6),
    6px 6px 0px rgba(255, 249, 196, 0.4),
    8px 8px 30px rgba(0, 0, 0, 0.95);
}

@keyframes educationalGradient {
  0%, 100% { 
    background-position: 0% 50%; 
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% { 
    background-position: 100% 50%; 
    transform: rotateX(2deg) rotateY(1deg);
  }
  50% { 
    background-position: 100% 100%; 
    transform: rotateX(0deg) rotateY(-1deg);
  }
  75% { 
    background-position: 0% 100%; 
    transform: rotateX(-2deg) rotateY(0deg);
  }
}

@keyframes letterSpacing {
  0%, 100% { letter-spacing: 8px; }
  50% { letter-spacing: 12px; }
}

@keyframes depthPulse {
  0%, 100% { 
    opacity: 0.8; 
    transform: translateZ(-10px) scale(1.05);
  }
  50% { 
    opacity: 0.4; 
    transform: translateZ(-15px) scale(1.08);
  }
}

/* Override for professional educational styling */
.school-tagline-professional {
  margin: 30px auto;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tagline-text-professional {
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 300;
  letter-spacing: 3px;
  color: var(--text-light);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
  opacity: 0.95;
  transition: all 0.3s ease;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  text-align: center;
  width: 100%;
}

[data-theme="dark"] .tagline-text-professional {
  color: var(--text-light);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Hero Buttons Section Centering */
.hero-buttons-section {
  margin: 50px auto 30px;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-buttons-section .d-flex {
  justify-content: center !important;
  align-items: center;
  width: 100%;
}

/* Hero Stats Cards Centering - Enhanced Layout */
.hero-section .row.g-4 {
  margin: 60px auto 0;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  gap: 30px;
  padding: 0 20px;
}

.hero-section .stats-card-animated {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
}

.hero-section .col-lg-3,
.hero-section .col-md-6 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
  padding: 0 15px;
}

/* Enhanced Container for better centering */
.hero-section .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

/* Stats Cards Container Grid */
.stats-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  justify-items: center;
  align-items: stretch;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 1200px) {
  .hero-section .row.g-4 {
    max-width: 1000px;
    gap: 25px;
  }
}

@media (max-width: 992px) {
  .hero-section .row.g-4 {
    margin: 40px auto 0;
    gap: 20px;
    max-width: 800px;
  }
  
  .hero-section .col-lg-3 {
    flex: 0 0 auto;
    width: 48%;
  }
  
  .stats-cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .hero-section .row.g-4 {
    margin: 30px auto 0;
    gap: 20px;
    padding: 0 10px;
  }
  
  .hero-section .col-lg-3,
  .hero-section .col-md-6 {
    width: 100%;
    min-height: 200px;
    padding: 0 10px;
    margin-bottom: 20px;
  }
  
  .stats-cards-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 15px 10px;
  }
}

@media (max-width: 576px) {
  .hero-section .row.g-4 {
    gap: 15px;
    padding: 0 5px;
  }
  
  .hero-section .col-lg-3,
  .hero-section .col-md-6 {
    padding: 0 5px;
  }
}

.btn-professional-primary {
  background: linear-gradient(45deg, var(--primary-burgundy), var(--dark-burgundy));
  border: none;
  color: var(--text-light);
  font-weight: 600;
  border-radius: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 38, 53, 0.3);
}

.btn-professional-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 38, 53, 0.4);
  background: linear-gradient(45deg, var(--dark-burgundy), var(--primary-burgundy));
}

/* Comprehensive Mobile Contact Form and Layout Fixes */
@media (max-width: 575.98px) {
  /* Base mobile fixes */
  body {
    font-size: 14px;
    line-height: 1.4;
    overflow-x: hidden;
  }
  
  .container-fluid,
  .container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
  }
  
  /* Contact Section Mobile Optimization */
  .contact-section {
    padding: 1.5rem 0;
  }
  
  .contact-section .container {
    padding: 0 10px;
  }
  
  .contact-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  /* Contact Form Mobile Layout */
  .contact-form {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .contact-form .row {
    margin: 0 !important;
  }
  
  .contact-form .col-md-6 {
    padding: 0 !important;
    width: 100% !important;
    margin-bottom: 1rem;
  }
  
  .contact-form .form-group {
    margin-bottom: 1rem;
  }
  
  .contact-form label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color);
  }
  
  .contact-form .form-control {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
  }
  
  .contact-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  
  .contact-form textarea.form-control {
    min-height: 100px;
    resize: vertical;
  }
  
  .contact-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }
  
  /* Enhanced Button for Mobile */
  .contact-form .btn {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px;
    margin-top: 1rem;
    text-transform: none;
  }
  
  .contact-form .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  }
  
  .contact-form .btn-success:hover,
  .contact-form .btn-success:focus,
  .contact-form .btn-success:active {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%) !important;
    color: #ffffff !important;
    border: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
  }
  
  /* Hero Section Mobile */
  .hero-section {
    padding: 1.5rem 0;
  }
  
  .hero-section h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  
  .hero-section p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }
  
  /* Features Mobile */
  .features-section {
    padding: 1.5rem 0;
  }
  
  .feature-item {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  /* Cards Mobile */
  .card {
    margin-bottom: 1rem;
    border-radius: 8px;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }
  
  /* Navigation Mobile */
  .navbar {
    padding: 0.5rem 1rem;
  }
  
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  /* Footer Mobile */
  .footer {
    padding: 1.5rem 0;
    text-align: center;
  }
  
  .footer p {
    font-size: 0.85rem;
  }
}

/* Medium Mobile Devices */
@media (min-width: 576px) and (max-width: 767.98px) {
  .contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 1.5rem;
  }
  
  .contact-form .btn {
    width: auto;
    min-width: 200px;
    margin: 1rem auto 0;
    display: block;
  }
}

[data-theme="dark"] .btn-professional-primary {
  background: linear-gradient(45deg, var(--primary-gold), var(--brand-yellow));
  color: var(--text-dark);
  box-shadow: 0 4px 15px rgba(244, 208, 63, 0.3);
}

[data-theme="dark"] .btn-professional-primary:hover {
  box-shadow: 0 6px 20px rgba(244, 208, 63, 0.4);
  background: linear-gradient(45deg, var(--brand-yellow), var(--primary-gold));
}

.btn-professional-secondary {
  background: transparent;
  border: 2px solid var(--primary-gold);
  color: var(--primary-gold);
  font-weight: 600;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.btn-professional-secondary:hover {
  background: var(--primary-gold);
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 208, 63, 0.4);
}

[data-theme="dark"] .btn-professional-secondary {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

[data-theme="dark"] .btn-professional-secondary:hover {
  background: var(--brand-yellow);
  color: var(--text-dark);
  box-shadow: 0 6px 20px rgba(255, 249, 196, 0.4);
}

/* Hero Stats Cards Professional - Enhanced & Fixed */
.hero-stats-card-professional {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 2px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border-radius: 25px;
  padding: 0;
  margin: 0 auto;
  max-width: 280px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 25px rgba(244, 208, 63, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(0) scale(1);
  position: relative;
  overflow: hidden;
}

.hero-stats-card-professional::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.hero-stats-card-professional:hover::before {
  left: 100%;
}

.hero-stats-card-professional:hover {
  transform: translateY(-12px) scale(1.05);
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(244, 208, 63, 0.6);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(244, 208, 63, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .hero-stats-card-professional {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(255, 249, 196, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .hero-stats-card-professional:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 249, 196, 0.5);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 249, 196, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Enhanced Card Body */
.hero-stats-card-professional .card-body {
  padding: 30px 25px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* Stats Icon Wrapper */
.hero-stats-card-professional .stats-icon-wrapper {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 50%;
  background: rgba(244, 208, 63, 0.15);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.hero-stats-card-professional:hover .stats-icon-wrapper {
  background: rgba(244, 208, 63, 0.25);
  transform: scale(1.1) rotateY(10deg);
}

[data-theme="dark"] .hero-stats-card-professional .stats-icon-wrapper {
  background: rgba(255, 249, 196, 0.15);
}

[data-theme="dark"] .hero-stats-card-professional:hover .stats-icon-wrapper {
  background: rgba(255, 249, 196, 0.25);
}

/* Enhanced Stats Numbers */
.hero-stats-card-professional h3.stats-number {
  font-size: 3rem !important;
  font-weight: 900 !important;
  margin: 15px 0 8px !important;
  color: #F4D03F !important;
  text-shadow: 
    0 0 20px rgba(244, 208, 63, 0.8),
    0 0 40px rgba(244, 208, 63, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease;
  font-family: 'Georgia', serif;
}

.hero-stats-card-professional:hover h3.stats-number {
  transform: scale(1.1);
  text-shadow: 
    0 0 25px rgba(244, 208, 63, 1),
    0 0 50px rgba(244, 208, 63, 0.8),
    2px 2px 6px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .hero-stats-card-professional h3.stats-number {
  color: #FFF9C4 !important;
  text-shadow: 
    0 0 25px rgba(255, 249, 196, 0.9),
    0 0 50px rgba(255, 249, 196, 0.7),
    2px 2px 6px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .hero-stats-card-professional:hover h3.stats-number {
  text-shadow: 
    0 0 30px rgba(255, 249, 196, 1),
    0 0 60px rgba(255, 249, 196, 0.9),
    2px 2px 8px rgba(0, 0, 0, 0.9);
}

/* Enhanced Stats Labels */
.hero-stats-card-professional p {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 0.95;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-family: 'Georgia', serif;
}

.hero-stats-card-professional:hover p {
  opacity: 1;
  transform: translateY(-2px);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

/* Floating Icon Enhanced */
.hero-stats-card-professional .floating-icon-enhanced {
  color: #F4D03F !important;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(244, 208, 63, 0.6));
}

.hero-stats-card-professional:hover .floating-icon-enhanced {
  color: #FFFFFF !important;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  animation: iconFloat 2s ease-in-out infinite;
}

[data-theme="dark"] .hero-stats-card-professional .floating-icon-enhanced {
  color: #FFF9C4 !important;
  filter: drop-shadow(0 0 12px rgba(255, 249, 196, 0.7));
}

[data-theme="dark"] .hero-stats-card-professional:hover .floating-icon-enhanced {
  filter: drop-shadow(0 0 18px rgba(255, 249, 196, 0.9));
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(2deg); }
  50% { transform: translateY(-8px) rotate(0deg); }
  75% { transform: translateY(-5px) rotate(-2deg); }
}

/* Responsive Design for Cards */
@media (max-width: 992px) {
  .hero-stats-card-professional {
    max-width: 260px;
    min-height: 200px;
  }
  
  .hero-stats-card-professional h3.stats-number {
    font-size: 2.5rem !important;
  }
}

@media (max-width: 768px) {
  .hero-stats-card-professional {
    max-width: 280px;
    min-height: 180px;
  }
  
  .hero-stats-card-professional .card-body {
    padding: 25px 20px !important;
  }
  
  .hero-stats-card-professional h3.stats-number {
    font-size: 2.2rem !important;
  }
  
  .hero-stats-card-professional p {
    font-size: 1rem !important;
  }
  
  .hero-stats-card-professional .stats-icon-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .hero-stats-card-professional .floating-icon-enhanced {
    font-size: 2rem !important;
  }
}

/* ========== ADVANCED WELCOME ANIMATION SYSTEM ========== */
.welcome-animation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, rgba(139, 38, 53, 0.95) 0%, rgba(106, 27, 26, 0.95) 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: all 1s ease-out;
  overflow: hidden;
}

.welcome-animation-overlay.hide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
}

.welcome-content-animated {
  text-align: center;
  position: relative;
  z-index: 10;
  animation: welcomeContentEntry 2s ease-out;
}

.welcome-logo-animated {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 30px;
  border: 4px solid #F4D03F;
  box-shadow: 
    0 0 30px rgba(244, 208, 63, 0.6),
    0 0 60px rgba(244, 208, 63, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  animation: logoFloat 3s ease-in-out infinite, logoGlow 2s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}

.welcome-logo-animated::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: logoShine 3s linear infinite;
}

.welcome-logo-animated img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.welcome-title-animated {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  color: #F4D03F;
  text-shadow: 
    0 0 20px rgba(244, 208, 63, 0.8),
    0 0 40px rgba(244, 208, 63, 0.6),
    2px 2px 0px rgba(139, 38, 53, 0.8);
  margin-bottom: 20px;
  letter-spacing: 3px;
  animation: titleTypewriter 2s steps(40) 0.5s both, titleGlow 3s ease-in-out infinite;
  font-family: 'Georgia', 'Times New Roman', serif;
  text-transform: uppercase;
}

.welcome-subtitle-animated {
  font-size: clamp(1.2rem, 4vw, 2rem);
  color: #FFFFFF;
  opacity: 0.95;
  margin-bottom: 40px;
  letter-spacing: 2px;
  animation: subtitleSlideUp 1.5s ease-out 1s both;
  font-weight: 300;
}

.welcome-progress-bar {
  width: 300px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 30px auto;
  overflow: hidden;
  position: relative;
}

.welcome-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F4D03F, #FFFFFF, #F4D03F);
  background-size: 200% 100%;
  border-radius: 2px;
  animation: progressFill 3s ease-out, progressShine 1.5s linear infinite;
  width: 0;
}

.welcome-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.welcome-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #F4D03F;
  border-radius: 50%;
  animation: particleFloat 6s linear infinite;
  box-shadow: 0 0 10px rgba(244, 208, 63, 0.8);
}

.welcome-particle:nth-child(odd) {
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  animation-duration: 8s;
}

.welcome-particle:nth-child(3n) {
  background: rgba(139, 38, 53, 0.8);
  box-shadow: 0 0 8px rgba(139, 38, 53, 0.6);
  animation-duration: 7s;
}

/* Welcome Animation Keyframes */
@keyframes welcomeContentEntry {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}

@keyframes logoGlow {
  0% {
    box-shadow: 
      0 0 30px rgba(244, 208, 63, 0.6),
      0 0 60px rgba(244, 208, 63, 0.4),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 
      0 0 40px rgba(244, 208, 63, 0.8),
      0 0 80px rgba(244, 208, 63, 0.6),
      inset 0 0 30px rgba(255, 255, 255, 0.2);
  }
}

@keyframes logoShine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes titleTypewriter {
  0% {
    width: 0;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow: 
      0 0 20px rgba(244, 208, 63, 0.8),
      0 0 40px rgba(244, 208, 63, 0.6),
      2px 2px 0px rgba(139, 38, 53, 0.8);
  }
  50% {
    text-shadow: 
      0 0 30px rgba(244, 208, 63, 1),
      0 0 60px rgba(244, 208, 63, 0.8),
      2px 2px 0px rgba(139, 38, 53, 1);
  }
}

@keyframes subtitleSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 0.95;
    transform: translateY(0);
  }
}

@keyframes progressFill {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes progressShine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) rotate(360deg);
  }
}

/* Dark Theme Welcome Animation */
[data-theme="dark"] .welcome-animation-overlay {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(26, 26, 26, 0.95) 100%);
}

[data-theme="dark"] .welcome-title-animated {
  color: #FFF9C4;
  text-shadow: 
    0 0 25px rgba(255, 249, 196, 0.9),
    0 0 50px rgba(255, 249, 196, 0.7),
    2px 2px 0px rgba(244, 208, 63, 0.8);
}

[data-theme="dark"] .welcome-logo-animated {
  border-color: #FFF9C4;
  box-shadow: 
    0 0 35px rgba(255, 249, 196, 0.8),
    0 0 70px rgba(255, 249, 196, 0.6),
    inset 0 0 25px rgba(255, 255, 255, 0.15);
}

/* Responsive Welcome Animation */
@media (max-width: 768px) {
  .welcome-logo-animated {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }
  
  .welcome-progress-bar {
    width: 250px;
  }
}

/* ===== COMPREHENSIVE DARK MODE BUTTON FIXES ===== */

/* Fix for all Bootstrap button outline variants */
.btn-outline-success {
  border-color: #198754 !important;
  color: #198754 !important;
  background: transparent !important;
}

[data-theme="dark"] .btn-outline-success {
  border-color: #75dd8f !important;
  color: #75dd8f !important;
  background: transparent !important;
}

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .btn-outline-success:hover, 
[data-theme="dark"] .btn-outline-success:focus, 
[data-theme="dark"] .btn-outline-success:active {
  background-color: #75dd8f !important;
  border-color: #75dd8f !important;
  color: var(--text-dark) !important;
}

.btn-outline-danger {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background: transparent !important;
}

[data-theme="dark"] .btn-outline-danger {
  border-color: #ff6b6b !important;
  color: #ff6b6b !important;
  background: transparent !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .btn-outline-danger:hover, 
[data-theme="dark"] .btn-outline-danger:focus, 
[data-theme="dark"] .btn-outline-danger:active {
  background-color: #ff6b6b !important;
  border-color: #ff6b6b !important;
  color: var(--text-dark) !important;
}

.btn-outline-info {
  border-color: #0dcaf0 !important;
  color: #0dcaf0 !important;
  background: transparent !important;
}

[data-theme="dark"] .btn-outline-info {
  border-color: #6bcbde !important;
  color: #6bcbde !important;
  background: transparent !important;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
  background-color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
  color: var(--text-dark) !important;
}

[data-theme="dark"] .btn-outline-info:hover, 
[data-theme="dark"] .btn-outline-info:focus, 
[data-theme="dark"] .btn-outline-info:active {
  background-color: #6bcbde !important;
  border-color: #6bcbde !important;
  color: var(--text-dark) !important;
}

.btn-outline-warning {
  border-color: #ffc107 !important;
  color: #ffc107 !important;
  background: transparent !important;
}

[data-theme="dark"] .btn-outline-warning {
  border-color: #ffda6a !important;
  color: #ffda6a !important;
  background: transparent !important;
}

.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: var(--text-dark) !important;
}

[data-theme="dark"] .btn-outline-warning:hover, 
[data-theme="dark"] .btn-outline-warning:focus, 
[data-theme="dark"] .btn-outline-warning:active {
  background-color: #ffda6a !important;
  border-color: #ffda6a !important;
  color: var(--text-dark) !important;
}

/* Fix for custom buttons in hero sections */
.hero-cta-btn, .cta-button, .learn-more-btn {
  background: linear-gradient(45deg, var(--brand-mehroon), var(--primary-burgundy)) !important;
  border: none !important;
  color: var(--brand-yellow) !important;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 30px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

[data-theme="dark"] .hero-cta-btn, 
[data-theme="dark"] .cta-button, 
[data-theme="dark"] .learn-more-btn {
  background: linear-gradient(45deg, var(--brand-yellow), var(--primary-gold)) !important;
  color: var(--text-dark) !important;
}

.hero-cta-btn:hover, .cta-button:hover, .learn-more-btn:hover,
.hero-cta-btn:focus, .cta-button:focus, .learn-more-btn:focus {
  background: linear-gradient(45deg, var(--primary-burgundy), var(--dark-burgundy)) !important;
  color: var(--brand-yellow) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(139, 38, 53, 0.4);
  text-decoration: none;
}

[data-theme="dark"] .hero-cta-btn:hover, 
[data-theme="dark"] .cta-button:hover, 
[data-theme="dark"] .learn-more-btn:hover,
[data-theme="dark"] .hero-cta-btn:focus, 
[data-theme="dark"] .cta-button:focus, 
[data-theme="dark"] .learn-more-btn:focus {
  background: linear-gradient(45deg, var(--primary-gold), var(--brand-yellow)) !important;
  color: var(--text-dark) !important;
  box-shadow: 0 8px 25px rgba(244, 208, 63, 0.4);
  text-decoration: none;
}

/* Fix for theme toggle button specifically */
.theme-toggle-btn {
  border-color: var(--text-dark) !important;
  color: var(--text-dark) !important;
  background: transparent !important;
}

[data-theme="dark"] .theme-toggle-btn {
  border-color: var(--text-light) !important;
  color: var(--text-light) !important;
  background: transparent !important;
}

.theme-toggle-btn:hover, .theme-toggle-btn:focus, .theme-toggle-btn:active {
  background-color: var(--text-dark) !important;
  border-color: var(--text-dark) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .theme-toggle-btn:hover, 
[data-theme="dark"] .theme-toggle-btn:focus, 
[data-theme="dark"] .theme-toggle-btn:active {
  background-color: var(--text-light) !important;
  border-color: var(--text-light) !important;
  color: var(--text-dark) !important;
}

/* Additional hover effects for better UX */
.btn:hover, button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .btn:hover, [data-theme="dark"] button:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* ========== MOBILE RESPONSIVE ENHANCEMENTS ========== */

/* Viewport and Container Responsive */
@media (max-width: 1200px) {
  .container {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Contact Section Layout Order */
@media (max-width: 991.98px) {
  #contact .order-1 {
    order: 1 !important;
  }
  
  #contact .order-2 {
    order: 2 !important;
  }
}

/* Mobile First Responsive Typography */
@media (max-width: 576px) {
  .display-4 {
    font-size: 2rem !important;
  }
  
  .lead {
    font-size: 1rem !important;
  }
  
  h5 {
    font-size: 1rem !important;
  }
}

/* Touch Target Improvements */
@media (hover: none) and (pointer: coarse) {
  .contact-item {
    min-height: 80px !important;
    padding: 1.5rem !important;
  }
  
  .contact-icon {
    width: 55px !important;
    height: 55px !important;
  }
  
  .form-control-enhanced,
  .input-group-text {
    min-height: 48px !important;
    font-size: 1.1rem !important;
  }
  
  .btn[type="submit"] {
    min-height: 56px !important;
    font-size: 1.2rem !important;
  }
}

/* Landscape Mobile Optimization */
@media (max-width: 768px) and (orientation: landscape) {
  #contact {
    padding: 1.5rem 0 !important;
  }
  
  .contact-form-wrapper {
    padding: 1rem !important;
  }
  
  .contact-item {
    padding: 1rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .contact-icon {
    width: 45px !important;
    height: 45px !important;
  }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }
  
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .row > * {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* Mobile Navigation Improvements */
@media (max-width: 768px) {
  .navbar-toggler {
    font-size: 1.5rem !important;
    padding: 0.5rem !important;
    border: none !important;
  }
  
  .navbar-nav {
    padding: 1rem 0 !important;
  }
  
  .nav-link {
    font-size: 1.1rem !important;
    padding: 0.75rem 1rem !important;
  }
}

/* Accessibility and Performance on Mobile */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  .card-3d-effect:hover {
    transform: none !important;
  }
  
  /* Better focus states for mobile */
  .form-control-enhanced:focus,
  .btn:focus {
    outline: 3px solid var(--primary-gold) !important;
    outline-offset: 2px !important;
  }
}

/* Final Mobile Optimizations */
@media (max-width: 480px) {
  .contact-form-wrapper {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    border-radius: 0 !important;
  }
  
  .contact-item {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
    border-radius: 8px !important;
  }
}

/* ==========================================
   ENHANCED GALLERY STYLES
   ========================================== */

/* Gallery Category Buttons */
.gallery-categories {
  margin-bottom: 1rem;
}

.gallery-category-btn {
  transition: all 0.3s ease;
  border-radius: 20px !important;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.gallery-category-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gallery-category-btn.active {
  background: var(--primary-gold) !important;
  color: var(--primary-burgundy) !important;
  border-color: var(--primary-gold) !important;
  font-weight: 600;
}

/* Enhanced Gallery Grid */
.gallery-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 1;
}

.gallery-image-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.gallery-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.gallery-image-wrapper:hover .gallery-image-overlay {
  opacity: 1;
}

.gallery-image-overlay i {
  color: white;
  font-size: 1.5rem;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.gallery-image-wrapper:hover .gallery-image-overlay i {
  transform: scale(1.2);
}

/* Gallery Delete Button Styles */
.gallery-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(220, 53, 69, 0.9);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.gallery-image-wrapper:hover .gallery-delete-btn {
  opacity: 1;
}

.gallery-delete-btn:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.gallery-delete-btn:active {
  transform: scale(0.95);
}

/* Modal Gallery Delete Button */
.modal-gallery-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

.modal-gallery-item {
  transition: all 0.3s ease;
}

.modal-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.modal-gallery-info {
  background: rgba(0,0,0,0.8);
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-gallery-item:hover .modal-gallery-info {
  opacity: 1;
}

/* Gallery Restore Section Styles */
.gallery-restore-section {
  background: rgba(248, 249, 250, 0.8);
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.gallery-restore-section:hover {
  background: rgba(248, 249, 250, 1);
  border-color: #adb5bd;
}

html[data-theme="dark"] .gallery-restore-section {
  background: rgba(33, 37, 41, 0.8);
  border-color: #495057;
}

html[data-theme="dark"] .gallery-restore-section:hover {
  background: rgba(33, 37, 41, 1);
  border-color: #6c757d;
}

/* Restore Button Styles */
.btn-restore {
  transition: all 0.3s ease;
  font-size: 0.85rem;
}

.btn-restore:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Admin Badge Styles */
.admin-only-badge {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ==========================================
   MODAL STYLES
   ========================================== */

.gallery-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-modal-content {
  background-color: var(--card-bg);
  margin: 5% auto;
  padding: 0;
  border-radius: 15px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: slideDown 0.3s ease;
}

.gallery-modal-large {
  max-width: 1000px;
  width: 95%;
}

.image-modal-content {
  max-width: 800px;
}

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

.gallery-modal-header {
  padding: 1.5rem;
  background: var(--primary-burgundy);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px 15px 0 0;
}

.gallery-modal-header h4 {
  margin: 0;
  font-weight: 600;
}

.gallery-modal-close {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gallery-modal-close:hover {
  background: rgba(255,255,255,0.2);
  transform: rotate(90deg);
}

.gallery-modal-body {
  padding: 2rem;
  max-height: 70vh;
  overflow-y: auto;
}

/* Modal Gallery Items */
.modal-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.modal-gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.modal-gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: all 0.3s ease;
}

/* Upload Form Styling */
.gallery-modal .form-control,
.gallery-modal .form-select {
  border-radius: 8px;
  border: 2px solid var(--border-light);
  padding: 0.75rem;
  transition: all 0.3s ease;
}

html[data-theme="dark"] .gallery-modal .form-control,
html[data-theme="dark"] .gallery-modal .form-select {
  border-color: var(--border-dark);
  background: var(--card-bg-dark);
  color: var(--text-light);
}

.gallery-modal .form-control:focus,
.gallery-modal .form-select:focus {
  border-color: var(--primary-gold);
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.25);
}

.gallery-modal .btn {
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.gallery-modal .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Form Text Styling */
.gallery-modal .form-text {
  color: var(--text-muted-light);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

html[data-theme="dark"] .gallery-modal .form-text {
  color: var(--text-muted-dark);
}

/* ==========================================
   RESPONSIVE GALLERY & MODAL STYLES
   ========================================== */

@media (max-width: 768px) {
  .gallery-categories {
    text-align: center;
  }
  
  .gallery-category-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    margin: 0.2rem;
  }
  
  .gallery-modal-content {
    margin: 10% auto;
    width: 95%;
    max-height: 80vh;
  }
  
  .gallery-modal-body {
    padding: 1rem;
    max-height: 60vh;
  }
  
  .gallery-modal-header {
    padding: 1rem;
  }
  
  .gallery-modal-header h4 {
    font-size: 1.1rem;
  }
  
  .modal-gallery-item img {
    height: 150px;
  }
}

@media (max-width: 480px) {
  .gallery-modal-content {
    margin: 5% auto;
    width: 98%;
    border-radius: 10px;
  }
  
  .gallery-modal-body {
    padding: 0.75rem;
  }
  
  .gallery-category-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  
  .gallery-image-overlay i {
    font-size: 1.2rem;
  }
  
  .modal-gallery-item img {
    height: 120px;
  }
}

/* ==========================================
   DARK THEME OVERRIDES FOR GALLERY
   ========================================== */

html[data-theme="dark"] .gallery-modal-content {
  background-color: var(--card-bg-dark);
}

html[data-theme="dark"] .gallery-category-btn {
  border-color: var(--border-dark);
  color: var(--text-light);
}

html[data-theme="dark"] .gallery-category-btn:hover {
  background: rgba(244, 208, 63, 0.1);
  border-color: var(--primary-gold);
}

html[data-theme="dark"] .gallery-category-btn.active {
  background: var(--primary-gold) !important;
  color: var(--primary-burgundy) !important;
}

/* Scrollbar Styling for Modals */
.gallery-modal-body::-webkit-scrollbar {
  width: 8px;
}

.gallery-modal-body::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 4px;
}

.gallery-modal-body::-webkit-scrollbar-thumb {
  background: var(--primary-gold);
  border-radius: 4px;
}

.gallery-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--primary-burgundy);
}

html[data-theme="dark"] .gallery-modal-body::-webkit-scrollbar-track {
  background: var(--border-dark);
}

/* Loading Animation for Gallery */
.gallery-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.gallery-loading .spinner-border {
  color: var(--primary-gold);
}

/* Upload Button Enhancement */
.btn-upload-enhanced {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border: none;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-upload-enhanced:hover {
  background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}

/* ==========================================
   GOLD SHADOW EFFECTS FOR ALL CARDS
   ========================================== */

/* Base Card Gold Shadow System */
.card,
.hero-stats-card-professional,
.feature-card,
.timeline-card,
.environment-card,
.contact-form,
.video-card,
.gallery-section,
.notification-card,
.professional-announcements-wrapper,
.contact-item {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 15px rgba(244, 208, 63, 0.2),
    inset 0 1px 0 rgba(244, 208, 63, 0.1) !important;
  border: 1px solid rgba(244, 208, 63, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Enhanced Gold Shadow on Hover */
.card:hover,
.hero-stats-card-professional:hover,
.feature-card:hover,
.timeline-card:hover,
.environment-card:hover,
.contact-form:hover,
.video-card:hover,
.gallery-section:hover,
.contact-item:hover {
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.2),
    0 8px 25px rgba(244, 208, 63, 0.4),
    0 0 30px rgba(244, 208, 63, 0.3),
    inset 0 1px 0 rgba(244, 208, 63, 0.2) !important;
  border-color: rgba(244, 208, 63, 0.6) !important;
  transform: translateY(-5px) scale(1.02) !important;
}

/* Hero Stats Cards Enhanced Gold Effect */
.hero-stats-card-professional {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 5px 20px rgba(244, 208, 63, 0.3),
    0 0 20px rgba(244, 208, 63, 0.2),
    inset 0 2px 0 rgba(244, 208, 63, 0.15) !important;
}

.hero-stats-card-professional:hover {
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.25),
    0 10px 30px rgba(244, 208, 63, 0.5),
    0 0 40px rgba(244, 208, 63, 0.4),
    inset 0 2px 0 rgba(244, 208, 63, 0.25) !important;
  transform: translateY(-8px) scale(1.05) !important;
}

/* Feature Cards Gold Enhancement */
.feature-card {
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.18),
    0 6px 20px rgba(244, 208, 63, 0.25),
    0 0 25px rgba(244, 208, 63, 0.15),
    inset 0 1px 0 rgba(244, 208, 63, 0.1) !important;
}

.feature-card:hover {
  box-shadow: 
    0 18px 45px rgba(0, 0, 0, 0.22),
    0 10px 30px rgba(244, 208, 63, 0.45),
    0 0 35px rgba(244, 208, 63, 0.35),
    inset 0 2px 0 rgba(244, 208, 63, 0.2) !important;
}

/* Environment Cards Special Gold Effect */
.environment-card {
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.2),
    0 8px 25px rgba(244, 208, 63, 0.3),
    0 0 30px rgba(244, 208, 63, 0.2) !important;
  border: 2px solid rgba(244, 208, 63, 0.4) !important;
}

.environment-card:hover {
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.25),
    0 15px 40px rgba(244, 208, 63, 0.5),
    0 0 50px rgba(244, 208, 63, 0.4) !important;
  border-color: rgba(244, 208, 63, 0.7) !important;
  transform: translateY(-10px) scale(1.03) !important;
}

/* Contact Form Gold Enhancement */
.contact-form {
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(244, 208, 63, 0.25),
    0 0 40px rgba(244, 208, 63, 0.15) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(15px) !important;
}

.contact-form:hover {
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.2),
    0 15px 40px rgba(244, 208, 63, 0.4),
    0 0 50px rgba(244, 208, 63, 0.3) !important;
}

/* Contact Items Gold Effect */
.contact-item {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.12),
    0 4px 15px rgba(244, 208, 63, 0.2),
    0 0 20px rgba(244, 208, 63, 0.1) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 15px !important;
  padding: 1.5rem !important;
}

.contact-item:hover {
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.18),
    0 8px 25px rgba(244, 208, 63, 0.35),
    0 0 30px rgba(244, 208, 63, 0.25) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Gallery Section Gold Enhancement */
.gallery-section {
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.15),
    0 8px 25px rgba(244, 208, 63, 0.25),
    0 0 30px rgba(244, 208, 63, 0.15) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
}

/* Video Cards Gold Effect */
.video-card {
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 5px 20px rgba(244, 208, 63, 0.2),
    0 0 25px rgba(244, 208, 63, 0.1) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 15px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.video-card:hover {
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.2),
    0 8px 25px rgba(244, 208, 63, 0.35),
    0 0 35px rgba(244, 208, 63, 0.25) !important;
  transform: translateY(-3px) !important;
}

/* Timeline Cards Gold Enhancement */
.timeline-card {
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.2),
    0 6px 20px rgba(244, 208, 63, 0.3),
    0 0 25px rgba(244, 208, 63, 0.2) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

.timeline-card:hover {
  box-shadow: 
    0 18px 45px rgba(0, 0, 0, 0.25),
    0 10px 30px rgba(244, 208, 63, 0.45),
    0 0 40px rgba(244, 208, 63, 0.35) !important;
}

/* Notification Container Gold Effect */
.professional-announcements-wrapper {
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(244, 208, 63, 0.25),
    0 0 40px rgba(244, 208, 63, 0.15),
    inset 0 2px 0 rgba(244, 208, 63, 0.1) !important;
  border: 2px solid rgba(244, 208, 63, 0.3) !important;
}

/* Gallery Image Wrappers Gold Effect */
.gallery-image-wrapper {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 15px rgba(244, 208, 63, 0.2),
    0 0 20px rgba(244, 208, 63, 0.1) !important;
  border: 1px solid rgba(244, 208, 63, 0.3) !important;
}

.gallery-image-wrapper:hover {
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.2),
    0 8px 25px rgba(244, 208, 63, 0.4),
    0 0 35px rgba(244, 208, 63, 0.3) !important;
  border-color: rgba(244, 208, 63, 0.6) !important;
}

/* Dark Theme Gold Shadow Adjustments */
html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-stats-card-professional,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .environment-card,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .video-card,
html[data-theme="dark"] .gallery-section,
html[data-theme="dark"] .contact-item {
  background: var(--card-bg-dark) !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 4px 15px rgba(255, 249, 196, 0.15),
    0 0 20px rgba(255, 249, 196, 0.1),
    inset 0 1px 0 rgba(255, 249, 196, 0.1) !important;
  border: 1px solid rgba(255, 249, 196, 0.25) !important;
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .hero-stats-card-professional:hover,
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .timeline-card:hover,
html[data-theme="dark"] .environment-card:hover,
html[data-theme="dark"] .contact-form:hover,
html[data-theme="dark"] .video-card:hover,
html[data-theme="dark"] .gallery-section:hover,
html[data-theme="dark"] .contact-item:hover {
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.5),
    0 8px 25px rgba(255, 249, 196, 0.25),
    0 0 35px rgba(255, 249, 196, 0.2),
    inset 0 2px 0 rgba(255, 249, 196, 0.15) !important;
  border-color: rgba(255, 249, 196, 0.4) !important;
}

/* Special Gold Pulse Animation for Important Cards */
@keyframes goldPulse {
  0% {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 15px rgba(244, 208, 63, 0.2),
      0 0 20px rgba(244, 208, 63, 0.1);
  }
  50% {
    box-shadow: 
      0 12px 35px rgba(0, 0, 0, 0.2),
      0 6px 20px rgba(244, 208, 63, 0.4),
      0 0 30px rgba(244, 208, 63, 0.3);
  }
  100% {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 4px 15px rgba(244, 208, 63, 0.2),
      0 0 20px rgba(244, 208, 63, 0.1);
  }
}

/* Apply gold pulse to hero stats cards */
.hero-stats-card-professional {
  animation: goldPulse 3s ease-in-out infinite;
}

/* Enhanced glow effect for feature icons */
.feature-icon-animated {
  text-shadow: 
    0 0 10px rgba(244, 208, 63, 0.5),
    0 0 20px rgba(244, 208, 63, 0.3),
    0 0 30px rgba(244, 208, 63, 0.2) !important;
}

/* Gold shadow for buttons */
.btn {
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(244, 208, 63, 0.15) !important;
  transition: all 0.3s ease !important;
}

.btn:hover {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 15px rgba(244, 208, 63, 0.3),
    0 0 20px rgba(244, 208, 63, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Additional Card Classes Gold Shadow Coverage */
.image-container,
.content-wrapper > .card,
.stats-card-animated > .card,
.notification-card,
.announcement-card,
.modal-gallery-item,
.gallery-modal-content,
.upload-modal-content,
.image-modal-content {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 15px rgba(244, 208, 63, 0.2),
    0 0 20px rgba(244, 208, 63, 0.1),
    inset 0 1px 0 rgba(244, 208, 63, 0.1) !important;
  border: 1px solid rgba(244, 208, 63, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.image-container:hover,
.content-wrapper > .card:hover,
.stats-card-animated > .card:hover,
.notification-card:hover,
.announcement-card:hover,
.modal-gallery-item:hover {
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.2),
    0 8px 25px rgba(244, 208, 63, 0.4),
    0 0 30px rgba(244, 208, 63, 0.3),
    inset 0 1px 0 rgba(244, 208, 63, 0.2) !important;
  border-color: rgba(244, 208, 63, 0.6) !important;
  transform: translateY(-5px) scale(1.02) !important;
}

/* Ensure all Bootstrap card variants get gold shadow */
.card-body,
.card-header,
.card-footer {
  transition: all 0.3s ease;
}

.card:hover .card-body,
.card:hover .card-header,
.card:hover .card-footer {
  background: rgba(244, 208, 63, 0.02) !important;
}

/* Special effects for main content cards */
.hero-section .card,
.about-section .card,
.features-section .card,
.contact-section .card,
.history-section .card {
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 5px 20px rgba(244, 208, 63, 0.25),
    0 0 25px rgba(244, 208, 63, 0.15),
    inset 0 1px 0 rgba(244, 208, 63, 0.1) !important;
}

/* Enhanced section-specific gold effects */
#home .card,
#about .card,
#features .card,
#contact .card,
#history .card,
#notifications .card {
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.15),
    0 6px 20px rgba(244, 208, 63, 0.25),
    0 0 30px rgba(244, 208, 63, 0.15) !important;
}

/* ==========================================
   ADMIN AUTHENTICATION STYLES
   ========================================== */

/* Admin Status Bar */
.admin-status-bar {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(244, 208, 63, 0.1) 100%);
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(5px);
}

.admin-status-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Authentication Message Styling */
.auth-message {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 500;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.auth-message.success {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(244, 208, 63, 0.1) 100%);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: #155724;
}

.auth-message.error {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(244, 208, 63, 0.1) 100%);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #721c24;
}

html[data-theme="dark"] .auth-message.success {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%, rgba(255, 249, 196, 0.1) 100%);
  border: 1px solid rgba(40, 167, 69, 0.4);
  color: #d4edda;
}

html[data-theme="dark"] .auth-message.error {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.2) 0%, rgba(255, 249, 196, 0.1) 100%);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #f8d7da;
}

/* Admin Credentials Info */
.admin-credentials-info {
  background: rgba(244, 208, 63, 0.1);
  border: 1px solid rgba(244, 208, 63, 0.3);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

html[data-theme="dark"] .admin-credentials-info {
  background: rgba(255, 249, 196, 0.1);
  border: 1px solid rgba(255, 249, 196, 0.3);
}

/* Admin Auth Modal Enhancements */
#adminAuthModal .gallery-modal-content {
  max-width: 450px;
}

#adminAuthModal .form-control {
  border-radius: 8px;
  border: 2px solid rgba(244, 208, 63, 0.3);
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

#adminAuthModal .form-control:focus {
  border-color: rgba(244, 208, 63, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(244, 208, 63, 0.25);
}

/* Auth Lock Icon Animation */
@keyframes lockPulse {
  0%, 100% { 
    transform: scale(1);
    color: #ffc107;
  }
  50% { 
    transform: scale(1.1);
    color: #f4d03f;
  }
}

#adminAuthModal .fa-lock {
  animation: lockPulse 2s ease-in-out infinite;
}

/* Responsive Admin Status */
@media (max-width: 768px) {
  .admin-status-bar {
    padding: 0.5rem 0.75rem;
  }
  
  .admin-status-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  #adminAuthModal .gallery-modal-content {
    width: 95%;
    margin: 10% auto;
  }
}

@media (max-width: 480px) {
  .admin-status-bar .d-flex {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .admin-status-info {
    align-items: center;
    text-align: center;
  }
}