/*
 * =============================================================================
 * Seminary of Sacred Knowledge — Custom Stylesheet
 * =============================================================================
 *
 * File:        custom.css
 * Theme:       hello-elementor-child
 * Version:     2.2.0
 * Rebuilt:     2026 — de-minified, section-organised, patches merged inline.
 *              Previously a 121 KB minified single-line blob. Now fully
 *              readable: any rule can be found and edited in under 30 seconds.
 *
 * HOW TO EDIT
 * ───────────
 * Search for the section name (e.g. "05. NAVIGATION") to jump to it.
 * Each section contains all rules for that component including its own
 * responsive overrides. No more digging through appended patch blocks.
 *
 * TABLE OF CONTENTS
 * ─────────────────────────────────────────────────────────────────────────────
 *  01. Performance & Scroll Overrides
 *  02. Global Button Overrides
 *  03. CSS Custom Properties (Design Tokens)
 *  04. Reset & Base
 *  05. Typography
 *  06. Layout Utilities
 *  07. Navigation & Header
 *  08. Hero Section
 *  09. Animations & Keyframes
 *  10. Program Cards & Flip Cards
 *  11. Statistics Section
 *  12. Testimonials
 *  13. Footer
 *  14. Contact & Forms
 *  15. FAQ
 *  16. Floating UI (Back-to-Top, FAB Donate, Dark-Mode Toggle)
 *  17. Dark Mode
 *  18. Responsive — Mobile (≤480px)
 *  19. Toast Notifications
 *  20. Slider / Carousel
 *  21. Responsive — Tablet (≤992px)
 *  22. WhatsApp Slide
 *  23. Bug Fixes v2.1.1
 *  24. PSI / Performance Fixes v2.1.2
 *  25. Flip Icon Repositioning
 *  26. Newsletter Form States
 * =============================================================================
 */

/* =============================================================================
 * 01. PERFORMANCE & SCROLL OVERRIDES
 * Foundational rules that must load before everything else. Prevents
 * Hello Elementor's scroll-jacking and height overrides from breaking
 * the custom layout.
 * ============================================================================= */

/* ============================================
   GLOBAL SCROLL & PERFORMANCE OVERRIDES
   ============================================ */
html,
body {
  overflow: visible !important;
  overflow-x: hidden !important;
  scroll-behavior: auto !important;
  height: auto !important;
}

body.nav-open {
  overflow: hidden !important;
}


/* =============================================================================
 * 02. GLOBAL BUTTON OVERRIDES
 * Hello Elementor's parent theme sets all button/input text to its own pink
 * accent colour. These rules override that globally so every button uses
 * white text on the site's green/gold palette — at rest, hover, and focus.
 * ============================================================================= */

/* ============================================
   GLOBAL BUTTON COLOR OVERRIDE
   Hello Elementor parent theme sets button text to its
   own pink/red accent colour. Override it globally so
   every button on every page uses white text on the
   site's own green/gold palette — both at rest AND on
   hover/focus.  The nav-toggle hamburger is excluded
   because it is transparent/icon-only.
   ============================================ */

/* Default (resting) state */
button:not(.nav-toggle):not(.slider-btn):not(.dark-mode-toggle):not(.back-to-top):not(.fab-donate):not(.toast-close):not(.flip-icon),
[type="button"]:not(.nav-toggle),
[type="submit"],
[type="reset"],
.elementor-button,
.btn {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Hover / Focus */
button:not(.nav-toggle):not(.dark-mode-toggle):not(.back-to-top):not(.fab-donate):not(.toast-close):not(.flip-icon):hover,
button:not(.nav-toggle):not(.dark-mode-toggle):not(.back-to-top):not(.fab-donate):not(.toast-close):not(.flip-icon):focus,
[type="button"]:not(.nav-toggle):hover,
[type="button"]:not(.nav-toggle):focus,
[type="submit"]:hover,
[type="submit"]:focus,
.elementor-button:hover,
.elementor-button:focus,
.btn:hover,
.btn:focus {
  color: var(--white) !important;
  background-color: var(--forest-green) !important;
  border-color: var(--forest-green) !important;
}

/* Keep outline / tertiary button text on-brand (green on white bg) */
.btn-outline,
.btn-tertiary {
  color: var(--primary) !important;
  background-color: transparent !important;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-tertiary:hover,
.btn-tertiary:focus {
  color: var(--white) !important;
  background-color: var(--primary) !important;
}

/* Nav toggle – transparent background, green bars */
.nav-toggle,
.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle.active {
  background-color: transparent !important;
  color: var(--primary) !important;
}

/* Slider prev/next buttons */
.slider-btn {
  color: var(--primary) !important;
  background-color: var(--white) !important;
}

.slider-btn:hover,
.slider-btn:focus {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}

/* =============================================================================
 * 03. CSS CUSTOM PROPERTIES — Design Tokens
 * All colours, spacing, shadows, radii, and typography values live here.
 * To re-theme the site, only this section ever needs changing.
 * ============================================================================= */

:root {
  --islamic-green: #1b4d3e;
  --forest-green: #2c5f2d;
  --sage-green: #3a7d44;
  --gold-accent: #d4af37;
  --cream-bg: #faf8f3;
  --white: #ffffff;
  --charcoal: #2c2c2c;
  --primary: var(--islamic-green);
  --secondary: var(--forest-green);
  --accent: var(--gold-accent);
  --text-primary: var(--charcoal);
  --text-light: #666666;
  --bg-light: var(--cream-bg);
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 3.5rem;
  --font-arabic: "Amiri", serif;
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Lato", sans-serif;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --hero-bg:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(https://seminaryofsk.com/wp-content/uploads/2026/05/hero-bg.webp);
  --section-bg: var(--cream-bg);
  --card-bg: var(--white);
  --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  --toast-success: #28a745;
  --toast-error: var(--primary);
  --text-dark: #2c2c2c;
  --text-muted: #888888;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =============================================================================
 * 04. RESET & BASE
 * ============================================================================= */

html {
  scroll-behavior: auto !important;
  font-size: 16px;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #0d2e26 !important;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg,
      var(--gold-accent),
      var(--primary),
      var(--sage-green));
  z-index: 10000;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.7;
  background-color: #f8f5f0;
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.image-zoom-wrapper {
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}

.image-zoom-wrapper img {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.image-zoom-wrapper:hover img {
  transform: scale(1.1);
}

a:not(.btn):not(.nav-menu a):not(.footer-links a) {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-normal);
}

a:not(.btn):not(.nav-menu a):not(.footer-links a)::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-accent), var(--primary));
  transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

a:not(.btn):not(.nav-menu a):not(.footer-links a):hover::after {
  width: 100%;
}

a:not(.btn):not(.nav-menu a):not(.footer-links a):hover {
  color: var(--primary);
}

/* =============================================================================
 * 05. TYPOGRAPHY — Headings, body copy, links
 * ============================================================================= */

ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--primary);
}

h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--secondary);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--sage-green);
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

p {
  margin-bottom: var(--spacing-sm);
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.8;
}

/* =============================================================================
 * 06. LAYOUT UTILITIES — .container, section padding, grid helpers
 * ============================================================================= */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  width: 100%;
  padding: 0;
  margin: 0;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

section {
  padding: var(--spacing-xl) 0;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}

.full-width-section {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* =============================================================================
 * 07. NAVIGATION & HEADER
 * Includes: .navbar, .nav-container, .nav-logo, .nav-menu, dropdowns,
 * mobile hamburger, nav-toggle, nav-donate-btn
 * ============================================================================= */

.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 108px !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition:
    background-color var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.nav-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.nav-logo a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-arabic {
  font-family: var(--font-arabic);
  font-size: 1.5rem;
  color: var(--gold-accent);
  font-weight: 700;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: 0.25rem;
}

.logo-img {
  height: 75px;
  width: auto;
  transition: transform 0.3s ease;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain;
}

.logo-img:hover {
  transform: scale(1.05);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-logo-img {
  height: 70px;
  width: auto;
  filter: none;
  transition: transform 0.3s ease;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain;
}

.footer-logo-img:hover {
  transform: scale(1.05);
}

.nav-menu {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-menu li {
  position: relative;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}

.nav-menu li::before {
  content: none !important;
  display: none !important;
}

.nav-menu a {
  padding: 0.75rem 0.5rem !important;
  min-height: 44px;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.3px;
  padding: 0.5rem 0;
  display: block;
  position: relative;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-accent);
  transition: var(--transition-normal);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 100%;
}

.nav-menu a:hover {
  color: var(--primary);
}

.dropdown {
  position: relative;
}

.dropdown-arrow {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  transition: var(--transition-fast);
}

.dropdown:hover .dropdown-arrow,
.dropdown:focus-within .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
  padding: 1rem 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition-normal);
  list-style: none !important;
  margin: 0 !important;
}

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

.dropdown-menu li {
  padding: 0;
  list-style: none !important;
}

.dropdown-menu li::before {
  content: none !important;
  display: none !important;
}

.dropdown-menu a {
  padding: 0.75rem 1.5rem;
  display: block;
  color: var(--text-primary);
}

.dropdown-menu a:hover {
  background: var(--bg-light);
  color: var(--primary);
}

.dropdown-menu a::after {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  width: 25px;
  height: 3px;
  background: var(--primary);
  margin: 3px 0;
  transition: var(--transition-fast);
  border-radius: 2px;
}

.nav-donate-btn {
  color: #0d2e26 !important;
  background: var(--gold-accent);
  color: var(--white) !important;
  padding: 0.6rem 1.8rem !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.4;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  opacity: 1;
}

.nav-donate-btn:hover {
  background: #c4a030;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.nav-donate-btn::after {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* =============================================================================
 * 08. HERO SECTION
 * ============================================================================= */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg,
      var(--primary) 0%,
      var(--forest-green) 50%,
      var(--sage-green) 100%);
  overflow: hidden;
  padding-top: 160px;
  padding-bottom: var(--spacing-xl);
  padding-left: 0;
  padding-right: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.hero.hero-inner {
  min-height: 45vh;
  padding-top: 140px;
  padding-bottom: var(--spacing-lg);
}

@media (max-width: 992px) {
  .hero {
    padding-top: 140px !important;
  }

  .hero.hero-inner {
    padding-top: 120px !important;
  }
}

.hero.hero-inner .hero-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 0.5rem;
}

.hero.hero-inner .hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle,
      rgba(212, 175, 55, 0.2) 0%,
      transparent 70%);
  border-radius: 50%;
  animation: float 20s ease-in-out infinite;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
      rgba(58, 125, 68, 0.2) 0%,
      transparent 70%);
  border-radius: 50%;
  animation: float 15s ease-in-out infinite reverse;
}

/* =============================================================================
 * 09. ANIMATIONS & KEYFRAMES
 * NOTE: underlineGlow is overridden in section 24 to use opacity instead
 * of box-shadow (PSI fix — non-composited animation).
 * ============================================================================= */

@keyframes float {

  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
  }

  66% {
    transform: translateY(20px) translateX(-20px) rotate(-5deg);
  }
}

.hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.03) 35px,
      rgba(255, 255, 255, 0.03) 70px),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.03) 35px,
      rgba(255, 255, 255, 0.03) 70px);
  background-size: 70px 70px;
  background-position: 0 0;
  opacity: 0.5;
  pointer-events: none;
}

.hero-content {
  text-align: center;
  color: var(--white);
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  animation: fadeInUp 1s ease;
  position: relative;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bismillah {
  font-family: var(--font-arabic);
  font-size: clamp(2rem, 4vw, 3rem);
  color: #ffd700 !important;
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  animation: fadeInUp 1s ease 0.2s both;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 100;
}

@media (max-width: 992px) {
  .bismillah {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
    animation: none !important;
  }
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #ffffff !important;
  margin: 0 auto var(--spacing-sm) auto;
  animation: fadeInUp 1s ease 0.4s both;
  background: none;
  padding: 0.75rem 1.5rem;
  display: table;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.hero-subtitle {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #ffffff !important;
  margin-bottom: 0.5rem;
  animation: fadeInUp 1s ease 0.6s both;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
  font-weight: 600;
}

.hero-tagline {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: #ffd700 !important;
  margin-bottom: var(--spacing-md);
  font-style: italic;
  animation: fadeInUp 1s ease 0.8s both;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-description {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  max-width: 700px;
  margin: 0 auto var(--spacing-md);
  animation: fadeInUp 1s ease 1s both;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease 1.2s both;
  position: relative;
  z-index: 15;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  animation: fadeIn 1s ease 1.5s both;
  cursor: pointer;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.hero-scroll:hover {
  color: var(--gold-accent);
  transform: translateX(-50%) translateY(-5px);
}

.scroll-indicator {
  width: 2px;
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.scroll-indicator::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(180deg,
      var(--gold-accent),
      rgba(212, 175, 55, 0.5));
  animation: scrollDown 1.5s ease-in-out infinite;
  box-shadow: 0 0 15px var(--gold-accent);
}

@keyframes scrollDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(300%);
  }
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.875rem;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 10;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
  color: var(--white);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 1;
  visibility: visible;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--forest-green), var(--sage-green));
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(27, 77, 62, 0.3);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition:
    background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}

