/* ================== Theme Vars ================== */
:root{
  --gold:#B59940;
  --gold2:#A4913C;
  --goldSoft:#ECDA8E;
  --bg:#1E1B1C;
  --bg2:#242122;
  --text:#F4F1EA;
  --muted:#CFC8BC;
  --line:rgba(181,153,64,.22);
  --radius:20px;
  --max:1180px;

  /* زر افتراضي */
  --btn-bg: transparent;
  --btn-text: var(--text);
  --btn-border: var(--gold);
  --btn-shadow: rgba(0,0,0,.25);
  --btn-shine: rgba(255,255,255,.45);
  --btn-glow: rgba(181,153,64,.35);

  /* تحريك محتوى الهيرو للأعلى */
  --hero-shift:-80px;  /* عدّل الرقم لو تبي أعلى/أقل */
}

/* Light Mode refined */
html[data-theme="light"]{
  --bg:#F6F3EC;
  --bg2:#FAF8F4;
  --text:#1E1B1C;
  --muted:#3A3A3A;
  --line:rgba(181,153,64,.35);
  --btn-text:#1E1B1C;
  --btn-shadow:rgba(0,0,0,.12);
  --btn-shine:rgba(255,255,255,.7);
  --btn-glow:rgba(181,153,64,.28);
}

/* ================== Fonts ================== */
@font-face{font-family:'Tajawal';src:url("assets/fonts/Tajawal-Regular.ttf");font-weight:400}
@font-face{font-family:'Tajawal';src:url("assets/fonts/Tajawal-Bold.ttf");font-weight:700}
@font-face{font-family:'Cairo';src:url("assets/fonts/Cairo-Regular.ttf");font-weight:400}
@font-face{font-family:'Cairo';src:url("assets/fonts/alfont_com_Cairo-Bold.ttf");font-weight:700}
@font-face{
  font-family:'Shekari';
  src:url("assets/fonts/alfont_com_AlFont_com_shekari.ttf");
  font-weight:400;
  unicode-range:U+0600-06FF,U+0750-077F,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{font-family:'Cervanttis';src:url("assets/fonts/Cervanttis.ttf");font-weight:400}

/* ================== Base ================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Tajawal','Cairo',system-ui;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--goldSoft);text-decoration:none}
.container{width:min(100%,var(--max));margin-inline:auto;padding:0 22px}

/* ================== Header ================== */
.site-header{
  --H:58px;
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:linear-gradient(180deg,rgba(15,14,14,.85),rgba(15,14,14,.35) 60%,transparent);
  backdrop-filter:blur(10px)
}
html[data-theme="light"] .site-header{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,248,244,.7) 70%,transparent);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.header-row{display:flex;align-items:center;gap:14px;padding:8px 0}
.main-nav{margin-inline-start:auto;display:flex;align-items:center;gap:10px}

/* ================== Logo ================== */
.brand{display:flex;align-items:center;height:70px}
.brand img{
  height:200px;width:auto;object-fit:contain;
  transform:translateY(4px);
  transition:transform .3s ease,filter .3s ease;
}
.brand img:hover{transform:translateY(4px) scale(1.05);filter:brightness(1.05)}
html[data-theme="light"] .brand img{content:url("assets/logo-w.png");height:150px}

/* ================== Buttons ================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:10px 18px;border-radius:999px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);color:var(--btn-text);
  font-weight:700;font-size:15px;cursor:pointer;
  user-select:none;text-decoration:none !important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  overflow:hidden;will-change:transform;
}
.btn::before{
  content:"";position:absolute;top:-150%;left:-40%;width:55%;height:350%;
  background:linear-gradient(120deg,transparent 0%,var(--btn-shine) 48%,transparent 100%);
  transform:rotate(22deg) translate3d(-30%,0,0);
  opacity:0;transition:transform .6s ease,opacity .35s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px var(--btn-shadow)}
.btn:hover::before{transform:rotate(22deg) translate3d(180%,0,0);opacity:.85}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px var(--btn-shadow)}
.btn.primary{border:0;color:#151414;background:linear-gradient(135deg,var(--gold),var(--gold2))}
html[data-theme="light"] .btn.primary{color:#1E1B1C;background:linear-gradient(135deg,#D2B95A,#B59940)}

/* ================== Header Controls ================== */
.main-nav .icon-btn,
.main-nav .lang-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.35rem;height:44px;min-width:44px;padding:0 14px;border-radius:999px;
  border:1px solid var(--gold);
  background:rgba(255,255,255,.03);color:var(--goldSoft);
  cursor:pointer;font-weight:700;transition:transform .2s ease,box-shadow .2s ease;
  overflow:hidden;
}
.main-nav .icon-btn:hover,.main-nav .lang-btn:hover{
  transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.25)
}
html[data-theme="light"] .main-nav .icon-btn,
html[data-theme="light"] .main-nav .lang-btn{
  background:rgba(255,255,255,.6);color:#B59940;border-color:#B59940
}

/* زر "تواصل معنا" */
.main-nav .btn{height:44px;padding:0 16px;border-radius:999px}
.main-nav .btn.primary{
  color:#151414;background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* روابط القائمة */
.main-nav > a:not(.btn){
  color:var(--goldSoft);font-weight:600;padding:6px 8px
}
.main-nav > a:not(.btn):hover{color:var(--gold)}



/* ================== Hero ================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  isolation: isolate;
}

/* الخلفية العامة (التدرج الذهبي والإضاءة) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(900px 520px at 70% 25%, rgba(236,218,142,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.65));
  background-blend-mode: overlay;
}

/* الصورة الخلفية داخل ::before */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.06);
  opacity: .92;
  background-size: 102% auto;       /* نفس التأثير */
  background-position: center 130%; /* رفع الفوكس */
  transition: background-image .4s ease, opacity .4s ease;
}

/* 🔸 الإنجليزية: الصورة الافتراضية hero.png */
html[lang="en"] .hero-bg::before {
  background-image: url("assets/hero.png");
}

/* 🔸 العربية: الصورة المخصصة hero-a.png */
html[lang="ar"] .hero-bg::before {
  background-image: url("assets/hero-a.png");
}


/* <-- هنا التعديل الحقيقي لرفع النص --> */
.hero-content{
  padding-top:calc(var(--H) + 1px);     /* قللنا الـpadding */
  max-width:1000px;
  transform:translateY(var(--hero-shift)); /* رفع فعلي للأعلى */
}

/* Overline */
.overline{letter-spacing:.08em;color:var(--goldSoft);margin:0 0 10px}
html[data-theme="light"] .overline{color:#9E8C4E;font-weight:600;text-shadow:0 0 3px rgba(255,255,255,.4)}

/* Typing slogan */
/* العنوان الرئيسي داخل الهيرو */
#tagline {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  line-height: 1.1;
  font-family: 'Shekari', 'Tajawal';
  font-size: clamp(35px, 5vw, 50px); /* ⬅️ تم التكبير */ 
  color: var(--text);
}

/* النسخة الإنجليزية */
body.lang-en #tagline {
  font-family: 'Cervanttis','Tajawal' !important;
  letter-spacing: .5px;
  font-size: clamp(35px, 5vw, 40px); /* ⬅️ تم التكبير أكثر */ 
}

