/*
Theme Name: SeraTheme
Theme URI: https://sera.com.sa
Author: Hayan
Author URI: https://sera.com.sa
Description: قالب مخصص لموقع سيرة الرقمية
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sera-digital
*/

/* إعدادات أساسية */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Almarai', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  color: #222;
  line-height: 1.8;
}

/* ألوان */
:root {
  --main: #71120f;
  --secondary: #ddc077;
  --accent: #9c1f18;
  --light-bg: #f8f8f8;
}

/* الحاوية العامة */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* تنسيق الهيدر الأساسي */
/* تنسيق الهيدر الأساسي */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
}

.logo a {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--main);
  text-decoration: none;
  letter-spacing: 1px;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 0;
  padding: 0;
}

/* روابط القائمة الأساسية */
.nav-links li {
  position: relative;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  padding: 10px 14px;
  display: inline-block;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--main);
}

/* القوائم المنسدلة */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  min-width: 200px;
  z-index: 100;
}

.dropdown:hover .dropdown-menu {
  display: flex;
  animation: fadeIn 0.25s ease;
}

.dropdown-menu li a {
  padding: 10px 15px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: var(--main);
  color: #fff;
}

/* حركة بسيطة عند الفتح */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(5px);}
  to {opacity: 1; transform: translateY(0);}
}

/* زر طلب خدمة */
.btn-primary {
  background-color: var(--main);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.btn-primary:hover {
  background-color: #000;
}

/* عند تصغير الشاشة */
@media (max-width: 992px) {
  .nav-links {
    flex-wrap: wrap;
    gap: 15px;
  }
}

/* روابط القائمة الأساسية */
.nav-links li {
  position: relative;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  padding: 10px 14px;
  display: inline-block;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--main);
}

/* القوائم المنسدلة */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  min-width: 200px;
  z-index: 100;
}

.dropdown:hover .dropdown-menu {
  display: flex;
  animation: fadeIn 0.25s ease;
}

.dropdown-menu li a {
  display: block;                /* ✅ يجعل الرابط يغطي كامل مساحة العنصر */
  padding: 10px 20px;            /* ✅ مساحة حول النص */
  color: #333;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: var(--main); /* ✅ اللون يغطي المربع كامل */
  color: #fff;
}

/* حركة بسيطة عند الفتح */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(5px);}
  to {opacity: 1; transform: translateY(0);}
}



.btn-primary:hover {
  background-color: #000;
}

.hero-buttons a {
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  padding: 12px 24px;
  transition: background 0.3s, color 0.3s, transform 0.2s;
  display: inline-block;
}

.hero-buttons a:hover {
  transform: translateY(-3px);
}

/* الزر الرئيسي */
.btn-primary {
  background-color: var(--main);
  color: #fff;
}

/* الزر الثانوي */
.btn-secondary {
  background-color: var(--secondary);
  color: #000;
}

/* عند تصغير الشاشة */
/* ===============================
   تحسين المظهر على الجوال بالكامل
=============================== */

.navbar ul li a {
  font-size: 16px;
  padding: 10px 18px;
}
@media (max-width: 768px) {

  header {
    padding: 8px 15px;
  }

  .menu-toggle {
    display: block;
    font-size: 26px;
    cursor: pointer;
    color: #000;
  }

  .navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 10px 0;
    margin: 0;
  }

  .navbar.active ul {
    display: flex;
  }

  .navbar ul li {
    width: 100%;
    text-align: center;
    position: relative;
  }

  .navbar ul li a {
    font-size: 15px;
    padding: 10px;
    display: block;
    color: #000;
  }

  /* القوائم المنسدلة */
  .navbar ul li ul {
    display: none;
    flex-direction: column;
    background: #f8f8f8;
    border-radius: 8px;
    margin: 5px 10px;
  }

  .navbar ul li ul li a {
    font-size: 14px;
    padding: 8px 20px;
  }

  .navbar ul li.open > ul {
    display: flex; /* تظهر فقط عند الضغط */
  }

  footer {
    font-size: 13px;
    padding: 15px;
    text-align: center;
  }
}

/* ✅ قسم الهيرو */
.hero {
  height: 90vh;
  background-color: #fff; /* ✅ خلفية بيضاء */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--main);
  position: relative;
  margin-top: 80px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at 70% 30%, #ddc0771a, transparent 60%);
  top: -40%;
  left: -40%;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: auto;
}

.hero h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--main);
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 30px;
  line-height: 1.9;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* ✅ الأقسام العامة */
.section {
  padding: 100px 0;
}

.alt-bg {
  background-color: var(--light-bg);
}

.section-title {
  text-align: center;
  color: var(--main);
  font-size: 2rem;
  margin-bottom: 50px;
  position: relative;
}

.section-title::after {
  content: '';
  width: 80px;
  height: 4px;
  background: var(--secondary);
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* ✅ الشبكات (أعمالنا / خدماتنا) */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ 3 أعمدة ثابتة */
  gap: 25px;
  justify-items: center;
}

@media (max-width: 992px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* للجوال والتابلت */
  }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr; /* عمود واحد فقط في الشاشات الصغيرة */
  }
}

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card p {
  padding: 15px;
  color: #333;
  font-weight: 500;
}

.service .icon {
  font-size: 2rem;
  color: var(--main);
  margin-top: 20px;
}

/* ✅ النماذج */
.form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
  margin: auto;
}

.form input, .form select, .form textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
}

.form button {
  align-self: center;
  cursor: pointer;
}

form button,
form input[type="submit"] {
  background-color: var(--main);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
  display: inline-block;
}

form button:hover,
form input[type="submit"]:hover {
  background-color: #000; /* غامق شوي عند التمرير */
  transform: translateY(-2px);
}

/* ✅ نص من نحن */
.about-text {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
  line-height: 2;
  font-size: 1.05rem;
}

/* ✅ الفوتر */
footer {
  background-color: #111;
  color: #fff;
  text-align: center;
  padding: 40px 0;
}

footer a {
  color: var(--secondary);
  text-decoration: none;
  margin: 0 10px;
}

footer a:hover {
  color: var(--main);
}

.center-btn {
  text-align: center;
  margin-top: 30px;
}
/* ✅ الرؤية والرسالة */
.vision-list {
  list-style: none;
  margin-top: 40px;
  line-height: 2;
  font-size: 1.05rem;
  color: #333;
}
.vision-list li::before {
  content: "✔️ ";
  color: var(--main);
}

/* ✅ القيم */
.subtitle {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: #666;
}

