/* Partners section: always show all logos in one row */
.partners-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  overflow-x: auto;
}

.partner-logo {
  width: 120px;
  min-width: 100px;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s;
  cursor: pointer;
}

@media (max-width: 768px) {
  .partners-row {
    gap: 10px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .partner-logo {
    width: 48px;
    min-width: 48px;
    margin-right: 4px;
    flex: 0 0 auto;
  }
}
/* 🟢 استيراد خط حديث من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Cairo:wght@400;700&display=swap');

/* شعار النافبار */
.navbar-brand img {
  max-height: 40px; /* حجم شعار النافبار */
}

/* روابط النافبار */
.nav-link {
  font-weight: 500; /* سمك خط روابط النافبار */
  transition: color 0.3s ease; /* تأثير تغيير اللون عند المرور على الرابط */
}

.nav-link:hover,
.nav-link.active {
  color: #ffc107 !important; /* لون أصفر مميز للرابط النشط وعند المرور */
}

/* ظل النافبار */
.navbar {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* ظل خفيف للنافبار */
}

/* خلفية ملء الشاشة */
.background-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* خلف المحتوى */
  overflow: hidden;
}

/* طبقة شفافة فوق الخلفية لتحسين وضوح النص */
.background-slideshow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* شفافية خفيفة */
  z-index: 1;
}

/* عناصر الصور المتداخلة */
.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

/* الصورة الظاهرة */
.bg-image.visible {
  opacity: 1;
}

/* عنوان قسم خدماتنا */
#our-services h2 {
  font-weight: bold;
  color: #333;
}

/* تأثير الصور عند المرور */
#our-services img {
  transition: transform 0.3s ease;
}

#our-services img:hover {
  transform: scale(1.05); /* تكبير بسيط عند المرور */
}

/* حاوية الصورة والخدمة */
.service-card {
  position: relative;
  overflow: hidden; /* إخفاء أي عناصر خارج الإطار */
}

/* لوحة الشعار */
.logo-panel {
  position: absolute; /* فوق الصورة */
  top: 0;
  right: 0;
  width: 45%; /* عرض اللوحة */
  height: 100%;
  background: rgba(255, 255, 255, 0.5); /* خلفية شفافة للشعار */
  display: flex;
  justify-content: center; /* توسيط الشعار أفقيًا */
  align-items: flex-start; /* الشعار في الأعلى */
  padding-top: 15px; /* مسافة من الأعلى */
}

/* الشعار داخل لوحة الشعار */
.overlay-logo {
  width: 100%; /* Maximum: fills parent panel, fully responsive */
  height: auto;
}

/* لوحة النص */
.text-panel {
  position: absolute; /* فوق الصورة */
  top: 0;
  right: 0;
  width: 45%; /* نفس عرض لوحة الشعار */
  height: 100%;
  background: transparent; /* ← بدون لون إطلاقًا */
  display: flex;
  justify-content: center; /* توسيط النص أفقيًا */
  align-items: center; /* توسيط النص عموديًا */
  text-align: center;
}

/* النص داخل لوحة النص */
.text-panel p {
  font-size: 1rem;
  font-weight: bold;
  color: black;
  margin: 0;
}
/* Bottom text panel */
.bottom-panel {
  position: absolute; /* Position over the image */
  bottom: 0;
  right: 0;
  width: 45%; /* Same width as other panels */
  height: 100%; /* Suitable height for bottom text */
  background: transparent; /* ← بدون لون إطلاقًا */
  display: flex;
  justify-content: center; /* Center text horizontally */
  align-items: flex-end; /* Align text to bottom */
  padding: 10px;
  text-align: center;
}

/* Text inside bottom panel */
.bottom-panel p {
  font-size: 0.5rem;
  font-weight: normal;
  color: black;
  margin: 0;
  padding-bottom: 10px;
}
@media (max-width: 767px) {
  .bottom-panel p {
    font-size: 0.68rem;
    font-weight: normal;
    color: black;
    margin: 0;
    padding-bottom: 10px;
  }
}

/* لوحة النص الإضافية */
.extra-panel {
  position: absolute; /* Position over the image */
  top: 0;
  right: 0;
  width: 45%; /* Same width as other panels */
  height: 100%; /* Full height like bottom panel */
  background: transparent;
  display: flex;
  justify-content: center; /* Center text horizontally */
  align-items: flex-end; /* Align text to top */
  padding: 10px;
  text-align: center;
  padding-top: 47px;
}