.btn-secondary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s ease,
    height 0.6s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary);
  border-color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover::before {
  width: 300px;
  height: 300px;
}

/* =============================================================================
 * 10. PROGRAM CARDS & FLIP CARDS
 * ============================================================================= */

.program-card .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.program-card .btn-secondary:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.btn-tertiary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
  opacity: 1;
  visibility: visible;
}

.btn-tertiary:hover {
  background: var(--primary);
  color: var(--white);
}

.program-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  opacity: 1;
  visibility: visible;
  z-index: 15;
}

.program-buttons .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 1;
  visibility: visible;
}

.btn-large {
  padding: 1.125rem 2.5rem;
  font-size: 1rem;
}

.live-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #27ae60;
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-sm);
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg,
      transparent,
      var(--gold-accent),
      transparent);
  margin: 1.5rem auto 1.5rem;
  border-radius: 2px;
  animation: underlineGlow 2s ease-in-out infinite;
}

@keyframes underlineGlow {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
  }

  50% {
    box-shadow:
      0 0 20px rgba(212, 175, 55, 0.8),
      0 0 30px rgba(212, 175, 55, 0.4);
  }
}

.section-subtitle {
  text-align: center;
  font-size: 1.125rem;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
}

.section-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background:
    linear-gradient(45deg,
      var(--cream-bg) 25%,
      transparent 25%,
      transparent 75%,
      var(--cream-bg) 75%),
    linear-gradient(45deg,
      var(--cream-bg) 25%,
      transparent 25%,
      transparent 75%,
      var(--cream-bg) 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    10px 10px;
  opacity: 0.3;
  border-radius: 50%;
}

.welcome {
  background: var(--bg-light);
  position: relative;
}

.welcome-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.welcome-text {
  animation: fadeIn 1s ease;
}

.hadith-box {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 4px solid var(--gold-accent);
  animation: slideInRight 1s ease;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-left-width 0.4s ease;
}

.hadith-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(212, 175, 55, 0.1),
      transparent);
  transition: left 0.6s ease;
}

.hadith-box:hover::before {
  left: 100%;
}

.hadith-box:hover {
  transform: translateX(-5px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
  border-left-width: 6px;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hadith-icon {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hadith-icon svg {
  width: 40px;
  height: 40px;
  color: var(--gold-accent);
}

.hadith-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--primary);
  margin-bottom: 1rem;
  line-height: 1.8;
}

.hadith-source {
  font-size: 0.875rem;
  color: var(--text-light);
  text-align: right;
}

.programs {
  background: var(--white);
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  perspective: 1000px;
}

.program-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  transition:
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  transform-style: preserve-3d;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.program-card-inner {
  position: relative;
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

.program-card.flipped .program-card-inner {
  transform: rotateY(180deg);
}

.program-card-front,
.program-card-back {
  grid-area: 1/1;
  width: 100%;
  min-height: 520px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.program-card-front {
  position: relative;
  z-index: 2;
}

.program-card-back {
  position: relative;
  transform: rotateY(180deg);
}

.program-card-front {
  background: transparent;
  justify-content: space-between;
}

.program-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg,
      var(--primary) 0%,
      var(--forest-green) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--white);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5rem;
}

.program-card-back h4 {
  color: var(--gold-accent);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.program-card-back p {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.9;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.flip-icon {
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(27, 77, 62, 0.2);
  border: 1.5px solid rgba(27, 77, 62, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease;
  z-index: 10;
  padding: 0;
  opacity: 1;
  visibility: visible;
}

.flip-icon::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:
    background-color 0.3s ease,
    transform 0.5s ease;
}

.flip-icon:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.1);
}

.flip-icon:hover::before {
  background-color: var(--white);
  transform: rotate(180deg);
}

.program-card-back .flip-icon {
  width: 48px;
  height: 48px;
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.4);
}

.program-card-back .flip-icon::before {
  background-color: var(--gold-accent);
}

.program-card-back .flip-icon:hover {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
}

.program-card-back .flip-icon:hover::before {
  background-color: var(--white);
}

.program-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      var(--gold-accent),
      var(--primary),
      var(--gold-accent));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.program-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(212, 175, 55, 0.1),
      rgba(27, 77, 62, 0.1));
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .program-card:hover {
    transform: translateY(-15px) rotateX(5deg) scale(1.02);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow:
      0 20px 60px rgba(27, 77, 62, 0.2),
      0 0 0 1px rgba(212, 175, 55, 0.3);
  }

  .program-card:hover::before {
    opacity: 1;
  }

  .program-card:hover::after {
    opacity: 1;
  }
}

.program-card.featured {
  border-color: var(--gold-accent);
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.8),
      rgba(212, 175, 55, 0.05));
}

.featured-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, var(--gold-accent), #f4d03f);
  color: var(--white);
  padding: 0.25rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.6);
  }
}

.program-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.program-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transform: rotate(45deg);
  transition: opacity 0.6s ease;
}

.program-card:hover .program-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(27, 77, 62, 0.3);
}

.program-card:hover .program-icon::before {
  animation: shimmer 1.5s infinite;
}

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

  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.program-icon svg {
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 1;
}

.program-title {
  color: var(--primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(212, 175, 55, 0.25);
}

.program-title-arabic {
  font-family: var(--font-arabic);
  color: var(--gold-accent);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
}

.program-description {
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
  padding-top: 0.25rem;
}

.program-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--spacing-md);
}

.feature-tag {
  background: rgba(27, 77, 62, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(27, 77, 62, 0.2);
  transition:
    background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
}

.feature-tag:hover {
  background: rgba(212, 175, 55, 0.2);
  color: var(--gold-accent);
  border-color: var(--gold-accent);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.program-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.program-buttons .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 120px;
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: rgba(27, 77, 62, 0.05);
  font-weight: 700;
}

.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
}

.stats {
  background: var(--primary);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.stats .section-title {
  color: var(--white) !important;
}

.stats-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.05) 35px,
      rgba(255, 255, 255, 0.05) 70px);
  opacity: 0.5;
}

/* =============================================================================
 * 11. STATISTICS SECTION
 * ============================================================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  position: relative;
  z-index: 10;
}

.stats-grid .card {
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem;
  height: 100%;
  min-height: fit-content;
  padding: var(--spacing-lg);
  background: rgba(30, 61, 48, 0.4);
  border: 1px solid rgba(197, 168, 128, 0.2);
  border-radius: var(--radius-lg);
  color: var(--white);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-grid .card h3,
.stats-grid .card p,
.stats-grid .card li {
  color: var(--white) !important;
}

.stats-grid .card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-accent);
  background: rgba(30, 61, 48, 0.6);
  box-shadow: var(--shadow-lg);
}

.stat-item {
  text-align: center;
}

.stat-item:nth-child(4) {
  animation-delay: 0.4s;
}

.stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  background: linear-gradient(135deg,
      var(--gold-accent),
      #f4d03f,
      var(--gold-accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  animation: gradientShift 3s ease infinite;
  transition: transform 0.4s ease;
}

@keyframes gradientShift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.stat-item:hover .stat-number {
  transform: scale(1.1);
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.stat-label {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
 * 12. TESTIMONIALS
 * ============================================================================= */

.testimonials {
  background: var(--bg-light);
  position: relative;
  overflow: hidden;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  perspective: 1000px;
  position: relative;
}

.testimonials-slider {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}

.testimonials-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  gap: var(--spacing-md);
}

.testimonial-slide {
  min-width: 100%;
  flex-shrink: 0;
}

.slider-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.slider-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
  color: var(--primary);
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.slider-btn:hover {
  background: var(--gold-accent);
  color: var(--white);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

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

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.slider-dot {
  width: 16px;
  height: 16px;
  margin: 0 10px;
  padding: 8px;
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  background: rgba(27, 77, 62, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    width 0.3s ease,
    border-radius 0.3s ease;
}

.slider-dot.active {
  background: var(--gold-accent);
  width: 30px;
  border-radius: 5px;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

.stagger-delay-1 {
  transition-delay: 0.1s;
}

.stagger-delay-2 {
  transition-delay: 0.2s;
}

.stagger-delay-3 {
  transition-delay: 0.3s;
}

.stagger-delay-4 {
  transition-delay: 0.4s;
}

.stagger-delay-5 {
  transition-delay: 0.5s;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  position: relative;
  transition:
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(212, 175, 55, 0.05),
      rgba(27, 77, 62, 0.05));
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.testimonial-card:nth-child(1) {
  animation-delay: 0.1s;
}

.testimonial-card:nth-child(2) {
  animation-delay: 0.2s;
}

.testimonial-card:nth-child(3) {
  animation-delay: 0.3s;
}

.testimonial-card:hover {
  transform: translateY(-10px) rotateY(5deg) scale(1.02);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 20px 60px rgba(27, 77, 62, 0.15),
    0 0 0 1px rgba(212, 175, 55, 0.2);
}

.testimonial-card:hover::before {
  opacity: 1;
}

.quote-icon {
  font-size: 3rem;
  color: var(--gold-accent);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-family: Georgia, serif;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.testimonial-card:hover .quote-icon {
  opacity: 0.6;
  transform: scale(1.1) rotate(-5deg);
}

.testimonial-text {
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: var(--spacing-sm);
  border-top: 2px solid var(--bg-light);
}

.testimonial-author strong {
  color: var(--primary);
}

.testimonial-author span {
  font-size: 0.875rem;
  color: var(--text-light);
}

.cta {
  background: linear-gradient(135deg, var(--forest-green), var(--sage-green));
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.3;
  animation: patternSlide 20s linear infinite;
}

@keyframes patternSlide {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(60px, 60px);
  }
}

.cta::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
      rgba(212, 175, 55, 0.15) 0%,
      transparent 70%);
  animation: rotateGradient 15s linear infinite;
}

@keyframes rotateGradient {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.cta-title {
  color: var(--white);
  margin-bottom: var(--spacing-sm);
}

.cta-description {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.95;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}

.cta-buttons .btn-secondary {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
}

/* =============================================================================
 * 13. FOOTER
 * ============================================================================= */

.footer {
  display: block;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: #0d2e26;
  color: #fff;
  position: relative;
  padding: var(--spacing-xl) 0 var(--spacing-md);
  flex-shrink: 0;
  margin-bottom: 0;
}

/* Hide newsletter section */
.footer-column:last-child {
  display: none;
}

.footer-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
      var(--primary),
      var(--gold-accent),
      var(--primary));
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.footer a:hover {
  color: var(--gold-accent);
}

.footer-title {
  color: var(--gold-accent);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  padding: var(--spacing-md) 0 0 0 !important;
  margin: 0 !important;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.9) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.footer-links li,
.footer-contact li {
  color: #ffffff !important;
  margin-bottom: 0.75rem;
  list-style: none !important;
}

.footer-links li::before,
.footer-contact li::before {
  content: none !important;
  display: none !important;
}

.footer-links li {
  margin-bottom: 0.85rem;
}

.footer-links a {
  color: #ffffff !important;
  color: rgba(255, 255, 255, 0.75);
  transition: var(--transition-fast);
  display: inline-block;
  position: relative;
}

.footer-links a:hover {
  color: var(--gold-accent);
  padding-left: 5px;
}

.footer-links a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: var(--gold-accent);
  transition: width var(--transition-fast);
}

.footer-links a:hover::before {
  width: 8px;
}

.footer-contact li {
  color: #ffffff !important;
  color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--gold-accent);
  padding-left: 5px;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 40px;
  height: 40px;
  background: rgba(27, 77, 62, 0.1);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-normal);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.social-link:hover {
  background: var(--gold-accent);
  color: var(--white);
  transform: translateY(-3px);
}

.newsletter-form {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--spacing-sm);
  align-items: stretch;
}

.newsletter-form input {
  flex: 1;
  padding: 0.875rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  background: var(--white);
  color: var(--text-primary);
  min-width: 0;
}

.newsletter-form button {
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-newsletter-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-md);
  padding-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0;
  opacity: 0.8;
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.footer-bottom-links a:hover {
  color: var(--gold-accent);
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.5);
  margin-top: 1rem;
  font-size: 0.9rem;
}

.value-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--gold-accent);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  transition:
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(212, 175, 55, 0.05),
      rgba(27, 77, 62, 0.05));
  opacity: 0;
  transition: opacity 0.6s ease;
}

