/*--------------------------------------------------------------
# Spinner Start
--------------------------------------------------------------*/
/*** Spinner ***/
#spinner {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease-out,
    visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  transition:
    opacity 0.5s ease-out,
    visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}
/* html,
body {
  width: 100%;
  overflow-x: hidden;
} */
/* html,
body {
  overflow-x: hidden;
} */
/* * {
  transform: none !important;
} */

/*****logo*******/
/* Navbar */
/* .navbar {
  height: 70px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between; */
  /* background: #fff; */
  /* gap: 10px;
  flex-wrap: nowrap;
} */
.text-primary.m-0 {
  font-size: clamp(13px, 2vw, 33px);
  font-weight: 700;
  line-height: 1.2;
  /* text-align: center; */
  text-align: left;
  /* اختياري */
  white-space: nowrap;
  /* يمنع الكسر لو حابة */
  /* font-size: clamp(14px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap; */
  margin: 0;
}
.brand img {
  width: clamp(30px, 5vw, 60px);
  height: auto;
}
@media (max-width: 480px) {
  .brand {
    gap: 6px;
  }

  .text-primary.m-0 {
    font-size: 16px;
  }
}
/* .text-primary.m-0 {
  font-size: 32px;
  font-weight: 700;
} */

/* tablets */
@media (max-width: 768px) {
  .text-primary.m-0 {
    font-size: 24px;
    padding-top: -90px;
  }
}
/* h1 {
  margin: 0;
  padding: 0;
} */
/* mobile */
@media (max-width: 375px) {
  .text-primary.m-0 {
    font-size: 18px;
    /* margin-left: -20px; */
  }
}
@media (max-width: 480px) {
  .text-primary.m-0 {
    font-size: 18px;
        margin-left: -20px;

  }
}
/* Logo */
.logo {
  display: flex;
  align-items: center;
  /* margin: 0; */
  padding: 0;
  margin-left: 5px;
}

.icon-logo-4 {
  color: #db1818; /* رمادي قاتم */
  font-size: 40px; /* حجم الأيقونة */
}
.logo img {
  width:100px; /* حجم صغير مناسب */
  height: 100px;
  object-fit: cover; /* يزيل الإحساس بالفراغ */
  border-radius: 50%;
  display: block;
  margin-top: 8px;

}

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

/* Responsive */
@media (max-width: 768px) {
  /* .navbar {
    height: 70px;
    padding: 0 15px;
  } */

  .logo img {
    width: 85px;
    height: 85px;
    margin-top: -4.5px;
  }

  .nav-links {
    gap: 15px;
  }
}
/* Navbar Logo */
/* .navbar-brand{
    display:flex;
    align-items:center;
    padding:0 !important;
    margin:0;
} */

.navbar-brand img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}

