/* =====================================================
   QAFILAT ALTAWHID — Master Stylesheet v2
   Qafilat Altawhid International Group
   ===================================================== */

/* ── Font Faces ───────────────────────────────────── */
@font-face { font-family:'Zagel'; src:url('ZagelArabicITF-Light.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Zagel'; src:url('ZagelArabicITF-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Zagel'; src:url('ZagelArabicITF-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Zagel'; src:url('ZagelArabicITF-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'FFF Acid'; src:url('FFF-AcidGrotesk-Light-TRIAL.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'FFF Acid'; src:url('FFF-AcidGrotesk-Regular-TRIAL.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'FFF Acid'; src:url('FFF-AcidGrotesk-Normal-TRIAL.otf') format('opentype'); font-weight:450; font-display:swap; }
@font-face { font-family:'FFF Acid'; src:url('FFF-AcidGrotesk-Medium-TRIAL.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'FFF Acid'; src:url('FFF-AcidGrotesk-ExtraBold-TRIAL.otf') format('opentype'); font-weight:800; font-display:swap; }

/* ── CSS Variables ────────────────────────────────── */
:root {
  --primary:      #02492e;
  --primary-dark: #023d26;
  --secondary:    #b5f4d5;
  --accent:       #5ccc78;
  --bg-accent:    #e6e3dc;
  --white:        #ffffff;
  --off-white:    #f9f7f4;
  --cream:        #f4f1ec;
  --text-dark:    #111111;
  --text-mid:     #444444;
  --text-light:   #888888;
  --border:       rgba(2,73,46,0.12);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.05);
  --shadow:       0 4px 28px rgba(0,0,0,0.07);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.11);
  --radius:       18px;
  --radius-sm:    10px;
  --font-ar:      'Zagel','Noto Serif Arabic',serif;
  --font-en:      'FFF Acid','Inter',sans-serif;
  /* gradient ring colors */
  --ring-a: rgba(181,244,213,0.9);
  --ring-b: rgba(92,204,120,0.45);
  --ring-c: rgba(181,244,213,0.75);
}

/* ── Reset ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-ar);
  direction:rtl;
  background:var(--white);
  color:var(--text-dark);
  overflow-x:hidden;
  line-height:1.6;
  transition:font-family 0.2s;
}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* ── Arabic mode — enforce Zagel everywhere ───────── */
body{font-family:var(--font-ar);}
h1,h2,h3,h4,h5,h6,p,a,li,span,button,input,textarea{font-family:inherit;}

/* ── English mode ─────────────────────────────────── */
body.lang-en {
  font-family: var(--font-en);
  direction: ltr;
}
body.lang-en .section-title,
body.lang-en .section-label,
body.lang-en .hero-title,
body.lang-en .hero-slogan,
body.lang-en .hero-en-badge,
body.lang-en p,
body.lang-en h2,
body.lang-en h3,
body.lang-en h4,
body.lang-en li,
body.lang-en a,
body.lang-en .btn,
body.lang-en .vmg-card h3,
body.lang-en .vmg-card p,
body.lang-en .chairman-name,
body.lang-en .chairman-role,
body.lang-en .award-card h3,
body.lang-en .forum-partnership-badge,
body.lang-en .piac-text,
body.lang-en .unified-sub,
body.lang-en .footer-tagline,
body.lang-en .footer-license,
body.lang-en .footer-ci-text,
body.lang-en .audio-card-title {
  font-family: var(--font-en);
}
body.lang-en .chairman-quote {
  border-right: none;
  border-left: 3px solid var(--primary);
  text-align: left;
}
body.lang-en .chairman-body { text-align: left; }
body.lang-en .footer-tagline { max-width: 360px; }
body.lang-en .nav-links a,
body.lang-en .nav-mobile a,
body.lang-en .nav-cta .btn { font-family: var(--font-en); }

/* ── Utility ──────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.77rem;font-weight:500;color:var(--primary);
  text-transform:uppercase;letter-spacing:0.13em;
  font-family:var(--font-en);margin-bottom:14px;
}
.section-label::before,.section-label::after{
  content:'';display:block;width:26px;height:1px;background:var(--accent);
}
/* Arabic mode: reset label to Zagel, no uppercase tracking */
body:not(.lang-en) .section-label{
  font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.82rem;
}

.section-title{
  font-family:var(--font-ar);
  font-size:clamp(1.9rem,4.5vw,3rem);font-weight:700;
  color:var(--primary);line-height:1.25;margin-bottom:16px;
}
body.lang-en .section-title { font-family:var(--font-en); }

.section-divider{
  width:48px;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:2px;margin:0 0 48px;
}
.section-divider.center{margin-left:auto;margin-right:auto;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:9px;padding:13px 28px;border-radius:50px;
  font-family:var(--font-ar);font-size:0.97rem;font-weight:500;
  transition:transform .25s,box-shadow .25s,background .25s,color .25s;
  cursor:pointer;white-space:nowrap;
}
.btn svg{flex-shrink:0;}
.btn-primary{background:var(--primary);color:var(--white);border:2px solid var(--primary);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(2,73,46,.28);}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);}
.btn-outline:hover{background:var(--primary);color:var(--white);transform:translateY(-2px);}
.btn-ghost-white{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.4);}
.btn-ghost-white:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);transform:translateY(-2px);}
.btn-whatsapp{background:#c8f7dd;color:var(--primary);border:1.5px solid rgba(2,73,46,.22);}
.btn-whatsapp:hover{background:#b5f4d5;border-color:rgba(2,73,46,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(2,73,46,.12);}

/* Pattern overlay — disabled (pattern removed) */
.has-pattern{position:relative;}
.has-pattern>*{position:relative;z-index:1;}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}
/* License cards — staggered individually (override global delays) */
.licenses-section .license-card:nth-child(1).reveal{transition-delay:0s;}
.licenses-section .license-card:nth-child(2).reveal{transition-delay:0.3s;}
.licenses-section .license-card:nth-child(3).reveal{transition-delay:0.6s;}

/* ─────────────────────────────────────────────────────
   NAVBAR
──────────────────────────────────────────────────── */
.navbar{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:min(1320px, calc(100vw - 28px));
  z-index:9000;box-sizing:border-box;
}

/* Gradient ring — luminous premium stroke around the pill */
.navbar-ring{
  padding:1.5px;border-radius:61px;
  background:linear-gradient(135deg,
    rgba(181,244,213,.98) 0%,
    rgba(92,204,120,.6)  45%,
    rgba(2,73,46,.22)    70%,
    rgba(181,244,213,.88) 100%);
  background-size:200% 200%;
  animation:navRingShimmer 8s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(181,244,213,.18),
    0 8px 32px rgba(2,73,46,.09),
    0 2px 8px  rgba(2,73,46,.05);
  transition:box-shadow .4s;
}
@keyframes navRingShimmer{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
.navbar.scrolled .navbar-ring{
  background:linear-gradient(135deg,
    rgba(181,244,213,1)   0%,
    rgba(92,204,120,.75)  45%,
    rgba(2,73,46,.3)      70%,
    rgba(181,244,213,.95) 100%);
  background-size:200% 200%;
  animation:navRingShimmer 8s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(92,204,120,.25),
    0 10px 40px rgba(2,73,46,.13),
    0 2px 10px  rgba(2,73,46,.07);
}

.navbar-pill{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 16px;
  background:rgba(238,251,244,.91);
  backdrop-filter:blur(26px) saturate(200%);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  border-radius:60px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  transition:background .4s,box-shadow .4s;
  min-width:0;box-sizing:border-box;
  /* NO overflow:hidden — it clips the mobile dropdown via backdrop-filter stacking context */
}
.navbar.scrolled .navbar-pill{
  background:rgba(243,253,247,.97);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 20px rgba(2,73,46,.06);
}

/* Logo — two variants */
.nav-logo{display:flex;align-items:center;flex-shrink:0;min-width:0;}
.nav-logo-symbol{display:none;height:42px;width:auto;flex-shrink:0;}     /* desktop only */
.nav-logo-full  {display:block;height:28px;width:auto;max-width:110px;object-fit:contain;flex-shrink:0;}    /* mobile (default) */

.nav-links{
  display:none;align-items:center;gap:2px;flex:1;justify-content:center;
}
.nav-links a{
  font-family:var(--font-ar);font-size:.84rem;font-weight:500;
  color:var(--text-mid);padding:7px 11px;border-radius:30px;
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--primary);background:rgba(2,73,46,.07);}

.nav-cta{display:none;align-items:center;gap:10px;flex-shrink:0;}
.nav-cta .btn{padding:9px 20px;font-size:.88rem;}

/* Language switcher — EN | ع */
.lang-switch{
  display:inline-flex;align-items:center;gap:0;
  border:1px solid rgba(181,244,213,.8);border-radius:20px;
  overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#f8faf7,#eef8f1);
}
.lang-opt{
  padding:5px 12px;
  font-family:var(--font-en);font-size:.76rem;font-weight:700;
  color:var(--primary);letter-spacing:.03em;
  transition:background .2s,color .2s;cursor:pointer;
  border:none;background:transparent;
}
/* Arabic button uses Zagel font */
.lang-opt[data-lang="ar"]{font-family:var(--font-ar);font-size:.85rem;letter-spacing:0;}
/* No permanent active fill — both buttons always look the same */
.lang-opt.active{background:transparent;}
.lang-opt:hover{background:rgba(181,244,213,.3);color:var(--primary);}
/* Brief tap flash — triggered via JS, auto-fades */
.lang-opt.lang-flash{animation:langFlash .65s ease-out forwards;}
@keyframes langFlash{
  0%  {background:rgba(181,244,213,.85);}
  55% {background:rgba(181,244,213,.28);}
  100%{background:transparent;}
}
.lang-divider{color:rgba(2,73,46,.25);font-size:.72rem;pointer-events:none;user-select:none;line-height:1;}

/* Hamburger */
.nav-burger{
  display:flex;flex-direction:column;gap:5px;
  padding:8px;border-radius:10px;cursor:pointer;
  transition:background .2s;flex-shrink:0;
}
.nav-burger:hover{background:rgba(2,73,46,.07);}
.nav-burger span{
  display:block;width:21px;height:2px;
  background:var(--primary);border-radius:2px;
  transition:transform .28s ease,opacity .28s ease;
}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile dropdown — direct child of <nav>, so positioned relative to the fixed navbar */
.nav-mobile{
  display:none;
  position:absolute;
  /* sits just below the navbar-ring (ring height ≈ pill + 2px padding) */
  top:calc(100% + 6px);
  right:0;left:0;
  z-index:8999; /* below navbar z-index:9000 but above all page content */
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(2,73,46,.1);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:12px;
  max-height:75vh;
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
}
.nav-mobile.open{display:block;}
.nav-mobile a{
  display:block;font-family:var(--font-ar);font-size:.97rem;font-weight:500;
  color:var(--text-mid);padding:11px 16px;border-radius:12px;
  transition:color .2s,background .2s;
}
.nav-mobile a:hover{color:var(--primary);background:rgba(2,73,46,.06);}
.nav-mobile-cta{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.nav-mobile-cta .btn{width:100%;}
.nav-mobile-cta a.btn-primary,.nav-mobile-cta .btn-primary{color:var(--white);}

.mobile-controls{display:flex;align-items:center;gap:6px;flex-shrink:0;}

@media(min-width:1080px){
  .nav-links{display:flex;}
  .nav-cta{display:flex;}
  .mobile-controls{display:none;}  /* hide burger + mobile lang-switch on desktop */
  .nav-logo-symbol{display:block;}
  .nav-logo-full{display:none;}
}

/* ─────────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:130px 20px 80px;
  background:linear-gradient(155deg,#ffffff 0%,#fafcfa 55%,#f2faf5 100%);
  animation:heroGradientShift 18s ease-in-out infinite alternate;
}
@keyframes heroGradientShift{
  0%  { background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
.hero::before{
  content:'';position:absolute;inset:-30px;
  background-image:url('new-pattern.svg');
  background-repeat:no-repeat;background-size:cover;background-position:center;
  opacity:.022;pointer-events:none;
  animation:patternDrift 38s ease-in-out infinite;
}
@keyframes patternDrift{
  0%,100%{transform:translateX(0);}
  50%    {transform:translateX(-22px);}
}
/* Subtle animated mint haze overlay */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 60% 40%,rgba(181,244,213,.13) 0%,transparent 70%);
  animation:heroHaze 22s ease-in-out infinite alternate;
}
@keyframes heroHaze{
  0%  { opacity:.6; transform:scale(1)   translateY(0); }
  100%{ opacity:1;  transform:scale(1.08) translateY(-12px); }
}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;}
.hero-orb-1{
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(181,244,213,.35) 0%,transparent 68%);
  top:-100px;right:-80px;
}
.hero-orb-2{
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(92,204,120,.1) 0%,transparent 70%);
  bottom:-80px;left:-60px;
}
.hero-content{position:relative;z-index:3;text-align:center;max-width:820px;width:100%;}
/* Hero badge — Zagel in Arabic mode, FFF Acid in English */
body:not(.lang-en) .hero-en-badge{font-family:var(--font-ar);}
.hero-en-badge{
  display:inline-block;padding:7px 22px;
  background:rgba(2,73,46,.07);border:1px solid rgba(2,73,46,.18);border-radius:50px;
  font-family:var(--font-en);font-size:.78rem;font-weight:500;
  color:var(--primary);letter-spacing:.08em;margin-bottom:28px;
}
.hero-title{
  font-family:var(--font-ar);
  font-size:clamp(3rem,9vw,6.5rem);font-weight:700;
  color:var(--primary);line-height:1.15;margin-bottom:22px;
}
body.lang-en .hero-title{font-family:var(--font-en);font-size:clamp(2.4rem,7vw,5rem);}
/* ── Hero slogan — pure typography, no container ── */
.hero-slogan{
  font-family:var(--font-ar);
  font-size:clamp(1.5rem,3.8vw,2.2rem);
  font-weight:500;
  color:var(--text-mid);
  line-height:1.85;
  max-width:700px;
  margin:0 auto 52px;
  letter-spacing:0.01em;
}
body.lang-en .hero-slogan{
  font-family:var(--font-en);
  font-size:clamp(1.3rem,3.2vw,1.9rem);
  font-weight:400;
}
@media(max-width:600px){
  .hero-slogan{ font-size:clamp(1.25rem,5vw,1.6rem); }
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
/* hero-scroll-indicator removed */

/* floating hero symbols removed */

/* ─────────────────────────────────────────────────────
   ABOUT
──────────────────────────────────────────────────── */
.about{padding:100px 0 0;background:var(--white);overflow:hidden;}
.about-body{max-width:840px;margin:0 auto;text-align:center;padding:0 20px 56px;}
.about-body p{font-size:clamp(1.02rem,2vw,1.15rem);color:var(--text-mid);line-height:2.05;}

/* ── Service icon marquee ─────────────────────────── */
.svc-marquee-outer{
  position:relative;overflow:hidden;
  direction:ltr; /* always left-to-right */
  padding:34px 0;
  border-top:1px solid rgba(2,73,46,.09);
  border-bottom:1px solid rgba(2,73,46,.09);
  background:linear-gradient(135deg,rgba(181,244,213,.11) 0%,rgba(238,248,241,.18) 50%,rgba(181,244,213,.09) 100%);
}
/* Soft fade edges */
.svc-marquee-outer::before,
.svc-marquee-outer::after{
  content:'';position:absolute;top:0;bottom:0;width:110px;pointer-events:none;z-index:2;
}
.svc-marquee-outer::before{left:0;background:linear-gradient(to right,var(--white),transparent);}
.svc-marquee-outer::after {right:0;background:linear-gradient(to left, var(--white),transparent);}

.svc-marquee-track{
  display:flex;align-items:center;
  width:max-content;
  animation:svcMarquee 34s linear infinite;
}
.svc-marquee-outer:hover .svc-marquee-track{animation-play-state:paused;}
@keyframes svcMarquee{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}
.svc-item{
  flex:0 0 266px;
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:0 18px;
}
.svc-item img{
  width:252px;height:auto;max-height:208px;
  object-fit:contain;display:block;
  opacity:.86;
}
/* Text labels hidden — text is embedded inside the SVG icons */
.svc-item span{display:none;}

/* ─────────────────────────────────────────────────────
   VISION / MISSION / GOALS
──────────────────────────────────────────────────── */
.vision-section{padding:100px 20px;background:var(--off-white);overflow:hidden;}
.vision-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:1100px;margin:0 auto;}
.vmg-card{
  background:var(--white);border-radius:var(--radius);border:1px solid var(--border);
  padding:40px 32px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.vmg-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(2,73,46,.22);}