/* النص الوصفي (اللي تحت العنوان) */
.lead {
  color: var(--muted);
  max-width: 70ch;
  margin: 20px 0 32px;
  font-size: clamp(20px, 1vw, 24px); /* ⬅️ كبرناه */ 
  line-height: 1.9;
}

#tagline .char{visibility:hidden;opacity:0;transition:opacity .22s ease}
#tagline .char.show{visibility:visible;opacity:1}

/* Intro text */
.lead{color:var(--muted);max-width:70ch;margin:12px 0 24px}

/* Responsive: تحكم دقيق بارتفاع النص */
@media (max-width:1060px){
  :root{ --hero-shift:-50px; }
  .brand img{width:160px}
  .hero{min-height:92vh}
}
@media (max-width:640px){
  :root{ --hero-shift:-30px; }
  .hero-content{padding-top:calc(var(--H) + 20px)}
  .brand img{width:140px}
}


/* ===== Search Button Styling ===== */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: rgba(255, 255, 255, .03);
  color: var(--goldSoft);
  font-size: 18px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* Hover effect (ذهبي متوهج خفيف) */
.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(181,153,64,.35);
  background: rgba(181,153,64,.1);
  color: var(--gold);
}

/* Active (نقرة خفيفة) */
.icon-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(181,153,64,.2);
}



.search-ov{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); backdrop-filter: blur(8px); z-index:120;
}
.search-ov.open{ display:flex; }
.search-dialog{
  display:flex; gap:10px; align-items:center;
  background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; width:min(92vw,720px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.search-dialog input{
  flex:1; background:#0f0e10; border:1px solid var(--line); color:#fff;
  padding:12px 14px; border-radius:10px; outline:none;
}




/* ـــــ قيَم لونية افتراضية لو مش معرّفة عندك ـــــ */
:root{
  --gold: #B59940;
  --muted: #CFC8BC;
  --title1: #FFFFFF;   /* للداكن */
  --title2: var(--gold);
}

/* وضع فاتح: نخلي تدرّج العنوان داكن/ذهبي عشان يظهر بوضوح */
html[data-theme="light"]{
  --title1: #1E1B1C;
  --title2: #9E8C4E;
}

/* ====== Chairman Section ====== */
#chairman.hero-follow{
  position: relative;
  margin-top: clamp(-110px, -7vw, -90px);
  padding: 0 0 clamp(70px, 7vw, 100px);
  isolation: isolate;
}

/* خط وحيد */
#chairman .hero-bridge{
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent 12%, var(--gold) 12% 88%, transparent 88%);
  filter: drop-shadow(0 0 6px rgba(181,153,64,.45));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .9s cubic-bezier(.22,.8,.2,1);
}

/* ====== المربع ====== */
#chairman .chairman-card{
  --padX: clamp(18px, 1.6vw, 26px);
  --padY: clamp(18px, 1.6vw, 26px);
  margin: clamp(12px, 1.2vw, 16px) auto 0;
  width: min(920px, 90vw); /* وسّع المربع شوي */
  border-radius: 16px;
  padding: var(--padY) var(--padX);
  text-align: center;

  background:
    radial-gradient(640px 380px at 70% 20%, rgba(236,218,142,.07), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.50));
  border: 1px solid rgba(181,153,64,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  backdrop-filter: blur(7px) saturate(120%);

  opacity: 0; transform: translateY(12px);
  transition: opacity .6s ease .12s, transform .6s ease .12s;
}

/* ====== النص ====== */
#chairman .chairman-body{
  color: var(--muted);
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 2.05;
  max-width: 92%; /* خليه ياخذ تقريبا كل عرض البوكس */
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;

  opacity: 0; transform: translateY(7px);
  transition: opacity .45s ease .24s, transform .45s ease .24s;
}



/* خلفية للفاتح */
html[data-theme="light"] #chairman .chairman-card{
  background:
    radial-gradient(620px 360px at 70% 18%, rgba(181,153,64,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,248,244,.78));
  border-color: rgba(181,153,64,.30);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

/* عنوان بلمعة مع إصلاح خط WebKit */
#chairman .chairman-title{
  margin: 2px 0 12px;
  font-weight: 900;
  font-size: clamp(22px, 2vw, 25px);
  line-height: 1.2;
  letter-spacing: .015em;

  /* نضبط الألوان حسب الثيم */
  background: linear-gradient(110deg, var(--title1) 0%, var(--title2) 50%, var(--title1) 85%);
  background-size: 220% auto;

  /* إصلاح الخط في WebKit */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 0; transform: translateY(5px);
  transition: opacity .45s ease .18s, transform .45s ease .18s, background-position 1.05s ease;
}

/* نص مُبرّر */
#chairman .chairman-body{
  color: var(--muted);
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 2.05;
  max-width: 120ch;
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;

  opacity: 0; transform: translateY(7px);
  transition: opacity .45s ease .24s, transform .45s ease .24s;
}

/* حركة الدخول/العكسية */
#chairman.reveal .hero-bridge{ transform: scaleX(1); }
#chairman.reveal .chairman-card{ opacity:1; transform:none; }
#chairman.reveal .chairman-title{ opacity:1; transform:none; background-position:-40% center; }
#chairman.reveal .chairman-body{ opacity:1; transform:none; }

/* تبديل اللغة (اعرض المناسب فقط) */
#chairman .i18n.en{ display:none; }
html[lang="en"] #chairman .i18n.ar,
body.lang-en     #chairman .i18n.ar{ display:none; }
html[lang="en"] #chairman .i18n.en,
body.lang-en     #chairman .i18n.en{ display:block; }

/* موبايل */
@media (max-width:640px){
  #chairman .chairman-card{ width:92vw; }
}




:root{
  --gold:#B59940;
  --gold2:#A4913C;
  --bg:#111012;
  --text:#F4F1EA;
  --muted:#CFC8BC;
}

/* ===== About Section ===== */
.about-section{
  position:relative;
  padding:40px 0 72px;   /* قلّلنا الأعلى والأسفل */
  overflow:visible;
}


.about-container{
  width:min(1180px, 92vw);
  margin-inline:auto;
  position:relative;
}

.about-title{
  margin:0 0 18px;
  text-align:center;
  font-weight:800;
  font-size:clamp(24px, 2.6vw, 34px);
  letter-spacing:.03em;
  color:var(--text);
  
}

.about-intro{
  max-width:1100px;
  margin:0 auto 12px;
  text-align:center;
  color:var(--muted);
  line-height:2.1;
  font-size:1.1rem;
  text-align: center;
  
}

/* ===== الزوايا الذهبية (يسار + يمين) ===== */
.about-corners{
  position:absolute;
  top:calc(100% + 6px);       /* فوق بداية البطاقات مباشرة تقريباً */
  left:50%;
  transform:translateX(-50%);
  width:min(960px, 86vw);     /* عرض الخط بين الزاويتين */
  height:0;
  pointer-events:none;
}

.about-corners::before,
.about-corners::after{
  content:"";
  position:absolute;
  top:0;
  width:46px;
  height:46px;
  border-top:2px solid var(--gold);
  transform:scale(0);
  transform-origin:center;
  transition:transform .6s cubic-bezier(.22,.8,.2,1);
}