/* Large Tablets */
@media (max-width: 992px) {
  .navbar-brand img {
    width: 55px;
    height: 55px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .navbar-brand img {
    width: 85px;
    height: 85px;
    /* margin-top: -5px; */
  }
  .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .navbar-brand img {
    width: 85px;
    height: 85px;
    /* margin-top: -5px; */
  }
}

/* Small Mobile */
@media (max-width: 320px) {
  .navbar-brand img {
    width: 32px;
    height: 32px;
  }
}
/*--------------------------------------------------------------
# Spinner End
--------------------------------------------------------------*/

.back-to-top {
  position: fixed;
  font-size: 20px;
  /* right: 30px;
  bottom: 30px; */
  right: 15px;
  bottom: 15px;
  display: flex;
  width: 42px;
  height: 42px;
  /* width: 55px;
  height: 55px; */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.5s;
  /* z-index: 99; */
  z-index: 999;
}
@media (max-width: 360px) {
  .back-to-top {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    right: 10px;
    bottom: 10px;
  }
}
@media (min-width: 361px) and (max-width: 375px) {
  .back-to-top {
    width: 42px !important;
    height: 35px !important;
    font-size: 14px !important;
    right: 12px;
    bottom: 12px;
  }
}
/* @media (max-width: 375px) {
  .back-to-top {
    width: 20px;
    height: 20px;
    font-size: 14px;
    bottom: 12px;
    right: 12px;
  }
} */
@media (min-width: 376px) and (max-width: 390px) {
  .back-to-top {
    width: 35px !important;
    height: 35px !important;
    font-size: 14px !important;
    right: 14px;
    bottom: 14px;
  }
}
@media (min-width: 391px) and (max-width: 414px) {
  .back-to-top {
    width: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
    right: 15px;
    bottom: 15px;
  }
}

/* 📱 موبايل متوسط (424px) */
@media (max-width: 424px) {
  .back-to-top {
    width: 45px;
    height: 45px;
    font-size: 16px;
    bottom: 18px;
    right: 18px;
  }
}
@media (max-width: 320px) {
  .back-to-top {
    width: 45px;
    height: 45px;
    font-size: 16px;
    bottom: 18px;
    right: 18px;
  }
}

/* 📱 موبايل كبير (480px) */
@media (max-width: 480px) {
  .back-to-top {
    width: 50px;
    height: 50px;
    font-size: 18px;
    bottom: 20px;
    right: 20px;
  }
}
/*-----*/
a {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none;
  outline: 0;
}
a,
a:focus,
a:hover {
  text-decoration: none;
  outline: 0;
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Target all h1 tags */
h1 {
  font-size: 3.5rem; /* Standard fixed size */
}

/* Target the specific Bootstrap class you are using */
.display-5 {
  font-size: calc(
    0.5rem + 1.5vw
  ) !important; /* Dynamic: grows with screen size */
  font-weight: 700;
  line-height: 1.2;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.display-4 {
  font-size: calc(
    0.5rem + 1.3vw
  ) !important; /* Dynamic: grows with screen size */
  font-weight: 700;
  line-height: 1.2;
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* Desktop size */
.display-5 {
  font-size: 4rem;
}

/* Tablet size */
@media (max-width: 992px) {
  .display-5 {
    font-size: 3rem;
  }
}

/* Mobile size */
@media (max-width: 576px) {
  .display-5 {
    font-size: 2.2rem;
  }
}

/* Desktop size */
.display-4 {
  font-size: 4rem;
}

/* Tablet size */
@media (max-width: 992px) {
  .display-4 {
    font-size: 3rem;
  }
}

/* Mobile size */
@media (max-width: 576px) {
  .display-4 {
    font-size: 1.8rem; /* تصغير العناوين الضخمة في الموبايل لضمان عدم خروجها عن الشاشة */
  }
}
/* ضبط العناوين لتكون مرنة وتتغير تلقائياً حسب حجم الشاشة */

h1,
.display-1 {
  font-size: clamp(2.5rem, 6vw, 2rem); /* يتراوح بين 40px و 64px */
  font-weight: 700;
  line-height: 1.2;
}

h2,
.display-2 {
  font-size: clamp(2rem, 5vw, 3rem); /* يتراوح بين 32px و 48px */
  font-weight: 700;
}

h3 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* تعديل خاص لكلاس text-info ليكون متوافقاً مع المنظومة */
.text-info {
  color: #0492c2 !important;
  font-size: clamp(2rem, 5vw, 2.4375rem);
  /* يبدأ من 32px ويصل لـ 55px كحد أقصى */
  /* font-weight: 700; */
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

h4 {
  font-size: clamp(1.5rem, 3vw, 1.5rem);
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

/* تنسيق إضافي لتحسين القراءة على الموبايل */
@media (max-width: 576px) {
  body {
    line-height: 1.5;
  }
}

/*--------------------------------------------------------------
# Button Start
--------------------------------------------------------------*/
.btn {
  font-weight: 600;
  transition: 0.5s;
}

.btn-square {
  width: 32px;
  height: 32px;
}

.btn-sm-square {
  width: 34px;
  height: 34px;
}

.btn-md-square {
  width: 44px;
  height: 44px;
}

.btn-lg-square {
  width: 56px;
  height: 56px;
}

.btn-xl-square {
  width: 66px;
  height: 66px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  border-radius: 50%;
}

.btn.btn-primary {
  background-color: #0492c2 !important;
  color: var(--bs-white) !important;
  font-family: "Roboto", sans-serif;
  border: none;
  font-weight: 400;
  transition: 0.5s;
}

/* تأثير عند مرور الماوس (Hover) */
.btn.btn-primary:hover {
  /* background-color: #f6900b !important;  */
  /* لون أغمق قليلاً */
  background-color: #f7631b !important; /* لون أغمق قليلاً */
  transform: translateY(-3px); /* رفعة بسيطة تعطي شعوراً بالتفاعل */
  box-shadow: 0 5px 15px rgba(4, 146, 194, 0.3); /* ظل ناعم بنفس لون الزر */
  color: var(--bs-light) !important;
}

/* --- ضبط الأزرار للموبايل والتابلت --- */

/* للشاشات المتوسطة (Tablets) */
@media (max-width: 991px) {
  .btn.btn-primary {
    padding: 10px 25px;
    font-size: 1rem;
  }
}

/* للشاشات الصغيرة (Mobile Phones) */
/* @media (max-width: 576px) {
  .btn.btn-primary {
    padding: 8px 20px;  */
/* تصغير المساحة لتناسب شاشة الموبايل */
/* font-size: 0.9rem;  */
/* تصغير الخط قليلاً */
/* margin-top: -10px;
  }
} */
/* Mobile */
@media (max-width: 576px) {
  .btn.btn-primary {
    padding: 10px 20px;
    font-size: 0.9rem;
    display: block;
    width: 80%;
    margin: 10px auto; /* توسيط بدل margin سالب */
    text-align: center;
  }
}

/* Small Mobile (480px) */
@media (max-width: 768px) {
  .btn.btn-primary {
    /* padding: 9px 18px; */
    padding: 5px 10px;
    font-size: 1rem;
    width: 5%;
    height: 35px;
  }
}
/* Small Mobile (480px) */
@media (max-width: 480px) {
  .btn.btn-primary {
    /* padding: 9px 18px; */
    padding: 5px 10px;
    font-size: 1rem;
    width: 10%;
    height: 38px;
  }
}

/* Extra Small Mobile (424px) */
@media (max-width: 424px) {
  .btn.btn-primary {
    padding: 8px 15px;
    font-size: 0.9rem;
    width: 90%;
  }
}
@media (max-width: 316px) {
  .btn.btn-primary {
    padding: 8px 15px;
    font-size: 1rem;
    width: 50%;
  }
}

.btn.btn-dark {
  background-color: #0492c2 !important;
  color: var(--bs-white) !important;
  font-family: "Roboto", sans-serif;
  border: none;
  font-weight: 400;
  transition: 0.5s;
}

/* تأثير التفاعل (Hover) */
.btn.btn-dark:hover {
  /* background-color: #f6900b !important;  */
  /* درجة أغمق قليلاً */
  background-color: #f7631b !important; /* درجة أغمق قليلاً */
  letter-spacing: 0.5px; /* تأثير تباعد بسيط يعطي طابعاً تقنياً */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- التحكم في التجاوب عبر Media Queries --- */

/* للشاشات المتوسطة (Tablets) */
@media (max-width: 991px) {
  .btn.btn-dark {
    padding: 10px 22px;
    font-size: 0.95rem;
  }
}

/* للشاشات الصغيرة جداً (Mobile) */
/* @media (max-width: 576px) {
  .btn.btn-dark {
    padding: 12px 20px;
    font-size: 0.9rem;
    text-align: center;
    margin-top: -20px;
  }
} */
/* Mobile */
@media (max-width: 576px) {
  .btn.btn-dark {
    padding: 12px 20px;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 10px; /* خليها موجبة بدل -20 */
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
  .btn.btn-dark {
    padding: 10px 18px;
    font-size: 0.85rem;
    width: 85%;
  }
}

/* Extra Small Mobile (424px) */
@media (max-width: 424px) {
  .btn.btn-dark {
    padding: 9px 15px;
    font-size: 0.8rem;
    width: 90%;
  }
}
.btn.btn-light {
  background-color: #0492c2 !important;
  color: var(--bs-white) !important;
  font-family: "Roboto", sans-serif;
  border: none;
  font-weight: 400;
  transition: 0.5s;
}

.btn.btn-light:hover {
  /* background-color: #f6900b !important; */
  background-color: #f7631b !important;
  color: var(--bs-white) !important;
}
.text-light:hover {
  /* color: #fd7e14 !important; */
  color: #f7631b !important;
}

/*--------------------------------------------------------------
# Button End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Topbar Start
--------------------------------------------------------------*/
.topbar {
  padding: 2px 10px 2px 20px;
  background-color: #0492c2 !important;
  font-size: 14px;
  /* overflow: hidden; */
}
/* الروابط */
.topbar a {
  text-decoration: none;
  font-size: 14px;
  /* font-size: 13px; */
  word-break: break-word; /* يكسر الإيميل لو طويل */
}
.topbar .d-flex {
  flex-wrap: wrap; /* بدل ما يخرج بره */
  gap: 3px;
  /* justify-content: center; */
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* مهم */
  gap: 5px; /* 👈 اتحكمي في المسافة هنا */
  justify-content: flex-start;
}
/* .topbar-actions .btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.topbar-actions .btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
} */
/* .btn-square {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;  */
/* أهم سطر */
/* line-height: 1 !important;  */
/* يمنع زيادة الارتفاع */
/* border-radius: 50%;
  overflow: hidden;  */
/* يمنع أي زيادة في الهوفر */
/* aspect-ratio: 1 / 1; */
/* }
.btn-square {
  aspect-ratio: 1 / 1;
} */
/* .btn-square i {
  font-size: 14px;
  line-height: 1;
} */
/* .topbar a:hover,
.topbar .btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
  transition: 0.3s;
}
.topbar {
  letter-spacing: 0.3px;
} */
/* .topbar-actions .btn {
  margin: 0 !important;
} */
.btn-square {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: 50%;
}
.btn-square:hover {
  transform: scale(1.1);
  transition: 0.3s;
}
.btn-square i {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
}
.btn-auth {
  font-size: 12px;
  padding: 5px 10px;
  margin-top: 5px;
  text-align: justify;
}
/* .d-flex {
  align-items: center !important; */
/* justify-content: center; */
/* أو end لو عايزة يمين */
/* flex-wrap: wrap;  */
/* مهم للموبايل */
/* gap: 8px;  */
/* مسافة بين الأيقونات */
/* } */
.d-flex a.btn-square {
  display: inline-flex;
  align-items: center; /* توسيط رأسي */
  justify-content: center; /* توسيط أفقي */

  width: 34px;
  height: 34px;

  padding: 0 !important;
  line-height: 1 !important;

  vertical-align: middle; /* مهم */
}
/* .btn-square {
  overflow: hidden;
} */

/* .btn-square i {
  transform: translateY(1px);  */
/* بيظبط تمركز الأيقونة بصريًا */
/* } */
/* ================= MOBILE ================= */
@media (max-width: 1024px) {
  /* .topbar {
    display: none;
  } */
  .topbar {
    display: block; /* بدل none علشان يظهر */
    overflow: visible !important;
  }
  .topbar .row {
    height: auto !important;
    padding: 10px 0;
    flex-direction: column; /* يخليهم تحت بعض */
  }

  /* نخلي العناصر تحت بعض */
  .topbar .col-lg-8,
  .topbar .col-lg-4 {
    width: 100%;
    text-align: center !important;
  }
  .topbar .col-lg-8 {
    text-align: center !important;
  }
  /* المسافة بين الجزءين */
  .topbar .col-lg-4 {
    margin-top: -5px;
  }
  .topbar .d-flex {
    justify-content: center !important;
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  /* تقليل حجم النص */
  .topbar a {
    font-size: 13px;
    /* margin: 0 !important; */
    margin: 5px 0 !important;
    display: block;
  }
}
@media (max-width: 768px) {
  /* .topbar {
    display: none;
  } */
  .topbar {
    display: block; /* بدل none علشان يظهر */
    overflow: visible !important;
  }
  .topbar .row {
    height: auto !important;
    padding: 10px 0;
    flex-direction: column; /* يخليهم تحت بعض */
  }

  /* نخلي العناصر تحت بعض */
  .topbar .col-lg-8,
  .topbar .col-lg-4 {
    width: 100%;
    text-align: center !important;
  }
  .topbar .col-lg-8 {
    text-align: center !important;
  }
  /* المسافة بين الجزءين */
  .topbar .col-lg-4 {
    margin-top: -5px;
  }
  /* نخلي الجزء اليمين منظم */
  /* .topbar .col-lg-4 .d-flex {
    display: flex;
    justify-content: space-between !important;  */
  /* يوزعهم يمين وشمال */
  /* align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  
 /* ترتيب العناصر داخل كل جزء */
  /* .topbar .d-flex {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 8px;
  } */

  .topbar .d-flex {
    justify-content: center !important;
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  /* تقليل حجم النص */
  .topbar a {
    font-size: 13px;
    /* margin: 0 !important; */
    margin: 5px 0 !important;
    display: block;
  }
  .topbar-actions {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    /* يخليهم في سطر واحد */
    justify-content: center;
    align-items: center;
    gap: 3px !important; /* يقلل المسافة بين كل العناصر */
    /* gap: 6px; */
    overflow-x: auto;
    /* لو الشاشة ضيقة يسمح بالسكرول */
  }
  /* أيقونات السوشيال */
  /* .topbar .btn-square {
    width: 35px;
    height: 35px; */
  /* font-size: 14px; */
  /* margin: 0 !important;
    padding: 0 !important;
  } */
  .topbar .btn-square {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justfy-content: center;
    padding: 0 !important;
    line-height: 0 !important;
    border-radius: 50%;
    margin-top: 1.3px;
  }
  .topbar .btn-square i {
    font-size: 22px;
    line-height: 1;
    /* margin-top: 2px; */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* .topbar .btn-square:hover {
    transform: scale(1.05);
  } */
  .topbar .justify-content-end {
    justify-content: center !important;
    /* margin-top: 8px; */
    margin-top: 5px;
  }
  /* جزء اللوجين */
  .user-auth-section {
    display: flex;
    gap: 6px;
  }

  /* تصغير الأزرار للموبايل */
  .btn-auth {
    font-size: 12px;
    padding: 5px 10px;
    margin-top: 13px;
    text-align: justify;
  }
}
@media (max-width: 576px) {
  .topbar a:first-child {
    display: none;
  }
  .topbar {
    text-align: center;
  }

  .topbar .btn {
    font-size: 12px;
    padding: 5px 10px;
  }
}
/* ================= SMALL MOBILE ================= */
/* @media (max-width: 480px) {
  .topbar {
    display: block;  */
/* بدل none علشان يظهر */
/* overflow: visible !important;
  }

 .topbar a:first-child {
    display: block;
  }
  .topbar a {
    font-size: 12px;
  } */
/* المسافة بين الجزءين */
/* .topbar .col-lg-4 {
    margin-top:-5px;
  } */
/* .topbar .btn-square {
    width: 30px;
    height: 30px;
    font-size: 11px;
  } */
/* .topbar .btn-square {
    width: 45px;
    height: 45px;
    font-size: 12px;
    margin: 0 !important; */
/* width: 32px;
    height: 32px;
    font-size: 11px; */
/* }  */
/* .user-auth-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;  */
/* يسمح بالنزول لسطر تاني لو زحمة */
/* gap: 6px;
    margin-top: -15px;
  } */

/* .btn-auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center; */
/* padding: 6px 12px; */
/* font-size: 12px; */
/* padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
    gap: 4px;
    margin-top: 0; */
/* نشيل الـ 13px عشان ما يبوظش الترتيب */
/* } */
/* } */
/* 📱 Extra Small Mobile (424px) */
/* @media (max-width: 424px) { */
/* .topbar {
    padding: 5px 0;
  }

  .topbar a {
    font-size: 11px; */
/* display: block; */
/* كل عنصر في سطر */
/* margin: 2px 0 !important;
    text-align: center;
  }

  .topbar .d-flex { */
/* flex-direction: column; */
/* العناصر تحت بعض */
/* align-items: center;
     flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  } */
/* المسافة بين الجزءين */
/* .topbar .col-lg-4 {
  margin-top: -5px;
}
.topbar .btn-square {
  width: 35px;
  height: 35px;
  font-size: 11px;
  width: 28px;
  height: 28px;
  font-size: 10px;
} */
/* .user-auth-section {
    flex-direction: column;  */
/* كل زر في سطر */
/* align-items: center;
    gap: 8px;
  } */

/* .btn-auth { */
/* width: 90%; */
/* زر كبير وسهل الضغط */
/* padding: 8px 10px;
    font-size: 12px; */
/* width: auto;
       padding: 4px 8px;
    font-size: 10px;
  } */
/* .user-auth-section { */
/* flex-direction: row; */
/* justify-content: center;
  }

} */
/* 📱 Mobile 480 */
/* @media (max-width: 480px) { */

/* .topbar-actions {
    display: flex;
    flex-wrap: nowrap; */
/* يخليهم في سطر واحد */
/* justify-content: center;
    align-items: center;
    gap: 3px;
    overflow-x: auto;  */
/* لو الشاشة ضيقة يسمح بالسكرول */
/* } */
/* .topbar-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: 20%;
  } */
/* السوشيال */
/* .topbar-actions a.btn-square {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 auto;
  } */
/* .topbar-actions .btn-square {
    width: 32px;
    height: 32px;
    font-size: 11px;
  } */
/* زرار Login/Register */
/* .topbar-actions .btn-auth {
    padding: 5px 9px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex: 0 0 auto;
  } */
/* .btn-auth {
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
  } */
/* .user-auth-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 4px !important; */
/* overflow-x: auto; */
/* مهم لو المساحة ضاقت */
/* } */

/* السوشيال + الأزرار */
/* .user-auth-section a,
  .user-auth-section button {
    flex: 0 0 auto;
    margin: 0 !important;
  } */

/* أزرار السوشيال */
/* .user-auth-section .btn-square {
    width: 30px;
    height: 30px;
    font-size: 11px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  } */

/* login / register */
/* .btn-auth {
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
} */
@media (max-width: 480px) {
  /* .topbar {
    display: block; */
  /* بدل none علشان يظهر */
  /* overflow: visible !important;
  } */
  .topbar .d-flex.align-items-center.justify-content-end > a {
    display: inline-flex !important;
  }
  /* الكونتينر كله في سطر واحد */
  .topbar .d-flex.align-items-center.justify-content-end {
    display: flex !important;
    flex-direction: row !important;
    /* 🔥 أهم سطر */
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
  }
  /* 🔥 إصلاح الجزء الشمال */
  .topbar .d-flex.flex-wrap {
    display: flex !important;
    flex-direction: row !important; /* يرجعهم صف واحد */
    justify-content: center !important;
    flex-wrap: nowrap !important; /* يمنع النزول */
    gap: 10px;
    /* margin-left: -3px; */
  }

  .topbar .d-flex.flex-wrap a {
    display: inline-flex !important;
    align-items: center;
    font-size: 11px;
    white-space: nowrap; /* يمنع كسر النص */
    gap: -9px;
  }

  .topbar .d-flex.flex-wrap i {
    font-size: 11px;
    margin-right: 4px;
  }
  /* .d-flex {
    justify-content: center;  */
  /* يخليهم في النص */
  /* } */
  .topbar .col-lg-8,
  .topbar .col-lg-4 {
    text-align: center;
  }
  .topbar .d-flex {
    justify-content: center;
  }
  .topbar a:first-child {
    display: block;
  }
  .topbar a {
    font-size: 12px;
  }
  /* المسافة بين الجزءين */
  /* .topbar .col-lg-4 {
    margin-top: -5px;
  } */
  /* السوشيال */
  /* السوشيال */
  .topbar .btn-square {
    /* width: 28px !important;
    height: 28px !important; */
    width: 30px;
    height: 30px;
    font-size: 11px;
    margin: 0 2px !important;
    flex-shrink: 0;
  }
  .topbar .btn-square i {
    width: 24px;
    height: 24px;
    font-size: 18px;
    margin: 0 2px !important;
    flex-shrink: 0;
  }
  .topbar-actions {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    /* يخليهم في سطر واحد */
    justify-content: center;
    align-items: center;
    gap: 3px !important; /* يقلل المسافة بين كل العناصر */
    /* gap: 6px; */
    overflow-x: auto;
    /* لو الشاشة ضيقة يسمح بالسكرول */
    margin-top: 9px;
  }

  .user-auth-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 4px !important;
    overflow-x: auto;
    /* مهم لو المساحة ضاقت */
  }

  /* السوشيال + الأزرار */
  .user-auth-section a,
  .user-auth-section button {
    flex: 0 0 auto;
    margin: 0 !important;
  }
  /* .topbar-actions .btn-square {
    width: 28px;
    height: 28px;
    font-size: 10px;
  } */
  /* أزرار السوشيال */
  .user-auth-section .btn-square {
    width: 28px;
    height: 28px;
    font-size: 11px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* أيقونات السوشيال */
  /* .topbar-actions .btn-square {
    width: 30px;
    height: 30px;
    font-size: 11px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  /* login / register */
  /* .btn-auth {
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    ma white-space: nowrap;rgin-top: 5px;
  } */

  .btn-auth {
    font-size: 10px; /* أصغر شوية */
    /* padding: 4px 6px;  */
    /* يقلل المساحة الداخلية */
    padding: 4px 8px; /* يقلل المساحة الداخلية */
    margin-top: 0;
    /* يلغي النزول لتحت */
    /* width: 50%; */
    flex-direction: column;
    white-space: nowrap;
    margin-top: 5px;
    margin-left: -5px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px; /* مسافة صغيرة بين الأيقونة والكلام */
  }
}

/* 📱 Extra Small 424 */
@media (max-width: 424px) {
  .topbar {
    padding: 5px 0;
  }

  .topbar a {
    font-size: 11px;
    display: block;
    /* كل عنصر في سطر */
    margin: 2px 0 !important;
    text-align: center;
  }

  .topbar .d-flex {
    flex-direction: column;
    /* العناصر تحت بعض */
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  /* المسافة بين الجزءين */
  .topbar .col-lg-4 {
    margin-top: -5px;
  }
  /* .topbar .btn-square { */
  /* width: 35px;
    height: 35px;
    font-size: 11px; */
  /* width: 28px;
    height: 28px;
    font-size: 10px;
  } */
  /* السوشيال */
  .topbar .btn-square {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px;
    margin: 0 2px !important;
    flex-shrink: 0;
  }
  .topbar .btn-square i {
    width: 24px;
    height: 24px;
    font-size: 18px;
    margin: 0 2px !important;
    flex-shrink: 0;
  }
  .topbar-actions {
    gap: 3px !important; /* يقلل المسافة بين كل العناصر */
  }
  /* .topbar-actions .btn-square {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .btn-auth {
    padding: 4px 8px;
    font-size: 10px;
  } */
  /* .topbar-actions a.btn-square {
    width: 30px;
    height: 30px;
    font-size: 10px;
    margin-top: 10px;
  } */
  .btn-auth {
    font-size: 10px; /* أصغر شوية */
    padding: 4px 6px; /* يقلل المساحة الداخلية */
    margin-top: 0; /* يلغي النزول لتحت */
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px; /* مسافة صغيرة بين الأيقونة والكلام */
  }
  .topbar-actions .btn-auth {
    padding: 4px 8px;
    font-size: 10px;
  }
  /* كمان نقلل حجم أيقونات السوشيال شوية */
  .topbar-actions .btn-square {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
}
/* ====== Mobile Responsive ====== */
@media (max-width: 414px) {
  .topbar {
    padding: 8px 0;
  }

  .topbar .row {
    height: auto !important;
    text-align: center;
  }

  /* LEFT SIDE (contact info) */
  .topbar .col-lg-8 {
    margin-bottom: 10px;
  }

  .topbar .d-flex.flex-wrap {
    justify-content: center;
    gap: 8px;
  }
  .topbar .d-flex {
    flex-direction: column;
    /* العناصر تحت بعض */
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .topbar a {
    font-size: 12px;
    margin: 3px 5px !important;
  }

  .topbar i {
    font-size: 12px;
    margin-right: 4px;
  }

  /* RIGHT SIDE */
  .topbar .col-lg-4 {
    text-align: center !important;
  }

  .topbar .d-flex.align-items-center {
    flex-direction: column;
    gap: 10px;
  }

  /* Social Icons */
  .topbar .btn-square {
    width: 30px;
    height: 30px;
    font-size: 12px;
    margin: 0 3px !important;
  }
  .topbar .btn-square i {
    width: 28px;
    height: 28px;
    font-size: 18px;
    margin: 0 2px !important;
    flex-shrink: 0;
  }
  /* Buttons */
  .topbar .btn-auth {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
  }

  .topbar-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3px;
  }

  /* Dropdown */
  #main-user-dropdown .dropdown-menu {
    width: 90%;
    left: 50% !important;
    transform: translateX(-50%);
  }
}
/* @media (max-width: 375px) { */
/* الكونتينر الرئيسي */
/* .topbar .d-flex.align-items-center.justify-content-end {
    flex-wrap: nowrap !important; */
/* يمنع النزول لسطر جديد */
/* justify-content: center !important;
    gap: 4px;
    overflow-x: auto; */
/* مهم لو المساحة ضاقت */
/* } */

/* السوشيال */
/* .topbar .btn-square {
    width: 26px;
    height: 26px;
    font-size: 10px;
    padding: 0;
    margin: 0 2px !important;
    flex-shrink: 0;  */
/* يمنع التصغير المبالغ فيه */
/* } */

/* الأزرار */
/* .topbar-actions {
    display: flex !important;
    gap: 4px;
    flex-shrink: 0;
  }

  .topbar .btn-auth {
    font-size: 10px;
    padding: 4px 6px;
    white-space: nowrap;  */
/* يمنع نزول النص */
/* }
  .btn-auth span {
    display: none;
  }
} */
@media (max-width: 375px) {
  /* الكونتينر كله في سطر واحد */
  /* .topbar .d-flex.align-items-center.justify-content-end {
    display: flex !important;
    flex-direction: row !important;  */
  /* 🔥 أهم سطر */
  /* flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
  } */
  /* 🔥 إصلاح الجزء الشمال */
  .topbar .d-flex.flex-wrap {
    display: flex !important;
    flex-direction: row !important; /* يرجعهم صف واحد */
    justify-content: center !important;
    flex-wrap: nowrap !important; /* يمنع النزول */
    gap: 2px;
    margin-left: -3px;
  }

  .topbar .d-flex.flex-wrap a {
    display: inline-flex !important;
    align-items: center;
    font-size: 11px;
    white-space: nowrap; /* يمنع كسر النص */
  }

  .topbar .d-flex.flex-wrap i {
    font-size: 11px;
    margin-right: 3px;
  }
  /* .topbar .d-flex.align-items-center.justify-content-end {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 5px;
  } */
  /* السوشيال */
  .topbar .d-flex.align-items-center.justify-content-end > a {
    display: inline-flex !important;
  }
  /* السوشيال */
  .topbar .btn-square {
    width: 24px !important;
    height: 24px !important;
    font-size: 9px;
    margin: 0 2px !important;
    flex-shrink: 0;
  }
  .topbar .btn-square i {
    width: 20px;
    height: 20px;
    font-size: 18px;
    margin: 0 2px !important;
    flex-shrink: 0;
  }

  /* الأزرار */
  /* .topbar-actions {
    display: flex;
    gap: 5px;
  } */
  /* الأزرار */
  .topbar-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 2px;
    flex-shrink: 0;
    justify-content: center; /* أو left حسب التصميم */
  }
  .btn-auth {
    /* padding: 5px 6px; */
    font-size: 10px;
    padding: 4px 6px;
    white-space: nowrap;
    margin-top: 10px;
  }
  /* .topbar-actions .btn {
    padding: 4px 7px;
    font-size: 11px;
  } */
  /* 🔥 نخفي النص ونسيب الأيقونة بس */
  .btn-text {
    display: none;
  }
}
@media (max-width: 375px) {
  .topbar .d-flex.flex-wrap a span {
    display: none;
  }
}
/*--------------------------------------------------------------
# Topbar End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Navbar Start
--------------------------------------------------------------*/
.sticky-top,
.sticky-top .container {
  transition: 0.5s !important;
}
/* تعديل ارتفاع الـ Navbar بدقة */
.navbar {
  min-height: 50px; /* جربي 60 أو 80 حسب ما تحبين */
   height: 70px;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding: 0 15px;
  display: flex;
  align-items: center;
   /* flex-wrap: nowrap; */
     /* justify-content: space-between; */   */
}


/* استهداف رابط BI بشكل محدد لضمان عدم التأثير على غيره */
.navbar-brand {
  font-size: 24px !important; /*تكبير الخط قليلاً */
  font-weight: 800 !important; /*جعل الخط عريضاً ومميزاً */
  color: #0dcaf0 !important; /*تغيير اللون لنفس لون دائرة البروفايل */
  text-transform: uppercase !important; /*جعل الحروف كبيرة */
  margin-right: 20px !important; /*مسافة أمان بسيطة من جهة اليمين */
  transition: 0.3s ease !important; /*حركة ناعمة عند تمرير الماوس */
  display: inline-block !important;
}
.navbar-brand h1:hover {
  color: #f7631b !important; /*تغيير اللون لنفس لون دائرة البروفايل */
}

/* تأثير عند تمرير الماوس فوق الكلمة */
.navbar-brand:hover {
  /* color: #000 !important; */
  /*يتغير اللون للأسود عند لمسه */
  color: #f7631b !important;
  /*يتغير اللون للأسود عند لمسه */
  cursor: pointer;
  /* text-decoration: none !important; */
  /*إخفاء الخط السفلي */
}
/* تعديل حجم الخط والمسافات بين اللينكات ليتناسب مع الحجم الجديد */
.navbar-nav .nav-link {
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 15px; /* تصغير الخط لو صغرتِ الهيدر */
  display: flex;
  align-items: center;
  margin-top: 15rem;
}
.navbar-collapse {
  align-items: center;
  padding-top: 10px;
}
.navbar .navbar-nav .nav-item.nav-link,
.navbar .navbar-nav .nav-link {
  color: var(--bs-dark) !important;
}

.navbar .navbar-nav .nav-item {
  position: relative;
  margin: 0 5px !important;
}

.navbar .navbar-nav .nav-item::before,
.navbar .navbar-nav .nav-item::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  /* border: 0px solid #f6900b; */
  border: 0px solid #f7631b;
  transition: 0.5s;
  margin-top: 4px;
  margin-bottom: 4px;
}

.navbar .navbar-nav .nav-item::before {
  top: 0;
  left: 0;
}
.navbar .navbar-nav .nav-item::after {
  bottom: 0;
  right: 0;
}

.navbar .navbar-nav .nav-item:hover::after,
.navbar .navbar-nav .nav-item:hover::before,
.navbar .navbar-nav .nav-item.active::after,
.navbar .navbar-nav .nav-item.active::before {
  width: 100%;
  border-width: 1px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.sticky-top .navbar .navbar-nav .nav-link:hover,
.sticky-top .navbar .navbar-nav .nav-link.active {
  color: #0492c2 !important;
}

.navbar .dropdown-toggle::after {
  border: none;
  content: "\f107" !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  vertical-align: middle;
}
.navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none;
  transition: 0.3s;
}

.navbar-toggler:focus {
  box-shadow: none;
}
/* الوضع العادي */
/* .navbar-toggler {
  border: none;
  padding: 8px 10px;
} */

/* شكل الأيقونة */
.navbar-toggler-icon {
  width: 28px;
  height: 28px;
  background-image: none !important; /* 👈 مهم جدًا */
  position: relative;
}

.navbar-toggler:hover {
  opacity: 0.8;
}

.navbar-toggler-icon::before {
  content: "\f0c9"; /* أيقونة burger */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
  color: #f7631b; /* 👈 اللون اللي عايزاه */
}
/* .navbar-toggler.active .navbar-toggler-icon {
  transform: rotate(90deg);
} */
/* .navbar .btn {
  font-size: 12px;
  padding: 8px 5px !important;
  height: auto;
} */
.navbar-collapse {
  transform: translateY(-10px);
}

.navbar-collapse.show {
  transform: translateY(0);
}
@media (min-width: 1200px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
    visibility: hidden;
    top: 100%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
    border: 0;
    border-radius: 10px;
    margin-top: 20px !important;
    transition: 0.5s;
    opacity: 0;
    z-index: 9;
  }
}

@media (max-width: 1200px) {
  .navbar .nav-item .dropdown-menu {
    margin-top: 15px !important;
    transition: 0.5s;
  }
}

@media (max-width: 991px) {
  .navbar .navbar-nav .nav-item.nav-link {
    margin: 15px 0 !important;
  }
}

.navbar .navbar-toggler {
  padding: 8px 15px;
  /* color: #f6900b !important; */
  color: #f7631b !important;
  background: #0492c2;
}

#searchModal .modal-content {
  background: #0492c2;
}
/*******new media responsive*******/
/* 📱 Mobile تحسين Navbar */
@media (max-width: 768px) {
  .navbar {
    padding: -8px -10px !important;
    /* margin-top: -90px;
    margin-bottom: 80px; */
  }

  .navbar-brand {
    font-size: 20px !important;
  }
  /* 🔥 أهم جزء: الانيميشن */
  .navbar-collapse {
    background: #fff;
    padding: 10px 15px;
    border-radius: 10px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
  }

  .navbar-collapse.show {
    max-height: 500px; /* كفاية لاحتواء القائمة */
    opacity: 1;
  }
  .navbar-collapse {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
  }

  .navbar-nav {
    /* text-align: center; */
    text-align: left;
  }

  .navbar-nav .nav-item {
    /* margin: 10px 0 !important; */
    margin: 5px 0 !important;
  }

  /* .navbar .btn {
    width: 30%;
    height: 40px;
    margin-top: 10px;
    font-size: 12px;
    padding: 11px 5px !important;
  } */
  /* الأزرار */
  .navbar .btn {
    width: 40%;
    height: 38px;
    margin-top: 8px;
    font-size: 12px;
    padding: 8px 5px !important;
  }
  .navbar-toggler {
    padding: 6px 8px;
  }

  .navbar-toggler-icon {
    width: 24px;
    height: 24px;
  }
  .navbar .navbar-toggler {
    padding: 8px 12px;
    /* color: #f6900b !important; */
    /* color: #f7631b !important;
  background: #0492c2; */
  }
}
@media (max-width: 576px) {
  .navbar .btn {
    width: 100%;
  }
}
@media (min-width: 425px) and (max-width: 480px) {
  .navbar-brand {
    font-size: 18px !important;
  }

  /* .navbar-collapse {
    padding: 12px;
  } */
  .navbar-collapse {
    background: #fff;
    padding: 12px 15px;
    border-radius: 10px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
  }

  .navbar-collapse.show {
    max-height: 500px;
    opacity: 1;
  }
  /* .navbar .btn {
    width: 37%;
    font-size: 12px;
    padding: 8px 5px !important;
    height: auto;
    margin: 8px auto;
    display: block;
  } */
  .navbar-nav .nav-link {
    font-size: 15px;
    padding: 6px 0;
  }

  .navbar .btn {
    width: 45%;
    height: 40px;
    font-size: 13px;
    margin-top: 8px;
  }
  .navbar-nav .nav-item {
    margin: 8px 0 !important;
  }
  .navbar-toggler {
    padding: 6px 8px;
  }

  .navbar-toggler-icon {
    width: 24px;
    height: 24px;
  }
}
/* @media (max-width: 424px) {
  .navbar-brand {
    font-size: 16px !important;
  }

  .navbar-collapse {
    padding: 10px;
  }

  .navbar .btn {
    width: 90%;
    font-size: 11px;
    padding: 7px 5px !important;
    margin: 6px auto;
  }

  .navbar-nav .nav-item {
    margin: 6px 0 !important;
  }
} */
/* 📱 تحسين Dropdown + User */
@media (max-width: 768px) {
  #user-control-panel {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .welcome-badge {
    justify-content: center !important;
  }
}
@media (max-width: 360px) {
  .navbar-toggler {
    padding: 3px 6px;
    font-size: 12px;
  }

  .navbar-toggler .fa-bars {
    font-size: 16px;
  }
  .navbar .btn {
    width: 100% !important;
    font-size: 11px;
    padding: 6px 4px !important;
    margin: 5px 0;
  }
}
@media (min-width: 376px) and (max-width: 424px) {
  .navbar-collapse {
    padding: 10px 12px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
  }

  .navbar-collapse.show {
    max-height: 500px;
    opacity: 1;
  }

  .navbar-nav .nav-item {
    margin: 5px 0 !important;
  }

  .navbar-nav .nav-link {
    font-size: 14px;
    padding: 5px 0;
  }

  .navbar .btn {
    width: 50%;
    height: 38px;
    font-size: 12px;
  }
  .navbar-toggler {
    padding: 5px 7px;
  }

  .navbar-toggler-icon {
    width: 22px;
    height: 22px;
  }
}
/* @media (min-width: 361px) and (max-width: 375px) {
  .navbar-toggler {
    padding: 4px 8px;
    font-size: 12px;
  }

  .navbar-toggler .fa-bars {
    font-size: 18px;
  }
  .navbar .btn {
    width: 50% !important;
    font-size: 12px;
    padding: 7px 5px !important;
    margin: 6px auto;
    display: block;
  }

  .navbar-nav .nav-item {
    margin: 6px 0 !important;
  }
} */
@media (max-width: 375px) {
  .navbar-collapse {
    padding: 8px 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
  }
  .navbar-toggler {
    padding: 2px 4px;
  }
  .navbar-toggler-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  .navbar-collapse.show {
    max-height: 400px;
    opacity: 1;
  }

  .navbar-nav .nav-item {
    margin: 4px 0 !important;
  }

  .navbar-nav .nav-link {
    font-size: 13px;
    padding: 4px 0;
  }

  .navbar .btn {
    width: 50%;
    height: 36px;
    font-size: 11px;
    margin-top: 6px;
  }
  .navbar .navbar-nav .nav-item::before,
  .navbar .navbar-nav .nav-item::after {
    margin-top: 2px;
    margin-bottom: 2px;
  }
}

@media (min-width: 376px) and (max-width: 390px) {
  .navbar-toggler {
    padding: 5px 9px;
  }

  .navbar-toggler .fa-bars {
    font-size: 19px;
  }
  .navbar .btn {
    width: 80% !important;
    font-size: 12px;
    padding: 8px 6px !important;
    margin: 7px auto;
  }
  .navbar .navbar-nav .nav-item::before,
  .navbar .navbar-nav .nav-item::after {
    margin-top: 2px;
    margin-bottom: 2px;
  }
}
@media (min-width: 391px) and (max-width: 414px) {
  .navbar-toggler {
    padding: 6px 10px;
  }

  .navbar-toggler .fa-bars {
    font-size: 20px;
  }
  .navbar .btn {
    width: 40% !important;
    font-size: 12.5px;
    padding: 8px 6px !important;
    margin: 8px auto;
  }
}
@media (max-width: 320px) {
  .navbar-collapse {
    padding: 8px 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
  }
  .navbar-toggler {
    padding: 2px 4px;
  }
  .navbar-toggler-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  .navbar-collapse.show {
    max-height: 400px;
    opacity: 1;
  }

  .navbar-nav .nav-item {
    margin: 4px 0 !important;
  }

  .navbar-nav .nav-link {
    font-size: 13px;
    padding: 4px 0;
  }

  .navbar .btn {
    width: 50%;
    /* width: fit-content; */
    height: 26px;
    font-size: 11px;
    margin-top: 6px;
  }

  .navbar .navbar-nav .nav-item::before,
  .navbar .navbar-nav .nav-item::after {
    margin-top: 2px;
    margin-bottom: 2px;
  }
}
/*--------------------------------------------------------------
# Navbar End
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Login Start
--------------------------------------------------------------*/
/* تحسينات الـ Modal */
.modal-content {
  overflow: hidden;
}
/* .modal-content {
  max-height: 90vh;
  overflow-y: auto;
} */
.form-control:focus {
  border-color: #0492c2;
  box-shadow: 0 0 0 0.25rem rgba(4, 146, 194, 0.25);
}
.text-center h2 {
  font-size: 40px;
}

/*  for registerتنسيق الأزرار الأساسي */
.btn-info {
  background-color: #0492c2 !important;
  border: none;
  transition: 0.3s ease;
}

.btn-info:hover {
  /* background-color: #f6900b !important; */
  background-color: #f7631b !important;
  transform: translateY(-2px);
  border: none;
}
/*For login */
.btn-outline-info {
  color: white !important;
}

.btn-outline-info:hover {
  background-color: #0492c2 !important;
  color: white !important;
}

.btn-auth {
  font-size: 12px;
  font-weight: 200;
  white-space: nowrap; /* لمنع النص من النزول لسطر جديد */
  transition: 0.3s;
  background-color: #0492c2;
  margin-right: 5px;
  margin-left: 5px;
}

.btn-auth:hover {
  /* color: #f6900b; */
  color: #f7631b;
}

/* ضبط المسافات في الموبايل */
@media (max-width: 991px) {
  .auth-buttons {
    width: 100%;
    justify-content: center; /* توسيط الأزرار في قائمة الموبايل */
    border-top: 1px solid #eee; /* فاصل خفيف عن الروابط */
    padding-top: 15px;
    margin-bottom: 15px;
  }

  .btn-auth {
    flex: 1; /* جعل الأزرار تأخذ مساحة متساوية في الموبايل */
    text-align: center;
  }
}
/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .btn-auth,
  #btn-login-main {
    width: 100%; /* ياخد عرض كامل */
    margin-bottom: 10px; /* مسافة بين الأزرار */
    font-size: 12px;
    padding: 10px;
  }

  /* لو جوه flex نخليهم تحت بعض */
  .btn-auth-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
/* 📱 تحسين Login Modal */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 10px;
  }

  .text-center h2 {
    font-size: 24px;
  }

  .login-area .btn-login {
    max-width: 100%;
    margin-left: 0;
  }
}

/* 📱 تحسين spacing عام */
@media (max-width: 768px) {
  .container,
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
    /* overflow: hidden; */
  }
}

/* 📱 تحسين الأزرار */
@media (max-width: 576px) {
  .btn {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* 📱 Small Mobile Fix */
@media (max-width: 480px) {
  .navbar-brand {
    font-size: 18px !important;
  }

  .navbar-toggler {
    padding: 5px 10px;
  }

  .modal-content {
    padding: 10px;
  }
}
/* ================= SMALL MOBILE ================= */
@media (max-width: 480px) {
  .btn-auth,
  #btn-login-main {
    font-size: 12px;
    padding: 8px;
  }
}
/* تنسيق الـ Checkbox عند الاختيار */
.login-area .custom-check:checked {
  background-color: #0492c2;
  border-color: #0492c2;
}
/* تنسيق النصوص والروابط داخل منطقة الدخول فقط */
.login-area .custom-label,
.login-area .custom-p {
  font-family:
    "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* أو أي خط تفضلينه */
  font-size: 13.5px;
  color: #555 !important;
  letter-spacing: 0.3px;
}

/* تنسيق الروابط (Forgot password & Sign up) */
.login-area .custom-link {
  color: #0492c2 !important;
  font-size: 13px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.login-area .custom-link:hover {
  color: #f7631b !important; /* يتحول للبرتقالي عند الهوفر */
  text-decoration: underline !important;
}

/* تنسيق الزر الخاص بالدخول فقط */
.login-area .btn-login {
  background-color: #0492c2 !important;
  border: none;
  font-size: 14px;
  transition:
    transform 0.2s,
    background-color 0.3s;
  max-width: 40%;
  margin-left: 7rem;
}

.login-area .btn-login:hover {
  background-color: #0378a0 !important;
  transform: scale(1.02); /* تكبير بسيط جداً عند الهوفر */
}

/* تنسيق الخط الفاصل */
.login-area .custom-hr {
  opacity: 0.1;
  border-top: 1px solid #000;
}

/*--------------------------------------------------------------
# Login End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# SHeader Carousel Start
--------------------------------------------------------------*/

.header-carousel .header-carousel-item {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.owl-carousel {
  position: relative;
  /* overflow: visible !important; */
}
/* .owl-nav {
  display: block !important;
}

.owl-prev,
.owl-next {
  opacity: 1 !important;
  visibility: visible !important;
} */
.owl-prev,
.owl-next {
  position: absolute;
  width: 60px;
  height: 60px;
  /* width: 40px;
  height: 40px; */
  top: 50%;
  font-size: 16px;
  transform: translateY(-50%);
  z-index: 10;
  padding: 20px 20px;
  border-radius: 40px;
  /* background: var(--bs-primary); */
  background-color: #0492c2;
  color: var(--bs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.owl-prev {
  /* left: 30px; */
  left: 10px;
}
.owl-next {
  /* right: 30px; */
  right: 10px;
}

.owl-prev:hover,
.owl-next:hover {
  /* background-color: #f6900b; */
  background-color: #f7631b;

  color: var(--bs-white) !important;
}

.header-carousel .header-carousel-item-img-1,
.header-carousel .header-carousel-item-img-2,
.header-carousel .header-carousel-item-img-3 {
  position: relative;
  overflow: hidden;
}

.header-carousel .header-carousel-item-img-1::before,
.header-carousel .header-carousel-item-img-2::before,
.header-carousel .header-carousel-item-img-3::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: -300px;
  right: -300px;
  border-radius: 300px;
  border: 100px solid rgba(68, 210, 246, 0.2);
  animation: RotateMoveCircle 10s linear infinite;
  background: transparent;
  z-index: 2 !important;
}

@keyframes RotateMoveCircle {
  0% {
    top: -400px;
  }
  50% {
    right: -200px;
  }
  75% {
    top: -200px;
  }
  100% {
    top: -400px;
  }
}

.header-carousel .header-carousel-item-img-1::after,
.header-carousel .header-carousel-item-img-2::after,
.header-carousel .header-carousel-item-img-3::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 1200px;
  top: -150px;
  left: 70px;
  transform: rotate(-30deg);
  background: rgba(68, 210, 246, 0.2);
  animation: RotateMoveRight 5s linear infinite;
  z-index: 2 !important;
}

@keyframes RotateMoveRight {
  0% {
    left: 0px;
  }
  50% {
    left: 70px;
  }
  100% {
    left: 0px;
  }
}

.header-carousel .header-carousel-item::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 1200px;
  top: -150px;
  left: -265px;
  transform: rotate(-30deg);
  background: var(--bs-dark);
  animation: RotateMoveLeft 5s linear infinite;
  opacity: 0.7;
  z-index: 2 !important;
}

@keyframes RotateMoveLeft {
  0% {
    left: -240px;
  }
  50% {
    left: -300px;
  }
  100% {
    left: -240px;
  }
}

.header-carousel .header-carousel-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2 !important;
}

.header-carousel .header-carousel-item .carousel-caption {
  position: absolute;
  width: 80%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 9;
}
/* العنوان */
.carousel-caption h1 {
  /* font-family: 'Poppins', sans-serif; */
  font-size: 30px;
  font-weight: 500;
  /* color: #ffffff !important;  */
  /* color: #0d6efd !important; */
  color: #f7631b !important;
}
.carousel-caption h1:hover {
  /* font-family: 'Poppins', sans-serif; */
  font-weight: 500;
  /* color: #f7631b !important;   */
  color: #0492c2 !important;
}

/* النص */
.carousel-caption p {
  font-family: "Roboto", sans-serif;
  font-size: 20px !important;
  color: #e0e0e0;
}
.carousel-caption h1,
.carousel-caption p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
/* @media (max-width: 992px) {
  .header-carousel .header-carousel-item .carousel-caption {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 10px;
  }
  .header-carousel-item img {
    height: 700px;
    object-fit: cover;
  }

  .owl-prev,
  .owl-next {
    top: 40px !important;
  }

  .owl-prev {
    left: 65%;
  }
} */
/*******new media responsive*******/
/* ================= EXTRA CAROUSEL RESPONSIVE ================= */

/* 📱 Tablet & Mobile */
@media (max-width: 768px) {
  .header-carousel .header-carousel-item img {
    height: 500px !important;
    object-fit: cover;
  }

  .header-carousel .carousel-caption {
    width: 90% !important;
    padding: 0 15px;
    text-align: center !important;
  }

  .carousel-caption h1 {
    font-size: 24px !important;
    line-height: 1.4;
    text-align: center !important;
  }

  .carousel-caption p {
    font-size: 17px !important;
    text-align: center !important;
  }

  /* أزرار Owl */
  .owl-prev,
  .owl-next {
    /* width: 45px;
    height: 45px; */
    width: 35px;
    height: 35px;
    font-size: 11px;
    padding: 10px;
    top: 50% !important;
  }

  .owl-prev {
    /* left: 10px !important; */
    left: 25px !important;
  }

  .owl-next {
    /* right: 10px !important; */
    right: 25px !important;
  }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
  .header-carousel .header-carousel-item img {
    height: 400px !important;
  }

  .carousel-caption h1 {
    font-size: 18px !important;
    margin-top: -4px;
  }

  .carousel-caption p {
    font-size: 14px !important;
    margin-top: -12px;
  }

  /* نخفي الأسهم عشان الزحمة */
  .owl-prev,
  .owl-next {
    /* display: none !important; */
    display: block;
  }
  .owl-prev {
    left: 10px !important;
    /* left: 20px !important; */
    margin-top: -5px;
  }

  .owl-next {
    right: 10px !important;
    /* right: 20px !important; */
    margin-top: -5px;
  }
}

/* 📱 تحسين الأنيميشن الثقيلة */
@media (max-width: 768px) {
  .header-carousel .header-carousel-item-img-1::before,
  .header-carousel .header-carousel-item-img-2::before,
  .header-carousel .header-carousel-item-img-3::before,
  .header-carousel .header-carousel-item-img-1::after,
  .header-carousel .header-carousel-item-img-2::after,
  .header-carousel .header-carousel-item-img-3::after,
  .header-carousel .header-carousel-item::before {
    display: none !important; /* تقليل اللود على الموبايل */
  }
}
/* 📱 Extra Small Mobile (424px) */
@media (max-width: 424px) {
  .header-carousel .header-carousel-item img {
    height: 320px !important; /* أصغر شوية عشان الشاشة */
  }

  .carousel-caption {
    padding: 10px !important;
  }

  .carousel-caption h1 {
    font-size: 14px !important;
    line-height: 1.3;
  }

  .carousel-caption p {
    font-size: 10px !important;
    line-height: 1.4;
    margin-top: 4px;
  }

  /* تصغير الأسهم */
  .owl-prev,
  .owl-next {
    width: 35px;
    height: 35px;
    font-size: 12px;
    /* top: 55% !important; */
  }
  .owl-prev {
    left: 10px !important;
    /* left: 20px !important; */
    margin-top: -6px;
  }

  .owl-next {
    right: 10px !important;
    /* right: 20px !important; */
    margin-top: -6px;
  }
}
/*--------------------------------------------------------------
# SHeader Carousel End
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Single Page Hero Header Start
--------------------------------------------------------------*/
.bg-breadcrumb {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/carousel-1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 0 60px 0;
}

.breadcrumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* يمكنك التحكم في درجة الشفافية بتغيير 0.6 (60%) */
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* لجعل روابط الـ breadcrumb تظهر بوضوح فوق الأوفرلاي */
.breadcrumb-item a {
  color: #ddd !important;
  text-decoration: none;
}

.bg-breadcrumb .breadcrumb-item a {
  color: var(--bs-white) !important;
  font-size: 17px;
}

.bg-breadcrumb .bg-breadcrumb-single {
  position: absolute;
  width: 500px;
  height: 1200px;
  top: 0px;
  left: 0;
  margin-left: 30px;
  transform: rotate(-30deg);
  background: var(--bs-dark);
  animation: RotateMoveLeft 5s linear infinite;
  opacity: 0.7;
  z-index: 2 !important;
}

.bg-breadcrumb::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  top: -150px;
  right: -150px;
  border-radius: 200px;
  border: 80px solid rgba(68, 210, 246, 0.2);
  animation: RotateMoveCircle 10s linear infinite;
  background: transparent;
  z-index: 2 !important;
}

@keyframes RotateMoveCircle {
  0% {
    top: -200px;
  }
  50% {
    right: -100px;
  }
  75% {
    top: -100px;
  }
  100% {
    top: -200px;
  }
}

.bg-breadcrumb::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 1200px;
  top: -150px;
  left: 0;
  margin-left: 160px;
  transform: rotate(-30deg);
  background: rgba(68, 210, 246, 0.2);
  animation: RotateMoveRight 5s linear infinite;
  z-index: 2 !important;
}

/*--------------------------------------------------------------
# Feature Start
--------------------------------------------------------------*/
.feature-area {
  margin-top: -49px; /* يمكنك زيادة أو تقليل الرقم حسب الرغبة */
  position: relative;
  z-index: 10; /* لضمان ظهوره فوق الشاشة الشفافة (Overlay) */
}
/* تحسين شكل الكروت لتبرز بوضوح */
.single-feature {
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  min-height: 150px;
  max-width: 95%;
  margin: 0 auto;
  justify-content: center; /* Centers content vertically */
  border-radius: 12px; /* Optional: rounded corners */
  border-left: 4px solid #0492c2;
}

/* تأثير عند تمرير الماوس على الكرت */
.single-feature:hover {
  transform: translateY(-5px);
  background: rgba(162, 161, 161, 0.1);
}
/* .feature-area .single-feature {
    border-radius: 10px;
    transition: 0.3s;
} */

/* .feature-area .single-feature:hover {
    transform: translateY(-5px);
} */
.single-feature .title {
  background: rgba(255, 255, 255, 0.15);
  padding: 11.5px 0px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px solid #0492c2;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.single-feature .title h4 a {
  color: #fff;
  font-size: 19px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.single-feature .title h4:hover {
  /* color: #fdbb06; */
  color: #f7631b;
}

.single-feature .desc-wrap {
  padding: 20px;
  box-shadow: 0px 10px 30px 0px rgba(153, 153, 153, 0.1);
  height: 135px;
}
.single-feature .desc-wrap p {
  font-size: 14px;
  margin-top: -5px;
  /* color: #555555; */
  color: #151515;
  line-height: 1.6;
  text-align: justify;
}

.single-feature:hover .title {
  background: #f7631b;
  /* background: #0492c2; */
}

/* ================= MOBILE ================= */
/* @media (max-width: 768px) {

  .feature-area {
    padding: 40px 15px;
    
  }

  .row {
    display: flex;
    flex-direction: column;
    gap: 10px; */
/* مسافة بين الكروت */
/* }

  .col-lg-4 {
    width: 100%;
    max-width: 100%;
  }

  .single-feature {
    padding: -10px;
    text-align: center;  */
/* مناسب للموبايل */
/* width: 100%;
  }

  .single-feature .title h4 {
    font-size: 18px;
  }

  .single-feature .desc-wrap p {
    font-size: 14px;
  }
} */

/* ================= SMALL MOBILE ================= */
/* @media (max-width: 480px) {

  .single-feature {
    padding: 15px;
  }

  .single-feature .title h4 {
    font-size: 16px;
  }

  .single-feature .desc-wrap p {
    font-size: 13px;
  }
} */
/*******new media responsive*******/
@media (max-width: 991px) {
  .single-feature {
    margin-bottom: 30px;
    /* background-color: #a0a003; */
  }
  .single-feature .title {
    background: #f7631b;
    margin-top: -19.5px;
    height: 48px;
    background-color: #0492c2;
  }
}
@media (max-width: 768px) {
  /* منع تكسير Bootstrap row */
  .feature-area .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
  }

  /* إصلاح الأعمدة */
  .feature-area .col-lg-4 {
    width: 100% !important;
    max-width: 800% !important;
  }
  .single-feature {
    margin-bottom: 40px;
    /* transform: translateY(-20px);  */
    /* يرفع الكارت لفوق */
  }
  .single-feature .title {
    background: #f7631b;
    margin-top: -18.5px;
    height: 48px;
    background-color: #0492c2;
  }
  /* .single-feature {
    margin-top: -20px; */
  /* يرفع لفوق */
  /* margin-bottom: 20px;
  } */
  /***لوعاوزة اول كرت فقط يكون فوق ***/
  /* .single-feature:first-child {
    transform: translateY(-20px);
  } */
  /* تحسين الكروت */
  .feature-area .single-feature {
    padding: 20px !important;
    margin-bottom: 10px;
    width: 80%;
  }

  /* إصلاح مشكلة ارتفاع الوصف */
  .feature-area .desc-wrap {
    height: auto !important;
    min-height: auto !important;
  }

  /* تحسين الخط */
  .feature-area .title h4 a {
    font-size: 18px !important;
  }

  .feature-area .desc-wrap p {
    font-size: 14px !important;
    text-align: center;
    color: #1a1a1a;
  }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
  .feature-area {
    margin-top: 0 !important; /* مهم جدًا لإصلاح overlap */
  }

  .single-feature {
    /* margin-bottom: 40px; */
    margin-top: 3px;
    transform: translateY(-50px);
    /* يرفع الكارت لفوق */
  }
  .feature-area .single-feature {
    padding: 15px !important;
    border-left: none !important;
    width: 80%;
    /* شكل أنظف للموبايل */
    border-top: 4px solid #0492c2;
    /*border-left: 4px solid #0492c2; */
  }

  .feature-area .title {
    padding: 10px 5px;
    height: 45px;
  }

  .feature-area .title h4 a {
    font-size: 16px !important;
  }
  .feature-area .desc-wrap p {
    font-size: 12px !important;
    text-align: center;
    color: #1a1a1a;
  }
}

/* ===== 360px ===== */
@media (max-width: 360px) {
  .feature-area .single-feature {
    margin-bottom: 15px;
    padding: 12px;
    text-align: center;
  }

  .feature-area .title h4 {
    font-size: 14px;
    line-height: 1.3;
  }

  .feature-area .desc-wrap p {
    font-size: 12px;
    line-height: 1.4;
  }

  .feature-area .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== 375px ===== */
@media (min-width: 361px) and (max-width: 375px) {
  .feature-area .single-feature {
    margin-bottom: 18px;
    padding: 14px;
    text-align: center;
  }

  .feature-area .title h4 {
    font-size: 13px;
    margin-top: 3px;
  }

  .feature-area .desc-wrap p {
    font-size: 11px !important;
  }

  .feature-area .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== 390px ===== */
@media (min-width: 376px) and (max-width: 390px) {
  .feature-area .single-feature {
    margin-bottom: 20px;
    padding: 15px;
  }

  .feature-area .title h4 {
    font-size: 16px;
  }

  .feature-area .desc-wrap p {
    font-size: 14px;
  }

  .feature-area .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== 414px ===== */
@media (min-width: 391px) and (max-width: 414px) {
  .feature-area .single-feature {
    margin-bottom: 22px;
    padding: 16px;
  }

  .feature-area .title h4 {
    font-size: 17px;
  }

  .feature-area .desc-wrap p {
    font-size: 14px;
  }

  .feature-area .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 576px) {
  .feature-area .col-lg-4 {
    width: 100% !important;
  }
}
/*--------------------------------------------------------------
# Feature End
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# New About Section Start
--------------------------------------------------------------*/
.image-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: 20px;
}
.about-images-section h6 {
  font-size: 20px;
  /* text-align: center; */
}
.about-images-section h1 {
  font-size: 20px;
  /* text-align: center; */
}
/* تنسيق الفقرات داخل قسم About */
.about-images-section p {
  text-align: justify;
  text-justify: inter-word; /* توزيع الفراغات بين الكلمات بانتظام */
  line-height: 1.8; /* مسافة مريحة بين السطور */
  /* color: #555555;  */
  /* لون احترافي غير مجهد للعين */
  color: #0e0d0d; /* لون احترافي غير مجهد للعين */
  font-size: 1rem; /* حجم خط قياسي */
  margin-bottom: 20px; /* مسافة أسفل كل فقرة */
  text-indent: 30px;
  line-height: 1.8;
  font-size: 16px;
}

/* تمييز الفقرة الأولى (اختياري) لتبدو كملخص */
.about-images-section .lead-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}
.image-stack__item {
  grid-row: 1; /* جعل جميع الصور في نفس الصف لتتداخل */
  transition: transform 0.4s ease;
  z-index: 1;
}

/* الصورة الخلفية (على اليسار) */
.image-stack__item--bottom {
  grid-column: 1 / span 8;
  z-index: 1;
  left: 0;
  top: 0;
}

/* الصورة في المنتصف */
.image-stack__item--middle {
  grid-column: 4 / span 7;
  grid-row: 1;
  padding-top: 20%; /* دفعها للأسفل قليلاً */
  z-index: 2;
  left: 80px;
  top: 60px;
}

/* الصورة العلوية (على اليمين) */
.image-stack__item--top {
  grid-column: 7 / -1;
  grid-row: 1;
  padding-top: 40%; /* دفعها للأسفل أكثر */
  z-index: 3;
  left: 160px;
  top: 120px;
}

.image-stack__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 15px; /* حواف دائرية أنيقة */
  border: 5px solid #ffffff; /* إطار أبيض لفصل الصور المتداخلة */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* ظل ناعم */
}
.image-stack__item {
  width: 100%;
  height: auto;
}
/* تأثير عند تمرير الماوس */
.image-stack__item:hover {
  transform: scale(1.05);
  z-index: 10; /* الصورة المختار تظهر فوق البقية */
}

.about-images-section .btn {
  transform: scale(0.9); /* تصغير بنسبة 90% */
  transform-origin: center;
  padding: 12px 22px !important;
  font-size: 15px;
  border-radius: 20px;
}
/* @media (max-width: 992px) {

.image-stack {
    max-width: 550px;
    margin: auto;
}

.image-stack__item--middle {
    left: 60px;
    top: 50px;
}

.image-stack__item--top {
    left: 120px;
    top: 100px;
}

}
/* تحسينات الموبايل */
/*@media (max-width: 768px) {
  .image-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: static;
  }
  .image-stack__item {
    padding: 0 !important;
    position: relative;
    width: 100%;
  }
  .image-stack__item--middle,
  .image-stack__item--top {
    left: 0;
    top: 0;
}
}
@media (max-width:992px){
.about-images-section h6{
    font-size:28px;
    text-align: center;
}
.about-images-section h1{
    font-size:28px;
    text-align: center;
}
.about-images-section p{
    font-size:15px;
    text-align: justify; 
    line-height: 1.9;
      text-indent: 20px;
}

}
@media (max-width:768px){
.about-images-section h6{
    font-size:28px;
    text-align: center;
}
.about-images-section h1{
    font-size:18px;
    text-align: center;
}


.about-images-section p{
    text-indent: 30px;
    line-height: 1.9;
    font-size: 15px;
    text-align: center;
}

} */
/*****new media responsive********/
@media (max-width: 992px) {
  /* منع مشاكل الـ overlap */
  .image-stack__item--middle,
  .image-stack__item--top,
  .image-stack__item--bottom {
    left: 0 !important;
    top: 0 !important;
    padding-top: 0 !important;
  }

  /* تحسين العرض في التابلت */
  .image-stack {
    max-width: 100% !important;
    padding: 10px;
  }

  .image-stack__item img {
    aspect-ratio: 16 / 10;
  }
}

/* 📱 Mobile Fix قوي */
@media (max-width: 768px) {
  .about-images-section .row {
    flex-direction: column;
    text-align: center;
  }

  .about-images-section h6,
  .about-images-section h1 {
    text-align: center !important;
  }
  .about-images-section h6 {
    font-size: 17px;
  }
  .about-images-section h1 {
    font-size: 20px !important;
  }
  .image-stack {
    gap: 20px;
  }

  .image-stack__item {
    transform: none !important; /* إلغاء hover scale في الموبايل */
  }

  .image-stack__item:hover {
    transform: none !important;
  }

  .about-images-section p {
    text-align: center !important;
    text-indent: 0 !important;
    font-size: 14px;
  }
  .image-stack__item img {
    width: 80%;
    height: auto;
    margin-left: 15px;
  }
  .about-images-section .btn {
    width: 23%;
    white-space: nowrap;
    padding: 10px 18px !important;
    font-size: 14px;
  }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
  .image-stack__item img {
    border-radius: 10px;
  }

  .about-images-section h1 {
    font-size: 18px !important;
  }

  .about-images-section p {
    font-size: 13px !important;
    line-height: 1.6;
  }
  /* .about-images-section .btn {
    width: 30%;
    white-space: nowrap;
    text-align: justify;
   padding: 10px 18px !important;
   font-size: 12px;
  } */
  .about-images-section .btn {
    width: 37%; /* بدل 30% */
    height: 35px;
    margin: 15px auto;
    display: block;
    text-align: center; /* مهم */
    padding: 10px 18px !important;
    font-size: 14px;
    /* transform: scale(0.8);  */
    /* تصغير أكتر */
  }
  .about-images-section .btn a {
    font-size: 14px;
    /* margin-top: 15px; */
  }
}
/* 📱 Extra Small Mobile (424px) */
@media (max-width: 424px) {
  .about-images-section h1 {
    font-size: 16px !important;
  }

  .about-images-section p {
    font-size: 12px !important;
    line-height: 1.5;
  }

  .about-images-section .btn {
    width: 90%;
    font-size: 12px;
    padding: 9px 15px !important;
    transform: scale(0.8); /* تصغير أكتر */
  }
}
/* Default (desktop) keeps Bootstrap styling */

/* Mobile: 360px - 414px */
@media (max-width: 414px) {
  .image-stack__item img {
    width: 90%;
    height: auto;
    margin-left: 15px;
  }
  .about-images-section p {
    font-size: 12px !important;
    line-height: 1.5;
  }
  .about-images-section .btn {
    display: inline-block;
    width: 40%;
    font-size: 13px;
    padding: 8px 18px !important;
    text-align: center;
  }
}

/* Extra small phones (360px - 375px) */
@media (max-width: 375px) {
  .about-images-section .btn {
    width: 40%;
    font-size: 13px;
    padding: 10px 18px !important;
  }
}

/* Very small devices (≤360px) */
@media (max-width: 360px) {
  .about-images-section .btn {
    width: 50%;
    font-size: 12px;
    padding: 9px 16px !important;
  }
}

/*--------------------------------------------------------------
# New About Section End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# We provide Section Start
--------------------------------------------------------------*/
.services-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.services-section h6 {
  font-size: 1.3rem;
}
.services-section h2 {
  font-size: 10px;
}
.services-section h4 {
  font-size: 1.3rem;
}
.services-section p.text-light {
  font-size: 1.1rem;
}

.service-card {
  border-top: 5px solid transparent;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-card:hover {
  border-top: 5px solid #f7631b; /* Your Orange Theme */
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.service-card h4 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.services-bg-overlay {
  position: relative;
  background-image: url("../img/analytic.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Optional: Creates a cool parallax effect */
  padding: 100px 0; /* Extra space for a premium look */
}

/* The Dark Overlay */
.services-bg-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* Ensure the cards stand out */
.service-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  /* border: none; */
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(248, 143, 4, 0.3) !important;
}
/* Tablet (≤ 992px) */
/* @media (max-width: 992px) {
    .services-section h2 {
        font-size: 2rem;
    }

    .services-section p {
        font-size: 0.95rem;
    }

    .service-card {
        padding: 20px;
    }
} */

/* @media (max-width:768px){
  .service-card{
    width: 85%;
    margin-left: 40px;
  }
  .services-section {
        padding: 40px 15px;
    }

    .services-section h2 {
        font-size: 1.6rem;
    }

    .services-section h6 {
        font-size: 0.8rem;
    }

    .services-section p {
        font-size: 0.9rem;
    }

    .service-card {
        padding: 18px;
        text-align: center;
    }

    .service-card h4 {
        font-size: 1.2rem;
    }
}
/* Small Mobile (≤ 480px) */
/*@media (max-width: 480px) {
    .services-section h2 {
        font-size: 1.4rem;
        line-height: 1.4;
    }

    .services-section p {
        font-size: 0.85rem;
    }

    .service-card {
        padding: 15px;
    }

    .service-card h4 {
        font-size: 1.1rem;
    }
} */

/*********new responsive css**********/
@media (max-width: 992px) {
  /* تحسين العنوان */
  .services-section h2 {
    text-align: center;
  }

  .services-section h6,
  .services-section p {
    text-align: center;
  }
  .services-section p.text-light {
    font-size: 1rem;
  }
  /* توسيط الكروت داخل الصف */
  .services-section .row {
    justify-content: center;
  }
}

/* 📱 Mobile Fix */
@media (max-width: 768px) {
  /* منع أي margin يسبب انحراف */
  .service-card {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* تحسين spacing */
  .services-section {
    padding: 50px 15px !important;
  }
  .services-section h6 {
    font-size: 1.2rem !important;
  }
  .services-section h2 {
    font-size: 1.1rem !important;
  }
  .services-section p.text-light {
    font-size: 0.8rem;
  }
  /* الكروت تكون centered clean */
  .service-card {
    text-align: center;
  }

  /* تحسين النص */
  .service-card h4 {
    font-size: 1.1rem;
  }

  .service-card p {
    font-size: 0.9rem;
  }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
  .services-section h6 {
    font-size: 0.9rem !important;
  }
  .services-section h2 {
    font-size: 0.8rem !important;
  }

  .service-card {
    padding: 8px !important;
    width: 80%;
  }

  .service-card h4 {
    font-size: 0.9rem;
  }

  .service-card p {
    font-size: 0.75rem;
    margin-bottom: 4px;
    color: black !important;
  }
}
/*--------------------------------------------------------------
# We provide  Section End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Service Start
--------------------------------------------------------------*/
/* .row > div {
  display: flex;
}

.row > div > .service-content {
  width: 100%;
} */
.service .service-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.3);
  /* height: 100%; */
  /* display: flex; */
  display: inline-block; /* يمنع التمدد */
  flex-direction: column;
  /* transition: all .4s ease; */
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100% !important;
  margin-bottom: 25px;
  height: auto !important; /* مهم جداً */
  min-height: unset !important; /* يمنع الطول الزيادة */
}

.service .service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* لتوحيد طول الكروت نفسها (الخدمات) لتبدو بصف واحد متساوي */
/* .service .row{
    row-gap: 25px;
    align-items: flex-start !important;   
} */

.service-content {
  flex-grow: 1; /* جعل المحتوى يأخذ بقية المساحة ليتساوى طول الكروت */
  /* background-color: #94908e; */
  /* padding: 20px !important; */
  /* بدل p-4 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  /* height: 100%; */
  transition: 0.3s ease;
}

.service-content:hover {
  transform: translateY(-5px);
}
.service-content-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service .text-primary h4 {
  font-size: 22px;
}
.service .display-4 {
  font-size: 24px !important;
  text-align: center;
}
.service-content-inner a {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  min-height: 60px;
  display: flex;
  align-items: center;
  /* text-align: justify; */
  justify-content: center;
  /* justify-content: center; */
  margin-top: -6px;
}

.service-content-inner .h4 {
  margin-bottom: 10px !important;
}
/* .service-content-inner p {
  color: #040404;
  margin-top: -5px; */
/* margin-bottom: 10px !important; */
/* font-size: 13px; */
/* line-height: 1.6; */
/* line-height: 1.5;
  height: 12.9em; */
/* حجز مساحة ثابتة لـ 3 أسطر وصف */
/* overflow: hidden; */
/* display: -webkit-box; */
/* -webkit-line-clamp: 4; */
/* -webkit-line-clamp: 2; */
/* 👈 خليها سطرين */
/* -webkit-box-orient: vertical;
  text-align: justify; */
/* word-spacing: -2.5px; */
/* flex-grow: 1;
  text-justify: inter-word;
  word-spacing: 1.4px;
} */
.service-content-inner p {
  color: #040404;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.6;
  height: 8.9rem;
  /* height: auto; */
  /* حجز مساحة ثابتة لـ 3 أسطر وصف */
  overflow: hidden;
  /* overflow: visible; */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: justify;
  word-spacing: -1px;
  flex-grow: 1;
  text-justify: inter-word;
  /* word-spacing: 1.1px; */
  /* letter-spacing: 0.2px; */
}
.btn {
  white-space: nowrap;
}
.service .text-start {
  text-align: center !important;
}
.service .service-item .service-img {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%; /* ملء عرض الحاوية */
}

/* .service .service-item .service-img img {
  width: 100%;
  aspect-ratio: 4/3; */
/* أهم خاصية: تجعل الصورة تغطي المساحة بالكامل دون أن تبدو مضغوطة */
/* height: 220px; */
/* height: 180px;  */
/* قلليها من الطبيعي */
/* object-fit: cover; */
/* لضمان الجودة عند القص */
/* object-position: center;
  transition: transform 0.5s ease; /* تأثير جمالي عند المرور بالماوس */
/* }  */
.service .service-item .service-img img {
  /* transition: 0.5s; */
  width: 100%;
  /* height: 120%; */
  /* تحديد نسبة العرض إلى الطول (مثلاً 16:9 أو 4:3) لتوحيد الشكل */
  /* aspect-ratio: 16 / 10; */
  aspect-ratio: 4/3;
  /* أهم خاصية: تجعل الصورة تغطي المساحة بالكامل دون أن تبدو مضغوطة */
  /* height: 220px; */
  height: 180px; /* قلليها من الطبيعي */
  object-fit: cover;
  /* لضمان الجودة عند القص */
  object-position: center;
  transition: transform 0.5s ease; /* تأثير جمالي عند المرور بالماوس */
}
.service .service-item:hover .service-img img {
  transform: scale(1.1);
}
.service .service-item .service-content {
  position: relative;
}

.service .service-item .service-content::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #0492c2;
  transition: 0.5s;
  z-index: 1;
}

.service .service-item:hover .service-content::after {
  width: 100% !important;
  height: 100% !important;
}

.service .service-item .service-content .service-content-inner {
  transition: 0.5s;
}

.service .service-item:hover .service-content .service-content-inner {
  position: relative;
  color: var(--bs-white) !important;
  transition: 0.5s;
  z-index: 2;
}

.service .service-item:hover .service-content .service-content-inner a.h4 {
  /* color: #f6900b !important; */
  /* color: #f6900b !important; */
  color: white !important;
  transition: 0.5s;
}

.service .service-item:hover .service-content .service-content-inner p {
  /* color: #f6900b !important; */
  /* color: #f6900b !important; */
  color: white !important;
  transition: 0.5s;
}

.service
  .service-item:hover
  .service-content
  .service-content-inner
  a.h4:hover {
  /* color: #f6900b !important; */
  color: #f7631b !important;
}
.service .btn {
  font-size: 15px;
  display: block;
  width: 13%;
  /* width: fit-content; */
  /* يخلي العرض على قد الكلام */
  justify-content: center;
  display: flex;
  height: 45px;
  margin: 60px auto 0; /* توسيط أفقي */
  /* text-align: center; */
  padding: 10px 25px; /* مسافة داخلية مناسبة */
  white-space: nowrap; /* يمنع نزول النص لسطر تاني */
}
/* @media (max-width: 992px){
.service .display-4{
    font-size: 32px;
}

.service .service-item{
    margin-bottom: 20px;
}

.service .service-item .service-img img{
    height: 200px;
}

.service-content-inner a{
    font-size: 17px;
}
 .service-content-inner h4 {
        font-size: 17px;
    }

}
@media (max-width: 768px){

.service{
    padding-top: 60px;
    padding-bottom: 60px;
     width: 90%;
}

.service .display-4{
    font-size: 26px;
}

.service h4{
    font-size: 25px;
}

.service .service-item{
    margin-bottom: 25px;
}

.service .service-item .service-img img{
    height: 270px;
}

.service-content{
    ppadding: 15px !important;
    height: 180px;
}

.service-content-inner a{
    font-size: 20px;
    display: block;
    text-align: center;
}

  .service-content-inner p.mb-4 {
        line-height: 2 !important;
        font-size: 13px !important;
        text-align: justify !important;
        margin-top: -25px;
    }

} */
/* Small phones */
/* @media (max-width: 480px) {
    .service-img img {
        height: 160px;
    }

    .service-content-inner p {
        font-size: 12.5px;
    }
} */

/*********new responsive css******/
@media (max-width: 1024px) {
  /* منع تضييق غير ضروري */
  .service {
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* الكروت تبقى full width */
  /* .service .service-item {
    width: 100% !important;
    margin-bottom: 10px;
  } */
  .service .service-item {
    width: 100% !important;
    margin-bottom: 30px;
    height: auto !important;
    padding: 10px;
    /* قللي البادينج لو كبير */
  }

  /* الصور */
  .service .service-item .service-img img {
    height: 220px !important;
    object-fit: cover;
  }
  .service .display-4 {
    font-size: 20px !important;
  }
  /* النصوص */
  .service-content-inner a {
    font-size: 17px !important;
    text-align: center;
    display: block;
    margin-top: 10px;
  }

  .service-content-inner p {
    font-size: 13px !important;
    text-align: center !important;
    /* line-height: 1.6; */
    line-height: 2 !important;
  }

  /* إصلاح padding الخطأ */
  .service-content {
    padding: 15px !important;
    /* height: auto !important; */
    height: 220px;
  }
  /* .service .service-item .service-content::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #0492c2;
    transition: 0.5s;
    z-index: 1;
  } */
  /* إلغاء hover overlay في الموبايل (مهم جدًا) */
  .service .service-item .service-content::after {
    /* display: none !important; */
  }

  .service .service-item:hover {
    transform: none !important;
  }
  /* Button responsiveness */
  .service .btn {
    white-space: nowrap;
    padding: 13px 20px !important;
    /* width: 10%; */
  }
}
@media (max-width: 992px) {
  .service .display-4 {
    font-size: 28px !important;
    text-align: center;
  }

  .service h4 {
    text-align: center;
  }

  .service .service-item {
    margin-bottom: 20px;
  }

  .service-content-inner p {
    text-align: center !important;
    word-spacing: 1.1px;
  }
  /* Button responsiveness */
  .service .btn {
    /* white-space: nowrap; */
    /* padding: 13px 20px !important; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 23%;
    /* padding: 10px 20px; */
    padding: 10px 0; /* يظبط فوق وتحت */
    font-size: 13px;
    white-space: nowrap;
    border-radius: 10px;
    margin-top: 5px;
  }
}

/* 📱 Mobile Fix */
@media (max-width: 768px) {
  /* منع تضييق غير ضروري */
  .service {
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* الكروت تبقى full width */
  .service .service-item {
    width: 100% !important;
    margin-bottom: 20px;
  }
  /* .service .service-item {
    width: 100% !important;
    margin-bottom: 20px;
    height: auto !important;
    padding: 10px;  */
  /* قللي البادينج لو كبير */
  /* } */

  /* الصور */
  .service .service-item .service-img img {
    height: 220px !important;
    object-fit: cover;
  }
  .service .display-4 {
    font-size: 20px !important;
  }
  /* النصوص */
  .service-content-inner a {
    font-size: 19px !important;
    text-align: center;
    display: block;
    margin-top: 10px;
  }

  .service-content-inner p {
    font-size: 14px !important;
    text-align: center !important;
    /* line-height: 1.6; */
    line-height: 2 !important;
  }

  /* إصلاح padding الخطأ */
  .service-content {
    padding: 15px !important;
    /* height: auto !important; */
    height: 220px;
  }
  /* .service .service-item .service-content::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #0492c2;
    transition: 0.5s;
    z-index: 1;
  } */
  /* إلغاء hover overlay في الموبايل (مهم جدًا) */
  .service .service-item .service-content::after {
    /* display: none !important; */
  }

  .service .service-item:hover {
    transform: none !important;
  }
  /* Button responsiveness */
  .service .btn {
    /* white-space: nowrap; */
    /* padding: 13px 20px !important; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 20%;
    /* padding: 10px 20px; */
    padding: 10px 0; /* يظبط فوق وتحت */
    font-size: 13px;
    white-space: nowrap;
    border-radius: 10px;
    margin-top: 5px;
  }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
  .service .display-4 {
    font-size: 17px !important;
  }
  .service .text-center h4 {
    font-size: 20px !important;
  }

  .service .service-item .service-img img {
    height: 180px !important;
  }

  .service-content-inner a {
    font-size: 16px !important;
  }

  .service-content-inner p {
    font-size: 12px !important;
    /* margin-top: -5px; */
  }
  /* .service .btn {
    white-space: nowrap;
    font-size: 13px;
    width:50%;
   padding: 10px 17px !important;
} */
  /* إصلاح padding الخطأ */
  .service-content {
    padding: 15px !important;
    /* height: auto !important; */
    height: 200px;
  }
  .service .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 30%;
    /* padding: 10px 20px; */
    padding: 10px 0; /* يظبط فوق وتحت */
    font-size: 13px;
    white-space: nowrap;
    border-radius: 10px;
    margin-top: 5px;
  }
}
/* @media (max-width: 424px) {
  .service-img img {
    height: 150px;
  }

  .service-content {
    padding: 15px !important;
  }

  .service-content-inner p {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
} */
/* =========================
  424px (large phones)
========================= */
@media (max-width: 424px) {
  .service .display-4 {
    font-size: 24px !important;
  }

  .service .service-item .service-img img {
    height: 200px !important;
  }

  .service-content-inner a {
    font-size: 16px !important;
  }

  .service-content-inner p {
    font-size: 13px !important;
  }

  .service .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width: 35%; */
    width: fit-content;
    padding: 8px 0 !important;
    /* padding: 8px 16px !important; */
    font-size: 12px;
    white-space: nowrap;
    border-radius: 10px;
  }
}
/* =========================
   414px (large phones)
========================= */
@media (max-width: 414px) {
  .service .display-4 {
    font-size: 24px !important;
  }

  .service .service-item .service-img img {
    height: 200px !important;
  }

  .service-content-inner a {
    font-size: 16px !important;
  }

  .service-content-inner p {
    font-size: 13px !important;
  }

  .service .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width: 35%; */
    width: fit-content;
    padding: 8px 0 !important;
    /* padding: 8px 16px !important; */
    font-size: 12px;
    white-space: nowrap;
    border-radius: 10px;
  }
}

/* =========================
   390px - 375px (medium phones)
========================= */
@media (max-width: 390px) {
  .service .display-4 {
    font-size: 22px !important;
  }

  .service .service-item .service-img img {
    height: 180px !important;
  }

  .service-content-inner a {
    font-size: 15px !important;
  }

  .service-content-inner p {
    font-size: 12px !important;
  }

  .service .btn {
    width: 85%;
    font-size: 13px;
    padding: 9px 0;
  }
}

/* =========================
   375px - small phones
========================= */
@media (max-width: 375px) {
  .service .display-4 {
    font-size: 17px !important;
  }
  /* الكروت تبقى full width */
  /* .service .service-item {
    width: 100% !important;
    margin-bottom: 20px;
  } */
  .service .service-item .service-img img {
    height: 170px !important;
    /* height: 140px !important; */
  }
  .service h4 {
    text-align: center;
    font-size: 18px;
  }
  .service-content {
    padding: 15px !important;
    /* height: auto !important; */
    height: 170px;
  }
  .service-content-inner a {
    font-size: 14px !important;
    margin-top: -10px;
  }

  .service-content-inner p {
    font-size: 11px !important;
    margin-top: -5px;
  }

  .service .btn {
    width: 40%;
    height: 35px;
    font-size: 12px;
  }
}

/* =========================
   360px - very small phones
========================= */
@media (max-width: 360px) {
  .service .display-4 {
    font-size: 20px !important;
  }

  .service .service-item .service-img img {
    height: 160px !important;
  }

  .service-content-inner a {
    font-size: 13px !important;
  }

  .service-content-inner p {
    font-size: 11px !important;
  }

  .service .btn {
    width: 55%;
    font-size: 12px;
    padding: 8px 0;
  }
}
/*--------------------------------------------------------------
# Service End
--------------------------------------------------------------*/
/*===============================
	Courses CSS
=================================*/
.courses {
  background: #f8f8f8;
}

.courses .single-course {
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-top: 10px;
  margin-bottom: 30px; /* المسافة بين الكارت واللي تحته */
  height: auto;
  /* height: 100px; */
  /* height: 90%; */
}

.courses .single-course:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.courses .single-course .course-body {
  padding: 12px; /* كان أكبر */
}

.courses .single-course .course-meta {
  padding: 8px 12px;
}

.courses .single-course p {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 👈 عدد السطور */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.courses .single-course:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.courses .course-head {
  position: relative;
  overflow: hidden;
  position: relative;
  width: 100%;
  overflow: hidden;
  /* height: 250px; */
  height: auto;
}

.courses .course-head::before {
  opacity: 0;
  visibility: hidden;
  z-index: 5;
}
.courses .course-head img {
  object-fit: cover;
  width: 100%;
  height: 200px;
  /* height: 250px; */
  /* height: auto; */
  display: block;
}

/* .courses .course-head img {
  width: 100%;
  height: 280px;
  object-fit: contain;   */
/* يعرض الصورة كاملة */
/* background: #000;      */
/* اختياري: لون خلفية */
/* } */
.courses .course-head:hover img {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  transform: scale(1.3);
}
.courses .course-head:hover:before {
  opacity: 0.8;
  visibility: visible;
}
.courses .course-head a {
  position: absolute;
  top: 50%;
  margin: -25px 0 0 -25px;
  z-index: 10;
  border-radius: 0px;
  left: 50%;
  font-weight: 500;
  text-transform: capitalize;
  margin-left: -58px;
  padding: 12px 22px;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  border-radius: 50px;
}
/* زرار فوق الصورة */
.course-head .btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  padding: 8px 18px;
}
.courses .course-head:hover .btn {
  transform: scale(1);
  opacity: 1;
}

/* .single-popular-carusel .details h4 {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin: 20px 0px;
}
.single-popular-carusel .details h4:hover {
  color: #f7631b !important;
} */
.courses .course-body {
  margin: 15px;
  margin-top: 0px;
  flex-grow: 1;
  /* flex: 1;*/
  display: flex;
  flex-direction: column;
}

.courses .name-price {
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 333;
  margin-top: -33.5px;
}
.courses .name-price .teacher-info {
  display: inline-block;
}
.courses .teacher-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  margin-top: -7px;
}