.vmg-num{font-family:var(--font-en);font-size:.7rem;font-weight:800;letter-spacing:.15em;color:var(--accent);margin-bottom:16px;}
.vmg-icon-wrap{
  width:58px;height:58px;
  background:linear-gradient(135deg,rgba(181,244,213,.55),rgba(92,204,120,.2));
  border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
}
.vmg-icon-wrap svg{width:28px;height:28px;color:var(--primary);}
.vmg-card h3{font-size:1.35rem;font-weight:700;color:var(--primary);margin-bottom:14px;}
.vmg-card p{font-size:1rem;color:var(--text-mid);line-height:1.95;}
@media(min-width:640px){.vision-grid{grid-template-columns:repeat(3,1fr);}}

/* ─────────────────────────────────────────────────────
   LICENSES
──────────────────────────────────────────────────── */
.licenses-section{padding:100px 20px;background:var(--white);}
.licenses-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:900px;margin:0 auto;}
.license-card{
  display:flex;align-items:flex-start;gap:20px;
  padding:28px 30px;background:var(--off-white);
  border-radius:var(--radius);border:1px solid var(--border);
  transition:border-color .25s,box-shadow .25s;
}
.license-card:hover{border-color:rgba(2,73,46,.25);box-shadow:var(--shadow-sm);}
.license-badge{
  width:46px;height:46px;
  background:linear-gradient(135deg,rgba(181,244,213,.6),rgba(92,204,120,.25));
  border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.license-badge svg{width:22px;height:22px;color:var(--primary);}
.license-card p{font-size:1rem;color:var(--text-mid);line-height:1.85;}
.nusuk-badge{display:flex;align-items:center;justify-content:center;margin-top:40px;}
.nusuk-badge img{height:60px;width:auto;opacity:.8;}
@media(min-width:640px){
  .licenses-grid{grid-template-columns:1fr 1fr;}
  .licenses-grid .license-card:last-child{grid-column:1/-1;max-width:600px;margin:0 auto;width:100%;}
}

/* ─────────────────────────────────────────────────────
   NUSUK UMRAH
──────────────────────────────────────────────────── */
.nusuk-section{
  padding:100px 20px;
  background:linear-gradient(155deg,var(--white) 0%,rgba(181,244,213,.13) 60%,var(--off-white) 100%);
  text-align:center;position:relative;overflow:hidden;
  border-top:1px solid var(--border);
}
.nusuk-section::before{
  content:'';position:absolute;inset:-30px;
  background-image:url('new-pattern.svg');background-repeat:no-repeat;
  background-size:cover;background-position:center;opacity:.025;pointer-events:none;
  animation:patternDrift 38s ease-in-out infinite;
}
.nusuk-inner{max-width:720px;margin:0 auto;position:relative;z-index:1;}
.nusuk-logo-wrap{margin-bottom:40px;display:flex;align-items:center;justify-content:center;}
.nusuk-logo-wrap img{height:56px;width:auto;opacity:.92;}
.nusuk-text{font-size:1.06rem;color:var(--text-mid);line-height:2.1;max-width:580px;margin:0 auto;}
.nusuk-provider{
  display:inline-block;margin:24px auto 40px;
  padding:13px 32px;
  background:rgba(181,244,213,.28);
  border:1px solid rgba(2,73,46,.14);border-radius:50px;
  font-size:.98rem;font-weight:700;color:var(--primary);
}
.nusuk-cta{margin-top:8px;}
.btn-nusuk{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 38px;border-radius:50px;
  background:linear-gradient(135deg,rgba(181,244,213,.65),rgba(92,204,120,.38));
  border:1.5px solid rgba(2,73,46,.2);
  color:var(--primary);font-size:1rem;font-weight:600;
  font-family:var(--font-ar);cursor:pointer;text-decoration:none;
  transition:background .3s,border-color .3s,transform .25s,box-shadow .25s;
}
.btn-nusuk:hover{
  background:linear-gradient(135deg,rgba(181,244,213,.88),rgba(92,204,120,.58));
  border-color:rgba(2,73,46,.35);transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(2,73,46,.1);
}
body.lang-en .btn-nusuk{font-family:var(--font-en);}

/* ─────────────────────────────────────────────────────
   CHAIRMAN
──────────────────────────────────────────────────── */
.chairman-section{padding:100px 20px;background:var(--white);}
.chairman-inner{max-width:980px;margin:0 auto;}
.chairman-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:flex-start;}
.chairman-img-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;}
.chairman-img-frame{
  padding:3px;border-radius:23px;
  background:linear-gradient(135deg,#b5f4d5,#eef8f1,#5ccc78,#d4f7e8,#b5f4d5);
  background-size:300% 300%;
  animation:gradientPulse 5s ease infinite;
  display:inline-block;
}
.chairman-img{width:220px;height:280px;object-fit:cover;border-radius:20px;display:block;}
.chairman-body{text-align:center;}
.chairman-name{font-size:clamp(1.5rem,3.5vw,2rem);font-weight:700;color:var(--primary);margin-bottom:5px;}
.chairman-role{font-size:1rem;color:var(--text-light);margin-bottom:0;letter-spacing:.02em;}
.chairman-msg{
  margin-top:28px;
  background:var(--off-white);border-radius:var(--radius);
  padding:28px 32px;border:1px solid var(--border);
  border-inline-start:3px solid var(--accent);
}
.chairman-msg p{font-size:1rem;color:var(--text-mid);line-height:2.1;margin-bottom:18px;text-align:start;}
.chairman-msg p:last-child{margin-bottom:0;}
@media(min-width:720px){
  .chairman-grid{grid-template-columns:240px 1fr;gap:56px;align-items:flex-start;}
  .chairman-body{text-align:start;}
  .chairman-img-wrap{align-items:flex-start;}
}

/* ─────────────────────────────────────────────────────
   CHAIRMAN GLOBE
──────────────────────────────────────────────────── */
.chairman-globe-wrap{
  text-align:center;margin-top:72px;
  padding:60px 20px 20px;position:relative;z-index:1;
  overflow:hidden; /* safely clips any orbit symbols at section boundary */
  box-sizing:border-box;
}
.chairman-globe{
  position:relative;width:520px;height:520px;
  margin:0 auto 32px;
  overflow:visible; /* symbols can float within wrap, wrap clips them */
}
.globe-svg{width:100%;height:100%;display:block;}
/* Meridians only rotate — latitude lines are static */
.globe-spin{
  transform-box:fill-box;transform-origin:center;
  animation:globeSpin 44s linear infinite;
}
@keyframes globeSpin{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}
/* Orbiting symbols — radii defined via CSS classes for responsive control */
.globe-orbit{
  position:absolute;width:0;height:0;
  top:50%;left:50%;
  animation:globeOrbit var(--od,20s) linear infinite;
}
/* Each orbit gets its own speed + starting phase */
.globe-orbit-1{ --od:20s; --or:205px; }
.globe-orbit-2{ --od:28s; --or:222px; animation-delay:-11s; }
.globe-orbit-3{ --od:15s; --or:182px; animation-delay:-5s; }

@keyframes globeOrbit{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}
.globe-sym-wrap{
  position:absolute;
  top:calc(-1 * var(--or,182px));
  left:-34px; /* half of 68px symbol width — centers symbol on orbit point */
  animation:globeCounter var(--od,20s) linear infinite;
}
@keyframes globeCounter{
  from{transform:rotate(0deg);}
  to  {transform:rotate(-360deg);}
}
.globe-sym{
  width:68px;height:auto;display:block;
  opacity:.85;
  filter:brightness(0) saturate(100%)
         invert(20%) sepia(45%) saturate(900%)
         hue-rotate(108deg) brightness(93%) contrast(102%);
}
/* ── Tablet: 360px globe, max safe orbit = 180-34 = 146px ── */
@media(max-width:768px){
  .chairman-globe{width:360px;height:360px;}
  .globe-orbit-1{ --or:142px; }
  .globe-orbit-2{ --or:154px; }
  .globe-orbit-3{ --or:126px; }
  .globe-sym{width:50px;}
  .globe-sym-wrap{left:-25px;}
}
/* ── Mobile: 280px globe, max safe orbit = 140-22 = 118px ── */
@media(max-width:480px){
  .chairman-globe{width:280px;height:280px;}
  .globe-orbit-1{ --or:108px; }
  .globe-orbit-2{ --or:118px; }
  .globe-orbit-3{ --or:95px;  }
  .globe-sym{width:38px;}
  .globe-sym-wrap{left:-19px;}
}
.globe-caption{
  font-size:clamp(1.35rem,3vw,1.75rem);font-weight:700;
  font-family:var(--font-ar);letter-spacing:.02em;
  margin-top:32px;line-height:1.6;
  color:var(--primary);
}
body.lang-en .globe-caption{font-family:var(--font-en);}

/* ─────────────────────────────────────────────────────
   AWARDS
──────────────────────────────────────────────────── */
.awards-section{padding:100px 20px;background:var(--off-white);overflow:hidden;}
.awards-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:1100px;margin:0 auto 44px;}
.award-card{
  background:var(--white);border-radius:var(--radius);border:1px solid var(--border);
  padding:40px 28px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.award-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(2,73,46,.2);}