.about-corners::before{
  left:0;
  border-left:2px solid var(--gold);
}

.about-corners::after{
  right:0;
  border-right:2px solid var(--gold);
}

/* وقت ما يظهر القسم نفعل الحركة */
.about-section.reveal .about-corners::before,
.about-section.reveal .about-corners::after{
  transform:scale(1);
}

/* ===== البطاقات ===== */
.cards-section{
  margin-top:40px;
}

.cards-container{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
}

.cards-container .card{
  position:relative;
  overflow:visible;                 /* عشان الأيقونة تطلع فوق بدون ما تنقص */
  padding:40px 26px 26px;           /* زودنا من فوق عشان فيه أيقونة فوق */
  border-radius:18px;
  background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.94));
  border:1px solid rgba(181,153,64,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  color:var(--text);
  transition:
    transform .45s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
  opacity:0;
  transform:translateY(40px);
}


/* إظهار البطاقات لما القسم يدخل */
.about-section.reveal .cards-container .card{
  opacity:1;
  transform:none;
}

.cards-container .card:nth-child(1){ transition-delay:.10s; }
.cards-container .card:nth-child(2){ transition-delay:.18s; }
.cards-container .card:nth-child(3){ transition-delay:.26s; }

.cards-container .card:hover{
  transform:translateY(-10px);
  border-color:rgba(181,153,64,.35);
  box-shadow:0 22px 46px rgba(181,153,64,.32);
  background:
    radial-gradient(circle at top left, rgba(236,218,142,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.98));
    
}


/* عنوان + نص البطاقة */
.card-title{
  margin:0 0 12px;
  font-size:1.15rem;
  font-weight:800;
  color:var(--gold);
}

.card-text{
  margin:0;
  color:var(--muted);
  line-height:2;
  font-size:0.95rem;
}

/* الخط المتحرك */
.card .underline{
  display:block;
  width:0%;
  height:3px;
  margin-top:20px;
  border-radius:6px;
  background:var(--gold);
  transition:width .45s ease;
}

/* ===== الأيقونة (مربع ذهبي فوق الكرت بالكامل) ===== */
.cards-container .card .icon{
  position:absolute;
  top:-30px;                 /* فوق الكرت */
  right:26px;                /* يمين في العربي */
  width:56px;
  height:56px;
  border-radius:18px;
  background:radial-gradient(circle at 30% 20%, #F8E9B0 0, #B59940 40%, #7A6224 100%);
  box-shadow:0 16px 32px rgba(181,153,64,.55);
  display:grid;
  place-items:center;
  z-index:2;
   transition: transform .35s ease, box-shadow .35s ease;
}

.cards-container .card .icon img{
  width:45px;
  height:45px;
  object-fit:contain;
  
}

/* في حال اللغة إنجليزي خليه يسار */
html[lang="en"] .cards-container .card .icon{
  right:auto;
  left:26px;
  
}

/* تأثير الأيقونة والخط عند الهوفر */
.card .underline{
  display:block;
  width:100%;              /* دايم كاملة لكن مخفية بالـ scale */
  height:3px;
  margin-top:20px;
  border-radius:6px;
  background:var(--gold);
  transform-origin:center;  /* يبدأ من الوسط */
  transform:scaleX(0);      /* مصغّر أفقياً */
  transition:transform .45s ease;
}

.cards-container .card:hover .underline{
  transform:scaleX(1);      /* يكبر من النصّ لليمين واليسار */
  
}


/* موبايل */
@media (max-width:980px){
  .cards-container{
    grid-template-columns:1fr;
  }

  .about-corners{
    width:80%;
  }
}


/* ===== تبديل اللغة (عربي / إنجليزي) ===== */

/* الافتراضي: عربي */
.t-ar { display: inline; }
.t-en { display: none; }

/* لما تتحول اللغة إلى EN (سواء عن طريق html.lang أو body.lang-en) */
html[lang="en"] .t-ar,
body.lang-en .t-ar {
  display: none !important;
}

html[lang="en"] .t-en,
body.lang-en .t-en {
  display: inline !important;
}

/* افتراضياً العربي ظاهر والإنجليزي مخفي */
.t-en { display: none; }

/* لما يكون الموقع إنجليزي */
html[lang="en"] .t-ar { display: none !important; }
html[lang="en"] .t-en { display: inline !important; }

.corner-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.corner-line {
  position: absolute;
  width: 60px;
  height: 60px;
  stroke: var(--gold);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(181,153,64,0.5));
}

/* أماكن الزوايا */
.corner-line.top-right {
  top: 8px;
  right: 8px;
  transform: rotate(90deg);
}

.corner-line.bottom-left {
  bottom: 8px;
  left: 8px;
  transform: rotate(270deg);
}

/* رسم الخط من نقطة الالتقاء للخارج */
@keyframes drawCornerStroke {
  0% {
    stroke-dashoffset: 170;
    opacity: 0.3;
  }
  80% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* تطبيق الحركة */
.about-section.reveal .corner-line {
  animation: drawCornerStroke 1.8s ease forwards;
}

/* تأخير الزاوية الثانية */
.about-section.reveal .corner-line.bottom-left {
  animation-delay: 0.5s;
}

/* توهج بسيط بعد الانتهاء */
.about-section.reveal .corner-line {
  filter: drop-shadow(0 0 8px rgba(181,153,64,0.55));
  animation-fill-mode: forwards;
}

/* في الوضع الفاتح */
html[data-theme="light"] .corner-line {
  stroke: #B59940;
  filter: drop-shadow(0 0 6px rgba(181,153,64,0.4));
}


/* ===== Values Section ===== */
.values-section{
  position: relative;
  padding: 60px 0 80px;
  overflow: visible;
}

.values-container{
  width: min(1180px, 92vw);
  margin-inline: auto;
  position: relative;
}

.values-head{
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.values-title{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: .03em;
  color: var(--text);
}

.values-intro{
  max-width: 1100px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 2.1;
  font-size: 1.05rem;
  text-align: center;
}

/* مسافة أكبر بين الكلام والبطاقات */
.values-cards{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 130px;          /* زودناها */
  justify-items: center;
}

/* ===== زوايا الرأس ===== */
.corner-wrapper{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.corner-line{
  position: absolute;
  width: 60px;
  height: 60px;
  stroke: var(--gold);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(181,153,64,.5));
}

.values-section .corner-line.top-right{
  top: -40px;   /* بدل 4px */
  right: 0px;
  transform: rotate(90deg);
}

.values-section .corner-line.bottom-left{
  bottom: -40px;   /* بدل 4px */
  left: 0px;
  transform: rotate(270deg);
}


@keyframes drawCornerStroke{
  0%{
    stroke-dashoffset: 170;
    opacity: .3;
  }
  80%{
    opacity: 1;
  }
  100%{
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.values-section.reveal .corner-line{
  animation: drawCornerStroke 1.8s ease forwards;
}
.values-section.reveal .corner-line.bottom-left{
  animation-delay: .5s;
}

html[data-theme="light"] .corner-line{
  stroke: #B59940;
  filter: drop-shadow(0 0 6px rgba(181,153,64,.4));
}

/* ===== بطاقات القيم ===== */
/* خليت كل البطاقات نفس المقاس: 230×230 تقريباً */
.value-card{
   position: relative;
  width: 220px;
  height: 190px;   /* 🔥 رفعتها شوي عشان العنوان الجديد */
  padding: 70px 18px 26px;
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.96));
  border: 1px solid rgba(181,153,64,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  opacity: 0;
  transform: translateY(60px); /* حركة أقوى */
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}

/* دخول متدرّج زي قسم من نحن */
.values-section.reveal .value-card{
  opacity: 1;
  transform: translateY(0);
}
.values-section.reveal .value-card:nth-child(1){ transition-delay: .08s; }
.values-section.reveal .value-card:nth-child(2){ transition-delay: .14s; }
.values-section.reveal .value-card:nth-child(3){ transition-delay: .20s; }
.values-section.reveal .value-card:nth-child(4){ transition-delay: .26s; }
.values-section.reveal .value-card:nth-child(5){ transition-delay: .32s; }

/* الهوفر + حركة الخط */
.value-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 52px rgba(181,153,64,.48);
  border-color: rgba(181,153,64,.35);
}

/* العنوان */
.value-title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.8;
  height: 50px;                /* 🔥 ثبات ارتفاع العنوان */
  display: flex;
  align-items: center;         /* وسط عامودي */
  justify-content: center;     /* وسط أفقي */
  text-align: center;
}


/* الخط المتحرك تحت العنوان */
.value-underline{
  display: block;
  width: 0%;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--gold);
  transition: width .45s ease;
}