.courses .teacher-info img {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 100%;
  display: inline-block;
  border: 4px solid #fff;
  float: left;
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
}
.courses .single-course .teacher-info:hover img {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
}
.courses .teacher-info .title {
  font-weight: 500;
  padding: 10px;
  color: #fff;
  border-radius: 30px;
  position: absolute;
  left: 75px;
  /* top: 15px; */
  top: 5px;
  z-index: 33;
  font-size: 13px;
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  transform: translateX(-30px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.courses .teacher-info:hover .title {
  transform: translateX(0px);
  opacity: 1;
  visibility: visible;
}

.courses .teacher-info .title::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 12px 10px 0; /* Top, Right, Bottom, Left borders */
  border-color: transparent #0492c2 transparent transparent;
  position: absolute;
  top: 50%;
  left: -9px;
  transform: translateY(-50%);
}

.courses .price {
  /* color: #f6900b; */
  color: #f7631b;
  padding: 5px 25px;
  font-weight: 700;
  position: relative;
  margin-top: 12px;
  float: right;
  border-radius: 50px;
  right: 0;
  font-weight: bold;
}
.courses .price::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  /* border-left: 15px solid #f6900b; */
  border-left: 15px solid #f7631b;
  border-bottom: 15px solid transparent;
  border-top: 15px solid transparent;
  display: none;
}
.courses .course-body .c-title {
  /* font-size: 18px; */
  font-size: 16px;
  text-align: left;
  /* margin: 10px 0 15px; */
  /* margin-bottom: 6px; */
  margin-bottom: 8px;
  min-height: 50px; /* يثبت ارتفاع العنوان */
}
.courses .course-body .c-title a {
  /* color: #252525; */
  color: #0492c2;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  line-height: 1.4;
  display: block;
}