/* ✅ شركاؤنا */
.partners-img {
  width: 100%;
  max-width: 800px;
  display: block;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ✅ المسيرة */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: auto;
}
.timeline-item {
  background: #fff;
  border-right: 6px solid var(--main);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.timeline-item .year {
  font-weight: bold;
  color: var(--main);
  font-size: 1.1rem;
}

/* ✅ تواصل معنا */
.contact-info {
  text-align: center;
  line-height: 2;
  font-size: 1.1rem;
}
.social-icons {
  margin-top: 15px;
}
.social-icons a {
  font-size: 1.5rem;
  margin: 0 5px;
  text-decoration: none;
  color: var(--secondary);
}
.social-icons a:hover {
  color: var(--main);
}
/* ===== حركات الانميشن ===== */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== الرؤية والرسالة ===== */
.grid.two-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.vision-points ul {
  margin-top: 30px;
  list-style: none;
  padding: 0;
}

.vision-points li {
  background: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ===== قيمنا ===== */
.section-subtitle {
  text-align: center;
  color: #555;
  margin-bottom: 40px;
  font-style: italic;
}

.card h3 {
  color: var(--main);
  margin-top: 10px;
}

.card .icon {
  font-size: 2rem;
  margin-top: 15px;
}

/* ===== المسيرة ===== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 25px;
  border-right: 3px solid var(--secondary);
  padding-right: 20px;
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  right: -9px;
  top: 5px;
  width: 15px;
  height: 15px;
  background: var(--main);
  border-radius: 50%;
}

.timeline-item span {
  font-weight: bold;
  color: var(--accent);
}

.timeline-item h3 {
  margin: 5px 0;
  color: var(--main);
}

/* ===== تواصل معنا ===== */
.contact-info {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* ===== الفوتر ===== */
footer .socials {
  margin: 15px 0;
}

/* =========================
   تحسين الهيدر على الجوال
========================= */
/* ===============================
   تحسين المظهر على الجوال بالكامل
=============================== */
@media (max-width: 768px) {

  header {
    padding: 8px 15px;
  }

  .menu-toggle {
    display: block;
    font-size: 26px;
    cursor: pointer;
    color: #000;
  }

  .navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 10px 0;
    margin: 0;
  }

  .navbar.active ul {
    display: flex;
  }

  .navbar ul li {
    width: 100%;
    text-align: center;
    position: relative;
  }

  .navbar ul li a {
    font-size: 15px;
    padding: 10px;
    display: block;
    color: #000;
  }

  /* القوائم المنسدلة */
  .navbar ul li ul {
    display: none;
    flex-direction: column;
    background: #f8f8f8;
    border-radius: 8px;
    margin: 5px 10px;
  }

  .navbar ul li ul li a {
    font-size: 14px;
    padding: 8px 20px;
  }

  .navbar ul li.open > ul {
    display: flex; /* تظهر فقط عند الضغط */
  }

  footer {
    font-size: 13px;
    padding: 15px;
    text-align: center;
  }
}
.navbar ul li ul.open {
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ================
   تحسين القائمة في الجوال
================ */
@media (max-width: 768px) {

  .navbar ul {
    padding: 5px 0;
  }

  .navbar ul li a {
    font-size: 14px;
    padding: 8px 12px;
  }

  .navbar ul li ul {
    display: none;
    flex-direction: column;
    background: #fafafa;
    border-radius: 6px;
    margin: 4px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .navbar ul li ul li a {
    font-size: 13px;
    padding: 6px 10px;
  }

  .navbar ul li.open > ul {
    display: flex;
  }

  /* الفوتر أصغر */
  footer {
    font-size: 12px;
    padding: 10px 0;
  }
}
/* --- القوائم المنسدلة على الجوال --- */
.navbar ul li.dropdown .dropdown-menu {
  display: none;
  position: static;
  background: #fff;
  box-shadow: none;
  padding-right: 20px;
}

.navbar ul li.dropdown.open .dropdown-menu {
  display: block;
}

/* تأكد أن القائمة لا تكون مفتوحة إلا بعد الضغط */
@media (max-width: 768px) {
  .navbar ul li.dropdown .dropdown-menu {
    display: none;
  }

  .navbar ul li.dropdown.open .dropdown-menu {
    display: block;
  }
}
/* ===== Override: force dropdowns closed on small screens and cancel hover effect ===== */
@media (max-width: 992px) {
  /* ألغِ تأثير hover الذي قد يكون سابقاً */
  .dropdown:hover .dropdown-menu {
    display: none !important;
  }

  /* اجعل القوائم المنسدلة مخفية افتراضياً */
  .navbar .dropdown .dropdown-menu {
    display: none !important;
    position: static !important;    /* تأكد أنها داخل التدفق وليس absolute */
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* عندما نضيف كلاس open عبر JS - نظهر القائمة */
  .navbar .dropdown.open > .dropdown-menu {
    display: block !important;
  }

  /* اجعل عناصر القائمة أصغر ومضغوطة على الموبايل */
  .navbar .nav-links {
    width: 100%;
  }
  .navbar .nav-links li a {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  .navbar .nav-links li .dropdown-menu li a {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}
/* ✅ إخفاء القائمة بالكامل على الجوال */
@media (max-width: 768px) {
  .menu-toggle,              /* زر الثلاث خطوط */
  .nav-links,                /* القوائم */
  .navbar ul { 
    display: none !important;
    visibility: hidden !important;
  }
}
/* تحسين المظهر على الجوال */
@media (max-width: 768px) {

  /* ✅ تصغير عرض المحتوى وإضافة هوامش جانبية */
  .container {
    width: 92%;
    padding-left: 10px;
    padding-right: 10px;
  }

  section, .section {
    padding: 60px 0; /* بدل 100px */
  }

  .hero-content {
    padding: 0 15px;
  }

  /* ✅ جعل الشبكات (أعمالنا / خدماتنا) عمودين بدل واحد */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; /* تقليل المسافة قليلاً */
  }

  /* ✅ تصغير حجم النصوص والعناوين */
  .section-title {
    font-size: 1.6rem;
    margin-bottom: 35px;
  }

  .card p {
    font-size: 0.9rem;
    padding: 10px;
  }

  /* ✅ تقليل حجم الفوتر قليلاً */
  footer {
    font-size: 12px;
    padding: 20px;
  }
}
.site-logo {
  height: 55px; /* يمكنك تعديل الحجم حسب لوغوك */
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .site-logo {
    height: 45px; /* أصغر على الجوال */
  }
}
/* القوائم المنسدلة */
.navbar ul li {
  position: relative;
}

.navbar ul li ul {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 180px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border-radius: 8px;
  z-index: 1000;
}

/* عند تمرير الماوس على القائمة الرئيسية */
.navbar ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

/* تنسيق عناصر القوائم المنسدلة */
.navbar ul li ul li a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s;
}

.navbar ul li ul li a:hover {
  background: #f4f4f4;
}

/* إخفاء القوائم المنسدلة بالكامل في الجوال */
@media (max-width: 991px) {
  .navbar ul li ul {
    display: none !important;
  }
}
/* الهيدر العام */
.header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 60px;
}

.logo a {
  font-family: 'Almadinah2', sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #71120f;
  text-decoration: none;
}

/* القائمة */
.navbar ul {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul li {
  position: relative;
}

.navbar ul li a {
  display: block;
  padding: 10px 18px;
  color: #333;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.navbar ul li a:hover {
  color: #71120f;
}

/* القوائم المنسدلة */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 99;
}

.navbar ul li:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li a {
  padding: 10px 16px;
  color: #333;
  display: block;
}

.dropdown-menu li a:hover {
  background: #f5f5f5;
  color: #71120f;
}

/* زر طلب الخدمة */
.btn-request {
  background: #71120f;
  color: #fff;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-request:hover {
  background: #9c1f18;
}

/* إخفاء القائمة على الجوال */
@media (max-width: 991px) {
  .navbar { display: none; }
  .btn-request {
    padding: 8px 18px;
    font-size: 14px;
  }
}
/* ===== هيدر RTL نظيف ومتجاوب (اضفه في اخر ملف style.css) ===== */
.site-header { position: fixed; top: 0; left: 0; right: 0; background:#fff; z-index:9999;
  box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 20px; max-width:1200px; margin:auto; }

/* ترتيب داخلي مناسب للـ RTL: نستخدم row-reverse حتى تبقى العناصر على اليمين */
/* ✅ إصلاح اتجاه الهيدر ليكون اللوغو على اليمين، والقائمة بالوسط، والزر على اليسار */
.header-inner {
  flex-direction: row; /* عادي وليس row-reverse */
}

.header-left {
  order: 1; /* اللوغو على اليمين */
}

.main-nav {
  order: 2; /* القوائم في الوسط */
  text-align: center;
}

.header-cta {
  order: 3; /* زر طلب الخدمة على اليسار */
}

/* الشعار */
.site-logo { height:52px; width:auto; display:block; }

/* زر الهامبرغر (نُظهره فقط على الموبايل حسب رغبتك أو الآن نُخفيه لاحقًا) */
.menu-toggle { display:none; background:transparent; border:0; font-size:26px; cursor:pointer; }

/* القوائم - Desktop */
.main-nav { flex:1; margin:0 20px; }
.nav-links { list-style:none; display:flex; gap:6px; align-items:center; justify-content:flex-end; margin:0; padding:0; }

/* روابط */
.nav-links a { display:block; padding:10px 14px; color:#222; text-decoration:none; font-weight:600; transition:color .18s; }
.nav-links a:hover { color:var(--main); }

/* Dropdown (desktop) */
.has-dropdown { position:relative; }
.has-dropdown .dropdown-menu {
  position:absolute; top:100%; right:0; background:#fff; min-width:200px; list-style:none;
  margin:8px 0 0; padding:6px 0; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.08);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease;
  z-index:999;
}
.has-dropdown:hover > .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu li a { padding:10px 16px; color:#333; white-space:nowrap; display:block; }
.dropdown-menu li a:hover { background:var(--light-bg); color:var(--main); }

/* زر الطلب */
.btn-request { background:var(--main); color:#fff; padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:700; }

/* ===== Mobile adjustments: hide nav, show only logo + CTA (per your request) ===== */
@media (max-width: 768px) {
  .menu-toggle { display:none !important; } /* اخفاء زر الهامبرغر تماماً كما طلبت */
  .main-nav { display:none !important; }    /* اخفاء القوائم على الجوال */
  .nav-links { display:none !important; }
  .has-dropdown .dropdown-menu { display:none !important; } /* تأكيد اخفاء القوائم المنسدلة */
  .header-inner { padding:10px 14px; }
  .site-logo { height:46px; }
  .btn-request { padding:9px 14px; font-size:15px; }
}

/* ===== Safety overrides to cancel old hover rules on small screens if any ===== */
@media (max-width: 992px) {
  .dropdown:hover .dropdown-menu { display:none !important; }
  .has-dropdown .dropdown-menu { display:none !important; opacity:1 !important; visibility:visible !important; } /* but hidden by parent rules */
}
/* ✅ تنسيق الهيدر: اللوغو يمين، القائمة بالوسط، زر طلب الخدمة يسار */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 20px;
}

/* اللوغو على اليمين */
.header-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

/* القائمة في المنتصف */
.main-nav {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* زر طلب الخدمة على اليسار */
.header-cta {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* تأكد من أن زر طلب الخدمة بمحاذاة القوائم */
.header-cta a {
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  background-color: var(--main);
  color: #fff;
  transition: background 0.3s ease;
}

.header-cta a:hover {
  background-color: #000;
}
/* ✅ إصلاح القوائم المنسدلة عند تمرير الماوس */
.nav-links li.dropdown {
  position: relative;
}

.nav-links li .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff;
  min-width: 220px;
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  z-index: 99;
}

/* تظهر فقط عند تمرير الماوس */
.nav-links li.dropdown:hover > .dropdown-menu {
  display: flex;
  animation: dropdownFade 0.25s ease-in-out;
}

/* تصميم الروابط داخل القوائم المنسدلة */
.nav-links li .dropdown-menu li a {
  padding: 12px 18px;
  text-decoration: none;
  color: #333;
  display: block;
  transition: background 0.3s, color 0.3s;
}

.nav-links li .dropdown-menu li a:hover {
  background-color: var(--main);
  color: #fff;
}

/* حركة لطيفة */
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ===== إجبار عمل dropdown على الديسكتوب (تجاوز أي قواعد متضاربة) ===== */
@media (min-width: 992px) {
  /* اجعل القوائم مخفية افتراضياً */
  .nav-links li.dropdown > .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none !important;
  }

  /* عند hover أو عند وجود class 'show' — أظهر القائمة */
  .nav-links li.dropdown:hover > .dropdown-menu,
  .nav-links li.dropdown.show > .dropdown-menu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    flex-direction: column;
    z-index: 9999;
  }

  /* تأكد شكل الروابط داخل القائمة */
  .nav-links li.dropdown > .dropdown-menu li a {
    padding: 10px 16px !important;
    white-space: nowrap;
  }
}
/* === قسم أعمالنا === */
#works {
  padding: 80px 0;
  background: #f9f9f9;
  text-align: center;
}

#works .section-title {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #222;
}

/* الشبكة العامة */
#works .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  align-items: stretch;
}

/* كل كرت (مشروع) */
#works .card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#works .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#works .card h1 {
  font-size: 1.3rem;
  color: #1a1a1a;
  margin: 15px 0 10px;
}