.award-img{display:block;} /* size controlled by .award-img-frame context */
.award-year{font-size:.82rem;font-weight:600;color:var(--accent);letter-spacing:.04em;margin-top:6px;margin-bottom:4px;}
body.lang-en .award-year{font-family:var(--font-en);}
.award-card h3{font-size:1.05rem;font-weight:700;color:var(--primary);line-height:1.55;}
.award-card p{font-size:.88rem;color:var(--text-light);margin-top:7px;}
.awards-footer-note{text-align:center;max-width:680px;margin:0 auto;}
.awards-footer-note p{
  font-size:1.02rem;color:var(--text-mid);line-height:1.9;
  padding:28px 32px;background:var(--white);
  border-radius:var(--radius);border:1px solid var(--border);
}
@media(min-width:600px){.awards-grid{grid-template-columns:repeat(3,1fr);}}

/* ─────────────────────────────────────────────────────
   FORUM PARTNERSHIP
──────────────────────────────────────────────────── */
.forum-section{padding:80px 20px;background:var(--white);text-align:center;}
.forum-inner{max-width:640px;margin:0 auto;}
.forum-partnership-badge{
  display:inline-block;padding:11px 32px;
  background:linear-gradient(135deg,rgba(181,244,213,.4),rgba(92,204,120,.15));
  border:1px solid rgba(2,73,46,.2);border-radius:50px;
  font-size:1.05rem;font-weight:600;color:var(--primary);margin-bottom:44px;
}
.forum-logo-img{max-width:260px;height:auto;margin:0 auto;}