.courses .course-body p {
  color: black;
  font-size: 14px;
  line-height: 1.5;
  word-spacing: 1px;
  margin-top: 5px;
  text-align: justify;
  text-justify: inter-word;
  word-spacing: normal;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* flex-grow: 1;  */
  /* يخلي النص يتمدد */
}

.courses .course-meta {
  overflow: hidden;
  margin-top: -25px;
  text-align: left;
  /* margin-top: auto; */
  padding-top: 10px;
  /* padding: 15px 20px; */
  /* padding-top: 10px; */
  /* border-top: 1px solid #eee; */
  /* border-top: 1px solid #550909; */
  /* border-top: 4px solid #eee; */
  /* margin-top: auto; */
  /* يخليه دايماً تحت */
}
.section-title h1 {
  font-size: 25px;
}

.section-title h4 {
  font-size: 25px;
}
/* Rattings */
.courses .rattings li {
  display: inline;
  margin-right: 2px;
}
.courses .rattings li.point span {
  display: inline-block;
  position: relative;
}
.courses .rattings li.point span:before {
  content: "(";
}
.courses .rattings li.point span::after {
  content: ")";
}

.courses .course-info {
  display: flex;
  justify-content: space-between; /* هذا السطر يدفع العناصر للأطراف */
  align-items: center; /* لضمان توسط العناصر رأسياً في السطر */
  width: 100%;
  margin-top: 20px;
  /* gap: 10px; */
  gap: 8px;
  flex-wrap: wrap; /* مهم للموبايل */
  font-size: 14px;
  flex-wrap: wrap;
  overflow-x: auto;
  /* gap: 5px; */
}

.courses .course-info span {
  color: black;
  /* color: #0492c2; */
  margin-right: 8px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: flex;
  align-items: center;
  /* gap: 5px; */
  gap: 4px;
  white-space: nowrap;
}
.courses .course-info span i {
  margin-right: 5px;
  color: black;
  /* color: #0492c2; */
}

.courses .course-info span:last-child {
  margin-left: auto; /* تأكيد إضافي لدفع العنصر لليمين في نظام الفليكس */
  background-color: #0492c2; /* لون الزر (يمكنك تغييره) */
  padding: 3px 13px; /* مساحة داخلية ليبدو كالزر */
  border-radius: 5px; /* حواف دائرية */
  color: white;
  font-size: 14px;
  margin-top: -0px;
  white-space: nowrap; /* يمنع الزر من الانقسام لسطرين إذا كان النص طويلاً */
  cursor: pointer;
}