#works .card p3 {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  padding: 0 15px 20px;
  display: block;
}

/* تأثير عند التمرير */
#works .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* === استجابة الجوال === */
@media (max-width: 992px) {
  #works .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #works .grid {
    grid-template-columns: 1fr;
  }

  #works .card img {
    height: 180px;
  }

  #works .card h1 {
    font-size: 1.1rem;
  }

  #works .card p3 {
    font-size: 0.9rem;
  }
}
/* === إجبار بطاقات الشبكة على نفس الارتفاع === */
#works .grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 أعمدة على الديسكتوب */
  gap: 25px !important;
  grid-auto-rows: 1fr !important; /* المفتاح: كل صف يأخذ نفس الارتفاع */
  align-items: stretch !important;
}

/* لكل بطاقة: اجعلها تملأ الخلية وتستخدم flex داخلياً */
#works .grid > .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important; /* مهم لمنع مشاكل overflow داخل grid */
}

/* فصل محتوى البطاقة إلى صورة وكتلة محتوى قابلة للتمدد */
#works .card img {
  width: 100% !important;
  height: 200px !important; /* أو الارتفاع اللي تريده */
  object-fit: cover !important;
  flex: 0 0 auto !important;
}

/* الكتلة النصية تحت الصورة تمتد لتملأ المساحة المتبقية */
#works .card .card-body {
  padding: 15px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* عنوان ووصف داخل البطاقة */
#works .card h1 {
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: #111;
}
#works .card .desc {
  color: #555;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* استجابة */
@media (max-width: 992px) {
  #works .grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  #works .grid { grid-template-columns: 1fr !important; }
  #works .card img { height: 180px !important; }
}
/* === تصحيح شبكة "أعمالنا" لتكون كل البطاقات بنفس الارتفاع === */
#works .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  align-items: stretch;
}

#works .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
}

#works .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#works .card-body {
  flex-grow: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#works .card h1 {
  font-size: 1.2rem;
  color: var(--main);
  margin-bottom: 10px;
}

#works .card p {
  color: #444;
  line-height: 1.8;
  flex-grow: 1;
}
/* ضبط حجم مربعات قسم "أعمالنا" */
#works .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

#works .card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 420px; /* 👈 يجبر كل البطاقات على نفس الطول */
  transition: transform 0.3s ease;
}

#works .card:hover {
  transform: translateY(-5px);
}

#works .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#works .card h1 {
  font-size: 1.2rem;
  margin: 15px;
  color: var(--main);
}

#works .card p {
  padding: 0 15px 20px;
  color: #444;
  line-height: 1.8;
  flex-grow: 1;
}
/* === ضبط تصميم قسم "أعمالنا" === */
#works .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 25px !important;
  align-items: stretch !important;
}

#works .card {
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 440px !important; /* 👈 اجعلها أطول أو أقصر حسب الشكل المطلوب */
  transition: transform 0.3s ease !important;
}

#works .card:hover {
  transform: translateY(-5px) !important;
}

#works .card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

#works .card h1 {
  font-size: 1.2rem !important;
  margin: 15px !important;
  color: var(--main) !important;
  text-align: center !important;
}

#works .card p {
  padding: 0 15px 20px !important;
  color: #444 !important;
  line-height: 1.8 !important;
  text-align: center !important;
  flex-grow: 1 !important;
}

/* جعل جميع البطاقات بنفس الطول حتى لو النص قصير */
#works .card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#works .card > * {
  flex-shrink: 0 !important;
}
/* ضبط شبكة "أعمالنا" لتكون 3x3 وبأطوال متساوية */
#works .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 2fr)) !important;
  gap: 40px !important;
  align-items: stretch !important;
}

/* توحيد ارتفاع كل كرت */
#works .card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 420px !important; /* غيّر الرقم حسب الشكل اللي يعجبك */
  box-sizing: border-box !important;
}

/* ضبط الصورة لتكون بنفس العرض */
#works .card img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  border-radius: 10px 10px 0 0 !important;
}

/* النصوص داخل المربعات */
#works .card h1, 
#works .card p {
  text-align: center !important;
  margin: 10px 0 !important;
  flex-grow: 1 !important;
}

/* تأكيد أن النصوص ما تكسر التناسق */
#works .card p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* ======= توحيد أحجام مربعات "خدماتنا" ======= */
#services .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 2fr)) !important;
  gap: 25px !important;
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

#services .card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: 380px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 20px !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#services .card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12) !important;
}

#services .card i {
  font-size: 45px !important;
  color: var(--main) !important;
  margin-bottom: 12px !important;
}

#services .card h3 {
  font-size: 1.2rem !important;
  color: var(--main) !important;
  margin-bottom: 8px !important;
}

#services .card p {
  color: #444 !important;
  line-height: 1.6 !important;
  flex: 1 1 auto !important;
}
/* ===== توحيد حجم صور خدماتنا ===== */
#services .card img {
  width: 100px !important;       /* عرض ثابت */
  height: 100px !important;      /* ارتفاع ثابت */
  object-fit: contain !important; /* يحافظ على نسبة الصورة */
  margin: 0 auto 15px auto !important; /* توسيط الصورة وإضافة مسافة تحتها */
  display: block !important;
}
/* ===== تنسيق قسم شركاؤنا ===== */
#partners .container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* يوسّط الصور أفقياً */
  align-items: center !important;
  gap: 30px !important; /* مسافة بين الصور */
}

#partners img {
  width: 300px !important;   /* يمكنك تعديل الحجم حسب رغبتك */
  height: auto !important;   /* يحافظ على نسبة الصورة */
  object-fit: contain !important;
  display: block !important;
  filter: grayscale(0%) !important; /* خليه طبيعي، أو غامق لو حابب */
  transition: transform 0.3s ease;
}

#partners img:hover {
  transform: scale(1.05); /* تأثير خفيف عند التمرير */
}
/* ===== إصلاح تنسيق قسم شركاؤنا ===== */
#partners {
  text-align: center;
}

#partners .section-title {
  display: block;
  width: 100%;
  margin-bottom: 40px;
  color: var(--main);
}

#partners .container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* يوسّط الصور أفقياً */
  align-items: center !important;
  gap: 30px !important; /* مسافة بين الصور */
}

#partners img {
  width: 400px !important;   /* حجم الصور */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: grayscale(0%);
  transition: transform 0.3s ease;
}

#partners img:hover {
  transform: scale(1.05);
}
/* ===== إصلاح عرض قسم أعمالنا على الجوال ===== */
@media (max-width: 768px) {
  #works .grid {
    grid-template-columns: repeat(2, 1fr) !important; /* عمودين في كل سطر على الجوال */
    gap: 20px !important;
  }

  #works .card {
    min-height: 340px !important;
  }
}

@media (max-width: 480px) {
  #works .grid {
    grid-template-columns: 1fr !important; /* عمود واحد في السطر على الشاشات الصغيرة جدًا */
  }
}
/* ===== إصلاح اختفاء قسم أعمالنا على الجوال ===== */
@media (max-width: 1024px) {
  #works {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
  }

  #works .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  #works .card {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    min-height: 340px !important;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
  }
}

@media (max-width: 600px) {
  #works .grid {
    grid-template-columns: 1fr !important;
  }
}
/* ✅ إصلاح تداخل الهيدر مع أول قسم (مثل الهيرو أو العنوان) */
body {
  padding-top: 90px !important; /* غطاء فوق المحتوى لتجنب التداخل مع الهيدر */
}
/* ضمان وجود مساحة فوق المحتوى مساوية لارتفاع الهيدر */
:root {
  --header-offset: 90px; /* قيمة افتراضية لو ما اشتغل JS */
}

/* نطبق المسافة على العنصر الرئيسي بدل body لو بتحب */
body {
  padding-top: var(--header-offset) !important;
}

