body{
            margin: 0;   
            font-family: "Cairo", sans-serif;
        
        }
  
       
.header{
    background-color: rgb(238, 237, 228); 
    display: flex;
    font-family: "Cairo","Noto Kufi Arabic",sans-serif;
    justify-content: space-between;
    align-items: center;
    padding: 5px 100px;
    position: sticky;
    top: 0;
    z-index: 1000;
    font-weight: bold;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

/* شعار الترويسة: حجم ثابت ومحاذاة مناسبة بحسب اتجاه الصفحة */
.header .brand-logo{ height: 64px; width: 64px; display: block; aspect-ratio: 1 / 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
[dir="ltr"] .header .brand-logo{ margin-right: 10px; }
[dir="rtl"] .header .brand-logo{ margin-left: 10px; }

/* ترتيب روابط الترويسة وتناسقها */
.header{ column-gap: 12px; }
/* تحسين مظهر زر الترجمة */
.language-toggle-container{ display:flex; align-items:center; gap: 8px; }
.header .language-toggle-container{ justify-self:end; }

.contact-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.contact-header-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #f9f9f9;
}

.contact-header-btn.whatsapp svg circle {
  fill: #25D366;
}

.contact-header-btn.call svg path {
  fill: #a88323;
}

.language-toggle-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 9999px; /* pill */
  border: 1px solid #a88323;
  color: #6b4d02;
  background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 0.8vw, 0.8rem);
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(168,131,35,0.15);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.language-toggle-btn::before{
  content: "🌐";
  font-size: 0.9rem;
  opacity: .9;
}

.language-toggle-btn:hover{
  background: #fff7e4;
  border-color: #8c6a1c;
  color: #5a4200;
  box-shadow: 0 3px 10px rgba(168,131,35,0.25);
  transform: translateY(-1px);
}

.language-toggle-btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(168,131,35,0.2);
}

.language-toggle-btn:focus-visible{
  outline: 3px solid #e7c76d;
  outline-offset: 2px;
}

[dir="rtl"] .language-toggle-btn{ letter-spacing: .1px; }

@media (max-width: 768px){
  .language-toggle-btn{
    padding: 5px 10px;
    font-size: .75rem;
  }
}

/* ترتيب روابط الترويسة وتناسقها */
.header-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 4px;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

/* اتجاه الروابط يتبع لغة الصفحة */
[dir="rtl"] .header-links{ direction: rtl; }
[dir="ltr"] .header-links{ direction: ltr; }

/* أزرار موحّدة للترويسة: روابط وأزرار بنفس الشكل */
.header-links a.nav-btn,
.header-links button.nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 9px;
  padding: 4px 10px;
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
  font-weight: 600;
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  line-height: 1.1;
  border: 1px solid #a88323;
  color: #6b4d02;
  background: #ffffff;
  min-height: 26px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Hover & focus states for better feel */
.header-links .nav-btn:hover{
  background: #fff7e4;
  border-color: #8c6a1c;
  color: #5a4200;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.header-links .nav-btn:focus-visible{
  outline: 2px solid #e7c76d;
  outline-offset: 1px;
}
/* Active/current item */
.header-links .nav-btn.active,
.header-links .nav-btn[aria-current="true"],
.header-links .nav-btn[aria-current="page"]{
  background: #fff3d0;
  border-color: #a88323;
}
/* Primary button (احجز الآن) */
.header-links .nav-btn.primary{
  background: #a88323;
  color: #ffffff;
  border-color: #a88323;
}
.header-links .nav-btn.primary:hover{
  background: #8c6a1c;
  border-color: #8c6a1c;
}

.header-links a.nav-btn:hover,
.header-links button.nav-btn:hover{
  background-color: #f2e6cc;
  color: #000;
  border-color: #916f1f;
}

/* زر أساسي مميز (احجز الآن) */
.header-links a.nav-btn.primary,
.header-links button.nav-btn.primary{
  background: #a88323;
  color: #fff;
  border-color: #a88323;
}

.header-links a.nav-btn.primary:hover,
.header-links button.nav-btn.primary:hover{
  background: #916f1f;
  border-color: #916f1f;
}