/* Slider Meta */
.courses .owl-controls {
  margin-top: 30px;
}
.courses .owl-controls .owl-nav div {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 22px;
  padding: 0;
  border-radius: 100%;
  color: #555;
  background: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin: 0 10px 0 0;
  border: 1px solid #ccc;
}
.courses .owl-controls .owl-nav div:last-child {
  margin: 0;
}
.courses .course-slider:hover .owl-controls .owl-nav div {
  opacity: 1;
  visibility: visible;
}
.courses .owl-controls .owl-nav div:hover {
  border-color: transparent;
  color: #fff;
}
/* Courses Archive */
.courses.archive {
  padding: 60px 0 90px;
}
.courses.archive .single-course {
  margin: 30px 0 0;
}
.price-image {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.price-image img {
  width: 10px;
  height: auto;
  object-fit: contain;
}
/* Courses Button */
.courses .btn {
  margin-left: 1rem;
  font-size: 15px;
  margin-top: 45px;
}
.courses .courses .btn {
  display: block;
  /* width: 25%; */
  width: 45%;
  /* width: fit-content; */
  /* يخلي العرض على قد الكلام */
  height: 45px;
  /* margin: 50px auto 0;  */
  /* توسيط أفقي */
  margin: 30px auto;
  text-align: center;
  /* padding: 8px 20px; */
  /* مسافة داخلية مناسبة */
  padding: 10px;
  white-space: nowrap; /* يمنع نزول النص لسطر تاني */
  font-size: 14px;
  display: block;
}

/* .courses .courses .btn {
  width: 65%;
  margin: 25px auto;
  font-size: 13px;
  padding: 10px 12px;
  display: flex;
  align-items: center;     */
/* توسيط عمودي */
/* justify-content: center;  */
/* توسيط أفقي */
/* text-align: center;
} */
/* .courses .courses .btn {
  overflow: hidden;
  text-overflow: ellipsis;
} */
/* .courses .courses .btn {
  border-radius: 10px;
  font-weight: 500;
} */

/* @media (max-width: 768px) {
  .courses .single-course {
    width:90%;
    height: 480px;
    margin-left: 30px;
   
    
  } 
   .courses .course-head {
    width: 100%;
    height: 280px;
    
  }
  
   .courses .course-meta{
    margin-bottom: 10px;
   }
  .courses .course-head img {
         height: 280px;
    }
     .courses .course-info {
        
        gap: 2px;
    }
  .price-image {
    width: 60px;
    height: 60px;
  }

  .price-image img {
    width: 32px;
  }
 
} */

/* Responsive */
/* @media (max-width: 768px) {
  .courses .btn {
    margin-left: 10rem;
  }
}
@media (max-width: 576px) {
    .courses .course-info {
        align-items: flex-start;
        gap: 5px;
    }
} */
/* Small Mobile */
/* @media (max-width: 480px) {
    .courses .course-head img {
        height: 160px;
    }
} */

/*******new responsive css**********/
/* ===========================
   EXTRA MOBILE OPTIMIZATION
   (SAFE ADDITION ONLY)
=========================== */

/* Tablets + small laptops */
@media (max-width: 1024px) {
  .courses .btn {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .courses .single-course {
    height: auto;
  }
  .courses .course-info span:last-child {
    margin-left: 0 !important;
  }
  .conurses .course-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* مهم جدًا: يمنع النزول تحت بعض */
    /* gap: 6px; */
    gap: 4px;
    margin-top: 5px;
    /* margin-top: 15px; */
    /* نزليها شوية */
  }

  .course-info span {
    font-size: 12px;
    white-space: nowrap; /* يمنع كسر النص */
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .courses .course-body .c-title a {
    font-size: 14px !important;
    /* line-height: 1.3; */
  }
  /* النص */
  .courses .course-body p {
    font-size: 12px !important;
    text-align: justify;
    -webkit-line-clamp: 3;
    text-align: justify;
    text-justify: inter-word;
    /* line-height: 1.6; */
    margin-top: -15px;
  }
  .courses .courses .btn {
    width: 25%;
    /* ياخد عرض مناسب */
    margin: 30px auto;
    font-size: 14px;
    padding: 10px;
  }
}
@media (max-width: 992px) {
  .courses .course-meta {
    margin-bottom: 10px;
  }
  .courses .course-head {
    height: 250px;
  }
  .courses .course-head img {
    height: 250px;
    object-fit: cover;
  }

  .c-title a {
    font-size: 17px;
  }
  .courses .course-info {
    /* margin-top: 4px; */
    font-size: 14px;
    gap: 4px;
    margin-top: 15px; /* نزليها شوية */
  }
}
/* Mobile devices */
@media (max-width: 768px) {
  .courses {
    padding: 40px 10px;
  }
  .section-title h4 {
    font-size: 22px;
  }
  .dispaly-4 h1 {
    font-size: 21px;
  }
  .courses .course-slider {
    margin-top: 20px;
  }

  /* الكارد بالكامل */
  .courses .single-course {
    width: 100% !important;
    margin-left: 0 !important;
    height: auto !important;
  }

  /* الصورة */
  .courses .course-head,
  .courses .course-head img {
    /* height: 220px !important; */
    height: 180px !important;
  }
  .courses .course-head:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }
  /* العنوان */
  .courses .course-body .c-title a {
    font-size: 16px !important;
    text-align: center;
  }

  /* النص */
  .courses .course-body p {
    font-size: 13px !important;
    text-align: justify;
    -webkit-line-clamp: 3;
  }

  /* teacher info */
  .courses .teacher-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  /* السعر */
  /* .courses .price {
    float: none;
    display: inline-block;
    margin: 10px auto;
  } */
  .course-info .price {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  /* course info */
  /* .courses .course-info { */
  /* flex-direction: column; */
  /* align-items: center;
    text-align: center; 
  } */

  .courses .course-info span:last-child {
    margin-left: 0 !important;
  }
  .conurses .course-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* مهم جدًا: يمنع النزول تحت بعض */
    /* gap: 6px; */
    gap: 4px;
    margin-top: 15px; /* نزليها شوية */
  }

  .course-info span {
    font-size: 12px;
    white-space: nowrap; /* يمنع كسر النص */
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* زرار */

  /* .courses .courses .btn { */
  /* margin-left: 0 !important; */
  /* margin-left: -5rem; */
  /* margin-left: 9rem;
    display: block;
    width: 50%;
    text-align: center;
    margin-top: 55px;
  } */
  .courses .courses .btn {
    /* width: 45%; */
    /* ياخد عرض مناسب */
    /* margin: 30px auto; */
    /* font-size: 14px; */
    /* padding: 10px; */
    /* width: fit-content; */
    width: 38%;
    font-size: 13px;
  }

  .courses .course-head .btn {
    /* margin-left: 0 !important; */
    margin-left: -5rem;
    width: 30%;
    text-align: center;
    margin-top: -15px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .courses .course-head,
  .courses .course-head img {
    /* height: 180px !important; */
    height: 150px !important;
  }
  .section-title h2 {
    font-size: 25px;
    line-height: 1.4;
  }
  .courses .course-body .c-title a {
    font-size: 15px !important;
  }
  .section-title h4 {
    font-size: 19px;
  }
  .courses .course-body p {
    font-size: 12px;
    -webkit-line-clamp: 3; /* 👈 نقلل السطور */
  }

  .courses .price {
    font-size: 13px;
    padding: 4px 15px;
  }
  .courses .course-meta {
    overflow: hidden;
    margin-top: -15px;
  }
  /* .courses .course-info {
    font-size: 12px;
  } */

  .courses .course-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    /* gap: 5px; */
    gap: 4px;
    margin-top: 15px; /* نزليها شوية */
  }
  .courses .teacher-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-left: -9px;
  }
  .courses .teacher-info img {
    margin-top: -4px;
    width: 60px;
    /* تصغير مع رفع بسيط */
    height: 60px;
    border-radius: 50%; /* شكل دائري */
    object-fit: cover; /* يحافظ على تناسق الصورة */
  }
  .courses .teacher-info .title {
    margin-top: -1px;
    margin-left: -6px;
    font-size: 12px;
  }
  .courses .course-info span {
    font-size: 11.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .course-info i {
    font-size: 11px;
  }

  .course-info .price {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  /* .courses .courses .btn {
    width: 65%;
    margin: 25px auto;
    font-size: 13px;
    padding: 10px 12px;
    display: block;
    text-align: center;
  } */
  .courses .courses .btn {
    width: 60%;
    margin: 25px auto;
    font-size: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .courses .course-head .btn {
    /* margin-left: 0 !important; */
    margin-left: -5rem;
    width: 30%;
    text-align: center;
    margin-top: -15px;
  }
}
/* @media (max-width: 480px) {
  .course-info {
    overflow-x: auto;
    white-space: nowrap;
  }

  .course-info span {
    flex: 0 0 auto;
  }
} */
@media (max-width: 424px) {
  .courses .course-head,
  .courses .course-head img {
    /* height: 160px !important; */
    /* أصغر شوية من 480 */
    height: 150px !important; /* أصغر شوية من 480 */
    object-fit: cover;
  }

  .courses .course-body {
    padding: 10px !important;
  }
  /* .courses .teacher-info img {
    margin-top: -5px;
    width: 60px; */
  /* تصغير مع رفع بسيط */
  /* height: 60px;
    
  } */
  .courses .single-course p {
    -webkit-line-clamp: 2;
    font-size: 12px;
  }
  .courses .course-body .c-title a {
    font-size: 14px !important;
    line-height: 1.3;
  }

  .courses .course-body p {
    font-size: 12px !important;
    line-height: 1.5;
  }
  .courses .course-info {
    /* gap: 4px; */
    gap: 6px;
  }

  .courses .course-info span {
    font-size: 11px;
    white-space: nowrap; /* 👈 يمنع كسر النص */
  }

  .course-info i {
    font-size: 11px;
  }

  .courses .price {
    font-size: 12px;
    padding: 3px 12px;
    display: inline-block;
  }
  /* .courses .courses .btn {
    width: 35%;
    margin: 20px auto;
    font-size: 12.5px;
    padding: 9px 10px;
    display: block;
    text-align: center;
  } */
  /* .courses .courses .btn {
    width: 90%;
    margin: 20px auto;
    font-size: 12.5px;
    padding: 9px 10px;

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

    text-align: center;
  } */
  .courses .courses .btn {
    width: 55%;
    margin: 20px auto;
    font-size: 12px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* .courses .course-info {
    font-size: 11.5px;
    gap: 6px;
  } */
}
@media (max-width: 424px) {
  .courses .teacher-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-left: -9px;
  }
  .courses .teacher-info img {
    margin-top: -4px;
    width: 60px;
    /* تصغير مع رفع بسيط */
    height: 60px;
    border-radius: 50%; /* شكل دائري */
    object-fit: cover; /* يحافظ على تناسق الصورة */
  }
  .courses .teacher-info .title {
    margin-top: 1.3px;
    margin-left: -6px;
    font-size: 12px;
  }
}
@media (max-width: 414px) {
  .courses .teacher-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-left: -9px;
  }
  .courses .teacher-info img {
    margin-top: -4px;
    width: 60px;
    /* تصغير مع رفع بسيط */
    height: 60px;
    border-radius: 50%; /* شكل دائري */
    object-fit: cover; /* يحافظ على تناسق الصورة */
  }
  .courses .teacher-info .title {
    margin-top: 1.3px;
    margin-left: -6px;
    font-size: 12px;
  }
  .courses .courses .btn {
    width: 55%;
    margin: 20px auto;
    font-size: 12px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 360px) {
  .section-title h1 {
    font-size: 20px;
    line-height: 1.3;
  }

  .section-title h4 {
    font-size: 14px;
  }

  .single-course {
    margin-bottom: 20px;
  }

  .courses .course-body p {
    font-size: 12px;
  }

  .course-info span {
    display: block;
    font-size: 11px;
    margin-bottom: 3px;
  }

  .courses .courses .btn {
    width: 100%;
    font-size: 13px;
  }
}
@media (min-width: 361px) and (max-width: 375px) {
  .section-title h1 {
    font-size: 15px;
    line-height: 1.4;
  }
  .section-title h2 {
    font-size: 20px;
    line-height: 1.4;
  }
  .section-title h4 {
    font-size: 18px;
    line-height: 1.4;
  }
  .courses .teacher-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-left: -9px;
  }
  .courses .teacher-info img {
    margin-top: -4px;
    width: 60px;
    /* تصغير مع رفع بسيط */
    height: 60px;
    border-radius: 50%; /* شكل دائري */
    object-fit: cover; /* يحافظ على تناسق الصورة */
  }
  /* .courses .teacher-info img {
        width: 12vw;
        height: 12vw;
        margin-top: -8px;
    } */
  .courses .teacher-info .title {
    margin-top: 1.5px;
    margin-left: -10px;
    font-size: 12px;
  }

  .courses .single-course {
    margin-bottom: 22px;
    height: 40%;
  }
  .courses .course-head img {
    height: 140px;
  }
  /* العنوان */
  .courses .course-body .c-title a {
    font-size: 14px !important;
    text-align: center;
  }
  /* .courses .course-meta {
    padding-top: 10px; */
  /* border-top: 1px solid #eee; */
  /* } */
  /* النص */
  .courses .course-body p {
    font-size: 11px !important;
    text-align: justify;
    -webkit-line-clamp: 3;
    text-align: justify;
    text-justify: inter-word;
    /* line-height: 1.6; */
    margin-top: -15px;
  }
  .courses .course-meta {
    overflow: hidden;
    margin-top: -15px;
  }
  /* .courses .course-body p {
    font-size: 12px;
    -webkit-line-clamp: 2;  */
  /* 👈 نقلل السطور */
  /* margin-top: -12px; */
  /* word-wrap: break-word;  */
  /* text-align: center !important; */
  /* line-height: 1.6; */
  /* line-height: 2 !important;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: 0;
    letter-spacing: 0;
    hyphens: auto;
    overflow-wrap: break-word;
  } */
  .courses .course-info {
    gap: 4px;
    margin-top: 15px; /* نزليها شوية */
  }
  .courses .course-info span {
    /* display: inline-block; */
    font-size: 11px;
  }
  .courses .course-info span:last-child {
    margin-left: 0 !important;
    font-size: 11px;
  }
  .courses .courses .btn {
    width: 73%;
    height: 35px;
    font-size: 13px;
  }
}
@media (max-width: 576px) {
  .courses .course-body p {
    font-size: 13px;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: 0;
    letter-spacing: 0;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}
@media (max-width: 320px) {
  .section-title h1 {
    font-size: 15px;
    line-height: 1.4;
  }
  .section-title h2 {
    font-size: 20px;
    line-height: 1.4;
  }
  .section-title h4 {
    font-size: 18px;
    line-height: 1.4;
  }
  /* الكارد بالكامل */
  .courses .single-course {
    width: 100% !important;
    margin-left: 0 !important;
    height: auto !important;
  }
  .courses .teacher-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-left: -8px;
  }
  .courses .teacher-info img {
    margin-top: -5px;
    width: 60px;
    /* تصغير مع رفع بسيط */
    height: 60px;
    border-radius: 50%; /* شكل دائري */
    object-fit: cover; /* يحافظ على تناسق الصورة */
  }
  /* .courses .teacher-info img {
        width: 12vw;
        height: 12vw;
        margin-top: -8px;
    } */
  .courses .teacher-info .title {
    margin-top: 1.3px;
    margin-left: -9px;
    font-size: 10px;
  }

  .courses .single-course {
    margin-bottom: 22px;
    height: 40%;
  }
  .courses .course-head img {
    height: 140px;
  }
  /* العنوان */
  .courses .course-body .c-title a {
    font-size: 13px !important;
    text-align: center;
  }
  /* .courses .course-meta {
    padding-top: 10px; */
  /* border-top: 1px solid #eee; */
  /* } */
  /* النص */
  .courses .course-body p {
    font-size: 10px !important;
    text-align: justify;
    -webkit-line-clamp: 3;
    text-align: justify;
    text-justify: inter-word;
    /* line-height: 1.6; */
    margin-top: -15px;
  }
  .courses .course-meta {
    overflow: hidden;
    margin-top: -25px;
  }
  .courses .price::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    /* border-left: 15px solid #f6900b; */
    border-left: 15px solid #f7631b;
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;
    display: none;
  }
  /* .courses .course-body p {
    font-size: 12px;
    -webkit-line-clamp: 2;  */
  /* 👈 نقلل السطور */
  /* margin-top: -12px; */
  /* word-wrap: break-word;  */
  /* text-align: center !important; */
  /* line-height: 1.6; */
  /* line-height: 2 !important;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: 0;
    letter-spacing: 0;
    hyphens: auto;
    overflow-wrap: break-word;
  } */
  .courses .course-info {
    gap: 4px;
    margin-top: 22px; /* نزليها شوية */
  }
  .courses .course-info span {
    /* display: inline-block; */
    font-size: 9px;
  }
  .courses .course-info span:last-child {
    margin-left: 0 !important;
    font-size: 10px;
  }
  .courses .courses .btn {
    width: 83%;
    height: 35px;
    font-size: 12px;
  }
}
@media (max-width: 316px) {
  .section-title h1 {
    font-size: 15px;
    line-height: 1.4;
  }
  .section-title h2 {
    font-size: 20px;
    line-height: 1.4;
  }
  .section-title h4 {
    font-size: 18px;
    line-height: 1.4;
  }
  /* الكارد بالكامل */
  .courses .single-course {
    width: 100% !important;
    margin-left: 0 !important;
    height: auto !important;
  }
  .courses .teacher-info {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-left: -10px;
  }
  .courses .teacher-info img {
    margin-top: 5px;
    width: 50px;
    /* تصغير مع رفع بسيط */
    height: 50px;
    border-radius: 50%; /* شكل دائري */
    object-fit: cover; /* يحافظ على تناسق الصورة */
  }
  /* .courses .teacher-info img {
        width: 12vw;
        height: 12vw;
        margin-top: -8px;
    } */
  .courses .teacher-info .title {
    margin-top: 1.6px;
    margin-left: -17px;
    font-size: 9px;
  }
  .courses .teacher-info .title::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 12px 10px 0; /* Top, Right, Bottom, Left borders */
    border-color: transparent #0492c2 transparent transparent;
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
  }
  .courses .single-course {
    margin-bottom: 22px;
    height: 40%;
  }
  .courses .course-head img {
    height: 140px;
  }
  /* العنوان */
  .courses .course-body .c-title a {
    font-size: 13px !important;
    text-align: center;
  }
  /* .courses .course-meta {
    padding-top: 10px; */
  /* border-top: 1px solid #eee; */
  /* } */
  /* النص */
  .courses .course-body p {
    font-size: 10px !important;
    text-align: justify;
    -webkit-line-clamp: 3;
    text-align: justify;
    text-justify: inter-word;
    /* line-height: 1.6; */
    margin-top: -15px;
  }
  .courses .course-meta {
    overflow: hidden;
    margin-top: -25px;
  }
  .courses .price::before {
    /* position: absolute;
    left: 0;
    top: 0;
    content: ""; */
    /* border-left: 15px solid #f6900b; */
    border-left: 15px solid #f7631b;
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;
    display: none;
  }
  /* .courses .course-body p {
    font-size: 12px;
    -webkit-line-clamp: 2;  */
  /* 👈 نقلل السطور */
  /* margin-top: -12px; */
  /* word-wrap: break-word;  */
  /* text-align: center !important; */
  /* line-height: 1.6; */
  /* line-height: 2 !important;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: 0;
    letter-spacing: 0;
    hyphens: auto;
    overflow-wrap: break-word;
  } */

  .courses .course-info {
    /* display: flex; */
    /* justify-content: space-between;  */
    /* هذا السطر يدفع العناصر للأطراف */
    /* align-items: center;  */
    /* لضمان توسط العناصر رأسياً في السطر */
    width: 100%;
    margin-top: 18px;
    /* gap: 10px; */
    gap: 4px;
    /* flex-wrap: wrap; */
    /* مهم للموبايل */
    font-size: 11px;
    overflow-x: auto;
    /* gap: 5px; */
  }
  /* .courses .course-info {
    gap: 4px;
    margin-top: 22px; */
  /* نزليها شوية */
  /* } */
  .courses .course-info span {
    /* display: inline-block; */
    font-size: 9px;
  }
  .courses .course-info span:last-child {
    margin-left: 0 !important;
    font-size: 10px;
  }
  .courses .courses .btn {
    width: 83%;
    height: 35px;
    font-size: 12px;
  }
}

/* @media (max-width: 576px) {
  .courses .single-course {
    padding: 6px;
    margin-bottom: 15px;
    transform: scale(0.95);
  }
  .courses .teacher-info img {
    margin-top: -17px;
    width: 60px;  */
/* تصغير مع رفع بسيط */
/* height: 60px;
  }

  .course-body h4 {
    font-size: 14px;
    margin-top: -18px;
  }

  .course-body p {
    font-size: 12px;
    line-height: 1.4;
  }

  .course-head img {
    height: auto;
    max-height: 160px; */
/* تصغير الصورة */
/* object-fit: cover;
  }

  .course-info span {
    font-size: 11px;
  }
  .course-info {
    display: flex !important;
    flex-wrap: nowrap !important; */
/* يمنع النزول */
/* justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }

  .course-info span {
    display: inline-flex;
    align-items: center; 
    white-space: nowrap;*/
/* يمنع كسر النص */
/* }

  .course-info i {
    margin-right: 3px;
    font-size: 11px;
  }

  .course-info .price {
    font-weight: bold;
    font-size: 12px;
    
  }
} */
/*===============================
	End Courses CSS
=================================*/

/*===============================
	upcoming events
=================================*/
.default-select {
  height: 40px;
}
.default-select .nice-select {
  border: none;
  border-radius: 0px;
  height: 40px;
  background: #fff;
  padding-left: 20px;
  padding-right: 40px;
}
.default-select .nice-select .list {
  margin-top: 0;
  border: none;
  border-radius: 0px;
  box-shadow: none;
  width: 100%;
  padding: 10px 0 10px 0px;
}
.default-select .nice-select .list .option {
  font-weight: 300;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  line-height: 28px;
  min-height: 28px;
  font-size: 12px;
  padding-left: 20px;
}
.default-select .nice-select .list .option.selected {
  color: #f7631b;
  background: transparent;
}
.default-select .nice-select .list .option:hover {
  color: #f7631b;
  background: transparent;
}
.default-select .current {
  margin-right: 50px;
  font-weight: 300;
}
.default-select .nice-select::after {
  right: 20px;
}

.text-center {
  text-align: center;
}
.pb-70 {
  padding-bottom: 70px;
}
.mb-10 {
  margin-bottom: 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.text-center p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
}
.active-upcoming-event-carousel .owl-dots {
  display: inline-grid;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  left: 101%;
  top: 40%;
}
.active-upcoming-event-carousel .owl-dot {
  height: 10px;
  width: 10px;
  display: inline-block;
  background: rgba(127, 127, 127, 0.5);
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.active-upcoming-event-carousel .owl-dot.active {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: #f7631b;
}

.active-upcoming-event-carousel {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  width: 100%;
}

.single-carousel h4 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.single-carousel p {
  margin-top: 0px !important;
  margin-bottom: 0px;
}

.single-carousel .thumb {
  overflow: hidden;
}
.single-carousel .thumb img {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 50%;
}
.single-carousel .detials h4 {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.single-carousel .detials h4:hover {
  /* color: #f6900b; */
  color: #f7631b;
}
.single-carousel .detials p {
  margin-top: 20px;
}
.single-carousel:hover .thumb img {
  transform: scale(1.05) rotate(-1.05deg);
}

.event-item {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.event-item:hover {
  transform: translateY(-6px);
}

.owl-nav button {
  font-size: 28px;
}

.owl-theme .owl-dots .owl-dot span {
  background: #ccc;
}

.owl-theme .owl-dots .owl-dot.active span {
  background: #28a745;
}

/*new course event css*/
.courses-scroll-container::-webkit-scrollbar {
  height: 8px; /* شكل الشريط السفلي للتمرير */
}

.courses-scroll-container::-webkit-scrollbar-thumb {
  background: #0dcaf0; /* لون شريط التمرير */
  border-radius: 10px;
}

.courses-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* لضمان التجاوب في الموبايل */
@media (max-width: 992px) {
  .course-card {
    min-width: calc(50% - 10px) !important; /* يظهر كورسين في التابلت */
  }
}

@media (max-width: 576px) {
  .course-card {
    min-width: 80% !important; /* يظهر كورس واحد كبير في الموبايل */
  }
}

/***********new 2***************/
/* الحاوية الرئيسية للتمرير */
/* .horizontal-scroll-wrapper {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 20px;
padding: 20px 0;
scrollbar-width: thin;  */
/*للمتصفحات الحديثة */
/* -webkit-overflow-scrolling:touch;
} */

/* الكارت الواحد */
.event-square-card {
  flex: 0 0 260px !important; /*عرض ثابت للكارت */
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /*لضمان تساوي الطول */
}

/*جعل الصورة مربعة تماماً (1:1 Ratio)*/
.square-img-container {
  width: 100%;
  position: relative;
  padding-top: 100%; /*هذا هو السر في جعلها مربعة */
  overflow: hidden;
}

.square-img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* لضمان عدم تمطط الصورة */
}

/* تفاصيل الكتابة تحت الصورة */
.event-details {
  padding: 15px;
  text-align: left;
}

.event-date {
  font-size: 12px;
  color: #0dcaf0;
  margin-bottom: 5px;
}

.event-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  /* تحديد عدد الأسطر لضمان التساوي */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}

.event-text {
  font-size: 13px;
  color: #777;
  line-height: 1.4;
}

/* شكل شريط التمرير */
/* .horizontal-scroll-wrapper::-webkit-scrollbar {
height: 6px;
}
.horizontal-scroll-wrapper::-webkit-scrollbar-thumb {
background: #0dcaf0;
border-radius: 10px;
} */

/*************************
New css for upcoming events
***************************/
/* الحاوية الرئيسية للتمرير */
/* .horizontal-scroll-wrapper {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 20px;
padding: 20px 0;
scrollbar-width: thin; */
/* للمتصفحات الحديثة */
/* -webkit-overflow-scrolling:touch;
} */
/* شكل شريط التمرير */
/* .horizontal-scroll-wrapper::-webkit-scrollbar {
height: 6px;
}
.horizontal-scroll-wrapper::-webkit-scrollbar-thumb {
background: #0dcaf0;
border-radius: 10px;
} */

/* الحاوية التي تجبر العناصر على البقاء في صف واحد */
/* .scrolling-wrapper {
  display: grid !important;
  grid-auto-flow: column !important;  */
/*هذا السطر يمنع العناصر من النزول لأسفل */
/* grid-auto-columns: calc(
    25% - 20px
  ) !important; */
/* يجعل كل عنصر يأخذ ربع المساحة */
/* gap: 20px !important;
  overflow-x: auto !important; */
/*تفعيل التمرير الأفقي */
/* padding: 20px 0 !important;
  -webkit-overflow-scrolling: touch; */
/*تمرير ناعم في الموبايل */
/* } */

/* تصميم الكارت الواحد */
/* .course-card-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

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

.course-card-item .content {
  padding: 15px;
  text-align: center;
}


.course-card-item .content desc{
 font-family: Georgia, 'Times New Roman', Times, serif;
 font-size: 15px;
 margin-top: 10px;
}
.course-card-item .content  h4{
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 18px;
  margin-top: 12px;
} */
/* هذا السطر هو السر في منع انضغاط الكورسات */
.new-course-card {
  flex-shrink: 0 !important;
  /* يمنع المتصفح من تصغير حجم الكارت */
  display: block !important;
}
/* إخفاء شريط التمرير القبيح (اختياري) */
/* .scrolling-wrapper::-webkit-scrollbar { */
/* height: 8px; */
/* height: 6px;
}
.scrolling-wrapper::-webkit-scrollbar-thumb {
  background: #0dcaf0;
  border-radius: 10px;
} */

/* للموبايل: نجعل الكورس يأخذ مساحة أكبر ليظهر بوضوح */
/* @media (max-width: 992px) {
  .scrolling-wrapper {
    grid-auto-columns: calc(50% - 10px) !important;
  }
}
@media (max-width: 576px) {
  .scrolling-wrapper {
    grid-auto-columns: 85% !important;
  }
} */

/* .custom-card .card-img img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 12px 12px 0 0;
}

.custom-card .card-body {
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between; /* توزيع المحتوى لضمان تساوي المظهر */
/* flex-grow: 1;
} */

/* .custom-card h4 {
font-size: 16px;
font-weight: bold;
color: #333;
margin: 10px 0; */
/* لجعل العناوين تأخذ نفس عدد الأسطر */
/* min-height: 40px;
} */

/* .custom-card .text {
font-size: 13px;
color: #666;
line-height: 1.5;
} */

/* 3. شكل شريط التمرير */
/* .custom-scroll-container::-webkit-scrollbar {
height: 8px;
}
.custom-scroll-container::-webkit-scrollbar-thumb {
background: #0dcaf0;
border-radius: 10px;
}
.custom-scroll-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
}  */
/* لضمان تساوي المحتوى داخلياً */
/* .course-card-item div {
display: flex;
flex-direction: column;
justify-content: flex-start;
} */

/* Scroll Container */
/* .events-scroller-section .horizontal-scroll-wrapper{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 25px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 20px;
} */

/* اخفاء scrollbar */
/* .events-scroller-section .horizontal-scroll-wrapper::-webkit-scrollbar{
    height:6px;
}

.events-scroller-section .horizontal-scroll-wrapper::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:10px;
}

.events-scroller-section .custom-scroll-container{
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
} */
/* تصميم الكرت */
/* .events-scroller-section .course-card-item{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:0.4s;
   
} */

/* hover effect */
/* .events-scroller-section .course-card-item:hover{
    transform: translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
} */
/* .events-scroller-section .col,
.events-scroller-section [class*="col-"] {
  display: flex;
} */
/* الصورة */
/* .events-scroller-section .course-card-item img{
    width:100%;
    height:220px;
    object-fit:cover;
} */

/* المحتوى */
/* .events-scroller-section .content{
  flex: 1;  
    padding:20px;
    display:flex;
    flex-direction:column;
    height:100%;
}

.events-scroller-section .content h4{
    font-size:16px;
    margin-top:10px;
    min-height:60px;
}
.events-scroller-section .content h4:hover{ */
/* color: #f6900b; */
/* color:#f7631b;
}

.events-scroller-section .content p{
    font-size:14px;
    line-height:1.7; */
/* color:#666; */
/* color:#080808;
     flex-grow:1;
     
}
.events-scroller-section .content .desc{
    font-size:14px;
    line-height:1.7;
    color:#080808;
    margin-top: 11px;
} */
/* @media (max-width:992px){

.events-scroller-section .custom-scroll-container{
    flex: 0 0 calc(33.33% - 15px);
}

}
@media (max-width:991px){

.events-scroller-section .custom-scroll-container{
    flex: 0 0 calc(50% - 10px);
}

.events-scroller-section .course-card-item img{
    height:200px;
}

} */

/* @media (max-width:768px){

.events-scroller-section .horizontal-scroll-wrapper{
    gap:15px;
    padding-left:10px;
} */

/* .events-scroller-section .custom-scroll-container{ */
/* flex: 0 0 85%; */
/* flex: 0 0 80%;
} */

/* .events-scroller-section .course-card-item img{
    height:350px;
    width: 100%;
}

.events-scroller-section .content{
    padding:15px;
}

.events-scroller-section .content h4{
    font-size:16px;
}
.events-scroller-section .content .desc{
   
    margin-top: -15px;
}

} */
/*********new responsive css************/
/* ===============================
   EXTRA RESPONSIVE FIX (SAFE)
================================ */

/* Tablets */
@media (max-width: 1024px) {
  .active-upcoming-event-carousel .owl-dots {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
  .active-upcoming-event-carousel .owl-controls {
    display: none;
  }
  .single-carousel .thumb img {
    width: 100%;
  }

  .event-item {
    padding: 20px;
  }

  .horizontal-scroll-wrapper {
    gap: 15px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Center titles */
  .text-center h1,
  .text-center h4 {
    text-align: center;
  }

  .active-upcoming-event-carousel {
    padding: 20px 10px;
  }

  /* Carousel dots fix */
  .active-upcoming-event-carousel .owl-dots {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px;
  }

  /* Single carousel cards */
  .single-carousel {
    margin: 10px !important;
    padding: 10px;
  }

  .single-carousel .thumb img {
    width: 100% !important;
  }

  .single-carousel h4 {
    font-size: 16px;
    text-align: center;
  }

  .single-carousel p {
    font-size: 13px;
    text-align: justify;
  }

  /* Event cards */
  .event-item {
    padding: 15px;
  }

  /* Horizontal scroll cards */
  .horizontal-scroll-wrapper {
    flex-direction: row;
    gap: 12px;
    padding: 15px 10px;
  }

  .event-square-card {
    flex: 0 0 85% !important;
  }

  /* .course-card-item img {
    height: 220px !important;
  }

  .events-scroller-section .course-card-item img {
    height: 220px !important;
  }

  .events-scroller-section .content  {
     flex-grow:1;
     height: 200px;
  }
  .events-scroller-section .content h4 {
    font-size: 16px;
    text-align: center;
  }

  .events-scroller-section .content p,
  .events-scroller-section .content .desc {
    font-size: 13px;
    text-align: justify;
  }
  .events-scroller-section .content .desc{
    margin-top: 5px;
} */
}
@media (max-width: 576px) {
  .single-carousel {
    margin: 15px;
  }
}
/* Small Mobile */
@media (max-width: 480px) {
  .single-carousel h4 {
    font-size: 15px;
  }

  .single-carousel p {
    font-size: 12.5px;
  }

  .event-item {
    padding: 12px;
  }

  .event-square-card {
    flex: 0 0 90% !important;
  }

  /* .course-card-item img {
    height: 180px !important;
  }

  .events-scroller-section .course-card-item img {
    height: 180px !important;
  }

  .events-scroller-section .content h4 {
    font-size: 14px;
  }

  .events-scroller-section .content p,
  .events-scroller-section .content .desc {
    font-size: 12.5px;
  } */
}
/*--------------------------------------------------------------
# upcoming event End
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# events Start
--------------------------------------------------------------*/
.section-gap {
  padding: 120px 0;
}

.pb-30 {
  padding-bottom: 30px;
}

.event-page-lists .single-carusel {
  margin-bottom: 50px;
}
.event-page-lists .primary-btn {
  border: 1px solid transparent;
}

.primary-btn {
  background: #f7631b;
  line-height: 42px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
}

.mt-40 {
  margin-top: 40px;
}
/* ===============================
   RESPONSIVE IMPROVEMENTS
================================ */

/* Tablets */
@media (max-width: 992px) {
  .section-gap {
    padding: 80px 0;
  }

  .primary-btn {
    padding-left: 22px;
    padding-right: 22px;
    line-height: 40px;
    font-size: 14px;
  }

  .event-page-lists .single-carusel {
    margin-bottom: 30px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .section-gap {
    padding: 60px 15px;
  }

  .pb-30 {
    padding-bottom: 20px;
  }

  .mt-40 {
    margin-top: 25px;
  }

  .primary-btn {
    display: inline-block;
    width: auto;
    font-size: 14px;
    padding: 10px 20px;
    line-height: 38px;
    text-align: center;
  }

  .event-page-lists .single-carusel {
    margin-bottom: 25px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .section-gap {
    padding: 50px 10px;
  }

  .primary-btn {
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 10px 15px;
  }

  .event-page-lists .single-carusel {
    margin-bottom: 20px;
  }
}
/*--------------------------------------------------------------
# cta-two Area Start 
--------------------------------------------------------------*/

.cta-two-area {
  background: #f7631b;
  padding: 40px 0px;
}
.cta-two-area .cta-left {
  text-align: left;
}
.cta-two-area .cta-left h1 {
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.cta-two-area .cta-right {
  text-align: right;
  font-size: 18px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.cta-two-area .cta-right .primary-btn:hover {
  /* color: #0b519b; */
  color: white;
}
/* @media (max-width: 991px) {
  .cta-two-area .cta-right {
    text-align: left;
    margin-top: 20px;
  }
} */
/*****new responsive *******/
/* ===============================
   CTA TWO RESPONSIVE FIX
================================ */

/* Tablets */
@media (max-width: 992px) {
  .cta-two-area {
    padding: 35px 15px;
  }

  .cta-two-area .cta-left h1 {
    font-size: 18px;
    text-align: center;
  }

  .cta-two-area .cta-right {
    font-size: 16px;
    text-align: center;
    margin-top: 15px;
    /* text-align: left;
    margin-top: 20px; */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .cta-two-area {
    padding: 30px 15px;
  }

  .cta-two-area .cta-left,
  .cta-two-area .cta-right {
    text-align: center !important;
  }

  .cta-two-area .cta-left h1 {
    font-size: 24px;
    line-height: 1.4;
  }

  .cta-two-area .cta-right {
    font-size: 15px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .cta-two-area {
    padding: 25px 10px;
  }

  .cta-two-area .cta-left h1 {
    font-size: 17px;
  }

  .cta-two-area .cta-right {
    font-size: 14px;
  }
}
/*--------------------------------------------------------------
# cta-two Area End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Start course-details Area Start
--------------------------------------------------------------*/
.pt-120 {
  padding-top: 120px;
}
.main-image {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  /* حواف دائرية مثل الصور */
}
.main-image img {
  width: 100%;
  /* تأكيد أن القسم يأخذ العرض كاملاً */
  height: 400px;
}

video {
  width: 100%;
  height: 400px;
  background: #000;
}

/* --- CSS محمي داخل معرف فريد --- */
#custom-video-section {
  padding: 40px 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
}

#custom-video-section .video-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px; /* يمكنك التحكم في حجم الفيديو من هنا */
  aspect-ratio: 16 / 9; /* يحافظ على أبعاد اليوتيوب */
  background-color: #000;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#custom-video-section .custom-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* يضمن ملء الفيديو للمساحة */
  display: block;
}

/* زر التشغيل (تصميم يوتيوب) */
#custom-video-section .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 0, 0, 0.9); /* أحمر يوتيوب */
  color: white;
  border: none;
  width: 75px;
  height: 52px;
  border-radius: 12px;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  pointer-events: none; /* النقر يمر للفيديو تحت الزر */
}

/* تأثير الحركة عند تمرير الماوس */
#custom-video-section .video-wrapper:hover .play-btn {
  background-color: #ff0000;
  transform: translate(-50%, -50%) scale(1.15);
}

/* إخفاء الزر والطبقة تماماً عند التشغيل */
#custom-video-section .video-wrapper.is-playing .play-btn,
#custom-video-section .video-wrapper.is-playing .video-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* طبقة تظليل خفيفة فوق الغلاف قبل التشغيل */
#custom-video-section .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
}

#custom-video-section video::cue {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 1.1rem;
  font-family: Arial, sans-serif;
  text-shadow: 1px 1px 2px #000;
  text-align: center;
}

video::-webkit-media-text-track-display {
  overflow: visible !important;
}
/* لتحسين ظهور الترجمة عند صغر الشاشة */
@media (max-width: 600px) {
  #custom-video-section video::cue {
    font-size: 0.9rem;
  }
}
video::cue {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  font-size: 18px !important;
  text-align: center !important;
}

video::-webkit-media-text-track-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  /* bottom: 8% !important; */
  bottom: -10% !important;
}

.course-preview {
  background: #30e9e9;
  padding: 10px;
  margin-top: -10px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.course-preview h4 {
  font-weight: 600;
  margin-bottom: 15px;
  color: black;
}
.course-image-box {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.course-image {
  border-radius: 10px;
}

.preview-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}

.preview-btn:hover {
  background: #0d6efd;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: flex;
}

.play-button:hover {
  background: #0d6efd;
}
.play-video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

/* أيقونة التشغيل */

.play-icon {
  font-size: 30px;
  color: #0d6efd;
  margin-left: 5px;
}

/* Hover Effect */

.play-video-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: #0d6efd;
}

.play-video-btn:hover .play-icon {
  color: white;
}

/* Animation (Pulse Effect) */
.play-video-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.video-container {
  max-width: 800px;
  position: relative;
  margin: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  /* ظل احترافي */
}
.window-controls {
  position: absolute;

  top: 10px;

  right: 10px;

  display: flex;

  gap: 8px;

  z-index: 99999;
}

.window-controls button {
  width: 34px;

  height: 34px;

  border: none;

  border-radius: 6px;

  background: rgba(0, 0, 0, 0.7);

  color: white;

  cursor: pointer;

  font-size: 14px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.window-controls button:hover {
  background: #0d6efd;
}

.video-container video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

#our-team-section {
  scroll-margin-top: 100px; /* غيّر الرقم حسب ارتفاع الـ Navbar لديكِ */
  margin-top: 0 !important;
}

html {
  scroll-behavior: smooth !important;
}

/* لجعل الاسم يظهر كأنه رابط عند الوقوف عليه */
.or {
  cursor: pointer;
  transition: 0.3s;
}
.or:hover {
  color: #007bff !important;
  text-decoration: underline;
  transition: 0.3s;
}
/**video css end**/
.course-details-area {
  background: #f4f7f7;
}
.course-details-area h4 {
  text-align: left;
  margin-top: 12px;
}
.course-details-area h4 a:hover {
  color: #f7631b;
}
.course-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.course-list li {
  padding: 10px;
  border-bottom: 1px solid #0492c2;
  align-items: center;
}

.course-list p {
  margin: 0;
  font-weight: 500;
}

.course-container {
  width: 80%;
  margin: auto;
  padding: 40px;
}

.course-header {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.course-header h1 {
  margin-bottom: 10px;
}

.course-info {
  margin-top: 15px;
}

.course-info span {
  margin-right: 20px;
  font-weight: bold;
  color: #555;
}
/*Modules according */
.course-outline {
  background: #f7f4f4;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  margin-top: 10px;
  font-weight: 700;
  margin-bottom: 15px;
}

.course-outline h4 {
  font-size: 20px;
  margin-bottom: 15px;
}
.courses .course-meta a {
  font-size: 25px;
  margin-left: 10px;
  text-align: justify;
}

.course-rating i {
  /* color:#f4b400; */
  color: #f7631b;
  font-size: 14px;
  margin-right: 2px;
}
.course-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rating-number {
  font-weight: 600;
  margin-left: 5px;
}

.reviews {
  color: #777;
  font-size: 14px;
}

.course-students,
.course-duration {
  color: #555;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rating {
  /* color:#f4b400; */
  color: #f7631b;
  font-weight: 600;
}

.instructor-card {
  border-radius: 15px;
  padding: 10px;
}

.instructor-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0d6efd;
}

.instructor-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

.instructor-info p {
  margin: 5px 0;
  font-size: 14px;
}

.instructor-link {
  cursor: pointer;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
}

.instructor-link:hover {
  text-decoration: underline;
}

/******instructor card2 *********/
.instructor-card-2 {
  border-radius: 15px;
  overflow: hidden;
}

/* LEFT SIDE */
.instructor-left {
  background: linear-gradient(135deg, #0d6efd, #4facfe);
  color: #fff;
  padding: 30px 20px;
}

.profile-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #fff;
  object-fit: cover;
  margin-top: 15px;
}

/* RIGHT SIDE */
.instructor-right {
  padding: 25px;
}

.instructor-right h6 {
  font-weight: bold;
  margin-bottom: 10px;
}

.instructor-right p {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

/* GRID INFO */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.info-grid div {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
}

/* SOCIAL ICONS */
.social-icons a {
  margin-right: 10px;
  font-size: 16px;
  color: #0d6efd;
  transition: 0.3s;
}

.social-icons a:hover {
  color: #000;
}

#otpBox {
  background: #f8fafc;
  border-radius: 12px;
  padding: 25px;
  margin-top: 20px;
}

#otpInput {
  max-width: 260px;
  margin: auto;
  font-size: 22px;
  letter-spacing: 6px;
}
/***for instructor end**/
.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.divider {
  color: #ccc;
}
/**for new rating section start**/
.rating-section {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.rating-overview {
  text-align: center;
  min-width: 120px;
}

.rating-overview h2 {
  font-size: 48px;
  font-weight: 700;
  color: #333;
}

.stars i {
  /* color:#f4b400; */
  color: #f7631b;
  font-size: 18px;
}

.rating-breakdown {
  flex: 1;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.rating-row span {
  font-size: 14px;
  width: 40px;
}

.progress {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  /* background:#f4b400; */
  background: #f7631b;
}
/**for new rating section end**/
.course-intro {
  /* color: #666; */
  color: black;
  margin-left: 10px;
  margin-top: 7px;
}
.course-outline .course-stats {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  margin-top: 15px;
}
@media (max-width: 992px) {
  .course-outline .course-stats {
    flex-direction: column;
    gap: 6px;
  }
}

.module {
  background: white;
  /* background: rgb(8, 78, 228); */
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-bottom: 1px solid #eee;
  /* padding: 10px 0; */
}
.module ul {
  padding-left: 15px;
}

.module li {
  padding: 6px 0;
}

.module-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  /* align-items: center; */
  align-items: flex-start; /* 👈 مهم عشان يبقى فوق */
  cursor: pointer;
  /* padding: 10px; */
  /* padding: 12px 16px; */
  /* 👈 ده الحل الأساسي */
  padding: 10px 14px; /* 👈 ده الحل الأساسي */
  background: #0492c2;
  /* background: #f8f6f7; */
  /* border-radius: 6px; */
  /* padding: 10px 0; */
  /* border-bottom: 1px solid #eee; */
  border-bottom: 3px solid #f7631b;
  border-radius: 10px;
  margin: 10px 0;
}

.module-info {
  font-size: 14px;
  /* color: black; */
  color: #eee;
  /* margin-left: 10px; */
  margin-top: 4px;
  margin-left: 5px;
}
.module-title {
  font-size: 14px;
  line-height: 1.4;
  /* color: black; */
  color: #eee;
  font-weight: 600;
  display: flex;
  flex-direction: column; /* 👈 يخلي الوقت تحت */
  max-width: 85%; /* 👈 يمنع التمدد للحافة */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* سطرين بس */
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1; /* 👈 ياخد المساحة المتاحة بس */
  min-width: 0; /* 👈 مهم جدًا يمنع الزق */
}

.module-header:hover {
  /* background: #f7631b; */
  /* background: #eee; */
  background: #0492c2;
}
/**for button view details***/
.view-details-btn {
  font-size: 13px;
  color: black;
  text-decoration: none;
  font-weight: 600;
}

.view-details-btn:hover {
  text-decoration: underline;
}
/*end**/

/**for arrow near the module***/
.toggle-arrow {
  font-size: 14px;
  /* color: #666; */
  color: white;
  transition: 0.3s;
  flex-shrink: 0;
  /* margin-top: 4px; */
  margin-left: 10px;
}
.module.active .toggle-arrow {
  transform: rotate(180deg);
}
/*end**/
.lessons {
  display: none;
  padding: 10px 15px;
}

.lessons.open {
  max-height: 500px;
}
.lesson {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: 0.3s;
  gap: 8px;
  align-items: center;
}
.lesson:hover {
  background: #f5f5f5;
}
.lesson-content {
  display: none;
  padding: 10px 20px;
  background: #f9f9f9;
}

.lesson-item.active .lesson-content {
  display: block;
}

.lesson-toggle {
  cursor: pointer;
  margin-left: 10px;
}
.module-content {
  display: none;
}

.module.active .module-content {
  display: block;
}

.toggle-arrow {
  cursor: pointer;
}

.toggle-arrow i {
  transition: 0.3s;
}

/* لف السهم */
.module.active .toggle-arrow i {
  transform: rotate(180deg);
}

.lesson.completed {
  background: #d4edda;

  color: #155724;

  font-weight: bold;
}
/***Code css for the new lesson code write start***/
/* العنوان ياخد باقي المساحة */
.lesson-center span:first-child {
  flex: 1;
  min-width: 0; /* مهم جدًا عشان يسمح بالـ wrap */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* أقصى عدد سطور */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.courses .course-list {
  grid-template-columns: 1fr; /* كرت واحد فقط في العرض على الموبايل */
  /* background-color: #9d0d0d; */
  /* margin-top: -8px; */
}
.left-contents .course-list li {
  margin-bottom: 5px;
}
/* 🔒 عزل كامل */
.course-list .lesson-item {
  /* display: flex; */
  /* flex-direction: column;  */
  /* 👈 نخليهم تحت بعض */
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  /* padding: 10px 15px; */
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  border-radius: 6px;
  transition: 0.3s;
  /* gap: 10px; */
  /* gap: 6px; */
  display: grid;
  grid-template-columns: 1fr auto; /* المحتوى + الزر */
  gap: 6px 10px;
}

/* .course-list .lesson-item:hover {
  background: #f8f9ff;
  transition: 0.3s;
} */
/* الجزء الشمال (icon + title) */
.course-list .lesson-left {
  display: flex;
  grid-column: 1 / 2;
  align-items: center;
  font-weight: 600;
  /* gap: 8px; */
  gap: 6x;
}

/* الوسط */
.course-list .lesson-center {
  flex: 1;
  grid-column: 1 / 2;
  margin: 0 10px;
  color: #222020;
  /* display: flex; */
  display: grid;
  justify-content: space-between; /* 👈 العنوان + الوقت */
  grid-template-columns: 1fr auto; /* عنوان | وقت */
  /* gap: 8px; */
  align-items: center;
  font-size: 14px;
}

/* اليمين */
.course-list .lesson-right {
  white-space: nowrap;
  flex-shrink: 0;
  color: #888;
  font-size: 14px;
  display: flex;
  align-items: center;
  /* gap: 8px; */
  grid-column: 1 / 2;
  justify-content: space-between;
}
.course-list .lesson-right span {
  /* margin-left: 10px; */
  margin-left: auto;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
/* زر Resume */
.resume-btn {
  display: none;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: none;
  /* background:#ffc107; */
  background: #f7631b;
  color: #000;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  align-self: center;
}

.resume-btn:hover {
  /* background:#ffb300; */
  background: #f7631b;
}

/* الأيقونة */
.course-list .icon {
  width: 20px;
  text-align: center;
  color: #2c7be5;
}

/* Completed */
.course-list .lesson-item.completed {
  background: #0492c2;
  /* color: #f2c510;; */
  color: #f7631b;
  cursor: pointer;
}
.course-list .lesson-item.completed .lesson-title {
  color: #fff;
  font-weight: 600;
}
.course-list .lesson-item.completed .lesson-center {
  color: #fff;
}
.course-list .lesson-item.completed .lesson-right {
  color: #fff;
}
@media (max-width: 768px) {
  .course-list .lesson-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex-wrap: wrap;
  }

  .course-list .lesson-center {
    margin: 0;
    width: 100%;
    font-size: 14px;
  }
  .course-list .lesson-right {
    margin-left: auto;
  }

  .resume-btn {
    font-size: 11px;
    padding: 3px 8px;
  }
}
/***Code css for the new lesson code write end ***/
.lesson:last-child {
  border-bottom: none;
}
.lessons ul {
  list-style: none;
  padding: 0;
}

.lessons li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.lesson-title {
  color: #333;
}

.lesson-time {
  color: #999;
  font-size: 13px;
}

/* تعديلات خاصة بالشاشات الصغيرة (Mobile) */
@media (max-width: 768px) {
  .courses .course-list {
    grid-template-columns: 1fr; /* كرت واحد فقط في العرض على الموبايل */
  }

  .courses .course-details-area {
    padding-top: 60px; /* تقليل المسافات العلوية في الموبايل */
  }
}

/**end of modules accoring*/
.left-contents,
.right-contents {
  padding: 25px;
  border-radius: 18px;
}
/* ================== Progress ================== */
.course-progress {
  margin-top: 20px;
}
.course-progress {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.course-progress h6 {
  font-weight: 600;
  margin-bottom: 10px;
}

/* تحسين الـ progress */
.course-progress .progress {
  height: 15px;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
}

/* تأثير السينما */
.cinema-mode {
  filter: blur(6px);
  transform: scale(1.02);
  transition: all 0.4s ease;
}

/* طبقة تغميق الخلفية */
.cinema-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1040;
  display: none;
}

/* الفيديو فوق الطبقة */
.modal {
  z-index: 1055;
}
.main-image img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 30px;
}

.jq-tab-wrapper {
  margin-top: 25px;
}

.left-contents .jq-tab-wrapper {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  flex-direction: column; /* المحتوى (التابات ثم النص) يكون تحت بعضه */
  width: 100%;
  padding-top: 10px;
}

.left-contents .jq-tab-wrapper.horizontal-tab {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
#horizontalTab {
  background-color: #0492c2;
}

.jq-tab-content {
  display: none;
}
/* .jq-tab-content h4 {
  text-align: justify;
} */
/* .jq-tab-content p {
  text-align: justify;
  margin-top: 7px;
  word-spacing: 3px;
} */
.jq-tab-content h4 {
  text-align: justify;
  font-size: 18px;
  /* margin-top: 10px; */
  margin: 10px 0 5px;
}
.jq-tab-content p {
  text-align: justify;
  margin-top: 8px;
  word-spacing: 2px;
  font-size: 14px;
}
.jq-tab-content .lessons p:first-of-type {
  text-align: justify;
  justify-content: space-around;
  margin-top: -4px;
  /* word-spacing: 1px; */
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  /* color: #555; */
  color: black;
  line-height: 1.6;
}
.jq-tab-content .lessons p:last-of-type {
  text-align: justify;
  justify-content: space-around;
  margin-top: 8px;
  /* word-spacing: 1px; */
  font-size: 13px;
  /* background: #f1f5ff; */
  /* background: #11baf3; */
  padding: 6px 8px;
  border-radius: 8px;
  display: inline-block;
  /* display: flex; */
  gap: 10px;
  /* color: black; */
  color: #0492c2;
}
.jq-tab-content.active {
  display: block;
}
.lesson-title {
  /* color: #9d0d0d; */
  color: #0492c2;
  font-size: 15px;
}
/* العنوان */
.course-meta a {
  font-size: 23px !important;
  text-align: center;
  display: block;
  margin-top: -13px;
  color: #0492c2;
}
/* قائمة العناوين - هنا التعديل لضمان الظهور الأفقي */
.left-contents .jq-tab-menu {
  display: flex !important; /* يجبر العناوين على أن تكون بجانب بعضها */
  /* flex-wrap: wrap;  */
  /* إذا كانت العناوين كثيرة تنزل لسطر جديد بدل الخروج عن الشاشة */
  border-bottom: 2px solid #f7631b; /* خط جمالي تحت التابات */
  /* margin-bottom: 0px; */
  /* margin-left: 10px; */
  font-size: 11px;
  /* overflow-x: auto;  */
  /* 👈 يسمح بالسحب */
  /* -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding-bottom: 5px; */
}

/* تعديل الموبايل لضمان عدم اختفاء التنسيق */

@media (max-width: 413px) {
  .left-contents .jq-tab-menu {
    display: flex !important;
    justify-content: center;
  }
}

.left-contents .jq-tab-menu .jq-tab-title {
  /* color: #efe6e6; */
  color: #eee;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  /* زيادة مساحة الضغط */
  text-shadow: none !important; /* لإزالة أي ظل للنص */
  text-align: center;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block; /* لضمان ثبات الحجم */
  /* flex: 0 0 auto; */
  /* 👈 مهم */
  /* white-space: nowrap;
  padding: 6px 10px; */
}
/* إخفاء scrollbar (اختياري) */
.jq-tab-menu::-webkit-scrollbar {
  display: none;
}
@media (max-width: 504px) {
  .left-contents .jq-tab-menu .jq-tab-title {
    padding: 0.9em 0.9em;
    font-size: 10px;
  }
}
/* حالة التفعيل (Active) */
.left-contents .jq-tab-menu .jq-tab-title:hover,
.left-contents .jq-tab-menu .jq-tab-title.active {
  background: transparent;
  border-bottom: 3px solid #f7631b;
  color: #fff !important;
  border-radius: 16px 0px 16px 0px;
  margin-bottom: 11px;
  margin-top: 5px;
}

.left-contents .horizontal-tab .jq-tab-menu {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: flex;
}
.left-contents .jq-tab-content-wrapper {
  -webkit-box-flex: 4;
  -ms-flex: 4;
  flex: 4;
}
.left-contents .jq-tab-content {
  display: none;
  padding: 1em 1.8em;
  font-size: 14px;
  font-weight: 300;
  /* color: #117ee4; */
  color: black;
  text-align: justify;
}
.left-contents #verticalTab .jq-tab-content-wrapper {
  border: 1px solid #eee;
}
.left-contents #horizontalTab .jq-tab-content-wrapper {
  background: #f9f9ff;
  /* background: #0505ac; */
}
.left-contents .jq-tab-content.active {
  display: block;
}
@media (max-width: 413px) {
  .left-contents .comment-wrap {
    padding: 0px !important;
  }
}
.left-contents .course-list li {
  margin-bottom: 10px;
}
.left-contents .course-list li .primary-btn {
  background: #fff;
  color: #222;
}
.left-contents .course-list li .primary-btn:hover {
  background: #f7631b;
  color: #fff;
}
@media (max-width: 414px) {
  .left-contents .course-list li {
    font-size: 8px;
  }
}
.pt-40 {
  padding-top: 40px;
}
.left-contents .comments-area {
  padding: 0px 20px;
  margin-top: 50px;
  background: transparent !important;
  border: none !important;
}
@media (max-width: 414px) {
  .left-contents .comments-area {
    padding: 50px 8px;
  }
}
.pb-20 {
  padding-bottom: 20px;
}
.left-contents .comments-area h4 {
  text-align: center;
  margin-bottom: 50px;
  font-weight: 600;
}
.left-contents .comments-area a {
  color: #222;
  font-size: 15px;
}
.mt-20 {
  margin-top: 20px;
}
.single-comment {
  border-bottom: 1px solid #410808;
}
.left-contents .comments-area .comment-list {
  padding-bottom: 30px;
}
.left-contents .comments-area .comment-list:last-child {
  padding-bottom: 0px;
}
.left-contents .comments-area .comment-list.left-padding {
  padding-left: 25px;
}
@media (max-width: 414px) {
  .left-contents .comments-area .comment-list .single-comment h5 {
    font-size: 12px;
  }
  .left-contents .comments-area .comment-list .single-comment .date {
    font-size: 11px;
  }
  .left-contents .comments-area .comment-list .single-comment .comment {
    font-size: 10px;
  }
}
.left-contents .comments-area .thumb {
  margin-right: 40px;
}
.left-contents .comments-area .desc h5 {
  font-weight: 600;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.left-contents .comments-area .desc h5:hover a {
  color: #f7631b !important;
}
.left-contents .comments-area .date {
  font-size: 13px;
  color: #cccccc;
}
.left-contents .comments-area .comment {
  color: #777777;
  margin-bottom: 0px;
}
.left-contents .comments-area .btn-reply {
  background-color: #0492c2;
  color: white;
  font-size: 12px;
  font-weight: 400;
  padding: 8px 30px;
  border-radius: 10px;
  display: block;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.left-contents .comments-area .btn-reply:hover {
  background: #f7631b;
  color: #fff;
}
.left-contents .comment-form {
  border: none;
}

.left-contents .star .checked {
  color: #f7631b;
}
.left-contents .reviews span,
.left-contents .reviews .star {
  width: 25%;
  margin-bottom: 10px;
}
.left-contents .avg-review {
  background: #04091e;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 20px 0px;
}
.left-contents .avg-review span {
  font-size: 18px;
  color: #f7631b;
}
@media (max-width: 991px) {
  .left-contents .avg-review {
    margin-bottom: 20px;
  }
}
.left-contents .single-reviews h5 {
  display: inline-flex;
}
.left-contents .single-reviews h5 .star {
  margin-left: 10px;
}

.right-contents ul li {
  background: #f9f9ff;
  padding: 10px 22px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #0492c2;
}
.right-contents ul li a {
  color: #222;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
}
.right-contents ul li a p {
  margin-bottom: 0px;
}
.right-contents ul li .or {
  color: #f7631b !important;
}

.right-contents .primary-btn {
  font-size: 15px;
  margin-top: 10px;
  width: 100%;
  background: #0492c2;
  text-align: center;
  padding: 3px 8px;
  border-radius: 10px;
}

@media (max-width: 991px) {
  .right-contents {
    margin-top: 30px;
  }
}
.comments-area {
  background: #fafaff;
  border: 1px solid #eee;
  padding: 50px 20px;
  margin-top: 50px;
}
@media (max-width: 414px) {
  .comments-area {
    padding: 50px 8px;
  }
}
.comments-area h4 {
  text-align: center;
  margin-bottom: 50px;
}

.comments-area a {
  color: #222;
}
.comments-area .comment-list {
  padding-bottom: 30px;
}
.comments-area .comment-list:last-child {
  padding-bottom: 0px;
}
.comments-area .comment-list.left-padding {
  padding-left: 25px;
}
@media (max-width: 413px) {
  .comments-area .comment-list .single-comment h5 {
    font-size: 12px;
  }
  .comments-area .comment-list .single-comment .date {
    font-size: 11px;
  }
  .comments-area .comment-list .single-comment .comment {
    font-size: 10px;
  }
}
.comments-area .thumb {
  margin-right: 20px;
}
.comments-area .date {
  font-size: 13px;
  color: #cccccc;
}
.comments-area .comment {
  color: #777777;
}
.comments-area .btn-reply {
  background-color: #fff;
  color: #222;
  border: 1px solid #eee;
  padding: 8px 30px;
  display: block;
  font-weight: 600;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.comments-area .btn-reply:hover {
  background-color: #f7631b;
  color: #fff;
}

/* الحاوية الكلية للفورم */
.comment-form {
  background: #0492c2;
  text-align: center;
  border: 1px solid #eee;
  padding: 50px 20px;
  margin-top: 50px;
}
/* السطر الذي يجمع الاسم والإيميل */
.comment-form .first-row {
  display: flex;
  gap: 20px; /* المسافة بين خانة الاسم والإيميل */
  margin-bottom: 20px;
}
/* تحويل السطر ليكون عمودياً في الشاشات الصغيرة (الموبايل) */
@media (max-width: 768px) {
  .comment-form .first-row {
    flex-direction: column;
    gap: 10px;
  }
}
.comment-form textarea {
  resize: none;
}
.comment-form h4 {
  text-align: center;
  margin-bottom: 50px;
  color: white;
}
.comment-form .name {
  flex: 1; /* تجعل الخانتين يتقاسمان السطر بالتساوي */
  padding: 0 !important; /* إلغاء البادينج القديم لضمان المحاذاة */
}
@media (max-width: 991px) {
  .comment-form .name {
    padding-right: 0px;
  }
}
.comment-form .email {
  flex: 1; /* تجعل الخانتين يتقاسمان السطر بالتساوي */
  padding: 0 !important; /* إلغاء البادينج القديم لضمان المحاذاة */
}
@media (max-width: 991px) {
  .comment-form .email {
    padding-left: 0px;
  }
}
/* باقي الخانات (الموضوع والرسالة) */
.comment-form .form-group {
  margin-bottom: 20px;
  width: 100%;
}
.comment-form .form-control {
  padding: 12px;
  background: #fff;
  border: none;
  border-radius: 4px; /* زوايا ناعمة اختيارية */
  width: 100%;
  font-size: 13px;
  color: #777777;
  box-sizing: border-box; /* لضمان عدم خروج العرض عن الإطار */
}

.comment-form .form-control:focus {
  box-shadow: none;
  border: 1px solid #eee;
}
.comment-form ::-webkit-input-placeholder {
  font-size: 13px;
  color: #777;
}
.comment-form ::-moz-placeholder {
  font-size: 13px;
  color: #777;
}
.comment-form :-ms-input-placeholder {
  font-size: 13px;
  color: #777;
}
.comment-form :-moz-placeholder {
  font-size: 13px;
  color: #777;
}

.genric-btn.primary {
  background: #0492c2;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  font-weight: 600;
}
.primary-btn:hover,
.genric-btn.primary:hover {
  background: #f7631b;
  color: #fff;
}
.review-area {
  background: #f9f9ff;
}
.review-area h4 {
  color: #222;
}
.review-area .owl-carousel .owl-item img {
  width: auto !important;
}
.review-area .owl-dots {
  text-align: center;
  bottom: 5px;
  margin-top: 20px;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.review-area .owl-dot {
  height: 10px;
  width: 10px;
  display: inline-block;
  background: rgba(127, 127, 127, 0.5);
  margin-left: 5px;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.review-area .owl-dot.active {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: #f7631b;
}
.single-review .title {
  margin: 20px 0;
}
.single-review .star {
  margin-left: 30px;
}
.single-review .star .checked {
  /* color: orange; */
  color: #f7631b;
}
@media (max-width: 414px) {
  .single-review {
    padding: 15px;
  }
}
.single-blog .thumb {
  overflow: hidden;
}
.single-blog .thumb img {
  width: 100%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.single-blog:hover img {
  transform: scale(1.1);
}
.single-blog:hover h5 {
  color: #f7631b;
}
.single-blog h5 {
  margin-bottom: 12px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.single-blog a {
  color: #777;
}
.single-blog .meta {
  font-weight: 400;
  text-align: left;
  margin-top: 40px;
}
@media (max-width: 991px) {
  .single-blog {
    margin-bottom: 30px;
  }
}
.single-blog .details-btn {
  border: 1px solid #eee;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.single-blog .details-btn .details {
  visibility: hidden;
  opacity: 0;
  margin-left: -53px;
  font-weight: 600;
  text-transform: uppercase;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.single-blog .details-btn .lnr {
  color: #222;
  line-height: inherit;
}
.single-blog .details-btn:hover {
  width: 140px;
  background: #f7631b;
  box-shadow: 0px 10px 20px 0px rgba(60, 64, 143, 0.2);
}
.single-blog .details-btn:hover .details {
  margin-left: 0;
  visibility: visible;
  opacity: 1;
  margin-right: 8px;
}
.single-blog .details-btn:hover span {
  color: #fff;
  font-weight: 600;
}
/*--------------------------------------------------------------
# Start course-details Area End
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Start course-details Area RESPONSIVE CSS Start
--------------------------------------------------------------*/
/* ================== 480px ================== */
/* @media (max-width: 480px) {

  .course-details-area {
    padding-top: 40px !important;
  } */

/* الأعمدة */
/* .left-contents,
  .right-contents {
    width: 100% !important;
    flex: 100% !important;
  } */

/* الصورة */
/* .course-image {
    width: 100%;
    height: auto;
  } */

/* العنوان */
/* .course-meta a {
    font-size: 18px !important;
    text-align: center;
    display: block;
  }

  .course-intro {
    font-size: 14px;
    text-align: justify;
  } */

/* Tabs */
/* .jq-tab-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .jq-tab-title {
    font-size: 12px;
    padding: 6px 8px;
  } */

/* lessons */
/* .lesson-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .lesson-left,
  .lesson-center,
  .lesson-right {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .lesson-center span {
    font-size: 13px;
  }

  .lesson-right {
    justify-content: space-between;
  } */

/* sidebar */
/* .right-contents ul li {
    font-size: 14px;
  }

  .primary-btn {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
} */

/* ================== 424px ================== */
/* @media (max-width: 424px) {

  .course-meta a {
    font-size: 16px !important;
  }

  .course-intro {
    font-size: 13px;
  }

  .jq-tab-title {
    font-size: 11px;
  }

  .lesson-center span {
    font-size: 12px;
  }
} */

/* ================== 414px ================== */
/* @media (max-width: 414px) {

  .course-meta a {
    font-size: 15px !important;
  }

  .lesson-item {
    padding: 8px 0;
  }
} */

/* ================== 390px ================== */
/* @media (max-width: 390px) {

  .course-meta a {
    font-size: 14px !important;
  }

  .jq-tab-title {
    padding: 5px 6px;
  }

  .lesson-center span {
    font-size: 11px;
  }
} */

/* ================== 375px ================== */
/* @media (max-width: 375px) {

  .course-meta a {
    font-size: 13px !important;
  }

  .course-intro {
    font-size: 12px;
  }

  .lesson-left span,
  .lesson-right span {
    font-size: 11px;
  }

  .primary-btn {
    font-size: 13px;
    padding: 10px;
  }
} */

/* ================== 360px ================== */
/* @media (max-width: 360px) {

  .course-meta a {
    font-size: 12px !important;
  }

  .jq-tab-title {
    font-size: 10px;
    padding: 4px 5px;
  }

  .lesson-center span {
    font-size: 10px;
  }

  .lesson-left span {
    font-size: 10px;
  }

  .lesson-right span {
    font-size: 10px;
  }
} */
/*--------------------------------------------------------------
# Start course-details Area RESPONSIVE CSS End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Blog Start
--------------------------------------------------------------*/
.blog .blog-item .project-img {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: 0.5s;
}

.blog .blog-item .project-img .blog-plus-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* background: rgba(49, 232, 214, 0.2); */
  background: gold;
  transition: 0.5s;
  opacity: 0;
}

.blog .blog-item:hover .project-img .blog-plus-icon {
  opacity: 1;
}

.blog .blog-item .project-img img {
  transition: 0.5s;
}

.blog .blog-item:hover .project-img img {
  transform: scale(1.3);
}

/*--------------------------------------------------------------
# Blog End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Team Start
--------------------------------------------------------------*/
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.team .team-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bs-dark);
  /* transition: 0.5s; */
  transition: all 0.3s ease;
  /* width: 90%; */
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 250px;
  margin: 0 auto;
}

.team .team-item:hover {
  border: none !important;
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.team .team-item::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  border-color: var(--bs-primary) transparent transparent var(--bs-primary) !important;
  z-index: 5;
  transition: 1s;
  opacity: 0;
}

.team .team-item::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 10px;
  border-color: transparent var(--bs-primary) var(--bs-primary) transparent !important;
  z-index: 5;
  transition: 1s;
  opacity: 0;
}

.team .team-item:hover:after,
.team .team-item:hover::before {
  width: 100% !important;
  height: 100% !important;
  opacity: 1;
}

.team .team-item .team-img {
  position: relative;
  overflow: hidden;
  object-fit: cover;
  flex-shrink: 0;
}
.team .team-item .team-img img {
  height: 250px;
  object-fit: cover;
  width: 100%;
}

.team .team-item .team-img::after {
  content: "";
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: rgba(68, 210, 246, 0.2);
  /* background:  rgb(4, 146, 194) ; */
  transition: 0.5s;
}

.team .team-item:hover .team-img::after {
  height: 100%;
}

.team .team-item .team-img .team-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 8;
  transition: 0.5s;
}

/* .team-icon-share {
    display: flex;
    gap: 10px;          */
/* مسافة بين الايكونات */
/* justify-content: center; */
/* يخليهم في المنتصف */
/* } */
.team-icon-share {
  position: absolute;
  top: 15px;
  right: 15px;
  transform: translateY(-10px);
  opacity: 0;
  transition: 0.3s ease;
}
.team-item:hover .team-icon-share {
  transform: translateY(0);
  opacity: 1;
}
.team .team-item .team-img .team-icon .team-icon-share a {
  margin-bottom: 0 !important;
  /* يلغي mb-3 */
  margin-top: 6px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.team .team-item .team-img .team-icon .team-icon-share {
  position: relative;
  margin-top: -200px;
  transition: 0.5s;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.team .team-item:hover .team-img .team-icon .team-icon-share {
  margin-top: 11rem !important;
  margin-left: -12rem;
}

.team .team-item .team-content {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 60px;
}

.team .team-item .team-content::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bs-primary) !important;
  /* background: #0492c2 !important; */
  /* background: #f7631b !important; */
  transition: 0.5s;
}

.team .team-item .team-content::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: var(--bs-primary) !important;
  /* background: #011116 !important; */
  /* background:  #f7631b !important; */
  transition: 0.5s;
}

.team .team-item:hover .team-content::after,
.team .team-item:hover .team-content::before {
  width: 100% !important;
  height: 50% !important;
}

.team .team-item:hover .team-content .team-content-inner {
  position: relative;
  color: var(--bs-white);
  z-index: 2;
}

.team .team-item .team-content .team-content-inner h4,
.team .team-item .team-content .team-content-inner p {
  transition: 0.5s;
}
.team .team-item .team-content .team-content-inner p {
  color: var(--bs-white) !important;
  font-size: 14px;
}

.team .team-item:hover .team-content .team-content-inner p {
  color: var(--bs-white) !important;
}

.team .team-item .team-content .team-content-inner h4 {
  /* color: var(--bs-dark) !important; */
  color: var(--bs-white) !important;
  font-size: 15px;
}
.team .team-item:hover .team-content .team-content-inner h4 {
  /* color: var(--bs-dark) !important; */
  color: var(--bs-white) !important;
}

@media (max-width: 991px) {
  .team .team-item {
    /* padding-top: -60px;
    padding-bottom: -60px; */
    /* margin-left: 250px;
    width: 80%; */
    margin-left: auto;
    margin-right: auto;
    margin-left: 10px;
    /* بدل 250px */
    width: 90%;
  }
  /* .team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} */
  .team .display-4 {
    font-size: 32px;
  }

  .team .team-item .team-img img {
    /* width: 150px;
    height: 200px; */
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  .team .team-item:hover .team-content {
    padding: 20px;
  }

  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 17px;
  }

  .team .team-item:hover .team-content .team-content-inner p {
    font-size: 14px;
  }

  .team .team-item:hover .team-content .team-content-inner a {
    width: 15px;
    height: 35px;
    line-height: 35px;
  }
  .team-icon-share {
    display: flex;
    gap: 1px; /* مسافة بين الايكونات */
    justify-content: center;
    /* margin-left: -5rem; */
    margin-top: -0.01rem;
    /* width: 22%; */
    /* height: 32px; */
  }
}
@media (max-width: 768px) {
  .team .team-item {
    /* padding-top: -60px;
    padding-bottom: -60px; */
    /* margin-left: 50px; */
    margin-left: auto;
    margin-right: auto;
    /* margin-left: 0;  */
    /* بدل 50px */
    width: 80%;
  }
  /* .col-sm-6 {
    flex: 0 0 100%;
    max-width: 70%;
  } */
  .team .display-4 h1 {
    font-size: 18px !important ;
  }

  .team h4.text-primary {
    font-size: 22px;
  }

  .team .team-item .team-img {
    width: 100%;
    height: 250px;
  }
  .team .team-item .team-img img {
    height: 250px;
  }
  .team .team-item .team-content {
    padding: 18px;
  }

  .team .team-item:hover .team-content .team-content-inner h1 {
    font-size: 24px;
  }
  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 15px;
  }

  .team .team-item:hover .team-content .team-content-inner p {
    font-size: 13px;
  }

  .team .team-item .team-img .team-icon .team-icon-share a {
    width: 22%;
    height: 32px;
    line-height: 32px;
    margin-top: -0.01rem;
    margin-right: 10px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  #our-team-section {
    top: -70px;
  }
}

/* 📱 Small Mobile */
/* @media (max-width: 480px) {

    .team-img img {
        height: 180px;
    }

    .team .team-item:hover .team-content .team-content-inner h4{

        font-size: 16px;
    }

   .team .team-item:hover .team-content .team-content-inner p {
        font-size: 13px;
    }
} */
@media (max-width: 480px) {
  .team .team-item {
    margin-left: auto;
    margin-right: auto;
    /* width: 70%; */
    width: 60%;
  }

  .team .display-4 h1 {
    font-size: 19px;
  }

  .team h4.text-primary {
    font-size: 17px;
  }

  .team .team-item .team-img {
    height: 250px;
  }

  .team .team-item .team-img img {
    height: 250px;
  }

  .team .team-item .team-content {
    padding: 15px;
    height: 60px;
  }

  .team .team-item:hover .team-content .team-content-inner h1 {
    font-size: 20px;
  }

  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 15px;
  }
  .team .team-item .team-content .team-content-inner h4 {
    font-size: 14.5px;
  }

  .team .team-item:hover .team-content .team-content-inner p {
    font-size: 12.5px;
  }
  /* .team .team-item .team-img .team-icon .team-icon-share {
  position: relative;
  margin-top: -200px;
  transition: 0.5s;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
} */
  .team .team-item .team-img .team-icon {
    /* position: absolute;
  top: 15px; */
    margin-right: -10px;
    /* z-index: 8;
  transition: 0.5s; */
  }
  .team .team-item:hover .team-img .team-icon .team-icon-share {
    margin-top: 11rem !important;
    margin-left: 20px;
    height: 45px;
  }
  .team .team-item .team-content::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bs-primary) !important;
    /* background: #0492c2 !important; */
    /* background: #f7631b !important; */
    transition: 0.5s;
  }

  .team .team-item .team-content::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--bs-primary) !important;
    /* background: #011116 !important; */
    /* background:  #f7631b !important; */
    transition: 0.5s;
  }

  .team .team-item .team-img .team-icon .team-icon-share a {
    width: 32px;
    height: 32px;
    font-size: 11px;
    margin-right: 20px;
    margin-top: -0.09rem;
    margin-left: 1px;
  }
  /* .team-icon-share {
    display: flex;
    gap: -4px;            */
  /* مسافة بين الايكونات */
  /* justify-content: center;*/
}
@media (max-width: 424px) {
  .team .team-item {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .team .display-4 {
    font-size: 22px;
  }

  .team h4.text-primary {
    font-size: 15px;
  }

  .team .team-item .team-img {
    height: 200px;
  }

  .team .team-item .team-img img {
    height: 200px;
  }

  .team .team-content {
    padding: 8px;
  }

  .team .team-item:hover .team-content .team-content-inner h1 {
    font-size: 18px;
  }

  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 14px;
  }

  .team .team-item:hover .team-content .team-content-inner p {
    font-size: 12px;
  }

  .team .team-item .team-img .team-icon .team-icon-share a {
    width: 30px;
    height: 30px;
    font-size: 10px;
    margin-right: 6px;
  }
}
@media (max-width: 360px) {
  .team .team-content {
    padding: 10px !important;
  }

  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 14px;
  }

  .team .team-item:hover .team-content .team-content-inner p {
    font-size: 12px;
  }

  .team-icon-share a {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 361px) and (max-width: 375px) {
  .team .team-item {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  .team h4.text-primary {
    font-size: 17px;
  }
  .team .display-4 {
    font-size: 17px;
  }
  .team .team-content {
    padding: 12px !important;
  }
  .team .team-item .team-img {
    width: 80%;
    height: 250px;
    object-fit: cover;
  }
  .team .team-item .team-img img {
    height: 250px;
  }
  .team .team-item .team-content::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    /* background: var(--bs-primary) !important; */
    /* background: #0492c2 !important; */
    background: #0492c2 !important;
    transition: 0.5s;
  }

  .team .team-item .team-content::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* background: var(--bs-primary) !important; */
    background: #0492c2 !important;
    /* background:  #f7631b !important; */
    transition: 0.5s;
  }
  .team .team-item .team-content .team-content-inner h4 {
    font-size: 15px;
  }

  .team .team-item .team-content .team-content-inner p {
    font-size: 13px;
  }
  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 15px;
  }

  .team .team-item:hover .team-content .team-content-inner p {
    font-size: 13px;
  }

  .team-icon-share a {
    width: 30px;
    height: 30px;
  }
  .team .team-item:hover .team-img .team-icon .team-icon-share {
    /* margin-top: 11rem !important; */
    margin-right: 20px;
    /* height: 45px; */
  }
  .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 376px) and (max-width: 390px) {
  .team .team-content {
    padding: 14px !important;
  }

  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 16px;
  }

  .team-icon-share a {
    width: 32px;
    height: 32px;
  }

  .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* @media (min-width: 391px) and (max-width: 414px) {
  .team .team-item {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .team .team-content {
    padding: 15px !important;
  }

  .team-icon-share a {
    width: 34px;
    height: 34px;
  }

  .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .team .team-item {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .team .display-4 {
    font-size: 22px;
  }

  .team h4.text-primary {
    font-size: 15px;
  }

  .team .team-item .team-img {
    height: 200px;
  }

  .team .team-item .team-img img {
    height: 200px;
  }

  .team .team-content {
    padding: 8px;
  }

  .team .team-item:hover .team-content .team-content-inner h1 {
    font-size: 18px;
  }

  .team .team-item:hover .team-content .team-content-inner h4 {
    font-size: 14px;
  }

  .team .team-item:hover .team-content .team-content-inner p {
    font-size: 12px;
  }

  .team .team-item .team-img .team-icon .team-icon-share a {
    width: 30px;
    height: 30px;
    font-size: 10px;
    margin-right: 6px;
  }
} */

@media (max-width: 414px) {
  .team .team-item {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .team h4.text-primary {
    font-size: 17px;
  }
  .team .display-4 {
    font-size: 17px;
  }
  .team .team-content {
    padding: 12px !important;
  }
  .team .team-item .team-img {
    width: 60%;
    height: 250px;
    object-fit: cover;
  }
  .team .team-item .team-img img {
    height: 250px;
  }
  .team .team-item:hover .team-img .team-icon .team-icon-share {
    /* margin-top: 11rem !important; */
    margin-right: 23px;
    /* height: 45px; */
  }
}
@media (max-width: 320px) {
  .team .team-item {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .team h4.text-primary {
    font-size: 17px;
  }
  .team .display-4 {
    font-size: 17px;
  }
  .team .team-content {
    padding: 12px !important;
  }
  .team .team-item .team-img {
    width: 85%;
    height: 250px;
    object-fit: cover;
  }
  .team .team-item .team-img img {
    height: 250px;
  }
  .team .team-item:hover .team-img .team-icon .team-icon-share {
    /* margin-top: 11rem !important; */
    margin-right: 16px;
    /* height: 45px; */
  }
}
@media (max-width: 316px) {
  .team .team-item {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .team h4.text-primary {
    font-size: 17px;
  }
  .team .display-4 {
    font-size: 17px;
  }
  .team .team-content {
    padding: 12px !important;
  }
  .team .team-item .team-img {
    width: 85%;
    height: 250px;
    object-fit: cover;
  }
  .team .team-item .team-img img {
    height: 250px;
  }
  .team .team-item:hover .team-img .team-icon .team-icon-share {
    /* margin-top: 11rem !important; */
    margin-right: 15px;
    /* height: 45px; */
  }
}
@media (max-width: 576px) {
  .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* .team .team-item {
    width: 100%;
    height: 250px;
  } */
  .team .team-item .team-img {
    width: 100%;
    height: 250px;
  }
  .team .team-item .team-img img {
    height: 250px;
  }
  /* .team .team-item .team-img img {
    height: auto;
  } */
}
/*--------------------------------------------------------------
# Team End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Testimonial Start
--------------------------------------------------------------*/
.testimonial-heading {
  /* max-width: 500%;
    margin: auto;
    padding: 20px 10px; */
  max-width: 800px;
  margin: auto;
  padding: 20px 10px;
  text-align: center;
}

.testimonial-heading p {
  /* max-width: 800px;
  margin-left: 10rem; */
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 0 15px;
  line-height: 1.7;
}

/* .testimonial-card {
    background: #fff; */
/* background: #c02727; */
/* padding: 30px; */
/* padding: 25px; */
/* border-radius: 20px; */
/* border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
  height: 100%;
  border-left: 4px solid #f7631b;
} */

/* .testimonial-card:hover { */
/* transform: translateY(-8px); */
/* transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
} */
.testimonial .testimonial-carousel {
  position: relative;
}

.testimonial .testimonial-carousel .owl-dots {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial .testimonial-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 15px;
  height: 15px;
  background: var(--bs-light);
  /* border: 1px solid var(--bs-primary); */
  border: 1px solid #0492c2;
  border-radius: 10px;
  transition: 0.5s;
  /* transition: all 0.3s ease; */
}

.testimonial .testimonial-carousel .owl-dot.active {
  width: 40px;
  /* background: var(--bs-primary); */
  background: #0492c2;
}
/* هذا الكود سيجعل كل الكروت بنفس الطول مهما اختلف النص */
.testimonial-carousel .testimonial-item {
  display: flex !important;
  flex-direction: column;
  /* justify-content: center; */
  height: 100%; /* إجبار الكرت على أخذ كامل الارتفاع المتوفر */
  min-height: 320px; /* يمكنك تعديل الرقم ليتناسب مع طول النص لديكِ */
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  justify-content: space-between;
}
.testimonial-carousel .testimonial-item:hover {
  transform: translateY(-6px);
}

.testimonial-item h5 {
  font-weight: 500;
}

/* تنسيق نص الكروت بشكل خاص لضمان التساوي ومنع الفراغات البشعة */
.testimonial-item p {
  line-height: 1.8;
  font-size: 13px;
  color: #080808;
  text-align-last: left;
  /* يمنع تمدد السطر الأخير بشكل مبالغ فيه */
  /* word-spacing: -2px;     */
  text-align: justify;
  -webkit-hyphens: auto;
  /* line-height: 1.7; */
  word-spacing: normal;
}
.testimonial-carousel .justify-content-end {
  margin-top: 20px;
  text-align: left;
}

/******************/
.testimonial-user {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.testimonial-user img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
}

.testimonial-carousel .testimonial-item img {
  object-fit: cover;
}

/*new testimonial design css end */
@media (max-width: 991px) {
  .testimonial .display-4 {
    font-size: 32px;
  }

  .testimonial-heading p {
    font-size: 15px;
    line-height: 1.8;
    word-spacing: 2px;
  }

  .testimonial-item {
    padding: 25px;
  }

  .testimonial-carousel .testimonial-item img {
    width: 70px;
    height: 70px;
  }

  .testimonial-item h5 {
    font-size: 16px;
  }

  .testimonial-item p {
    font-size: 14.5px;
    word-spacing: 2px;
  }
}
@media (max-width: 768px) {
  .testimonial-heading h1 {
    font-size: 28px;
  }

  .testimonial-heading p {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .testimonial {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .testimonial .display-4 {
    font-size: 26px;
  }

  .testimonial h4 {
    font-size: 28px;
  }

  .testimonial-heading p {
    font-size: 15px;
    padding: 0 10px;
    margin-left: -10px;
  }

  .testimonial-item {
    padding: 20px;
  }

  .testimonial-carousel .testimonial-item img {
    width: 60px;
    height: 60px;
  }

  .testimonial-item h5 {
    font-size: 20px;
  }

  .testimonial-item p {
    font-size: 15px;
    text-align: left;
  }
}
@media (max-width: 480px) {
  .testimonial {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .testimonial .display-4 {
    font-size: 22px;
  }

  .testimonial h4 {
    font-size: 22px;
  }

  .testimonial-heading p {
    font-size: 14px;
    padding: 0 8px;
    margin-left: 0;
    line-height: 1.6;
  }

  .testimonial-item {
    padding: 18px;
  }

  .testimonial-carousel .testimonial-item img {
    width: 55px;
    height: 55px;
  }

  .testimonial-item h5 {
    font-size: 18px;
  }

  .testimonial-item p {
    font-size: 13px;
    text-align: left;
    line-height: 1.7;
  }
}
@media (max-width: 424px) {
  .testimonial {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .testimonial .display-4 {
    font-size: 20px;
  }

  .testimonial h4 {
    font-size: 20px;
  }

  .testimonial-heading p {
    font-size: 13px;
    padding: 0 5px;
  }

  .testimonial-item {
    padding: 15px;
  }

  .testimonial-carousel .testimonial-item img {
    width: 50px;
    height: 50px;
  }

  .testimonial-item h5 {
    font-size: 16px;
  }

  .testimonial-item p {
    font-size: 13px;
    text-align: justify;
    line-height: 1.6;
  }
}
@media (max-width: 360px) {
  .testimonial-heading h1 {
    font-size: 22px;
  }

  .testimonial-heading p {
    font-size: 12px;
  }

  .testimonial-item {
    padding: 12px !important;
  }

  .testimonial-item img {
    width: 50px !important;
    height: 50px !important;
  }

  .testimonial-item h5 {
    font-size: 13px;
  }

  .testimonial-item p {
    font-size: 12px;
  }

  .fa-quote-left {
    font-size: 20px !important;
  }
}
@media (min-width: 361px) and (max-width: 375px) {
  .testimonial-carousel .testimonial-item {
    height: 100%; /* إجبار الكرت على أخذ كامل الارتفاع المتوفر */
    min-height: 250px; /* يمكنك تعديل الرقم ليتناسب مع طول النص لديكِ */
  }
  .testimonial .display-4 {
    font-size: 20px;
  }
  .testimonial-heading h4 {
    font-size: 18px;
  }
  .testimonial-heading p {
    font-size: 13px;
  }

  .testimonial-item {
    padding: 14px !important;
  }

  .testimonial-item img {
    width: 65px !important;
    height: 65px !important;
  }

  .testimonial-item h5 {
    font-size: 15px;
    text-align: justify;
  }
  .testimonial-item p {
    font-size: 13px;
    text-align: justify;
  }
}
@media (min-width: 376px) and (max-width: 390px) {
  .testimonial-heading h1 {
    font-size: 26px;
  }

  .testimonial-item img {
    width: 60px !important;
    height: 60px !important;
  }

  .testimonial-item p {
    font-size: 14px;
  }
}
@media (min-width: 391px) and (max-width: 414px) {
  .testimonial-heading h1 {
    font-size: 28px;
  }

  .testimonial-item img {
    width: 65px !important;
    height: 65px !important;
  }
}
/*--------------------------------------------------------------
# Testimonial End
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Contact Start
--------------------------------------------------------------*/

.text-light-1 {
  color: #fd7e14;
}

.text-light-1:hover {
  color: #0492c2;
}
/*--------------------------------------------------------------
# Contact End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# FAQ'S Start
--------------------------------------------------------------*/
.faq {
  position: relative;
  overflow: hidden;
}

.faq::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../img/bg.png);
  object-fit: cover;
  z-index: -1;
}

.faq .faq-img {
  position: relative;
}

.faq .faq-img .faq-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

/*--------------------------------------------------------------
# FAQ'S End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Footer Start
--------------------------------------------------------------*/
.footer {
  background: var(--bs-dark);
}
.footer .footer-item a {
  line-height: 35px;
  color: white;
  transition: 0.5s;
  font-size: 15px;
  margin-top: 2px;
}

.footer .footer-item p {
  line-height: 35px;
  font-size: 15px;
  text-align: justify;
}

.footer .footer-item a:hover {
  letter-spacing: 1px;
  /* color: var(--bs-primary); */
  color: #0492c2;
}
.footer-item-post p {
  color: #0492c2;
}
.footer .footer-item-post a {
  transition: 0.5s;
}

.footer .footer-item-post a:hover {
  /* color: var(--bs-primary) !important; */
  color: white !important;
}

.footer .footer-item-post .footer-btn a {
  transition: 0.5s;
  background-color: #0492c2;
}

.footer .footer-item-post .footer-btn a:hover {
  color: var(--bs-dark);
}
.position-relative.mx-auto.rounded-pill {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.copyright a {
  color: #0492c2 !important;
}
.footer-item .position-relative {
  margin-top: 51px;
}
/* .footer-item .position-relative {
  display: flex;
  align-items: center;
  gap: 8px;
} */

/* input ياخد المساحة */
/* .footer-item .position-relative input {
  flex: 1;
  padding-right: 15px !important;
} */

/* الزر يرجع طبيعي بدل absolute */
/* .footer-item .position-relative button {
  position: static !important;
  margin: 0 !important;
  white-space: nowrap;
} */
/* .footer-item .position-relative {
  background: #fff;
  padding: 5px;
  border-radius: 50px;
}

.footer-item input {
  border: none;
  box-shadow: none !important;
} */
/* الكونتينر */
/* .email-box {
  max-width: 500px;
  width: 100%;
} */
/***بشكل احترافى**/
/* .email-box {
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  padding: 5px;
  background: #fff;
} */
/* input */
/* .email-box input {
  height: 55px;
  border: 2px solid #e0e0e0;
  padding-left: 20px;
  padding-right: 120px;  */
/* مساحة للزر */
/* font-size: 15px;
  border-radius: 50px;
  outline: none;
  transition: 0.3s;
} */

/* عند الضغط */
/* .email-box input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 8px rgba(13,110,253,0.2);
} */

/* placeholder */
/* .email-box input::placeholder {
  color: #999;
  font-size: 14px;
} */

/* الزر */
/* .email-box button {
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 50px;
  transition: 0.3s;
} */

/* hover */
/* .email-box button:hover {
  background: #0b5ed7;
} */
/* @media (max-width: 768px) {

  .email-box {
    max-width: 100%;
  } */

/* نخلي الزر تحت بدل ما يضغط على input */
/* .email-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
  } */

/* .email-box input {
    width: 100%;
    padding-right: 20px; /* نشيل مساحة الزر */
/* } */

/* .email-box button {
    width: 100%;
    position: static !important; /* مهم */
/* }
}  */
@media (max-width: 768px) {
  .footer-item h4,
  .footer-item-post h4 {
    font-size: 18px;
  }
  .footer-item .text-white h4 {
    margin-top: -2px;
  }
  .footer .footer-item a {
    margin-top: -2.5px;
  }

  .footer .footer-item-post .footer-btn a {
    font-size: 13px;
  }
  .footer-item a {
    font-size: 15px;
  }

  .footer-item p {
    font-size: 15px;
    line-height: 1.6;
  }
  .footer-btn .btn {
    /* font-size: 13px; */
    padding: 6px 14px;
    /* width: 60%;  */
    /* يخليه بعرض الشاشة */
    height: 40px;
    text-align: center;
  }

  .footer-btn .text-start a {
    margin-top: 1px;
  }
  /* Buttons slightly bigger than mobile */
  .d-flex .btn-md-square {
    width: 40px;
    height: 40px;
  }

  /* Keep layout but improve spacing */
  .position-relative.mx-auto.rounded-pill {
    display: flex;
    flex-direction: row; /* NOT column like mobile */
    gap: 10px;
    align-items: center;
    margin-top: -1px;
    margin-left: -5px;
  }

  .position-relative.mx-auto.rounded-pill input {
    width: 50%;
    height: 40px;
    margin-top: 2px;
  }

  .position-relative.mx-auto.rounded-pill button {
    width: 30%;
    height: 30px;
    position: static;
    margin: 0;
    border-radius: 30px;
    padding: 10px;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .footer-item h4 {
    font-size: 17px;
  }
  .footer-item-post h4 {
    font-size: 17px;
  }

  .footer-item a {
    font-size: 14px !important;
    /* line-height: 1.6; */
  }
  .footer-item p {
    font-size: 14px !important;
    line-height: 1.6;
  }
  .d-flex .btn-md-square {
    width: 10%;
    height: 35px;
  }
  .footer .footer-item-post .footer-btn a {
    font-size: 12px;
    padding: 12px 16px;
  }
  .position-relative.mx-auto.rounded-pill {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .position-relative.mx-auto.rounded-pill input {
    width: 100% !important;
    padding-right: 15px !important;
    text-align: left;
    height: 40px;
  }

  .position-relative.mx-auto.rounded-pill button {
    position: static !important;
    width: 100%;
    height: 40px;
    margin: 0;
    border-radius: 30px;
    padding: 10px;
  }
}
@media (max-width: 424px) {
  .footer-item h4 {
    font-size: 16px;
  }

  .footer-item p {
    font-size: 12.5px;
  }

  .position-relative.mx-auto.rounded-pill input {
    font-size: 13px;
    padding: 10px 12px;
  }

  .position-relative.mx-auto.rounded-pill button {
    font-size: 13px;
    padding: 10px;
  }
  /* .d-flex .btn-md-square {
    width: 12%;
    height: 35px;
  } */
}
@media (max-width: 375px) {
  .footer-item h4 {
    font-size: 16px;
  }

  .footer-item p {
    font-size: 12.5px;
  }
  .footer .footer-item-post .footer-btn a {
    font-size: 12px;
    padding: 10px 12px;
  }
  .position-relative.mx-auto.rounded-pill input {
    font-size: 13px;
    padding: 10px 12px;
  }

  .position-relative.mx-auto.rounded-pill button {
    font-size: 13px;
    padding: 10px;
  }
  .d-flex .btn-md-square {
    width: 12%;
    height: 35px;
  }
}
@media (max-width: 320px) {
  .footer-item h4 {
    font-size: 16px;
  }

  .footer-item p {
    font-size: 12.5px;
  }
  .footer .footer-item-post .footer-btn a {
    font-size: 12px;
    padding: 10px 12px;
  }
  .position-relative.mx-auto.rounded-pill input {
    font-size: 13px;
    padding: 10px 12px;
  }

  .position-relative.mx-auto.rounded-pill button {
    font-size: 13px;
    padding: 10px;
  }
  .d-flex .btn-md-square {
    width: 12%;
    height: 32px;
  }
}
/*--------------------------------------------------------------
# Footer End
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# copyright Start
--------------------------------------------------------------*/
.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--bs-dark) !important;
}
/*--------------------------------------------------------------
# copyright End
--------------------------------------------------------------*/
/*for login and registeration code*/

.user-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-welcome {
  background: #0dcaf0;
  color: white;
  padding: 4px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.5s ease-in-out;
  white-space: nowrap;
  /* يمنع كسر الاسم */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.custom-link {
  color: #0492c2; /* نفس درجة اللون الأزرق للفورم */
  transition: all 0.3s ease;
  font-size: 17px;
  margin-left: 5px;
}

.custom-link:hover {
  color: #0378a0; /* درجة أغمق قليلاً عند التمرير */
  text-decoration: underline !important; /* إضافة خط تحت الكلمة لتمييزها */
}

.registration-footer .custom-p {
  font-size: 14px;
  letter-spacing: 0.3px;
}
/* تنسيق زر الإغلاق لضمان ظهوره وعمله */
.custom-close-btn {
  position: absolute !important;
  right: 15px !important;
  top: 15px !important;
  z-index: 1060 !important;
  background-color: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  padding: 12px !important;
  cursor: pointer !important;
  pointer-events: all !important;
}
.custom-close-btn:hover {
  transform: rotate(90deg);
  transition: 0.3s;
  background-color: #f8f9fa !important;
}

/* تحسين وضوح الخطوط ومنع التشويش */
.form-control::placeholder {
  color: #adb5bd !important;
  opacity: 1 !important; /* لزيادة الوضوح */
}

@media (max-width: 768px) {
  .custom-close-btn {
    background-color: #eee !important;
    top: 10px;
    right: 10px;
  }
}

/*******************************/
/*for login and register for the same place*/
/* حاوية الأزرار لضمان المحاذاة */
#authArea {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* التنسيق العام لكلا الزرين */
#btn-register-main,
#btn-login-main {
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 25px;
  transition: all 0.3s ease;
  border-width: 2px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#btn-register-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4, 146, 194, 0.3);
  background: linear-gradient(135deg, #0378a0 0%, #025d7c 100%);
}

#btn-login-main:hover {
  background-color: #0492c2;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(4, 146, 194, 0.15);
}

/* زر الدخول هو الذي يكون مخفياً في البداية */
#btn-login-main {
  display: none;
}
/* تحسين الأزرار للهواتف */
@media (max-width: 576px) {
  #btn-register-main,
  #btn-login-main {
    padding: 8px 18px;
    font-size: 13px;
  }
}
#loginModal .form-control {
  position: relative;
  z-index: 5; /* يرفع الحقل فوق أي عناصر شفافة */
}
/* تنسيق منطقة "Password" و "Forgot Password" */
#loginModal .d-flex.justify-content-between {
  margin-bottom: 5px;
}

#loginModal .text-info {
  color: #0378a0 !important; /* لون أزرق BI متناسق مع التصميم */
  transition:
    color 0.3s ease,
    text-decoration 0.3s ease;
  font-size: 0.85rem;
}

#loginModal .text-info:hover {
  color: #0492c2 !important;
  text-decoration: underline !important; /* إضافة خط عند التمرير ليعرف المستخدم أنه رابط */
}

/* تنسيق رابط "Register Now" في أسفل الفورم */
#loginModal .text-center a.text-info {
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  position: relative;
  padding-bottom: 2px;
}

/* إضافة تأثير خط سفلي أنيق يظهر عند التمرير */
#loginModal .text-center a.text-info::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0492c2;
  transition: width 0.3s ease;
}