/* تأكد الهيدر فوق كل شيء */
.site-header, .header, .navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* لو عندك wp admin bar (شريط المشرف) تأكد ما يغطي */
#wpadminbar {
  z-index: 10000 !important;
}
/* أخفِ اسم الموقع في الهيدر بصريًا (محفوظ للـ SEO وقرّاء الشاشة) */
.site-title,
.site-branding .site-title,
.logo .site-title,
.logo-link .site-title,
.header .site-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* اخفاء اسم الموقع من الهيدر تماماً */
.site-title,
.site-branding .site-title,
.logo .site-title,
.logo-link .site-title,
.header .site-title {
  display: none !important;
}
.site-title,
.site-description {
  display: none !important;
}
/* إخفاء عنوان الموقع والوصف في كل الحالات الممكنة */
.site-title,
.site-title a,
.wp-block-site-title,
.site-branding .site-title,
.header .site-title,
.site-header .site-title,
.site-description,
.wp-block-site-tagline,
.header .site-description,
.site-branding .site-description,
.header-titles-wrapper,
.wp-block-site-title .site-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
/* إخفاء العنوان والوصف في الترويسة */
#headerimg,
#headerimg h1,
#headerimg .description {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* ===== إجبار توحيد حجم صور أعمالنا (قوي مع !important) ===== */
#works .card img,
#works .card picture img,
#works .card .project-img img {
  width: auto !important;
  max-width: 100% !important;
  height: 120px !important;        /* غيّر العدد لو تبي أصغر/أكبر */
  object-fit: contain !important;  /* show whole image, no crop */
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 10px !important;        /* فراغ حول الصورة */
  background-color: #ffffff !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* لو بعض الصور مُستخدمة كـ background-image على عناصر أخرى */
#works .card .img-bg {
  width: 100% !important;
  height: 220px !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: block !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
/* === تأثير أبيض وأسود للصور في قسم أعمالنا === */
#works .card img {
  filter: grayscale(100%) brightness(1);  /* أبيض وأسود خفيف */
  transition: filter 0.5s ease, transform 0.3s ease;
}

/* عند تمرير الماوس على الصورة */
#works .card:hover img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.03);  /* تكبير بسيط يعطي لمسة أنيقة */
}
/* تكبير حجم اللوغو */
.logo img {
  height: 150px !important;   /* عدّل الرقم حسب الحجم المطلوب */
  width: auto !important;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
  margin: 0 auto; /* يضمن التوسيط العمودي إن لزم */
}

/* تأثير بسيط عند التمرير */
.logo img:hover {
  transform: scale(1.05);
}g
/* إزالة أي فراغ أبيض أعلى الصفحة */body, html {
  margin: 0 !important;
  padding: 0 !important;
}

header, .site-header {
  margin: 0 !important;
  padding: 0 !important;
}

#wpadminbar {
  top: 0 !important;
}

/* أحياناً القالب يضيف فراغ من قسم المحتوى الأول */
section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===== FORCE remove top gap & top border/shadow ===== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

/* افضِّل إزالة أي padding-top سبق وضُعِف */
body { padding-top: 0 !important; }

/* إزالة أي مسافات أو حدود على عناصر الهيدر والـ wrapper */
header, .site-header, .header, .navbar, .site, .wrap, #page {
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;
}

/* إزالة أي خط أو حد علوي يتركز على الـ body أو html */
html::before, body::before, header::before, .site-header::before, .navbar::before {
  content: none !important;
  display: none !important;
}

/* إزالة أي hr أو عنصر بقيمة 0 height في أعلى الصفحة */
body > hr:first-child, body > .divider:first-child {
  display: none !important;
}

/* تعيين z-index لمنع ظهور شريط أدمن أسفل الهيدر */
#wpadminbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* اجبار الهيدر أن يكون أعلى من أي شريط ادمن */
.site-header, .header, .navbar {
  z-index: 100000 !important;
  top: 0 !important;
}
/* === إجبار صور الشركاء صغيرة ومسافات ضيقة + override قواعد Swiper === */
.mySwiper .swiper-wrapper {
  display: flex !important;
  gap: 5px !important;                 /* المسافة بين السلايدات */
  align-items: center !important;
}

.mySwiper .swiper-slide {
  width: auto !important;              /* السماح لعرض السلايد أن يعتمد على محتواه */
  flex: 0 0 auto !important;           /* منع التمدد */
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* FORCE image small regardless of other rules */
.mySwiper .swiper-slide img {
  width: 200px !important;              /* ← حجم الصورة المطلوب (غيّره لو تريد أصغر/أكبر) */
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 2px !important;
  display: block !important;
  filter: grayscale(100%) !important;
  opacity: 0.85 !important;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease !important;
}

/* عند hover */
.mySwiper .swiper-slide img:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

/* تأكد أن السلايدر يمتد عرض الشاشة إن رغبت */
.partners-slider {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

/* تقليل الـ padding الجانبي داخل السلايدر */
.mySwiper { padding: 0 1vw !important; }

/* استجابة */
@media (max-width: 768px) {
  .mySwiper .swiper-slide img { width: 48px !important; }
  .mySwiper .swiper-wrapper { gap: 6px !important; }
}
/* ===== صور الشركاء - حجم متوسط متناسق ===== */
html body .partners-slider .swiper-slide img {
  width: 150px !important;       /* كان 70px، زدناه ليتوازن الشكل */
  height: auto !important;
  max-width: none !important;
  max-height: 150px !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  filter: grayscale(100%) !important;
  opacity: 0.9 !important;
  transition: transform .3s ease, filter .3s ease, opacity .3s ease !important;
}

/* عند تمرير الماوس */
html body .partners-slider .swiper-slide img:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
  transform: scale(1.08) !important;
}
/* تقليل المسافة بين صور الشركاء في السلايدر */
html body .partners-slider .swiper-slide {
  margin-right: 1px !important;  /* المسافة بين كل صورة وصورة، كان كبير جدًا */
  margin-left: 1px !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/* تصغير صناديق الصور وتقليل المسافات في سلايدر الشركاء */
.partners-slider .swiper-slide {
  flex: 0 0 auto !important;
  width: 1px !important;        /* عرض الصندوق */
  height: auto !important;
  margin: 0 1px !important;       /* تقليل المسافة بين الصور */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.partners-slider .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}
/* 🔧 إصلاح حجم صناديق سلايدر شركاؤنا */
.partners-slider .swiper-wrapper {
  display: flex !important;
  align-items: center !important;
}

.partners-slider .swiper-slide {
  width: 20px !important;         /* 🔹 غيّرها حسب ما يناسبك (جرب 120، 150، 180) */
  height: auto !important;
  flex-shrink: 0 !important;
  margin: 0 1px !important;        /* 🔹 المسافة بين الصور */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.partners-slider .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}
/* ===== تنسيقات نهائية لسلايدر الشركاء ===== */
.partners-slider { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 30px 0 !important; box-sizing: border-box !important; background: #fff; }
.partners-slider .section-title { text-align:center; margin-bottom:18px; color:var(--main); }

/* wrapper */
.partners-slider .swiper-wrapper { display:flex !important; align-items:center !important; gap:6px !important; }

/* slide container baseline (will be overwritten inline by JS) */
.partners-slider .swiper-slide { box-sizing:border-box !important; display:flex !important; justify-content:center !important; align-items:center !important; padding:0 !important; margin:0 !important; }

/* الصورة داخل كل سلايد */
.partners-slider .swiper-slide img {
  width: 100% !important;     /* will fill the slide width forced by JS */
  height: auto !important;
  object-fit: contain !important;
  display:block !important;
  opacity:0.9 !important;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease !important;
  padding: 2px !important;
}
.partners-slider .swiper-slide img:hover { filter:grayscale(0%) !important; transform:scale(1.06) !important; opacity:1 !important; }

/* responsive tweak */
@media (max-width: 768px) {
  .partners-slider .swiper-wrapper { gap:1px !important; }
}
/* حركات السلايدر */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* السلايدر العام */
.partners-slider {
  overflow: hidden;
  width: 100%;
  margin: 60px 0;
  text-align: center;
}

.partners-slider .slider {
  overflow: hidden;
}

.partners-slider .slide-track {
  display: flex;
  width: calc(250px * 18); /* 9 صور × 2 للتكرار */
  animation: scroll-left 40s linear infinite;
}

.partners-slider.reverse .slide-track {
  animation: scroll-right 40s linear infinite;
}

.partners-slider .slide {
  flex: 0 0 auto;
  width: 150px;
  margin: 0 8px;
}

.partners-slider .slide img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: all 0.3s ease-in-out;
}

.partners-slider .slide img:hover {
  transform: scale(1.05);
}
/* ===== سلايدر موردينا (الثاني) ===== */
.mySwiperRev .swiper-wrapper {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
}

.mySwiperRev .swiper-slide {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.mySwiperRev .swiper-slide img {
  width: 200px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 2px !important;
  display: block !important;
  transition: transform .25s ease, opacity .25s ease !important;
  opacity: 0.9 !important;
}

.mySwiperRev .swiper-slide img:hover {
  transform: scale(1.06) !important;
  opacity: 1 !important;
}

.mySwiperRev { padding: 0 1vw !important; }
/* 🔹 تعطيل الفلتر الرمادي في سلايدر موردينا فقط */
.mySwiperRev .swiper-slide img {
  filter: none !important;
  opacity: 1 !important;
}

/* لو بدك تأثير بسيط عند تمرير الماوس */
.mySwiperRev .swiper-slide img:hover {
  transform: scale(1.06) !important;
  opacity: 1 !important;
}
/* === إلغاء أي فلتر رمادي للسلايدر الثاني - أقوى قواعد ممكنة === */
html body .partners-slider#partners2 .mySwiperRev .swiper-slide img,
html body .mySwiperRev .swiper-slide img,
.mySwiperRev .swiper-slide img,
#partners2 .swiper-slide img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* أضف أيضاً إلغاء الفلتر على الأبوّاء (في حال طُبّق على العنصر الحاوي) */
html body .partners-slider#partners2,
html body .partners-slider#partners2 .partners-inner,
html body .partners-slider#partners2 .swiper,
html body .partners-slider#partners2 .swiper-wrapper,
html body .partners-slider#partners2 .swiper-slide {
  filter: none !important;
  -webkit-filter: none !important;
}
/* ===== Sera: overrides for mySwiperRev (pure CSS continuous slider) ===== */
/* ensure wrapper is horizontal and images are colored */
.mySwiperRev,
.mySwiperRev .swiper-wrapper,
#partners2 .swiper-wrapper {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* slide sizing — will be respected when JS forces widths */
.mySwiperRev .swiper-slide {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  margin: 0 6px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* images: always colored, fit box */
.mySwiperRev .swiper-slide img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  width: 200px !important;    /* يمكنك تغيير العرض هنا */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform .25s ease !important;
}

/* hover nice effect */
.mySwiperRev .swiper-slide img:hover { transform: scale(1.06) !important; }

/* animation will be set dynamically by JS — no CSS animation here to avoid conflicts */
/* تعطيل أي تفاعل داخل السلايدرات */
.mySwiper, 
.mySwiperRev {
  pointer-events: none !important; /* يمنع الماوس واللمس */
  user-select: none !important; /* يمنع تحديد العناصر */
}

/* لو تبي تبقي الصور نفسها فعالة (لكن بدون توقف التحرك)
   احذف السطر الأول وخليه فقط على الصور */
.mySwiper img,
.mySwiperRev img {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important; /* يمنع سحب الصورة */
}

/* إزالة أي تأثير hover */
.mySwiper img:hover,
.mySwiperRev img:hover {
  filter: none !important;
  transform: none !important;
}


/* ===== خلفية شفافة للهيرو ===== */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('https://sera.com.sa/home/wp-content/uploads/2025/11/IMG_0686.jpeg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  z-index: 0;
}

/* ✅ طبقة الشفافية فوق الصورة */
#hero::after {
  content: "";
  position: absolute;
  inset: 0; /* اختصار top/left/right/bottom = 0 */
  background-color: rgba(0, 0, 0, 0.6); /* ← غيّر 0.6 لشفافية مختلفة */
  z-index: 1;
  pointer-events: none;
}

/* ✅ تأكيد أن المحتوى فوق الطبقة الشفافة */
#hero .hero-content {
  position: relative;
  z-index: 2 !important;
  color: #fff;
}
/* ألوان النصوص في قسم الهيرو */
#hero .hero-content h1 {
  color: #ffffff; /* ← غيّر هذا للون العنوان الرئيسي */
}

