/* ============================================================
           CSS CUSTOM PROPERTIES / DESIGN TOKENS
        ============================================================ */
 :root {
     --primary-teal: #0d7377;
     --primary-teal-dark: #14919b;
     --green-deep: #14442a;
     --green-mid: #1f6b41;
     --green-light: #2a8b58;
     --gold: #c8933a;
     --gold-light: #e8b96a;
     --cream: #f8f4ec;
     --parchment: #ede8dc;
     --white: #ffffff;
     --text-dark: #1a2a1e;
     --text-mid: #3d5247;
     --text-soft: #7a9180;
     --border: rgba(200, 147, 58, 0.25);
     --overlay-light: rgba(255, 255, 255, 0.12);
     --overlay-dark: rgba(0, 0, 0, 0.6);
 }

 /* ============================================================
           GLOBAL RESET & BASE
        ============================================================ */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
 }

 body {
     font-family: 'Roboto', sans-serif;
     overflow-x: hidden;
     background: var(--cream);
     color: var(--text-dark);
 }

 html {
     scroll-behavior: smooth;
 }

 .arabic-text {
     font-family: 'Scheherazade New', 'Amiri', serif;
     direction: rtl;
 }

 .container {
     max-width: 100% !important;
     padding-left: 1.5%;
     padding-right: 1.5%;
     margin-left: auto;
     margin-right: auto;
 }

 @media (min-width: 1600px) {
     .container {
         padding-left: 2%;
         padding-right: 2%;
     }
 }

 @media (max-width: 768px) {
     .container {
         padding-left: 2%;
         padding-right: 2%;
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(32px);
     }

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

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

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

 /* ============================================================
           SHARED UTILITIES: BUTTONS, EYEBROW, ORNAMENT
        ============================================================ */
 .btn-primary,
 .btn-secondary {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 13px 32px;
     border-radius: 6px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.9rem;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     text-decoration: none;
     transition: all 0.35s ease;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     white-space: nowrap;
     border: 2px solid var(--primary-teal);
 }

 .btn-primary span,
 .btn-primary i,
 .btn-secondary span,
 .btn-secondary i {
     position: relative;
     z-index: 1;
     transition: color 0.35s ease;
 }

 .btn-primary {
     background: var(--primary-teal);
     color: white;
     box-shadow: 0 4px 18px rgba(13, 115, 119, 0.3);
     isolation: isolate;
 }

 .btn-primary::before {
     content: '';
     position: absolute;
     inset: 0;
     background: white;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease;
     z-index: -1;
 }

 .btn-primary:hover {
     box-shadow: 0 6px 24px rgba(13, 115, 119, 0.45);
     transform: translateY(-2px);
     color: var(--primary-teal);
     border-color: var(--primary-teal);
 }

 .btn-primary:hover::before {
     transform: scaleX(1);
 }

 .btn-secondary {
     background: transparent;
     color: var(--primary-teal);
 }

 .btn-secondary::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--primary-teal);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease;
     z-index: 0;
 }

 .btn-secondary:hover::before {
     transform: scaleX(1);
 }

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

 .btn-secondary:hover svg,
 .btn-secondary:hover svg line,
 .btn-secondary:hover svg polyline {
     stroke: white;
 }

 .btn-gold {
     background: var(--gold);
     color: var(--green-deep);
     border: 2px solid var(--gold);
     box-shadow: 0 4px 20px rgba(200, 147, 58, 0.35);
 }

 .btn-gold::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--green-deep);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease;
     z-index: 0;
 }

 .btn-gold:hover {
     box-shadow: 0 8px 28px rgba(200, 147, 58, 0.5);
     transform: translateY(-3px);
     color: var(--gold);
     border-color: var(--gold);
 }

 .btn-gold:hover::before {
     transform: scaleX(1);
 }

 .btn-gold span,
 .btn-gold i {
     position: relative;
     z-index: 1;
     transition: color 0.35s ease;
 }

 .btn-lg {
     padding: 15px 40px;
     font-size: 0.95rem;
 }

 .btn-sm {
     padding: 10px 24px;
     font-size: 0.82rem;
 }

 .geo-bg::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%231f6b41' stroke-width='0.4' opacity='0.10'%3E%3Cpolygon points='40,2 78,21 78,59 40,78 2,59 2,21'/%3E%3Cpolygon points='40,14 66,27 66,53 40,66 14,53 14,27'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: repeat;
     pointer-events: none;
     z-index: 0;
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: var(--green-mid);
     margin-bottom: 14px;
 }

 .eyebrow span {
     display: block;
     width: 28px;
     height: 1px;
     background: var(--gold);
 }

 .eyebrow.center {
     justify-content: center;
 }

 .ornament {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .ornament.center {
     justify-content: center;
     margin-top: 22px;
 }

 .ornament-line {
     width: 60px;
     height: 1px;
     background: linear-gradient(to right, transparent, var(--gold));
 }

 .ornament-line.rev {
     background: linear-gradient(to left, transparent, var(--gold));
 }

 .ornament-diamond {
     width: 7px;
     height: 7px;
     background: var(--gold);
     transform: rotate(45deg);
 }

 /* ============================================================
           TOP HEADER BAR
        ============================================================ */
 .top-header {
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     color: var(--white);
     padding: 8px 0;
     font-size: 14px;
     transition: all 0.3s ease;
 }

 .top-header.hidden {
     transform: translateY(-100%);
     opacity: 0;
     height: 0;
     padding: 0;
     overflow: hidden;
 }

 .top-header a {
     color: white;
     text-decoration: none;
 }

 .bismillah-text {
     font-family: 'Scheherazade New', serif;
     font-size: 22px;
     font-weight: 700;
     text-align: center;
 }

 .social-icons-container {
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 .social-icons {
     display: flex;
     gap: 8px;
 }

 .social-icons a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     background: var(--white);
     border-radius: 50%;
     color: var(--primary-teal);
     transition: all 0.3s ease;
 }

 .social-icons a:hover {
     background: #f0f0f0;
     transform: scale(1.1);
 }

 .language-switcher-container {
     display: flex;
     justify-content: flex-end;
     align-items: center;
 }

 .language-switcher {
     display: flex;
     gap: 2px;
     align-items: center;
 }

 .lang-btn {
     background: transparent;
     border: none;
     padding: 1px;
     border-radius: 5px;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 35px;
 }

 .lang-btn:hover {
     transform: translateY(-2px);
 }

 .lang-btn.active {
     border: 1px solid white;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .lang-btn span {
     font-size: 24px;
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .fi {
     width: 28px;
     height: 28px;
     border-radius: 2px;
 }

 /* ============================================================
           NAVBAR
        ============================================================ */
 .navbar-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .navbar {
     background: white;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 5px 0;
     transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .navbar-wrapper.scrolled-down {
     transform: translateY(-100%);
 }

 .navbar-wrapper.scrolled-up .navbar {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
 }

 .navbar-brand {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
 }

 .logo-circle {
     width: clamp(44px, 5.5vw, 70px);
     height: clamp(44px, 5.5vw, 70px);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 15px rgba(13, 115, 119, 0.3);
     overflow: hidden;
     flex-shrink: 0;
 }

 .logo-image {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 50%;
 }

 .brand-name {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     line-height: 1.2;
 }

 .brand-arabic {
     font-family: 'Scheherazade New', serif;
     font-size: clamp(14px, 2.2vw, 28px);
     font-weight: 700;
     color: var(--primary-teal);
     direction: rtl;
     letter-spacing: 0.5px;
     margin-bottom: 2px;
 }

 .brand-english {
     font-family: 'Roboto', sans-serif;
     font-size: clamp(7px, 1vw, 14px);
     font-weight: 600;
     color: #555;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .navbar-nav {
     margin: 0 auto;
     gap: 20px;
 }

 .navbar-nav .nav-link {
     color: #333;
     font-weight: 500;
     padding: 8px 16px;
     transition: all 0.3s ease;
     position: relative;
     font-size: large;
 }

 .navbar-nav .nav-link:hover {
     color: var(--primary-teal);
 }

 .navbar-nav .nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0;
     height: 2px;
     background: var(--primary-teal);
     transition: all 0.3s ease;
     transform: translateX(-50%);
 }

 .navbar-nav .nav-link:hover::after {
     width: 100%;
 }

 .navbar-collapse {
     flex-grow: 0;
 }

 .elearning-btn-container {
     flex: 0 0 auto;
 }

 /* Active nav states — class-based only */
 .navbar-nav .nav-link.active-nav {
     color: var(--primary-teal) !important;
 }

 .navbar-nav .nav-link.active-nav::after {
     width: 100% !important;
 }

 /* Responsive breakpoints for navbar */
 @media (max-width: 1345px) {
     .navbar-nav {
         gap: 8px;
     }

     .navbar-nav .nav-link {
         padding: 8px 10px;
         font-size: 0.95rem;
     }

     .brand-arabic {
         font-size: clamp(14px, 1.8vw, 22px);
     }

     .brand-english {
         font-size: clamp(7px, 0.85vw, 11px);
     }

     .btn-primary {
         padding: 10px 18px;
         font-size: 0.8rem;
     }
 }

 @media (max-width: 1220px) {
     .navbar-nav {
         gap: 2px;
     }

     .navbar-nav .nav-link {
         padding: 8px 8px;
         font-size: 0.88rem;
     }

     .logo-circle {
         width: 48px;
         height: 48px;
     }

     .brand-arabic {
         font-size: 18px;
     }

     .brand-english {
         font-size: 8px;
     }

     .btn-primary {
         padding: 9px 14px;
         font-size: 0.76rem;
         gap: 6px;
     }

     .elearning-btn-container .btn-primary i {
         display: none;
     }
 }

 @media (max-width: 991px) {
     .navbar-collapse {
         display: none !important;
     }

     .elearning-btn-container {
         display: none !important;
     }
 }

 /* ============================================================
           HAMBURGER BUTTON
        ============================================================ */
 .hamburger-btn {
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 44px;
     height: 44px;
     background: transparent;
     border: 2px solid rgba(13, 115, 119, 0.25);
     border-radius: 10px;
     cursor: pointer;
     gap: 5px;
     padding: 0;
     transition: border-color 0.3s, background 0.3s;
     position: relative;
     z-index: 1001;
     flex-shrink: 0;
 }

 .hamburger-btn:hover {
     background: rgba(13, 115, 119, 0.06);
     border-color: var(--primary-teal);
 }

 .hamburger-btn .bar {
     display: block;
     width: 22px;
     height: 2px;
     background: var(--primary-teal);
     border-radius: 2px;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, width 0.3s ease;
     transform-origin: center;
 }

 @media (max-width: 991px) {
     .hamburger-btn {
         display: flex;
     }
 }

 /* ============================================================
           SIDEBAR DRAWER
        ============================================================ */
 .sidebar-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(10, 20, 14, 0.55);
     backdrop-filter: blur(4px);
     z-index: 1998;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s ease;
 }

 .sidebar-backdrop.active {
     opacity: 1;
     pointer-events: all;
 }

 .sidebar-drawer {
     position: fixed;
     top: 0;
     left: 0;
     height: 100dvh;
     width: 320px;
     max-width: 100vw;
     background: #ffffff;
     border-right: 1px solid rgba(13, 115, 119, 0.12);
     z-index: 1999;
     transform: translateX(-100%);
     transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     box-shadow: 6px 0 40px rgba(13, 115, 119, 0.12);
 }

 .sidebar-drawer::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%230d7377' stroke-width='0.5' opacity='0.04'%3E%3Cpolygon points='40,2 78,21 78,59 40,78 2,59 2,21'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: repeat;
     pointer-events: none;
     z-index: 0;
 }

 .sidebar-drawer.open {
     transform: translateX(0);
 }

 @media (max-width: 575px) {
     .sidebar-drawer {
         width: 100vw;
         box-shadow: none;
     }
 }

 .sidebar-top {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 18px;
     border-bottom: 1px solid rgba(13, 115, 119, 0.1);
     background: #fff;
 }

 .sidebar-brand {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
 }

 .sidebar-logo {
     width: clamp(44px, 5.5vw, 60px);
     height: clamp(44px, 5.5vw, 60px);
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(13, 115, 119, 0.25);
     flex-shrink: 0;
 }

 .sidebar-logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 50%;
 }

 .sidebar-brand-text {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     line-height: 1.2;
 }

 .sidebar-brand-arabic {
     font-family: 'Scheherazade New', serif;
     font-size: clamp(14px, 2.2vw, 22px);
     font-weight: 700;
     color: var(--primary-teal);
     direction: rtl;
 }

 .sidebar-brand-english {
     font-family: 'Roboto', sans-serif;
     font-size: clamp(7px, 1vw, 11px);
     font-weight: 600;
     color: #555;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .sidebar-close-btn {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     background: rgba(13, 115, 119, 0.06);
     border: 1px solid rgba(13, 115, 119, 0.14);
     color: var(--primary-teal);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 15px;
     transition: all 0.3s ease;
     flex-shrink: 0;
 }

 .sidebar-close-btn:hover {
     background: rgba(13, 115, 119, 0.12);
 }

 .sidebar-nav {
     position: relative;
     z-index: 1;
     flex: 1;
     overflow-y: auto;
     padding: 10px 0 8px;
 }

 .sidebar-nav-item {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 12px 20px;
     color: #333;
     text-decoration: none;
     font-family: 'Roboto', sans-serif;
     font-size: 15px;
     font-weight: 500;
     position: relative;
     transition: all 0.3s ease;
     opacity: 0;
     transform: translateX(-20px);
 }

 .sidebar-nav-item.animate-in {
     opacity: 1;
     transform: translateX(0);
     transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s, background 0.3s;
 }

 .sidebar-nav-item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 0;
     background: linear-gradient(to bottom, var(--primary-teal), var(--primary-teal-dark));
     border-radius: 0 3px 3px 0;
     transition: height 0.3s ease;
 }

 .sidebar-nav-item:hover::before,
 .sidebar-nav-item.sidebar-active::before {
     height: 60%;
 }

 .sidebar-nav-item:hover,
 .sidebar-nav-item.sidebar-active {
     color: var(--primary-teal);
     background: rgba(13, 115, 119, 0.05);
 }

 .sidebar-nav-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(13, 115, 119, 0.07);
     border: 1px solid rgba(13, 115, 119, 0.12);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     color: var(--primary-teal);
     flex-shrink: 0;
     transition: all 0.3s ease;
 }

 .sidebar-nav-item:hover .sidebar-nav-icon,
 .sidebar-nav-item.sidebar-active .sidebar-nav-icon {
     background: rgba(13, 115, 119, 0.13);
     border-color: rgba(13, 115, 119, 0.28);
 }

 .sidebar-nav-label {
     flex: 1;
 }

 .sidebar-nav-arrow {
     font-size: 10px;
     color: #bbb;
     transition: transform 0.3s, color 0.3s;
 }

 .sidebar-nav-item:hover .sidebar-nav-arrow {
     transform: translateX(4px);
     color: var(--primary-teal);
 }

 .sidebar-cta {
     position: relative;
     z-index: 1;
     padding: 14px 18px;
     border-top: 1px solid rgba(13, 115, 119, 0.1);
 }

 .sidebar-cta-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     width: 100%;
     padding: 13px 20px;
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     color: white;
     border: none;
     border-radius: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.04em;
     text-decoration: none;
     text-transform: uppercase;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 16px rgba(13, 115, 119, 0.3);
     opacity: 0;
     transform: translateY(12px);
 }

 .sidebar-cta-btn.animate-in {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s;
 }

 .sidebar-cta-btn:hover {
     box-shadow: 0 6px 22px rgba(13, 115, 119, 0.45);
     transform: translateY(-2px);
     color: white;
 }

 .sidebar-footer {
     position: relative;
     z-index: 1;
     padding: 12px 18px 20px;
     border-top: 1px solid rgba(13, 115, 119, 0.08);
     background: #fafafa;
 }

 .sidebar-footer-label {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: #aaa;
     margin-bottom: 10px;
     display: block;
 }

 .sidebar-socials {
     display: flex;
     gap: 10px;
 }

 .sidebar-social-link {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: rgba(13, 115, 119, 0.07);
     border: 1px solid rgba(13, 115, 119, 0.14);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-teal);
     font-size: 13px;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .sidebar-social-link:hover {
     background: var(--primary-teal);
     border-color: var(--primary-teal);
     color: white;
     transform: translateY(-3px);
 }

 .sidebar-ornament {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 14px;
 }

 .sidebar-ornament-line {
     flex: 1;
     height: 1px;
     background: linear-gradient(to right, transparent, rgba(13, 115, 119, 0.25));
 }

 .sidebar-ornament-line.rev {
     background: linear-gradient(to left, transparent, rgba(13, 115, 119, 0.25));
 }

 .sidebar-ornament-diamond {
     width: 5px;
     height: 5px;
     background: rgba(13, 115, 119, 0.35);
     transform: rotate(45deg);
     flex-shrink: 0;
 }

 .sidebar-copyright {
     font-size: 10px;
     color: #bbb;
     text-align: center;
     margin-top: 10px;
     letter-spacing: 0.04em;
 }

 /* ============================================================
           CUSTOM ALERT MODAL
        ============================================================ */
 .custom-alert-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--overlay-dark);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     backdrop-filter: blur(3px);
 }

 .custom-alert-box {
     background: var(--white);
     border-radius: 15px;
     padding: 30px 40px;
     max-width: 500px;
     width: 90%;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     animation: slideDown 0.3s ease;
     text-align: center;
 }

 .custom-alert-icon {
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     color: var(--white);
     font-size: 32px;
 }

 .custom-alert-title {
     font-size: 22px;
     font-weight: 600;
     color: var(--primary-teal);
     margin-bottom: 15px;
 }

 .custom-alert-message {
     font-size: 16px;
     color: #555;
     line-height: 1.6;
     margin-bottom: 25px;
 }

 .custom-alert-message.arabic-message {
     font-family: 'Scheherazade New', serif;
     font-size: 18px;
     direction: rtl;
 }

 .custom-alert-button {
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     color: var(--white);
     border: none;
     padding: 12px 35px;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .custom-alert-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(13, 115, 119, 0.4);
 }

 /* ============================================================
           HERO SECTION
        ============================================================ */
 .hero-section {
     min-height: 100vh;
     position: relative;
     overflow: hidden;
     padding: 180px 0 80px 0;
     background-image: url("Images/Home/Hero-large.png");
     background-size: cover;
     background-position: right;
     background-repeat: no-repeat;
     background-attachment: fixed;
 }

 .hero-section::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(240, 248, 247, 0.65) 35%, rgba(214, 235, 232, 0.55) 60%, rgba(255, 255, 255, 0.7) 100%), radial-gradient(circle at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.25) 100%), linear-gradient(to top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.15) 100%);
 }

 .hero-pattern {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0.08;
     pointer-events: none;
     z-index: 2;
 }

 .pattern-text {
     position: absolute;
     font-family: 'Scheherazade New', serif;
     font-size: 180px;
     color: #0d7377;
     font-weight: bold;
 }

 .pattern-1 {
     top: 100px;
     left: -50px;
     transform: rotate(-15deg);
 }

 .pattern-2 {
     bottom: 80px;
     right: -50px;
     transform: rotate(15deg);
 }

 .hero-content {
     position: relative;
     z-index: 3;
 }

 .arabic-greeting {
     font-family: 'Scheherazade New', serif;
     color: var(--primary-teal);
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 20px;
     text-align: left;
 }

 .hero-title {
     font-size: 58px;
     font-weight: 700;
     color: #2d2d2d;
     line-height: 1.2;
     margin-bottom: 25px;
 }

 .hero-subtitle {
     font-size: 22px;
     font-weight: 600;
     color: var(--primary-teal);
     margin-bottom: 20px;
     line-height: 1.4;
 }

 .hero-description {
     font-size: 18px;
     color: #555;
     line-height: 1.8;
     margin-bottom: 35px;
 }

 .hero-image-container {
     position: relative;
     z-index: 3;
 }

 .hero-main-image {
     width: 100%;
     max-width: 600px;
     border-radius: 20px;
     overflow: hidden;
     transition: all 0.3s ease;
     margin: 0 auto;
     display: block;
 }

 .hero-main-image:hover {
     transform: translateY(-10px) scale(1.02);
 }

 .hero-main-image img {
     width: 100%;
     height: 500px;
     object-fit: cover;
     display: block;
 }

 /* ============================================================
           NOTICE BOARD
        ============================================================ */
 .nb-wrap {
     position: relative;
     z-index: 3;
     animation: fadeUp 0.9s 0.2s ease both;
 }

 .nb-board {
     background: #ffffff;
     border-radius: 14px;
     box-shadow: 0 4px 32px rgba(13, 115, 119, 0.13), 0 1px 4px rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(13, 115, 119, 0.1);
     overflow: hidden;
 }

 .nb-header {
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     padding: 13px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }

 .nb-header-left {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .nb-header-icon {
     width: 30px;
     height: 30px;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 14px;
 }

 .nb-header-title {
     font-family: 'Roboto', sans-serif;
     font-size: 12.5px;
     font-weight: 700;
     color: white;
     letter-spacing: 0.06em;
     text-transform: uppercase;
 }

 .nb-header-date {
     font-family: 'Roboto', sans-serif;
     font-size: 11px;
     color: rgba(255, 255, 255, 0.7);
 }

 .nb-wisdom {
     padding: 18px 20px 16px;
     border-bottom: 1px solid rgba(13, 115, 119, 0.08);
     background: #fafffe;
 }

 .nb-wisdom-label {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--primary-teal);
     margin-bottom: 12px;
 }

 .nb-wisdom-label::before {
     content: '';
     display: block;
     width: 3px;
     height: 13px;
     background: var(--gold);
     border-radius: 2px;
     flex-shrink: 0;
 }

 .nb-wisdom-type {
     display: inline-flex;
     align-items: center;
     background: rgba(200, 147, 58, 0.1);
     border: 1px solid rgba(200, 147, 58, 0.22);
     color: #9a6010;
     padding: 2px 10px;
     border-radius: 20px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-bottom: 11px;
     font-family: 'Roboto', sans-serif;
 }

 .nb-wisdom-arabic {
     font-family: "Al Majeed Quranic Font";
     font-weight: 500;
     font-size: 1.8rem;
     color: var(--green-deep);
     direction: rtl;
     text-align: right;
     line-height: 2;
     margin-bottom: 10px;
 }

 .nb-wisdom-divider {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 9px;
 }

 .nb-wisdom-divider-line {
     flex: 1;
     height: 1px;
     background: rgba(13, 115, 119, 0.1);
 }

 .nb-wisdom-divider-dot {
     width: 5px;
     height: 5px;
     background: var(--gold);
     border-radius: 50%;
     flex-shrink: 0;
 }

 .nb-wisdom-urdu {
     font-family: "Noto Nastaliq Urdu", serif;
     font-size: 0.96rem;
     color: var(--text-mid);
     direction: rtl;
     text-align: right;
     line-height: 1.9;
     margin-bottom: 8px;
     font-weight: 600;
 }

 .nb-wisdom-ref {
     font-family: 'Roboto', sans-serif;
     font-size: 10.5px;
     font-weight: 600;
     color: var(--text-soft);
     letter-spacing: 0.05em;
 }

 .nb-notices-header {
     padding: 12px 20px 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .nb-notices-label {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--text-mid);
 }

 .nb-notices-label::before {
     content: '';
     display: block;
     width: 3px;
     height: 13px;
     background: var(--primary-teal);
     border-radius: 2px;
     flex-shrink: 0;
 }

 .nb-bell-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     background: rgba(13, 115, 119, 0.07);
     border: 1px solid rgba(13, 115, 119, 0.15);
     border-radius: 20px;
     padding: 5px 12px;
     font-family: 'Roboto', sans-serif;
     font-size: 11px;
     font-weight: 700;
     color: var(--primary-teal);
     cursor: pointer;
     transition: all 0.25s ease;
     position: relative;
 }

 .nb-bell-btn:hover {
     background: var(--primary-teal);
     color: white;
     border-color: var(--primary-teal);
 }

 .nb-bell-badge {
     position: absolute;
     top: -5px;
     right: -5px;
     width: 16px;
     height: 16px;
     background: #e53e3e;
     color: white;
     border-radius: 50%;
     font-size: 9px;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid white;
 }

 .nb-notices-list {
     padding: 0 20px 16px;
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .nb-notice-row {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 9px 12px;
     border-radius: 7px;
     border: 1px solid rgba(13, 115, 119, 0.08);
     background: #f9fdfc;
     transition: border-color 0.2s, background 0.2s;
     cursor: pointer;
 }

 .nb-notice-row:hover {
     border-color: rgba(13, 115, 119, 0.18);
     background: #eef9f6;
 }

 .nb-notice-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--primary-teal);
     flex-shrink: 0;
     margin-top: 5px;
 }

 .nb-notice-dot.gold {
     background: var(--gold);
 }

 .nb-notice-text {
     flex: 1;
 }

 .nb-notice-title {
     font-family: 'Roboto', sans-serif;
     font-size: 12.5px;
     font-weight: 700;
     color: var(--text-dark);
     line-height: 1.3;
     margin-bottom: 2px;
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
 }

 .nb-notice-meta {
     font-size: 10.5px;
     color: var(--text-soft);
 }

 .nb-notice-tag {
     display: inline-block;
     padding: 1px 7px;
     border-radius: 10px;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
 }

 .nb-notice-tag--new {
     background: rgba(13, 115, 119, 0.1);
     color: var(--primary-teal);
 }

 .nb-notice-tag--imp {
     background: rgba(229, 62, 62, 0.1);
     color: #c53030;
 }

 /* ============================================================
           NOTIFICATION CENTER (Full-Screen Overlay)
        ============================================================ */
 .nc-overlay {
     position: fixed;
     inset: 0;
     background: rgba(10, 20, 14, 0.7);
     z-index: 9990;
     display: none;
     align-items: flex-start;
     justify-content: center;
     padding: 0;
     backdrop-filter: blur(5px);
 }

 .nc-overlay.open {
     display: flex;
 }

 .nc-panel {
     background: #fff;
     width: 100%;
     max-width: 700px;
     height: 100vh;
     display: flex;
     flex-direction: column;
     box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
     position: relative;
     animation: slideDown 0.35s ease;
     overflow: hidden;
 }

 @media (min-width: 769px) {
     .nc-overlay {
         padding: 40px 20px;
         align-items: center;
     }

     .nc-panel {
         height: 85vh;
         max-height: 800px;
         border-radius: 16px;
     }
 }

 .nc-header {
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     padding: 18px 22px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
 }

 .nc-header-left {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .nc-header-icon {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 18px;
 }

 .nc-header-title {
     color: white;
     font-family: 'Amiri', serif;
     font-size: 1.2rem;
     font-weight: 700;
     display: block;
 }

 .nc-header-sub {
     color: rgba(255, 255, 255, 0.65);
     font-size: 11px;
     font-family: 'Roboto', sans-serif;
     display: block;
 }

 .nc-close-btn {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.25);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     cursor: pointer;
     transition: background 0.2s;
     flex-shrink: 0;
 }

 .nc-close-btn:hover {
     background: rgba(255, 255, 255, 0.28);
 }

 .nc-tabs {
     display: flex;
     border-bottom: 2px solid rgba(13, 115, 119, 0.1);
     background: #f9fdfc;
     flex-shrink: 0;
 }

 .nc-tab {
     flex: 1;
     padding: 11px 10px;
     text-align: center;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--text-soft);
     border: none;
     background: transparent;
     cursor: pointer;
     border-bottom: 3px solid transparent;
     margin-bottom: -2px;
     transition: all 0.25s ease;
 }

 .nc-tab.active {
     color: var(--primary-teal);
     border-bottom-color: var(--primary-teal);
 }

 .nc-tab:hover {
     color: var(--primary-teal);
 }

 .nc-body {
     flex: 1;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 /* List view */
 .nc-list-view {
     flex: 1;
     overflow-y: auto;
     padding: 14px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .nc-list-view.hidden {
     display: none;
 }

 .nc-item {
     border: 1px solid rgba(13, 115, 119, 0.1);
     border-left: 4px solid var(--primary-teal);
     border-radius: 10px;
     padding: 14px 16px;
     cursor: pointer;
     transition: all 0.25s ease;
     background: #fff;
     display: flex;
     gap: 14px;
     align-items: flex-start;
 }

 .nc-item.imp {
     border-left-color: #e53e3e;
 }

 .nc-item.gold {
     border-left-color: var(--gold);
 }

 .nc-item:hover {
     box-shadow: 0 4px 18px rgba(13, 115, 119, 0.12);
     transform: translateY(-1px);
     background: #f9fdfc;
 }

 .nc-item-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: rgba(13, 115, 119, 0.08);
     border: 1px solid rgba(13, 115, 119, 0.14);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: var(--primary-teal);
     flex-shrink: 0;
 }

 .nc-item.imp .nc-item-icon {
     background: rgba(229, 62, 62, 0.08);
     border-color: rgba(229, 62, 62, 0.18);
     color: #e53e3e;
 }

 .nc-item.gold .nc-item-icon {
     background: rgba(200, 147, 58, 0.08);
     border-color: rgba(200, 147, 58, 0.18);
     color: var(--gold);
 }

 .nc-item-body {
     flex: 1;
     min-width: 0;
 }

 .nc-item-title-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 5px;
 }

 .nc-item-title {
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     font-weight: 700;
     color: var(--text-dark);
     line-height: 1.3;
 }

 .nc-item-tags {
     display: flex;
     gap: 5px;
     flex-shrink: 0;
 }

 .nc-tag {
     display: inline-block;
     padding: 2px 8px;
     border-radius: 10px;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
 }

 .nc-tag-new {
     background: rgba(13, 115, 119, 0.1);
     color: var(--primary-teal);
 }

 .nc-tag-imp {
     background: rgba(229, 62, 62, 0.1);
     color: #c53030;
 }

 .nc-tag-event {
     background: rgba(200, 147, 58, 0.1);
     color: #9a6010;
 }

 .nc-item-excerpt {
     font-size: 12.5px;
     color: var(--text-mid);
     line-height: 1.6;
     margin-bottom: 8px;
 }

 .nc-item-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .nc-item-date {
     font-size: 11px;
     color: var(--text-soft);
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .nc-item-date i {
     color: var(--gold);
     font-size: 10px;
 }

 .nc-item-arrow {
     font-size: 11px;
     color: var(--primary-teal);
 }

 /* Detail view */
 .nc-detail-view {
     flex: 1;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
 }

 .nc-detail-view.hidden {
     display: none;
 }

 .nc-detail-back {
     padding: 12px 18px;
     border-bottom: 1px solid rgba(13, 115, 119, 0.08);
     background: #f9fdfc;
     flex-shrink: 0;
 }

 .nc-back-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     font-weight: 700;
     color: var(--primary-teal);
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 6px 0;
     transition: gap 0.2s;
 }

 .nc-back-btn:hover {
     gap: 12px;
 }

 .nc-detail-content {
     flex: 1;
     padding: 20px 22px;
     overflow-y: auto;
 }

 .nc-detail-header {
     margin-bottom: 18px;
 }

 .nc-detail-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(13, 115, 119, 0.08);
     border: 1px solid rgba(13, 115, 119, 0.15);
     border-radius: 20px;
     padding: 4px 12px;
     font-size: 11px;
     font-weight: 700;
     color: var(--primary-teal);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     margin-bottom: 12px;
 }

 .nc-detail-badge.imp {
     background: rgba(229, 62, 62, 0.08);
     border-color: rgba(229, 62, 62, 0.15);
     color: #c53030;
 }

 .nc-detail-badge.gold-badge {
     background: rgba(200, 147, 58, 0.08);
     border-color: rgba(200, 147, 58, 0.18);
     color: #9a6010;
 }

 .nc-detail-title {
     font-family: 'Amiri', serif;
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.25;
     margin-bottom: 10px;
 }

 .nc-detail-meta {
     display: flex;
     align-items: center;
     gap: 16px;
     font-size: 12px;
     color: var(--text-soft);
     flex-wrap: wrap;
     margin-bottom: 18px;
     padding-bottom: 18px;
     border-bottom: 1px solid rgba(13, 115, 119, 0.08);
 }

 .nc-detail-meta span {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .nc-detail-meta i {
     color: var(--gold);
 }

 .nc-detail-img {
     width: 100%;
     border-radius: 12px;
     overflow: hidden;
     margin-bottom: 18px;
     background: rgba(13, 115, 119, 0.06);
 }

 .nc-detail-img img {
     width: 100%;
     height: 400px;
     object-fit: cover;
     display: block;
 }

 .nc-detail-img.no-img {
     display: none;
 }

 .nc-detail-body {
     font-size: 14px;
     color: var(--text-mid);
     line-height: 1.8;
     margin-bottom: 20px;
 }

 .nc-detail-body p {
     margin-bottom: 12px;
 }

 .nc-detail-body strong {
     color: var(--text-dark);
 }

 .nc-detail-action {
     padding: 16px 22px;
     border-top: 1px solid rgba(13, 115, 119, 0.08);
     background: #f9fdfc;
     flex-shrink: 0;
 }

 .nc-action-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 11px 28px;
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     color: white;
     border: none;
     border-radius: 8px;
     font-family: 'Roboto', sans-serif;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 4px 14px rgba(13, 115, 119, 0.3);
 }

 .nc-action-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(13, 115, 119, 0.4);
     color: white;
 }

 .nc-action-btn-secondary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 11px 22px;
     background: transparent;
     color: var(--primary-teal);
     border: 2px solid var(--primary-teal);
     border-radius: 8px;
     font-family: 'Roboto', sans-serif;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
     margin-left: 10px;
 }

 .nc-action-btn-secondary:hover {
     background: var(--primary-teal);
     color: white;
 }

 /* Empty state */
 .nc-empty {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 60px 20px;
     color: var(--text-soft);
     text-align: center;
 }

 .nc-empty i {
     font-size: 3rem;
     margin-bottom: 14px;
     color: rgba(13, 115, 119, 0.2);
 }

 .nc-empty p {
     font-size: 14px;
 }

 @media (max-width: 991px) {
     .nb-wrap {
         margin-top: 34px;
     }
 }

 @media (max-width: 576px) {
     .nb-wisdom {
         padding: 14px 15px 13px;
     }

     .nb-notices-list {
         padding: 0 15px 13px;
     }

     .nb-notices-header {
         padding: 11px 15px 7px;
     }

     .nb-wisdom-arabic {
         font-size: 1.04rem;
     }

     .nb-wisdom-urdu {
         font-size: 0.88rem;
     }
 }

 /* ============================================================
           ABOUT SECTION
        ============================================================ */
 .about-section {
     position: relative;
     overflow: hidden;
     padding: 96px 4% 110px;
     background: var(--white);
 }

 .about-section::after {
     content: '';
     position: absolute;
     inset: 0 0 0 50%;
     background: linear-gradient(to right, transparent, rgba(237, 232, 220, 0.38));
     pointer-events: none;
     z-index: 0;
 }

 .about-blob {
     position: absolute;
     width: 480px;
     height: 480px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(31, 107, 65, 0.06) 0%, transparent 70%);
     top: -100px;
     right: -120px;
     pointer-events: none;
     z-index: 0;
 }

 .about-inner {
     position: relative;
     z-index: 1;
     max-width: 100%;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: center;
 }

 .about-img-col {
     position: relative;
     animation: fadeUp 0.8s 0.1s ease both;
 }

 .about-img-col::before {
     content: '';
     position: absolute;
     top: -14px;
     left: -14px;
     width: 60px;
     height: 60px;
     border-top: 3px solid var(--gold);
     border-left: 3px solid var(--gold);
     border-radius: 4px 0 0 0;
     z-index: 2;
 }

 .about-img-col::after {
     content: '';
     position: absolute;
     bottom: -14px;
     right: -14px;
     width: 60px;
     height: 60px;
     border-bottom: 3px solid var(--gold);
     border-right: 3px solid var(--gold);
     border-radius: 0 0 4px 0;
     z-index: 2;
 }

 .about-img-frame {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 6px 32px rgba(20, 68, 42, 0.14), 0 1px 6px rgba(20, 68, 42, 0.07);
 }

 .about-img-frame::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, transparent 60%, rgba(20, 68, 42, 0.18) 100%);
     pointer-events: none;
 }

 .about-img-frame img {
     width: 100%;
     height: 500px;
     object-fit: cover;
     display: block;
     filter: saturate(0.92);
     transition: transform 0.6s ease, filter 0.4s ease;
 }

 .about-img-frame:hover img {
     transform: scale(1.03);
     filter: saturate(1.05);
 }

 .about-year-badge {
     position: absolute;
     bottom: clamp(16px, 3vw, 28px);
     left: clamp(-20px, -2.5vw, -24px);
     background: var(--green-deep);
     border-radius: clamp(8px, 1.2vw, 12px);
     padding: clamp(10px, 1.4vw, 16px) clamp(12px, 1.8vw, 22px);
     box-shadow: 0 8px 28px rgba(20, 68, 42, 0.28);
     z-index: 3;
     text-align: center;
 }

 .about-year-badge .badge-year {
     font-family: 'Amiri', serif;
     font-size: clamp(1.2rem, 2.5vw, 2rem);
     font-weight: 700;
     color: var(--gold);
     line-height: 1;
     display: block;
 }

 .about-year-badge .badge-since {
     font-size: clamp(0.5rem, 0.8vw, 0.7rem);
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.6);
     margin-top: 3px;
     display: block;
 }

 .about-content-col {
     animation: fadeUp 0.8s 0.25s ease both;
 }

 .about-heading {
     font-family: 'Amiri', serif;
     font-size: clamp(1.9rem, 4vw, 2.9rem);
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.18;
     margin-bottom: 10px;
 }

 .about-heading em {
     font-style: italic;
     color: var(--gold);
 }

 .about-rule {
     display: block;
     width: 56px;
     height: 3px;
     background: linear-gradient(to right, var(--gold), var(--gold-light));
     border-radius: 4px;
     margin: 16px 0 24px;
 }

 .about-body p {
     font-size: 0.925rem;
     color: var(--text-mid);
     line-height: 1.82;
     margin-bottom: 14px;
 }

 .about-pull {
     border-left: 3px solid var(--gold);
     padding: 10px 18px;
     margin: 4px 0 20px;
     background: rgba(200, 147, 58, 0.06);
     border-radius: 0 8px 8px 0;
 }

 .about-pull p {
     font-family: 'Amiri', serif;
     font-size: 1.05rem !important;
     color: var(--green-deep) !important;
     font-style: italic;
     margin: 0 !important;
     line-height: 1.6 !important;
 }

 /* ============================================================
           STATS SECTION
        ============================================================ */
 .stats-section {
     position: relative;
     overflow: visible;
     padding: 68px 4% 68px;
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
 }

 .stats-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.06'%3E%3Cpolygon points='40,2 78,21 78,59 40,78 2,59 2,21'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: repeat;
     pointer-events: none;
     z-index: 0;
 }

 .stats-zz-top,
 .stats-zz-bottom {
     position: absolute;
     left: 0;
     width: 100%;
     line-height: 0;
     overflow: hidden;
     z-index: 2;
 }

 .stats-zz-top {
     top: -1px;
 }

 .stats-zz-bottom {
     bottom: -1px;
     transform: rotate(180deg);
 }

 .stats-zz-top svg,
 .stats-zz-bottom svg {
     display: block;
     width: 100%;
     height: 28px;
 }

 .stats-inner {
     position: relative;
     z-index: 1;
     max-width: 100%;
     margin: 0 auto;
 }

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

 .stat-card {
     background: var(--overlay-light);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 22px 18px;
     text-align: center;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
 }

 .stat-card::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     opacity: 0;
     transition: opacity 0.4s ease;
 }

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

 .stat-card:hover {
     background: rgba(255, 255, 255, 0.18);
     transform: translateY(-6px);
     box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
 }

 .stat-icon {
     width: 48px;
     height: 48px;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 14px;
     color: var(--gold-light);
     font-size: 20px;
     transition: all 0.4s ease;
     position: relative;
     z-index: 1;
 }

 .stat-card:hover .stat-icon {
     background: rgba(255, 255, 255, 0.25);
     transform: scale(1.1) rotate(5deg);
 }

 .stat-number {
     font-family: 'Amiri', serif;
     font-size: 2.4rem;
     font-weight: 700;
     color: var(--white);
     line-height: 1;
     margin-bottom: 8px;
     display: block;
     position: relative;
     z-index: 1;
 }

 .stat-number span {
     color: var(--gold-light);
     font-size: 1.8rem;
 }

 .stat-label {
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.9);
     position: relative;
     z-index: 1;
 }

 .stat-description {
     font-size: 0.72rem;
     color: rgba(255, 255, 255, 0.65);
     margin-top: 5px;
     line-height: 1.4;
     position: relative;
     z-index: 1;
 }

 @keyframes countUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 .stat-card.counted {
     animation: countUp 0.8s ease both;
 }

 @media (max-width: 900px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 12px;
     }

     .stats-section {
         padding: 58px 4%;
     }

     .stat-card {
         padding: 18px 12px;
     }

     .stat-number {
         font-size: 1.9rem;
     }

     .stat-icon {
         width: 40px;
         height: 40px;
         font-size: 16px;
         margin-bottom: 10px;
     }

     .stats-zz-top svg,
     .stats-zz-bottom svg {
         height: 18px;
     }
 }

 /* ============================================================
           DEPARTMENTS SECTION
        ============================================================ */
 .dept-section {
     position: relative;
     overflow: hidden;
     padding: 90px 4% 110px;
     background: var(--cream);
 }

 .dept-section::after {
     content: '';
     position: absolute;
     width: 520px;
     height: 520px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(31, 107, 65, 0.07) 0%, transparent 70%);
     top: -120px;
     left: -160px;
     pointer-events: none;
     z-index: 0;
 }

 .dept-blob-right {
     position: absolute;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(200, 147, 58, 0.06) 0%, transparent 70%);
     bottom: -80px;
     right: -100px;
     pointer-events: none;
     z-index: 0;
 }

 .dept-inner {
     position: relative;
     z-index: 1;
     max-width: 100%;
     margin: 0 auto;
 }

 .dept-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 52px;
     gap: 20px;
     flex-wrap: wrap;
     animation: fadeUp 0.7s ease both;
 }

 .dept-heading {
     font-family: 'Amiri', serif;
     font-size: clamp(2rem, 4.5vw, 3.2rem);
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.15;
     margin-bottom: 10px;
 }

 .dept-heading em {
     font-style: italic;
     color: var(--gold);
 }

 .dept-subtext {
     font-size: 0.92rem;
     color: var(--text-soft);
     max-width: 420px;
     line-height: 1.7;
 }

 .dept-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 52px;
     align-items: start;
 }

 .dept-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .dept-item {
     display: flex;
     gap: 24px;
     align-items: flex-start;
     padding: 28px 0;
     border-bottom: 1px solid var(--border);
     position: relative;
     cursor: default;
     transition: background 0.3s ease, padding 0.3s ease;
 }

 .dept-item:first-child {
     padding-top: 4px;
 }

 .dept-item:last-child {
     border-bottom: none;
 }

 .dept-item::before {
     content: '';
     position: absolute;
     left: -20px;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 0;
     background: linear-gradient(to bottom, var(--gold), var(--gold-light));
     border-radius: 4px;
     transition: height 0.35s ease;
 }

 .dept-item:hover::before {
     height: 68%;
 }

 .dept-item:hover {
     background: rgba(31, 107, 65, 0.025);
 }

 .dept-num {
     font-family: 'Amiri', serif;
     font-size: 2.8rem;
     font-weight: 700;
     line-height: 1;
     color: var(--green-mid);
     opacity: 0.18;
     min-width: 52px;
     transition: opacity 0.3s, color 0.3s;
     user-select: none;
 }

 .dept-item:hover .dept-num {
     opacity: 0.55;
     color: var(--gold);
 }

 .dept-body {
     flex: 1;
 }

 .dept-name {
     font-family: 'Amiri', serif;
     font-size: 1.28rem;
     font-weight: 700;
     color: var(--green-deep);
     margin-bottom: 7px;
     transition: color 0.3s;
 }

 .dept-item:hover .dept-name {
     color: var(--green-mid);
 }

 .dept-name::after {
     content: '';
     display: block;
     width: 0;
     height: 2px;
     background: var(--gold);
     margin-top: 4px;
     transition: width 0.35s ease;
 }

 .dept-item:hover .dept-name::after {
     width: 40px;
 }

 .dept-desc {
     font-size: 0.88rem;
     color: var(--text-mid);
     line-height: 1.72;
 }

 .dept-link {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     margin-top: 10px;
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--green-mid);
     text-decoration: none;
     opacity: 0;
     transform: translateX(-8px);
     transition: opacity 0.3s, transform 0.3s, color 0.3s;
 }

 .dept-item:hover .dept-link {
     opacity: 1;
     transform: translateX(0);
 }

 .dept-link:hover {
     color: var(--gold);
 }

 @media (hover: none),
 (max-width: 1024px) {
     .dept-link {
         opacity: 1 !important;
         transform: translateX(0) !important;
     }
 }

 .dept-visual {
     position: sticky;
     top: 120px;
 }

 .dept-visual-deco {
     position: absolute;
     top: 20px;
     right: -16px;
     width: calc(100% - 16px);
     height: calc(100% - 10px);
     border: 2px solid var(--border);
     border-radius: 20px;
     z-index: -1;
 }

 .dept-visual-frame {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 4px 24px rgba(20, 68, 42, 0.12), 0 1px 4px rgba(20, 68, 42, 0.07);
 }

 .dept-visual-frame::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(200, 147, 58, 0.10) 0%, transparent 45%, rgba(31, 107, 65, 0.07) 100%);
     z-index: 2;
     pointer-events: none;
 }

 .dept-visual-frame img {
     width: 100%;
     height: 630px;
     object-fit: cover;
     display: block;
     filter: saturate(0.95);
     transition: transform 0.6s ease, filter 0.4s;
 }

 .dept-visual-frame:hover img {
     filter: saturate(1.05);
     transform: scale(1.02);
 }

 .dept-item:nth-child(1) {
     animation: fadeUp 0.7s 0.15s ease both;
 }

 .dept-item:nth-child(2) {
     animation: fadeUp 0.7s 0.28s ease both;
 }

 .dept-item:nth-child(3) {
     animation: fadeUp 0.7s 0.41s ease both;
 }

 .dept-visual {
     animation: fadeUp 0.8s 0.20s ease both;
 }

 @media (max-width: 900px) {
     .dept-grid {
         grid-template-columns: 1fr;
         gap: 52px;
     }

     .dept-visual {
         order: -1;
         max-width: 560px;
         margin: 0 auto;
         width: 100%;
         position: relative;
         top: 0;
     }

     .dept-visual-deco {
         display: none;
     }

     .dept-visual-frame img {
         height: 420px;
     }

     .dept-section {
         padding: 60px 3.5% 80px;
     }
 }

 @media (max-width: 600px) {
     .dept-section {
         padding: 60px 4% 80px;
     }

     .dept-heading {
         font-size: 2rem;
     }

     .dept-item {
         gap: 16px;
     }

     .dept-num {
         font-size: 2.2rem;
         min-width: 42px;
     }

     .dept-visual-frame img {
         height: 320px;
     }
 }

 /* ============================================================
           GALLERY SECTION
        ============================================================ */
 .gallery-section {
     position: relative;
     overflow: hidden;
     padding: 96px 4% 110px;
     background: var(--white);
 }

 .gallery-section::after {
     content: '';
     position: absolute;
     inset: 0 0 0 55%;
     background: linear-gradient(to right, transparent, rgba(248, 244, 236, 0.4));
     pointer-events: none;
     z-index: 0;
 }

 .gallery-blob {
     position: absolute;
     width: 440px;
     height: 440px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(13, 115, 119, 0.06) 0%, transparent 70%);
     top: -100px;
     left: -120px;
     pointer-events: none;
     z-index: 0;
 }

 .gallery-inner {
     position: relative;
     z-index: 1;
     max-width: 100%;
     margin: 0 auto;
 }

 .gallery-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 44px;
     gap: 20px;
     flex-wrap: wrap;
     animation: fadeUp 0.7s ease both;
 }

 .gallery-heading {
     font-family: 'Amiri', serif;
     font-size: clamp(2rem, 4.5vw, 3.2rem);
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.15;
     margin-bottom: 10px;
 }

 .gallery-heading em {
     font-style: italic;
     color: var(--gold);
 }

 .gallery-subtext {
     font-size: 0.92rem;
     color: var(--text-soft);
     max-width: 400px;
     line-height: 1.7;
 }

 .gallery-view-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 12px 28px;
     border: 2px solid var(--primary-teal);
     border-radius: 6px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--primary-teal);
     text-decoration: none;
     transition: all 0.35s ease;
     position: relative;
     overflow: hidden;
     white-space: nowrap;
     flex-shrink: 0;
     align-self: center;
 }

 .gallery-view-btn::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--primary-teal);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease;
     z-index: 0;
 }

 .gallery-view-btn:hover::before {
     transform: scaleX(1);
 }

 .gallery-view-btn:hover {
     color: white;
 }

 .gallery-view-btn span,
 .gallery-view-btn i {
     position: relative;
     z-index: 1;
 }

 .gallery-mosaic {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: repeat(3, 220px);
     gap: 12px;
 }

 .gcell:nth-child(1) {
     grid-column: 1 / 6;
     grid-row: 1 / 3;
 }

 .gcell:nth-child(2) {
     grid-column: 6 / 9;
     grid-row: 1 / 2;
 }

 .gcell:nth-child(3) {
     grid-column: 9 / 13;
     grid-row: 1 / 2;
 }

 .gcell:nth-child(4) {
     grid-column: 6 / 9;
     grid-row: 2 / 3;
 }

 .gcell:nth-child(5) {
     grid-column: 9 / 13;
     grid-row: 2 / 3;
 }

 .gcell:nth-child(6) {
     grid-column: 1 / 5;
     grid-row: 3 / 4;
 }

 .gcell:nth-child(7) {
     grid-column: 5 / 9;
     grid-row: 3 / 4;
 }

 .gcell:nth-child(8) {
     grid-column: 9 / 13;
     grid-row: 3 / 4;
 }

 .gcell {
     position: relative;
     border-radius: 14px;
     overflow: hidden;
     cursor: pointer;
     animation: fadeUp 0.7s ease both;
 }

 .gcell-img {
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .gcell:hover .gcell-img {
     transform: scale(1.07);
 }

 .gcell-pattern {
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.07'%3E%3Cpolygon points='30,2 58,16 58,44 30,58 2,44 2,16'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: repeat;
 }

 .gcell-overlay-base {
     position: absolute;
     inset: 0;
     z-index: 2;
     background: linear-gradient(to top, rgba(10, 26, 18, 0.8) 0%, rgba(10, 26, 18, 0.2) 45%, transparent 100%);
 }

 .gcell-overlay-hover {
     position: absolute;
     inset: 0;
     z-index: 2;
     opacity: 0;
     background: linear-gradient(to top, rgba(13, 115, 119, 0.88) 0%, rgba(13, 115, 119, 0.45) 55%, transparent 100%);
     transition: opacity 0.4s ease;
 }

 .gcell:hover .gcell-overlay-hover {
     opacity: 1;
 }

 .gcell-tag {
     position: absolute;
     top: 12px;
     left: 12px;
     z-index: 5;
     background: rgba(10, 26, 18, 0.7);
     backdrop-filter: blur(6px);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 20px;
     padding: 4px 11px;
     font-size: 9.5px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.88);
     transition: background 0.3s;
 }

 .gcell:hover .gcell-tag {
     background: rgba(200, 147, 58, 0.88);
     border-color: rgba(200, 147, 58, 0.4);
 }

 .gcell-zoom {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 5;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.14);
     border: 1px solid rgba(255, 255, 255, 0.22);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 13px;
     opacity: 0;
     transform: scale(0.7) rotate(-15deg);
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .gcell:hover .gcell-zoom {
     opacity: 1;
     transform: scale(1) rotate(0deg);
 }

 .gcell-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 18px 16px 16px;
     z-index: 4;
 }

 .gcell-title {
     font-family: 'Amiri', serif;
     font-size: clamp(0.88rem, 1.5vw, 1.05rem);
     font-weight: 700;
     color: #ffffff;
     line-height: 1.3;
     margin-bottom: 4px;
     display: block;
 }

 .gcell-meta {
     font-size: 0.7rem;
     color: rgba(255, 255, 255, 0.6);
     display: flex;
     align-items: center;
     gap: 5px;
     opacity: 0;
     transform: translateY(8px);
     transition: opacity 0.35s 0.05s ease, transform 0.35s 0.05s ease;
 }

 .gcell:hover .gcell-meta {
     opacity: 1;
     transform: translateY(0);
 }

 .gcell-meta i {
     font-size: 9px;
     color: var(--gold-light);
 }

 .gcell:nth-child(1)::after {
     content: '';
     position: absolute;
     left: 0;
     top: 12%;
     bottom: 12%;
     width: 4px;
     background: linear-gradient(to bottom, transparent, var(--gold), transparent);
     z-index: 6;
     border-radius: 4px;
 }

 .gallery-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin-top: 40px;
     flex-wrap: wrap;
     animation: fadeUp 0.7s 0.5s ease both;
 }

 .gallery-count-note {
     font-size: 0.85rem;
     color: var(--text-soft);
 }

 .gallery-count-note strong {
     color: var(--primary-teal);
     font-weight: 700;
 }

 @media (max-width: 1024px) {
     .gallery-mosaic {
         grid-template-columns: repeat(6, 1fr);
         grid-template-rows: repeat(4, 190px);
     }

     .gcell:nth-child(1) {
         grid-column: 1 / 4;
         grid-row: 1 / 3;
     }

     .gcell:nth-child(2) {
         grid-column: 4 / 7;
         grid-row: 1 / 2;
     }

     .gcell:nth-child(3) {
         grid-column: 4 / 7;
         grid-row: 2 / 3;
     }

     .gcell:nth-child(4) {
         grid-column: 1 / 3;
         grid-row: 3 / 4;
     }

     .gcell:nth-child(5) {
         grid-column: 3 / 5;
         grid-row: 3 / 4;
     }

     .gcell:nth-child(6) {
         grid-column: 5 / 7;
         grid-row: 3 / 4;
     }

     .gcell:nth-child(7) {
         grid-column: 1 / 4;
         grid-row: 4 / 5;
     }

     .gcell:nth-child(8) {
         grid-column: 4 / 7;
         grid-row: 4 / 5;
     }
 }

 @media (max-width: 768px) {
     .gallery-section {
         padding: 70px 4% 80px;
     }

     .gallery-mosaic {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(5, 170px);
         gap: 8px;
     }

     .gcell:nth-child(1) {
         grid-column: 1 / 3;
         grid-row: 1 / 2;
     }

     .gcell:nth-child(2) {
         grid-column: 1 / 2;
         grid-row: 2 / 3;
     }

     .gcell:nth-child(3) {
         grid-column: 2 / 3;
         grid-row: 2 / 3;
     }

     .gcell:nth-child(4) {
         grid-column: 1 / 2;
         grid-row: 3 / 4;
     }

     .gcell:nth-child(5) {
         grid-column: 2 / 3;
         grid-row: 3 / 4;
     }

     .gcell:nth-child(6) {
         grid-column: 1 / 2;
         grid-row: 4 / 5;
     }

     .gcell:nth-child(7) {
         grid-column: 2 / 3;
         grid-row: 4 / 5;
     }

     .gcell:nth-child(8) {
         grid-column: 1 / 3;
         grid-row: 5 / 6;
     }

     .gallery-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 14px;
     }
 }

 @media (max-width: 480px) {
     .gallery-mosaic {
         grid-template-rows: repeat(5, 145px);
         gap: 6px;
     }

     .gcell {
         border-radius: 10px;
     }
 }

 /* ============================================================
           DONATION SECTION
        ============================================================ */
 .donation-section {
     position: relative;
     overflow: visible;
     padding: 72px 4%;
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     text-align: center;
 }

 .donation-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.06'%3E%3Cpolygon points='40,2 78,21 78,59 40,78 2,59 2,21'/%3E%3Cpolygon points='40,14 66,27 66,53 40,66 14,53 14,27'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: repeat;
     pointer-events: none;
     z-index: 0;
 }

 .donation-bg-calligraphy {
     position: absolute;
     font-family: 'Scheherazade New', serif;
     font-size: clamp(140px, 22vw, 320px);
     font-weight: 700;
     color: rgba(255, 255, 255, 0.04);
     top: 50%;
     right: -1%;
     transform: translateY(-50%);
     pointer-events: none;
     z-index: 0;
     line-height: 1;
     user-select: none;
     white-space: nowrap;
 }

 .donation-zz-top,
 .donation-zz-bottom {
     position: absolute;
     left: 0;
     width: 100%;
     line-height: 0;
     overflow: hidden;
     z-index: 2;
 }

 .donation-zz-top {
     top: -1px;
 }

 .donation-zz-bottom {
     bottom: -1px;
     transform: rotate(180deg);
     
 }

 .donation-zz-top svg,
 .donation-zz-bottom svg {
     display: block;
     width: 100%;
     height: 28px;
 }

 .donation-inner {
     position: relative;
     z-index: 1;
     max-width: 700px;
     margin: 0 auto;
     animation: fadeUp 0.8s 0.1s ease both;
 }

 .donation-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: var(--gold-light);
     margin-bottom: 14px;
     justify-content: center;
 }

 .donation-eyebrow span {
     display: block;
     width: 24px;
     height: 1px;
     background: var(--gold-light);
 }

 .donation-heading {
     font-family: 'Amiri', serif;
     font-size: clamp(1.6rem, 3.5vw, 2.4rem);
     font-weight: 700;
     color: #ffffff;
     line-height: 1.25;
     margin-bottom: 0;
 }

 .donation-heading em {
     font-style: italic;
     color: var(--gold-light);
 }

 .donation-rule {
     display: block;
     width: 50px;
     height: 2px;
     background: linear-gradient(to right, var(--gold), var(--gold-light));
     border-radius: 4px;
     margin: 14px auto 22px;
 }

 .donation-verse-card {
     background: var(--overlay-light);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: 14px;
     padding: 24px 32px;
     margin-bottom: 28px;
 }

 .donation-arabic-verse {
     font-family: 'Scheherazade New', serif;
     font-size: clamp(1.1rem, 2.2vw, 1.45rem);
     font-weight: 700;
     color: var(--gold-light);
     direction: rtl;
     line-height: 2;
     display: block;
     margin-bottom: 14px;
 }

 .donation-verse-divider {
     display: flex;
     align-items: center;
     gap: 10px;
     justify-content: center;
     margin-bottom: 12px;
 }

 .donation-verse-divider-line {
     width: 32px;
     height: 1px;
     background: rgba(255, 255, 255, 0.25);
 }

 .donation-verse-divider-diamond {
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.4);
     transform: rotate(45deg);
 }

 .donation-translation {
     font-family: 'Amiri', serif;
     font-size: clamp(0.88rem, 1.6vw, 1rem);
     font-style: italic;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.75;
     display: block;
     margin-bottom: 10px;
 }

 .donation-verse-ref {
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.4);
     display: block;
 }

 .donation-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 13px 40px;
     background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
     color: var(--green-deep);
     border-radius: 6px;
     border: none;
     font-family: 'Roboto', sans-serif;
     font-size: 0.9rem;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     text-decoration: none;
     transition: all 0.35s ease;
     box-shadow: 0 4px 20px rgba(200, 147, 58, 0.4);
 }

 .donation-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 28px rgba(200, 147, 58, 0.55);
     color: var(--green-deep);
 }

 .donation-trust {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin-top: 14px;
     font-size: 0.74rem;
     color: rgba(255, 255, 255, 0.45);
 }

 .donation-trust i {
     color: rgba(255, 255, 255, 0.5);
     font-size: 12px;
 }

 @media (max-width: 768px) {
     .donation-section {
         padding: 62px 4%;
     }

     .donation-verse-card {
         padding: 20px 22px;
     }
 }

 @media (max-width: 576px) {
     .donation-section {
         padding: 56px 4%;
     }

     .donation-verse-card {
         padding: 18px 16px;
         border-radius: 10px;
     }

     .donation-zz-top svg,
     .donation-zz-bottom svg {
         height: 18px;
     }
 }



 /* ============================================================
            PUBLICATIONS SECTION
            ============================================================ */
 .pub-section {
     position: relative;
     overflow: hidden;
     padding: 96px 4% 110px;
     background: var(--white);
 }

 .pub-blob-tl {
     position: absolute;
     width: 460px;
     height: 460px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(13, 115, 119, 0.06) 0%, transparent 70%);
     top: -120px;
     right: -100px;
     pointer-events: none;
     z-index: 0;
 }

 .pub-blob-br {
     position: absolute;
     width: 320px;
     height: 320px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(200, 147, 58, 0.06) 0%, transparent 70%);
     bottom: -80px;
     left: -80px;
     pointer-events: none;
     z-index: 0;
 }

 .pub-inner {
     position: relative;
     z-index: 1;
 }

 /* Header */
 .pub-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 56px;
     gap: 20px;
     flex-wrap: wrap;
     animation: fadeUp 0.7s ease both;
 }

 .pub-heading {
     font-family: 'Amiri', serif;
     font-size: clamp(2rem, 4.5vw, 3.2rem);
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.15;
     margin-bottom: 10px;
 }

 .pub-heading em {
     font-style: italic;
     color: var(--gold);
 }

 .pub-subtext {
     font-size: 0.92rem;
     color: var(--text-soft);
     max-width: 400px;
     line-height: 1.7;
 }

 .pub-view-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 12px 28px;
     border: 2px solid var(--primary-teal);
     border-radius: 6px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--primary-teal);
     text-decoration: none;
     transition: all 0.35s ease;
     position: relative;
     overflow: hidden;
     white-space: nowrap;
     flex-shrink: 0;
     align-self: center;
 }

 .pub-view-btn::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--primary-teal);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease;
     z-index: 0;
 }

 .pub-view-btn:hover::before {
     transform: scaleX(1);
 }

 .pub-view-btn:hover {
     color: white;
 }

 .pub-view-btn span,
 .pub-view-btn i {
     position: relative;
     z-index: 1;
 }

 /* Card */
 .pub-feature-wrap {
     display: grid;
     grid-template-columns: 1fr 1.3fr;
     gap: 0;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 8px 48px rgba(20, 68, 42, 0.14), 0 2px 8px rgba(0, 0, 0, 0.07);
     border: 1px solid rgba(200, 147, 58, 0.18);
     animation: fadeUp 0.8s 0.1s ease both;
 }

 /* Book image panel */
 .pub-book-panel {
     background: linear-gradient(155deg, #0f2d1e 0%, #14442a 40%, #0d5a5e 100%);
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 56px 48px;
     min-height: 560px;
 }

 .pub-book-panel::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.05'%3E%3Cpolygon points='40,2 78,21 78,59 40,78 2,59 2,21'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: repeat;
     pointer-events: none;
 }

 /* glow behind image */
 .pub-book-panel::after {
     content: '';
     position: absolute;
     width: 340px;
     height: 420px;
     border-radius: 50%;
     background: radial-gradient(ellipse, rgba(200, 147, 58, 0.18) 0%, transparent 70%);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
 }

 .pub-badge-new {
     position: absolute;
     top: 26px;
     right: 26px;
     z-index: 10;
     background: var(--gold);
     color: var(--green-deep);
     font-family: 'Roboto', sans-serif;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     padding: 6px 16px;
     border-radius: 20px;
     box-shadow: 0 4px 14px rgba(200, 147, 58, 0.5);
     animation: badgePulse 2.8s ease-in-out infinite;
 }

 @keyframes badgePulse {

     0%,
     100% {
         box-shadow: 0 4px 14px rgba(200, 147, 58, 0.45);
     }

     50% {
         box-shadow: 0 4px 28px rgba(200, 147, 58, 0.80);
     }
 }

 /* The book image itself */
 .pub-book-img {
     position: relative;
     z-index: 2;
     width: 240px;
     border-radius: 4px 10px 10px 4px;
     box-shadow:
         -6px 6px 32px rgba(0, 0, 0, 0.55),
         6px 6px 24px rgba(0, 0, 0, 0.35),
         0 2px 6px rgba(0, 0, 0, 0.2);
     display: block;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     animation: bookFloat 5s ease-in-out infinite;
 }

 @keyframes bookFloat {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-14px);
     }
 }

 .pub-book-img:hover {
     transform: translateY(-6px) scale(1.02);
     box-shadow:
         -8px 12px 40px rgba(0, 0, 0, 0.6),
         8px 8px 30px rgba(0, 0, 0, 0.35);
 }

 /* Content panel */
 .pub-content-panel {
     padding: 50px 52px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     background: #fff;
     position: relative;
 }

 .pub-content-panel::before {
     content: '';
     position: absolute;
     left: 0;
     top: 12%;
     bottom: 12%;
     width: 3px;
     background: linear-gradient(to bottom, transparent, var(--gold), transparent);
     border-radius: 4px;
 }

 .pub-content-arabic {
     font-family: "Noto Nastaliq Urdu", serif;
     font-size: 1.45rem;
     color: var(--primary-teal);

     line-height: 1.8;
     margin-bottom: 4px;
     font-weight: 700;
 }

 .pub-content-title {
     font-family: 'Amiri', serif;
     font-size: clamp(1.5rem, 2.4vw, 2rem);
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.25;
     margin-bottom: 6px;
 }

 .pub-content-sub {
     font-size: 0.82rem;
     font-weight: 600;
     color: var(--primary-teal);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     margin-bottom: 22px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .pub-content-sub::before {
     content: '';
     display: block;
     width: 32px;
     height: 2px;
     background: var(--gold);
     border-radius: 2px;
     flex-shrink: 0;
 }

 .pub-content-desc {
     font-size: 0.9rem;
     color: var(--text-mid);
     line-height: 1.82;
     margin-bottom: 24px;
 }

 .pub-features {
     list-style: none;
     padding: 0;
     margin: 0 0 30px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .pub-feature-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 0.875rem;
     color: var(--text-mid);
     line-height: 1.55;
 }

 .pub-feature-dot {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: rgba(13, 115, 119, 0.08);
     border: 1px solid rgba(13, 115, 119, 0.18);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-top: 1px;
 }

 .pub-feature-dot i {
     font-size: 9px;
     color: var(--primary-teal);
 }

 .pub-cta-row {
     display: flex;
     align-items: center;
     gap: 14px;
     flex-wrap: wrap;
 }

 .pub-cta-note {
     font-size: 0.76rem;
     color: var(--text-soft);
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: 14px;
 }

 .pub-cta-note i {
     color: var(--gold);
     font-size: 11px;
 }

 .pub-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin-top: 44px;
     flex-wrap: wrap;
     animation: fadeUp 0.7s 0.5s ease both;
 }

 .pub-count-note {
     font-size: 0.85rem;
     color: var(--text-soft);
 }

 .pub-count-note strong {
     color: var(--primary-teal);
     font-weight: 700;
 }

 /* Responsive */
 @media (max-width: 900px) {
     .pub-feature-wrap {
         grid-template-columns: 1fr;
     }

     .pub-book-panel {
         min-height: 360px;
         padding: 48px 24px;
     }

     .pub-content-panel {
         padding: 32px 28px;
     }

     .pub-section {
         padding: 70px 4% 80px;
     }

     .pub-book-img {
         width: 200px;
     }
 }

 @media (max-width: 600px) {
     .pub-section {
         padding: 60px 4% 70px;
     }

     .pub-content-panel {
         padding: 26px 22px;
     }

     .pub-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 14px;
     }

     .pub-book-img {
         width: 170px;
     }

     .pub-cta-row {
         flex-direction: column;
         align-items: flex-start;
     }
 }

 /* ============================================================
           BLOG SECTION
        ============================================================ */
 .blog-section {
     position: relative;
     overflow: hidden;
     padding: 96px 4% 110px;
     background: var(--cream);
 }

 .blog-blob {
     position: absolute;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(31, 107, 65, 0.08) 0%, transparent 70%);
     bottom: -120px;
     right: -140px;
     pointer-events: none;
     z-index: 0;
 }

 .blog-inner {
     position: relative;
     z-index: 1;
     max-width: 100%;
     margin: 0 auto;
 }

 .blog-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 48px;
     gap: 20px;
     flex-wrap: wrap;
     animation: fadeUp 0.7s ease both;
 }

 .blog-heading {
     font-family: 'Amiri', serif;
     font-size: clamp(2rem, 4.5vw, 3.2rem);
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.15;
     margin-bottom: 10px;
 }

 .blog-heading em {
     font-style: italic;
     color: var(--gold);
 }

 .blog-subtext {
     font-size: 0.92rem;
     color: var(--text-soft);
     max-width: 420px;
     line-height: 1.7;
 }

 .blog-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
     gap: 28px;
     margin-bottom: 44px;
 }

 .blog-card {
     background: white;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 2px 20px rgba(20, 68, 42, 0.08);
     transition: all 0.4s ease;
     animation: fadeUp 0.7s ease both;
     display: flex;
     flex-direction: column;
     text-decoration: none;
     color: inherit;
 }

 .blog-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 32px rgba(20, 68, 42, 0.14);
 }

 .blog-card-img {
     position: relative;
     width: 100%;
     height: 220px;
     overflow: hidden;
     background: linear-gradient(135deg, #1f6b41 0%, #2a8b58 100%);
 }

 .blog-card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .blog-card:hover .blog-card-img img {
     transform: scale(1.08);
 }

 .blog-category {
     position: absolute;
     top: 14px;
     left: 14px;
     background: rgba(20, 68, 42, 0.88);
     backdrop-filter: blur(6px);
     color: var(--gold-light);
     border: 1px solid rgba(200, 147, 58, 0.3);
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     z-index: 2;
 }

 .blog-read-time {
     position: absolute;
     bottom: 14px;
     right: 14px;
     background: rgba(255, 255, 255, 0.92);
     color: var(--text-mid);
     padding: 5px 12px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 5px;
     z-index: 2;
 }

 .blog-read-time i {
     font-size: 9px;
     color: var(--gold);
 }

 .blog-card-content {
     padding: 24px 22px 26px;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .blog-date {
     font-size: 0.75rem;
     color: var(--text-soft);
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .blog-date i {
     font-size: 10px;
     color: var(--gold);
 }

 .blog-title {
     font-family: 'Amiri', serif;
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.35;
     margin-bottom: 12px;
     transition: color 0.3s;
 }

 .blog-card:hover .blog-title {
     color: var(--primary-teal);
 }

 .blog-excerpt {
     font-size: 0.9rem;
     color: var(--text-mid);
     line-height: 1.75;
     margin-bottom: 18px;
     flex: 1;
 }

 .blog-card-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 14px;
     border-top: 1px solid rgba(20, 68, 42, 0.08);
 }

 .blog-author {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.8rem;
     color: var(--text-mid);
 }

 .blog-author-avatar {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-dark));
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 11px;
     font-weight: 700;
     flex-shrink: 0;
     overflow: hidden;
 }

 .blog-author-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .blog-read-more {
     font-size: 0.8rem;
     font-weight: 700;
     color: var(--primary-teal);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     display: flex;
     align-items: center;
     gap: 5px;
     transition: gap 0.3s;
 }

 .blog-card:hover .blog-read-more {
     gap: 8px;
 }

 .blog-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
     animation: fadeUp 0.7s 0.4s ease both;
 }

 .blog-count-note {
     font-size: 0.85rem;
     color: var(--text-soft);
 }

 .blog-count-note strong {
     color: var(--green-mid);
     font-weight: 700;
 }

 @media (max-width: 768px) {
     .blog-section {
         padding: 70px 4% 80px;
     }

     .blog-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .blog-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 14px;
     }
 }

 /* ============================================================
           CONTACT SECTION
        ============================================================ */
 .contact-section {
     position: relative;
     overflow: hidden;
     padding: 60px 4% 70px;
     background: var(--white);
 }

 .contact-section::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, rgba(248, 244, 236, 0.3), transparent 40%, rgba(248, 244, 236, 0.5));
     pointer-events: none;
     z-index: 0;
 }

 .contact-glow-left {
     position: absolute;
     width: 380px;
     height: 380px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(13, 115, 119, 0.07) 0%, transparent 70%);
     top: -100px;
     left: -80px;
     pointer-events: none;
     z-index: 0;
 }

 .contact-inner {
     position: relative;
     z-index: 1;
     max-width: 100%;
     margin: 0 auto;
 }

 .contact-header {
     text-align: center;
     margin-bottom: 22px;
     animation: fadeUp 0.7s ease both;
 }

 .contact-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: var(--primary-teal);
     margin-bottom: 8px;
 }

 .contact-eyebrow span {
     display: block;
     width: 22px;
     height: 1px;
     background: var(--primary-teal);
 }

 .contact-heading {
     font-family: 'Amiri', serif;
     font-size: clamp(1.5rem, 3vw, 2.2rem);
     font-weight: 700;
     color: var(--green-deep);
     line-height: 1.2;
     margin-bottom: 7px;
 }

 .contact-heading em {
     font-style: italic;
     color: var(--gold);
 }

 .contact-subtext {
     font-size: 0.82rem;
     color: var(--text-soft);
     max-width: 460px;
     margin: 0 auto;
     line-height: 1.65;
 }

 .contact-info-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
     margin-bottom: 14px;
     animation: fadeUp 0.7s 0.1s ease both;
 }

 .contact-info-item {
     background: var(--white);
     border: 1px solid rgba(13, 115, 119, 0.12);
     border-radius: 9px;
     padding: 11px 13px;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 10px;
     box-shadow: 0 2px 8px rgba(13, 115, 119, 0.04);
 }

 .contact-info-item:hover {
     border-color: var(--primary-teal);
     box-shadow: 0 4px 16px rgba(13, 115, 119, 0.1);
     transform: translateY(-2px);
 }

 .contact-info-icon {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background: rgba(13, 115, 119, 0.08);
     border: 1px solid rgba(13, 115, 119, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: var(--primary-teal);
     flex-shrink: 0;
     transition: all 0.3s;
 }

 .contact-info-item:hover .contact-info-icon {
     background: var(--primary-teal);
     color: white;
     border-color: var(--primary-teal);
 }

 .contact-info-text {
     flex: 1;
 }

 .contact-info-label {
     font-size: 0.62rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-soft);
     margin-bottom: 2px;
 }

 .contact-info-value {
     font-size: 0.82rem;
     color: var(--text-mid);
     font-weight: 600;
     line-height: 1.35;
 }

 .contact-info-value a {
     color: var(--text-mid);
     text-decoration: none;
     transition: color 0.3s;
 }

 .contact-info-value a:hover {
     color: var(--primary-teal);
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 6fr 4fr;
     gap: 16px;
     align-items: stretch;
     animation: fadeUp 0.7s 0.2s ease both;
 }

 .contact-map-wrapper {
     position: relative;
     width: 100%;
     height: 420px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 6px 24px rgba(13, 115, 119, 0.13), 0 1px 6px rgba(0, 0, 0, 0.07);
     border: 1px solid rgba(13, 115, 119, 0.12);
 }

 .contact-map-wrapper iframe {
     width: 100%;
     height: 100%;
     border: none;
 }

 .contact-quick-info {
     position: absolute;
     bottom: 12px;
     left: 12px;
     right: 12px;
     background: rgba(255, 255, 255, 0.96);
     backdrop-filter: blur(14px);
     border-radius: 9px;
     padding: 10px 14px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(13, 115, 119, 0.1);
     z-index: 10;
 }

 .contact-quick-title {
     font-family: 'Amiri', serif;
     font-size: 0.92rem;
     font-weight: 700;
     color: var(--green-deep);
     margin-bottom: 3px;
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .contact-quick-title i {
     color: var(--primary-teal);
     font-size: 12px;
 }

 .contact-quick-address {
     font-size: 0.78rem;
     color: var(--text-mid);
     line-height: 1.45;
 }

 .contact-form-col {
     display: flex;
     flex-direction: column;
 }

 .contact-form-card {
     background: var(--white);
     border: 1px solid rgba(13, 115, 119, 0.12);
     border-radius: 12px;
     padding: 16px 16px 12px;
     box-shadow: 0 3px 18px rgba(13, 115, 119, 0.07);
     height: 420px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 .contact-form-title {
     font-family: 'Amiri', serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--green-deep);
     margin-bottom: 2px;
 }

 .contact-form-desc {
     font-size: 0.74rem;
     color: var(--text-soft);
     margin-bottom: 10px;
     line-height: 1.5;
 }

 .form-group {
     margin-bottom: 8px;
 }

 .form-label {
     display: block;
     font-size: 0.66rem;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: var(--text-mid);
     margin-bottom: 3px;
 }

 .form-label .required {
     color: var(--gold);
     margin-left: 2px;
 }

 .form-input,
 .form-textarea {
     width: 100%;
     background: var(--white);
     border: 1px solid rgba(13, 115, 119, 0.2);
     border-radius: 6px;
     padding: 6px 10px;
     color: var(--text-mid);
     font-family: 'Roboto', sans-serif;
     font-size: 0.8rem;
     outline: none;
     transition: all 0.3s ease;
 }

 .form-input::placeholder,
 .form-textarea::placeholder {
     color: rgba(100, 100, 100, 0.38);
 }

 .form-input:focus,
 .form-textarea:focus {
     border-color: var(--primary-teal);
     box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.08);
 }

 .form-textarea {
     min-height: 56px;
     max-height: 56px;
     resize: none;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
 }

 .form-submit {
     width: 100%;
     margin-top: 3px;
     padding: 8px 16px;
     font-size: 0.78rem;
 }

 .contact-social-section {
     margin-top: 18px;
     padding-top: 16px;
     border-top: 1px solid rgba(13, 115, 119, 0.1);
     text-align: center;
     animation: fadeUp 0.7s 0.3s ease both;
 }

 .contact-social-label {
     display: block;
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--text-soft);
     margin-bottom: 10px;
 }

 .contact-social-icons {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
 }

 .contact-social-link {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--white);
     border: 1px solid rgba(13, 115, 119, 0.18);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-teal);
     font-size: 13px;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(13, 115, 119, 0.06);
 }

 .contact-social-link:hover {
     background: var(--primary-teal);
     border-color: var(--primary-teal);
     color: white;
     transform: translateY(-3px);
     box-shadow: 0 5px 14px rgba(13, 115, 119, 0.28);
 }

 @media (max-width: 968px) {
     .contact-grid {
         grid-template-columns: 1fr;
     }

     .contact-map-wrapper {
         height: 320px;
     }

     .contact-form-card {
         height: auto;
         overflow: visible;
     }

     .form-textarea {
         max-height: none;
     }
 }

 @media (max-width: 768px) {
     .contact-section {
         padding: 50px 4% 60px;
     }

     .contact-info-row {
         grid-template-columns: 1fr;
         gap: 8px;
     }

     .contact-map-wrapper {
         height: 280px;
     }
 }

 @media (max-width: 480px) {
     .contact-section {
         padding: 44px 4% 54px;
     }

     .contact-map-wrapper {
         height: 240px;
     }

     .contact-quick-info {
         bottom: 8px;
         left: 8px;
         right: 8px;
         padding: 9px 11px;
     }

     .form-row {
         grid-template-columns: 1fr;
     }
 }

 /* ============================================================
           FOOTER SECTION
        ============================================================ */
 .footer-section {
     background: #1a1f2e;
     color: rgba(255, 255, 255, 0.75);
     padding: 0;
     position: relative;
     overflow: hidden;
 }

 .footer-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%230d7377' stroke-width='0.4' opacity='0.08'%3E%3Cpolygon points='30,2 58,16 58,44 30,58 2,44 2,16'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: repeat;
     pointer-events: none;
     z-index: 0;
 }

 .footer-accent-top {
     height: 4px;
     background: linear-gradient(90deg, var(--primary-teal) 0%, var(--primary-teal-dark) 40%, var(--gold) 100%);
     width: 100%;
     display: block;
 }

 .footer-newsletter-strip {
     position: relative;
     z-index: 1;
     background: rgba(13, 115, 119, 0.12);
     border-bottom: 1px solid rgba(13, 115, 119, 0.2);
     padding: 22px 4%;
 }

 .footer-newsletter-inner {
     max-width: 1400px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     flex-wrap: wrap;
 }

 .footer-newsletter-text h4 {
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: white;
     margin-bottom: 4px;
 }

 .footer-newsletter-text p {
     font-size: 0.82rem;
     color: rgba(255, 255, 255, 0.5);
     margin: 0;
 }

 .footer-newsletter-form {
     display: flex;
     gap: 0;
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid rgba(13, 115, 119, 0.4);
     flex-shrink: 0;
 }

 .footer-newsletter-input {
     background: rgba(255, 255, 255, 0.06);
     border: none;
     outline: none;
     padding: 10px 16px;
     color: white;
     font-size: 0.85rem;
     width: 240px;
     font-family: 'Roboto', sans-serif;
 }

 .footer-newsletter-input::placeholder {
     color: rgba(255, 255, 255, 0.35);
 }

 .footer-newsletter-btn {
     background: var(--primary-teal);
     border: none;
     padding: 10px 18px;
     color: white;
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     cursor: pointer;
     transition: background 0.3s;
     font-family: 'Roboto', sans-serif;
     text-transform: uppercase;
 }

 .footer-newsletter-btn:hover {
     background: var(--primary-teal-dark);
 }

 .footer-main {
     position: relative;
     z-index: 1;
     max-width: 100%;
     margin: 0 auto;
     padding: 44px 4% 36px;
     display: grid;
     grid-template-columns: 1.6fr 0.8fr 0.9fr 1fr 1.2fr;
     gap: 28px;
 }

 .footer-logo-wrap {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 14px;
 }

 .footer-logo {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid rgba(13, 115, 119, 0.4);
 }

 .footer-brand-name {
     display: flex;
     flex-direction: column;
 }

 .footer-brand-arabic {
     font-family: 'Scheherazade New', serif;
     font-size: 16px;
     font-weight: 700;
     color: white;
     direction: rtl;
     line-height: 1.3;
 }

 .footer-brand-english {
     font-family: 'Roboto', sans-serif;
     font-size: 10px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.45);
     text-transform: uppercase;
     letter-spacing: 0.8px;
 }

 .footer-about {
     font-size: 0.82rem;
     line-height: 1.72;
     color: rgba(255, 255, 255, 0.55);
     margin-bottom: 16px;
 }

 .footer-socials {
     display: flex;
     gap: 8px;
 }

 .footer-social-link {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.65);
     font-size: 13px;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .footer-social-link:hover {
     background: var(--primary-teal);
     border-color: var(--primary-teal);
     color: white;
     transform: translateY(-3px);
 }

 .footer-col-title {
     font-family: 'Playfair Display', serif;
     font-size: 1rem;
     font-weight: 700;
     color: white;
     margin-bottom: 22px;
     padding-bottom: 12px;
     border-bottom: 2px solid rgba(13, 115, 119, 0.35);
     position: relative;
 }

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

 .footer-links {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-links li {
     margin-bottom: 11px;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.58);
     text-decoration: none;
     font-size: 0.87rem;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s ease;
 }

 .footer-links a i {
     font-size: 9px;
     color: var(--primary-teal);
     transition: transform 0.3s;
 }

 .footer-links a:hover {
     color: rgba(255, 255, 255, 0.9);
     padding-left: 4px;
 }

 .footer-links a:hover i {
     transform: translateX(3px);
     color: var(--gold);
 }

 .footer-contact {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-contact li {
     display: flex;
     gap: 12px;
     margin-bottom: 15px;
     font-size: 0.85rem;
 }

 .footer-contact-icon {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: rgba(13, 115, 119, 0.15);
     border: 1px solid rgba(13, 115, 119, 0.25);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-teal);
     font-size: 13px;
     flex-shrink: 0;
     margin-top: 1px;
 }

 .footer-contact-info {
     display: flex;
     flex-direction: column;
 }

 .footer-contact-label {
     font-size: 9px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: rgba(255, 255, 255, 0.35);
     font-weight: 700;
     margin-bottom: 2px;
 }

 .footer-contact-val {
     color: rgba(255, 255, 255, 0.65);
     line-height: 1.5;
 }

 .footer-contact-val a {
     color: rgba(255, 255, 255, 0.65);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-contact-val a:hover {
     color: var(--gold-light);
 }

 .footer-map-frame {
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid rgba(13, 115, 119, 0.25);
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
     height: 180px;
     margin-bottom: 14px;
 }

 .footer-map-frame iframe {
     width: 100%;
     height: 100%;
     border: none;
     filter: grayscale(30%) brightness(0.85);
 }

 .footer-map-address {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     font-size: 0.82rem;
     color: rgba(255, 255, 255, 0.55);
     line-height: 1.6;
 }

 .footer-map-address i {
     color: var(--primary-teal);
     margin-top: 3px;
     flex-shrink: 0;
     font-size: 12px;
 }

 .footer-bottom-bar {
     position: relative;
     z-index: 1;
     border-top: 1px solid rgba(255, 255, 255, 0.07);
     background: rgba(0, 0, 0, 0.2);
     padding: 14px 4%;
 }

 .footer-bottom-inner {
     max-width: 100%;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     gap: 12px;
 }

 .footer-bottom-left {
     display: flex;
     align-items: center;
     gap: 14px;
 }

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

 .footer-bottom-right {
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 .footer-copyright {
     font-size: 0.78rem;
     color: rgba(255, 255, 255, 0.4);
     margin: 0;
 }

 .footer-bottom-links {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .footer-bottom-link {
     font-size: 0.78rem;
     color: rgba(255, 255, 255, 0.4);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-bottom-link:hover {
     color: var(--gold-light);
 }

 .footer-bottom-divider {
     color: rgba(255, 255, 255, 0.15);
     font-size: 11px;
 }

 .footer-dev-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 6px;
     padding: 5px 10px;
     transition: border-color 0.3s;
     text-decoration: none;
 }

 .footer-dev-badge:hover {
     border-color: rgba(13, 115, 119, 0.5);
 }

 .footer-dev-logo-placeholder {
     width: 20px;
     height: 20px;
     border-radius: 3px;
     background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 9px;
     font-weight: 800;
     color: white;
     letter-spacing: -0.5px;
     flex-shrink: 0;
 }

 .footer-dev-logo img {
     width: 20px;
     height: 20px;
     object-fit: contain;
     border-radius: 3px;
     flex-shrink: 0;
 }

 .footer-dev-text {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
 }

 .footer-dev-label {
     font-size: 8px;
     color: rgba(255, 255, 255, 0.32);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 600;
 }

 .footer-dev-name {
     font-size: 11px;
     color: rgba(255, 255, 255, 0.75);
     font-weight: 700;
     letter-spacing: 0.02em;
 }

 @media (max-width: 1200px) {
     .footer-main {
         grid-template-columns: 1.4fr 0.9fr 0.9fr 1fr 1.1fr;
         gap: 22px;
     }
 }

 @media (max-width: 1024px) {
     .footer-main {
         grid-template-columns: 1fr 1fr 1fr;
         gap: 24px;
     }

     .footer-map-col {
         grid-column: 1 / -1;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px;
         align-items: start;
     }
 }

 @media (max-width: 768px) {
     .footer-main {
         grid-template-columns: 1fr 1fr;
         gap: 20px;
         padding: 36px 4% 28px;
     }

     .footer-map-col {
         grid-column: 1 / -1;
         grid-template-columns: 1fr;
     }

     .footer-newsletter-inner {
         flex-direction: column;
         align-items: flex-start;
     }

     .footer-newsletter-input {
         width: 180px;
     }

     .footer-bottom-inner {
         grid-template-columns: 1fr;
         gap: 10px;
     }

     .footer-bottom-left,
     .footer-bottom-center,
     .footer-bottom-right {
         justify-content: center;
         text-align: center;
     }

     .footer-bottom-links {
         justify-content: center;
         flex-wrap: wrap;
         gap: 8px;
     }
 }

 @media (max-width: 480px) {
     .footer-main {
         grid-template-columns: 1fr;
     }
 }

 /* ============================================================
           HERO & GLOBAL RESPONSIVE OVERRIDES
        ============================================================ */
 @media (max-width: 991px) {
     .hero-section {
         background-image: url("Images/Home/Hero-mobiles.png");
         background-position: bottom;
         background-attachment: scroll;
         padding: 160px 0 60px 0;
     }

     .hero-title {
         font-size: 42px;
     }

     .hero-subtitle {
         font-size: 18px;
     }

     .hero-main-image {
         margin-top: 40px;
     }

     .top-header {
         padding: 10px 0;
     }

     .bismillah-text {
         font-size: 16px;
     }

     .social-icons a {
         width: 24px;
         height: 24px;
         font-size: 11px;
     }

     .lang-btn {
         width: 28px;
     }

     .lang-btn span {
         font-size: 20px;
     }

     .fi {
         width: 22px;
         height: 22px;
     }

     .social-icons {
         gap: 5px;
     }

     .language-switcher {
         gap: 2px;
     }
 }

 @media (max-width: 768px) {
     .hero-title {
         font-size: 36px;
     }

     .hero-subtitle {
         font-size: 16px;
     }

     .top-header {
         font-size: 11px;
         padding: 8px 0;
     }

     .bismillah-text {
         font-size: 14px;
     }

     .pattern-text {
         font-size: 120px;
     }

     .hero-main-image img {
         height: 400px;
     }

     .hero-section {
         padding: 140px 0 60px 0;
     }

     .social-icons a {
         width: 22px;
         height: 22px;
         font-size: 10px;
     }

     .lang-btn {
         width: 26px;
     }

     .fi {
         width: 20px;
         height: 20px;
     }

     .about-section {
         padding: 64px 3.5% 80px;
     }

     .about-inner {
         grid-template-columns: 1fr;
         gap: 52px;
     }

     .about-img-col {
         max-width: 560px;
         margin: 0 auto;
         width: 100%;
     }

     .about-img-frame img {
         height: 360px;
     }

     .about-section::after {
         display: none;
     }
 }

 @media (max-width: 576px) {
     .hero-section {
         padding-top: 180px;
     }

     .hero-title {
         font-size: 28px;
     }

     .hero-subtitle {
         font-size: 15px;
     }

     .hero-description {
         font-size: 16px;
     }

     .bismillah-text {
         font-size: 13px;
     }

     .top-header {
         padding: 8px 0;
         font-size: 10px;
     }

     .social-icons a {
         width: 20px;
         height: 20px;
         font-size: 9px;
     }

     .lang-btn {
         width: 24px;
     }

     .lang-btn span {
         font-size: 16px;
     }

     .fi {
         width: 18px;
         height: 18px;
     }

     .social-icons {
         gap: 4px;
     }

     .language-switcher {
         gap: 1px;
     }

     .custom-alert-box {
         padding: 25px 30px;
     }

     .custom-alert-icon {
         width: 60px;
         height: 60px;
         font-size: 28px;
     }

     .custom-alert-title {
         font-size: 18px;
     }

     .custom-alert-message {
         font-size: 14px;
     }

     .about-img-frame img {
         height: 270px;
     }

     .about-img-col::before,
     .about-img-col::after {
         width: 40px;
         height: 40px;
     }

     .hero-main-image img {
         height: 400px;
     }
 }

 @media (max-width: 430px) {
     .bismillah-text {
         font-size: 10px;
     }

     .social-icons a {
         width: 16px;
         height: 16px;
         font-size: 6px;
     }

     .lang-btn {
         width: 20px;
     }
 }
/* ============================================================
   COMPREHENSIVE RESPONSIVE OVERRIDES
   Extra Large (≥1400px) → Large (≥1200px) → Medium (≥992px)
   → Small (≥768px) → Extra Small (<576px) → XS Mini (<360px)
   ============================================================ */

/* ── XL screens (1400px+) ──────────────────────────────────── */
@media (min-width: 1400px) {
  .hero-section { padding: 200px 0 100px; }
  .hero-title { font-size: 66px; }
  .navbar-nav .nav-link { font-size: 1rem; }
}

/* ── LG screens (992–1199px) ───────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-title { font-size: 48px; }
  .hero-subtitle { font-size: 20px; }
  .about-inner { gap: 48px; }
  .dept-grid { gap: 36px; }
  .pub-book-panel { padding: 40px 32px; }
  .pub-content-panel { padding: 36px 36px; }
}

/* ── MD screens (768–991px) ────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-section { padding: 160px 0 70px; }
  .hero-title { font-size: 40px; }
  .hero-subtitle { font-size: 18px; }
  .hero-description { font-size: 16px; }
  .nb-wrap { margin-top: 40px; }

  /* Notice board on md */
  .nb-board { max-width: 600px; margin: 0 auto; }

  /* Notification center */
  .nc-panel { max-width: 100%; }
  .nc-detail-img img { height: 260px; }

  /* About */
  .about-inner { grid-template-columns: 1fr; gap: 44px; }
  .about-img-col { max-width: 520px; margin: 0 auto; width: 100%; }
  .about-img-frame img { height: 360px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Gallery */
  .gallery-section { padding: 72px 4% 80px; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-header { flex-direction: column; align-items: flex-start; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-row { grid-template-columns: 1fr 1fr 1fr; }
  .contact-form-card { height: auto; overflow: visible; }
  .form-textarea { max-height: none; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr 1fr; padding: 36px 4% 28px; }
  .footer-map-col { grid-column: 1 / -1; }
  .footer-newsletter-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-newsletter-input { width: 220px; }
}

/* ── SM screens (576–767px) ────────────────────────────────── */
@media (min-width: 576px) and (max-width: 767px) {
  .hero-section { padding: 160px 0 60px; background-attachment: scroll; }
  .hero-title { font-size: 34px; }
  .hero-subtitle { font-size: 17px; }
  .hero-description { font-size: 15px; }
  .arabic-greeting { font-size: 20px; }
  .btn-lg { padding: 13px 28px; font-size: 0.88rem; }

  /* Top header */
  .top-header { padding: 8px 0; font-size: 11px; }
  .bismillah-text { font-size: 15px; }
  .social-icons { gap: 5px; }
  .social-icons a { width: 24px; height: 24px; font-size: 10px; }
  .lang-btn { width: 28px; }
  .lang-btn span { font-size: 20px; }

  /* Notice board */
  .nb-wrap { margin-top: 36px; }
  .nb-wisdom-arabic { font-size: 1.4rem; }

  /* Notification center */
  .nc-header { padding: 14px 16px; }
  .nc-header-icon { width: 34px; height: 34px; font-size: 15px; }
  .nc-header-title { font-size: 1rem; }
  .nc-header-sub { font-size: 10px; }
  .nc-tab { font-size: 11px; padding: 10px 8px; }
  .nc-detail-img img { height: 220px; }
  .nc-detail-title { font-size: 1.3rem; }
  .nc-detail-action { padding: 12px 16px; }
  .nc-action-btn { padding: 10px 20px; font-size: 12px; }
  .nc-action-btn-secondary { padding: 10px 16px; font-size: 12px; margin-left: 8px; }

  /* About */
  .about-section { padding: 64px 4% 80px; }
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-img-col { max-width: 500px; margin: 0 auto; width: 100%; }
  .about-img-frame img { height: 320px; }
  .about-heading { font-size: 1.8rem; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat-card { padding: 20px 14px; }
  .stat-number { font-size: 2rem; }

  /* Departments */
  .dept-section { padding: 60px 4% 80px; }
  .dept-grid { grid-template-columns: 1fr; }
  .dept-visual { max-width: 500px; margin: 0 auto; position: relative; top: 0; }
  .dept-visual-frame img { height: 360px; }
  .dept-header { flex-direction: column; align-items: flex-start; }

  /* Gallery */
  .gallery-section { padding: 64px 4% 72px; }
  .gallery-mosaic { grid-template-rows: repeat(5, 155px); }
  .gallery-header { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Publications */
  .pub-section { padding: 64px 4% 72px; }
  .pub-feature-wrap { grid-template-columns: 1fr; }
  .pub-book-panel { min-height: 300px; padding: 40px 24px; }
  .pub-book-img { width: 180px; }
  .pub-content-panel { padding: 28px 24px; }
  .pub-header { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Blog */
  .blog-section { padding: 64px 4% 72px; }
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .blog-header { flex-direction: column; align-items: flex-start; }

  /* Contact */
  .contact-section { padding: 50px 4% 60px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-row { grid-template-columns: 1fr; gap: 8px; }
  .contact-map-wrapper { height: 280px; }
  .contact-form-card { height: auto; overflow: visible; }
  .form-textarea { max-height: none; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr 1fr; padding: 32px 4% 24px; gap: 20px; }
  .footer-map-col { grid-column: 1 / -1; }
  .footer-newsletter-inner { flex-direction: column; align-items: flex-start; }
  .footer-newsletter-input { width: 200px; }
  .footer-bottom-inner { grid-template-columns: 1fr; gap: 10px; }
  .footer-bottom-left, .footer-bottom-center, .footer-bottom-right {
    justify-content: center; text-align: center;
  }
  .footer-bottom-links { justify-content: center; flex-wrap: wrap; }
}

/* ── XS screens (<576px) ────────────────────────────────────── */
@media (max-width: 575px) {
  /* Container */
  .container { padding-left: 4%; padding-right: 4%; }

  /* TOP HEADER — tighten everything on XS */
  .top-header { padding: 7px 0; font-size: 10px; }
  .bismillah-container { display: flex; align-items: center; justify-content: center; }
  .bismillah-text { font-size: 13px; }
  .social-icons { gap: 4px; }
  .social-icons a { width: 22px; height: 22px; font-size: 9px; }
  .lang-btn { width: 25px; }
  .lang-btn span, .fi { font-size: 18px; width: 20px; height: 20px; }
  .language-switcher { gap: 1px; }

  /* HAMBURGER */
  .hamburger-btn { width: 40px; height: 40px; }

  /* HERO */
  .hero-section {
    padding: 150px 0 60px;
    background-attachment: scroll;
    background-position: center;
  }
  .arabic-greeting { font-size: 18px; margin-bottom: 14px; }
  .hero-title { font-size: 26px; line-height: 1.25; }
  .hero-subtitle { font-size: 14px; }
  .hero-description { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
  .btn-lg { padding: 11px 22px; font-size: 0.82rem; }

  /* NOTICE BOARD */
  .nb-wrap { margin-top: 30px; }
  .nb-header { padding: 11px 14px; }
  .nb-header-title { font-size: 11px; }
  .nb-header-date { font-size: 10px; }
  .nb-wisdom { padding: 14px 14px 13px; }
  .nb-wisdom-arabic { font-size: 1.2rem; }
  .nb-wisdom-urdu { font-size: 0.85rem; }
  .nb-notices-header { padding: 10px 14px 7px; flex-wrap: wrap; gap: 8px; }
  .nb-notices-list { padding: 0 14px 12px; }
  .nb-notice-row { padding: 8px 10px; }
  .nb-notice-title { font-size: 11.5px; }
  .nb-bell-btn { font-size: 10px; padding: 4px 10px; }

  /* NOTIFICATION CENTER — XS critical fixes */
  .nc-overlay { padding: 0; }
  .nc-panel { width: 100%; max-width: 100%; height: 100vh; border-radius: 0; }
  .nc-header { padding: 12px 14px; gap: 8px; }
  .nc-header-left { gap: 8px; }
  .nc-header-icon { width: 32px; height: 32px; font-size: 14px; flex-shrink: 0; }
  .nc-header-title { font-size: 0.9rem; }
  .nc-header-sub { font-size: 9.5px; display: block; }
  .nc-close-btn { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
  .nc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nc-tab { font-size: 11px; padding: 10px 12px; white-space: nowrap; flex: 0 0 auto; }
  .nc-list-view { padding: 10px; gap: 8px; }
  .nc-item { padding: 12px 12px; gap: 10px; }
  .nc-item-icon { width: 34px; height: 34px; font-size: 14px; flex-shrink: 0; }
  .nc-item-title { font-size: 13px; }
  .nc-item-excerpt { font-size: 11.5px; }
  .nc-item-title-row { flex-wrap: wrap; gap: 6px; }
  .nc-item-tags { flex-shrink: 0; }

  /* NC Detail view on XS */
  .nc-detail-back { padding: 10px 14px; }
  .nc-back-btn { font-size: 12px; }
  .nc-detail-content { padding: 14px 14px; }
  .nc-detail-badge { font-size: 10px; padding: 3px 10px; }
  .nc-detail-title { font-size: 1.15rem; line-height: 1.3; }
  .nc-detail-meta { font-size: 11px; gap: 10px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .nc-detail-img img { height: 180px; }
  .nc-detail-body { font-size: 13px; line-height: 1.75; }
  /* NC Detail Action Buttons — CRITICAL responsive fix */
  .nc-detail-action {
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .nc-action-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    font-size: 12px;
    justify-content: center;
    text-align: center;
  }
  .nc-action-btn-secondary {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    font-size: 12px;
    margin-left: 0;
    justify-content: center;
    text-align: center;
  }

  /* ABOUT */
  .about-section { padding: 56px 4% 72px; }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-img-col { max-width: 100%; }
  .about-img-frame img { height: 260px; }
  .about-heading { font-size: 1.7rem; }
  .about-img-col::before, .about-img-col::after { width: 36px; height: 36px; }
  .about-year-badge { left: -10px; }

  /* STATS */
  .stats-section { padding: 52px 4%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 16px 10px; }
  .stat-number { font-size: 1.75rem; }
  .stat-number span { font-size: 1.4rem; }
  .stat-icon { width: 38px; height: 38px; font-size: 15px; margin-bottom: 8px; }
  .stat-label { font-size: 0.72rem; }
  .stat-description { font-size: 0.68rem; }

  /* DEPARTMENTS */
  .dept-section { padding: 56px 4% 72px; }
  .dept-grid { grid-template-columns: 1fr; gap: 36px; }
  .dept-header { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 36px; }
  .dept-visual { max-width: 100%; position: relative; top: 0; }
  .dept-visual-frame img { height: 280px; }
  .dept-visual-deco { display: none; }
  .dept-item { gap: 14px; padding: 22px 0; }
  .dept-num { font-size: 2rem; min-width: 38px; }
  .dept-heading { font-size: 1.8rem; }
  .dept-subtext { font-size: 0.88rem; }

  /* GALLERY */
  .gallery-section { padding: 56px 4% 68px; }
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 140px);
    gap: 6px;
  }
  .gcell { border-radius: 10px; }
  .gallery-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gallery-heading { font-size: 1.8rem; }

  /* DONATION */
  .donation-section { padding: 52px 4%; }
  .donation-verse-card { padding: 16px 14px; border-radius: 10px; }
  .donation-btn { padding: 12px 28px; font-size: 0.85rem; }

  /* PUBLICATIONS */
  .pub-section { padding: 56px 4% 68px; }
  .pub-feature-wrap { grid-template-columns: 1fr; border-radius: 14px; }
  .pub-book-panel { min-height: 280px; padding: 36px 20px; }
  .pub-book-img { width: 160px; }
  .pub-content-panel { padding: 24px 18px; }
  .pub-heading { font-size: 1.8rem; }
  .pub-content-title { font-size: 1.4rem; }
  .pub-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pub-cta-row { flex-direction: column; align-items: stretch; }
  .pub-cta-row .btn-primary,
  .pub-cta-row .btn-secondary { width: 100%; justify-content: center; }

  /* BLOG */
  .blog-section { padding: 56px 4% 68px; }
  .blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .blog-heading { font-size: 1.8rem; }
  .blog-card-footer { flex-wrap: wrap; gap: 10px; }

  /* CONTACT */
  .contact-section { padding: 44px 4% 54px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-row { grid-template-columns: 1fr; gap: 8px; }
  .contact-map-wrapper { height: 240px; }
  .contact-form-card { height: auto; overflow: visible; padding: 14px 14px 12px; }
  .form-row { grid-template-columns: 1fr; }
  .form-textarea { max-height: none; min-height: 80px; }
  .form-submit { padding: 10px 16px; }

  /* FOOTER */
  .footer-main { grid-template-columns: 1fr; padding: 28px 4% 20px; gap: 24px; }
  .footer-map-col { grid-column: 1 / -1; }
  .footer-newsletter-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-newsletter-form { width: 100%; }
  .footer-newsletter-input { width: 100%; flex: 1; }
  .footer-bottom-inner { grid-template-columns: 1fr; gap: 10px; }
  .footer-bottom-left, .footer-bottom-center, .footer-bottom-right {
    justify-content: center; text-align: center;
  }
  .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 8px; }
  .footer-socials { flex-wrap: wrap; gap: 8px; }

  /* CUSTOM ALERT */
  .custom-alert-box { padding: 22px 20px; width: 92%; }
  .custom-alert-icon { width: 56px; height: 56px; font-size: 26px; }
  .custom-alert-title { font-size: 17px; }
  .custom-alert-message { font-size: 14px; }
  .custom-alert-button { padding: 10px 28px; font-size: 14px; }

  /* SIDEBAR */
  .sidebar-drawer { width: 100vw; }
  .sidebar-top { padding: 10px 14px; }
  .sidebar-brand-arabic { font-size: 18px; }
  .sidebar-brand-english { font-size: 9px; }
  .sidebar-logo { width: 44px; height: 44px; }
  .sidebar-cta { padding: 12px 14px; }
  .sidebar-cta-btn { font-size: 13px; padding: 12px 16px; }
  .sidebar-footer { padding: 10px 14px 16px; }
  .sidebar-nav-item { padding: 11px 16px; font-size: 14px; }
  .sidebar-nav-icon { width: 34px; height: 34px; font-size: 13px; }
}

/* ── XS Mini screens (<400px) ──────────────────────────────── */
@media (max-width: 399px) {
  /* Top header: hide bismillah on very tiny, or shrink more */
  .bismillah-text { font-size: 11px; }
  .social-icons a { width: 20px; height: 20px; font-size: 8px; }
  .lang-btn { width: 22px; }
  .fi { width: 18px; height: 18px; }
  .social-icons { gap: 3px; }
  .language-switcher { gap: 1px; }

  /* Hero */
  .hero-section { padding: 140px 0 50px; }
  .hero-title { font-size: 23px; }
  .hero-subtitle { font-size: 13px; }
  .hero-description { font-size: 13px; }
  .btn-lg { padding: 10px 18px; font-size: 0.78rem; }
  .arabic-greeting { font-size: 16px; }

  /* Stats — keep 2 cols but tighter */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 14px 8px; }
  .stat-number { font-size: 1.5rem; }
  .stat-label { font-size: 0.65rem; letter-spacing: 0.04em; }
  .stat-description { display: none; }

  /* Gallery cells smaller */
  .gallery-mosaic { grid-template-rows: repeat(5, 120px); gap: 5px; }

  /* Notification center */
  .nc-header-sub { display: none; }
  .nc-header-title { font-size: 0.85rem; }
  .nc-item { gap: 8px; padding: 10px 10px; }
  .nc-item-icon { width: 30px; height: 30px; font-size: 12px; }
  .nc-action-btn, .nc-action-btn-secondary { font-size: 11px; padding: 9px 12px; }

  /* Footer newsletter form */
  .footer-newsletter-form { flex-direction: column; border-radius: 8px; }
  .footer-newsletter-input { width: 100%; }
  .footer-newsletter-btn { width: 100%; text-align: center; padding: 10px; }

  /* Dept */
  .dept-visual-frame img { height: 240px; }
  .dept-item { gap: 12px; }
  .dept-num { font-size: 1.8rem; min-width: 34px; }

  /* Publications book */
  .pub-book-img { width: 140px; }
  .pub-book-panel { min-height: 250px; }
  .pub-content-panel { padding: 20px 14px; }
  .pub-content-arabic { font-size: 1.2rem; }
}

/* ── XS Ultra-mini (<360px) ────────────────────────────────── */
@media (max-width: 359px) {
  .bismillah-text { font-size: 9.5px; }
  .social-icons a { width: 18px; height: 18px; font-size: 7px; }
  .lang-btn { width: 20px; }
  .fi { width: 16px; height: 16px; }

  .hero-title { font-size: 20px; }
  .hero-subtitle { font-size: 12px; }
  .btn-lg { padding: 9px 16px; font-size: 0.74rem; }

  .nc-tab { font-size: 10px; padding: 9px 10px; }
  .nc-detail-title { font-size: 1rem; }
}

/* ── Prevent horizontal overflow globally ───────────────────── */
section, header, footer, .navbar-wrapper, aside {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── Fix btn-primary / btn-secondary wrapping on small screens ─ */
@media (max-width: 575px) {
  .btn-primary, .btn-secondary {
    white-space: normal;
    text-align: center;
  }
  /* Hero button full width optional on smallest */
  .hero-content .btn-primary { width: 100%; justify-content: center; }

   .nc-action-btn{ margin-right: 10px; }

}

/* ── Ensure nc-detail-action buttons always accessible ─────── */
.nc-detail-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
@media (max-width: 480px) {
  .nc-detail-action {
    flex-direction: column;
    align-items: stretch;
   
  }
  .nc-action-btn,
  .nc-action-btn-secondary {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    text-align: center;
  }
   .nc-action-btn{ margin-bottom: 8px; }
}

/* ── Fix top header col alignment on XS ───────────────────── */
@media (max-width: 575px) {
  .top-header .row { gap: 0; }
  .top-header .col-4 { padding: 0 4px; }
  .social-icons-container { justify-content: flex-start; }
  .bismillah-container { justify-content: center; }
  .language-switcher-container { justify-content: flex-end; }
}

/* ── Fix footer newsletter on XS ──────────────────────────── */
@media (max-width: 575px) {
  .footer-newsletter-form {
    width: 100%;
    flex-direction: row;
    border-radius: 8px;
    overflow: hidden;
  }
  .footer-newsletter-input {
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .footer-newsletter-btn {
    flex-shrink: 0;
    padding: 10px 14px;
  }
}

/* ── Ensure hero section content doesn't overflow on mobile ─── */
@media (max-width: 575px) {
  .hero-section .container { padding-left: 5%; padding-right: 5%; }
  .hero-section .row { flex-direction: column; }
  .hero-section .col-lg-6 { width: 100%; }
  .nb-board { border-radius: 12px; }
}

/* ── Gallery mosaic: single column on ultra-small ─────────── */
@media (max-width: 380px) {
  .gallery-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .gcell {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
    height: 160px;
  }
}

/* ── Form row stays single column from 575px and below ──────── */
@media (max-width: 575px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── Dept header button: full width on XS ─────────────────── */
@media (max-width: 575px) {
  .dept-header { flex-direction: column; align-items: flex-start; }
  .dept-header .btn-secondary { align-self: flex-start; }
}

/* ── Blog header button: full width on XS ─────────────────── */
@media (max-width: 575px) {
  .blog-header { flex-direction: column; align-items: flex-start; }
  .blog-header .btn-secondary { align-self: flex-start; }
}

/* ── Pub header button: full width on XS ──────────────────── */
@media (max-width: 575px) {
  .pub-header { flex-direction: column; align-items: flex-start; }
  .pub-header .pub-view-btn { align-self: flex-start; }
  .pub-footer { flex-direction: column; align-items: center; gap: 14px; }
}

/* ── Gallery header button: full width on XS ──────────────── */
@media (max-width: 575px) {
  .gallery-header { flex-direction: column; align-items: flex-start; }
  .gallery-header .gallery-view-btn { align-self: flex-start; }
  .gallery-footer { flex-direction: column; align-items: center; gap: 14px; }
}

/* ── Contact info row: ensure it stacks properly on mobile ─── */
@media (max-width: 575px) {
  .contact-info-row { grid-template-columns: 1fr; }
  .contact-info-item { padding: 10px 12px; }
}

/* ── Footer socials wrap on very small ────────────────────── */
@media (max-width: 399px) {
  .footer-socials { gap: 6px; }
  .footer-social-link { width: 28px; height: 28px; font-size: 11px; }
}

/* ── Prevent nc-item overflow on very small screens ────────── */
@media (max-width: 360px) {
  .nc-item-tags { display: none; }
  .nc-item-body { overflow: hidden; }
}










    .page-demo {
      position: relative; z-index: 1;
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 48px 20px; text-align: center;
    }
    .demo-logo-wrap {
      width: 80px; height: 80px; border-radius: 50%;
      border: 2.5px solid rgba(13,115,119,.2);
      background: rgba(13,115,119,.06);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 18px; overflow: hidden;
    }
    .demo-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
    .demo-logo-wrap .demo-ico { font-size: 30px; color: var(--primary-teal); display: none; align-items: center; justify-content: center; }
    .demo-ar {
      font-family: 'Scheherazade New', serif;
      font-size: clamp(16px,3.5vw,21px); color: var(--gold);
      display: block; margin-bottom: 10px; line-height: 1.5;
    }
    .demo-h1 {
      font-family: 'Amiri', serif;
      font-size: clamp(1.5rem,5vw,2.3rem); font-weight: 700;
      color: var(--green-deep); margin-bottom: 4px;
    }
    .demo-sub {
      font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--text-soft); margin-bottom: 32px;
    }
    .demo-info {
      background: var(--white);
      border: 1px solid rgba(13,115,119,.12); border-radius: 12px;
      padding: 18px 22px; max-width: 400px; margin: 0 auto 28px;
      font-size: 13.5px; color: var(--text-mid); line-height: 1.75;
      box-shadow: 0 2px 14px rgba(13,115,119,.07);
    }
    .demo-info strong { color: var(--primary-teal); }
    .demo-info .orn { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
    .demo-info .orn hr { flex: 1; border: none; border-top: 1px solid rgba(13,115,119,.1); }
    .demo-info .orn span { font-size: 8px; color: var(--gold); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .demo-btn {
      display: inline-flex; align-items: center; gap: 9px;
      background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-dark));
      color: var(--white); border: none; border-radius: 10px;
      padding: 13px 30px;
      font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700;
      letter-spacing: .05em; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 6px 22px rgba(13,115,119,.3);
      transition: transform .3s, box-shadow .3s;
    }
    .demo-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(13,115,119,.4); }

    /* ═══════════════════════════════════════════════════════════════
       POPUP OVERLAY
    ═══════════════════════════════════════════════════════════════ */
    #admissionModal {
      position: fixed; inset: 0; z-index: 99999;
      background: rgba(8,20,12,.82);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 14px;
      opacity: 0; visibility: hidden;
      transition: opacity .38s ease, visibility .38s ease;
    }
    #admissionModal.open { opacity: 1; visibility: visible; }

    /* ═══════════════════════════════════════════════════════════════
       POPUP CARD  — styled like nb-board notice board
    ═══════════════════════════════════════════════════════════════ */
    #admissionCard {
      background: var(--white);
      border-radius: 18px;
      border: 1px solid rgba(13,115,119,.1);
      box-shadow: 0 4px 32px rgba(13,115,119,.13), 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.38);
      width: 100%; max-width: 630px;
      max-height: 93vh;
      overflow-y: auto; overflow-x: hidden;
      position: relative;
      transform: scale(.86) translateY(30px);
      transition: transform .46s cubic-bezier(.34,1.45,.64,1);
      scrollbar-width: thin;
      scrollbar-color: rgba(13,115,119,.2) transparent;
    }
    #admissionModal.open #admissionCard { transform: scale(1) translateY(0); }
    #admissionCard::-webkit-scrollbar { width: 4px; }
    #admissionCard::-webkit-scrollbar-thumb { background: rgba(13,115,119,.2); border-radius: 4px; }

    /* ── Countdown bar (drains across top of card) ── */
    .modal-bar {
      height: 4px;
      background: rgba(13,115,119,.1);
      overflow: hidden;
      border-radius: 18px 18px 0 0;
      flex-shrink: 0;
    }
    .modal-bar-fill {
      height: 100%; width: 100%;
      background: linear-gradient(90deg, var(--primary-teal), var(--gold-light), var(--gold));
      transform-origin: left center;
      transform: scaleX(1);
    }

    /* ═══════════════════════════════════════════════════════════════
       HEADER — matches nb-header gradient style from site
    ═══════════════════════════════════════════════════════════════ */
    .modal-hdr {
      background: linear-gradient(135deg, var(--green-deep) 0%, var(--primary-teal) 58%, var(--primary-teal-dark) 100%);
      padding: 20px 22px 18px;
      position: relative; overflow: hidden;
    }
    /* Geometric pattern overlay — matches site hero section */
    .modal-hdr::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.3' opacity='0.06'%3E%3Cpolygon points='40,2 78,21 78,59 40,78 2,59 2,21'/%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }
    /* Arabic watermark text */
    .modal-hdr-wm {
      position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
      font-family: 'Scheherazade New', serif;
      font-size: clamp(72px,16vw,134px); font-weight: 700;
      color: rgba(255,255,255,.04);
      pointer-events: none; user-select: none;
      white-space: nowrap; line-height: 1;
    }
    .modal-hdr-row {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 12px;
      position: relative; z-index: 1;
    }
    .modal-hdr-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }

    /* Logo ring */
    .modal-logo {
      width: 56px; height: 56px; border-radius: 50%;
      border: 2.5px solid rgba(255,255,255,.28);
      background: rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
      box-shadow: 0 4px 18px rgba(0,0,0,.22);
    }
    .modal-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
    .modal-logo .ml-fb { font-size: 22px; color: var(--gold-light); display: none; align-items: center; justify-content: center; }

    .modal-bismillah {
      font-family: 'Scheherazade New', serif;
      font-size: clamp(13px,3vw,17px); color: var(--gold-light);
      display: block; line-height: 1.4; margin-bottom: 4px;
    }
    .modal-org {
      font-family: 'Amiri', serif;
      font-size: clamp(.95rem,3.5vw,1.22rem); font-weight: 700;
      color: var(--white); line-height: 1.2; margin-bottom: 2px;
    }
    .modal-org-sub {
      font-size: 10px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }

    /* Close X button */
    .modal-close {
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.2);
      color: var(--white); font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .25s, transform .25s;
      flex-shrink: 0; position: relative; z-index: 1;
    }
    .modal-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

    /* Badge pills in header */
    .modal-badges {
      display: flex; align-items: center; gap: 7px;
      margin-top: 14px; flex-wrap: wrap;
      position: relative; z-index: 1;
    }
    .mbadge {
      display: inline-flex; align-items: center; gap: 5px;
      border-radius: 20px; padding: 3px 10px;
      font-size: 10px; font-weight: 700;
      letter-spacing: .05em; text-transform: uppercase;
    }
    .mbadge-new  { background: var(--gold); color: var(--green-deep); }
    .mbadge-cat  { background: rgba(255,255,255,.14); color: var(--white); border: 1px solid rgba(255,255,255,.18); }
    .mbadge-info { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 10px; }

    /* ═══════════════════════════════════════════════════════════════
       NOTICE TITLE BAND — styled like nb-notices-header from site
    ═══════════════════════════════════════════════════════════════ */
    .modal-ntband {
      background: linear-gradient(135deg, rgba(200,147,58,.07), rgba(13,115,119,.05));
      border-bottom: 1.5px solid rgba(200,147,58,.22);
      padding: 14px 22px;
      display: flex; align-items: center; gap: 13px;
    }
    .ntband-icon {
      width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px;
      background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-dark));
      display: flex; align-items: center; justify-content: center;
      color: var(--white); font-size: 17px;
      box-shadow: 0 3px 12px rgba(13,115,119,.25);
    }
    .ntband-title {
      font-family: 'Amiri', serif;
      font-size: clamp(1rem,3.5vw,1.22rem); font-weight: 700;
      color: var(--green-deep); line-height: 1.25; margin-bottom: 3px;
    }
    .ntband-title span {
      font-family: 'Scheherazade New', serif;
      font-size: .9em; color: var(--primary-teal);
      display: block; margin-top: 1px;
    }
    .ntband-exc { font-size: 12px; color: var(--text-soft); line-height: 1.55; }

    /* ═══════════════════════════════════════════════════════════════
       ADMISSION IMAGE
    ═══════════════════════════════════════════════════════════════ */
    .modal-imgbox {
      position: relative; overflow: hidden;
      background: rgba(13,115,119,.03);
      border-bottom: 1px solid rgba(13,115,119,.08);
      max-height: 240px;
      display: flex; align-items: center; justify-content: center;
    }
    .modal-imgbox img { width: 100%; max-height: 240px; object-fit: contain; display: block; }
    .modal-imgbox .img-ph { padding: 30px; text-align: center; }
    .modal-imgbox .img-ph i { font-size: 36px; color: rgba(13,115,119,.18); display: block; margin-bottom: 8px; }
    .modal-imgbox .img-ph span { font-size: 12px; color: var(--text-soft); }
    .img-ribbon {
      position: absolute; top: 14px; left: 0;
      background: var(--gold); color: var(--green-deep);
      font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      padding: 4px 12px 4px 10px; border-radius: 0 5px 5px 0;
      box-shadow: 2px 2px 10px rgba(200,147,58,.35);
    }

    /* ═══════════════════════════════════════════════════════════════
       3-COLUMN KEY INFO PILLS
    ═══════════════════════════════════════════════════════════════ */
    .modal-pills {
      display: grid; grid-template-columns: repeat(3,1fr);
      border-bottom: 1px solid rgba(13,115,119,.08);
    }
    .mpill {
      padding: 12px 14px;
      display: flex; align-items: flex-start; gap: 9px;
      border-right: 1px solid rgba(13,115,119,.07);
    }
    .mpill:last-child { border-right: none; }
    .mpill i { font-size: 14px; color: var(--primary-teal); flex-shrink: 0; margin-top: 2px; }
    .mpill-lbl {
      font-size: 9px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--text-soft); margin-bottom: 2px;
    }
    .mpill-val { font-size: 12px; font-weight: 700; color: var(--text-dark); line-height: 1.35; }

    /* ═══════════════════════════════════════════════════════════════
       CONTENT AREA
    ═══════════════════════════════════════════════════════════════ */
    .modal-body { padding: 18px 22px 8px; }

    /* Section divider — matches nb-notices-label style from site */
    .msec {
      display: flex; align-items: center; gap: 8px; margin: 4px 0 13px;
    }
    .msec::before {
      content: ''; display: block; width: 3px; height: 13px;
      background: var(--primary-teal); border-radius: 2px; flex-shrink: 0;
    }
    .msec-line { flex: 1; height: 1px; background: rgba(13,115,119,.1); }
    .msec-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }
    .msec-lbl {
      font-size: 9.5px; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-mid); white-space: nowrap;
    }

    /* Notice row list — matches nb-notice-row exactly from site */
    .mlist { list-style: none; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
    .mlist li {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 9px 12px; border-radius: 8px;
      border: 1px solid rgba(13,115,119,.08);
      background: #f9fdfc;
      font-size: 12.5px; color: var(--text-mid); line-height: 1.65;
      transition: border-color .2s, background .2s;
    }
    .mlist li:hover { border-color: rgba(13,115,119,.2); background: #ecf8f4; }
    .mdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
    .mdot-teal { background: var(--primary-teal); }
    .mdot-gold { background: var(--gold); }
    .mlist li strong { color: var(--text-dark); font-weight: 700; }
    .mur {
      font-family: 'Noto Nastaliq Urdu', serif;
      font-size: 11.5px; direction: rtl; color: var(--text-soft);
      line-height: 2; display: block; margin-top: 2px;
    }

    /* Contact block — left-teal-accent border */
    .modal-contact {
      background: rgba(13,115,119,.04);
      border: 1px solid rgba(13,115,119,.12);
      border-left: 3px solid var(--primary-teal);
      border-radius: 0 8px 8px 0;
      padding: 11px 15px; margin-bottom: 4px;
      font-size: 12.5px; color: var(--text-mid); line-height: 1.9;
    }
    .modal-contact strong { color: var(--text-dark); }

    /* ═══════════════════════════════════════════════════════════════
       ACTION BUTTONS — Apply Online  |  Download Form
    ═══════════════════════════════════════════════════════════════ */
    .modal-actions {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      padding: 14px 22px;
      border-top: 1px solid rgba(13,115,119,.08);
      background: #fafffe;
    }
    .mact-btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px; padding: 13px 16px; border-radius: 10px;
      font-family: 'Roboto', sans-serif; font-size: 12.5px; font-weight: 700;
      letter-spacing: .05em; text-transform: uppercase;
      text-decoration: none; border: none; cursor: pointer;
      transition: transform .3s, box-shadow .3s; line-height: 1.2;
    }
    .mact-btn i { font-size: 15px; }
    .mact-apply {
      background: linear-gradient(135deg, var(--primary-teal), var(--primary-teal-dark));
      color: var(--white); box-shadow: 0 5px 18px rgba(13,115,119,.3);
    }
    .mact-apply:hover { transform: translateY(-2px); box-shadow: 0 9px 26px rgba(13,115,119,.44); color: var(--white); }
    .mact-dl {
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      color: var(--green-deep); box-shadow: 0 5px 18px rgba(200,147,58,.26);
    }
    .mact-dl:hover { transform: translateY(-2px); box-shadow: 0 9px 26px rgba(200,147,58,.44); color: var(--green-deep); }

    /* ═══════════════════════════════════════════════════════════════
       FOOTER — countdown + dismiss
    ═══════════════════════════════════════════════════════════════ */
    .modal-footer {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; flex-wrap: wrap;
      padding: 9px 22px 15px;
    }
    .mcd-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-soft); }
    .mcd-row i { font-size: 11px; color: var(--primary-teal); }
    #mcdNum {
      font-weight: 800; color: var(--primary-teal);
      font-size: 14px; min-width: 20px;
      display: inline-block; text-align: center;
    }
    .m-dismiss {
      font-size: 11.5px; color: var(--text-soft);
      background: none; border: none; font-family: 'Roboto', sans-serif;
      cursor: pointer; text-decoration: underline;
      transition: color .2s;
    }
    .m-dismiss:hover { color: var(--primary-teal); }

    /* ═══════════════════════════════════════════════════════════════
       FULLY RESPONSIVE
    ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 560px) {
      #admissionModal { padding: 8px; }
      #admissionCard { border-radius: 14px; max-height: 96vh; }
      .modal-hdr { padding: 16px 14px 14px; }
      .modal-logo { width: 46px; height: 46px; }
      .modal-ntband { padding: 12px 14px; }
      /* Stack pills vertically */
      .modal-pills { grid-template-columns: 1fr; }
      .mpill { border-right: none; border-bottom: 1px solid rgba(13,115,119,.07); }
      .mpill:last-child { border-bottom: none; }
      .modal-body { padding: 14px 14px 6px; }
      .modal-actions { padding: 12px 14px; gap: 8px; }
      .modal-footer { padding: 8px 14px 12px; }
    }
    @media (max-width: 420px) {
      /* Stack action buttons */
      .modal-actions { grid-template-columns: 1fr; }
      .mact-btn { padding: 13px 14px; }
    }
    @media (max-width: 360px) {
      .modal-badges { gap: 5px; }
      .mbadge { font-size: 9px; padding: 2px 8px; }
      .modal-bismillah { font-size: 12px; }
      .ntband-title { font-size: .97rem; }
    }