/* تعطيل خط التوكيد القديم على الروابط عند استخدام أزرار موحّدة */
.header-links a.nav-btn::after{ content: none; }
/* حالة التفعيل: إبراز الزر بإطار أدكن */
.header-links a.nav-btn.active{ border-color: #6b4d02; }

/* الأزرار العامة داخل الترويسة ستُستبدل بصنف nav-btn */

/* Mobile navigation toggle button */
.nav-toggle{
  display: none;
  appearance: none;
  border: none;
  background: rgb(138, 97, 0);
  color: #fff;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

@media (max-width: 768px){
  .header { padding: 5px 20px; }
  .nav-toggle{ display: inline-block; }
  .header-links{ display: none; }
  .header.menu-open .nav-toggle{
    background: rgb(197, 197, 193);
    color: #000;
  }
  .header.menu-open .header-links{
    display: flex;
    position: fixed;
    top: 60px;
    right: 0;
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 12px;
    gap: 10px;
    align-items: stretch;
    font-size: 0.9rem;
    flex-direction: column;
    z-index: 1100;
  }
  .header.menu-open .header-links .nav-btn{
    font-size: inherit;
    width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: no-preference){
  .header.menu-open .header-links{
    transition: transform .25s ease, opacity .25s ease;
    transform: translateY(-6px);
    opacity: 0;
  }
  .header.menu-open .header-links.is-visible{
    transform: translateY(0);
    opacity: 1;
  }
}

/* Navigation: smooth scrolling and anchor offset */
html{
  scroll-behavior: smooth;
}

/* Responsive media defaults */
img{ max-width: 100%; height: auto; display: block; }
video{ max-width: 100%; }

/* Offset sections to account for sticky header height */
section[id],
.gallery-title{
  scroll-margin-top: 90px;
}

   /* Hero video wrapper and overlay */
   .hero-wrapper{
      position: relative;
      width: 100%;
      overflow: hidden;
   }

   .hero-wrapper .bg-video{
      width: 100%;
      height: 60vh; /* visible height, adjusts with viewport */
      object-fit: cover;
      display: block;
   }

   /* Larger screens (laptop/desktop): increase hero video height */
   @media (min-width: 1024px){
      .hero-wrapper .bg-video{ height: 70vh; }
   }

   .hero-overlay{
      position: absolute;
      inset: 0; /* top:0; right:0; bottom:0; left:0 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
      padding: 20px;
      pointer-events: none; /* allow clicks to pass through to controls if any */
      background: linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
   }

   /* Limit text width for readability across sizes */
   .hero-overlay .hero-content{
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
      padding: 0 16px;
      pointer-events: auto; /* allow links/buttons inside to be clickable */
   }

   .hero-overlay h1{
      margin: 0 0 10px 0;
      font-size: clamp(1.6rem, 3.6vw, 3rem);
      line-height: 1.1;
      font-weight: 800;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
   }

   .hero-overlay .hero-desc{
      margin: 0 0 10px 0;
      font-size: clamp(1rem, 2.4vw, 1.35rem);
      line-height: 1.7;
      font-weight: 600;
      text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    }

   .hero-overlay .hero-sub{
      margin: 0;
      font-size: clamp(1rem, 2.2vw, 1.25rem);
      text-shadow: 0 1px 6px rgba(0,0,0,0.6);
   }

   /* Smaller screens: reduce video height and spacing */
   @media (max-width: 600px){
      .hero-wrapper .bg-video{
         height: 45vh;
      }
      .hero-overlay{ padding: 12px; }
      .hero-overlay .hero-content{ padding: 0 10px; }
      .hero-overlay h1{ font-size: clamp(1.4rem, 6vw, 2.1rem); }
      .hero-overlay .hero-desc{ font-size: clamp(0.95rem, 3.8vw, 1.15rem); }
      .hero-overlay .hero-sub{ font-size: clamp(0.9rem, 3.6vw, 1.05rem); }
   }

   .landing-page{
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min, 240px), 1fr));
    gap: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    max-width: 1200px;
    margin: auto;
    padding: 30px;
   }
   
   .landing-page div {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(105, 103, 103, 0.15);
    transition: transform 0.3s ease;
   }
   
   .landing-page div:hover {
    transform: translateY(-5px);
   }
   
   .landing-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
   }
   
   .landing-page img:hover {
    transform: scale(1.05);
   }
