/* ===== Fix: ثابت مسافة عناصر المنيو + دعم RTL ===== */

/* مسافة أفقية ثابتة لكل عنصر منيو */
.header_area .navbar .menu_nav > .nav-item {
  margin: 0 18px;               /* المسافة بين العناصر */
  white-space: nowrap;          /* يمنع تقطع الكلمات في العربية */
}

/* شدّد على رابط المنيو نفسه (ارتفاع/محاذاة موحّد) */
.header_area .navbar .menu_nav > .nav-item > .nav-link {
  line-height: 70px;            /* لو اللوجو كبير، خليه 70 مثل الثيم */
  padding: 0;                   /* نحافظ على تصميم الثيم */
  display: inline-block;
}

/* آخر عنصر لا يلزمه مسافة يمين إضافية */
.header_area .navbar .menu_nav > .nav-item:last-child {
  margin-right: 0;
}

/* RTL: عكس الهامش ليكون ثابتًا */
[dir="rtl"] .header_area .navbar .menu_nav > .nav-item {
  margin: 0 0 0 18px;
}

/* عند الشاشات الصغيرة نزيل المسافات الكبيرة حتى لا تتداخل في القائمة المنسدلة */
@media (max-width: 991px) {
  .header_area .navbar .menu_nav > .nav-item {
    margin: 0;                  /* قائمة الموبايل منسدلة بعرض كامل */
  }
  .header_area .navbar .menu_nav > .nav-item > .nav-link {
    line-height: 40px;          /* مطابق لقواعد الثيم للموبايل */
  }
}

.section-anim {
  opacity: 0;
  transform: translateX(80px); /* افتراض من اليمين */
  transition: all 0.8s ease-out;
}

.section-anim.from-left {
  transform: translateX(-80px); /* من اليسار */
}

.section-anim.show {
  opacity: 1;
  transform: translateX(0);
}

/*****/

.gallery_area {
  margin-top: 40px;
  background: linear-gradient(90deg, #f13d80 0%, #f48464 100%);
  padding: 120px 0;
}

.gallery_area .main_title h1 {
    color: #fff;
}

  @media (max-width: 991px) {
    .gallery_area {
      padding: 80px 0; } }

.gallery_area_top {
  padding-top: 60px; }
  @media (max-width: 991px) {
    .section_gap_top {
      padding-top: 30px; } }

.gallery_area_bottom {
  padding-bottom: 60px; }
  @media (max-width: 991px) {
    .gallery_area_bottom {
      padding-bottom: 30px; } }

/*****/

.square {
  position: relative; width: 100%; padding-top: 100%; overflow: hidden; border-radius:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  margin: 5px;
}
.square img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}
.square:hover img { transform: scale(1.04); }

.icon-stat {
  width: 50px !important;
}

/******/
.blog-thumb {
  position: relative; width: 100%; padding-top: 100%; overflow: hidden;
}

.photo-article {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}

.blog-details p,span {
  color:#000;
}

/******/

.team-photo {
  width: 100%;
  height: 350px;        /* اضبط الطول المناسب */
  object-fit: cover;    /* يقص الصورة مع الحفاظ على التناسب */
  object-position: center;
  border-radius: 8px;   /* اختياري - زوايا دائرية */
}

.post-cover {
  width: 100%;
  height: 250px;       /* 🟢 غيّر الارتفاع حسب ما تحب */
  object-fit: cover;   /* يجعل الصورة تغطي كامل المساحة بدون تمدد مشوه */
  border-radius: 6px;  /* اختياري: زوايا ناعمة */
}

/* السطر الأول: السعر المشطوب */
.old-price{
  text-decoration: line-through;
  opacity: .85;
  font-size: 13px;         /* أصغر من نص الزر */
  font-weight: bold;
  text-transform: none;    /* لا تحوله إلى uppercase */
  /*color: red;*/
}

.primary-btn  {
  line-height: 20px;
  padding: 10px 60px;
}

.whatsapp-btn {
  border-radius: 50px;
  padding: 7px 38px;
}


.hero-banner{
  position: relative; min-height: 62vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:#fff;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); /* لمسة بسيطة */
}
.hero-overlay{
  position:absolute; inset:0;
  /* ظل موحّد */
  background: rgba(0,0,0,.45);
  /* أو جراديانت أنيق (فعّل السطر التالي بدلاً من السابق) */
  /* background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); */
}
.hero-content{ position:relative; z-index:2; padding:2rem 1rem; }
.hero-title{
  font-size: clamp(28px, 5vw, 64px); line-height:1.1; font-weight:700; margin-bottom: .75rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.35); /* مزيد وضوح للعنوان */
}
.hero-sub{
  font-size: clamp(14px, 2.2vw, 20px); opacity:.95; margin-bottom:1.25rem;
}
.cta-wrap{ display:flex; gap:12px; justify-content:center; }

/* Slide team */

/* منع السلايد من التمدد */
.teamSwiper .swiper-slide {
  width: auto !important;
  flex: 0 0 auto;
}

/* 3 صور في الديسكتوب */
@media (min-width: 992px) {
  .teamSwiper .swiper-slide {
    width: calc((100% - 60px) / 3) !important;
  }
}

/* 2 صور في التابلت */
@media (min-width: 768px) and (max-width: 991.98px) {
  .teamSwiper .swiper-slide {
    width: calc((100% - 30px) / 2) !important;
  }
}

/* 1 في الموبايل */
@media (max-width: 767.98px) {
  .teamSwiper .swiper-slide {
    width: 100% !important;
  }
}

/* تصميم الكرت */
.single_member {
  /*background: #fff;*/
  border-radius: 14px;
  padding: 16px;
  /*box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);*/
  max-width: 320px;
  margin: auto;
  transition: transform 0.3s ease;
}
.single_member:hover {
  transform: translateY(-5px);
}

/* صورة الفريق */
.team-photo {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 12px;
}

/* تنسيق النص */
.author_decs h5 {
  font-weight: 600;
  margin-top: 10px;
}
.profession {
  color: #666;
  font-size: 0.95rem;
}

/* تحسين مظهر الأسهم */
.swiper-button-next,
.swiper-button-prev {
  color: #444;
  transition: color 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: var(--primary-color, #a7824a);
}


/* === شعار PERADI بجانب زر القائمة في الموبايل === */
.peradi-mobile-logo {
  height: 26px;
  display: inline-block;
  border-radius: 6px;        /* حواف خفيفة */
  background: #fff;          /* خلفية بيضاء ليظهر الشعار بوضوح */
  padding: 2px 4px;          /* تباعد بسيط داخل الخلفية */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* ظل خفيف */
}

@media (min-width: 992px) {
  .peradi-mobile-logo {
    display: none; /* إخفاء شعار PERADI في الشاشات الكبيرة */
  }
}

.navbar-toggler {
  border: none;
  background: transparent !important;
  outline: none;
  padding: 0 4px;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #333;
  margin: 4px 0;
  border-radius: 2px;
}