.value-card:hover .value-underline{
  width: 100%;
  
}
.value-card:hover .value-icon{
  transform: translateX(-50%) translateY(-4px) scale(1.06);
  box-shadow: 0 26px 54px rgba(181,153,64,.8);
}

/* مربع الأيقونة */
.value-icon{
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);       /* تثبيت في النص */
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: radial-gradient(circle at 30% 20%, #F8E9B0 0, #B59940 40%, #7A6224 100%);
  box-shadow: 0 22px 46px rgba(181,153,64,.7);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: transform .35s ease, box-shadow .35s ease;
}

.value-icon img{
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: brightness(0) invert(1) contrast(1.05);
}


/* نخلي الأيقونة شبه بيضاء */
.value-icon img{
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: brightness(0) invert(1) contrast(1.05);
}

/* وضع فاتح */
html[data-theme="light"] .value-card{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,244,.94));
  color: #201c16;
  border-color: rgba(181,153,64,.30);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
html[data-theme="light"] .value-title{
  color: #B59940;
}

/* رسبونسف */
@media (max-width: 1100px){
  .values-cards{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 780px){
  .values-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px){
  .values-cards{
    grid-template-columns: 1fr;
  }
}


/* إصلاح حركة تكبير أيقونة قسم من نحن */
.cards-container .card .icon{
    transition: transform .35s ease, box-shadow .35s ease !important;
}

.cards-container .card:hover .icon{
    transform: translateY(-6px) scale(1.08) !important;
    box-shadow: 0 26px 54px rgba(181,153,64,.75) !important;
}


.services-section { padding: 80px 0 100px; }
.services-container {  width: min(var(--max), 92vw);   /* نفس عرض الأقسام الثانية */
  margin-inline: auto;
  padding: 0 22px; ; }

.services-title { text-align: center; font-size: 35px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.services-intro { max-width: 1000px; margin: 0 auto 80px; color: var(--muted); text-align: center; line-height: 1.9; margin-bottom: 100px;}

.services-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 70px;
  margin-bottom: 35px;
}

/* الصف السفلي بالنص */
.center-row {
  justify-content: center;
  gap: 50px; /* تقدر تزودها لتباعد أكثر */
}

/* الكروت */
.service-card {
  position: relative;
  width: 320px;
  background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.97));
  border: 1px solid rgba(181,153,64,.18);
  border-radius: 18px;
  padding: 40px 20px 30px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  color: var(--text);
  text-align: center;
  transition: all .45s ease;
}
.service-card:hover {
  border-color: rgba(181,153,64,.35);
  box-shadow: 0 22px 50px rgba(181,153,64,.25);
}

/* الأرقام خارج المربع */
.card-number {
  position: absolute;
  top: -30px;
  right: -28px;
  font-size: 2.6rem;
  font-weight: 800;
  color: rgba(181,153,64,0.25);
  transition: .4s;
}
.service-card:hover .card-number {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(181,153,64,0.6);
}

/* العنوان والنص */
.card-title { font-size: 1.15rem; font-weight: 800; color: var(--gold); margin-bottom: 10px; }
.card-text { color: var(--muted); font-size: 0.95rem; line-height: 1.8; }

/* الزر والخط بترتيب متناسق */
.line-btn {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.underline {
  width: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 4px;
  margin-bottom: 8px;
  transition: width .45s ease;
}
.btn-read {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #151414;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: all .45s ease;
}
.service-card:hover .underline { width: 50%; }
.service-card:hover .btn-read { opacity: 1; visibility: visible; transform: translateY(0); }

/* الوضع الفاتح */
html[data-theme="light"] .service-card {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,248,244,.9));
  color: #201c16;
  border-color: rgba(181,153,64,.25);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}



/* الزر */
.btn-read {
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #151414;
  padding: 7px 16px;
  border-radius: 18px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .5s ease;
}

/* ✨ اللمعة داخل الزر */
.btn-read::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.5), transparent);
  transform: skewX(-25deg);
  transition: 0.7s;
}
.service-card:hover .btn-read::before {
  left: 120%;
}
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* نخلي هيدر الخدمات نسبي عشان الزوايا تتموضع داخله */
.services-head{
  position: relative;
}

/* غلاف الزوايا */
.services-corner-wrapper{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* خلف النص */
}

/* شكل الزوايا */
.services-corner{
  position: absolute;
  width: 60px;
  height: 60px;
  stroke: var(--gold);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(181,153,64,.5));
}

/* أماكن الزوايا */
.services-corner.top-right{
  top: -40px;
  right: 0;
  transform: rotate(90deg);
}
.services-corner.bottom-left{
  bottom: 550px;
  left: 0;
  transform: rotate(270deg);
}

