/* =========================
   المتغيرات العامة
   ========================= */
:root{
  --header-h:72px;          /* يتحدث من سكربت الهيدر */
  --brand-blue:#0B5ED7;     /* لون العناوين */
  --accent-green:#28a745;   /* زر الطلب */
}

/* الخط يُستورد من HTML (Tajawal) */
html, body{
  font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* =========================
   الهيدر والتباعد
   ========================= */
.header-area{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border-bottom-left-radius: 0;
}
body{ padding-top: var(--header-h); }

/* أزرار التواصل العائمة */
.new-social, .new-social.soc-l{
  z-index: 9000;
  position: fixed;
}

/* =========================
   ألوان العناوين
   ========================= */
.section-heading h2,
.material-section h3,
.title.h5,
h1,h2,h3,h4,h5,h6{
  color: var(--brand-blue) !important;
}

/* =========================
   سلايدر "أعمالنا" (كما هو مع تحسينات عامة)
   ========================= */
.slider-section{
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 15px;
  overflow-x: hidden;
}
.swiper-container{
  width: 100%;
  height: 100%;
  position: relative;
}
.swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.swiper-slide img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.swiper-pagination{ bottom: -20px; text-align: center; }
.swiper-pagination-bullet{
  width: 10px; height: 10px;
  background: #ccc; opacity: .8; border-radius: 50%;
}
.swiper-pagination-bullet-active{ background: #007bff; }
.swiper-button-next, .swiper-button-prev{
  color: #007bff; font-size: 17px;
  background-color: rgba(252,252,252,0.973);
  border-radius: 50%; width: 40px; height: 40px;
}
.swiper-button-next:hover, .swiper-button-prev:hover{ background-color: rgba(0,0,0,0.4); }

/* =========================
   اتصل بنا
   ========================= */
.contact-page p{ margin-bottom: 5px; }

/* =========================
   سلايدر الهيرو — خلفية أزرق + نص أبيض
   ========================= */
.hero-landing{ position: relative; }
.hero-landing .hero-swiper{ width: 100%; }

.hero-slide{ position: relative; overflow: hidden; }

/* صورة الخلفية */
.hero-bg{
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
}
/* إزالة التظليل الأسود القديم */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background: none !important; pointer-events: none;
}

/* طبقة زرقاء تغطي الشرائح */
.hero-slide::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:#0B5ED7 !important; opacity:.72 !important;
  transition: opacity .3s ease;
}

/* محتوى الهيرو */
.hero-slide .container{
  position: relative; z-index: 2;
  min-height: clamp(420px, 100vh, 760px);
  display: grid; place-items: center;
}
.hero-content{
  max-width: 980px; margin-inline: auto;
  padding: 35px; text-align: center;
  background: #0b5ed7bd !important;
  color:#fff !important;
}
.hero-title{
  font-weight: 800; line-height: 1.3;
  margin-bottom: 14px; color:#fff !important;
}
.hero-subtitle{
  font-size: 1.05rem; line-height: 1.9;
  margin-bottom: 20px; color:#fff !important;
}

/* إخفاء أزرار الدعوة داخل الهيرو فقط */
.hero-landing .hero-cta{ display:none !important; }

/* أسهم/نقاط الهيرو بالأبيض */
.hero-landing .swiper, .hero-landing .swiper *{ z-index: auto; }
.hero-landing .swiper{ z-index: 1; }
.hero-landing .swiper-button-next, .hero-landing .swiper-button-prev{
  z-index: 2; color:#fff !important;
  background-color: rgba(255,255,255,.18) !important;
  width: 40px; height: 40px; border-radius: 50%;
  box-shadow: none !important;
}
.hero-landing .swiper-button-next:hover, .hero-landing .swiper-button-prev:hover{
  background-color: rgba(255,255,255,.32) !important; color:#fff !important;
}
.hero-landing .swiper-pagination-bullet{
  width:10px; height:10px;
  background: rgba(255,255,255,.6) !important; opacity:1 !important;
}
.hero-landing .swiper-pagination-bullet-active{ background:#fff !important; }

/* =========================
   تجاوبية الهيرو
   ========================= */
@media (max-width: 575.98px){
  .hero-title{ font-size: 1.25rem; }
  .hero-subtitle{ font-size: .95rem; }
  .btn-hero{ padding: 8px 20px; }
}

/* =========================
   أزرار عامة + أنماط الطلب
   ========================= */
.btn-hero{
  display:inline-block; font-weight:800;
  padding:10px 28px; border-radius:12px;
  background:#fff; color:#d32f2f; /* يتبدل مع is-order/is-ghost */
  border:1px solid #a7a7a7; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease,
             background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn-hero:hover{ background:#f7f7f7; }

/* زر الطلب: أخضر + نص أبيض */
.btn-hero.is-order{
  background: var(--accent-green) !important;
  color:#fff !important;
  border-color: var(--accent-green) !important;
}

/* زر ثانوي: حدود أزرق */
.btn-hero.is-ghost{
  background: transparent !important;
  color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}

/* =========================
   تحسين التمرير مع هيدر ثابت
   ========================= */
.material-section,
.hero-landing, .featured.section, .contact-page.section, .select-type{
  scroll-margin-top: calc(var(--header-h, 72px) + 16px);
}

/* =========================
   سلايدر "تجارب عملائنا" — رجوع للألوان الأصلية
   ========================= */
.fun-factss .swiper-slide{
  background-color: transparent;
  box-shadow: none;
}
.fun-facts .counter, .fun-factss .counter{ width: 100%; }
/* الأسهم/النقاط تأخذ القيم العامة (أزرق/رمادي) من إعدادات السلايدر الافتراضية */

/* =========================
   صور السلايدر العامة
   ========================= */
svg.swiper-navigation-icon{ display:none; }
.swiper-slide img{ height: 270px; }

/* =========================
   أقسام الأنواع والمواد
   ========================= */
.select-type{ padding: 40px 0; background: #fafafa; }
.select-type .box{
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}
.select-type a{
  display:block; padding:14px 18px; border:1px solid #e5e5e5;
  border-radius:10px; background:#fff; text-decoration:none; font-weight:700;
}
.select-type a:hover{
  border-color:#007bff; box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.material-section{
  padding: 60px 0; border-top: 1px solid #eee;
}
.material-section .lead{ font-size: 1.05rem; line-height: 1.9; }
.material-section .cta-wrap{
  margin-top: 16px; display: flex; gap: 12px;
  flex-wrap: wrap; justify-content: center;
}
.material-section .grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px; margin-top:22px;
}
.material-section .grid img{
  width:100%; height:270px; object-fit:cover; border-radius:10px;
}
@media (max-width: 991.98px){
  .material-section .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .material-section .grid{ grid-template-columns: 1fr; }
}

/* =========================
   ألوان النص الافتراضية
   ========================= */
h1, h2, h3, h4, h5, h6, p{ color: inherit; }

/* =========================
   الفوتر
   ========================= */
footer p {
    line-height: 2em;
}