#loginModal .text-center a.text-info:hover::after {
  width: 100%;
}

/* تنسيق التسميات (Labels) لتبدو أكثر حدة واحترافية */
#loginModal .form-label {
  color: #444;
  letter-spacing: 0.2px;
}
/* تصغير عرض المودال الكلي */
#registrationModal .modal-dialog {
  max-width: 800px; /* يمكنكِ تقليل هذا الرقم (مثلاً 700px) لتصغيره أكثر */
  margin: 1.75rem auto;
}

/* إضافة حواف داخلية ليعطي انطباع بالصغر والتركيز */
#registrationModal .modal-content {
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  transform: scale(0.95); /* تصغير الحجم بنسبة بسيطة جداً ليكون أوضح */
}

/* للشاشات المتوسطة والكبيرة: التحكم في تقسيم المساحة */
@media (min-width: 768px) {
  #registrationModal .col-md-5 {
    padding: 40px !important; /* تقليل مساحة الجزء الأزرق */
  }
  #registrationModal .col-md-7 {
    padding: 30px 40px !important; /* تقليل مساحة فورم المدخلات */
  }
}

/* تقليل حجم الخطوط ليتناسب مع الحجم الصغير */
#registrationModal h3 {
  font-size: 1.5rem;
  margin-bottom: 20px !important;
}