#hero .hero-content p {
  color: #e0e0e0; /* ← غيّر هذا للون النص الفرعي */
}

/* الأزرار داخل الهيرو */
#hero .hero-buttons a.btn-primary {
  color: #fff; /* لون النص داخل الزر */
  background-color: #ddc077; /* لون خلفية الزر */
}

#hero .hero-buttons a.btn-secondary {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2); /* خلفية شفافة شوي */
  border: 1px solid #fff;
}
/* 🎯 سكشن تواصل معنا */
.contact-section {
  background: #fff !important;
  padding: 60px 20px !important;
  text-align: center !important;
  position: relative !important;
}

.contact-section .section-title {
  color: var(--main, #1b63ff) !important;
  font-size: 28px !important;
  margin-bottom: 30px !important;
}

/* 🔹 الفورم */
.contact-form {
  max-width: 600px !important;
  margin: 0 auto !important;
  text-align: right !important;
  background: #f9f9f9 !important;
  padding: 30px !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05) !important;
  direction: rtl !important;
}

.contact-form .form-group {
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.contact-form label {
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
}

.contact-form input,
.contact-form textarea {
  width: 100% !important;
  padding: 12px 15px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  font-family: inherit !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--main, #1b63ff) !important;
  box-shadow: 0 0 0 3px rgba(27, 99, 255, 0.15) !important;
  outline: none !important;
}

.contact-form textarea {
  resize: vertical !important;
  min-height: 120px !important;
}

/* 🔘 زر الإرسال */
.contact-form button.btn-primary {
  background: var(--main, #1b63ff) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
  display: block !important;
  margin: 10px auto 0 !important;
}

.contact-form button.btn-primary:hover {
  background: #144bcc !important;
}

/* 📱 استجابة للجوال */
@media (max-width: 768px) {
  .contact-form {
    padding: 20px !important;
  }

  .contact-form label {
    font-size: 14px !important;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 14px !important;
  }
}

/* ✅ بوب أب تأكيد الإرسال */
#contact-popup {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important; /* خلفية غامقة */
  display: none !important;
  justify-content: center;
  align-items: center;
  z-index: 9999 !important;
}

#contact-popup.active {
  display: none !important;
}

#contact-popup .popup-content {
  background: #fff !important;
  color: #000 !important;
  padding: 30px 40px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  text-align: center !important;
  max-width: 400px !important;
  width: 90% !important;
  font-size: 18px !important;
}

#contact-popup button {
  background-color: #1b63ff !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  margin-top: 15px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

#contact-popup button:hover {
  background-color: #144bcc !important;
}
/* 🎯 تنسيق البوب أب لتأكيد الإرسال */
#contact-popup {
  display: none !important;
  position: fixed !important; /* بدل absolute → يغطي الشاشة كاملة */
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important; /* 🔹 ظل يغطي كامل الشاشة */
  z-index: 999999 !important; /* فوق كل شيء */
  justify-content: center !important;
  align-items: center !important;
}

/* محتوى البوب أب */
#contact-popup .popup-content {
  background: #fff !important;
  color: #333 !important;
  padding: 30px 40px !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  max-width: 400px !important;
  width: 90% !important;
  font-size: 17px !important;
  animation: fadeInScale 0.3s ease forwards !important;
}

/* زر الإغلاق */
#contact-popup .popup-content button {
  margin-top: 20px !important;
  background: var(--main, #1b63ff) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}

#contact-popup .popup-content button:hover {
  background: #144bcc !important;
}

/* حركة دخول بسيطة */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ✅ البوب أب يغطي كامل الشاشة */
#contact-popup {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 99999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ✅ محتوى البوب أب */
#contact-popup .popup-content {
  background: #fff !important;
  padding: 30px 40px !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  max-width: 400px !important;
  width: 90% !important;
  animation: fadeIn 0.3s ease !important;
}

/* ✅ زر الإغلاق */
#contact-popup .popup-content button {
  margin-top: 20px !important;
  background: var(--main, #1b63ff) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 15px !important;
  cursor: pointer !important;
}

#contact-popup .popup-content button:hover {
  background: #144bcc !important;
}

/* حركة خفيفة */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
#contact-popup {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 99999 !important;
  justify-content: center !important;
  align-items: center !important;
}
#contact-popup {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 99999 !important;
  justify-content: center !important;
  align-items: center !important;
}

#contact-popup.active {
  display: flex !important;
}

#contact-popup .popup-content {
  background: #fff !important;
  color: #333 !important;
  padding: 25px 35px !important;
  border-radius: 12px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

#close-popup {
  margin-top: 15px !important;
  background: #0073e6 !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
/* تغيير لون hover لزر الإرسال داخل سكشن "تواصل معنا" فقط */
#contact .contact-form button.btn-primary:hover,
#contact-form button[type="submit"]:hover {
  background-color: #9c1f18 !important; /* غيّر اللون هنا */
  color: #ffffff !important;
  border-color: transparent !important;
}
.header-lang {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.header-lang .lang-btn {
  border: 1px solid var(--main);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  text-decoration: none;
  color: var(--main);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.header-lang .lang-btn:hover {
  background: var(--main);
  color: #fff;
}

/* للجوال نخلي الوضع مرتب */
@media (max-width: 768px) {
  .header-lang {
    margin-right: 0;
    margin-left: 10px;
  }
}
.nav-links a {
  white-space: nowrap !important;
}
.nav-links {
  gap: 30px !important;
}
footer {
  background: #71120f;
  color: #fff;
  padding: 25px 0;
  text-align: center;
}

footer .socials a {
  color: #ffdca3;
  text-decoration: none;
  font-weight: 600;
}

footer .socials a:hover {
  color: #fff;
}

.footer-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-btn {
  padding: 10px 18px;
  border-radius: 6px;
  color: white !important;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-block;
  transition: 0.25s ease;
}

.whatsapp-btn {
  background: #25d366;
}

.whatsapp-btn:hover {
  background: #1ca955;
}

.maps-btn {
  background: #4285f4;
}

.maps-btn:hover {
  background: #3367d6;
}
.footer-icons {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.footer-icon {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: 0.25s ease;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

.footer-icon img {
  width: 70%;
  height: auto;
}

/* واتساب */
.footer-icon.whatsapp:hover {
  background: #25d366;
}

/* خرائط جوجل */
.footer-icon.maps:hover {
  background: #4285f4;
}
/* إعادة لون الفوتر الأصلي */
footer {
  background-color: #71120f !important;  /* ← غيّر هنا لو كان لون آخر */
  color: #fff !important;
}

/* إصلاح الأيقونات بدون لمس الخلفية */
.footer-icon {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.15) !important; /* خلفية شفافة جميلة */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: 0.25s ease;
  box-shadow: none !important;
}

.footer-icon img {
  width: 70%;
  height: auto;
}

/* تأثير hover بدون تغيير خلفية الفوتر */
.footer-icon.whatsapp:hover {
  background: #25d366 !important;
}

.footer-icon.maps:hover {
  background: #4285f4 !important;
}
/* ===== لون الفوتر أسود ===== */
footer {
  background-color: #000 !important;
  color: #fff !important;
}

/* ===== أيقونات الفوتر ===== */
.footer-icon {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.12) !important; /* خلفية خفيفة وشفافة */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: 0.25s ease;
}

.footer-icon img {
  width: 70%;
  height: auto;
}

/* تأثير hover */
.footer-icon.whatsapp:hover {
  background: #25d366 !important;
}

.footer-icon.maps:hover {
  background: #4285f4 !important;
}

/* ==== كروت أعمالنا – بدون نطّة مزعجة + تأثيرات Fade حقيقية ==== */

/* الكرت */
#works .card {
  cursor: pointer;
  transition: box-shadow 0.25s ease;
  position: relative;
  min-height: 340px; /* عدلها حسب طول الوصف */
}

/* hover خفيف بدون رفع/نزلة */
#works .card:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* العنوان والوصف */
#works .card h1,
#works .card .desc {
  padding: 12px 16px;
  margin: 0;
  line-height: 1.8;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* العنوان ظاهر افتراضياً */
#works .card h1 {
  opacity: 1;
  transform: translateY(0);
}