/* حركة رسم الزوايا */
@keyframes servicesCornerDraw{
  0%{
    stroke-dashoffset: 170;
    opacity: .3;
  }
  80%{
    opacity: 1;
  }
  100%{
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* لما قسم الخدمات يدخل الشاشة (مع كلاس reveal اللي عندك) */
.services-section.reveal .services-corner{
  animation: servicesCornerDraw 1.8s ease forwards;
}
.services-section.reveal .services-corner.bottom-left{
  animation-delay: .5s;
}

/* وضع فاتح */
html[data-theme="light"] .services-corner{
  stroke: #B59940;
  filter: drop-shadow(0 0 6px rgba(181,153,64,.4));
}


/* الحالة الافتراضية (قبل الظهور) */
.services-section .service-card {
  opacity: 0;
  transform: translateY(60px);
  transition: all .7s cubic-bezier(.22, .8, .2, 1);
}

/* عند الظهور */
.services-section.reveal .service-card {
  opacity: 1;
  transform: translateY(0);
}

/* 🔁 الحركة العكسية (عند الخروج من الشاشة) */
.services-section.hide .service-card {
  opacity: 0;
  transform: translateY(60px);
  transition: all .6s ease-in-out;
}
.services-section.reveal .service-card:nth-child(1){ transition-delay: .1s; }
.services-section.reveal .service-card:nth-child(2){ transition-delay: .2s; }
.services-section.reveal .service-card:nth-child(3){ transition-delay: .3s; }
.services-section.reveal .service-card:nth-child(4){ transition-delay: .4s; }
.services-section.reveal .service-card:nth-child(5){ transition-delay: .5s; }


:root {
  --gold: #bfa047;
  --gold2: #a8872e;
  --dark-bg: #0f0e0e;
  --light-bg: #faf7f0;
  --text-dark: #fff;
  --text-light: #1a1a1a;
}

[data-theme='dark'] .achievements-bar {
  background: var(--dark-bg);
  color: var(--text-dark);
}

.achievements-bar {
  position: relative;
  padding: 40px 0 50px;
  text-align: center;
  overflow: hidden;
  transition: background 0.6s ease, color 0.6s ease;
}

#achievements-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.7;
}

.achievements-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

.achievements-title {
  font-size: 1.8rem;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s ease;
}

.achievements-sub {
  color: #b5b5b5;
  font-size: 1rem;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s ease .2s;
}

.achievements-stats {
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(191,160,71,0.4);
border-bottom: 1px solid rgba(191,160,71,0.4);
padding: 6px 0;
margin: 0 auto;
max-width: 850px;
transition: all 0.4s ease;
}

.ach-item {
  flex: 1;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}
.ach-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.ach-item h3 {
  color: var(--gold);
  font-size: 1.3rem;
}
.ach-item p {
  font-weight: 600;
  font-size: 1rem;
}

.divider {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(191,160,71,0.8), transparent);
}

.gold-button {
  display: inline-block;
  background: linear-gradient(145deg, var(--gold), var(--gold2));
  color: #151414;
  padding: 10px 32px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  margin-top: 30px;
  transition: all 0.4s ease;
  box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
  position: relative;
  overflow: hidden;
}

.gold-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.gold-button:hover::after {
  left: 120%;
}

.gold-button:hover {
  transform: scale(1.05);
}



/* ===== Section Base ===== */
.quote-section {
  position: relative;
  background: #b59940;
  color: #fff;
  padding: 40px 15px 40px;
  text-align: center;
  overflow: hidden;
  font-family: 'Tajawal', sans-serif;
}

