/* Final UX/UI refinement layer — An-Nikmah */
:root{
  --ux-navy:#0a274d;
  --ux-blue:#123c73;
  --ux-gold:#dca11d;
  --ux-bg:#f7f9fc;
  --ux-text:#17233c;
  --ux-muted:#667085;
  --ux-line:#e5eaf2;
  --ux-radius:18px;
  --ux-shadow:0 12px 34px rgba(10,39,77,.08);
}
body{background:var(--ux-bg);color:var(--ux-text)}
.section{padding:96px 0}
.site-header{background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.navbar-wrap{min-height:82px}
.brand-mark{width:48px;height:48px}
.brand-title{font-size:.98rem;max-width:310px}
.brand-sub{font-size:.63rem;letter-spacing:.09em}
.nav-group>a,.nav-group>button{font-size:.84rem;padding-inline:10px}
.hero .wrap{min-height:650px;padding:120px 0 145px}
.hero-slide:before{background:linear-gradient(90deg,rgba(7,28,58,.88) 0%,rgba(10,39,77,.70) 45%,rgba(10,39,77,.34) 100%)}
.hero-panel{max-width:720px}
.hero h1{font-size:clamp(2.55rem,5.2vw,4.65rem);letter-spacing:-.035em;line-height:1.04}
.hero p{font-size:1.08rem;max-width:620px;line-height:1.75}
.hero-actions{margin-top:30px}
.stat-strip{margin-top:-58px}
.stat-grid{padding:28px 34px;border-radius:22px;gap:32px}
.stat-card{padding-left:4px}
.stat-card b{font-size:2.15rem}
.stat-card span{font-size:.7rem;letter-spacing:.09em}
.ux-trust{padding:46px 0 24px}
.ux-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ux-line);border:1px solid var(--ux-line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(10,39,77,.04)}
.ux-trust-item{background:#fff;padding:26px 24px}
.ux-trust-item i{font-size:1.15rem;color:var(--ux-gold);margin-bottom:14px}
.ux-trust-item h3{font:600 1rem/1.35 'Poppins',sans-serif;margin:0 0 8px;color:var(--ux-navy)}
.ux-trust-item p{font-size:.88rem;color:var(--ux-muted);margin:0}
.ux-about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ux-about-photo{position:relative}
.ux-about-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px}
.ux-about-badge{position:absolute;right:-18px;bottom:24px;background:var(--ux-navy);color:#fff;padding:20px 24px;border-radius:16px;box-shadow:var(--ux-shadow);min-width:180px}
.ux-about-badge b{display:block;font:700 1.6rem/1 'Poppins',sans-serif;color:#fff}
.ux-about-badge span{display:block;margin-top:6px;font-size:.78rem;color:rgba(255,255,255,.78)}
.ux-copy h2{font:600 clamp(1.9rem,3.4vw,2.75rem)/1.18 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 20px;letter-spacing:-.02em}
.ux-copy p{font-size:1rem;color:var(--ux-muted);margin:0 0 26px;line-height:1.85}
.ux-vm{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.ux-vm-card{border-top:2px solid var(--ux-gold);background:#fff;padding:22px;border-radius:0 0 16px 16px;box-shadow:0 6px 18px rgba(10,39,77,.04)}
.ux-vm-card h3{font:600 1rem/1.3 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 8px}
.ux-vm-card p{font-size:.88rem;margin:0;color:var(--ux-muted);line-height:1.7}
.ux-program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ux-program{position:relative;background:#fff;border:1px solid var(--ux-line);border-radius:20px;padding:30px;box-shadow:0 6px 20px rgba(10,39,77,.04);overflow:hidden;transition:.25s ease}
.ux-program:hover{transform:translateY(-5px);box-shadow:var(--ux-shadow)}
.ux-program-num{font:700 3.8rem/1 'Poppins',sans-serif;color:#edf1f6;position:absolute;right:22px;top:18px}
.ux-program i{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#eef4fb;color:var(--ux-blue);font-size:1.2rem;margin-bottom:28px}
.ux-program h3{font:600 1.28rem/1.3 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 12px}
.ux-program p{color:var(--ux-muted);font-size:.92rem;min-height:82px;margin:0 0 20px}
.ux-editorial{background:#fff}
.ux-tab-shell{border:none;background:transparent;box-shadow:none;padding:0}
.ux-tab-shell .tab-nav{border-bottom:1px solid var(--ux-line);gap:4px;margin-bottom:30px}
.ux-tab-shell .tab-btn{border:none;border-radius:0;background:transparent;padding:12px 18px;color:var(--ux-muted);position:relative}
.ux-tab-shell .tab-btn.active{background:transparent;color:var(--ux-navy)}
.ux-tab-shell .tab-btn.active:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--ux-gold)}
.story-card{border-color:var(--ux-line);box-shadow:none;border-radius:18px}
.story-card:hover{box-shadow:var(--ux-shadow)}
.story-thumb{aspect-ratio:16/9}
.story-body{padding:24px}
.ux-feature{background:var(--ux-navy);color:#fff;overflow:hidden}
.ux-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ux-feature-media{position:relative}
.ux-feature-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px;opacity:.92}
.ux-feature .ux-copy h2{color:#fff}
.ux-feature .ux-copy p{color:rgba(255,255,255,.74)}
.ux-feature-points{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.ux-feature-point{padding:16px 0;border-top:1px solid rgba(255,255,255,.16);font-size:.88rem;color:rgba(255,255,255,.84)}
.ux-feature-point b{display:block;color:var(--ux-gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.ux-leadership-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ux-person{background:#fff;border:1px solid var(--ux-line);border-radius:18px;overflow:hidden;transition:.25s ease}
.ux-person:hover{transform:translateY(-4px);box-shadow:var(--ux-shadow)}
.ux-person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;background:#e9eef5}
.ux-person-copy{padding:18px 18px 20px}
.ux-person-copy h3{font:600 .98rem/1.35 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 7px}
.ux-person-copy p{font-size:.82rem;line-height:1.55;color:var(--ux-muted);margin:0}
.ux-partner-preview{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ux-partner{height:126px;background:#fff;border:1px solid var(--ux-line);border-radius:16px;padding:18px;display:grid;place-items:center}
.ux-partner img{max-width:100%;max-height:72px;object-fit:contain}
.ux-cta-row{display:flex;justify-content:center;margin-top:34px}
.ux-donation{padding:64px 0;background:linear-gradient(105deg,#f9fbfe,#eef3f9)}
.ux-donation-card{display:grid;grid-template-columns:1.5fr auto;align-items:center;gap:30px;background:#fff;border:1px solid var(--ux-line);border-radius:22px;padding:34px 38px;box-shadow:var(--ux-shadow)}
.ux-donation-card h2{font:600 1.7rem/1.25 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 8px}
.ux-donation-card p{margin:0;color:var(--ux-muted);max-width:720px}
.ux-contact{padding:88px 0}
.ux-contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:start}
.ux-contact-info{display:grid;gap:0;border-top:1px solid var(--ux-line)}
.ux-contact-row{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--ux-line)}
.ux-contact-row i{width:40px;height:40px;border-radius:12px;background:#eef4fb;color:var(--ux-blue);display:grid;place-items:center}
.ux-contact-row h4{font:600 .92rem/1.3 'Poppins',sans-serif;margin:0 0 4px;color:var(--ux-navy)}
.ux-contact-row p{font-size:.9rem;color:var(--ux-muted);margin:0}
.ux-contact-form{background:#fff;border:1px solid var(--ux-line);border-radius:20px;padding:28px;box-shadow:0 8px 24px rgba(10,39,77,.05)}
.ux-contact-form h3{font:600 1.2rem/1.3 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 22px}
.site-footer{padding-top:72px}
.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
/* internal pages */
.ux-page-hero{background:linear-gradient(110deg,var(--ux-navy),var(--ux-blue));color:#fff;position:relative;overflow:hidden}
.ux-page-hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:24px 24px;opacity:.38}
.ux-page-hero .wrap{position:relative;z-index:1;padding:92px 0 78px}
.ux-page-hero .breadcrumb{color:rgba(255,255,255,.72);font-size:.82rem}
.ux-page-hero h1{font:600 clamp(2.1rem,4.2vw,3.5rem)/1.12 'Poppins',sans-serif;margin:14px 0 0}
.ux-page-hero p{max-width:720px;color:rgba(255,255,255,.78);font-size:1rem;margin:14px 0 0}
.ux-page-section{padding:82px 0}
.ux-page-section.alt{background:#fff}
.ux-prose{max-width:850px}
.ux-prose h2{font:600 1.8rem/1.25 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 18px}
.ux-prose p{color:var(--ux-muted);line-height:1.9}
.ux-mission-list{display:grid;gap:14px;margin-top:22px}
.ux-mission-item{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--ux-line)}
.ux-mission-num{font:700 .84rem/1 'Poppins',sans-serif;color:var(--ux-gold);padding-top:5px}
.ux-mission-item p{margin:0;color:var(--ux-muted)}
.ux-history-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.ux-history-card{background:#fff;border:1px solid var(--ux-line);border-radius:16px;overflow:hidden}
.ux-history-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ux-history-card div{padding:16px}
.ux-history-card b{font:600 .95rem/1.2 'Poppins',sans-serif;color:var(--ux-navy)}
.ux-history-card p{font-size:.82rem;margin:5px 0 0;color:var(--ux-muted)}
.ux-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ux-full-partners{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ux-full-partner{background:#fff;border:1px solid var(--ux-line);border-radius:16px;padding:20px;min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ux-full-partner img{height:66px;width:auto;max-width:100%;object-fit:contain;margin-bottom:14px}
.ux-full-partner h3{font:600 .72rem/1.2 'Poppins',sans-serif;color:var(--ux-gold);letter-spacing:.08em;margin:0 0 7px}
.ux-full-partner p{font-size:.84rem;line-height:1.45;color:var(--ux-muted);margin:0}
.ux-program-detail{background:#fff;border:1px solid var(--ux-line);border-radius:20px;padding:30px;margin-bottom:24px}
.ux-program-detail-head{display:grid;grid-template-columns:70px 1fr;gap:22px;align-items:start}
.ux-program-detail-num{font:700 2.5rem/1 'Poppins',sans-serif;color:#dce5f0}
.ux-program-detail h2{font:600 1.55rem/1.2 'Poppins',sans-serif;color:var(--ux-navy);margin:0 0 10px}
.ux-program-detail p{color:var(--ux-muted);margin:0}
.ux-subjects{margin-top:24px;padding-top:22px;border-top:1px solid var(--ux-line)}
.ux-subjects h3{font:600 .88rem/1.3 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--ux-blue);margin:0 0 10px}
.ux-subjects p{line-height:1.8}
@media (max-width:1050px){
  .ux-partner-preview{grid-template-columns:repeat(3,1fr)}
  .ux-leadership-grid{grid-template-columns:repeat(2,1fr)}
  .ux-full-partners{grid-template-columns:repeat(3,1fr)}
  .ux-full-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ux-about-grid,.ux-feature-grid,.ux-contact-grid{grid-template-columns:1fr}
  .ux-about-badge{right:18px}
  .ux-program-grid{grid-template-columns:1fr}
  .ux-program p{min-height:auto}
  .ux-trust-grid{grid-template-columns:repeat(2,1fr)}
  .ux-donation-card{grid-template-columns:1fr}
  .ux-history-timeline{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .section{padding:74px 0}
  .hero .wrap{min-height:590px;padding:100px 0 125px}
  .hero h1{font-size:2.25rem}
  .stat-strip{margin-top:-42px}
  .ux-vm{grid-template-columns:1fr}
  .ux-leadership-grid,.ux-full-grid,.ux-full-partners{grid-template-columns:1fr}
  .ux-partner-preview{grid-template-columns:repeat(2,1fr)}
  .ux-feature-points{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:460px){
  .ux-trust-grid,.ux-partner-preview,.ux-history-timeline{grid-template-columns:1fr}
  .ux-donation-card{padding:28px 24px}
  .footer-grid{grid-template-columns:1fr}
}
.school-values-ticker {
  width: 100%;
  background: linear-gradient(90deg, #f8fafc, #ffffff, #f8fafc);
  color: #475569;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;

  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.3px;

  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.ticker-content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

.ticker-content span {
  margin: 0 22px;
}

.ticker-content .separator {
  color: #3b82f6;
  font-size: 0.65rem;
  opacity: 1;
}