.value-card:hover {
  transform: translateX(15px) translateY(-5px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 15px 50px rgba(27, 77, 62, 0.2);
  border-left-color: var(--primary);
  border-left-width: 6px;
}

.value-card:hover::before {
  opacity: 1;
}

.value-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.value-title {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

.stagger-children>*:nth-child(1) {
  transition-delay: 0.05s;
}

.stagger-children>*:nth-child(2) {
  transition-delay: 0.1s;
}

.stagger-children>*:nth-child(3) {
  transition-delay: 0.15s;
}

.stagger-children>*:nth-child(4) {
  transition-delay: 0.2s;
}

.stagger-children>*:nth-child(5) {
  transition-delay: 0.25s;
}

.stagger-children>*:nth-child(6) {
  transition-delay: 0.3s;
}

.stagger-children>*:nth-child(7) {
  transition-delay: 0.35s;
}

.stagger-children>*:nth-child(8) {
  transition-delay: 0.4s;
}

.about-content,
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.about-image {
  width: 100%;
  height: 400px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 4rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.faculty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.faculty-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.faculty-image {
  width: 100%;
  height: 250px;
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 5rem;
}

.faculty-info {
  padding: var(--spacing-md);
}

.faculty-name {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.faculty-title {
  color: var(--gold-accent);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.timeline {
  position: relative;
  padding: var(--spacing-md) 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--gold-accent);
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.timeline-content {
  width: 45%;
  background: var(--white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: auto;
}

.timeline-year {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-accent);
  font-family: var(--font-display);
}

.campus-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.campus-feature {
  background: var(--bg-light);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: var(--transition-normal);
}

.campus-feature:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.campus-feature-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* =============================================================================
 * 14. CONTACT & FORMS
 * ============================================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.contact-form {
  background: var(--white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.875rem;
  border: 2px solid var(--bg-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: var(--transition-normal);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-info-card {
  background: var(--bg-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.contact-info-card h3 {
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
}

.contact-item {
  display: flex;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.contact-icon {
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.map-container {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
 * 15. FAQ
 * ============================================================================= */

.faq-item {
  background: white;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border-left: 4px solid var(--primary);
  cursor: pointer;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-left-color: var(--gold-accent);
}

.faq-question {
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  color: var(--text-primary);
  line-height: 1.8;
}

.faq-toggle {
  color: var(--gold-accent);
  font-size: 1.5rem;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s ease;
}

details[open] .faq-toggle {
  transform: rotate(45deg);
}

.service-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  transition:
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border-top: 5px solid var(--primary);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(27, 77, 62, 0.05),
      rgba(212, 175, 55, 0.05));
  opacity: 0;
  transition: opacity 0.6s ease;
}

.service-card:hover {
  transform: translateY(-10px) scale(1.02);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 60px rgba(27, 77, 62, 0.15);
  border-top-width: 8px;
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
  color: var(--gold-accent);
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
  position: relative;
  z-index: 1;
}

.service-card:hover .service-icon {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 5px 15px rgba(212, 175, 55, 0.4));
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.sitemap-section {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sitemap-section h3 {
  color: var(--primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold-accent);
}

.sitemap-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.sitemap-links a {
  color: var(--text-primary);
  padding: 0.5rem 0;
  transition:
    color 0.3s,
    padding-left 0.3s;
  display: block;
}

.sitemap-links a:hover {
  color: var(--primary);
  padding-left: 10px;
}

.sitemap-links a::before {
  content: "\2192 ";
  color: var(--gold-accent);
  font-weight: bold;
}

.legal-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.legal-content p,
.legal-content ul {
  margin-bottom: 1rem;
  color: var(--text-color);
}

.legal-content ul {
  padding-left: 2rem;
}

html {
  scroll-padding-top: 116px;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-accent);
  vertical-align: middle;
  line-height: 1;
}

.icon svg {
  width: 1em;
  height: 1em;
}

.value-icon .icon,
.service-icon .icon,
.campus-feature-icon .icon,
.hadith-icon .icon,
.contact-icon .icon {
  color: var(--gold-accent);
}

.value-icon .icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.service-icon .icon svg {
  width: 3rem;
  height: 3rem;
}

.campus-feature-icon .icon svg {
  width: 2rem;
  height: 2rem;
}

.contact-icon .icon svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary);
}

.faculty-image .icon svg {
  width: 5rem;
  height: 5rem;
  color: var(--white);
  opacity: 0.8;
}

.about-image .icon svg {
  width: 4rem;
  height: 4rem;
  color: var(--primary);
}

[style*="font-size:3rem"] .icon svg,
[style*="font-size:3.5rem"] .icon svg {
  width: 3rem;
  height: 3rem;
}

.elementor-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}

.elementor-section:first-child,
.elementor-section:nth-child(2) {
  content-visibility: visible;
}

.text-center {
  text-align: center;
}

.text-light {
  color: var(--text-light);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.w-full {
  width: 100%;
}

.mb-2 {
  margin-bottom: 10px;
}

.mt-4 {
  margin-top: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =============================================================================
 * 16. FLOATING UI
 * Includes: .back-to-top, .fab-donate, .dark-mode-toggle
 * ============================================================================= */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    visibility 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    box-shadow 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 999;
  box-shadow: 0 6px 20px rgba(27, 77, 62, 0.35);
  overflow: hidden;
}

.back-to-top::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.3s ease;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: rippleEffect 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.btn,
.slider-btn,
.fab-donate,
.back-to-top {
  position: relative;
  overflow: hidden;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 12px 30px rgba(27, 77, 62, 0.45);
}

.back-to-top:hover::after {
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: translateY(-3px) scale(1.05);
}

.fab-donate {
  position: fixed;
  bottom: 95px;
  right: 30px;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, var(--gold-accent), #c9a227);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 998;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    box-shadow 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: fabPulse 2.5s ease-in-out infinite;
  overflow: visible;
}

.fab-donate::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.3s ease;
}

@keyframes fabPulse {

  0%,
  100% {
    box-shadow:
      0 6px 20px rgba(212, 175, 55, 0.45),
      0 0 0 0 rgba(212, 175, 55, 0.4);
  }

  50% {
    box-shadow:
      0 6px 20px rgba(212, 175, 55, 0.45),
      0 0 0 12px rgba(212, 175, 55, 0);
  }
}

.fab-donate:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6);
}

.fab-donate:hover::before {
  transform: scale(1.15);
}

.fab-donate:active {
  transform: translateY(-2px) scale(1.05);
}

.fab-tooltip {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%) translateX(5px);
  background: rgba(27, 77, 62, 0.95);
  color: var(--white);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
  font-size: 0.82rem;
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fab-tooltip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(27, 77, 62, 0.95);
}

.fab-donate:hover .fab-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* =============================================================================
 * 17. DARK MODE
 * ============================================================================= */

.dark-mode-toggle {
  position: fixed;
  top: 90px;
  right: 30px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid rgba(27, 77, 62, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 997;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.dark-mode-toggle::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:
    -webkit-mask-image 0.3s,
    mask-image 0.3s,
    background-color 0.3s,
    transform 0.4s ease;
}

body.dark-mode .dark-mode-toggle {
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(212, 175, 55, 0.3);
}

body.dark-mode .dark-mode-toggle::after {
  background-color: var(--gold-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

.dark-mode-toggle:hover {
  transform: scale(1.12) rotate(15deg);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
  border-color: var(--primary);
}

body.dark-mode .dark-mode-toggle:hover {
  border-color: var(--gold-accent);
}

body.dark-mode {
  --cream-bg: #121212;
  --white: #1e1e1e;
  --charcoal: #f0f0f0;
  --text-primary: #e0e0e0;
  --text-light: #aaaaaa;
  --bg-light: #121212;
  --section-bg: #121212;
  --card-bg: #1e1e1e;
  --navbar-bg: rgba(20, 20, 20, 0.95);
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .navbar {
  background: rgba(30, 30, 30, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .program-card,
body.dark-mode .testimonial-card,
body.dark-mode .service-card,
body.dark-mode .value-card {
  background: rgba(40, 40, 40, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.dark-mode .footer {
  background: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode .section-title,
body.dark-mode .program-title,
body.dark-mode .testimonial-text,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  color: #e0e0e0;
}

body.dark-mode .welcome {
  background: #1a1a1a;
}

@media (min-width: 992px) {
  .boarding-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
}

.campus-feature:hover .campus-feature-icon,
.campus-feature:hover .campus-feature-icon .icon,
.campus-feature:hover .campus-feature-icon svg {
  color: var(--white) !important;
  stroke: var(--white) !important;
}

@media (min-width: 768px) {
  .steps-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    max-width: 1000px;
    margin: 0 auto;
  }
}

.semester-card .semester-title {
  margin-bottom: 0.15rem !important;
}

.semester-card .semester-subtitle {
  margin-bottom: 0 !important;
  font-size: 0.9rem !important;
}

.timeline-item {
  padding-bottom: 1.25rem !important;
}

.timeline-item p {
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .welcome-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0;
    flex-direction: column;
    background-color: var(--white);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    text-align: center;
    transition: left 0.4s ease;
    box-shadow: var(--shadow-lg);
    padding: 100px 2rem 120px;
    gap: 0;
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-menu li {
    padding: 0.75rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }

  .nav-menu a {
    padding: 0.75rem 0.5rem !important;
    min-height: 44px;
    display: block;
    padding: 0.5rem 1rem;
    font-size: 1.05rem;
  }

  .nav-toggle {
    display: flex;
    z-index: 1001;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--bg-light);
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    display: none;
  }

  .dropdown.active .dropdown-menu {
    display: block;
  }

  .dropdown>a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .dropdown-arrow {
    transition: transform 0.3s ease;
  }

  .dropdown.active>a .dropdown-arrow {
    transform: rotate(180deg);
  }

  .newsletter-form {
    flex-direction: column;
    gap: 0.75rem;
  }

  .newsletter-form button {
    width: 100%;
    padding: 0.875rem;
  }

  .hero {
    padding-top: 100px;
    padding-left: 0;
    padding-right: 0;
  }

  .hero-content {
    padding: 0 1.5rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .programs-grid {
    grid-template-columns: 1fr;
  }

  .program-card {
    min-height: 480px;
  }

  .program-card-inner,
  .program-card-front,
  .program-card-back {
    min-height: 480px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .about-content,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-content {
    width: calc(100% - 60px);
    margin-left: 60px !important;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }

  .fab-donate {
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .fab-tooltip {
    display: none;
  }

  .dark-mode-toggle {
    top: 80px;
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .slider-controls {
    gap: 0.5rem;
  }

  .slider-btn {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .program-card {
    min-height: 350px;
  }
}

/* =============================================================================
 * 18. RESPONSIVE — Mobile (≤480px)
 * ============================================================================= */

@media (max-width: 480px) {
  :root {
    font-size: 14px;
  }

  .hero {
    padding-top: 90px;
    padding-left: 0;
    padding-right: 0;
  }

  .hero-content {
    padding: 0 1rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-form {
    flex-direction: column;
  }
}

.max-w-800-centered {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.max-w-900-centered-text-center {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.signup-title {
  color: var(--primary);
  margin-bottom: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.st-style-6 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.st-style-7 {
  color: var(--primary);
}

.bg-white-text-center {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-top: 4px solid var(--forest-green);
}

.text-forest {
  color: var(--forest-green);
}

.max-w-800-centered0 {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-top: 4px solid var(--sage-green);
}

.max-w-800-centered1 {
  color: var(--sage-green);
}

.max-w-800-centered2 {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-top: 4px solid var(--gold-accent);
}

.bg-white-text-center8 {
  background: var(--primary);
  color: white;
}

.bg-white-text-center9 {
  color: white;
}

.text-forest0 {
  color: rgba(255, 255, 255, 0.9);
}

.text-forest1 {
  background: white;
  color: var(--primary);
}

.text-forest7 {
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
}

.text-forest8 {
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
}

.text-forest9 {
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
}

.max-w-800-centered32 {
  background: var(--forest-green);
}

.max-w-800-centered33 {
  background: var(--sage-green);
}

.max-w-800-centered56 {
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
  color: white;
  padding: 3rem 2rem;
  border-radius: 12px;
  text-align: center;
}

.max-w-800-centered57 {
  color: white;
  margin-bottom: 1rem;
}

.max-w-800-centered58 {
  margin-bottom: 2rem;
  opacity: 0.9;
  font-size: 1.125rem;
}

.signup-title2 {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  align-items: center;
}

.max-w-800-centered59 {
  background: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  color: var(--white) !important;
}

.max-w-800-centered56 .btn-secondary {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--white) !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.max-w-800-centered56 .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--white) !important;
  transform: translateY(-3px);
}

.max-w-800-centered78 {
  background: var(--primary);
  color: white;
  padding: 2rem;
  border-radius: 8px;
  margin-top: 3rem;
  text-align: center;
}

.max-w-800-centered89 {
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
  color: white;
  padding: 3rem 2rem;
  border-radius: 12px;
  text-align: center;
  margin-top: 3rem;
}

.max-w-800-centered92 {
  background: var(--primary);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  margin-top: 2rem;
}

.max-w-900-centered-text-center16 {
  background: var(--primary);
}

.about-content,
.about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
  margin-top: var(--spacing-md);
}

.about-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.value-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--gold-accent);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.value-card:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--primary);
}

.value-icon {
  margin-bottom: var(--spacing-sm);
  color: var(--gold-accent);
}

.value-title {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.faculty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.faculty-card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.faculty-image {
  background: linear-gradient(135deg, var(--primary), var(--forest-green));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 120px;
}

.faculty-info {
  padding: 1.5rem;
}

.faculty-name {
  color: var(--primary);
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.faculty-title {
  color: var(--gold-accent);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.campus-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.campus-feature {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.campus-feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-accent);
}

.campus-feature-icon {
  margin-bottom: 0.75rem;
  color: var(--gold-accent);
}

.campus-feature strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-size: 1.05rem;
}

.campus-feature p {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 0;
}

.section {
  padding: var(--spacing-xl) 0;
  position: relative;
}

.section .section-title {
  margin-bottom: var(--spacing-sm);
}

.section .section-subtitle {
  margin-bottom: var(--spacing-lg);
}

.footer-tagline {
  color: var(--text-light);
  font-style: italic;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

.contact-form {
  background: var(--white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
  background: var(--white);
  color: var(--text-primary);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--gold-accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.service-card {
  background: var(--white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  text-align: center;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.service-icon {
  margin-bottom: var(--spacing-sm);
  color: var(--gold-accent);
}

@media (max-width: 992px) {

  .about-content,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .faculty-grid {
    grid-template-columns: 1fr;
  }

  .campus-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .campus-features {
    grid-template-columns: 1fr;
  }

  .section {
    padding: var(--spacing-lg) 0;
  }
}

.list-disc-styled {
  list-style: disc;
  padding-left: 20px;
  color: var(--text-primary);
}

.list-none-styled {
  list-style: none;
  padding: 0;
  color: var(--text-primary);
}

.bg-light {
  background: var(--bg-light);
}

.program-icon.primary-bg {
  background: var(--primary);
}

.section-title.left-align {
  text-align: left;
  margin-left: 0;
}

.hadith-box.border-secondary {
  border-left-color: var(--secondary);
}

.hadith-box.border-gold {
  border-left-color: var(--gold-accent);
}

#toast-container {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
  min-width: 300px;
  max-width: 90vw;
}

/* =============================================================================
 * 19. TOAST NOTIFICATIONS
 * ============================================================================= */

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition:
    opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: all;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast.toast-hiding {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
}

.toast-success {
  border-left: 4px solid #27ae60;
}

.toast-error {
  border-left: 4px solid var(--gold-accent);
}

.toast-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--charcoal);
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 0.85rem;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  flex-shrink: 0;
}

.toast-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--charcoal);
}

.field-error {
  border-color: var(--gold-accent) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
  animation: shakeField 0.4s ease;
}

@keyframes shakeField {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .navbar {
  background: rgba(20, 20, 20, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .nav-menu a {
  padding: 0.75rem 0.5rem !important;
  min-height: 44px;
  color: #d0d0d0;
}

body.dark-mode .dropdown-menu {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .welcome,
body.dark-mode .programs,
body.dark-mode .testimonials {
  background: #1a1a1a;
}

body.dark-mode .program-card,
body.dark-mode .testimonial-card,
body.dark-mode .service-card,
body.dark-mode .value-card,
body.dark-mode .hadith-box,
body.dark-mode .contact-form {
  background: rgba(30, 30, 30, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.dark-mode .program-card:hover,
body.dark-mode .testimonial-card:hover {
  background: rgba(40, 40, 40, 0.95);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
  color: #f0f0f0;
}

body.dark-mode .text-light,
body.dark-mode .section-subtitle,
body.dark-mode .program-description,
body.dark-mode .testimonial-text {
  color: #aaa;
}

body.dark-mode .footer {
  background: #0d0d0d !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title,
body.dark-mode .hero-title,
body.dark-mode .contact-info-card h3,
body.dark-mode .featured-title {
  color: #ffffff !important;
}

body.dark-mode strong,
body.dark-mode label,
body.dark-mode .contact-item strong {
  color: #d4af37 !important;
}

body.dark-mode .section,
body.dark-mode .hero-inner,
body.dark-mode .contact-info-card,
body.dark-mode .card,
body.dark-mode .st-style-70,
body.dark-mode .max-w-900-centered-text-center2,
body.dark-mode .welcome,
body.dark-mode .programs,
body.dark-mode .testimonials {
  background-color: #121212 !important;
  background-image: none !important;
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .contact-form select {
  background: #242424 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.section-py {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

@media (max-width: 992px) {
  .section-py {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
}

.timeline-item {
  padding-bottom: var(--spacing-md);
  border-left: 2px solid var(--gold-accent);
  padding-left: 20px;
  margin-left: 10px;
  position: relative;
}

.timeline-item h4 {
  color: var(--gold-accent);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  font-size: 1.1rem;
}

.curriculum-list li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

body.dark-mode .newsletter-form input {
  background: #222;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

body.dark-mode .toast {
  background: rgba(30, 30, 30, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .toast-message {
  color: #e0e0e0;
}

body.dark-mode .navbar,
body.dark-mode .program-card,
body.dark-mode .testimonial-card,
body.dark-mode .service-card,
body.dark-mode .value-card,
body.dark-mode .hadith-box,
body.dark-mode .footer,
body.dark-mode .welcome,
body.dark-mode .programs,
body.dark-mode .testimonials,
body.dark-mode .section,
body.dark-mode .contact-form {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

body.dark-mode .program-card,
body.dark-mode .testimonial-card {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 480px) {
  #toast-container {
    bottom: 20px;
    min-width: 0;
    width: 90vw;
    left: 5vw;
    transform: none;
  }
}

.testimonials-slider {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  padding: 2rem 1rem;
}

.testimonials-slider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: 100%;
  background: var(--bg-light);
  z-index: 2;
}

.testimonials-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100vw;
  background: var(--bg-light);
  z-index: 2;
}

.testimonials-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.testimonial-slide {
  min-width: 100%;
  flex: 0 0 100%;
  padding: 0 10px;
  display: flex;
  justify-content: center;
}

.testimonial-slide .testimonial-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.slider-controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
  padding: 0 10px;
}

.slider-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--primary);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.slider-btn:hover {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.1);
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}

.slider-dot {
  width: 16px;
  height: 16px;
  margin: 0 10px;
  padding: 8px;
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
  padding: 0;
}

.slider-dot.active {
  background: var(--primary);
  transform: scale(1.2);
}

@media (max-width: 992px) {
  .slider-controls {
    display: none;
  }

  .slider-dots {
    margin-top: 1.5rem;
  }

  .program-card {
    min-height: 650px;
  }
}

.contact-info-card {
  background: var(--white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  height: 100%;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  transition: transform var(--transition-normal);
}

.contact-item:hover {
  transform: translateX(10px);
}

.contact-icon {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.contact-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--white);
  stroke-width: 2;
  fill: none;
  transition: stroke var(--transition-normal);
}

.contact-item:hover .contact-icon {
  background: var(--accent);
  transform: scale(1.1) rotate(15deg);
  box-shadow: var(--shadow-md);
}

.contact-info-card h3 {
  margin-bottom: var(--spacing-md);
  color: var(--primary);
  font-size: 1.5rem;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.contact-item strong {
  display: block;
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.contact-item p {
  margin: 0;
  color: var(--text-light);
  line-height: 1.6;
}

.contact-item a {
  color: var(--primary);
  font-weight: 600;
}

.contact-item a:hover {
  color: var(--accent);
}

.welcome-content.bg-white-text-center2 {
  display: block;
  width: 100%;
}

.welcome-text.bg-white-text-center3 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.programs-grid.bg-white-text-center5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  width: 100%;
  margin-top: var(--spacing-md);
  text-align: left;
}

.bg-white-text-center6,
.bg-white-text-center8,
.bg-white-text-center5 .program-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 380px;
}

.bg-white-text-center5 .program-card:not(:has(.program-card-inner)) {
  padding: 2rem 2rem 1.75rem;
}

.bg-white-text-center7 {
  margin-top: auto;
  padding-top: var(--spacing-sm);
  text-align: center;
}

.stats {
  background: var(--primary);
  color: var(--white);
  padding: var(--spacing-xl) 0;
}

.text-forest2 {
  background: rgba(255, 255, 255, 0.05);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 900px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  color: var(--white);
}

.text-forest3 {
  list-style: none !important;
  padding: 0 !important;
}

.text-forest4,
.text-forest5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1.15rem;
}

.text-forest4 strong,
.text-forest5 strong {
  color: var(--accent) !important;
  font-weight: 600;
}

.text-forest4 span,
.text-forest5 span {
  color: var(--white) !important;
}

.text-forest6 {
  margin-top: var(--spacing-md);
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  text-align: center;
}

.text-forest6 p {
  margin: 0;
  color: #e0e0e0;
  font-size: 1.1rem;
}

.text-forest6 .st-style-7 {
  color: var(--accent) !important;
  font-size: 1.3rem;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .programs-grid.bg-white-text-center5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .programs-grid.bg-white-text-center5 {
    grid-template-columns: 1fr;
  }

  .text-forest4,
  .text-forest5 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.hero-title,
.max-w-800-centered05 {
  font-weight: 800 !important;
  color: var(--primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hero-title {
  font-size: clamp(1.8rem, 8vw, 3.5rem) !important;
}

.section-title {
  font-size: 3rem;
}

.navbar .nav-container {
  padding: 0.75rem 2rem;
  height: auto;
}

.logo-img {
  height: 85px;
  width: auto;
  object-fit: contain;
}

.hero-buttons-secondary {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.btn-secondary-outline {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  backdrop-filter: blur(5px);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.btn-secondary-outline:hover {
  background: var(--gold-accent);
  color: var(--primary);
  border-color: var(--gold-accent);
  transform: translateY(-3px);
}

.event-slider-section {
  padding: 5rem 0;
  background: var(--bg-light);
  width: 100%;
  overflow: hidden;
}

/* =============================================================================
 * 20. SLIDER / CAROUSEL
 * ============================================================================= */

.slider-container {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 500px;
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 5% !important;
  overflow: hidden;
}

.slide-bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(50px) brightness(0.8) !important;
  transform: scale(1.2);
  opacity: 0.8 !important;
  z-index: 1;
}

.slide-img-content {
  position: relative;
  z-index: 2;
  max-height: 85%;
  max-width: 55%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  margin: 0 !important;
  margin-left: 0 !important;
  border-radius: 10px;
}

.slide-info {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
  height: 100%;
  padding: 2.5rem 2rem;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75), transparent);
  color: var(--white);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-info h3 {
  color: var(--white);
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.slide-info p,
.slide-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
}

.slider-arrow:hover {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
}

.slider-arrow.prev {
  left: 1rem;
}

.slider-arrow.next {
  right: 1rem;
}

.slider-dots-nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.slider-dot-nav {
  width: 16px;
  height: 16px;
  margin: 0 10px;
  padding: 8px;
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid var(--primary);
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.slider-dot-nav.active {
  background: var(--primary);
  transform: scale(1.35);
}

.testimonials-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 3rem;
}

.testimonials-track {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.testimonial-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
}

.testimonial-slide .testimonial-card {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.slider-controls {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

.slider-btn {
  background: var(--white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--primary);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.slider-btn:hover {
  background: var(--primary);
  color: var(--white);
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.slider-dot {
  width: 16px;
  height: 16px;
  margin: 0 10px;
  padding: 8px;
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background-color 0.3s ease,
    width 0.3s ease,
    border-radius 0.3s ease;
}

.slider-dot.active {
  background: var(--gold-accent);
  transform: scale(1.2);
}

@media (max-width: 992px) {
  .slider-container {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px;
  }

  .slide {
    flex-direction: column !important;
    height: auto !important;
    min-height: 420px;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .slide-img-content {
    max-width: 80% !important;
    width: auto !important;
    max-height: 240px !important;
    margin: 2rem auto 0 !important;
    display: block !important;
  }

  .slide-info {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;
    padding: 1.5rem !important;
    text-align: center;
    justify-content: flex-start !important;
    margin-top: auto;
  }

  .slide-info h3 {
    font-size: 1.2rem !important;
    color: var(--white) !important;
    margin-bottom: 0.5rem !important;
  }

  .slide-info p {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .slider-arrow {
    display: none !important;
  }

  .testimonial-slide .testimonial-card {
    max-width: 100%;
  }
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 400px));
  gap: var(--spacing-md);
  justify-content: center !important;
}

.footer .social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer .social-link svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
  margin: 0 !important;
}

.value-icon,
.campus-feature-icon,
.faculty-image,
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(27, 77, 62, 0.08);
  border: 1px solid rgba(27, 77, 62, 0.1);
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  color: var(--primary);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    transform 0.4s ease;
}

.value-icon svg,
.campus-feature-icon svg,
.faculty-image svg,
.stat-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5px;
}

.value-card:hover .value-icon,
.campus-feature:hover .campus-feature-icon {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
  color: var(--white);
  transform: rotate(10deg);
}

.value-card:hover .value-icon .icon,
.campus-feature:hover .campus-feature-icon .icon {
  color: var(--white);
}

.footer .social-link {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.footer .social-link svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: block !important;
  margin: 0 auto !important;
}

@media screen and (min-width: 993px) {
  .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    height: auto !important;
    width: auto !important;
  }

  .nav-toggle {
    display: none !important;
  }
}

@media screen and (max-width: 992px) {
  .nav-toggle {
    display: flex !important;
  }

  .logo-img {
    height: 45px !important;
  }
}

.card.max-w-800-centered00 {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card.max-w-800-centered00:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--gold-accent);
}

.featured-overlap {
  margin-top: -50px;
  position: relative;
  z-index: 10;
  padding-bottom: 3rem;
}

.featured-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

.featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-label {
  color: var(--gold-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.featured-title {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.featured-desc {
  margin-bottom: 2rem;
  color: var(--text-light);
  font-size: 1.1rem;
}

.featured-actions {
  display: flex;
  gap: 1rem;
}

@media (max-width: 992px) {
  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-img {
    height: 300px;
  }

  .featured-title {
    font-size: 2rem;
  }
}

.event-card-img-wrapper {
  width: 100%;
  height: 450px;
  overflow: hidden;
  position: relative;
  background-color: #f8f8f8;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-card-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card.max-w-800-centered00:hover .event-card-img-wrapper img {
  transform: scale(1.05);
}

.event-card-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.event-card-footer {
  padding: 0 2rem 2rem;
}

.max-w-800-centered3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.home-events {
  background-color: var(--bg-light);
  position: relative;
  padding: var(--spacing-xl) 0;
}

.home-events::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://seminaryofsk.com/wp-content/uploads/2026/05/pattern-bg.png");
  opacity: 0.05;
  pointer-events: none;
}

@media (max-width: 992px) {
  .terms-content {
    grid-template-columns: 1fr;
  }
}

.video-section {
  padding: var(--spacing-xl) 0;
}

.video-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid rgba(212, 175, 55, 0.2);
  transition:
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s ease;
  background: #000;
  line-height: 0;
}

.video-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(27, 77, 62, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
}

.video-player {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
}

.video-caption {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-light);
  font-size: 1.1rem;
  font-style: italic;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.video-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 992px) {
  .video-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.semester-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.semester-card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 4px solid var(--primary);
  transition: transform 0.3s ease;
}

.semester-card:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

.semester-title {
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.semester-subtitle {
  font-size: 0.9rem;
  color: var(--text-light);
  margin: 0;
}

.semester-date {
  background: var(--bg-light);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  color: var(--primary);
  font-size: 0.95rem;
  white-space: nowrap;
  margin-left: 1rem;
}

@media (max-width: 480px) {
  .semester-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .semester-date {
    margin-left: 0;
  }
}

.campus-feature-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
  margin-bottom: 4rem;
}

.campus-feature-row:nth-child(even) .campus-feature-text {
  order: 2;
}

.campus-feature-row:nth-child(even) .campus-feature-image {
  order: 1;
}

.campus-feature-image .image-zoom-wrapper {
  max-height: 400px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.campus-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 400px;
}

.campus-feature-text h3 {
  color: var(--primary);
  margin-bottom: 1.5rem;
}

@media (max-width: 992px) {
  .campus-feature-row {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .campus-feature-row:nth-child(even) .campus-feature-text {
    order: 1;
  }

  .campus-feature-row:nth-child(even) .campus-feature-image {
    order: 2;
  }
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.testimonial-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--gold-accent);
}

.quote-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(212, 175, 55, 0.1);
  z-index: 0;
}

.testimonial-content {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
}

.testimonial-content p {
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-dark);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-info strong {
  display: block;
  color: var(--primary);
  font-size: 1.1rem;
}

.author-info span {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.terms-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.terms-section {
  background: var(--white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border-top: 4px solid var(--primary);
  height: 100%;
}

.terms-section h2,
.terms-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.terms-subsection {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--bg-light);
}

@media (max-width: 992px) {
  .terms-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .max-w-800-centered3 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .max-w-800-centered4,
  .max-w-800-centered9 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  .max-w-900-centered-text-center1 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .max-w-800-centered5,
  .max-w-800-centered6,
  .max-w-800-centered8 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

@media (max-width: 992px) {
  .max-w-800-centered3 {
    grid-template-columns: 1fr !important;
  }
}

.whatsapp-cta-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  min-height: 400px;
  position: relative;
  z-index: 2;
}

.whatsapp-cta-slide .whatsapp-icon-large {
  width: 80px;
  height: 80px;
  color: #fff;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
  animation: pulse-wa 2s ease-in-out infinite;
}

@keyframes pulse-wa {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.whatsapp-cta-slide h3 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.whatsapp-cta-slide p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 500px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.whatsapp-cta-slide .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #25d366;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.whatsapp-cta-slide .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  background: #f0f0f0;
}

.elementor-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.elementor-row,
.elementor-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.site {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.bismillah {
  font-family: "Amiri", serif;
  font-size: 24px;
  color: #d4af37;
  margin-bottom: 20px;
  line-height: 1.2;
}

.elementor-widget-text-editor_inner {
  padding: 0 !important;
}

.site-content,
.site-main {
  padding-top: 0 !important;
}

.elementor-column {
  padding: 0 !important;
}

body.page-template-default .site-content>.container,
body.page .site-content>.container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.page-title {
  display: none !important;
}

body.page-template-default .entry-content,
body.page .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.adm-hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #0d2e26 0%, #1b4d3e 60%, #2c5f2d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 60px;
}

.adm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
}

.adm-hero::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #faf8f3);
}

.adm-hero-tag {
  font-size: 0.75rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin-bottom: 2rem;
  font-weight: 600;
  opacity: 0.9;
  animation: fadeInUp 0.8s ease;
  position: relative;
  z-index: 2;
}

.adm-hero h1 {
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 0.9;
  color: #fff !important;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease 0.15s both;
  position: relative;
  z-index: 2;
}

.adm-hero p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.75) !important;
  max-width: 600px;
  margin: 0 auto 3rem;
  animation: fadeInUp 1s ease 0.3s both;
  position: relative;
  z-index: 2;
}

.adm-hero-btns {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp 1s ease 0.45s both;
  position: relative;
  z-index: 2;
}

.btn-gold {
  background: var(--gold-accent);
  color: #0d2e26 !important;
  padding: 1.1rem 3rem;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 2px solid var(--gold-accent);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
  display: inline-block;
}

.btn-gold:hover {
  background: transparent;
  color: var(--gold-accent) !important;
  transform: translateY(-3px);
}

.btn-outline-white {
  background: transparent;
  color: #fff !important;
  padding: 1.1rem 3rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
  display: inline-block;
}

.btn-outline-white:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-3px);
}

.adm-stats-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin: -40px auto 0;
  padding: 0 2rem;
}

.adm-stat {
  background: #fff;
  border: 1px solid rgba(212, 175, 55, 0.15);
  padding: 3rem 2rem;
  text-align: center;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.adm-stat:nth-child(2) {
  background: var(--gold-accent);
}

.adm-stat:nth-child(2) .adm-stat-num,
.adm-stat:nth-child(2) .adm-stat-lbl {
  color: #0d2e26 !important;
}

.adm-stat:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.adm-stat-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: #0d2e26 !important;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.adm-stat-lbl {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
}

.adm-programs {
  padding: 8rem 0;
  background: #faf8f3;
}

.adm-programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  margin-top: 5rem;
}

.adm-prog-card {
  background: #fff;
  padding: 4rem 3rem;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.adm-prog-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.adm-prog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.adm-prog-card:hover::before {
  transform: scaleX(1);
}

.adm-prog-num {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(13, 46, 38, 0.04) !important;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.adm-prog-card h3 {
  font-size: 1.75rem;
  color: #0d2e26 !important;
  margin-bottom: 1rem;
}

.adm-prog-card p {
  color: var(--text-light) !important;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.adm-prog-tag {
  display: inline-block;
  background: rgba(27, 77, 62, 0.07);
  color: #1b4d3e;
  padding: 0.35rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

.adm-process {
  padding: 8rem 0;
  background: #0d2e26 !important;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.adm-process::before {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(212, 175, 55, 0.08) 0%,
      transparent 70%);
}

.adm-steps {
  margin-top: 5rem;
}

.adm-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
  opacity: 1;
  transition: opacity 0.4s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 4rem;
}

.adm-step:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.adm-step-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 900;
  color: var(--gold-accent) !important;
  line-height: 1;
}

.adm-step h4,
.adm-step p {
  color: #fff !important;
}

.adm-step h4 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.adm-step p {
  line-height: 1.8;
  font-size: 1.05rem;
  margin-bottom: 0;
}

.adm-process .section-title {
  color: #fff !important;
}

.adm-process .section-title::after {
  background: linear-gradient(90deg,
      transparent,
      var(--gold-accent),
      transparent) !important;
}

.adm-docs {
  padding: 8rem 0;
  background: #faf8f3;
}

.adm-docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 5rem;
}

.adm-doc-card {
  background: #fff;
  padding: 4rem;
  border-top: 3px solid var(--gold-accent);
}

.adm-doc-card h3 {
  font-size: 1.75rem;
  color: #0d2e26 !important;
  margin-bottom: 2rem;
}

.doc-list {
  list-style: none;
  padding: 0;
}

.doc-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--charcoal) !important;
}

.doc-icon {
  color: var(--gold-accent);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.adm-cta {
  padding: 10rem 0;
  text-align: center;
  background: linear-gradient(135deg, #1b4d3e 0%, #0d2e26 100%) !important;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.adm-cta::before {
  content: "بِسْمِ ٱللَّهِ";
  position: absolute;
  font-family: var(--font-arabic);
  font-size: 15rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.adm-cta h2,
.adm-cta p {
  color: #fff !important;
}

.adm-cta h2 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 2rem;
}

.adm-cta p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 4rem;
}

.adm-contact {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.adm-contact-item {
  text-align: center;
}

.adm-contact-item a {
  color: var(--gold-accent) !important;
  font-size: 1.3rem;
  font-weight: 700;
}

.adm-contact-lbl {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  display: block;
  margin-bottom: 0.5rem;
}

@media (max-width: 992px) {
  .adm-docs-grid {
    grid-template-columns: 1fr;
  }

  .adm-stat {
    padding: 2rem 1rem;
  }

  .adm-stat-num {
    font-size: 2.5rem;
  }

  .adm-step {
    grid-template-columns: 50px 1fr;
    gap: 1.5rem;
  }

  .adm-step-num {
    font-size: 2.5rem;
  }

  .adm-prog-card {
    padding: 2.5rem 2rem;
  }

  .adm-doc-card {
    padding: 2.5rem 2rem;
  }

  .adm-stats-wrap {
    padding: 0 1rem;
  }

  .adm-contact {
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .adm-hero h1 {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }

  .adm-hero-btns {
    flex-direction: column;
    align-items: center;
  }

  .adm-stats-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

body.dark-mode .adm-hero::after {
  background: linear-gradient(to bottom, transparent, #121212);
}

body.dark-mode .adm-programs,
body.dark-mode .adm-docs,
body.dark-mode .event-slider-section,
body.dark-mode .elementor-section_0,
body.dark-mode .site-content {
  background-color: #121212 !important;
}

html:has(body.dark-mode) {
  background-color: #121212;
}

body.dark-mode .adm-stat,
body.dark-mode .adm-prog-card,
body.dark-mode .adm-doc-card,
body.dark-mode .card.max-w-800-centered00,
body.dark-mode .featured-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .adm-stat-num,
body.dark-mode .adm-prog-card h3,
body.dark-mode .adm-doc-card h3,
body.dark-mode .max-w-800-centered05 {
  color: var(--gold-accent) !important;
}

body.dark-mode .adm-stat-lbl,
body.dark-mode .adm-prog-card p,
body.dark-mode .section-subtitle,
body.dark-mode .text-light,
body.dark-mode .footer-newsletter-text {
  color: #aaa !important;
}

body.dark-mode .adm-prog-num {
  color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .doc-list li {
  color: #e0e0e0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .alim-audience-item,
body.dark-mode .event-card-content,
body.dark-mode .lead {
  color: #f0f0f0 !important;
}

body.dark-mode .event-badge {
  background: rgba(212, 175, 55, 0.2) !important;
  color: var(--gold-accent) !important;
}

body.dark-mode .hero-inner .hero-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .btn-gold {
  background: var(--gold-accent) !important;
  color: #0d2e26 !important;
}

body.dark-mode .btn-outline-white {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

body.dark-mode .btn-gold:hover {
  background: transparent !important;
  color: var(--gold-accent) !important;
}

body.dark-mode .section-title[style*="var(--white)"],
body.dark-mode .section-title[style*="#fff"],
body.dark-mode .section-title[style*="white"] {
  color: #ffffff !important;
}

body.dark-mode .card,
body.dark-mode .program-card,
body.dark-mode .adm-stat,
body.dark-mode .adm-prog-card,
body.dark-mode .adm-doc-card,
body.dark-mode .faq-item {
  background-color: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e0e0e0 !important;
}

body.dark-mode .faq-item {
  border-left: 4px solid var(--gold-accent) !important;
}

body.dark-mode .faq-question {
  color: #ffffff !important;
}

body.dark-mode .faq-answer {
  color: #cccccc !important;
}

body.dark-mode .card li,
body.dark-mode .card p,
body.dark-mode .stats-grid li {
  color: #d0d0d0 !important;
}

body.dark-mode .hadith-box {
  background: #151515 !important;
  border-left: 4px solid var(--gold-accent) !important;
}

body.dark-mode .hadith-text {
  color: #f0f0f0 !important;
}

body.dark-mode #eventSlider .slide-bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(50px) brightness(0.8) !important;
  transform: scale(1.2);
  opacity: 0.8 !important;
  z-index: 1;
}

body.dark-mode #eventSlider .slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: none !important;
  z-index: 1 !important;
}

body.dark-mode #eventSlider .slide-info {
  background: linear-gradient(to left,
      rgba(0, 0, 0, 0.95),
      transparent) !important;
  z-index: 10 !important;
}

body.dark-mode #eventSlider .slide-info h3 {
  color: #ffffff !important;
  font-size: 2rem !important;
  text-shadow:
    0 0 20px #000,
    0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode #eventSlider .slide-info p,
body.dark-mode #eventSlider .slide-info .slide-description,
body.dark-mode #eventSlider .slide-info div {
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow:
    0 0 15px #000,
    0 1px 5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode #eventSlider .btn-primary {
  background-color: #d4af37 !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
  font-weight: 800 !important;
}

body.dark-mode .nav-menu li a {
  color: #e0e0e0 !important;
}

body.dark-mode .nav-menu li a:hover {
  color: var(--gold-accent) !important;
}

.hifdh-text {
  text-transform: none !important;
}

.breadcrumbs {
  padding: 1.25rem 0;
  background: #fdfcf9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .breadcrumbs {
  background: #1a1a1a;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  color: var(--text-light);
}

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin-left: 0.75rem;
  color: var(--text-light);
  opacity: 0.5;
  font-size: 1.1rem;
}

.breadcrumbs a {
  color: var(--gold-accent);
  text-decoration: none;
  transition:
    color 0.3s ease,
    text-decoration 0.3s ease;
  font-weight: 500;
}

.breadcrumbs a:hover {
  color: #0d2e26;
  text-decoration: underline;
}

body.dark-mode .breadcrumbs a:hover {
  color: #fff;
}

.btn-sm {
  padding: 0.6rem 1.5rem !important;
  font-size: 0.8rem !important;
  letter-spacing: 1px;
}

body.dark-mode .elementor-section_0,
body.dark-mode .event-slider-section {
  background-color: #121212 !important;
}

body.dark-mode #eventSlider .slide-info h2,
body.dark-mode #eventSlider .slide-info h3,
body.dark-mode #eventSlider .slide-info .slide-description,
body.dark-mode #eventSlider .slide-info div,
body.dark-mode #eventSlider .slide-info p,
body.dark-mode .elementor-widget-text-editor {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9) !important;
}

:focus-visible {
  outline: 3px solid var(--gold-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.btn:focus-visible {
  outline: 3px solid var(--gold-accent);
  outline-offset: 4px;
}

.nav-menu a:focus-visible {
  outline: 3px solid var(--gold-accent);
  outline-offset: 4px;
}

.slider-btn:focus-visible,
.back-to-top:focus-visible,
.fab-donate:focus-visible,
.dark-mode-toggle:focus-visible {
  outline: 3px solid var(--gold-accent);
  outline-offset: 4px;
}

.faq-item:focus-visible {
  outline: 3px solid var(--gold-accent);
  outline-offset: 2px;
}

.nav-donate-btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.footer-links a:focus-visible {
  outline: 3px solid var(--gold-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-progress {
    transition: none;
  }

  .hero::before,
  .hero::after {
    animation: none;
  }

  .bismillah,
  .hero-title,
  .hero-subtitle,
  .hero-tagline,
  .hero-description,
  .hero-buttons,
  .hero-scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .section-title::after {
    animation: none;
  }

  .fab-donate {
    animation: none;
  }

  .featured-badge {
    animation: none;
  }

  .scroll-indicator::after {
    animation: none;
  }

  .stat-number {
    animation: none;
  }

  .cta::before,
  .cta::after {
    animation: none;
  }

  .adm-hero-tag,
  .adm-hero h1,
  .adm-hero p,
  .adm-hero-btns {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream-bg: #121212;
    --white: #1e1e1e;
    --charcoal: #f0f0f0;
    --text-primary: #e0e0e0;
    --text-light: #aaaaaa;
    --bg-light: #1a1a1a;
    --section-bg: #121212;
    --card-bg: #1e1e1e;
    --navbar-bg: rgba(20, 20, 20, 0.95);
  }

  html {
    background-color: #121212;
  }

  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .section-title,
  .hero-title,
  .program-title,
  .testimonial-text,
  .featured-title {
    color: #ffffff !important;
  }

  p,
  span,
  li,
  .event-meta {
    color: #f0f0f0 !important;
  }

  strong,
  label,
  .contact-item strong {
    color: var(--gold-accent) !important;
  }

  .section-subtitle,
  .text-light,
  .program-description {
    color: #aaaaaa !important;
  }

  .program-card.featured {
    background: linear-gradient(135deg,
        rgba(30, 30, 30, 0.9),
        rgba(212, 175, 55, 0.1)) !important;
    border-color: var(--gold-accent) !important;
  }

  .hadith-box {
    background: #151515 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .hadith-text {
    color: #f0f0f0 !important;
  }

  .nav-menu a {
    padding: 0.75rem 0.5rem !important;
    min-height: 44px;
    color: #d0d0d0 !important;
  }

  .dropdown-menu {
    background: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select,
  .newsletter-form input {
    background: #242424 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .toast {
    background: rgba(30, 30, 30, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .toast-message {
    color: #e0e0e0 !important;
  }
}

.newsletter-form button {
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}

.newsletter-form input:focus {
  border-color: var(--gold-accent) !important;
  outline: none !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode .event-meta {
  color: #f0f0f0 !important;
}

body.dark-mode .section-subtitle {
  color: #d0d0d0 !important;
}

body.dark-mode .program-card.featured {
  background: linear-gradient(135deg,
      rgba(30, 30, 30, 0.9),
      rgba(212, 175, 55, 0.1)) !important;
  border-color: var(--gold-accent) !important;
}

@media (min-width: 992px) {
  .events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .event-card {
    display: grid !important;
    grid-template-columns: 400px 1fr !important;
    align-items: center;
    overflow: hidden;
  }

  .event-card-img-wrapper {
    height: 100% !important;
    border-radius: 12px 0 0 12px !important;
  }

  .event-card-img-wrapper img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .academic-programs .events-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .academic-programs .event-card {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
}


/* =============================================================================
 * 21. RESPONSIVE — Tablet and below (≤992px)
 * ============================================================================= */

/* ============================================
   WHATSAPP SLIDE — classes replacing inline styles (Bug Fix)
   ============================================ */
.slide-whatsapp .slide-wa-bg {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 40%, #25d366 100%);
  opacity: 1;
}

.slide-wa-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  min-height: 100%;
  width: 100%;
}

.slide-wa-icon {
  width: 72px;
  height: 72px;
  color: #fff;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  animation: pulse-wa 2s ease-in-out infinite;
}

@keyframes pulse-wa {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.slide-wa-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: #fff;
  margin: 0 0 0.75rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.slide-wa-text {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 480px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

.slide-wa-btn {
  background: #fff;
  color: #075e54;
  font-weight: 700;
  padding: 0.9rem 2.25rem;
  border-radius: 50px;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  gap: 0.5rem;
}

.slide-wa-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

body.dark-mode .slide-wa-title,
body.dark-mode .slide-wa-text {
  color: #fff !important;
}

/* ============================================
   SITE-WIDE MOBILE MARGIN / PADDING FIXES
   Applies to all pages — prevents horizontal
   overflow and ensures proper edge spacing.
   v2.1.0 — Expanded coverage for all page layouts
   ============================================ */

/* === TABLET & BELOW (≤992px) === */
@media (max-width: 992px) {

  /* Global overflow prevention */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  /* Container safe padding on mobile */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box !important;
  }

  /* Sections — reduce excessive vertical padding */
  .section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .section.bg-primary {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Hero inner padding compensation */
  .hero,
  .hero-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hero-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
  }

  .hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.25rem) !important;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  /* Programs grid — 3-col → 1-col */
  .programs-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .program-card {
    margin: 0 !important;
  }

  /* Academic Programs 3-col → 1-col on mobile */
  .academic-programs {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* About page grid */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .about-img-box {
    max-width: 100% !important;
  }

  .mission-vision {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .mission-card,
  .vision-card {
    padding: 2rem !important;
  }

  /* Faculty grid */
  .faculty-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Testimonials grid */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .stats {
    padding: 3rem 0 !important;
  }

  /* Value cards / features grid */
  .values-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Event slider / campus feature rows */
  .campus-features {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .campus-feature-row {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .campus-feature-image .image-zoom-wrapper {
    max-height: 280px;
  }

  .campus-feature-image img {
    max-height: 280px;
    width: 100% !important;
  }

  .campus-feature-text {
    padding: 1rem 0 !important;
  }

  /* Donate page — bank details */
  .bank-details {
    padding: 1.5rem !important;
    margin: 2rem auto 0 !important;
  }

  .bank-details-list li {
    flex-direction: column !important;
    gap: 0.25rem;
    text-align: left !important;
    padding: 0.75rem 0 !important;
  }

  /* Contact page */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .contact-form {
    padding: 1.5rem !important;
  }

  /* FAQ page */
  .faq-grid {
    grid-template-columns: 1fr !important;
  }

  /* Admissions page */
  .admissions-grid,
  .process-steps {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .step-card {
    padding: 1.5rem !important;
  }

  /* Scholarships */
  .scholarships-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Footer columns stack cleanly */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .social-links {
    justify-content: flex-start !important;
  }

  /* CTA section */
  .cta .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .cta-buttons .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  /* Slide / slider container */
  .slider-container,
  .event-slider-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Section intro / lead text */
  .section-intro {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Welcome section layout */
  .welcome-content {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .welcome-text,
  .hadith-box {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Image containers */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* === SMALL PHONE (≤480px) === */
@media (max-width: 480px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .hero-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .hero-title {
    font-size: 1.6rem !important;
  }

  /* Prevent any child from punching through viewport edge */
  body {
    overflow-x: hidden !important;
  }

  /* Footer bottom stacking */
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Program card padding reduction */
  .program-card .program-card-front,
  .program-card .program-card-back {
    padding: 1.25rem !important;
  }

  .program-features {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  .feature-tag {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Bank details mobile */
  .bank-details {
    padding: 1rem !important;
  }

  /* Section title sizing */
  .section-title {
    font-size: clamp(1.4rem, 5vw, 1.75rem) !important;
  }

  .section-subtitle {
    font-size: 0.95rem !important;
  }

  /* Slide info text */
  .slide-info h3 {
    font-size: 1.1rem !important;
  }

  .slide-info p {
    font-size: 0.85rem !important;
  }
}

/* ============================================
   PROGRAM CARD HEIGHT FIX
   The .program-card base style uses min-height:520px for
   the homepage flip-card animation. Mobile CSS adds more
   overrides (480px, 650px, 350px). On inner pages
   (donate, faculty, alim, hifz, etc.) cards don't have
   the flip inner structure — so they get large empty
   white space on BOTH desktop and mobile.
   Override min-height for simple (non-flip) cards only.
   ============================================ */

/* Cards WITHOUT a .program-card-inner child are simple
   (no flip) — let them size to their content */
.program-card:not(:has(.program-card-inner)) {
  min-height: unset !important;
  height: auto !important;
  /* Keep flexbox column layout for button pinning */
  display: flex !important;
  flex-direction: column !important;
}

/* Mobile: explicitly override the 480px / 650px / 350px
   min-height values set by the mobile media queries above */
@media (max-width: 992px) {
  .program-card:not(:has(.program-card-inner)) {
    min-height: unset !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .program-card:not(:has(.program-card-inner)) {
    min-height: unset !important;
    height: auto !important;
  }
}

/* Also reset any front/back pseudo-heights from bleeding in */
.program-card:not(:has(.program-card-inner)) .program-card-front,
.program-card:not(:has(.program-card-inner)) .program-card-back {
  min-height: unset !important;
  height: auto !important;
}

/* Ensure the button in simple cards stays at the bottom
   (push via flex grow on description) */
.program-card:not(:has(.program-card-inner)) .program-description:last-of-type {
  flex-grow: 1;
}

/* ============================================
   ACADEMIC PROGRAMS CARD IMAGE FIX
   The .academic-programs 3-column grid uses .event-card
   which at ≥992px gets the horizontal 400px|1fr layout
   AND height:100%/object-fit:cover overrides on images.
   For portrait flyer images this causes tall cropped cards.
   Reset to a sane fixed-height + object-fit:contain so the
   full flyer is visible inside a contained image area.
   ============================================ */
@media (min-width: 992px) {

  /* Make academic program cards vertical (stacked), not horizontal */
  .academic-programs .event-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    align-items: unset !important;
  }

  /* Constrain image wrapper height so flyers don't overflow */
  .academic-programs .event-card-img-wrapper {
    height: 320px !important;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    flex-shrink: 0;
    background: #f0ece4;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Use contain so the full flyer poster is always visible */
  .academic-programs .event-card-img-wrapper img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  /* Let content grow to fill remaining card height */
  .academic-programs .event-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

/* Mobile Title Size Adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .section-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }
}


/* =============================================================================
 * 23. BUG FIXES — v2.1.1
 * Applied as cascade overrides. Each fix has a comment explaining the root
 * cause and why this declaration is needed rather than editing the rule above.
 * ============================================================================= */

/* ============================================
   BUG FIXES — v2.1.1
   Applied as appended overrides so the
   minified source blob above stays intact.
   ============================================ */

/* FIX 1: .btn display conflict
   The minified .btn rule declares display:inline-flex then immediately
   overrides it with display:inline-block. The inline-block wins, which
   means align-items and justify-content (flex properties) have zero
   effect — buttons don't vertically center their content and icons/text
   misalign. Restore inline-flex so flex alignment properties work. */
.btn {
  display: inline-flex !important;
}

/* FIX 2: .nav-donate-btn duplicate color
   The minified rule sets color:#0D2E26 !important then immediately sets
   color:var(--white) !important. The first declaration is dead code and
   misleading. Explicitly enforce the intended white. */
.nav-donate-btn {
  color: var(--white) !important;
}

/* FIX 3: Skip-to-content link (accessibility — WCAG 2.1 SC 2.4.1)
   Visually hidden until focused, then slides into view. Allows keyboard
   and screen-reader users to bypass the full navigation on every page. */
.skip-link {
  position: absolute;
  top: -50px;
  left: 1rem;
  z-index: 10001;
  padding: 0.6rem 1.25rem;
  background: var(--primary);
  color: var(--white) !important;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--gold-accent);
  outline-offset: 2px;
}

/* FIX 4: .sr-only utility class
   Used by footer.php newsletter label but was never defined in CSS.
   Screen readers still read the text; sighted users don't see it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  /* Modern replacement for deprecated clip:rect() */
  white-space: nowrap;
  border: 0;
}

/* FIX 5: #scrollProgress
   The element was referenced by custom.js but had no CSS rule of its own
   outside the minified blob. Ensure it is always visible with correct
   stacking even if the minified rule is somehow overridden. */
#scrollProgress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-accent), var(--primary), var(--sage-green));
  z-index: 10000 !important;
  pointer-events: none;
  transition: width 0.1s ease-out;
}

/* ============================================
   FIX 6: Flip icon repositioned — top-right corner
   
   Root cause: position:absolute;bottom:12px;right:12px placed the icon
   directly on top of the "ENROLL NOW" button AND the card's border-radius
   clipped the circle's corner, making it look like a stray dark square
   bleeding out of the card edge.
   
   Fix: Move to top:16px;right:16px so it sits in clear space above the
   card content, never overlaps buttons, and is fully inside the rounded
   corner. Also tidies up the duplicate width/height declarations (the
   original had width:48px then width:32px in the same rule).
   ============================================ */

.program-card-front .flip-icon {
  /* Position: top-right, well inside the border-radius */
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: auto;
  /* cancel the bottom:12px from the minified rule */

  /* Consistent size — original had 48px then 32px, 32px won */
  width: 32px;
  height: 32px;

  /* Slightly more opaque so it reads as intentional UI, not a glitch */
  background: rgba(27, 77, 62, 0.12);
  border: 1.5px solid rgba(27, 77, 62, 0.3);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.program-card-front .flip-icon:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: rotate(180deg) scale(1.1);
}

.program-card-front .flip-icon:hover::before {
  background-color: var(--white);
}

/* Back-face flip icon — gold variant, same top-right position */
.program-card-back .flip-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: auto;
  width: 32px;
  height: 32px;
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
}

.program-card-back .flip-icon:hover {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
  transform: rotate(180deg) scale(1.1);
}

/* Ensure the card front has a safe top padding so the icon
   doesn't visually collide with the program icon/title */
.program-card-front {
  padding-top: 2.5rem;
}


/* ============================================


/* =============================================================================
 * 24. PSI / PERFORMANCE FIXES — v2.1.2
 * PageSpeed Insights findings resolved via CSS overrides.
 * ============================================================================= */

/* PSI FIXES — v2.1.2 (PageSpeed Insights) ============================================ */

/* PSI FIX 7: Non-composited animation — underlineGlow
   PageSpeed flagged section-title::after for animating `box-shadow`.
   box-shadow triggers PAINT on every frame (not composited), causing
   jank and contributing to CLS on lower-end devices. The fix replaces
   the box-shadow keyframe with an opacity animation:
   - The shadow is now a static baked-in box-shadow (no cost at runtime).
   - Only `opacity` is animated — opacity IS GPU-composited (no paint, no layout).
   - Visual result is identical: the glow pulses in and out on the underline. */
.section-title::after {
  /* Bake the shadow in statically — animate only opacity */
  box-shadow:
    0 0 12px rgba(212, 175, 55, 0.6),
    0 0 28px rgba(212, 175, 55, 0.35);
  animation: underlineGlow 2s ease-in-out infinite;
}

@keyframes underlineGlow {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

/* PSI FIX 8: DONATE button contrast failure (Accessibility score)
   PageSpeed reported: "Background and foreground colors do not have a
   sufficient contrast ratio" on the .nav-donate-btn element.
   Root cause: white (#FFF) text on gold (#D4AF37) background = ~1.9:1
   contrast — far below the WCAG AA minimum of 4.5:1 for normal text.
   Fix: dark green (#0D2E26) text on gold = ~7.7:1 contrast ratio ✓
   Bonus: The first duplicate `color:#0D2E26` declaration in the minified
   source was already the correct colour — it just got overridden by the
   second `color:var(--white)` declaration. This restores the intended value. */
.nav-donate-btn,
.nav-donate-btn:link,
.nav-donate-btn:visited {
  color: #0D2E26 !important;
}

/* Ensure hover state also meets contrast (dark text on slightly darker gold) */
.nav-donate-btn:hover {
  color: #0D2E26 !important;
}

/* ============================================
   NEWSLETTER FORM — Loading / Success / Error states
   Improvement #7: Visual feedback for the real AJAX backend.
   ============================================ */

/* Disabled state while request is in flight */
.newsletter-form input:disabled,
.newsletter-form button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Button transitions smoothly between states */
.newsletter-form button[type="submit"] {
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.15s ease;
}

/* Brief press feedback */
.newsletter-form button[type="submit"]:active:not(:disabled) {
  transform: scale(0.97);
}

/* Honeypot — completely hidden from real users and screen readers */
.ssk-hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  /* Modern replacement for deprecated clip:rect() */
  border: 0 !important;
  white-space: nowrap !important;
}


/* =============================================================================
 * 26. NEWSLETTER FORM — Loading, Success & Error States
 * Improvement #7: Visual feedback for the real AJAX newsletter backend.
 * ============================================================================= */

/* Disabled state while request is in flight */
.newsletter-form input:disabled,
.newsletter-form button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Button transitions smoothly between states */
.newsletter-form button[type="submit"] {
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.15s ease;
}

.newsletter-form button[type="submit"]:active:not(:disabled) {
  transform: scale(0.97);
}

/* Honeypot field — completely hidden from real users and screen readers */
.ssk-hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  /* Modern replacement for deprecated clip:rect() */
  border: 0 !important;
  white-space: nowrap !important;
}

/* =============================================================================
 * 27. NEWSLETTER CONSENT CHECKBOX (CASL/GDPR — #11)
 * ============================================================================= */

.newsletter-consent {
  margin: 10px 0;
}

.newsletter-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--white);
  opacity: 0.9;
}

.newsletter-consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--gold-accent);
  cursor: pointer;
}

.newsletter-consent-label span a {
  color: var(--gold-accent);
  text-decoration: underline;
}

/* =============================================================================
 * 28. DARK MODE — New Component Coverage
 * =============================================================================
 * In dark mode, --white is remapped to #1e1e1e (a dark background colour).
 * Every new component added in v2.2.0 that uses color:var(--white) for
 * visible text therefore renders invisible — dark text on a dark background.
 *
 * This section patches each affected component with an explicit colour value
 * that is NOT a CSS variable so it stays legible regardless of variable state.
 *
 * Affected components audited:
 *   BROKEN  .skip-link              — color:var(--white) → invisible
 *   BROKEN  .btn / .btn-primary     — color:var(--white) → invisible on green
 *   BROKEN  .newsletter-consent-label — color:var(--white) → invisible on dark footer
 *   BROKEN  .back-to-top            — uses var(--white) for icon colour
 *   BROKEN  .fab-donate             — uses var(--white) for icon colour
 *   OK      #scrollProgress         — hardcoded gradient, visible on dark bg
 *   OK      .ssk-hp-field           — hidden from users, no visual impact
 *   OK      newsletter form disabled states — opacity handles these fine
 * ============================================================================= */

/* ── Skip link ────────────────────────────────────────────────────────────────
   The skip link sits on a dark-green background (--primary never inverts).
   Text must stay white regardless of --white variable state. */
body.dark-mode .skip-link {
  color: #ffffff !important;
}

body.dark-mode .skip-link:focus {
  background: var(--primary);
  color: #ffffff !important;
  outline-color: var(--gold-accent);
}

/* ── Buttons — .btn and .btn-primary ─────────────────────────────────────────
   .btn uses color:var(--white). In dark mode --white=#1e1e1e, making button
   text invisible on green/gold backgrounds. Force white text on coloured
   backgrounds, and ensure hover/focus states remain readable. */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary:link,
body.dark-mode .btn-primary:visited,
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
  color: #ffffff !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-secondary:link,
body.dark-mode .btn-secondary:visited {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus {
  color: var(--gold-accent) !important;
  border-color: var(--gold-accent);
}

/* ── Newsletter form — subscribe button and input states ─────────────────────
   The newsletter form lives in the footer (always dark). The button uses
   .btn-primary so the rule above covers its text. These rules add disabled
   and error-state clarity specific to dark mode. */
body.dark-mode .newsletter-form input[type="email"] {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e0e0e0 !important;
}

body.dark-mode .newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .newsletter-form input:disabled {
  background: #1a1a1a !important;
  color: #666 !important;
}

/* ── Newsletter consent checkbox ─────────────────────────────────────────────
   Footer background in dark mode is #0d0d0d. The consent label uses
   color:var(--white) which becomes #1e1e1e — effectively invisible. */
body.dark-mode .newsletter-consent-label {
  color: #cccccc !important;
  opacity: 1;
}

body.dark-mode .newsletter-consent-label a {
  color: var(--gold-accent) !important;
}

body.dark-mode .newsletter-consent-label input[type="checkbox"] {
  accent-color: var(--gold-accent);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Back-to-top button ───────────────────────────────────────────────────────
   Uses var(--white) for arrow icon colour. Provide a dark-mode-safe surface
   with a subtle border so the button is visible on dark page backgrounds. */
body.dark-mode .back-to-top {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e0e0e0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .back-to-top:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* ── FAB Donate button ────────────────────────────────────────────────────────
   Same issue as back-to-top — var(--white) icon colour inverts. Gold works
   well in dark mode as it's high-contrast against dark surfaces. */
body.dark-mode .fab-donate {
  background: var(--gold-accent) !important;
  color: #0d2e26 !important;
  /* Dark text on gold = 7.7:1 contrast */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .fab-donate:hover {
  background: #c9a227 !important;
  /* Slightly darker gold on hover */
  color: #0d2e26 !important;
}

/* ── Scroll progress bar ─────────────────────────────────────────────────────
   The gradient uses hardcoded values (gold → primary → sage-green) which are
   already high-contrast on dark backgrounds. No override needed.
   Adding a subtle shadow so it reads against very dark navbars. */
body.dark-mode #scrollProgress {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ── Dark mode toggle button itself ─────────────────────────────────────────
   Already covered in section 17 but ensure the active state is clear. */
body.dark-mode .dark-mode-toggle {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Footer bottom links ──────────────────────────────────────────────────────
   Privacy Policy / Terms of Use links in the footer bottom strip. */
body.dark-mode .footer-bottom-links a {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-mode .footer-bottom-links a:hover {
  color: var(--gold-accent) !important;
}

/* ── Footer contact links ────────────────────────────────────────────────────
   Phone and email links in the footer contact column. */
body.dark-mode .footer-contact a {
  color: var(--gold-accent) !important;
}

/* ── Unsubscribe notice ──────────────────────────────────────────────────────
   The #ssk-unsub-notice banner uses inline styles (dark-green background,
   white text) so it's already dark-mode-safe by design. No override needed. */

/* ── Admin notice (front-end unsubscribe messages only) ─────────────────────
   The SSK placeholder admin notice is admin-only and uses wp-admin styling
   which manages its own dark/light mode. No front-end override needed. */

/* =============================================================================
 * 29. 404 ERROR PAGE
 * ============================================================================= */

.ssk-error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 6rem 0 4rem;
  text-align: center;
}

.error-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Arabic Quran verse — إِنَّا لِلَّٰهِ وَإِنَّا إِلَيْهِ رَاجِعُونَ */
.error-bismillah {
  font-family: 'Amiri', 'Traditional Arabic', Georgia, serif;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: var(--gold-accent);
  line-height: 1.8;
  margin: 0 0 1.5rem;
  direction: rtl;
  letter-spacing: 0.02em;
}

/* Large decorative 404 number */
.error-code {
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  opacity: 0.12;
  margin: 0 0 -2rem;
  letter-spacing: -0.04em;
  user-select: none;
}

.error-heading {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 1rem;
}

.error-message {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 2rem;
}

/* Search form */
.error-search {
  margin: 0 0 2.5rem;
}

.error-search .search-form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}

.error-search input[type="search"] {
  flex: 1;
  padding: 0.65rem 1rem;
  border: 2px solid rgba(27, 77, 62, 0.2);
  border-radius: 6px;
  font-size: 0.95rem;
  background: var(--white);
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.error-search input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
}

.error-search button[type="submit"] {
  padding: 0.65rem 1.25rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
  white-space: nowrap;
}

.error-search button[type="submit"]:hover {
  background: #163d2a;
}

/* Helpful links list */
.error-links {
  margin: 0 0 2.5rem;
  text-align: left;
  background: rgba(27, 77, 62, 0.04);
  border: 1px solid rgba(27, 77, 62, 0.1);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
}

.error-links-heading {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

.error-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem 1rem;
}

.error-links li a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s, gap 0.2s;
}

.error-links li a::before {
  content: '→';
  color: var(--gold-accent);
  font-size: 0.85em;
  transition: transform 0.2s;
}

.error-links li a:hover {
  color: var(--gold-accent);
  gap: 10px;
}

.error-links li a:hover::before {
  transform: translateX(2px);
}

/* CTA button */
.error-cta {
  display: inline-flex;
}

/* ── Dark mode ───────────────────────────────────────────────────────────────── */
body.dark-mode .error-code {
  color: #ffffff;
  opacity: 0.06;
}

body.dark-mode .error-heading {
  color: #e0e0e0;
}

body.dark-mode .error-links {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .error-links li a {
  color: #b0c4b8;
}

body.dark-mode .error-links li a:hover {
  color: var(--gold-accent);
}

body.dark-mode .error-search input[type="search"] {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .error-links ul {
    grid-template-columns: 1fr;
  }

  .error-search .search-form {
    flex-direction: column;
  }

  .error-links {
    padding: 1.25rem;
  }
}

/* =============================================================================
 * 30. INTERACTIVE TEXT — UNDERLINE RESET (v2.2.1)
 * -----------------------------------------------------------------------------
 * The Section 04 link reset is scoped as:
 *     a:not(.btn):not(.nav-menu a):not(.footer-links a) { text-decoration: none }
 * It intentionally EXCLUDES buttons, nav links, and footer links so they do not
 * receive the animated gradient ::after underline. That exclusion, however, also
 * left those three groups WITHOUT any text-decoration reset — so the browser's
 * default <a> underline shows through on the main navigation, the button text
 * (e.g. "Apply for Admission"), the footer "Quick Links", and the contact
 * (tel:/mailto:) links.
 *
 * This rule strips that static underline from every interactive text element
 * site-wide. It does NOT affect the custom hover affordances (the gold sliding
 * bar on nav links, the dash on footer links, the gradient bar on body links)
 * because those are drawn with ::after / ::before pseudo-element backgrounds,
 * not text-decoration. The two intentional underlines — the breadcrumb link on
 * hover (Section, .breadcrumbs a:hover) and the newsletter consent inline link
 * (.newsletter-consent-label span a) — are preserved because they carry higher
 * specificity than the bare selectors below.
 * ============================================================================= */
a,
.btn,
.nav-menu a,
.dropdown-menu a,
.footer-links a,
.footer-contact a,
.footer-bottom-links a,
.contact-item a,
.social-link {
  text-decoration: none;
}

/* =============================================================================
 * 31. EVENT SLIDER — TWO-PART LAYOUT (solid contrast text panel) (v2.2.1)
 * -----------------------------------------------------------------------------
 * Goal (user request): a clean two-part slide — a blurred IMAGE part on the
 * left and a SOLID high-contrast TEXT panel on the right so the copy is always
 * highly visible. The previous panel used a gradient that faded to transparent,
 * leaving white text floating over a busy blur (and clipping at the edge).
 * The blurred image backdrop (.slide-bg-blur) is intentionally left untouched.
 * #eventSlider id selectors are used so these win over earlier .slide-info rules.
 * ============================================================================= */
#eventSlider .slide-info {
  background: linear-gradient(135deg, #1b4d3e 0%, #123528 100%) !important;
  border-left: 3px solid var(--gold-accent);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
  padding: 2.5rem 2.25rem;
  overflow-wrap: break-word;
}

#eventSlider .slide-info h3 {
  color: #ffffff !important;
  text-shadow: none !important;
}

#eventSlider .slide-info p,
#eventSlider .slide-info .slide-description {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none !important;
}

/* Mobile: stacked panel gets the solid colour too (was transparent → unreadable) */
@media (max-width: 992px) {
  #eventSlider .slide-info {
    border-left: none;
    border-top: 3px solid var(--gold-accent);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 10px 10px;
  }
}

/* Dark mode: solid deep-green panel instead of the fading gradient */
body.dark-mode #eventSlider .slide-info {
  background: #11271f !important;
}

body.dark-mode #eventSlider .slide-info h3,
body.dark-mode #eventSlider .slide-info p,
body.dark-mode #eventSlider .slide-info .slide-description,
body.dark-mode #eventSlider .slide-info div {
  text-shadow: none !important;
}

/* =============================================================================
 * 32. SLIDER CONTROLS — ARROWS & DOTS (v2.2.1)
 * -----------------------------------------------------------------------------
 * Root cause: the Section 02 global button override excludes .slider-btn and
 * .flip-icon but NOT .slider-arrow / .slider-dot-nav, so those <button>s were
 * painted as solid-green buttons with default padding — the arrows looked like
 * green squares and the nav dots like big green rounded rectangles ("icons too
 * big"). These rules target the elements by ID (#sliderPrev/#sliderNext and
 * #sliderDotsNav) so they outrank the global override cleanly and restore small,
 * tidy circular controls.
 * ============================================================================= */

/* Prev / Next arrows — small translucent circles, gold on hover */
#sliderPrev,
#sliderNext {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#sliderPrev:hover,
#sliderNext:hover,
#sliderPrev:focus,
#sliderNext:focus {
  background-color: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  color: #ffffff !important;
}

/* Navigation dots — small circles, gold when active */
#sliderDotsNav .slider-dot-nav {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  max-width: 11px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(27, 77, 62, 0.25) !important;
  border: 1.5px solid var(--primary) !important;
  box-shadow: none !important;
  margin: 0 6px !important;
  flex: 0 0 auto !important;
}

#sliderDotsNav .slider-dot-nav.active {
  background-color: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  transform: scale(1.25);
}

/* =============================================================================
 * 33. FLIP-CARD ICON — FORCE CIRCLE + VISIBLE ICON (v2.2.1)
 * -----------------------------------------------------------------------------
 * The flip toggle was rendering as a large solid-green OVAL with no visible
 * glyph: its width/height weren't surviving Elementor's button sizing (→ oval),
 * and the masked SVG was the same dark green as the circle (→ invisible).
 * Fix: lock the element to a true 34px circle and make it an obvious button —
 * solid coloured circle with a WHITE icon. Front = green, back = gold.
 * ============================================================================= */
.program-card .flip-icon,
.program-card-front .flip-icon,
.program-card-back .flip-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

.program-card-front .flip-icon {
  background: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
}

.program-card-back .flip-icon {
  background: var(--gold-accent) !important;
  border: 1.5px solid var(--gold-accent) !important;
}

.program-card-front .flip-icon::before,
.program-card-back .flip-icon::before {
  background-color: #ffffff !important;
  width: 16px !important;
  height: 16px !important;
}

.program-card-front .flip-icon:hover {
  background: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
}

.program-card-back .flip-icon:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* =============================================================================
 * 34. STATS COUNTER — RENDER SAFETY NET (v2.2.1)
 * -----------------------------------------------------------------------------
 * .stat-number paints its digits with a gold gradient via background-clip:text
 * + -webkit-text-fill-color:transparent. On the rare engine that does NOT
 * support background-clip:text, the transparent fill would leave the number
 * invisible. This @supports fallback restores a solid gold fill in that case so
 * the animated count is never blank. (The JS trigger robustness lives in
 * animations.js.)
 * ============================================================================= */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-number {
    -webkit-text-fill-color: var(--gold-accent);
    color: var(--gold-accent);
  }
}

/* =============================================================================
 * 35. EVENT SLIDER — POSTER CENTRING (desktop) (v2.2.1)
 * -----------------------------------------------------------------------------
 * The poster (.slide-img-content) hugged the far-left edge, leaving a wide
 * empty band of blurred background between it and the right-hand text panel.
 * Defining the left 55% as a dedicated image column and centring the poster
 * inside it makes the slide read as two balanced halves (image | text).
 * Desktop only — the ≤992px rules already stack image-over-text on mobile.
 * NOTE: visual change — confirm against a screenshot after deploy.
 * ============================================================================= */
@media (min-width: 993px) {
  #eventSlider .slide {
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }

  #eventSlider .slide-img-content {
    flex: 0 0 55%;
    width: 55%;
    max-width: 55%;
    height: 82%;
    max-height: 82%;
    object-fit: contain;
    object-position: center;
  }
}

/* =============================================================================
 * 36. FLOATING CONTROLS — SMALL-SCREEN SPACING & SAFE AREA (v2.2.1)
 * -----------------------------------------------------------------------------
 * The right-side floating buttons stack as: dark-mode toggle (top), donate FAB
 * + back-to-top (bottom). Desktop spacing is fine and left unchanged. These
 * rules (a) respect iOS safe-area insets so the buttons aren't clipped by the
 * home indicator/notch — env() resolves to 0 on non-notched devices, so no
 * change there — and (b) tighten the insets and guarantee clear vertical gaps
 * on small phones. NOTE: floating positions are hard to verify without a real
 * device — worth a quick check on a phone.
 * ============================================================================= */
.dark-mode-toggle,
.fab-donate,
.back-to-top {
  right: calc(30px + env(safe-area-inset-right, 0px));
}

.back-to-top {
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}

.fab-donate {
  bottom: calc(95px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 480px) {
  .dark-mode-toggle {
    top: 76px;
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 38px;
    height: 38px;
  }

  .fab-donate {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .back-to-top {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* =============================================================================
 * 37. STICKY FOOTER — REMOVE EMPTY GAP BELOW FOOTER (v2.2.2)
 *   Symptom: a band of the cream body background showed BELOW the dark footer
 *   on every page.
 *
 *   Root cause: every main page uses Elementor's Canvas template, which does
 *   NOT output the Hello Elementor ".site" wrapper. The theme's sticky-footer
 *   pattern lives on that wrapper (.site{display:flex;min-height:100vh} +
 *   .site-main{flex:1}), so on Canvas it never engages. <body> already has
 *   min-height:100vh, so any page shorter than the viewport stretched the body
 *   and left its cream background visible under the footer.
 *
 *   Fix: promote <body> itself to the flex column and let the page's main
 *   content region grow to absorb the spare height, pinning the footer to the
 *   very bottom. Tall pages are unaffected (content already exceeds the
 *   viewport). Full-bleed sections keep working because they set an explicit
 *   width:100vw, which overrides flex's default stretch. The skip-link
 *   (position:absolute), scroll-progress bar and navbar (position:fixed) are
 *   all out of flow, so they take no space in the column.
 * ============================================================================= */
body {
  display: flex;
  flex-direction: column;
}

/* The main content region grows to fill leftover vertical space. Covers the
   Canvas <main id="custom-main-content">, the Hello Elementor .site wrapper,
   and any generic <main> / .site-main used by other templates. */
body > .site,
body > .site-main,
body > main,
body > #custom-main-content {
  flex: 1 0 auto;
}

/* Footer never shrinks and always sits last. margin-top:auto is a fallback:
   if no sibling above grows, it still hugs the bottom (gap moves above the
   footer as normal page background instead of appearing below it). When the
   main region grows, there is no free space left, so this resolves to 0. */
body > .footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* Full-bleed 100vw sections (.hero, .footer) can make the document a few px
   wider than the viewport once a vertical scrollbar appears, adding a spurious
   horizontal scrollbar. <body> already clips overflow-x; mirror it on <html>
   so the page never scrolls sideways. */
html {
  overflow-x: hidden;
}

/* Hide hardcoded Elementor headers/footers (they lack accessibility roles) */
header#custom-main-header:not([role="banner"]) {
    display: none !important;
}
footer.footer:not([role="contentinfo"]) {
    display: none !important;
}

/* Fix bank details white text on light background on Donate page */
.bank-details,
.bank-details-list,
.bank-details-list li,
.bank-details-list span,
.bank-details-list strong {
    color: #2C2C2C !important;
}

/* Fix bank details heading text color */
.section:has(.bank-details) .section-title {
    color: #2C2C2C !important;
}

/* Fix header menu visibility in dark mode */
body.dark-mode .nav-menu a {
    color: #e0e0e0 !important;
}

/* Fix navbar background not applying in dark mode due to !important on default */
body.dark-mode .navbar {
    background: #1a1a1a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}