/* النص داخل اللوحة الإضافية */
.extra-panel p {
  font-size: 0.5rem;
  font-weight: normal;
  color: black;
  margin: 0;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .extra-panel p {
    font-size: 0.68rem;
    font-weight: normal;
    color: black;
    margin: 0;
    padding-bottom: 0;
  }
}


/* Style for the list inside the full text */
#about-alarabia ul {
  padding-left: 1.2rem; /* Indent list */
  margin-bottom: 1rem;  /* Space below list */
}

/* Style for each list item */
#about-alarabia li {
  margin-bottom: 0.5rem; /* Space between items */
}



/* 🧱 تنسيق عام لقسم الشركاء */
#partners {
  background-color: #f8f9fa;       /* خلفية فاتحة للقسم */
  padding-top: 3rem;               /* مسافة علوية */
  padding-bottom: 3rem;            /* مسافة سفلية */
}

/* 🖼️ تنسيق الصور داخل القسم */
#partners img {
  max-width: 100%;                 /* جعل الصورة تستجيب لحجم العمود */
  height: auto;                    /* الحفاظ على نسبة الأبعاد */
  display: inline-block;           /* عرض الصورة بشكل طبيعي داخل النص */
}

/* 📱 تحسين العرض في الشاشات الصغيرة */
@media (max-width: 767px) {
  #partners .col-12 {
    text-align: center;            /* توسيط الصور في الجوال */
    margin-bottom: 1rem;           /* مسافة بين الشعارات */
  }
}

/* 🧱 تنسيق الصناديق داخل قسم التواصل */
/* ✅ تنسيق القسم العام */
#contact {
  font-family: 'Arial', sans-serif; /* استخدام خط بسيط وواضح */
}

/* ✅ تنسيق الشريط العلوي */
#contact .bg-primary {
  background-color: #002147 !important; /* لون أزرق داكن */
}

#contact .text-white {
  color: #fff !important; /* لون النص أبيض */
}

#contact h2 {
  font-size: 24px;         /* حجم الخط */
  font-weight: bold;       /* جعل النص عريض */
  letter-spacing: 1px;     /* تباعد بين الحروف */
}

/* ✅ تنسيق صناديق التواصل */
.contact-box {
  background-color: #fff;           /* خلفية بيضاء للصندوق */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* ظل خفيف للصندوق */
  transition: transform 0.3s ease;  /* حركة ناعمة عند التحويم */
}

/* ✅ تأثير التحويم على الصندوق */
.contact-box:hover {
  transform: translateY(-5px);      /* رفع الصندوق قليلاً عند التحويم */
}

/* ✅ تنسيق الأيقونات داخل الصناديق */
.icon {
  font-size: 32px;                  /* حجم الأيقونة */
  color: #002147;                   /* لون أزرق داكن */
  display: block;                   /* عرض الأيقونة كسطر مستقل */
}

/* ✅ تنسيق العناوين داخل الصناديق */
.contact-box h5 {
  color: #002147;                   /* لون العنوان */
  font-weight: bold;               /* جعل العنوان عريض */
  margin-bottom: 10px;              /* مسافة أسفل العنوان */
}

/* ✅ تنسيق النص داخل الصناديق */
.contact-box p {
  color: #002147;                   /* لون النص */
  font-size: 14px;                  /* حجم الخط */
  line-height: 1.6;                 /* ارتفاع السطر لتحسين القراءة */
  margin: 0;                        /* إزالة الهوامش */
}

/* ✅ تنسيق الحدود بين العناصر */
.border-end {
  border-right: 1px solid #ccc !important; /* خط يميني رمادي */
}

.border-bottom {
  border-bottom: 1px solid #ccc !important; /* خط سفلي رمادي */
}

/* ✅ استجابة للجوال: إزالة الحدود الجانبية */
@media (max-width: 767px) {
  .border-end {
    border-right: none !important; /* إزالة الخط في الجوال */
  }
}
/* ✅ تنسيق خريطة جوجل داخل صندوق الموقع */
.map-container iframe {
  border-radius: 8px;         /* زوايا ناعمة للخريطة */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* ظل خفيف */
}

/* اللوحة الشفافة داخل الخلفية */
.background-panel {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 30%;
  background: rgba(0, 0, 0, 0.3); /* أسود شفاف */
  backdrop-filter: blur(6px); /* تأثير ضبابي أنيق */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  z-index: 1;
}

/* محتوى اللوحة */
.panel-content {
  color: #002147;
  font-family: 'Montserrat', sans-serif;
}

/* العنوان */
.panel-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

/* النص الثانوي */
.panel-subtitle {
  font-size: 1rem;
  font-weight: 500;
}