/* ─────────────────────────────────────────────────────
   PIAC HOTEL
──────────────────────────────────────────────────── */
.piac-section{padding:100px 20px;background:var(--cream);text-align:center;}
.piac-inner{max-width:720px;margin:0 auto;}
.piac-logo-img{max-width:144px;height:auto;margin:0 auto 36px;}
.piac-text{font-size:1.06rem;color:var(--text-mid);line-height:2;}

/* ─────────────────────────────────────────────────────
   UNIFIED NUMBER
──────────────────────────────────────────────────── */
.unified-section{
  padding:110px 20px;
  background:linear-gradient(160deg,var(--white) 0%,rgba(238,248,241,.55) 55%,var(--white) 100%);
  position:relative;overflow:hidden;text-align:center;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.unified-inner{max-width:620px;margin:0 auto;position:relative;z-index:1;}

/* Header block */
.unified-header{margin-bottom:48px;}
.unified-header .section-label{justify-content:center;margin-bottom:14px;}
.unified-section h2{
  font-size:clamp(1.85rem,4vw,2.7rem);font-weight:700;
  color:var(--primary);margin-bottom:16px;
}
.unified-sub{
  font-size:1.02rem;color:var(--text-light);line-height:1.9;
  max-width:480px;margin:0 auto;
}

/* Glass card */
.unified-card{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(181,244,213,.55);
  border-radius:28px;
  padding:48px 40px 40px;
  box-shadow:
    0 4px 32px rgba(2,73,46,.06),
    0 1px  6px rgba(2,73,46,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .3s, transform .3s;
}
.unified-card:hover{
  box-shadow:
    0 8px 48px rgba(2,73,46,.09),
    0 2px 10px rgba(2,73,46,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-3px);
}

/* Icon */
.unified-icon{
  width:60px;height:60px;
  background:linear-gradient(135deg,rgba(181,244,213,.55),rgba(92,204,120,.2));
  border:1px solid rgba(181,244,213,.7);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 28px;
  color:var(--primary);
}

/* Number */
.unified-number-display{
  font-family:var(--font-en);
  font-size:clamp(2rem,5.5vw,3.6rem);
  font-weight:800;color:var(--primary);letter-spacing:.05em;
  direction:ltr;display:block;
  margin-bottom:0;
}

/* Thin divider */
.unified-divider{
  width:48px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  border-radius:2px;margin:28px auto;
}

/* Action buttons */
.unified-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn-unified-call{
  background:transparent;
  color:var(--primary);
  border:1.5px solid rgba(2,73,46,.28);
  border-radius:50px;
}
.btn-unified-call:hover{
  background:rgba(2,73,46,.06);
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(2,73,46,.1);
}
@media(max-width:480px){
  .unified-card{padding:36px 24px 32px;}
  .unified-number-display{font-size:clamp(1.7rem,8vw,2.6rem);}
}

/* ─────────────────────────────────────────────────────
   GALLERY — JS-driven, no CSS animation
──────────────────────────────────────────────────── */
.gallery-section{padding:80px 0;background:var(--white);overflow:hidden;}
.gallery-header{text-align:center;padding:0 20px;margin-bottom:52px;}
.gallery-track-outer{
  position:relative;overflow:hidden;
  direction:ltr; /* CRITICAL: must be ltr regardless of page direction so translateX(-pos) works from the left edge */
}
.gallery-track-outer::before,.gallery-track-outer::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.gallery-track-outer::before{right:0;background:linear-gradient(to left,var(--white) 20%,transparent);}
.gallery-track-outer::after{left:0;background:linear-gradient(to right,var(--white) 20%,transparent);}
.gallery-track{
  display:flex;gap:14px;width:max-content;
  will-change:transform;direction:ltr;
}
.gallery-item{
  flex-shrink:0;width:270px;height:195px;border-radius:14px;overflow:hidden;
  /* Animated gradient stroke via border-box trick:
     the full-size img covers the content area — gradient visible only in the 2px border strip */
  border:2px solid transparent;
  background:linear-gradient(135deg,
    #b5f4d5 0%,
    #5ccc78 28%,
    #02492e 52%,
    #5ccc78 76%,
    #b5f4d5 100%
  ) border-box;
  background-size:300% 300%;
  animation:galleryStroke 10s ease-in-out infinite;
  box-shadow:0 3px 18px rgba(2,73,46,.07);
}
@keyframes galleryStroke{
  0%,100%{ background-position:0%   50%; }
  50%    { background-position:100% 50%; }
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block;}
.gallery-item:hover img{transform:scale(1.06);}
@media(min-width:768px){.gallery-item{width:320px;height:220px;}}

/* ─────────────────────────────────────────────────────
   FOOTER
──────────────────────────────────────────────────── */
.footer{background:var(--primary);color:var(--white);padding:80px 20px 36px;position:relative;overflow:hidden;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:52px;max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.footer-logo{max-width:170px;height:auto;margin-bottom:22px;}
.footer-tagline{font-size:.93rem;color:rgba(255,255,255,.72);line-height:1.95;margin-bottom:16px;max-width:300px;}
.footer-license{font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.75;}
.footer-col h4{font-size:.95rem;font-weight:700;color:var(--secondary);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-links{display:flex;flex-direction:column;gap:9px;}
.footer-links a{font-size:.91rem;color:rgba(255,255,255,.7);transition:color .2s;}
.footer-links a:hover{color:var(--secondary);}
.footer-contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.footer-ci-icon{width:34px;height:34px;background:rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.footer-ci-icon svg{width:16px;height:16px;color:var(--secondary);}
.footer-ci-text{font-size:.88rem;color:rgba(255,255,255,.72);line-height:1.65;}
.footer-ci-text a{color:inherit;}
.footer-ci-text a:hover{color:var(--secondary);}
.footer-social-wrap{margin-top:28px;}
.footer-social-wrap h5{font-size:.88rem;font-weight:700;color:var(--secondary);margin-bottom:14px;}
.footer-social-icons{display:flex;gap:10px;flex-wrap:wrap;}
.soc-link{width:38px;height:38px;background:rgba(255,255,255,.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s,transform .2s;}
.soc-link:hover{background:var(--secondary);color:var(--primary);transform:translateY(-2px);}
.soc-link svg{width:17px;height:17px;}
.footer-bottom{margin-top:60px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);text-align:center;position:relative;z-index:1;}
.footer-bottom p{font-size:.82rem;color:rgba(255,255,255,.38);}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;}}

/* ─────────────────────────────────────────────────────
   ANTHEM PAGE
──────────────────────────────────────────────────── */
.anthem-page{
  min-height:100svh;
  background:linear-gradient(155deg,var(--off-white) 0%,var(--cream) 100%);
  padding:130px 20px 80px;position:relative;overflow:hidden;
}
.anthem-page::before{
  content:'';position:absolute;inset:-30px;
  background-image:url('new-pattern.svg');background-repeat:no-repeat;
  background-size:cover;background-position:center;
  opacity:.025;pointer-events:none;
  animation:patternDrift 38s ease-in-out infinite;
}
.anthem-orb{
  position:absolute;width:380px;height:380px;
  background:radial-gradient(circle,rgba(181,244,213,.3) 0%,transparent 70%);
  top:-60px;right:-60px;pointer-events:none;
}
.anthem-header{text-align:center;margin-bottom:60px;position:relative;z-index:1;}
.anthem-header .nav-logo-anthem{height:60px;width:auto;margin:0 auto 32px;}
.anthem-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;color:var(--primary);margin-bottom:32px;
  padding:7px 16px;border-radius:30px;border:1px solid var(--border);
  background:var(--white);transition:background .2s,border-color .2s;
}
.anthem-back:hover{background:var(--off-white);border-color:rgba(2,73,46,.25);}
.anthem-back svg{width:14px;height:14px;}
.anthem-cards{display:grid;grid-template-columns:1fr;gap:22px;max-width:680px;margin:0 auto;position:relative;z-index:1;}

/* Audio cards */
.audio-card{
  background:var(--white);border-radius:var(--radius);border:1px solid var(--border);
  padding:32px 28px;box-shadow:var(--shadow-sm);transition:box-shadow .3s,border-color .3s;
}
.audio-card:hover{box-shadow:var(--shadow);border-color:rgba(2,73,46,.2);}
.audio-card-top{display:flex;align-items:center;gap:16px;margin-bottom:28px;}
.audio-icon-box{
  width:50px;height:50px;
  background:linear-gradient(135deg,rgba(181,244,213,.55),rgba(92,204,120,.2));
  border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.audio-icon-box svg{width:24px;height:24px;color:var(--primary);}
.audio-card-title{font-size:1.02rem;font-weight:700;color:var(--text-dark);line-height:1.5;}
.audio-progress-bar{
  position:relative;height:5px;background:rgba(2,73,46,.1);
  border-radius:3px;cursor:pointer;margin-bottom:8px;overflow:visible;
}
.audio-progress-fill{
  position:absolute;top:0;right:0;height:100%;
  background:linear-gradient(to left,var(--accent),var(--primary));
  border-radius:3px;width:0%;transition:width .1s linear;pointer-events:none;
}
.audio-progress-thumb{
  position:absolute;top:50%;transform:translate(50%,-50%);right:0%;
  width:14px;height:14px;background:var(--primary);border-radius:50%;
  box-shadow:0 2px 8px rgba(2,73,46,.35);pointer-events:none;transition:right .1s linear;
}
.audio-times{display:flex;justify-content:space-between;font-family:var(--font-en);font-size:.75rem;color:var(--text-light);direction:ltr;margin-bottom:22px;}
.audio-controls-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.audio-play-btn{
  width:50px;height:50px;border-radius:50%;background:var(--primary);color:var(--white);
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  flex-shrink:0;transition:background .2s,transform .2s;
}
.audio-play-btn:hover{background:var(--primary-dark);transform:scale(1.08);}
.audio-play-btn svg{width:22px;height:22px;}
.audio-dl-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;
  background:var(--off-white);border:1px solid var(--border);border-radius:30px;
  font-size:.88rem;font-weight:500;color:var(--primary);
  cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s;
}
.audio-dl-btn:hover{background:var(--secondary);border-color:var(--secondary);}
.audio-dl-btn svg{width:15px;height:15px;}

/* ─────────────────────────────────────────────────────
   ANIMATED GRADIENT BORDER
──────────────────────────────────────────────────── */
@keyframes gradientPulse{
  0%  {background-position:0% 50%;}
  50% {background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Award image animated frame — hugs image naturally */
.award-img-frame{
  padding:3px;border-radius:18px;
  background:linear-gradient(135deg,#b5f4d5,#eef8f1,#5ccc78,#d4f7e8,#b5f4d5);
  background-size:300% 300%;
  animation:gradientPulse 4s ease infinite;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.award-img-frame .award-img{
  width:auto;height:auto;
  max-width:170px;max-height:155px;
  display:block;border-radius:15px;
  background:var(--white);object-fit:contain;
}