:root {
  --bg: #0b0b0b;
  --card: #151515;
  --muted: #b3b3b3;
  --text: #f1f1f1;
  --brand: #ff8a00;
  --brand-2: #fbaf3b;
  --radius: 18px;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { height: 100%; max-width: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Cairo", "Tajawal", sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 138, 0, 0.12) 0%, transparent 60%),
              radial-gradient(900px 500px at -10% 0%, rgba(251, 175, 59, 0.1) 0%, transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; overflow-x: hidden; }

/* ====== Navbar ====== */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 44px; }
.logo-text {
  font-size: 26px; font-weight: 900; text-transform: uppercase;
  background: #000;, var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-links ul { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; }
.nav-links a {
  padding: 8px 12px;
  border-radius: 12px;
  color: #eaeaea;
  transition: 0.25s;
}

/* البرتقاني يتحرك مع الماوس بس */
.nav-links a:hover {
  background: #000;, rgba(251, 175, 59, 0.12));
  border: 1px solid rgba(255, 138, 0, 0.35);
}

/* نلغي أي شكل خاص بـ active */
.nav-links a.active {
  background: none;
  border: none;
}


/* Buttons */
.btn {
  display: inline-block; padding: 10px 14px; border-radius: 12px; font-weight: 600;
  border: 1px solid var(--brand-2); background: transparent; color: #fff; transition: 0.25s;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover {
  background: var(--brand-2) !important; color: #000 !important; border-color: var(--brand-2) !important;
}
.btn-lang {
  background: rgba(255, 138, 0, 0.1); color: var(--brand-2); border-color: var(--brand); font-size: 14px;
}
.menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; }
.menu-toggle span { width: 24px; height: 2px; background: #eaeaea; }
.navbar-buttons { display: flex; gap: 10px; align-items: center; }

@media (max-width: 980px) {
  .nav-links {
    position: fixed; inset-inline: 0; top: 61px; background: rgba(12, 12, 12, 0.96);
    padding: 14px 20px; display: none; height: calc(100vh - 61px); overflow-y: auto;
  }
  .nav-links.open { display: block; }
  .nav-links ul { flex-direction: column; }
  .menu-toggle { display: flex; }
  .logo-text { display: none; }
}

/* ============================================================
   🔥🔥🔥 HERO & ABOUT - STRICT FIXED SIZE (450px) 🔥🔥🔥
   ============================================================ */
.hero { padding-block: 40px; }
.about-brief { padding-block: 36px; }

.hero-card,
.about-card {
  display: grid;
  /* تقسيم الصفحة: 60% نص - 40% صورة */
  grid-template-columns: 1.4fr 1fr; 
  gap: 0; /* صفر مسافات عشان الصورة تلزق */
  
  /* 🔥 قفل الارتفاع: لازم 450px عشان يبقوا قد بعض 🔥 */
  height: 450px; 
  
  background: #000;, rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  
  /* لغينا البادينج من الكارت عشان الصورة تاخد الحافة */
  padding: 0; 
  
  box-shadow: var(--shadow);
  overflow: hidden; /* عشان الكيرف بتاع الحواف */
}

/* تنسيق منطقة النص */
.hero-content-side,
.about-card > div:first-child { 
  min-width: 0;
  height: 100%; /* واخدة الطول كله */
  
  /* 🔥 الحل السحري للكلام: لو زاد نعمل سكرول خفي 🔥 */
  overflow-y: auto; 
  
  padding: 40px; /* مسافة داخلية مريحة */
  display: flex;
  flex-direction: column;
  justify-content: center; /* توسيط رأسي */
}

/* إخفاء شكل شريط التمرير (Scrollbar) للنص عشان الشكل يفضل شيك */
.hero-content-side::-webkit-scrollbar,
.about-card > div:first-child::-webkit-scrollbar { width: 0; background: transparent; }

.hero-content-side h1,
.about-brief h2 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; font-weight: 900; line-height: 1.2; }
#heroSubtitle, #aboutSub { margin: 0 0 24px; color: var(--muted); font-size: 1.05rem; }
.hero-cta, .values { display: flex; gap: 12px; flex-wrap: wrap; }
.chip { border: 1px solid rgba(255, 255, 255, 0.12); padding: 6px 10px; border-radius: 99px; font-size: 13px; background: rgba(255, 138, 0, 0.08); }

/* ============================================================
   🔥🔥🔥 IMAGES: FILL SPACE 100% (COVER) 🔥🔥🔥
   ============================================================ */

.hero-illus, 
.about-img {
  display: block;
  width: 100%;
  
  /* 🔥 الصورة هتاخد الـ 450 بيكسل كلهم غصب عنها 🔥 */
  height: 100%; 
  min-height: 450px;
  
  /* Cover: تفرش في المكان كله بدون أي فراغ أسود */
  object-fit: cover; 
  object-position: center top; /* تركيز على الجزء العلوي من الصورة */
  
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
   🔥🔥🔥 MOBILE LAYOUT (NO BLACK GAPS) 🔥🔥🔥
   ============================================================ */
@media (max-width: 900px) {
  
  .hero-card, 
  .about-card {
    display: flex !important;
    flex-direction: column-reverse; 
    text-align: center;
    height: auto; /* في الموبايل الطول حر */
  }
  
  .hero-content-side,
  .about-card > div:first-child {
      padding: 30px 20px; /* تظبيط مسافات الموبايل */
      overflow-y: visible; /* إلغاء السكرول في الموبايل */
  }

  .hero-cta, .values { justify-content: center; }

  /* الصور في الموبايل */
  .hero-illus, 
  .about-img {
    width: 100%;
    height: 280px; /* ارتفاع ثابت للصورة في الموبايل */
    min-height: auto;
    object-fit: cover; /* تملى المكان برضه */
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
}


/* ====== News Section (FLEX & FULL) ====== */
.news { padding-block: 40px; }
.news h2 { text-align: center; margin-bottom: 30px; font-size: clamp(28px, 4vw, 42px); color: var(--brand-2); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.news-card {
  background: #000;, rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; 
  flex-direction: column;
  /* الطول 100% من الصف عشان كلهم يبقوا قد بعض */
  height: 100%; 
}

.news-card img {
  width: 100%;
  height: 220px;      
  object-fit: fill; /* تملى المكان */
  display: block;
}

.news-card h3 { margin: 14px 14px 6px; font-size: 1.3rem; }
.news-card-sub { margin: 0 14px 10px; color: var(--muted); font-size: 0.95rem; flex: 1; }
.news-card a { margin: 12px 14px 16px; font-weight: 700; color: #ffd199; margin-top: auto; display: block; }

@media (max-width: 900px) {
  .news-card img {
    height: 220px !important;
    object-fit: fill !important;
  }
}

@media (max-width: 980px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }

/* ====== Home Products Slider (Fixing Layout) ====== */

.home-products {
  padding: 40px 0;
}

/* العنوان + زر استكشف المنتجات */
.home-products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.home-products-more {
  font-size: 0.9rem;
  color: var(--brand-2);
  font-weight: 700;
}

/* الكونتينر اللي فيه التراك + السهام */
.home-products-scroller {
  position: relative;
  max-width: 980px;        /* عرض السلايدر نفسه */
  margin-inline: auto;     /* يبقى في نص الصفحة تحت العنوان */
}

/* الشريط اللي بيتحرك يمين/شمال */
.home-products-track { 
  display: flex; 
  gap: 16px; 
  overflow-x: auto;              /* السكروول يمين/شمال */
  padding: 10px 6px; 
  scroll-behavior: smooth; 
  scroll-snap-type: x mandatory; 

  /* إخفاء شريط التمرير */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.home-products-track::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.home-products-track::-webkit-scrollbar-thumb {
  background: transparent;
}

/* كروت المنتجات في الهوم */
.product-card-home {
  scroll-snap-align: start;
  min-width: 300px;
  max-width: 300px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.product-card-home .thumb {
  width: 100%;
  height: 240px;
  background: #000;
}

.product-card-home .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card-home .body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-card-home h3 {
  font-size: 1.1rem;
  margin: 0;
}

.home-product-more {
  font-weight: 700;
  color: var(--brand-2);
  font-size: 0.9rem;
  margin-top: 4px;
}

/* ===== سهام نتفليكس على حافة الكروت ===== */

.home-products-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  background: none;
  border: none;
  padding: 0;
  margin: 0;

  color: #ffffff;
  font-size: 52px;       /* حجم كبير زي نتفليكس */
  font-weight: 300;
  line-height: 0.7;
  cursor: pointer;
}
/* تكبير السهم عند الهوفر */
.home-products-arrow:hover {
  transform: translateY(-50%) scale(1.45);
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* السهمين على حافة سلايدر الهوم برودكتس نفسه */
.home-products-arrow.prev {
  left: 0;               /* يلمس أول الكروت من الناحية دي */
}

.home-products-arrow.next {
  right: 0;              /* يلمس آخر الكروت من الناحية التانية */
}

/* ديسكتوب: الكارت يكون أفقي */
@media (min-width: 900px) {
  .product-card-home {
    min-width: 600px;
    max-width: 600px;
    height: 300px;
    flex-direction: row;
    flex-shrink: 0;
  }
  .product-card-home .thumb {
    flex: 0 0 45%;
    height: 100%;
  }
  .product-card-home .body {
    flex: 1;
    justify-content: center;
  }
}

/* موبايل: نفس الفكرة لكن عرض أصغر شوية */
@media (max-width: 900px) {
  .home-products-arrow {
    font-size: 46px;   /* أكبر من 38 القديمة */
    padding: 22px;     /* نكبر الهت بوكس كمان للموبايل */
  }

  /* تكبير عند الضغط في الموبايل */
  .home-products-arrow:active {
    transform: translateY(-50%) scale(1.4);
    opacity: 1;
    transition: transform 0.15s ease;
  }
}

.contact-card p,
.contact-card span,
.contact-card a,
#contactHeading,
#contactTitle {
  color: #f0f0f0 !important;   /* لون فاتح يظهر على الخلفية */
}

.contact-card a.btn {
  border: 1px solid var(--brand);
  color: var(--brand);
}

.contact-card a.btn:hover {
  background: var(--brand);
  color: #000;
}
/* تكبير خط صفحة اتصل بنا */
.contact-page h1,
.contact-page .page-title {
  font-size: 2.2rem !important;
}

.contact-page .page-subtitle {
  font-size: 1.4rem !important;
}

.contact-card p {
  font-size: 1.2rem !important;
  line-height: 1.8;
}

.contact-card strong {
  font-size: 1.3rem !important;
}

.contact-card span {
  font-size: 1.2rem !important;
}

.contact-card a.btn {
  font-size: 1.2rem !important;
}

/* ====== Footer ====== */
.footer { padding-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 18px; background: #000;, rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 24px; }
.footer h3, .footer h4 { margin-top: 0; color: #fff; }
.footer p, .footer li, .footer a { color: #d0d0d0; font-size: 0.95rem; }
.footer ul { padding: 0; list-style: none; display: grid; gap: 8px; }
.footer-bottom { text-align: center; padding: 16px; color: #aaa; font-size: 0.9rem; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* Utils */
.sp-32 { height: 32px; }
html[dir="rtl"] .logo-text { text-transform: none; letter-spacing: normal; font-family: "Cairo", "Tajawal", system-ui, sans-serif; }
/* ====== Fix specific for About Button ====== */
/* جعل زر اعرف المزيد عرضه على قد الكلام فقط وليس بعرض الكارت */
#aboutBtn {
  width: fit-content;      /* العرض على قد المحتوى */
  align-self: flex-start;  /* محاذاة للبداية (يمين في العربي) لمنع التمدد */
}
/* في نهاية ملف style.css - حل مشكلة عرض زر استكشف المنتجات */
#homeProductsMore { 
    /* 1. تقليص العرض ليصبح على قد النص */
    width: fit-content !important; 
    
    /* 2. جعله يتصرف كعنصر كتلة لتمكين توسيطه بـ margin: auto */
    display: block !important;
    
    /* 3. توسيطه أفقياً في منتصف الشاشة بعد تقليص حجمه */
    margin-inline: auto !important;
    
    /* لإضافة مسافة تحت الكارت */
    margin-top: 30px !important; 
}

/* 🛑 تأكيد الكود على الشاشات الأصغر حجماً (إذا كان هناك override) 🛑 */
@media (max-width: 640px) {
    #homeProductsMore {
        width: fit-content !important; 
        display: block !important;
        margin-inline: auto !important;
    }
}
/* في نهاية ملف style.css - حل مشكلة عرض زر استكشف المنتجات في الموبايل */

/* نُلغي التوسيط ونزيحه قليلاً لليسار (شمال) على الشاشات الصغيرة */
/* في نهاية ملف style.css - تحت ميديا كويري الموبايل */
/* في نهاية ملف style.css - تحت ميديا كويري الموبايل */
/* في نهاية ملف style.css - تحت ميديا كويري الموبايل */
@media (max-width: 900px) { /* يستهدف شاشات الموبايل */
    #homeProductsMore {
        /* 1. تصغير حجم الإطار */
        padding: 8px 12px !important; 
        
        /* 2. تقليص العرض وإلغاء التوسيط */
        width: fit-content !important; 
        display: block !important; /* نستخدم block للحفاظ على سطر منفصل */
        
        /* 3. الإلغاء القاطع لكل الهوامش التلقائية التي قد تسحب الزر للمنتصف أو اليمين */
        margin-inline-start: 15px !important; /* مسافة بسيطة من حافة البداية (اليمين في العربي / اليسار في الإنجليزي) */
        margin-inline-end: auto !important; /* نترك النهاية تطفو حتى نهاية الحاوية */
        
        margin-top: 15px !important; 
        
        /* 🛑 تأكيد أن النص داخل الزر نفسه غير ممركز 🛑 */
        text-align: initial !important; 
    }
}
.phone-number {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
}
/* في نهاية ملف style.css - حل مشكلة محاذاة زر استكشف المنتجات */
#homeProductsMore { 
    /* 1. تصغير العرض ليصبح على قد النص */
    width: fit-content !important; 
    
    /* 2. إلغاء أي تنسيق توسيط سابق ووضعه في سطر منفصل */
    display: block !important; 
    
    /* 3. إلغاء الهوامش التلقائية التي تسبب التوسيط */
    margin: 30px 0 0 0 !important;
}

/* 4. تحديد محاذاة النص داخل حاويته (القسم) ليتجه لليسار (شمال) */
.home-products + .about-brief {
    /* بما أن الزر قد تم نقله خارج حاويته الأصلية، سنستهدف العنصر الذي يسبقه أو يليه لتحديد المحاذاة */
    text-align: right !important; /* هذا يتجه لليمين في LTR ولليسار في RTL (نهاية الاتجاه) */
}
/* في نهاية ملف style.css */
body {
    /* ... التنسيقات الأخرى ... */
    overflow-x: hidden; /* يمنع ظهور شريط التمرير الأفقي على مستوى الصفحة */
}
/* ===== Scroll للمجالات العلاجية في صفحة المنتجات ===== */
#area-grid-container {
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 6px 14px;

  max-width: 980px;
  margin-inline: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
#area-grid-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* كارت المجال العلاجي */
#area-grid-container .area-card {
  flex: 0 0 600px;      /* عرض الكارت 600px زي الهوم برودكتس */
  max-width: 600px;
  scroll-snap-align: start;
}

/* ===== Scroll لمنتجات صفحة المنتجات ===== */
#product-grid-container {
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 6px 14px;

  max-width: 980px;
  margin-inline: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
#product-grid-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* كروت المنتجات */
#product-grid-container .product-card {
  flex: 0 0 600px;      /* نفس الفكرة: كارت عريض يتحرك يمين/شمال */
  max-width: 600px;
  scroll-snap-align: start;
}

/* موبايل: نخلي العرض نسبي للشاشة */
@media (max-width: 900px) {
  #area-grid-container .area-card,
  #product-grid-container .product-card {
    flex: 0 0 85vw;
    max-width: 85vw;
  }
}
/* --- توزيع منتجاتنا يمين والزر شمال فوق البني --- */

.home-products-header {
    display: flex;
    justify-content: space-between; /* واحد يمين واحد شمال */
    align-items: center;
    position: relative;
    margin-bottom: 40px; /* مسافة كويسة فوق البني */
}

/* زر استكشف المنتجات */
#homeProductsMore {
    position: relative !important;   /* نرجع الوضع الطبيعى */
    top: 0 !important;
    left: 0 !important;

    margin: 0 !important;
    width: fit-content !important;

    /* عشان يبقى على أقصى الشمال */
    align-self: flex-start !important;
}
/* ترويسه منتجاتنا + استكشف المنتجات */
.home-products-header {
    display: flex;
    justify-content: space-between;  /* واحد يمين.. واحد شمال */
    align-items: center;             /* نفس المستوى عموديًا */
    margin-bottom: 20px;             /* مسافة فوق البني */
}

/* زر استكشف المنتجات يرجع لحالته الطبيعية */
#homeProductsMore {
    position: static !important;     /* عشان يبطل يطلع لفوق */
    margin: 0 !important;            /* بدون توسيط ولا أي حاجة */
    width: fit-content !important;
}
/* === ضبط مستوى زر استكشف المنتجات في الموبايل فقط === */
@media (max-width: 900px) {
    #homeProductsMore {
        margin-top: 12px !important;   /* نزلنا الزر شوية صغيرين */
    }

    .home-products-header {
        align-items: center !important;  /* تأكيد إنهم في نفس الخط */
    }
}