/* ===== Animated Background ===== */
.quote-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(255,255,255,0.07), transparent 60%);
  background-size: 200% 200%;
  animation: softMove 25s linear infinite alternate;
  opacity: 0.25;
  z-index: 0;
}
@keyframes softMove {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ===== Quote Container ===== */
.quote-container {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ===== Quote Text ===== */
.quote-text {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.8;
  color: #fff7d1;
  margin: 0;
}
.quote-mark {
  color: #fff;
  font-size: 1.4rem;
  margin: 0 6px;
  vertical-align: middle;
}
.highlight {
  background: #f8e9b0;
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(248,233,176,0.3);
}

/* ===== Logo Section ===== */
.quote-logo {
  position: absolute;
  bottom: -50px;
  transition: all 0.8s ease;
}
.quote-logo img {
  width: 250px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* ===== RTL - Logo Left ===== */
html[dir="rtl"] .quote-logo {
   transform: translateX(-60px); /* يمين */
  right: auto;
  animation: slideFromLeft 1.2s ease;
}
@keyframes slideFromLeft {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== LTR - Logo Right ===== */
html[dir="ltr"] .quote-logo {
 transform: translateX(60px); /* يسار */
  left: auto;
  animation: slideFromRight 1.2s ease;
}
@keyframes slideFromRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}



.partners-sec {
  position: relative;
  padding: 550px 0;
  overflow: hidden;
  text-align: center;
  transition: background 0.5s ease, color 0.5s ease;
}

#partners-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

[data-theme='dark'] .partners-sec {
  background: radial-gradient(circle at center, #161616 0%, #0f0e0e 100%);
  color: #fff;
}


.partners-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

/* تنسيق العنوان والمحتوى مطابق لقسم الإنجازات */
.partners-title {
  font-size: 1.8rem; /* نفس حجم عنوان الإنجازات */
  font-weight: 800;
  color: #bfa047; /* نفس اللون الذهبي */
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.partners-subtitle {
  font-size: 1rem; /* نفس حجم النص في قسم الإنجازات */
  color: #b5b5b5;
  max-width: 700px;
  margin: 0 auto 35px;
  line-height: 2;
}
[data-theme='light'] .partners-subtitle {
  color: #4c4c4c;
}

/* ===== Partners: single smooth marquee (no second track) ===== */
.partners-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* تدرج ناعم من الطرفين */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners-track {
  display: inline-flex;
  align-items: center;
  gap: 90px;
  flex-wrap: nowrap;
  will-change: transform;
  animation: partners-marquee 35s linear infinite;
}

/* عند الوقوف بالماوس */
.partners-slider:hover .partners-track {
  animation-play-state: paused;
}

/* الحركة السلسة (بدون توقف مفاجئ) */
@keyframes partners-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* نصف الطول لأننا نكرر العناصر */
}

/* حجم الشعارات */
.partners-track img {
  height: 80px;
  width: auto;
  opacity: .85;
  filter: grayscale(100%) contrast(1.1);
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
  object-fit: contain;
}
.partners-track img:hover {
  transform: scale(1.08);
  filter: grayscale(0%) brightness(1.15);
  opacity: 1;
}


/* متجاوب */
@media (max-width: 768px){
  .partners-track{ gap: 60px; }
  .partners-track img{ height: 58px; }
}





/* ===== WHY SECTION ===== */
.why-section{
  position: relative;
  padding: clamp(80px, 8vw, 120px) 0;
  isolation: isolate;
}

/* الخلفية: نقاط الهيرو + تعتيم/بلر */
.why-bg{
  position:absolute; inset:0; z-index:-2;
  background-image: url("assets/hero.png"); /* أو dots-map.png */
 background-size: 110% auto; /* تكبير الصورة أكثر من عرض القسم */
  background-position: center center; /* توسيطها أفقياً وعمودياً */
  filter: blur(2px); /* إظهار الخلفية بلُطف */
  opacity: .55;
}
html[data-theme="light"] .why-bg{ opacity:.40; filter:blur(1.5px) contrast(1.05); }

/* طبقة مزج خفيفة لتحسين القراءة */
.why-section::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 480px at 70% 18%, rgba(236,218,142,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
html[data-theme="light"] .why-section::before{
  background:
    radial-gradient(900px 480px at 70% 18%, rgba(181,153,64,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
}

.why-container{
  width:min(var(--max,1180px), 92vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 40px);
  align-items:center;
}

/* العنوان */
.overline{
  margin:0 0 8px;
  color: var(--goldSoft, #ECDA8E);
  letter-spacing:.08em;
  font-weight:700;
}
.why-title{
  margin:0;
  font-weight:900;
  line-height:1.15;
  font-size: clamp(28px, 4.2vw, 48px);
  color: var(--text, #F4F1EA);
  text-wrap: balance;
}

/* الصندوق */
.why-box{
  background:
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.94));
  border:1px solid rgba(181,153,64,.18);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: clamp(22px, 3.2vw, 28px);
  transition: border-color .35s ease, box-shadow .35s ease, transform .45s ease;
}
.why-box:hover{
  transform: translateY(-4px);
  border-color: rgba(181,153,64,.35);
  box-shadow: 0 22px 50px rgba(181,153,64,.22);
}
html[data-theme="light"] .why-box{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,244,.92));
  color:#201c16; border-color: rgba(181,153,64,.28);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

/* نص مُبرّر */
.why-text{
  margin:0 0 14px;
  color: var(--muted, #CFC8BC);
  line-height: 2.05;
  font-size: clamp(.95rem, 1.05vw, 1.02rem);
  text-align: justify;
  text-justify: inter-word;
}

/* شعار يُكتب كتابة */
.why-slogan{
  margin-top: 6px;
  font-weight: 600;
  font-size: clamp(20px, 1.2vw, 22px);
  color: var(--gold, #B59940);
  min-height: 1.6em;
}
#why-slogan-ar, #why-slogan-en{
  font-family: 'Shekari','Cervanttis','Tajawal', system-ui;
  white-space: nowrap;
}

/* تبديل الترتيب حسب اللغة
   عربي: العنوان يمين، الصندوق يسار
   إنجليزي: العنوان يسار، الصندوق يمين */
.why-head{ order: 2; }
.why-box{  order: 1; }
html[lang="en"] .why-head{ order: 1; }
html[lang="en"] .why-box{  order: 2; }

/* إظهار/إخفاء ترجمات */
.t-en{ display:none; }
html[lang="en"] .t-ar{ display:none !important; }
html[lang="en"] .t-en{ display:inline !important; }

/* استجابة */
@media (max-width: 980px){
  .why-container{
    grid-template-columns: 1fr;
  }
  .why-head{ order:1; }
  .why-box{  order:2; }
  html[lang="en"] .why-head{ order:1; }
  html[lang="en"] .why-box{  order:2; }
}


/* --- 1) عكس ترتيب العنوان والصندوق في العربي --- */
/* الافتراضي عندك كان العنوان order:2 والصندوق order:1
   الآن نخلي العربي: العنوان أولاً والصندوق ثانياً */
html[lang="ar"] .why-head{ order: 1 !important; }
html[lang="ar"] .why-box { order: 2 !important; }

/* والإنجليزي يبقى كما هو (العنوان يسار، الصندوق يمين) */
html[lang="en"] .why-head{ order: 1 !important; }
html[lang="en"] .why-box { order: 2 !important; }

/* --- 2) تكبير العنوان الصغير (الأصفر) --- */
.overline{
  margin: 0 0 10px;
  color: var(--goldSoft, #ECDA8E);
  letter-spacing: .08em;
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 18px); /* ⬅︎ مكبّر */
  opacity: .98;
}

/* --- 3) جعل العنوان الكبير (H2) “Justified” ومتوازن --- */
.why-title{
  margin: 0;
  font-weight: 900;
  line-height: 1.15;
  font-size: clamp(30px, 4.6vw, 54px);    /* ⬅︎ شوي أكبر لو بغيت */
  color: var(--text, #F4F1EA);
  max-width: 24ch;                        /* طول موحد لأسطر العنوان */
  text-wrap: balance;                     /* يوازن السطور */
}

/* يضمن تفعيل التبرير حتى للسطر الأخير */
.why-title::after{
  content: "";
  display: inline-block;
  width: 100%;
}



:root {
  --gold: #b59940;
  --dark: #0d3d36;
  --light-bg: #fff;
  --dark-bg: #111;
}

.contact-gold {
  position: relative;
  background: var(--gold);
  padding: 80px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  z-index: 1;
}

.contact-wrapper {
  position: relative;
  width: 85%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-text {
  color: #fff;
  max-width: 480px;
  text-align: right;
}

html[dir="ltr"] .contact-text {
  text-align: left;
}

.contact-text h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.contact-text h2 span {
  color: #2b2b2b;
}

.contact-text p {
  margin-top: 8px;
  font-size: 1rem;
  color: #fffdf5;
}

.contact-form-card {
  position: absolute;
  left: 0;
  bottom: -150px; /* رفعناه شوي لفوق عشان ما يدخل على الفوتر */
  background: var(--light-bg);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  padding: 10px 10px; /* قللنا المسافات العلوية والسفلية */
  width: 330px; /* قللنا العرض شوي */
  z-index: 10;
  transition: transform 0.4s ease, background 0.4s ease;
}

/* تعديل إضافي للمسافات الخارجية العامة */
.contact-section {
  padding-top: 80px; /* زاد البعد بين القسم اللي فوق */
  padding-bottom: 120px; /* وزدنا البعد بين القسم اللي تحت */
}


html[dir="ltr"] .contact-form-card {
  left: auto;
  right: 0;
}

.contact-form-card:hover {
  transform: translateY(-10px);
}

.contact-form-card h3 {
  text-align: center;
  color: #3a2c06;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.contact-form-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.9rem;
   resize: none;
   
}

.contact-form-card button {
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.contact-form-card button:hover {
  background: #15594f;
  transform: scale(1.03);
}

body[data-theme="dark"] {
  background: var(--dark-bg);
}

body[data-theme="dark"] .contact-form-card {
  background: #1a1a1a;
  color: #fff;
}

body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
  background: #222;
  border-color: #444;
  color: #fff;
}

@media (max-width: 900px) {
  .contact-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contact-text {
    margin-bottom: 40px;
  }

  .contact-form-card {
    position: static;
    width: 90%;
    margin-top: 40px;
  }
}
.contact-form-card input[type="tel"] {
  direction: rtl; /* يخلي الكتابة تبدأ من اليمين */
  text-align: right;
}
html[dir="ltr"] .contact-form-card input[type="tel"] {
  direction: ltr;
  text-align: left;
}





/* ===== إعداد الأساسيات ===== */
.main-footer {
  font-family: 'Tajawal', sans-serif;
  padding: 90px 0 40px;
  transition: background 0.4s ease, color 0.4s ease;
}

.main-footer[data-theme='dark'] {
  background: #0f0e0e;
  color: #f4f4f4;
}

.main-footer[data-theme='light'] {
  background: #faf7f0;
  color: #1a1a1a;
}

/* ===== الحاوية ===== */
.footer-container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 60px;
  border-bottom: 1px solid rgba(191, 160, 71, 0.25);
  padding-bottom: 50px;
}

/* ===== الشعار والوصف ===== */
.footer-logo {
  height: 75px;
  width: auto;
  margin-bottom: 25px;
}

.footer-desc {
  font-size: 0.95rem;
  line-height: 1.9;
  text-align: justify;
  margin-bottom: 15px;
  color: inherit;
}

/* ===== الروابط ===== */
.footer-col h3 {
  color: var(--gold, #bfa047);
  font-size: 1.25rem;
  margin-bottom: 15px;
  font-weight: 600;
}

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

.footer-col ul li {
  margin: 10px 0;
}

.footer-col ul a {
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-col ul a:hover {
  color: var(--gold, #bfa047);
}

/* ===== التواصل ===== */
.footer-col.contact p {
  margin: 8px 0;
  font-size: 0.95rem;
}

.footer-col.contact a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col.contact a:hover {
  color: var(--gold, #bfa047);
}

/* ===== أيقونات السوشال ===== */
.social-links {
  margin-top: 15px;
}

.social-links img {
  width: 40px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-links img:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

/* ===== الأسفل ===== */
.footer-bottom {
  text-align: center;
  margin-top: 35px;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ===== الموبايل ===== */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

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

  .social-links {
    justify-content: center;
  }
}

/* قفل الثيم على الداكن وإخفاء زر التبديل (بدون حذف العنصر) */
html { --force-dark: 1; }
#themeToggle { display: none !important; }



/* ===== خلفية قسم القيم بلون ذهبي موحد ===== */
.values-section{
  background-color: #B7993C !important; /* نفس لون الصورة المرفقة */
  position: relative;
  isolation: isolate;
}

/* علشان النصوص تبقى واضحة فوق الذهبي */
.values-section .values-title,
.values-section .values-intro,
.values-section .value-card,
.values-section .value-title{
  color: #fff !important;
}

/* بطاقات القيم بخلفية شبه شفافة */
.values-section .value-card{
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* الأيقونات والحدود بخط أبيض خفيف */
.values-section .corner-line{
  stroke: #fff !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.values-section .value-icon{
  background: rgba(255,255,255,0.2);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
/* ===== مقاسات متّزنة لقسم الشركاء (مطابقة لروح الإنجازات) ===== */

/* ارتفاع منطقي للقسم كله */
.partners-sec {
  padding: 90px 0 !important;      /* قريب من الإنجازات */
  min-height: 420px !important;     /* يمنع القصر الزايد */
}

/* العنوان والنص: نفس أحجام الإنجازات تقريبًا */
.partners-title {
  font-size: 1.8rem !important;     /* ≈ 28–30px */
  margin-bottom: 14px !important;
  font-weight: 800 !important;
}

.partners-subtitle {
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  max-width: 680px !important;
  margin: 0 auto 28px !important;
}

/* شريط التمرير (الحاوية) */
.partners-slider {
  height: 130px !important;         /* مساحة كافية للّوجوه */
  overflow: hidden !important;
}

/* مسافات وسرعة الشريط */
.partners-track {
  gap: 60px !important;             /* تباعد مريح بين الشعارات */
  animation-duration: 20s !important; /* سرعة معقولة */
}

/* حجم الشعارات */
.partners-track img {
  height: 78px !important;          /* الحجم الفعلي للّوجو */
  width: auto !important;
  margin: 0 6px !important;
  object-fit: contain !important;
  filter: grayscale(100%) contrast(1.08);
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}



/* ===== تدرّج مسؤول (Responsive) ===== */

/* شاشات كبيرة جدًا */
@media (min-width: 1200px) {
  .partners-sec { padding: 100px 0 !important; }
  .partners-slider { height: 150px !important; }
  .partners-track img { height: 88px !important; }
  .partners-track { gap: 84px !important; }
}

/* تابلت */
@media (max-width: 992px) {
  .partners-sec { padding: 80px 0 !important; }
  .partners-slider { height: 120px !important; }
  .partners-track img { height: 68px !important; }
  .partners-track { gap: 56px !important; animation-duration: 30s !important; }
}

/* موبايل */
@media (max-width: 640px) {
  .partners-sec { padding: 70px 0 !important; }
  .partners-slider { height: 110px !important; }
  .partners-track img { height: 58px !important; }
  .partners-track { gap: 42px !important; animation-duration: 25s !important; }
}
  



/* ✅ تقليل المسافة بين الشعار والنص بالفوتر */
.main-footer .footer-container > .footer-col:has(#footer-logo) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0; /* نحذف الفراغ الافتراضي */
}

/* ✅ الشعار */
#footer-logo {
  width: 400px !important;
  height: auto;
  margin: 0 0 -80px 0 !important; /* سحب النص لأعلى بمقدار 10px */
    margin-top: -50px !important; /* 🔹 غيّر القيمة لتتحكم بالارتفاع */
  display: block;
}

/* ✅ النص */
.main-footer .footer-container > .footer-col:has(#footer-logo) p {
  margin: 0;
  color: #CFC8BC;
  line-height: 1.8;
  text-align: right;
  max-width: 300px;
}

/* ✅ دعم الوضع الإنجليزي */
html[dir="ltr"] .main-footer .footer-container > .footer-col:has(#footer-logo) {
  align-items: flex-start;
}
html[dir="ltr"] .main-footer .footer-container > .footer-col:has(#footer-logo) p {
  text-align: left;
}
/* 3) النص يبدأ من نفس الحافة تمامًا */
.main-footer .footer-container > .footer-col:has(#footer-logo) p{
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;              /* RTL */
  max-width: 36ch;                /* اختياري: عرض مقروء */
  line-height: 1.8;
  color: #f5f5f4;
}

/* LTR */
html[dir="ltr"] .main-footer .footer-container > .footer-col:has(#footer-logo) p{
  text-align: left;
}

/* 4) (اختياري) تصحيح دقيق إذا بقي بكسلات بسيطة فراغ */
:root{ --footerEdgeFix: 28px; }   /* عدّلها من -8px إلى 8px حسب الحاجة */
.main-footer .footer-container > .footer-col:has(#footer-logo) p{
  transform: translateX(var(--footerEdgeFix));
}
html[dir="ltr"] .main-footer .footer-container > .footer-col:has(#footer-logo) p{
  transform: translateX(calc(var(--footerEdgeFix) * 3));
}
.social-links {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 0px; /* المسافة بين الأيقونات */
}

.social-links img {
  width: 45px;
  height: auto;
  transition: transform .3s ease, opacity .3s ease;
}

.social-links img:hover {
  transform: scale(1.1);
  opacity: .85;
}
.services-section{ position: relative; }

.main-footer {
  position: relative; /* ⬅️ هذا ضروري جداً عشان الصورة تطفو فوقه */
}

.main-footer {
  position: relative; /* الأساس لربط الصورة بالفوتر */
  overflow: visible;  /* حتى لو كانت طالعة شوي فوق */
}

/* الصورة مثبتة تماماً على بداية الفوتر */
.footer-cert-floating {
  position: absolute;
  top: 0;              /* 🔹 تلتصق تماماً ببداية الفوتر */
  right: 40px;         /* المسافة من اليمين */
  transform: translateY(-10%); /* تطلع نصفها فوق ونصفها داخل الفوتر */
  height: 150px;       /* حجم الصورة */
  width: auto;
  z-index: 20;
  opacity: 0.95;
  transition: transform .3s ease, opacity .3s ease;
}


/* متجاوبة على الشاشات الصغيرة */
@media (max-width: 900px) {
  .footer-cert-floating {
    right: 20px;
    height: 90px;
  }
}

/* =================================================================== */
/* 📱 إصلاحات الموبايل فقط — بدون لمس الدِّسك توب                       */
/* =================================================================== */
@media (max-width: 768px){

  /* 1) الهيرو: اجعل مصدر الصورة الوحيد هو .hero-bg::before */
  #hero, .hero{
    background: none !important;
  }
  .hero::before,
  .hero::after{
    content: none !important;
    background: none !important;
  }
  .hero .hero-bg{
    background: none !important;     /* الطبقة نفسها بدون صورة */
  }
  .hero .hero-bg::before{
    background-image: url("assets/hero-a.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% 22% !important; /* ارفع الفوكس */
    transform: none !important;               /* ألغِ التكبير */
    opacity: .95 !important;
  }

  /* 2) الهامش الداخلي للهيرو تحت الهيدر + ارتفاع منطقي */
  .hero{
    min-height: 86vh !important;
    padding-top: calc(var(--H,58px) + 12px) !important;
    padding-bottom: 28px !important;
  }

  /* 3) عنوان "كلمة رئيس مجلس الإدارة" – ألغِ الحشو الشفّاف للويبكِت */
  #chairman .chairman-title{
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 4) الهيدر: ترتيب مُحكم بدون ما يغيّر الدِّسك توب */
  .site-header{ --H: 60px; }
  .header-row{ gap: 10px; padding: 6px 0 !important; }
  .brand{ height: 56px !important; }
  .brand img{
    height: 56px !important;
    width: auto !important;
    transform: none !important;
  }
  .main-nav{
    gap: 8px !important;
    flex-wrap: wrap;              /* يسمح للروابط تنزل سطر ثاني بدل ما تختفي */
  }
  .main-nav > a:not(.btn){ padding: 4px 6px !important; font-size: 14px; }

  /* 5) زاوية قسم الخدمات: تظهر فوق الهيدر الخاص بالقسم فقط في الموبايل */
  .services-head{ position: relative; }
  .services-head .services-corner.top-right{
    top: -14px !important;
    right: 0 !important;
  }
  .services-head .services-corner.bottom-left{
    /* اجعلها عند نهاية عنوان/وصف القسم، وليس نهاية الكروت */
    bottom: calc(100% - 16px) !important;
    left: 0 !important;
  }
}

/* 🔧 إصلاح صغير عام: لا تكرر صورة الهيرو في أقسام ثانية بشكل غير مقصود */
.hero-aura, .hero-grid{ background: none; }
/********************  Mobile-only fixes (keep desktop as-is)  ********************/
@media (max-width: 768px){

  /* 1) نزّل "كلمة رئيس مجلس الإدارة" شوي بحيث ما تطلع أول ما يفتح الموقع */
  #chairman.hero-follow{
    margin-top: 28px !important;    /* كان سالب ومخلّيها طالعة بدري */
    padding-top: 4px !important;    /* مسافة بسيطة فوق */
  }

  /* 2) زاوية الخدمات (اليسار تحت العنوان) ننزلها شوي في الشاشات الصغيرة فقط */
  .services-head{ position: relative; }
  .services-corner-wrapper{ z-index: 0; } /* خلف النص */
  .services-corner.bottom-left{
    bottom: -10px !important;  /* نزول خفيف (عدّلها لـ -16/-20 لو تبي أكثر) */
    left: 0 !important;
    transform: rotate(270deg);
  }
  .services-corner.top-right{
    top: -10px !important;     /* توازن مقابل الزاوية الثانية */
    right: 0 !important;
    transform: rotate(90deg);
  }

  /* 3) ضبط قسم الكوت الذهبي للموبايل بدون المساس بالدِسك توب */
  .quote-section{               /* الحاوية الذهبية */
    padding: 28px 16px 44px !important;
  }
  .quote-container{
    gap: 12px !important;
    max-width: 92vw !important;
  }
  .quote-text{
    font-size: .98rem !important;
    line-height: 1.9 !important;
  }
  .quote-mark{ font-size: 1.2rem !important; }
  .highlight{
    padding: 1px 6px !important;
    border-radius: 3px !important;
  }
  .quote-logo{
    bottom: -40px !important;          /* ما يغطي النص */
  }
  .quote-logo img{
    width: 170px !important;           /* كان كبير على الشاشات الصغيرة */
    opacity: .95;
  }
}

/* خدمات: إصلاح موضع الزاوية اليسار على الشاشات الصغيرة فقط */
@media (max-width: 768px){
  .services-head{
    position: relative !important;
    overflow: visible !important;
  }

  .services-corner-wrapper{
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important; /* فوق الخلفية */
  }

  /* الزاوية العلوية اليمنى تبقى قريبة من العنوان */
  .services-corner.top-right{
    top: 6px !important;
    right: clamp(8px, 4vw, 16px) !important;
    bottom: auto !important;
    transform: rotate(90deg) !important;
    opacity: 1 !important; stroke-dashoffset: 0 !important;
  }

  /* 🔥 الزاوية اليسار: اربطها بالـ TOP بدلاً من BOTTOM (ترفع لفوق) */
  .services-corner.bottom-left{
    top: 250px !important;                 /* ← هذه ترفعها */
    bottom: auto !important;             /* إلغاء أي bottom قديم */
    left: clamp(8px, 4vw, 16px) !important;
    transform: rotate(270deg) !important;
    opacity: 1 !important; stroke-dashoffset: 0 !important;
  }

  /* لو تحبين نزول بسيط عن العنوان عشان ما تلمسه: */
  .services-title{ margin-top: 6px !important; }
}

/* Footer: إصلاح تموضع اللوغو على الشاشات الصغيرة فقط */
@media (max-width: 640px){
  /* صف واحد ومحاذاة وسط */
  .main-footer .footer-container{
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  /* اللوغو: حجم منطقي + إلغاء الهوامش السالبة السابقة */
  #footer-logo{
    width: min(68vw, 240px) !important;   /* عدّلي الحد الأقصى لو أردتِ */
    height: auto !important;
    display: block !important;
    margin: 0 auto 14px !important;       /* وسط + مسافة تحت بسيطة */
    margin-top: 0 !important;             /* يلغي -50px القديمة */
    transform: none !important;           /* يلغي أي إزاحة */
  }

  /* العمود الذي يحتوي اللوغو: وسط */
  .main-footer .footer-container > .footer-col:has(#footer-logo){
    align-items: center !important;
    gap: 8px !important;
  }

  /* نص الوصف: بدون إزاحات، وسط، عرض مقروء */
  .main-footer .footer-container > .footer-col:has(#footer-logo) p{
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 34ch !important;
    line-height: 1.9 !important;
    text-align: center !important;
    transform: none !important;           /* يلغي translateX السابق */
  }
}


.popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;                 /* مخفي دائمًا */
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.popup-box {
  background: #e6e6ea;
  color: #0d3d36;
  border-radius: 16px;
  padding: 24px 28px;
  min-width: 280px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.popup-box .icon {
  display: block;
  font-size: 26px;
  margin-bottom: 10px;
  color: #1fa36b;
}

.popup-box button {
  margin-top: 14px;
  padding: 8px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: #1f3f3a;
  color: #fff;
}