/*
Theme Name: ArabianGulf
Author: Haneen
Description: Lightweight RTL theme for ArabianGulf (two beauty products).
Version: 1.0.0
Text Domain: arabiangulf
*/
html {
    margin: 0 !important;
}
:root{
  --bg:#ffffff;
  --txt:#111;
  --muted:#666;
  --acc:#89D149; /* الاخضر الرئيسي */
  --bd:#e9e9e9;
  --container: 1100px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Naskh Arabic',Tahoma,Arial,sans-serif;color:var(--txt);background:var(--bg);line-height:1.6;direction:rtl}
img{max-width:100%;height:auto;display:block}

/* Layout helpers */
.container{width:min(var(--container), calc(100% - 32px));margin-inline:auto}
/* ===== Header ===== */
/* Header — exact alignment */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--bd);z-index:50}
.header-grid{
  display:grid;
  grid-template-columns: 1fr minmax(300px, auto) 1fr; /* يمين/وسط/يسار */
  align-items:center; gap:24px; min-height:96px;
}
.header-right{justify-self:start}
.header-cta{justify-self:end;display:flex;align-items:center;gap:12px}

/* Logo size */
.brand img{max-height:64px;width:auto}

/* Center menu */
.main-nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:38px;justify-content:center;align-items:center}
.main-nav a{color:#1d1d1d;text-decoration:none;font-weight:700;padding:10px 0}
.main-nav .current-menu-item>a,
.main-nav a:hover{color:var(--acc)}

/* Header CTA button */
.btn-order{padding:10px 18px;border-radius:999px;border:2px solid var(--acc);background:var(--acc);color:#fff !important;font-weight:800}

/* Mobile */
@media (max-width:768px){
  .header-grid{grid-template-columns:auto 1fr auto; min-height:74px}
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,360px); background:#fff;
    transform:translateX(100%); transition:.25s; padding:20px; box-shadow:-24px 0 40px rgba(0,0,0,.1)
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav .menu{flex-direction:column; gap:12px; justify-content:flex-start}
  .nav-toggle{display:inline-block;padding:10px 12px;border:1px solid var(--bd);background:#fff;border-radius:10px}
}



/* ===== Hero (مثل الاسكرين: نص وزر يسار) ===== */
.hero-one{
  position:relative; min-height: clamp(460px, 62vw, 640px);
  background-image: var(--bg); background-size: cover; background-position: center;
  color:#fff; isolation:isolate;
}
.hero-one__overlay{ position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index:0;
}
.hero-one__content{ position:relative; z-index:1; }
.hero-one__stack{
  /* نخلي الكتلة كلها على يسار الهيرو */
  margin-inline-start: auto;
  margin-inline-end: 0;
  padding: clamp(28px, 5vw, 48px) 0;
  max-width: 720px;
  text-align: left;   /* زي الاسكرين رغم RTL */
}

.hero-en{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:2px;
  font-size: clamp(32px, 6vw, 64px);
}
.hero-en .acc{ color: var(--acc); }

.hero-ar{
  margin: 0 0 16px;
  font-size: clamp(24px, 4.2vw, 40px);
  font-weight: 800;
}

.hero-btn{ display:inline-block; margin-top:6px; }

/* تباعد الحواف */
.hero-one .container{ padding-top: 40px; padding-bottom: 40px; }

/* موبايل */
@media (max-width:768px){
  .hero-one{ min-height: 480px; }
  .hero-one__stack{ max-width: 100%; }
}



/* Buttons */
a.btn, .btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  border:2px solid var(--acc);
  background:var(--acc);
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700;
  line-height:1;
}
.btn.outline{ background:#fff; color:var(--acc) !important; }

/* Hero */
/* Hero */
.hero-one{
  position:relative;
  min-height: clamp(520px, 62vw, 680px);
  background-image:var(--bg); background-size:cover; background-position:center;
  color:#fff; isolation:isolate;
}
.hero-one__overlay{position:absolute;inset:0;background:rgba(0,0,0,.35)} /* نفس قتامة الاسكرين */
.hero-one__content{position:relative;z-index:1}
.hero-one__stack{
  margin-inline-start:0; margin-inline-end:auto; /* يسار */
  padding: clamp(36px, 5vw, 56px) 0;
  max-width: 720px;
  text-align:left; /* زي الاسكرين */
}

/* EN line (COLLEA SE+) */
.hero-en{
  margin:0 0 8px;
  font-weight: 900;
  letter-spacing: 2.5px;
  font-size: clamp(34px, 6.2vw, 66px);
  line-height: 1.05;
}
.hero-en .acc{ color: var(--acc); }

/* AR line */
.hero-ar{
  margin: 0 0 16px;
  font-size: clamp(26px, 4.4vw, 42px);
  font-weight: 800;
}

/* CTA */
a.btn, .btn{
  display:inline-block;padding:12px 18px;border-radius:999px;border:2px solid var(--acc);
  background:var(--acc); color:#fff !important; text-decoration:none !important; font-weight:800; line-height:1;
}
.hero-btn{ margin-top:10px }

/* Mobile tweak */
@media (max-width:768px){
  .hero-one{ min-height: 520px }
  .hero-one__stack{ max-width:100% }
}



/* ===== Header base ===== */
.site-header{position:sticky; top:0; background:#fff; border-bottom:0px solid var(--bd); z-index:50}
.header-grid{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; min-height:96px}
.header-right{justify-self:start;width:137px;}
.header-cta{justify-self:end; display:flex; align-items:center; gap:12px}

/* Logo size المناسب */
.brand img{max-height:60px; width:auto}

/* Menu center */
.main-nav .menu{list-style:none; margin:0; padding:0; display:flex; gap:38px; justify-content:center; align-items:center}
.main-nav a{color:#1d1d1d; text-decoration:none; font-weight:700; padding:10px 0}
.main-nav .current-menu-item > a,
.main-nav a:hover{color:var(--acc)}

/* CTA left */
.btn-order{padding:10px 18px; border-radius:999px; border:2px solid var(--acc); background:var(--acc); color:#fff !important; font-weight:800}

/* زر القائمة يظهر موبايل فقط */
.nav-toggle{display:none !important}
@media (max-width:768px){
  .nav-toggle{display:inline-block !important; padding:10px 12px; border:1px solid var(--bd); background:#fff; border-radius:10px}
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,360px); background:#fff;
    transform:translateX(100%); transition:.25s; padding:20px; box-shadow:-24px 0 40px rgba(0,0,0,.1)
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav .menu{flex-direction:column; gap:12px; justify-content:flex-start}
}

/* ===== Transparent header on Home (overlay on hero) ===== */
body.home .site-header.is-hero-overlay{
  position:absolute; top:0; left:0; right:0;
  background:transparent; border:none;
}
body.home .site-header.is-hero-overlay .main-nav a{color:#fff}
body.home .site-header.is-hero-overlay .main-nav .current-menu-item > a,
body.home .site-header.is-hero-overlay .main-nav a:hover{color:var(--acc)}



/* ===== Hero ===== */
.hero-one{
  position:relative;
  min-height: clamp(540px, 62vw, 700px);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  color:#fff;
  isolation:isolate;
}
.hero-one__overlay{position:absolute; inset:0; background:rgba(0,0,0,.36)}
/* نخلي الكونتنت بنفس ارتفاع الهيرو للتمركز العمودي */
.hero-one__content{position:relative; z-index:1; min-height:inherit; display:flex; align-items:center}
.hero-one__stack{
  margin-inline-start:auto; margin-inline-end:0;     /* يسار */
  text-align:left;                                   /* يسار رغم RTL */
  max-width: 720px;
}

/* EN line */
.hero-en{
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:2.5px;
  font-size: clamp(36px, 6.4vw, 68px);
  line-height:1.05;
  color: black;
}
.hero-en .acc{ color: var(--acc); }

/* AR line */
.hero-ar{
  margin:0 0 16px;
  font-size: clamp(26px, 4.6vw, 44px);
  font-weight:800;
}

/* CTA */
a.btn, .btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  border:2px solid var(--acc); background:var(--acc);
  color:#fff !important; text-decoration:none !important; font-weight:800; line-height:1;
}
.hero-btn{ margin-top:12px }

/* Mobile tweaks */
@media (max-width:768px){
  .hero-one{ min-height: 520px }
  .hero-one__stack{ max-width:100% }
}



/* 1) الهيدر فوق الهيرو وشفاف */
body.home header.site-header{
  position: absolute !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  border: none !important;
  z-index: 100 !important;
}

/* 2) أي مساحة علوية قديمة على الكونتنت/الهيرو = صفر */
body.home .site-main{ padding-top:0 !important; margin-top:0 !important; }
body.home .hero-one{ margin-top:0 !important; }

/* 3) لون لينكات المنيو فوق الصورة */
body.home header.site-header .main-nav a{ color:#fff !important; }
body.home header.site-header .main-nav .current-menu-item>a,
body.home header.site-header .main-nav a:hover{ color:var(--acc) !important; }

/* 4) مقاس اللوجو (عدّليه لو حابة) */
.brand img{ max-height:60px; width:auto; }



/* ===== Mobile (<=768px) ===== */
@media (max-width:768px){
  .header-grid{grid-template-columns:auto 1fr auto;min-height:72px}
  .brand img{max-height:44px}
  .btn-order{display:none}
  .nav-toggle{display:inline-block;padding:10px 12px;border:1px solid var(--bd);background:#fff;border-radius:12px;font-weight:700}
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:#fff;
    transform:translateX(100%);transition:transform .25s ease;padding:18px;
    box-shadow:-24px 0 40px rgba(0,0,0,.12);z-index:1000;
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav .menu{flex-direction:column;gap:10px}
  .main-nav a{padding:12px 6px;color:#111}
  .main-nav .current-menu-item>a{color:var(--acc)}
  .hero-one{min-height:76vh;background-position:center}
  .hero-one__stack{max-width:100%;padding-block:18px 28px}
  .hero-en{font-size:clamp(28px,8.5vw,40px);letter-spacing:1.3px}
  .hero-ar{font-size:clamp(18px,5.2vw,24px);line-height:1.4;margin:0 0 14px}
}



/* ===== About Section ===== */
.sec-title{
  margin: 32px 0 16px;
  text-align:center;
  font-size: clamp(20px, 3.4vw, 32px);
  font-weight: 800;
}

.about-box{
  background:#f3f4f3;
  border-radius:16px;
  padding:22px;
}

.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;   /* يسار كبير - منتصف نص - يمين صور */
  grid-template-rows: auto auto;
  gap:18px;
  align-items:center;
}

/* توزيع مناطق الشبكة */
.about-mainimg{ grid-column:1 / 2; grid-row:1 / 3; margin:0; overflow:hidden; border-radius:14px }
.about-mainimg img{ width:100%; height:100%; object-fit:cover }

.about-content{ grid-column:2 / 3; grid-row:1 / 3; text-align:center; padding:8px }
.about-title{ margin:0 0 8px; color:var(--acc); font-weight:800; font-size:clamp(18px,2.6vw,26px) }
.about-text{ color:#333; line-height:1.9; margin:0 0 12px }

.about-side{ margin:0; overflow:hidden; border-radius:14px }
.about-side--top{ grid-column:3 / 4; grid-row:1 / 2 }
.about-side--bottom{ grid-column:3 / 4; grid-row:2 / 3 }
.about-side img{ width:100%; height:100%; object-fit:cover }

/* ===== Mobile (<= 768px) ===== */
@media (max-width:768px){
  .about-box{ padding:16px }
  .about-grid{
    grid-template-columns: 1fr;
    grid-template-rows:auto;
  }
  /* ترتيب العرض في الموبايل: عنوان داخلي + نص + زر، ثم الصورة الكبيرة، ثم الصورتين */
  .about-content{ order:1; grid-column:auto; grid-row:auto; text-align:center; padding:0 6px }
  .about-mainimg{ order:2; height: 44vh }
  .about-side--top{ order:3; height: 26vh }
  .about-side--bottom{ order:4; height: 26vh; }
  .about-mainimg img,.about-side img{ height:100%; object-fit:cover }
}



/* ===== About: Full width & flip ===== */

/* نخلي الكونتينر بعرض الشاشة */
.container--wide{
  width:100%;
  max-width:100%;
  padding-inline: clamp(16px, 5vw, 32px);
}

/* عكس الترتيب: الصورة الكبيرة يمين، الصورتين شمال */
.about--flip .about-grid{
  grid-template-columns: 0.9fr 1fr 1.1fr; /* شمال صور صغيرة - منتصف نص - يمين صورة كبيرة */
}
.about--flip .about-mainimg{ grid-column: 3 / 4; grid-row: 1 / 3; }
.about--flip .about-side--top{ grid-column: 1 / 2; grid-row: 1 / 2; }
.about--flip .about-side--bottom{ grid-column: 1 / 2; grid-row: 2 / 3; }
.about--flip .about-content{ grid-column: 2 / 3; grid-row: 1 / 3; }

/* الموبايل يظل ستاك طبيعي */
@media (max-width:768px){
  .about--flip .about-grid{
    grid-template-columns: 1fr;
  }
  .about--flip .about-mainimg,
  .about--flip .about-side--top,
  .about--flip .about-side--bottom,
  .about--flip .about-content{
    grid-column: auto; grid-row: auto;
  }
}



/* ===== Inject Section ===== */
.container--wide{width:100%;max-width:100%;padding-inline:clamp(16px,5vw,32px)}
.inject-sec{padding-block:22px 26px}
.sec-title{margin:12px 0 18px;text-align:center;font-size:clamp(20px,3.4vw,32px);font-weight:800}

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

/* كارت */
.inject-card{
  background:#f6f5f1;
  border:1px solid #eee;
  border-radius:16px;
  padding:14px;
  box-shadow:0 2px 0 rgba(0,0,0,.02);
}
.inject-thumb{border-radius:12px;overflow:hidden;aspect-ratio:16/10}
.inject-thumb img{width:100%;height:100%;object-fit:cover}
.inject-title{margin:12px 0 6px;font-size:18px;font-weight:800;text-align:center}
.inject-desc{margin:0;color:#444;line-height:1.9;text-align:center}

/* محاذاة صف أخير من عنصرين (سيناريو 5 عناصر مثل الاسكرين) */
.inject-grid > .inject-card:nth-child(4){grid-column:1}

/* موبايل: عمودين جنب بعض */
@media (max-width:768px){
  .inject-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .inject-grid > .inject-card:nth-child(4){grid-column:auto} /* يخليها تتدفق طبيعي */
  .inject-title{font-size:16px}
  .inject-desc{font-size:14px}
}




/* ===== Tech Section ===== */
.container--wide{width:100%;max-width:100%;padding-inline:clamp(16px,5vw,32px)}

.tech-sec{padding-block:22px 28px}
.tech-head{ text-align:center; margin-bottom:16px }
.sec-title{margin:0 0 10px; font-weight:800; font-size:clamp(20px,3.4vw,32px)}
.sec-sub{margin:0 auto 6px; color:#666; font-size:clamp(14px,2.2vw,16px); max-width:900px}

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

.tech-col{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:16px;
  background:#fff;
}

.tech-col--left .tech-text{ order:0 }
.tech-col--left .tech-img { order:1 }

.tech-col--right .tech-img { order:0 }
.tech-col--right .tech-text{ order:1 }

.tech-img{
  background:#f4f4f4;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
.tech-img img{ width:100%; height:auto; display:block }

.tech-text{
  padding:10px 6px;
}
.tech-title{
  margin:0 0 10px;
  font-weight:800;
  font-size: clamp(18px, 2.6vw, 24px);
  color:#111;
}
.tech-desc{ color:#444; line-height:1.9; margin:0 0 12px }

/* زر عام (موجود عندك أصلاً؛ نخليه هنا لو ناقص) */
a.btn,.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  border:2px solid var(--acc); background:var(--acc);
  color:#fff!important; text-decoration:none!important; font-weight:800; line-height:1;
}
.btn.outline{ background:#fff; color:var(--acc)!important }

/* ===== موبايل ===== */
@media (max-width: 768px){
  .tech-grid{ grid-template-columns:1fr; gap:18px }
  .tech-img{ border-radius:14px }
  .tech-text{ text-align:center }
}



/* موبايل: خلي عمود المنتج الثاني (اليمين) يبدأ بالنص ثم الصورة */
@media (max-width: 768px){
  .tech-col--right .tech-text{ order: 0; }
  .tech-col--right .tech-img { order: 1; }
  /* لو عايزة مسافة صغيرة بين النص والصورة */
  .tech-col--right .tech-img{ margin-top: 10px; }
}



/* ===== Each box contains ===== */
.container--wide{width:100%;max-width:100%;padding-inline:clamp(16px,5vw,32px)}

.box-sec{padding-block:18px 26px}
.sec-title{margin:0 0 14px;font-weight:800;font-size:clamp(20px,3.2vw,30px)}

.box-list{display:grid;gap:16px}
.box-row{
  display:grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  align-items:center;
  gap:18px;
  padding:16px;
  border:1px solid #eaeaea;
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.02);
}

/* الصورة */
.box-img{border-radius:12px;overflow:hidden;background:#f5f5f5}
.box-img img{width:100%;height:auto;display:block}

/* النص */
.box-text{text-align:center;padding:6px}
.box-title{margin:0 0 10px;font-weight:800;font-size:clamp(18px,2.4vw,24px)}
.box-desc{margin:0;color:#444;line-height:1.9}

/* الصف الزوجي: بدّل الترتيب (الصورة يمين) */
.box-row.is-even .box-img{order:2}
.box-row.is-even .box-text{order:1}

/* موبايل: عمود واحد الصورة فوق */
@media (max-width: 768px){
  .box-row{
    grid-template-columns: 1fr;
    gap:12px;
    padding:14px;
  }
  .box-row .box-img{order:0}
  .box-row .box-text{order:1}
}


/* العمودين الافتراضيين: الصورة ضيقة، النص واسع */
.box-row{
  display:grid;
  grid-template-columns: minmax(220px,340px) 1fr; /* صورة | نص */
  align-items:center;
  gap:18px;
}

/* الصف الزوجي: اعكس الأعمدة (نص | صورة) مع ثبات عرض عمود الصورة */
.box-row.is-even{
  grid-template-columns: 1fr minmax(220px,340px);
}

/* حددي عمود كل عنصر صراحةً بدل الـorder */
.box-row .box-img{ grid-column: 1; }
.box-row .box-text{ grid-column: 2; }
.box-row.is-even .box-img{ grid-column: 2; }
.box-row.is-even .box-text{ grid-column: 1; }

/* اختياري: حافظي على تناسب الصورة */
.box-img{
  border-radius:12px; overflow:hidden; background:#f5f5f5;
  aspect-ratio: 4 / 3;         /* ثبتي نسبتها */
}
.box-img img{ width:100%; height:100%; object-fit: cover; }

/* موبايل: عمود واحد */
@media (max-width:768px){
  .box-row{ grid-template-columns: 1fr; gap:12px; }
  .box-row .box-img, .box-row .box-text{ grid-column: auto; }
}



/* ===== موبايل: طبّقي نفس الترتيب على كل الصفوف ===== */
@media (max-width: 768px){
  /* صف واحد للجميع + إلغاء أي توزيع odd/even */
  .box-row{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
    width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 16px;
    padding: 14px;
  }
  .box-row.is-even .box-img{order:1!important}

  /* الصورة أولًا ثم النص — في كل الصفوف */
  .box-row .box-img{ order: 0; width: 100%; max-width: 520px; margin-inline: auto; }
  .box-row .box-text{ order: 1; width: 100%; padding-inline: 12px; text-align: center; }

  /* عناوين وفقرة وسط */
  .box-row .box-title{ text-align: center !important; }
  .box-row .box-desc { text-align: center !important; }

  /* تأكيد على أن أعمدة even/odd لا تغير الترتيب على الموبايل */
  .box-row.is-odd  .box-img,
  .box-row.is-even .box-img,
  .box-row.is-odd  .box-text,
  .box-row.is-even .box-text{ grid-column: auto !important; }
}




/* ===== Opinions ===== */
.opinions-sec{ padding-block: 18px 26px; }
.opinions-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
}

/* عناوين الأعمدة */
.ops-title{
  margin:0 0 14px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color:#4b4b4b;
}

/* الكروت */
.op-card{
  display:grid;
  grid-template-columns: 1fr auto;   /* النص | الأيقونة */
  align-items:center;
  gap:12px;
  padding: 16px 18px;
  border:1px solid var(--bd, #e9e9e9);
  border-radius:16px;
  background:#f5f7f8;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  margin-bottom: 14px;
}

/* النص */
.op-name{
  margin:0 0 6px;
  font-weight:800;
  font-size: clamp(16px, 2vw, 18px);
  color:#222;
}
.op-text{
  margin:0;
  color:#555;
  line-height:1.9;
  font-size: 15px;
}

/* الأيقونة */
.op-ico{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--bd, #e9e9e9);
  border-radius:50%;
  color:#777;
  background:#fafafa;
}

.ops-col
 {
 border: 1px solid #eaeaea;
    border-radius: 16px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .02);
    padding: 11px;
}   


/* ===== موبايل ===== */
@media (max-width:768px){
  .opinions-grid{ grid-template-columns: 1fr; gap: 18px; }
  .ops-title{ text-align:center; }
  .op-card{
    grid-template-columns: 1fr auto;  /* يظل الأيقون يمين */
    padding:14px;
  }
}


.opinions-panel .op-card{
  border:1px solid var(--bd, #e6e6e6);
  border-radius:14px;
  background:#fafafa;
  padding:16px 18px;
}




/* ====== Contact Split (no gap) ====== */
.contact-split{padding:28px 0 56px; background:#f7f6f2}
.contact-slab{
  display:grid;
  grid-template-columns: 1fr 1fr;
  border:1px solid #e8e6e0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* الصورة (نفسها) */
.contact-side--img{
  min-height:380px;
  background-image:var(--img);
  background-size:cover; background-position:center;
}

/* ===== فورم على خلفية جراي فاتح ===== */
.contact-side--form{
  /* الخلفية الجراي من التصميم */
  background:#F2F1ED;                 /* غيّريها لو عايزة أغمق/أفتح */
  padding:22px 22px 24px;
  display:flex; flex-direction:column;
}
.contact-slab__title{
  margin:0 0 12px;
  text-align:center;
  font-weight:900;
  font-size:clamp(18px,2.2vw,24px);
  color:#1c1c1c;
}

/* ===== Contact Form 7 — مطابق للموك ===== */
.wpcf7{direction:rtl}
.wpcf7 form{margin:0}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  width:100%;
  background:#FFFFFF;                 /* الحقل أبيض فوق الجراي */
  border:1px solid #E4E2DC;           /* حد رفيع */
  border-radius:12px;                 /* زوايا ناعمة */
  padding:12px 14px;
  font-size:14px; color:#111;
  outline:none; text-align:right;
  transition:border-color .15s, box-shadow .15s;
  margin-bottom:12px;                 /* مسافة بين الحقول */
  box-shadow:0 1px 0 rgba(0,0,0,.02); /* لمسة خفيفة */
}
.wpcf7 textarea{min-height:130px; resize:vertical}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{color:#9B9B9B}

.wpcf7 input:focus,
.wpcf7 textarea:focus{
  border-color:var(--acc,#35D061);
  box-shadow:0 0 0 3px rgba(53,208,97,.12);
}

/* زر أخضر صغير يمين/يسار حسب ما تحبي */
.form-actions{margin-top:2px; text-align:left}   /* أخليه يسار زي اللقطة */
.wpcf7 input[type="submit"]{
  background:var(--acc,#35D061);
  color:#0f0f0f;
  border:0; border-radius:12px;
  padding:9px 16px;
  font-weight:800; cursor:pointer;
}
.wpcf7 input[type="submit"]:hover{filter:saturate(110%)}

/* رسائل الحالة */
.wpcf7 .wpcf7-response-output{
  margin-top:10px; border-radius:10px;
}

/* ===== موبايل ===== */
@media (max-width: 900px){
  .contact-slab{grid-template-columns:1fr}
  .contact-side--img{min-height:220px}
  .contact-side--form{padding:16px}
}




/* ===== Footer (image bg + overlay) ===== */
.footer-hero{
  position:relative; color:#fff;
  background:#222; /* fallback */
  background-image:var(--bg);
  background-size:cover; background-position:center;
  margin-top:36px;
}
.footer-hero .footer-ovl{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);           /* تغميق حسب الصورة */
  backdrop-filter:saturate(120%) blur(0px);
}
.footer-hero .footer-wrap,
.footer-hero .footer-copy{position:relative; z-index:2}

.footer-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;   /* يمين: براند / وسط: روابط / يسار: تواصل */
  gap:28px; padding:26px 0;
}

/* العمود الأيمن */
.f-brand .f-logo img{height:46px; width:auto}
.f-desc{margin:10px 0 0; color:#e5e5e5; font-size:14px}

/* العناوين الصغيرة */
.f-title{margin:0 0 10px; font-size:16px; font-weight:800; color:#fff}

/* منيو الفوتر */
.f-menu{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.f-menu a{color:#efefef}
.f-menu a:hover{color:var(--acc,#35D061)}

/* تواصل */
.f-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.f-list a{display:flex; align-items:center; gap:8px; color:#efefef}
.f-list svg{color:#efefef; opacity:.9}
.f-list a:hover{color:var(--acc,#35D061)}

/* سوشيال */
.f-social{display:flex; gap:12px; margin-top:12px}
.soc{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
     border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#fff}
.soc:hover{border-color:var(--acc,#35D061); color:var(--acc,#35D061)}

.footer-copy{border-top:1px solid rgba(255,255,255,.25); padding:10px 0; text-align:center; color:#eee}

/* ====== Mobile (<=900px) — ترتيب وتهوية مظبوطة ====== */
@media (max-width: 900px){

  /* شبكة عمود واحد وبالترتيب: brand ثم links ثم contact */
  .footer-wrap{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 0 22px;
  }

  /* العمود 1: اللوجو + الوصف + السوشيال */
  .f-brand{
    text-align:center;
    margin-right: 24px;
  }
  .f-brand .f-logo img{height:40px}
  .f-desc{
    max-width: 28ch;
    margin: 6px auto 10px;   /* سنتر + مسافات ظريفة */
    line-height: 1.6;
  }
  .f-social{
    justify-content:center;
    gap: 12px;
    margin-top: 6px;
  }
  .soc{width:34px; height:34px}

  /* العمود 2: روابط الفوتر */
  .f-links{ text-align:center; }
  .f-links .f-title{ margin-bottom:8px; font-size:15px; }
  .f-menu{ justify-items:center; gap: 8px; }
  .f-menu a{ font-size:14px; }

  /* العمود 3: تواصل معنا */
  .f-contact{ text-align:center; }
  .f-contact .f-title{ margin-bottom:8px; font-size:15px; }
  .f-list{ justify-items:center; gap:10px; }
  .f-list a{
    justify-content:center;          /* الأيقونة والنص في المنتصف */
    font-size:14px;
  }

  /* سطر الحقوق أصغر سنة */
  .footer-copy small{ font-size:12px; }
}


/*___________________________________________________________________________________________________________________*/

/* About: Intro */
.about-intro{padding:38px 0 18px; background:#fff}
.about-intro__title{margin:0 0 10px; font-size:clamp(20px,2.6vw,26px); font-weight:900; color:#111; text-align:center}
.about-intro__text{max-width:900px; margin:0 auto; color:#333; line-height:1.9; text-align:justify}

/* About: Split (نص / صورة) */
.about-split{padding:28px 0 40px; background:#f6f6f6}
.split-grid{display:grid; align-items:center; gap:28px; grid-template-columns:1.1fr 0.9fr}
.split-title{margin:0 0 10px; color:var(--acc,#35D061); font-weight:900; font-size:clamp(18px,2.4vw,22px)}
.split-body{color:#333; line-height:1.9; margin-bottom:14px}
.split-btn{display:inline-block; margin-top:4px}
.split-img img{width:100%; height:auto; border-radius:10px; display:block}

/* موبايل */
@media (max-width:900px){
  .about-intro{padding:26px 0 10px}
  .about-intro__text{padding:0 8px}

  .about-split{padding:22px 0 30px}
  .split-grid{grid-template-columns:1fr; gap:16px}
  .split-text{order:2; text-align:center}
  .split-img{order:1}
  .split-body{text-align:justify}
}



/* ===== About page only ===== */
.is-about-page .site-header{
  position: absolute;   /* ورا الهيرو */
  inset: 0 0 auto 0;
  z-index: 50;
}
.is-about-page .header-bg{
  /* نفس ستايل هيدر الهيرو عندك في الهوم */
  background: rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(2px);
}

/* مركز العناوين داخل الهيرو في صفحة من نحن فقط */
.is-about-page .hero-landing .hero-inner{
  justify-items: center;
  text-align: center;
}
/* لو محتاجة مساحة بسيطة من فوق بسبب الهيدر */
@media (min-width: 769px){
  .is-about-page .hero-landing .hero-inner{ padding-top: 90px; }
}
/* موبايل يفضل يبقى نفس تمركز الهوم */
@media (max-width: 768px){
  .is-about-page .hero-landing .hero-inner{
    justify-items: center;
    text-align: center;
    padding-top: 96px;
  }
}


/* ===== About page only — Hero static button ===== */
.is-about-page .about-hero-btn{
  position: relative;
  z-index: 60;                         /* فوق الـoverlay */
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -64px;                   /* نسحب الزرّ لفوق داخل الهيرو */
  padding: 10px 18px;
  background: var(--acc,#35D061);
  color: #0f0f0f;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* ديسكتوب كبير: نزبط الارتفاع لو محتاجة شدّة أقل */
@media (min-width: 1200px){
  .is-about-page .about-hero-btn{ margin-top: -72px; }
}

/* موبايل: نخليه أقل شوية عشان ما يغطّيش النص */
@media (max-width: 768px){
  .is-about-page .about-hero-btn{
    margin-top: -52px;
    padding: 9px 16px;
    font-size: 15px;
  }
}




/* ===== About page only — green button (pixel-perfect like mock) ===== */
.is-about-page .about-hero-btn,
.is-about-page .split-btn{
  display: inline-block;
  padding: 10px 18px;
  background: #fff;         /* الأخضر */
  color: #35D061;
  border: 1px solid #2fc657;
  border-radius: 8px;           /* حواف ناعمة (مش بيضاوي كامل) */
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Hover/Active */
.is-about-page .about-hero-btn:hover,
.is-about-page .split-btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.is-about-page .about-hero-btn:active,
.is-about-page .split-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* موضع زر الهيرو (نرفعه لداخل الهيرو ونوسّطه) */
.is-about-page .about-hero-btn{
  position: relative;
  z-index: 60;                  /* فوق الـ overlay */
  left: 50%;
  transform: translateX(-50%);
  margin-top: -60px;            /* اسحبيه لفوق ليدخل في الهيرو */
}

/* ديسكتوب كبير: شَدّة أعلى شوية */
@media (min-width:1200px){
  .is-about-page .about-hero-btn{ margin-top: -68px; }
}

/* موبايل: حجم أخف ومسافة مناسبة */
@media (max-width:768px){
  .is-about-page .about-hero-btn{
    margin-top: -50px;
    padding: 9px 16px;
    font-size: 14px;
  }
}


/* ===== About: Story (page only) ===== */
/* ===== About: Story — pixel-match (About page only) ===== */
.is-about-page .about-story{
  padding: 24px 0 56px;
  background:#fff;
}

/* صف واحد = صورة يسار (ثابتة) + نص يمين */
.is-about-page .story-row{
  /* نخلي اتجاه الصف من اليسار لليمين عشان العمود الأول يبقى الصورة */
  direction: ltr;
  display: grid;
  grid-template-columns: 420px 1fr;   /* عمود الصورة ثابت / عمود النص مرن */
  gap: 118px;
  align-items: center;
  margin: 0 0 42px;
}

/* الصورة: كادر ناعم + ظل خفيف */
.is-about-page .story-img{ order:1; }
.is-about-page .story-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  object-fit: cover;
}

/* عمود النص: نرجّع اتجاهه RTL ومحاذاة يمين */
.is-about-page .story-text{
  order:2;
  direction: rtl;
  text-align: right;
  max-width: 680px;                 /* عرض مريح للنص زي التصميم */
}

/* العنوان الأخضر */
.is-about-page .story-title{
  margin: 0 0 14px;
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 40px);
  color: var(--acc, #35D061);
  letter-spacing: .2px;
}

/* الفقرات */
.is-about-page .story-body{
  color:#1a1a1a;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 2.05;
}

/* لو استخدمتي صفوف كتير */
.is-about-page .story-row:last-child{ margin-bottom: 0; }

/* ===== Mobile / Tablet ===== */
@media (max-width: 900px){
  .is-about-page .story-row{
    direction: rtl;                /* نرجع الاتجاه الطبيعي */
    grid-template-columns: 1fr;    /* عمود واحد */
    gap: 16px;
    margin: 0 0 28px;
  }
  .is-about-page .story-img{ order:1; }
  .is-about-page .story-text{
    order:2;
    text-align: center;
    max-width: none;
  }
  .is-about-page .story-img img{
    width: 90%;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
  }
  .is-about-page .story-title{ margin-bottom: 10px; }
}

/* شاشات كبيرة جدًا: مساحة تنفّس بسيطة */
@media (min-width: 1280px){
  .is-about-page .about-story .container{
    max-width: 1180px;
  }
}

/* ضبط المسافات لو زودتي صفوف */
.is-about-page .story-row:last-child{ margin-bottom: 0; }





/* ===== About Story: desktop tweak for the 2nd row only ===== */
@media (min-width: 901px){
  /* وسطّي المحتوى رأسيًا داخل الصف */
  .is-about-page .about-story .story-row:nth-of-type(2){
    align-items: center;         /* يضمن المحاذاة الرأسية */
    margin-top: 6px;             /* لمسة خفيفة لو عايزة تقرّبيه من اللي فوق */
  }

  /* ادخّل الصورة شوية لجوه (يمين) مقارنة بالصورة اللي فوقها */
  .is-about-page .about-story .story-row:nth-of-type(2) .story-img{
    transform: translateX(84px); /* زوّدي/قلّلي القيمة حسب ما تحبي: 16–32px */
  }

  /* تأكيد تمركز النص رأسيًا جنب الصورة */
  .is-about-page .about-story .story-row:nth-of-type(2) .story-text{
    align-self: center;
  }
}



/* رفع نص الصف الثاني لأعلى قليلًا (ديسكتوب فقط) */
@media (min-width: 901px){
  /* لو عندك الكتلة السابقة، دي بتكمّلها */
  .is-about-page .about-story .story-row:nth-of-type(2){
    align-items: center;
  }

  /* ارفع النص لفوق */
  .is-about-page .about-story .story-row:nth-of-type(2) .story-text{
    position: relative;
    top: -22px;              /* جرّبي -16px / -22px / -28px حسب ما تحبي */
  }

  /* (اختياري) ادخال الصورة شوية لجوة زي ما عملنا قبل */
  /* .is-about-page .about-story .story-row:nth-of-type(2) .story-img{
    transform: translateX(24px);
  } */
}





/*--------------------------------------------------------------------*/
/* ===== Contact Page (only) ===== */
/* ========== Contact Page ========== */

/* خلي الهيدر فوق الهيرو في صفحة تواصل بس */
.is-contact-page .site-header{
  position:absolute; inset:0 0 auto 0; z-index:50;
}
.is-contact-page .header-bg{
  height:64px;
  /* نفس ستايل الهيدر اللي على التصميم */
  background:rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(2px);
}

/* Hero */
.contact-hero{
  position:relative;
  min-height:clamp(520px, 86vh, 820px);
  background-image:var(--bg);
  background-size:cover; background-position:center;
  display:grid; place-items:center; margin:0; text-align:center;
}
.contact-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.28));
}
.contact-hero__inner{
  position:relative; z-index:2;
  padding-top:90px;          /* علشان الهيدر الشفاف */
  width:min(1120px,92vw); margin-inline:auto;
}
.contact-hero__title{
  margin:0 0 6px; color:#fff; font-weight:900;
  font-size:clamp(32px,6vw,72px); letter-spacing:.5px;
}
.contact-hero__sub{
  margin:0 0 16px; color:#fff; font-weight:800;
  font-size:clamp(18px,3vw,36px);
}
.hero-btn{
  display:inline-block; padding:.7rem 1.1rem;
  border-radius:12px; background:#89d149; color:#fffcfc; font-weight:800;
  text-decoration: none;
}

/* ===== باقي القسم السفلي (مجرد ضبط بسيط إن أحببتِ) ===== */
.contact-split-section{padding:36px 0; background:#f6f6f6}
.contact-split-section .container{width:min(1120px,92vw); margin-inline:auto}
.contact-split{
  display:grid; grid-template-columns:2fr 0fr; gap:28px;
  align-items:start; background:#fff; border-radius:16px; padding:24px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
}
@media (max-width: 900px){
  .contact-hero__inner{padding-top:96px}
  .contact-split{grid-template-columns:1fr; gap:18px; padding:18px}
}


/* ========= Contact header on top of hero (no gap) ========= */
.is-contact-page .site-header{
  position:absolute !important;      /* خليه يركب فوق الهيرو */
  inset:0 0 auto 0 !important;
  z-index:50;
  background:transparent !important; /* مايبقاش في شريط أبيض */
}
.is-contact-page .header-bg{
  height:64px;
  background:rgba(0,0,0,.35) !important;     /* نفس تصميم الهوم */
  backdrop-filter:saturate(120%) blur(2px) !important;
}

.is-contact-page .contact-hero{ margin-top:0 !important; }

.is-contact-page .contact-hero__overlay{
  background:linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18)) !important;
}

.is-contact-page .contact-hero__inner{ padding-top:90px; }  /* سيبيه كما هو لعناوين الهيرو */

.main-nav a
{
    color:#ffffff;
}
 
 
 /* ===== Contact – Headings ===== */
.is-contact-page .contact-split-section{padding:22px 0 46px;background:#fff}
.is-contact-page .contact-head{text-align:center;margin:0 0 18px}
.is-contact-page .contact-h-title{
  margin:0 0 6px; font-weight:800; color:#222; font-size:28px;
}
.is-contact-page .contact-h-sub{
  margin:0; color:#666; font-size:18px; line-height:1.9;
}

/* ===== Contact – Panel (white card + 2 columns + vertical line) ===== */
.is-contact-page .contact-panel{
  background:#fff;
  border:1px solid #ececec;
  border-radius:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.04);
  padding:22px 26px;
  display:grid;
  grid-template-columns: 320px 1px minmax(420px, 1fr); /* يمين معلومات | فاصل | يسار فورم */
  gap:28px;
  align-items:start;
}

/* الفاصل الرأسي */
.is-contact-page .v-sep{display:block;width:1px;height:100%;background:#e5e5e5}

/* ===== Aside Right (تواصل معنا) ===== */
.is-contact-page .ci-title{margin:0 0 12px;font-weight:800;color:#35D061;font-size:22px}
.is-contact-page .ci-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.is-contact-page .ci-list li{
  display:flex; align-items:center; gap:12px; direction:rtl; color:#111;
}
.is-contact-page .ci-list img{width:18px;height:auto;object-fit:contain;opacity:.9}
.is-contact-page .ci-list a{color:#111}
.is-contact-page .ci-list a:hover{color:#35D061}

/* ===== Form Left (CF7) — exactly like mock ===== */
.is-contact-page .contact-form .wpcf7{direction:rtl}
.is-contact-page .contact-form .cf7-grid{display:grid;gap:12px}
.is-contact-page .contact-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.is-contact-page .wpcf7-form-control{
  width:100%!important; border:1px solid #E6E6E6; background:#fff;
  border-radius:12px; padding:12px 14px; font-size:15px; color:#222;
}
.is-contact-page .wpcf7 input[type="text"],
.is-contact-page .wpcf7 input[type="email"],
.is-contact-page .wpcf7 input[type="tel"]{height:48px}
.is-contact-page .wpcf7 textarea{min-height:210px;resize:vertical}

/* زر كامل العرض */
.is-contact-page .wpcf7 input[type="submit"]{
  display:block; width:100%;
  background:#35D061; color:#111;
  border:0; border-radius:12px; padding:12px 18px;
  font-weight:800; font-size:16px; cursor:pointer;
}
.is-contact-page .wpcf7 input[type="submit"]:hover{filter:brightness(1.04)}

/* ===== Mobile ===== */
@media (max-width: 900px){
  .is-contact-page .contact-panel{grid-template-columns:1fr;gap:18px;padding:18px}
  .is-contact-page .v-sep{display:none}
  .is-contact-page .contact-h-title{font-size:24px}
  .is-contact-page .contact-h-sub{font-size:16px}
  .is-contact-page .contact-form .row-2{grid-template-columns:1fr}
  .is-contact-page .ci-title{text-align:center}
  .is-contact-page .ci-list{justify-items:center}
}

 
 
 /* === Contact submit button (white bg + green text, auto width) === */
.is-contact-page .cf7-grid .wpcf7-submit{
  width:auto;                   /* مش بطول السطر */
  justify-self:start;           /* ييجي ناحية اليمين مع RTL */
  background:#fff;              /* خلفية بيضاء */
  color:#35D061;                /* نص أخضر */
  border:2px solid #35D061;     /* حدّ أخضر */
  border-radius:12px;
  padding:10px 22px;
  font-weight:800;
  cursor:pointer;
  transition:all .2s ease;
}

/* Hover: نعكس الألوان */
.is-contact-page .cf7-grid .wpcf7-submit:hover{
  background:#35D061;
  color:#111;                   /* نص غامق فوق الأخضر */
  border-color:#35D061;
}

/* لو عندك قاعدة قديمة بتخليه بعرض كامل، عطّليها */
.is-contact-page .wpcf7 input[type="submit"]{
  width:auto;
}



/* ============ Contact — tuning ============ */

/* تصغير المسافة بين عمود الفورم وعمود "تواصل معنا" */
.is-contact-page .contact-split{
  grid-template-columns: 1fr 340px;   /* عمود يمين أضيق شوية */
  column-gap: 22px;                   /* مسافة أصغر بينهم */
}

/* تقليل المسافات بين الحقول */
.is-contact-page .cf7-grid{
  display: grid;
  gap: 8px;                           /* مسافة صغيرة بين حقول الاسم/الهاتف/البريد */
}
.is-contact-page .cf7-grid input[type="text"],
.is-contact-page .cf7-grid input[type="email"],
.is-contact-page .cf7-grid input[type="tel"],
.is-contact-page .cf7-grid textarea{
  height: 40px;                       /* حقول أقصر */
  padding: 8px 12px;
  border-radius: 10px;
}
.is-contact-page .cf7-grid textarea{
  min-height: 140px;
}

/* زر "إرسل الرسالة" صغير، أبيض الخلفية، نصه أخضر */
.is-contact-page .cf7-grid .wpcf7-submit{
  width: auto;
  align-self: start;
  background: #fff;
  color: #35D061;
  border: 2px solid #35D061;
  border-radius: 10px;
  padding: 6px 14px;                  /* حجم صغير */
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.is-contact-page .cf7-grid .wpcf7-submit:hover{
  background: #35D061;
  color: #111;
}

/* إزالة الunderline من روابط التواصل + لون هوفر */
.is-contact-page .contact-info-side .ci-list a{
  text-decoration: none;
  color: inherit;
}
.is-contact-page .contact-info-side .ci-list a:hover{
  color: #35D061;
}

/* الخط الفاصل تحت روابط "تواصل معنا" */
.is-contact-page .contact-info-side .ci-list{
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.is-contact-page .contact-info-side .ci-list::after{
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,.18);       /* نفس الخط الي باين في التصميم */
  margin-top: 12px;
}

/* موبايل: نخلي العرض مريح */
@media (max-width: 768px){
  .is-contact-page .contact-split{
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .is-contact-page .cf7-grid .wpcf7-submit{
    width: 100%;
    justify-self: stretch;
  }
}



/* === Hero عام للأرشيف والسينجل === */
.is-products-page .site-header,
.post-type-archive-ag_product .site-header,
.single-ag_product .site-header { position:absolute; inset:0 0 auto 0; z-index:50; }

.p-hero{ position:relative; min-height:clamp(420px,78vh,780px);
  background:var(--bg) center/cover no-repeat; display:grid; place-items:center; text-align:center; }
.p-hero__ovl{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.p-hero__inner{ position:relative; z-index:2; width:min(1120px,92vw); margin-inline:auto; color:#fff; }
.p-hero__title{ margin:0 0 8px; font-size:clamp(36px,6.2vw,72px); font-weight:900; color:#35D061; }
.p-hero__sub{ margin:0 0 16px; font-size:clamp(18px,2.8vw,26px); }
.p-hero__btn{ display:inline-block; padding:.6rem .95rem; background:#35D061; color:#111; border-radius:12px; font-weight:800; }

/* Intro */
.p-intro{ background:#fff; padding:24px 0; }
.p-intro__text{ width:min(1120px,92vw); margin:0 auto; text-align:center; color:#222; line-height:1.9; }

/* Products list */
.p-list{ padding:18px 0 42px; background:#f6f6f6; }
.p-list .container{ width:min(1120px,92vw); margin-inline:auto; }
.p-row{ display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:center;
  background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:18px; margin:18px 0; }
.p-row.row--rev{ grid-template-columns:1fr 1.2fr; }
.p-row__img img{ width:100%; height:auto; display:block; border-radius:10px; }
.p-row__title{ margin:0 0 8px; font-size:clamp(18px,2.4vw,22px); color:#0a0a0a; font-weight:800; }
.p-row__desc{ color:#333; line-height:1.9; margin-bottom:10px; }
.btn-ghost{ display:inline-block; padding:.5rem .9rem; border:1.5px solid #35D061; color:#35D061; border-radius:10px; font-weight:800; }
.btn-ghost:hover{ background:#35D061; color:#111; }
.p-archive-nav{ text-align:center; margin-top:18px; }

/* Single */
.prod-single{ background:#fff; padding:30px 0 50px; }
.prod-single__wrap{ width:min(1120px,92vw); margin-inline:auto; display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.prod-card img{ width:100%; height:auto; border-radius:12px; margin-bottom:12px; }

@media (max-width: 900px){
  .p-row, .p-row.row--rev{ grid-template-columns:1fr; text-align:right; }
  .p-row__img{ order:-1; }                /* الصورة فوق في الموبايل */
  .prod-single__wrap{ grid-template-columns:1fr; }
}






/*-----------------------------------*/

/* ====== صفحة أرشيف منتجاتنا ====== */

.products-archive {
    background: #f5f5f5;
    padding-bottom: 60px;
    font-family: inherit;
}

.products-archive .wrap {
    width: min(1100px, 92%);
    margin-inline: auto;
}

/* هيرو */
.products-hero {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.products-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.products-hero__inner {
    position: relative;
    z-index: 1;
}

.products-hero__title {
    font-size: 32px;
    font-weight: 700;
    color: #89D149; /* الأخضر من الديزاين */
    margin-bottom: 8px;
}

.products-hero__subtitle {
    font-size: 18px;
    margin-bottom: 18px;
}

/* أزرار */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn--hero {
    background: #89D149;
    color: #fff;
}

.btn--card {
    background: #89D149;
    color: #fff;
    margin-top: 14px;
}

/* سكشن النص */
.products-intro {
    background: #fff;
    padding: 30px 0 10px;
}

.products-intro__text {
    font-size: 15px;
    line-height: 1.9;
    text-align: right;
    color: #333;
}

/* كروت المنتجات */
.products-list {
    padding: 20px 0 0;
}

.product-card {
    margin-bottom: 25px;
}

.product-card__inner {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 18px 18px 20px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.product-card__image {
    flex: 0 0 33%;
}

.product-card__image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.product-card__content {
    flex: 1;
    text-align: right;
}

.product-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.product-card__text {
    font-size: 14px;
    line-height: 1.9;
    color: #555;
}

/* موبايل */
@media (max-width: 768px) {

    .products-hero {
        min-height: 260px;
        padding: 40px 10px;
    }

    .products-hero__title {
        font-size: 24px;
    }

    .products-hero__subtitle {
        font-size: 15px;
    }

    .product-card__inner {
        flex-direction: column;
        text-align: center;
    }

    .product-card__content {
        text-align: center;
    }

    .btn--card {
        margin-inline: auto;
    }
}





/*6666666666666666666666*/


/* ===== أرشيف منتجاتنا – تنسيقات عامة ===== */
.products-archive-page {
    background: #f3f3f3;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
}

/* ===== هيدر شفاف فى أرشيف منتجاتنا ===== */
body.post-type-archive-our_products .site-header,
body.post-type-archive-our_products .site-header .ast-main-header-wrap,
body.post-type-archive-our_products .ast-primary-header,
body.post-type-archive-our_products .main-header-bar,
body.post-type-archive-our_products .ast-primary-header-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    z-index: 999;
}

/* نخلى الكونتينر كمان شفاف */
body.post-type-archive-our_products .site-header .ast-container {
    background: transparent !important;
}

/* لون روابط المنيو */
body.post-type-archive-our_products .main-header-menu > .menu-item > a {
    color: #ffffff;
}

/* لينك منتجاتنا يبقى أخضر فاتح */
body.post-type-archive-our_products .main-header-menu > .current-menu-item > a {
    color: #7dfd7a;
}

/* ===== هيرو منتجاتنا ===== */
.products-archive-page {
    background: #f3f3f3;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
}

.products-hero {
    position: relative;
    width: 100%;
    min-height: 800px;              /* زودنا ارتفاع الهيرو */
    padding: 160px 0 180px;         /* مساحة أكبر فوق وتحت عشان الصورة تبان */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    background-color: #000;
    background-image: url('<?php echo get_template_directory_uri(); ?>/assets/image/product.webp');
    background-size: cover;
    background-position: center center;  /* نخليها فى النص بالظبط */
    overflow: hidden;
}


.products-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    
}

.products-hero-inner {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
}

.products-hero-title {
    font-size: 60px;
    font-weight: 800;
    color: #89d149;
    margin: 0 0 8px;
}

.products-hero-subtitle {
    font-size: 55px;
    margin: 0 0 18px;
}

/* لو عندك البادج الخضرا دى */
.products-hero-badge {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 999px;
    background: #89d149;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* موبايل */
@media (max-width: 768px) {
    .products-hero {
        min-height: 520px;
        padding: 120px 20px 110px;
        background-position: center;
    }

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

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



@media (max-width: 768px) {
    .products-hero {
        min-height: 580px;
        padding: 130px 20px 130px;
        background-position: center center;
    }

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

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


/* ===== سكشن النص فوق الكروت ===== */
.products-intro {
    background: #f5f5f5;
    padding: 40px 0 25px;
}

.products-intro .container {
    max-width: 900px;
}

.products-intro p {
    margin: 0;
    text-align: center;
    font-size: 24px;
    line-height: 2;
    color: #333;
}

/* ===== سكشن الكروت ===== */
.products-list {
    background: #fff;
    padding: 0 0 60px;
}

/* الكارد الأساسى */
.product-card-row {
    background: #f5f5f5;
    border-radius: 24px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 24px;
}

/* الكارد التانى (العكس) */
.product-card-row--reverse {
    flex-direction: row-reverse;
}

/* صورة المنتج */
.product-card-image {
    flex: 0 0 280px;
    max-width: 280px;
}

.product-card-image img {
    display: block;
    width: 100%;
    height: auto;          /* عشان ما تتفردش وتبوظ الجودة */
    border-radius: 18px;
}

/* محتوى النص */
.product-card-content {
    flex: 1;
    text-align: right;
}

.product-card-title {
    font-size: 52px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #333;
}

.product-card-text {
    font-size: 22px;
    line-height: 2;
    color: #555;
    margin: 0 0 20px;
}

/* زرار اطلب المنتج */
.product-card-actions {
    text-align: right;
}

.btn-primary-products {
    display: inline-block;
    padding: 9px 22px;
    background: #84ca46;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.btn-primary-products:hover {
    background: #008f45;
}

/* ===== موبايل ===== */
@media (max-width: 768px) {
    .products-intro {
        padding: 30px 0 20px;
    }

    .products-intro p {
        font-size: 15px;
    }

    .product-card-row,
    .product-card-row--reverse {
        flex-direction: column;
        text-align: center;
    }

    .product-card-image {
        max-width: 260px;
        margin-inline: auto;
    }

    .product-card-content {
        text-align: right; /* النص يفضل يمين بالعربى */
    }

    .product-card-actions {
        text-align: center;
    }
}



/* ===== سكشن التواصل – فل ويدث ===== */
..products-contact {
    background: #f5f5f5;
    padding: 0 0 60px;
}

/* فل ويدث فعلاً من غير فراغ على الجوانب */
.products-contact-wrapper {
    width: 100%;
    max-width: 100%;
}

.products-contact-inner {
    width: 100%;
    max-width: 100%;
    margin: 0; /* نشيل الـ auto اللى بتعمل فراغات */
    display: flex;
    align-items: stretch;
    background: #f5f5f5!important;
    border-radius: 0;              /* لو عايزة الزوايا تمسك حواف الشاشة */
    overflow: hidden;
    border: none;                  /* اختياري لو مش عايزة إطار */
    box-shadow: none;              /* اختياري لو مش عايزة ظل */
}


/* جزء الصورة اليسار */
.products-contact-image {
    flex: 0 0 22%;
}

.products-contact-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* جزء الفورم اليمين */
.products-contact-form-side {
    flex: 1;
    background: #f5f5f5; 
    padding: 32px 38px;
    text-align: right;
}

.products-contact-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px;
    color: #333;
    text-align: center;
}

/* فورم */
.products-contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.products-contact-row {
    width: 100%;
}

/* سطر فيه حقلين جنب بعض */
.products-contact-row--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.products-contact-field input,
.products-contact-field textarea {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #d5d5d5;
    padding: 9px 10px;
    font-size: 14px;
    outline: none;
    background: #ffffff;
}

.products-contact-field textarea {
    resize: vertical;
    min-height: 90px;
}

/* زرار الإرسال */
.products-contact-submit {
    text-align: justify;
    margin-top: 6px;
}

.btn-contact-submit {
    border: 2px solid #00a651;
    background: #ffffff;
    color: #00a651;
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-contact-submit:hover {
    background: #00a651;
    color: #ffffff;
}

/* ===== موبايل ===== */
@media (max-width: 768px) {

    .products-contact-inner {
        flex-direction: column;
    }

    .products-contact-image {
        flex: 0 0 auto;
        height: 220px;
    }

    .products-contact-image img {
        height: 100%;
    }

    .products-contact-form-side {
        padding: 22px 18px 26px;
    }

    .products-contact-row--two {
        grid-template-columns: 1fr; /* الاسم فوق والهاتف تحته فى الموبايل */
    }

    .products-contact-submit {
        text-align: center;
    }
}


@media (max-width: 769px) {
/* نخلى كروت المنتجات تقرب من عرض الشاشة */
.products-list > .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 20px; /* مسافة خفيفة من الجناب عشان ما تلزقش فى حروف الشاشة */
}



.product-card-image {
    flex: 0 0 35%;      /* كانت تقريبًا 280px – خليناها حوالى تلت الكارد */
    max-width: 420px;   /* حد أقصى كويس للديسكتوب */
}

.product-card-image img {
    display: block;
    width: 100%;
    height: auto;       /* عشان الجودة ما تباظش */
    border-radius: 18px;
}


@media (max-width: 768px) {
    .product-card-image {
        max-width: 320px;
        margin-inline: auto;
    }
    
    .product-card-title
 {
    font-size: 27px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #333;
    align-items: center;
    text-align: center;
}

.product-card-text {
    font-size: 17px;
    line-height: 2;
    color: #555;
    margin: 0 0 20px;
}


    .products-contact-image img
 {
        height: 106%;
    }
    
        .products-contact-image {
        flex: 0 0 auto;
        height: 270px;
    }


}


}




.products-list > .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 20px;
}
/*666666666666666666666*/




/* ===== هيدر شفاف فوق هيرو منتجاتنا – صفحة المنتجات فقط ===== */
.is-products-page .site-header,
.is-products-page .site-header .ast-main-header-wrap,
.is-products-page .ast-primary-header,
.is-products-page .main-header-bar,
.is-products-page .ast-primary-header-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    z-index: 999;
}

/* نخلى الكونتينر شفاف برضه */
.is-products-page .site-header .ast-container {
    background: transparent !important;
}

/* لون روابط المنيو */
.is-products-page .main-header-menu > .menu-item > a {
    color: #ffffff;
}

/* منيو "منتجاتنا" تبقى خضرا */
.is-products-page .main-header-menu > .current-menu-item > a {
    color: #7dfd7a;
}



/* جزء الصورة فى سكشن التواصل */
.products-contact-image {
    flex: 0 0 22%;      /* ممكن تغيريها لـ 35% لو حابة أصغر */
    max-width: 22%!important;
}

.products-contact-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* بدل cover عشان الصورة متقطعش */
    object-position: center;
}



@media (max-width: 768px) {

    .products-contact-inner {
        flex-direction: column;
    }

    .products-contact-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        height: auto;          /* نخلى الارتفاع حسب الصورة */
    }

    .products-contact-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .products-contact-form-side {
        padding: 22px 18px 26px;
    }

    .products-contact-row--two {
        grid-template-columns: 1fr; /* الاسم فوق التليفون فى الموبايل */
    }

    .products-contact-submit {
        text-align: center;
    }
}