/* الوصف مخفي افتراضياً */
#works .card .desc {
  opacity: 0;
  transform: translateY(6px);
  display: none;
}

/* عند فتح الوصف */
#works .card.show-desc h1 {
  opacity: 0;
  transform: translateY(-6px);
}

/* يبقى h1 موجود لكن شفاف — ثم نخفيه بعد الأنميشن */
#works .card.show-desc .desc {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* عندما يغلق (رجوع للعنوان) */
#works .card:not(.show-desc) .desc {
  opacity: 0;
  transform: translateY(6px);
}

/* بعد انتهاء الأنميشن نخفي الوصف تماماً */
#works .card:not(.show-desc) .desc {
  animation: hideDesc 0.01s linear 0.36s forwards;
}

@keyframes hideDesc {
  to { display: none; }
}
/* ============================
   توحيد حجم صور قسم أعمالنا
   ============================ */

#works .card img {
  width: 100% !important;
  height: 200px !important; /* اضبطه حسب ما يناسب تصميمك */
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px !important;
  display: block !important;
}
/* زر البرجر – افتراضياً مخفي (يظهر فقط على الجوال) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

/* زر طلب خدمة داخل القائمة */
.nav-cta .btn-request-link {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--main);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 10px;
}

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

  .header-inner {
    gap: 8px;
  }

  .menu-toggle {
    display: block;
  }

  /* نخفي القائمة افتراضياً في الجوال */
  .main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: none;
    z-index: 999;
  }

  /* لما تنفتح (عن طريق JS) */
  .main-nav.open {
    display: block;
  }

  .nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    margin: 0;
    gap: 4px;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-decoration: none;
    color: #222;
  }

  /* إخفاء زر طلب خدمة خارج القائمة على الجوال */
  .header-cta {
    display: none;
  }

  /* إظهار زر طلب خدمة داخل القائمة */
  .nav-cta {
    display: block !important;
  }

  /* لو عندك dropdowns نخليها تسلسل عادي تحت بعض */
  .has-dropdown .dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding-right: 10px;
    display: none; /* افتراضياً مخفية */
  }

  /* نقدر نخليها تفتح عند الضغط لاحقاً لو حبيت */
}

/* =================== الكمبيوتر =================== */
@media (min-width: 769px) {

  .main-nav {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
  }

  /* إخفاء زر طلب خدمة داخل القائمة على الكمبيوتر */
  .nav-cta {
    display: none;
  }

  /* إخفاء زر البرجر على الكمبيوتر */
  .menu-toggle {
    display: none;
  }
}
/* إجبار ظهور زر الـ Burger */
.menu-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999999 !important;

    font-size: 28px !important;
    padding: 4px 10px !important;
    background: none !important;
    border: none !important;
    color: #111 !important;
    cursor: pointer !important;
}
.menu-toggle {
    position: absolute !important;
    left: 20px !important;   /* ← اجعل الزر دائمًا في اليسار */
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
/* القائمة مغلقة افتراضيًا على الجوال */
@media (max-width: 768px) {
    .main-nav {
        display: none !important;
        position: absolute !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        background: white !important;
        padding: 20px 0 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        text-align: center !important;
        z-index: 9999 !important;
    }

    /* عند الفتح */
    .main-nav.open {
        display: block !important;
    }

    .nav-links {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* إرجاع زر طلب خدمة داخل القائمة */
    .header-cta {
        display: none !important;
    }
    .nav-links:after {
        content: "";
        display: block;
        margin-bottom: 20px;
    }
}
/* 🔹 إخفاء زر القائمة على الشاشات الكبيرة (كمبيوتر) */
.menu-toggle {
    display: none !important;
}

/* 🔹 إظهار زر القائمة فقط على الجوال */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        position: absolute !important;
        left: 20px !important; /* اليسار دائماً */
        top: 25px !important;
        font-size: 30px !important;
        background: none !important;
        border: none !important;
        color: #000 !important;
        cursor: pointer !important;
        z-index: 9999 !important;
    }
}
/* ========================
   إعداد قائمة الجوال داخل زر burger
   ======================== */

/* شكل القائمة لما تفتح في الجوال */
@media (max-width: 768px) {

  .main-nav {
    display: none !important;
    position: absolute !important;
    top: 70px !important;       /* تحت الهيدر */
    left: 0 !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    z-index: 9998 !important;
  }

  .main-nav.open {
    display: block !important;
  }

  .nav-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 20px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .nav-links li {
    width: 100% !important;
  }

  .nav-links > li > a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    color: #222 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: right !important;
  }

  /* زر طلب خدمة داخل القائمة (اللي عملناه mobile-request-btn) */
  .mobile-request-btn {
    display: block !important;
    margin-top: 8px !important;
  }

  .btn-request-mobile {
    background: var(--main) !important;
    color: #fff !important;
    padding: 12px 20px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-top: 4px !important;
  }

  .btn-request-mobile:hover {
    background: #000 !important;
  }

  /* القوائم المنسدلة في الجوال */
  .has-dropdown > .drop-toggle {
    position: relative !important;
  }

  /* نخفي القوائم الفرعية افتراضياً في الجوال */
  .has-dropdown .dropdown-menu {
    display: none !important;
    list-style: none !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
    margin: 5px 0 8px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* لما نضيف .open على li نفتح القائمة الفرعية */
  .has-dropdown.open .dropdown-menu {
    display: block !important;
  }

  .has-dropdown .dropdown-menu li a {
    border-bottom: none !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
    color: #555 !important;
  }

}

/* =======================
   وضع الكمبيوتر كما هو
   ======================= */
@media (min-width: 769px) {
  .main-nav {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
  }

  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    padding: 0 !important;
  }

  .mobile-request-btn {
    display: none !important;
  }
}
/* ===== زر القائمة (Burger) على اليسار فقط في الجوال ===== */
.menu-toggle {
  display: none !important;
}

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

  /* إظهار زر البرجر في الجوال فقط */
  .menu-toggle {
    display: block !important;
    position: absolute !important;
    left: 20px !important;
    top: 22px !important;
    font-size: 28px !important;
    background: none !important;
    border: none !important;
    color: #000 !important;
    cursor: pointer !important;
    z-index: 10001 !important;
  }

  /* إخفاء زر طلب خدمة في الهيدر (اللي برا القائمة) */
  .header-cta {
    display: none !important;
  }

  /* إعداد القائمة المنسدلة الكاملة */
  .main-nav {
    display: none !important;
    position: absolute !important;
    top: 70px !important;      /* تحت الهيدر */
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    padding: 12px 20px 18px !important;
    z-index: 10000 !important;
  }

  .main-nav.open {
    display: block !important;
  }

  .nav-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .nav-links li {
    width: 100% !important;
  }

  .nav-links > li > a {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
    text-decoration: none !important;
    color: #222 !important;
    border-bottom: 1px solid #eee !important;
    text-align: right !important;
  }

  .nav-links > li:last-child > a {
    border-bottom: none !important;
  }

  /* 🔴 إلغاء القوائم الفرعية تمامًا على الجوال */
  .has-dropdown .dropdown-menu {
    display: none !important;
  }

  /* زر طلب خدمة داخل القائمة في الجوال */
  .mobile-request-btn {
    display: block !important;
    margin-top: 10px !important;
  }

  .btn-request-mobile {
    background: var(--main) !important;
    color: #fff !important;
    padding: 12px 20px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-top: 4px !important;
  }

  .btn-request-mobile:hover {
    background: #000 !important;
  }
}

