:root{
  --bg1:#050914; --bg2:#071827; --card:#101522; --text:#f5f7ff; --muted:#b9c3e6;
  --primary:#4ea8ff; --primary-2:#7ec8ff; --ring:rgba(78,168,255,0.35); --shadow:0 18px 40px rgba(5,9,20,0.75);
}
[data-theme='light']{
  --bg1:#f5f7fb; --bg2:#e5edf9; --card:#ffffff; --text:#1a1c23; --muted:#52607a;
  --primary:#005bab; --primary-2:#2c8fde; --ring:rgba(0,91,171,0.25);
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans';
  color:var(--text);background:radial-gradient(1200px 800px at 20% 0%,var(--bg2) 0,var(--bg1) 52%,#071326 100%);
  overflow-x:hidden}
.bg-veil{position:fixed;inset:0;pointer-events:none;z-index:-3;
  background:radial-gradient(800px 600px at 80% -10%,#1b4e8f55,transparent 60%),
             radial-gradient(1000px 800px at 10% 110%,#0a66c255,transparent 70%);
  filter:blur(40px);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-20px,0)}}
.bg-logo{position:fixed;inset:-10% -10% auto -10%;height:120vh;width:120vw;
  background-size:60vmax;background-repeat:no-repeat;background-position:center 35%;
  filter:blur(30px) opacity(.12);z-index:-2;mix-blend-mode:screen}
.nav{position:sticky;top:0;backdrop-filter:blur(14px) saturate(115%);
  background:linear-gradient(180deg,#00000080,#00000040);border-bottom:1px solid #ffffff22;
  padding:10px 22px;z-index:50}
.nav .wrap{display:flex;align-items:center;gap:16px;max-width:1200px;margin:0 auto}
.brand{font-weight:800;letter-spacing:.2px;font-size:20px}
.nav a{color:var(--text);text-decoration:none;padding:10px 14px;border-radius:12px;opacity:.9}
.nav a:hover{background:#ffffff12;opacity:1}
.nav .spacer{flex:1}
.btn{border:1px solid #ffffff30;padding:10px 14px;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#ffffff18,#00000020);color:var(--text)}
.btn:hover{box-shadow:0 8px 24px #00000030;border-color:#ffffff55}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border:none;color:white}
.hero{max-width:1200px;margin:60px auto 20px;padding:0 22px}
h1.title{font-size:clamp(28px,3.8vw,48px);margin:12px 0 6px} p.lead{color:var(--muted);max-width:72ch;line-height:1.7}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:28px}
.card{background:var(--card);border:1px solid #ffffff2a;border-radius:18px;padding:18px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:var(--ring);box-shadow:0 14px 34px #00000040}
.card h3{margin:0 0 6px}.card p{margin:0;color:var(--muted)}
footer{margin:60px 0 40px;text-align:center;color:var(--muted)}
.section{max-width:1100px;margin:40px auto;padding:0 22px}
.section h2{margin:10px 0 12px;font-size:clamp(22px,3vw,32px)}
.section p{color:var(--muted);line-height:1.75}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.doc{background:var(--card);border:1px solid #ffffff2a;border-radius:16px;padding:14px}
.viewer{width:100%;height:520px;border-radius:14px;border:1px solid #ffffff24;background:#00000022}
.actions{display:flex;gap:10px;margin-top:10px}
.lang-switch{display:flex;gap:8px}
.lang-switch button{padding:8px 12px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff3a;color:var(--text)}
.lang-switch button.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));border:none}

/* Director page layout */
.director-page{
  max-width: 1100px;
  margin: 60px auto 40px;
}

.director-card{
  background: linear-gradient(135deg, rgba(255,255,255,0.01), rgba(255,255,255,0.04));
  background-color: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 20px 22px 24px;
  margin-bottom: 20px;
}

[data-theme='light'] .director-card{
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 14px 30px rgba(15,23,42,0.12);
}

.director-header{
  margin-bottom: 10px;
}

.director-header .section-heading{
  font-size: clamp(22px, 3vw, 28px);
}

.director-layout{
  display: grid;
  grid-template-columns: minmax(0,260px) minmax(0,1fr);
  gap: 22px;
  align-items: center;
}

.director-photo{width:100%;max-width:320px;aspect-ratio:3/4;border-radius:26px;overflow:hidden;border:2px solid rgba(255,255,255,0.12);box-shadow:0 18px 38px rgba(0,0,0,0.55);margin-inline:auto;background:#000;}

[data-theme='light'] .director-photo{
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 18px 40px rgba(15,23,42,0.30);
}

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

.director-meta{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.director-name{
  font-size: 1.35rem;
  font-weight: 700;
}

.director-role{
  font-size: 0.9rem;
  color: var(--muted);
}

.chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chip{
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(15,23,42,0.45);
  color: var(--text);
}

[data-theme='light'] .chip{
  background: #f3f6ff;
  border-color: rgba(0,0,0,0.06);
  color: #1a2940;
}

.director-text{
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

.info-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 10px 16px;
  font-size: 0.85rem;
}

.info-item-title{
  font-weight: 600;
  margin-bottom: 2px;
}

.info-item-text{
  color: var(--muted);
}

/* responsive */
@media (max-width: 768px){
  .director-layout{
    grid-template-columns: minmax(0,1fr);
  }
  .director-page{
    margin-top: 36px;
  }
}

/* === Light mode refinements for better contrast and softness === */
[data-theme='light'] body{color:var(--text);background:radial-gradient(1200px 800px at 20% 0%, var(--bg2) 0, var(--bg1) 52%, #f3f6ff 100%);}

[data-theme='light'] .bg-veil{
  background:
    radial-gradient(800px 600px at 80% -10%, rgba(0,91,171,0.18), transparent 60%),
    radial-gradient(1000px 800px at 10% 110%, rgba(120,164,214,0.35), transparent 70%);
}

[data-theme='light'] .nav{
  background:linear-gradient(180deg, #f8f9ffdd, #eef2ffdd);
  box-shadow:0 10px 30px rgba(15,23,42,0.18);
  backdrop-filter:blur(18px);
}

[data-theme='light'] .nav .btn{
  background:#ffffffee;
  color:#1a1c23;
  border-color:#d3d9ee;
}

[data-theme='light'] .nav .btn.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#ffffff;
  border-color:transparent;
}

[data-theme='light'] .hero .card,
[data-theme='light'] .doc,
[data-theme='light'] .director-card{
  background:#ffffff;
  border-color:#dde2f3;
}

[data-theme='light'] .hero .card p,
[data-theme='light'] .section p,
[data-theme='light'] .doc p{
  color:var(--muted);
}

[data-theme='light'] footer{
  color:var(--muted);
}

/* Contact page card */
.contact-card{
  max-width:480px;
  margin:60px auto 40px;
  background:var(--card);
  border-radius:20px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.18);
  padding:20px 22px 24px;
}

[data-theme='light'] .contact-card{
  background:#ffffff;
  border-color:#dde2f3;
}

.contact-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.contact-header h2{
  margin:0;
  font-size:clamp(20px,2.6vw,24px);
}

.contact-icon-doc{
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  opacity:.85;
}

[data-theme='light'] .contact-icon-doc{
  border-color:#d5dbee;
}

.contact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:.95rem;
  color:var(--muted);
}

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

.contact-item-icon{
  width:20px;
  text-align:center;
  opacity:.8;
}

.contact-item a{
  color:inherit;
  text-decoration:none;
}

.contact-item a:hover{
  text-decoration:underline;
}

[data-theme='light'] .bg-logo{
  filter:brightness(1.5);
  opacity:0.9;
}

/* Activities & home gallery */
.gallery-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:22px;
}
.gallery-item-inner{
  position:relative;
  width:100%;
  height:100%;
  aspect-ratio:4/3;
}

.gallery-item{
  background:var(--card);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow);
}
[data-theme='light'] .gallery-item{
  background:#ffffff;
  border-color:#dde2f3;
  box-shadow:0 14px 30px rgba(15,23,42,0.12);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


.only-ar,.only-en{display:block;}
[data-lang='en'] .only-ar{display:none;}
[data-lang='ar'] .only-en{display:none;}

/* Brand logo */
.brand-logo img{
  height:64px;
  display:block;
 max-width:80px !important; height:auto !important; }
@media (max-width:768px){
  .brand-logo img{
    height:48px;
   max-width:80px !important; height:auto !important; }
}