/* 📱 استجابة للجوال والتابلت */
@media (max-width: 768px) {
  .background-panel {
    width: 80%;
    height: auto;
    padding: 1.5rem;
  }

  .panel-title {
    font-size: 1.4rem;
  }

  .panel-subtitle {
    font-size: 0.9rem;
  }
}

/* ✅ حاوية النقاط الثلاث */
.image-selector {
  margin-top: 1rem;           /* مسافة علوية تفصلها عن النص */
  display: flex;              /* عرض النقاط بجانب بعضها */
  gap: 10px;                  /* مسافة بين كل نقطة */
  justify-content: center;   /* توسيط النقاط داخل الحاوية */
}

/* ✅ تصميم كل نقطة */
.dot {
  width: 18px;                /* عرض النقطة */
  height: 18px;               /* ارتفاع النقطة */
  border-radius: 50%;         /* جعلها دائرية بالكامل */
  background-color: #fff;     /* لون الخلفية (أبيض) */
  opacity: 0.6;               /* شفافية مبدئية */
  cursor: pointer;            /* تغيير شكل المؤشر عند التحويم */
  border: 2px solid #fff;     /* إطار أبيض حول النقطة */
  transition: opacity 0.3s, transform 0.2s;
  z-index: 10;
}

/* ✅ تأثير عند التحويم أو عند التفعيل */
.dot:hover,
.dot.active {
  opacity: 1;                 /* شفافية كاملة */
  transform: scale(1.2);
  background-color: #2196f3; /* لون أزرق عند التفعيل */
  border-color: #2196f3;
}

/* ✅ تنسيق تذييل الصفحة */
.site-footer {
  text-align: center;           /* توسيط النص */
  padding: 1rem;                /* مسافة داخلية */
  background-color: #f8f9fa;    /* لون خلفية خفيف */
  color: #333;                  /* لون النص */
  font-size: 0.9rem;            /* حجم الخط */
}

/* ✅ تصميم زر واتساب */
.whatsapp-btn {
  position: fixed;             /* تثبيت الزر في الشاشة */
  bottom: 20px;                /* المسافة من الأسفل */
  left: 20px;                 /* المسافة من اليمين */
  background-color: #25D366;   /* اللون الرسمي لواتساب */
  color: white;                /* لون الأيقونة */
  font-size: 28px;             /* حجم الأيقونة */
  width: 50px;                 /* عرض الزر */
  height: 50px;                /* ارتفاع الزر */
  border-radius: 50%;          /* جعل الزر دائري الشكل */
  display: flex;               /* محاذاة المحتوى داخليًا */
  align-items: center;         /* توسيط عمودي */
  justify-content: center;     /* توسيط أفقي */
  text-decoration: none;       /* إزالة الخط تحت الرابط */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* ظل خفيف */
  transition: transform 0.3s ease, background-color 0.3s ease; /* تأثيرات ناعمة */
  z-index: 1000;               /* فوق كل العناصر */
}

/* ✅ تأثير عند التحويم على الزر */
.whatsapp-btn:hover {
  transform: scale(1.1);       /* تكبير الزر قليلاً */
  background-color: #1ebe5d;   /* لون أخضر أغمق عند التحويم */
}


.language-switcher {
  display: flex;
  gap: 8px;
}

@media (max-width: 991px) {
  .language-switcher {
    display: none !important;
  }
}


.lang-flag {
  width: 24px;
  height: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.lang-flag:hover {
  transform: scale(1.1);
}

/* الخط العربي للصفحات أو الأقسام العربية */
html[lang="ar"] body,
html[lang="ar"] .panel-content,
html[lang="ar"] .panel-title,
html[lang="ar"] .panel-subtitle {
  font-family: 'Cairo', sans-serif;
}

/* الخط الإنجليزي الافتراضي */
html[lang="en"] body,
html[lang="en"] .panel-content,
html[lang="en"] .panel-title,
html[lang="en"] .panel-subtitle {
  font-family: 'Montserrat', sans-serif;
}

@media (max-width: 767px) {
  .language-switcher {
    position: absolute;
    bottom: 5px;            /* مسافة صغيرة من أسفل الشريط */
    left: 70%;              /* منتصف العرض أفقيًا */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column; /* ترتيب عمودي */
    gap: 6px;               /* مسافة بين الأعلام */
    z-index: 1100;
  }

  .lang-flag {
    width: 30px;
    height: 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    transition: transform 0.2s ease;
  }

  .lang-flag:hover {
    transform: scale(1.1);
  }
}