/* كمبيوتر: القائمة العادية بدون Burger */
@media (min-width: 769px) {
  .main-nav {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .mobile-request-btn {
    display: none !important;
  }

  /* إخفاء زر البرجر على الكمبيوتر */
  .menu-toggle {
    display: none !important;
  }
}
/* ===== قائمة الموبايل فل سكرين ===== */

.mobile-menu-overlay {
  position: fixed !important;
  inset: 0 !important;                /* top/right/bottom/left: 0 */
  background: rgba(0, 0, 0, 0.82) !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  z-index: 99998 !important;
}

.mobile-menu-overlay.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-menu-inner {
  position: relative !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  height: 100% !important;
  padding: 80px 20px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: right !important;
  direction: rtl !important;
}

/* زر الإغلاق (X) */
.mobile-menu-close {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;              /* يبقى على اليسار دائماً */
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 26px !important;
  cursor: pointer !important;
}

/* الروابط داخل القائمة */
.mobile-menu-links {
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

.mobile-menu-links li {
  margin-bottom: 14px !important;
}

.mobile-menu-links a {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  display: block !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* زر طلب خدمة داخل القائمة */
.mobile-menu-cta {
  margin-top: 25px !important;
  display: block !important;
  text-align: center !important;
  background: var(--main) !important;
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* منع السكول في الخلفية لما القائمة مفتوحة */
body.menu-open {
  overflow: hidden !important;
}

/* ===== سلوك حسب حجم الشاشة ===== */

/* موبايل: نستخدم فل سكرين، ونخفي الناف العادية */
@media (max-width: 768px) {

  .menu-toggle {
    display: block !important;
    position: absolute !important;
    left: 20px !important;
    top: 22px !important;
    font-size: 28px !important;
    background: none !important;
    border: none !important;
    color: #000 !important;
    cursor: pointer !important;
    z-index: 99999 !important;
  }

  .main-nav {
    display: none !important;   /* نخفي القائمة العادية */
  }

  .header-cta {
    display: none !important;   /* نخفي زر طلب خدمة العلوي على الموبايل */
  }
}

/* كمبيوتر: ما نستخدم فل سكرين ولا زر برجر */
@media (min-width: 769px) {
  .mobile-menu-overlay {
    display: none !important;
  }

  .menu-toggle {
    display: none !important;
  }

  .main-nav {
    display: block !important;
  }

  .header-cta {
    display: block !important;
  }
}
/* خلفية القائمة الفل سكرين مع تغبيش قوي */
.mobile-menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.75) !important;      /* تغميق الخلفية */
  backdrop-filter: blur(7px) !important;            /* تغبيش الخلفية */
  -webkit-backdrop-filter: blur(7px) !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  z-index: 99998 !important;
}

.mobile-menu-overlay.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* تأكد إن صندوق القائمة نفسه أبيض صافي وما يختلط مع الخلفية */
.mobile-menu-inner {
  position: relative !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  height: 100% !important;
  padding: 80px 20px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: right !important;
  direction: rtl !important;
  background: #ffffff !important;                   /* مهم! */
  border-radius: 0 !important;
}
/* ===== إصلاح ألوان قائمة الموبايل ===== */
.mobile-menu-inner,
.mobile-menu-inner * {
  color: #000 !important;          /* نص أسود */
}

/* الروابط */
.mobile-menu-links a {
  color: #000 !important;
}

/* زر طلب خدمة داخل القائمة */
.mobile-menu-cta {
  background: #71120f !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
}

/* زر الإغلاق (X) */
.mobile-menu-close {
  color: #000 !important;
}
/* إلغاء الفلتر الرمادي عن صور أعمالنا */
#works .card img {
  filter: none !important;
  opacity: 1 !important;
  transition: transform .25s ease, opacity .25s ease !important;
}

/* عند الهوفر نخلي التأثير فقط تكبير بسيط */
#works .card:hover img {
  transform: scale(1.04) !important;
}
/* =============================
   🔥 شريط الإحصائيات — نسخة محسنة
==============================*/

.stats-bar {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: rgba(113, 18, 15, 0.65);
  color: #fff !important;
  padding: 12px 15px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px !important;        /* ⬅️ زيادة المسافة بين الإحصائيات */

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  position: relative;
  bottom: -200px !important;    /* ⬅️ الشريط ينزل تحت أكثر */
}

.stats-bar .stat {
  text-align: center;
}

.stats-bar .num {
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: 2px;
  display: block;
}

.stats-bar p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.95;
}

/* 🔥 للجوال */
@media (max-width: 768px) {
  .stats-bar {
    flex-direction: column;
    gap: 12px !important;
    padding: 15px;
    bottom: -60px !important; /* نخفف المسافة على الجوال */
  }
  .stats-bar .num {
    font-size: 1.5rem;
  }
  .stats-bar p {
    font-size: 0.85rem;
  }
}
.stats-bar {
  border-top: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.20) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.15) !important;
}
.stats-bar .stat {
  position: relative;
}

/* 🔧 إلغاء الفواصل القديمة */
.stats-bar .stat::after {
  content: none !important;
}

/* 🔹 فواصل عمودية بسيطة بين الإحصائيات على الديسكتوب */
.stats-bar .stat {
  padding: 0 12px; /* شوية مسافة يمين ويسار */
}