.text-1{
  direction: rtl;
  text-align: right;
  margin: 16px auto;
  padding: 16px 18px;
  display: block;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  color: #333;
  max-width: 1000px;
}

.text-1 h2{
  color: #a88323;
  font-weight: 800;
  font-size: clamp(1.3rem, 3.6vw, 1.8rem);
  margin: 0 0 8px;
}

.text-1 p{
  color: #222;
  text-align: right;
  max-width: 100%;
  margin: 0;
  line-height: 1.9;
  font-size: 1rem;
}
   
   .gallery-title {
    text-align: center;
    margin: 30px 0 10px;
   }
   
   .gallery-title h2 {
    color: #a88323;
    font-size: 2rem;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
   }
   
   .gallery-title h2:after {
    content: '';
    position: absolute;
    width: 50%;
    height: 3px;
    background-color: #a88323;
    bottom: 0;
    left: 25%;
   }

   /* فيديوهات */
   .videos-wrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px 30px;
   }

   .main-video{
    width: 100%;
    max-width: 1000px;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   }

   .video-actions{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: end;
    max-width: 1000px;
    margin: 0 auto 20px;
   }

   .video-actions .action-group{
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 12px;
   }

   .video-actions label{
    display: block;
    margin-bottom: 8px;
    color: #6b4d02;
    font-weight: 600;
   }

   .video-actions input[type="text"],
   .video-actions input[type="file"]{
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
   }

   .video-actions button{
    background-color: rgb(138, 97, 0);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
   }

   .video-actions button:hover{ background-color: rgb(197,197,193); color: #000; }
   .video-actions.dragging{ outline: 2px dashed #a88323; outline-offset: 6px; }

   .landing-page video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
   }
   .landing-page .video-card{ cursor: pointer; }
   .landing-page .video-card:hover video{ transform: scale(1.05); }
   /* تمييز البطاقة المشغّلة */
   .video-card.is-playing{ outline: 3px solid #a88323; }
   .video-card.is-playing video{ transform: scale(1.035); }
   .video-card:focus{ outline: 3px solid #a88323; }

/* انتقالات سلسة للمشغّل الرئيسي عند تبديل المصدر */
.main-video{
  transition: opacity 200ms ease, filter 200ms ease;
}
.main-video.is-switching{
  opacity: 0.25;
  filter: blur(2px);
}

/* نسبة أبعاد ثابتة لبطاقات الفيديو لتظهر صغيرة ومتناسقة */
.landing-page .video-card{ aspect-ratio: 16 / 9; }

/* تحسين الاستجابة وتقليل المساحات على الشاشات الأصغر */
@media (max-width: 1024px){
  :root{ --card-min: 210px; }
  .landing-page{ gap: 16px; padding: 24px; }
}
@media (max-width: 768px){
  :root{ --card-min: 170px; }
  .landing-page{ gap: 12px; padding: 18px; }
}
@media (max-width: 480px){
  :root{ --card-min: 140px; }
  .landing-page{ gap: 10px; padding: 14px; }
  .gallery-title h2{ font-size: 1.6rem; }
}

/* نافذة منبثقة للفيديو */
.video-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  transition: opacity 200ms ease;
}
.video-lightbox.is-open{ opacity: 1; pointer-events: auto; }
.video-lightbox .vlb-content{
  /* اجعل الصندوق يتمدد حسب حجم الفيديو الطبيعي مع حدود قصوى */
  max-width: 90vw;
  max-height: 90vh;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.video-lightbox video{
  /* عرض بالحجم الطبيعي مع تقليص عند الحاجة لملاءمة الشاشة */
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  display: block;
  object-fit: contain;
}
.video-lightbox .vlb-close{
  position: absolute;
  top: 16px;
  inset-inline-end: 16px; /* يدعم RTL/LTR */
  background: rgba(255,255,255,0.9);
  border: none;
  color: #000;
  font-size: 24px;
  line-height: 24px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
@media (max-width: 480px){
  .video-lightbox .vlb-content{ width: 95vw; }
}

/* نافذة عرض الصور */
.image-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 2100;
  overflow: auto;
  transition: opacity 200ms ease;
}
.image-lightbox.is-open{ opacity: 1; pointer-events: auto; }
.image-lightbox .ilb-content{ background: transparent; }
.image-lightbox .ilb-content img{
  width: auto;
  height: auto;
  max-width: 95vw;
  max-height: 85vh;
  display: block;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
@media (max-width: 600px){
  .image-lightbox .ilb-content img{
    max-width: 96vw;
    max-height: 70vh;
  }
}
@media (min-width: 1024px){
  .image-lightbox .ilb-content img{
    max-width: 85vw;
    max-height: 85vh;
  }
}
.image-lightbox .ilb-close{
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  background: rgba(255,255,255,0.9);
  border: none;
  color: #000;
  font-size: 24px;
  line-height: 24px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* قسم الإحصاءات */
.stats-section{
  background-color: #fff;
  padding: 30px;
}
.stats-section h2{
  text-align: center;
  color: #a88323;
  font-size: 2rem;
  margin: 10px 0 20px;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.stat-card{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-number{
  font-weight: 800;
  color: #a88323;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
}
.stat-label{
  margin-top: 8px;
  color: #6b4d02;
  font-weight: 600;
}
.social-icon.facebook { border-color: #1877F2; color: #1877F2; background: #1877F212; }
.social-icon.tiktok { border-color: #EE1D52; color: #EE1D52; background: #EE1D5212; }
.social-icon.linkedin { border-color: #0A66C2; color: #0A66C2; background: #0A66C212; }
.archi-details{
  max-width: 800px;
  margin: 0 auto 24px;
  padding: 0 12px;
  text-align: start;
}
.archi-details label{
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
.archi-details input[type="text"]{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
  direction: rtl;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* وصف خيمة آرتشي */
.archi-desc{
  max-width: 900px;
  margin: 12px auto 22px;
  padding: 0 12px;
  color: #333;
  direction: rtl;
  text-align: right;
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
}
.archi-desc-card{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: right;
}
.archi-desc h3{
  color: #a88323;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  margin: 0 0 6px;
}
.archi-desc p{
  line-height: 1.9;
  font-size: 1rem;
  margin-top: 6px;
}
.archi-desc-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: right;
  direction: rtl;
}
.archi-desc-list li{
  position: relative;
  padding-inline-start: 18px;
  margin: 6px 0;
  line-height: 1.8;
}
.archi-desc-list li::before{
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: #a88323;
  font-weight: 900;
}
.archi-desc-actions{
  margin-top: 14px;
  text-align: center;
}
.archi-desc-actions .btn{
  display: inline-block;
  padding: 10px 16px;
  background: #a88323;
  color: #fff;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.archi-desc-actions .btn:hover{
  background: #916f1f;
}

/* توسيط بطاقات الوصف وجعل النص في منتصف الصفحة */
.archi-desc-card,
.toilets-desc-card,
.electricity-desc-card,
.warehouses-desc-card,
.internal-desc-card{
  max-width: 760px;
  margin: 0 auto;
}

.archi-desc h3,
.toilets-desc h3,
.electricity-desc h3,
.warehouses-desc h3,
.internal-desc h3{ text-align: center; }

.archi-desc p,
.toilets-desc p,
.electricity-desc p,
.warehouses-desc p,
.internal-desc p{ text-align: center; }

/* قسم دورات المياه - نفس تنسيق archi-desc */
.toilets-desc{
  max-width: 1200px;
  margin: 12px auto 22px;
  padding: 0 30px;
  color: #333;
  direction: rtl;
  text-align: right;
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
}
.toilets-desc-card{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: right;
}
.toilets-desc h3{
  color: #a88323;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  margin: 0 0 6px;
}
.toilets-desc p{
  line-height: 1.9;
  font-size: 1rem;
  margin-top: 6px;
}
.toilets-desc-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: right;
  direction: rtl;
}
.toilets-desc-list li{
  position: relative;
  padding-inline-start: 18px;
  margin: 6px 0;
  line-height: 1.8;
}
.toilets-desc-list li::before{
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: #a88323;
  font-weight: 900;
}
.toilets-desc-actions{
  margin-top: 14px;
  text-align: center;
}
.toilets-desc-actions .btn{
  display: inline-block;
  padding: 10px 16px;
  background: #a88323;
  color: #fff;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.toilets-desc-actions .btn:hover{
  background: #916f1f;
}

/* قسم مولدات الكهرباء - نفس تنسيق الأقسام التعريفية */
.electricity-desc{
  max-width: 1200px;
  margin: 12px auto 22px;
  padding: 0 30px;
  color: #333;
  direction: rtl;
  text-align: right;
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
}
.electricity-desc-card{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: right;
}
.electricity-desc h3{
  color: #a88323;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  margin: 0 0 6px;
}
.electricity-desc p{
  line-height: 1.9;
  font-size: 1rem;
  margin-top: 6px;
}
.electricity-desc-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: right;
  direction: rtl;
}
.electricity-desc-list li{
  position: relative;
  padding-inline-start: 18px;
  margin: 6px 0;
  line-height: 1.8;
}
.electricity-desc-list li::before{
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: #a88323;
  font-weight: 900;
}
.electricity-desc-actions{
  margin-top: 14px;
  text-align: center;
}
.electricity-desc-actions .btn{
  display: inline-block;
  padding: 10px 16px;
  background: #a88323;
  color: #fff;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.electricity-desc-actions .btn:hover{
  background: #916f1f;
}
/* قسم المستودعات - نفس تنسيق الأقسام التعريفية */
.warehouses-desc{
  max-width: 1200px;
  margin: 12px auto 22px;
  padding: 0 30px;
  color: #333;
  direction: rtl;
  text-align: right;
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
}
.warehouses-desc-card{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: right;
}
.warehouses-desc h3{
  color: #a88323;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  margin: 0 0 6px;
}
.warehouses-desc p{
  line-height: 1.9;
  font-size: 1rem;
  margin-top: 6px;
}
.warehouses-desc-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: right;
  direction: rtl;
}
.warehouses-desc-list li{
  position: relative;
  padding-inline-start: 18px;
  margin: 6px 0;
  line-height: 1.8;
}
.warehouses-desc-list li::before{
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: #a88323;
  font-weight: 900;
}
.warehouses-desc-actions{
  margin-top: 14px;
  text-align: center;
}
.warehouses-desc-actions .btn{
  display: inline-block;
  padding: 10px 16px;
  background: #a88323;
  color: #fff;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.warehouses-desc-actions .btn:hover{
  background: #916f1f;
}

/* قسم التنسيق الداخلي - نفس تنسيق الأقسام التعريفية */
.internal-desc{
  max-width: 1200px;
  margin: 12px auto 22px;
  padding: 0 30px;
  color: #333;
  direction: rtl;
  text-align: right;
  font-family: "Cairo","Noto Kufi Arabic",sans-serif;
}
.internal-desc-card{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: right;
}
.internal-desc h3{
  color: #a88323;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  margin: 0 0 6px;
}
.internal-desc p{
  line-height: 1.9;
  font-size: 1rem;
  margin-top: 6px;
}
.internal-desc-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: right;
  direction: rtl;
}
.internal-desc-list li{
  position: relative;
  padding-inline-start: 18px;
  margin: 6px 0;
  line-height: 1.8;
}
.internal-desc-list li::before{
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: #a88323;
  font-weight: 900;
}
.internal-desc-actions{
  margin-top: 14px;
  text-align: center;
}
.internal-desc-actions .btn{
  display: inline-block;
  padding: 10px 16px;
  background: #a88323;
  color: #fff;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.internal-desc-actions .btn:hover{
  background: #916f1f;
}

/* قسم آراء العملاء */
.testimonials-section{
  background-color: #fff;
  padding: 10px 30px 30px;
}
.testimonials-section h2{
  text-align: center;
  color: #a88323;
  font-size: 2rem;
  margin: 10px 0 20px;
}
.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.testimonial-card{
  background: #fdfdfd;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.testimonial-text{
  margin: 0 0 10px;
  color: #333;
}
.testimonial-author{
  color: #6b4d02;
  font-weight: 600;
}
.testimonial-rating{
  margin: 6px 0 8px;
  color: #f5a623; /* لون النجوم */
  font-size: 1rem;
}
.testimonial-rating .star{
  font-size: 1.1rem;
  line-height: 1;
  margin-inline: 0 2px;
}
.testimonial-source{
  font-size: 0.9rem;
  color: #777;
  margin: 0 0 10px;
  text-align: center;
}
.testimonial-source a{
  color: #a88323;
  text-decoration: none;
}
.testimonial-source a:hover{ text-decoration: underline; }
.testimonials-loading,
.testimonials-empty{
  text-align: center;
  color: #777;
  padding: 8px 0;
}
.testimonials-empty a{
  color: #a88323;
  text-decoration: none;
}
.testimonials-empty a:hover{ text-decoration: underline; }

/* قسم الخدمات (مرئي تحت آراء العملاء) */
.services-section{
  background-color: #fff;
  padding: 10px 30px 30px;
}
.services-section h2{
  text-align: center;
  color: #a88323;
  font-size: 2rem;
  margin: 10px 0 20px;
}
.services-body{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.services-illustration{
  text-align: center;
  margin: 0 auto 20px;
}
.services-illustration img{
  display: block;
  max-width: 900px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.stat-card{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-number{
  font-weight: 800;
  color: #a88323;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
}
.stat-label{
  margin-top: 8px;
  color: #6b4d02;
  font-weight: 600;
}

/* قسم آراء العملاء */
.testimonials-section{
  background-color: #fff;
  padding: 10px 30px 30px;
}
.testimonials-section h2{
  text-align: center;
  color: #a88323;
  font-size: 2rem;
  margin: 10px 0 20px;
}
.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.testimonial-card{
  background: #fdfdfd;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.testimonial-text{
  margin: 0 0 10px;
  color: #333;
}
.testimonial-author{
  color: #6b4d02;
  font-weight: 600;
}

/* تحسينات صغيرة للجوال */
@media (max-width: 480px){
  .stats-section{ padding: 20px; }
  .testimonials-section{ padding: 10px 20px 20px; }
}

/* نافذة منبثقة للخدمات */
.services-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2100;
  transition: opacity 200ms ease;
}
.services-modal.is-open{ opacity: 1; pointer-events: auto; }
.services-modal .srv-content{
  text-align: center;
  justify-self: center;
  align-self: center;
}
.services-modal .srv-content{
  background: #fff;
  color: #222;
  border-radius: 14px;
  width: min(680px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transform: translateY(12px);
  transition: transform 200ms ease;
}
.services-modal.is-open .srv-content{ transform: none; }
.services-modal .srv-close{
  position: absolute;
  top: 16px;
  inset-inline-end: 16px; /* يدعم RTL/LTR */
  background: rgba(255,255,255,0.9);
  border: none;
  color: #000;
  font-size: 24px;
  line-height: 24px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.services-list{
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.services-list li{
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
@media (max-width: 480px){
  .services-modal .srv-content{ width: 95vw; padding: 18px; }
}
@media (max-width: 480px){
  .video-lightbox .vlb-content{ width: 95vw; }
}
}

/* قسم عملاؤنا */
.clients-section{
  background-color: #fff;
  padding: 50px;
}
.clients-section h2{
  text-align: cente9
  color: #a88323;
  fo4t-size: 2rem;
  marg8n: 30px 0 50px;
}
.clients-marquee{
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.clients-track{
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding: 50px 0;
  animation: clients-marquee var(--clients-speed, 40s) linear infinite;
}
.clients-track img{
  height: clamp(90px, 9vw, 150px);
  width: auto;
  filter: grayscale(150%);
  opacity: 0.9;
  transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
}
.clients-track img:hover{
  opacity: 1;
  filter: none;
  transform: scale(1.05);
}
.clients-marquee:hover .clients-track{ animation-play-state: paused; }
@keyframes clients-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (max-width: 480px){
  .clients-track{ gap: 20px; }
}
}

/* Footer */
.site-footer {
  background: #1f1f1f;
  color: #eee;
  direction: rtl;
  text-align: right;
  p@mediad(max-width: 480px){
 
.clients-section{
- t--logo-size-min: 50px;
    --logo-size-vw: 18vw;
    --logo-size-max: 90px;
    --logo-gap: 14px;
  }
}
@media (max-width: 768px){
  .clients-section{
    --logo-size-min: 60px;
    --logo-size-vw: 14vw;
    --logo-size-max: 100px;
    --logo-gap: 20px;
  }
}
@media (max-width: 1024px){
  .clients-section{
    --logo-size-min: 65px;
    --logo-size-vw: 10vw;
    --logo-size-max: 120px;
    --logo-gap: 24px;
  }
}amily: "Cairo", "Noto Kufi Arabic", sans-serif;
}
.site-footer a { color: inherit; text-decoration: none; }
.footer-top {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand h3 {
  margin: 0;
  color: #a88323;
  font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
}
.footer-brand p {
  margin: 6px 0 0;
  opacity: 0.85;
  font-size: 0.95rem;
}
.footer-social { display: flex; gap: 10px; }
.social-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: #a88323; /* افتراضي، تُستبدل بألوان المنصات */
  background: #ffffff12;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* ألوان الهوفر لكل منصة */
.social-icon.facebook:hover { background: #1877F2; color: #fff; }
.social-icon.tiktok:hover { background: #EE1D52; color: #fff; }
.social-icon.linkedin:hover { background: #0A66C2; color: #fff; }
.social-icon.whatsapp:hover { background: #25D366; color: #fff; }
.social-icon.instagram:hover { background: #E1306C; color: #fff; }
.social-icon.twitter:hover { background: #1DA1F2; color: #fff; }
.social-icon.email:hover { background: #D44638; color: #fff; }
/* تحويل شعارات SVG إلى أبيض عند الهوفر لتحسين التباين */
.social-icon:hover svg *, .social-icon:hover svg { fill: #fff !important; stroke: #fff !important; }
.social-icon.whatsapp { border-color: #25D366; color: #25D366; background: #25D36612; }
.social-icon.instagram { border-color: #E1306C; color: #E1306C; background: #E1306C12; }
.social-icon.twitter { border-color: #1DA1F2; color: #1DA1F2; background: #1DA1F212; }
.social-icon.email { border-color: #D44638; color: #D44638; background: #D4463812; }
.footer-bottom {
  border-top: 1px solid #2a2a2a;
  margin-top: 14px;
  padding-top: 10px;
  opacity: 0.8;
  font-size: 0.9rem;
  text-align: center;
}
/* تحسينات إضافية للتذييل */
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #d4b76c, #a88323 60%, #d4b76c);
  margin-bottom: 12px;
}
.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-phone {
  color: #eee;
  border: 1px dashed #3a3a3a;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
  background: #ffffff10;
}
.footer-phone:hover { background: #ffffff18; }
.footer-whatsapp-btn {
  background: #25D366;
  color: #121212;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  border: 1px solid #25D366;
}
.footer-whatsapp-btn:hover { filter: brightness(1.08); }
.footer-profile-btn {
  background: #a88323;
  color: #1a1a1a;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  border: 1px solid #a88323;
  text-decoration: none;
  display: inline-block;
}
.footer-profile-btn:hover {
    filter: brightness(1.1);
    color: #fff;
}
.social-icon svg { width: 22px; height: 22px; pointer-events: none; }
/* إزالة إجبار الألوان العامة على الأيقونات لضمان ظهور شعارات المنصات بألوانها الأصلية */
@media (max-width: 640px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-social { justify-content: flex-start; }
}
.footer-bottom {
  border-top: 1px solid #2a2a2a;
  margin-top: 14px;
  padding-top: 10px;
  opacity: 0.8;
  font-size: 0.9rem;
}

/* FAQ Section */
.faq-section { direction: rtl; color: #eaeaea; padding: 2rem 1rem; margin: 2rem 0; background: #0f0f0f; border-top: 1px solid #222; }
.faq-section h2 { font-family: 'Cairo', 'Noto Kufi Arabic', system-ui; font-weight: 700; color: #a88323; margin-bottom: 1rem; text-align: right; }
.faq-item { background: #121212; border: 1px solid #1f1f1f; border-radius: 8px; margin-bottom: .75rem; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.faq-item summary::marker { display: none; }
.faq-item[open] summary { color: #a88323; }
.faq-answer { padding: 0 1rem 1rem; line-height: 1.9; color: #d7d7d7; }

/* Quote Request Section */
.quote-section { direction: rtl; color: #eaeaea; padding: 2rem 1rem; margin: 2rem 0; background: #0f0f0f; border-top: 1px solid #222; }
.quote-section h2 { font-family: 'Cairo', 'Noto Kufi Arabic', system-ui; font-weight: 700; color: #a88323; margin-bottom: 1rem; text-align: right; }
.quote-form { max-width: 900px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .form-field { display: grid; gap: .4rem; }

/* RTL/LTR overrides based on document direction */
[dir="ltr"] .header-links{
  direction: ltr;
  justify-content: flex-start;
}
[dir="ltr"] .text-1{
  direction: ltr;
  text-align: left;
}
[dir="ltr"] .text-1 h2{ text-align: left; }
[dir="ltr"] .toilets-desc,
[dir="ltr"] .electricity-desc,
[dir="ltr"] .warehouses-desc,
[dir="ltr"] .internal-desc{ direction: ltr; text-align: left; }
[dir="ltr"] .toilets-desc-list,
[dir="ltr"] .electricity-desc-list{ direction: ltr; text-align: left; }
[dir="ltr"] .site-footer{ direction: ltr; text-align: left; }
.form-field span { font-size: .95rem; color: #cfcfcf; }
.form-field input, .form-field select { background: #121212; border: 1px solid #2a2a2a; color: #f0f0f0; border-radius: 8px; padding: .7rem .8rem; font-family: 'Cairo', 'Noto Kufi Arabic', system-ui; }
.form-field input::placeholder { color: #999; }
.form-actions { margin-top: 1rem; display: flex; gap: .75rem; justify-content: flex-start; }
.submit-btn { background: linear-gradient(180deg, #b89334 0%, #a88323 100%); color: #1a1a1a; border: 1px solid #a88323; border-radius: 10px; padding: .8rem 1.2rem; font-weight: 700; }
.submit-btn:hover { filter: brightness(1.08); }
.alt-btn { background: #141414; color: #eaeaea; border: 1px solid #2a2a2a; border-radius: 10px; padding: .8rem 1.2rem; }
.alt-btn:hover { border-color: #a88323; color: #fff; }
.form-note { color: #9a9a9a; margin-top: .6rem; font-size: .9rem; }

/* Mobile Contact Bar */
.mobile-contact-bar { position: fixed; inset-inline: 0; bottom: 0; display: none; z-index: 50; background: linear-gradient(180deg, rgba(168,131,35,0.25), rgba(168,131,35,0.15)); backdrop-filter: blur(6px); border-top: 1px solid #2a2a2a; }
.mobile-contact-bar .mcb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .9rem 1rem; font-weight: 800; letter-spacing: .3px; }
.mobile-contact-bar .mcb-btn svg { width: 22px; height: 22px; }
.mobile-contact-bar .mcb-btn.call { color: #eaeaea; }
.mobile-contact-bar .mcb-btn.whatsapp { color: #25D366; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .mobile-contact-bar { display: grid; grid-template-columns: 1fr 1fr; }
}

/* حاويات موحّدة للأقسام الجديدة لضبط الاتساع والمحاذاة */
.faq-section > h2,
.faq-section > details { max-width: 1000px; margin-inline: auto; }
.quote-section > h2,
.quote-section > form { max-width: 900px; margin-inline: auto; }

/* تحسين تناسق الشريط المثبت على الجوال مع هوية الموقع */
.mobile-contact-bar .mcb-btn { background: #121212cc; border: 1px solid #2a2a2a; border-radius: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.mobile-contact-bar .mcb-btn.whatsapp { border-color: #25D366; }
.mobile-contact-bar .mcb-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.mobile-contact-bar .mcb-btn:active { transform: translateY(0); box-shadow: none; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .mobile-contact-bar { display: grid; grid-template-columns: 1fr 1fr; }
}

}