#registrationModal .form-label {
  margin-bottom: 4px;
  font-size: 0.85rem;
}
/* إطار أحمر للخانات غير المكتملة عند الفحص */
#regForm input:invalid {
  border-color: #dc3545;
}

/* تأثير الاهتزاز عند الخطأ */
.shake-animation {
  animation: shake 0.5s;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
/* تنسيق رابط الانتقال للدخول */
#switch-to-login {
  color: #0378a0 !important; /* لون أزرق متناسق مع هوية BI */
  font-size: 0.9rem;
  position: relative;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  display: inline-block;
}

/* تأثير عند تمرير الماوس (Hover) */
#switch-to-login:hover {
  color: #0492c2 !important;
  transform: translateY(-1px); /* رفعة بسيطة جداً لإعطاء شعور بالتفاعل */
}

/* إضافة خط سفلي أنيق يتحرك من المنتصف */
#switch-to-login::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 50%;
  background-color: #0492c2;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}

#switch-to-login:hover::after {
  width: 100%; /* يتمدد الخط بالكامل عند تمرير الماوس */
}

/* إضافة لمسة خفيفة عند الضغط (Active) */
#switch-to-login:active {
  transform: scale(0.95);
  opacity: 0.8;
}
/* تنسيق خاص لزر الخروج يمنع التداخل */
#btn-logout-main {
  transition: all 0.3s ease;
  white-space: nowrap; /* يمنع النص من النزول لسطر جديد */
  font-size: 14px;
  padding: 5px 10px;
  margin-left: 20px;
}