.stats-bar .stat:not(:last-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* لو الموقع RTL (عربي) نخلي الفاصل على اليمين بدل اليسار */
[dir="rtl"] .stats-bar .stat:not(:last-child) {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

/* 🔹 على الجوال نخفي الفواصل عشان العناصر تحت بعض */
@media (max-width: 768px) {
  .stats-bar .stat {
    border: none !important;
    padding: 0;
  }
}
/* إزالة أي فواصل قديمة */
.stats-bar .stat::after,
.stats-bar .stat::before {
  content: none !important;
  border: none !important;
}

/* جعل العناصر تصطف بمحاذاة مثالية */
.stats-bar {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* تنسيق العناصر */
.stats-bar .stat {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* الفاصل بين كل عنصر والذي بعده */
.stats-bar .stat + .stat {
  border-left: 1px solid rgba(255,255,255,0.35);
}

/* في العربي نخلي الفاصل بالعكس */
[dir='rtl'] .stats-bar .stat + .stat {
  border-left: none !important;
  border-right: 1px solid rgba(255,255,255,0.35) !important;
}

/* على الجوال نخفي الفواصل */
@media (max-width: 768px) {
  .stats-bar .stat,
  .stats-bar .stat + .stat {
    border: none !important;
    padding: 10px 0 !important;
  }
}
/* === تحسين شريط الإحصائيات على الجوال === */

@media (max-width: 768px) {

  /* تصغير الشريط */
  .stats-bar {
    padding: 8px 5px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* جعل العناصر أفقية على الجوال */
  .stats-bar .stat {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  /* تصغير الرقم */
  .stats-bar .stat h3 {
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* تصغير النص */
  .stats-bar .stat p {
    font-size: 12px !important;
    margin: 0 !important;
  }

  /* إزالة الفواصل على الجوال */
  .stats-bar .stat,
  .stats-bar .stat + .stat {
    border: none !important;
  }
}
/* إزالة الفواصل بالكامل على الجوال */
@media (max-width: 768px) {
  .stats-bar .stat {
    border: none !important;
  }

  .stats-bar .stat::after,
  .stats-bar .stat::before {
    display: none !important;
    content: none !important;
  }
}
/* إزالة كل الفواصل تماماً على الجوال */
@media (max-width: 768px) {

  .stats-bar .stat,
  .stats-bar .stat * {
    border: none !important;
  }

  .stats-bar .stat::before,
  .stats-bar .stat::after,
  .stats-bar::before,
  .stats-bar::after {
    display: none !important;
    content: none !important;
    border: none !important;
  }
}
/* =============================
   🔥 شريط الإحصائيات — نسخة محسنة
==============================*/

.stats-bar {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: rgba(113, 18, 15, 0.65);
  color: #fff !important;
  padding: 12px 15px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px !important;        /* ⬅️ زيادة المسافة بين الإحصائيات */

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  position: relative;
  bottom: -200px !important;    /* ⬅️ الشريط ينزل تحت أكثر */
}

.stats-bar .stat {
  text-align: center;
}

.stats-bar .num {
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: 2px;
  display: block;
}

.stats-bar p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.95;
}

/* 🔥 للجوال */
@media (max-width: 768px) {
  .stats-bar {
    flex-direction: column;
    gap: 12px !important;
    padding: 15px;
    bottom: -60px !important; /* نخفف المسافة على الجوال */
  }
  .stats-bar .num {
    font-size: 1.5rem;
  }
  .stats-bar p {
    font-size: 0.85rem;
  }
}
.stats-bar {
  border-top: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.20) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.15) !important;
}
.stats-bar .stat {
  position: relative;
}

/* 🔧 إلغاء الفواصل القديمة */
.stats-bar .stat::after {
  content: none !important;
}

/* 🔹 فواصل عمودية بسيطة بين الإحصائيات على الديسكتوب */
.stats-bar .stat {
  padding: 0 12px; /* شوية مسافة يمين ويسار */
}

.stats-bar .stat:not(:last-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* لو الموقع RTL (عربي) نخلي الفاصل على اليمين بدل اليسار */
[dir="rtl"] .stats-bar .stat:not(:last-child) {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

/* 🔹 على الجوال نخفي الفواصل عشان العناصر تحت بعض */
@media (max-width: 768px) {
  .stats-bar .stat {
    border: none !important;
    padding: 0;
  }
}
/* إزالة أي فواصل قديمة */
.stats-bar .stat::after,
.stats-bar .stat::before {
  content: none !important;
  border: none !important;
}

/* جعل العناصر تصطف بمحاذاة مثالية */
.stats-bar {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* تنسيق العناصر */
.stats-bar .stat {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* الفاصل بين كل عنصر والذي بعده */
.stats-bar .stat + .stat {
  border-left: 1px solid rgba(255,255,255,0.35);
}

/* في العربي نخلي الفاصل بالعكس */
[dir='rtl'] .stats-bar .stat + .stat {
  border-left: none !important;
  border-right: 1px solid rgba(255,255,255,0.35) !important;
}

/* على الجوال نخفي الفواصل */
@media (max-width: 768px) {
  .stats-bar .stat,
  .stats-bar .stat + .stat {
    border: none !important;
    padding: 10px 0 !important;
  }
}
/* === تحسين شريط الإحصائيات على الجوال === */

@media (max-width: 768px) {

  /* تصغير الشريط */
  .stats-bar {
    padding: 8px 5px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* جعل العناصر أفقية على الجوال */
  .stats-bar .stat {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  /* تصغير الرقم */
  .stats-bar .stat h3 {
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* تصغير النص */
  .stats-bar .stat p {
    font-size: 12px !important;
    margin: 0 !important;
  }

  /* إزالة الفواصل على الجوال */
  .stats-bar .stat,
  .stats-bar .stat + .stat {
    border: none !important;
  }
}
/* إزالة الفواصل بالكامل على الجوال */
@media (max-width: 768px) {
  .stats-bar .stat {
    border: none !important;
  }

  .stats-bar .stat::after,
  .stats-bar .stat::before {
    display: none !important;
    content: none !important;
  }
}
/* إزالة كل الفواصل تماماً على الجوال */
@media (max-width: 768px) {

  .stats-bar .stat,
  .stats-bar .stat * {
    border: none !important;
  }

  .stats-bar .stat::before,
  .stats-bar .stat::after,
  .stats-bar::before,
  .stats-bar::after {
    display: none !important;
    content: none !important;
    border: none !important;
  }
}
/* =============================
   🔥 شريط الإحصائيات — نسخة محسنة
==============================*/

.stats-bar {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: rgba(113, 18, 15, 0.65);
  color: #fff !important;
  padding: 12px 15px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px !important;        /* ⬅️ زيادة المسافة بين الإحصائيات */

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  position: relative;
  bottom: -200px !important;    /* ⬅️ الشريط ينزل تحت أكثر */
}

.stats-bar .stat {
  text-align: center;
}

.stats-bar .num {
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: 2px;
  display: block;
}

.stats-bar p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.95;
}

/* 🔥 للجوال */
@media (max-width: 768px) {
  .stats-bar {
    flex-direction: column;
    gap: 12px !important;
    padding: 15px;
    bottom: -60px !important; /* نخفف المسافة على الجوال */
  }
  .stats-bar .num {
    font-size: 1.5rem;
  }
  .stats-bar p {
    font-size: 0.85rem;
  }
}
.stats-bar {
  border-top: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.20) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.15) !important;
}
.stats-bar .stat {
  position: relative;
}

/* 🔧 إلغاء الفواصل القديمة */
.stats-bar .stat::after {
  content: none !important;
}

/* 🔹 فواصل عمودية بسيطة بين الإحصائيات على الديسكتوب */
.stats-bar .stat {
  padding: 0 12px; /* شوية مسافة يمين ويسار */
}

.stats-bar .stat:not(:last-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* لو الموقع RTL (عربي) نخلي الفاصل على اليمين بدل اليسار */
[dir="rtl"] .stats-bar .stat:not(:last-child) {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

/* 🔹 على الجوال نخفي الفواصل عشان العناصر تحت بعض */
@media (max-width: 768px) {
  .stats-bar .stat {
    border: none !important;
    padding: 0;
  }
}
/* إزالة أي فواصل قديمة */
.stats-bar .stat::after,
.stats-bar .stat::before {
  content: none !important;
  border: none !important;
}

/* جعل العناصر تصطف بمحاذاة مثالية */
.stats-bar {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* تنسيق العناصر */
.stats-bar .stat {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* الفاصل بين كل عنصر والذي بعده */
.stats-bar .stat + .stat {
  border-left: 1px solid rgba(255,255,255,0.35);
}

/* في العربي نخلي الفاصل بالعكس */
[dir='rtl'] .stats-bar .stat + .stat {
  border-left: none !important;
  border-right: 1px solid rgba(255,255,255,0.35) !important;
}

/* على الجوال نخفي الفواصل */
@media (max-width: 768px) {
  .stats-bar .stat,
  .stats-bar .stat + .stat {
    border: none !important;
    padding: 10px 0 !important;
  }
}
/* === تحسين شريط الإحصائيات على الجوال === */

@media (max-width: 768px) {

  /* تصغير الشريط */
  .stats-bar {
    padding: 8px 5px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* جعل العناصر أفقية على الجوال */
  .stats-bar .stat {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  /* تصغير الرقم */
  .stats-bar .stat h3 {
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* تصغير النص */
  .stats-bar .stat p {
    font-size: 12px !important;
    margin: 0 !important;
  }

  /* إزالة الفواصل على الجوال */
  .stats-bar .stat,
  .stats-bar .stat + .stat {
    border: none !important;
  }
}
/* إزالة الفواصل بالكامل على الجوال */
@media (max-width: 768px) {
  .stats-bar .stat {
    border: none !important;
  }

  .stats-bar .stat::after,
  .stats-bar .stat::before {
    display: none !important;
    content: none !important;
  }
}
/* إزالة كل الفواصل تماماً على الجوال */
@media (max-width: 768px) {

  .stats-bar .stat,
  .stats-bar .stat * {
    border: none !important;
  }

  .stats-bar .stat::before,
  .stats-bar .stat::after,
  .stats-bar::before,
  .stats-bar::after {
    display: none !important;
    content: none !important;
    border: none !important;
  }
}
/* 🚨 قفل كامل للفواصل على الجوال + override غير قابل للكسر */
@media (max-width: 768px) {

  .stats-bar .stat,
  .stats-bar .stat + .stat,
  .stats-bar .stat * {
    border: none !important;
  }

  .stats-bar .stat::before,
  .stats-bar .stat::after {
    content: '' !important;
    display: none !important;
    border: none !important;
  }

}
/* 🔥 إزالة ظهور الفواصل على الجوال عبر جعل لونها مطابق للخلفية */
@media (max-width: 768px) {

  /* الفواصل عند العربي */
  [dir="rtl"] .stats-bar .stat + .stat {
    border-right: 1px solid rgba(113, 18, 15, 0.65) !important; /* نفس لون الخلفية */
  }

  /* الفواصل عند الإنجليزي */
  [dir="ltr"] .stats-bar .stat + .stat {
    border-left: 1px solid rgba(113,18,15,0.65) !important; /* نفس لون الخلفية */
  }

  /* تأكيد آخر لمنع أي خطوط قديمة */
  .stats-bar .stat {
    border-color: rgba(113,18,15,0.65) !important;
  }
}
/* 🔥 تنسيق شريط الإحصائيات على الجوال — الإحصائيات أفقية، ومحتوى كل إحصائية عمودي */
@media (max-width: 768px) {

  /* الشريط نفسه يبقى أفقي */
  .stats-bar {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 50px !important;
    padding: 10px 5px !important;
  }

  /* كل إحصائية عمودية داخليًا */
  .stats-bar .stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 5px !important;
  }

  /* الرقم */
  .stats-bar .stat .num {
    font-size: 1.4rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* النص */
  .stats-bar .stat p {
    font-size: 0.75rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    max-width: 85px; /* حتى لا ينزل سطرين */
  }

  /* إزالة كل الفواصل */
  .stats-bar .stat,
  .stats-bar .stat + .stat {
    border: none !important;
  }
}

    height: 34px;
    font-size: 14px;
  }
}
/* ===============================
   🎨  Latest Projects – Final CSS
================================*/

/* الهيكل الأساسي */
.latest-projects {
  position: relative;
}

.latest-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: auto;
  padding: 20px 0;
}

/* الكرت */
.big-project-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  padding-bottom: 15px;
}

.big-project-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* النصوص */
.project-info-big {
  padding: 15px;
  text-align: center !important;
}

.project-info-big h3 {
  margin: 10px 0 5px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.project-info-big p {
  margin: 0;
  font-size: 16px;
  opacity: 0.85;
  text-align: center;
}

.project-date {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.6;
  text-align: center;
}

/* ===============================
   🎯 الأسهم — نسخة نهائية
================================*/

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

  width: 45px;
  height: 45px;
  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.9);
  color: #71120f !important;
  font-size: 24px;
  font-weight: bold;

  display: flex;
  justify-content: center;
  align-items: center;

  border: 2px solid #71120f;
  cursor: pointer;

  transition: 0.25s ease-in-out;
}

/* سهم اليمين */
.lp-next {
  right: -60px;
}

/* سهم اليسار */
.lp-prev {
  left: -60px;
}



.lp-arrow:hover {
  background: #71120f;
  color: white !important;
}

/* إزالة أسهم Swiper الافتراضية */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

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

  .big-project-card img {
    height: 220px;
  }

  .lp-arrow {
    width: 38px;
    height: 38px;
    font-size: 20px;

    top: auto;
    bottom: -55px;
  }

  .lp-prev {
    left: 20%;
  }

  .lp-next {
    right: 20%;
  }

  .latest-slider-wrapper {
    padding-bottom: 65px;
  }
}