/* في الشاشات الصغيرة جداً (الموبايل) */
@media (max-width: 576px) {
  #btn-logout-main {
    padding: 5px 12px;
    font-size: 12px;
    width: auto; /* يضمن عدم أخذ عرض الشاشة بالكامل إلا إذا أردت ذلك */
  }

  #user-name-display {
    font-size: 12px;
    display: block; /* يجعل الاسم في سطر منفصل فوق الزر في الموبايل */
    margin-bottom: 5px;
  }
}

/* شاشة الموبايل */
@media (max-width: 768px) {
  .welcome-badge {
    padding: 4px 10px;
    font-size: 12px;
  }
  .user-name-text {
    max-width: 80px; /* قص الاسم إذا كان طويلاً جداً في الموبايل */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .btn-logout {
    padding: 5px 10px;
    font-size: 12px;
  }
}
/* حاوية البطاقة الترحيبية */
.welcome-badge {
  display: none; /* يتم تغييره بواسطة JS */
  align-items: center;
  background: rgba(3, 120, 160, 0.08);
  border-radius: 50px;
  padding: 4px 12px 4px 6px;
  color: #0378a0;
  transition: all 0.3s ease;
  margin-left: 10px;
}
.welcome-badge:hover {
  /* background-color: #f6900b !important; */
  background-color: #f7631b !important;
  transition: 0.3s;
}
#user-control-panel {
  align-items: center;
}
/* تحسين شكل الزر في الموبايل */
@media (max-width: 768px) {
  #user-control-panel {
    margin-left: 10px !important;
    margin-right: 5px !important;
  }
}

/* دائرة الأيقونة داخل البطاقة */
.user-avatar-icon {
  width: 28px;
  height: 28px;
  background: #0378a0;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 12px;
}

.user-name-text {
  font-weight: 600;
  font-size: 14px;
  color: white !important;
  margin-left: 5px;
}
.user-name-text:hover {
  color: #f7631b !important;
}

/* زر الخروج (Exit) بتصميم عصري */
.logout-pill-btn {
  background: #0492c2;
  color: white;
  border: 1px solid #1451e1;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.logout-pill-btn:hover {
  background: #f7631b;
  color: white;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

/* التجاوب مع الموبايل */
@media (max-width: 576px) {
  .user-name-text {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .welcome-badge {
    padding: 3px 8px 3px 4px;
  }
}

/***Profile***/
.profile-card {
  border-radius: 20px;
  background: #f8f9fa;
}

.profile-avatar i {
  color: #0378a0; /* اللون الأزرق الخاص بكِ */
}

.btn-danger {
  background-color: #ff4d6d; /* لون زر الخروج الوردي الجذاب */
  border: none;
  border-radius: 10px;
  padding: 10px;
}

/* تنسيق الزر (الاسم والصورة) */
.dropdown-toggle {
  align-items: center;
  text-decoration: none !important;
  color: white !important;
  font-weight: 600;
  gap: 10px; /*مسافة بين الصورة والاسم */
  display: none;
  content: none !important;
}
.dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* حل إضافي في حال كان السهم يظهر كأيقونة */
.nav-link.dropdown-toggle::after,
.navbar-nav .dropdown-toggle::after {
  display: none !important;
}

@media (max-width: 991px) {
  /* يجعل الأزرار تظهر في صف واحد تحت الروابط عند فتح المنيو */
  #navbarCollapse .d-flex {
    flex-direction: row !important;
    padding-top: 10px;
    border-top: 2px solid #eee; /*اختياري: فاصل بسيط */
    width: 60%;
    justify-content: center !important; /* يوسط الأزرار في الموبايل */
  }
}
/* التأكد من أن الترتيب يعمل في الشاشات الكبيرة */
@media (min-width: 992px) {
  .navbar-collapse {
    display: flex !important;
    justify-content: space-between !important;
  }
}
#main-user-dropdown {
  margin-left: 15px;
  /* مسافة بسيطة عن العناصر المجاورة */
}
/* تنسيق صورة المستخدم الشخصية */
#nav-user-img {
  border: 2px solid #0378a0;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

#nav-user-img:hover {
  transform: scale(1.1); /* تكبير بسيط عند المرور بالماوس */
}
#user-initial-circle {
  transition:
    transform 0.2s,
    background-color 0.2s;
}

#user-initial-circle:hover {
  transform: scale(1.05);
  background-color: #0bb5d8 !important;
}

/* 1. تجعل الحاوية هي المرجع الوحيد للقائمة */
#user-name-display {
  position: relative !important;
  display: inline-block !important;
  margin-left: 30px !important; /*هذه هي المسافة التي طلبتِها لتبعد عن الأيقونات */
  z-index: 9999 !important; /* لضمان ظهورها فوق الهيدر */
  color: white;
  border: 1px solid rgb(6, 92, 205);
  background: #0492c2;
  padding: 0.5px 10px;
}
#user-name-display:hover {
  color: #f7631b;
}
#user-name-display::after {
  display: none !important;
}
#user-name-display .dropdown-menu {
  text-align: left !important;
  direction: rtl !important;
  left: auto !important;
  right: 0 !important;
  position: absolute !important;
  top: 60px !important; /*المسافة من الأعلى لتبدأ تحت الدائرة مباشرة */
  float: none !important;
  transform: none !important;
  background-color: white !important;
  display: none;
  border: 0 !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
  margin: 0 !important;
  z-index: 10000 !important;
}

#user-name-display .dropdown-menu.show {
  display: block !important;
}
#user-name-display .dropdown-item {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 10px 15px !important;
  direction: ltr !important;
  align-items: center !important;
}

#user-name-display .dropdown-item i {
  margin-right: 10px !important;
  margin-top: 4px;
}

#user-name-display .dropdown-header {
  text-align: left !important;
  direction: ltr !important;
}

/* جعل القائمة المنسدلة تفتح من جهة الشمال بشكل صحيح */
.dropdown-menu {
  left: 0 !important; /*يجبرها على البقاء جهة اليسار */
  right: auto !important;
  min-width: 100px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin-top: 0px !important;
  text-align: left;
  z-index: 9999;
  background-color: transparent;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
  direction: rtl;
}

.dropdown-item:hover {
  background-color: #45ccf9;
  color: white;
}

/* Overlay */
#videoOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* الفيديو */
.video-box {
  position: relative;
  width: 70%;
  max-width: 900px;
}

/* الأزرار */
.video-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10000;
}

.video-controls button {
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}

/******************
CSS For payment 
*******************/
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}

/*------------------------------------------------------------------
    Whatsappsection
-------------------------------------------------------------------*/
/* .whatsapp-float {
  position: fixed;
  bottom: 15px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: transform 0.3s ease;
} */

/* .whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #f7631b;
} */

/* .whatsapp-float img {
  width: 30px;
  height: 30px;
}
.whatsapp-float {
  position: fixed !important;
} */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 55px;
  height: 55px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #f7631b;
}

.whatsapp-float img {
  width: 28px;
  height: 28px;
}
.whatsapp-float {
  position: fixed !important;
}
@media (max-width: 600px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
  }

  .whatsapp-float img {
    width: 24px;
    height: 24px;
  }
}
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?nqex9k");
  src:
    url("fonts/icomoon.eot?nqex9k#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?nqex9k") format("truetype"),
    url("fonts/icomoon.woff?nqex9k") format("woff"),
    url("fonts/icomoon.svg?nqex9k#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-logo-4:before {
  content: "\e900";
}
.icon-spinner4:before {
  content: "\e97d";
}