/* Add custom CSS styles below */ 


/* start first banner */
section:first-of-type {
    margin: 0!important;
}
section.s-block.s-block--photos-slider salla-slider.photos-slider .swiper-slide {
    width: 100%!important;
    padding: 0!important;
}
[dir=rtl] .carousel-slider .swiper {
    padding: 0!important;
}
/* start banner */
section:nth-child(1 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
    max-width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}
section.s-block.s-block--fixed-banner.wide-placeholder img {
    background-color: unset!important;
}
--------------------------

----------------
/* Categories Grid - شبكة الصور */

/* Categories Grid */

/* إعداد شبكة (Grid) تحتوي على ثلاث أعمدة بشكل افتراضي */
.s-block--banners .grid {
  grid-template-columns: repeat(0, 0fr)!important; /* تقسيم الشبكة إلى 3 أعمدة متساوية العرض */
}

/* تخصيص إعدادات الشبكة للعنصر الثالث (nth-of-type(3)) */
.s-block--banners:nth-of-type(3) .grid {
  grid-template-columns: repeat(0, 0fr)!important; /* تقسيم الشبكة إلى 3 أعمدة */
  padding: 0 0rem; /* إضافة مسافة padding على الجانبين الأيمن والأيسر للشبكة */
}

/* تحديد ارتفاع العناصر الداخلية للشبكة */
.s-block--banners .banner-entry {
  height: 255px!important; /* ضبط ارتفاع العنصر ليكون 255px */
}

/* تغييرات على ارتفاع العنصر عند عرض الشاشة أقل من 992px */
@media (max-width: 992px) {
  .s-block--banners .banner-entry {
    height: 200px!important; /* خفض ارتفاع العنصر إلى 200px على الشاشات المتوسطة */
  }
}

/* تغييرات على ارتفاع العنصر عند عرض الشاشة أقل من 480px */
@media (max-width: 480px) {
  .s-block--banners .banner-entry {
    height: 100px!important; /* خفض ارتفاع العنصر إلى 100px على الشاشات الصغيرة */
  }
}

/* تخصيص الخلفية للعناصر التي تحتوي على الفئة lazy__bg */
.s-block--banners .lazy__bg {
  background-size: contain!important; /* ضبط حجم الخلفية بحيث تكون بحجم المحتوى */
  background-repeat: no-repeat!important; /* منع تكرار الخلفية */
}

/* تخصيص إعدادات العنصر الأول في الشبكة ذات الصفين (two-row) على الشاشات الأكبر من 640px */
@media (min-width: 640px) {
  .two-row .banner-entry:first-child {
    grid-row: span 0 / span 0!important; /* جعل العنصر الأول يشغل صفًا واحدًا فقط */
  }
}
.sicon-menu:before {
    filter: brightness(0.0) invert(1)!important;
}
/* -------------------- */
/* start banner */
section:nth-child(2 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
    max-width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}
section.s-block.s-block--fixed-banner.wide-placeholder img {
    background-color: unset!important;
}
/* -------------------- */
/* start banner */
section:nth-child(3 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
    max-width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}
section.s-block.s-block--fixed-banner.wide-placeholder img {
    background-color: unset!important;
}
/* -------------------- */
/* start banner */
section:nth-child(4 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
   max-width: 100%!important;
    margin: 0!important;
    padding: 0!important; 
}
section.s-block.s-block--fixed-banner.wide-placeholder img {
    background-color: unset!important;
}/* -------------------- */
/* start banner */
section:nth-child(5 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
    max-width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}
section.s-block.s-block--fixed-banner.wide-placeholder img {
    background-color: unset!important;
}/* -------------------- */
/* start banner */
section:nth-child(6 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
    max-width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}
section.s-block.s-block--fixed-banner.wide-placeholder img {
    background-color: unset!important;
}
/* -------------------- */
/* start banner */
section:nth-child(7 of .s-block.s-block--fixed-banner.wide-placeholder) .container {
    max-width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}
section.s-block.s-block--fixed-banner.wide-placeholder img {
    background-color: unset!important;
}
/* -------------------- */

/* تغيير الخلفية الخاصة بالصفحة بأكملها */
body {
    background-color: #FDF5F3 !important;  /* استبدل اللون بـ الكود الذي ترغب فيه */
}

/* تغيير الخلفية الخاصة بمنطقة الهيدر */
header, .site-header {
    background-color: #FDF5F3 !important;  /* استبدل اللون بـ الكود الذي ترغب فيه */
}

/* تغيير الخلفية الخاصة بالمحتوى الرئيسي */
.main-content, .store-wrapper {
    background-color: #FDF5F3 !important;  /* استبدل اللون بـ الكود الذي ترغب فيه */
}
/* -------------------- */
.map-sec iframe {
    width: 100%;
    height: 450px; /* يمكنك تعديل الارتفاع حسب الحاجة */
    border: none;
}
/* -------------------- */
.responsive-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .responsive-image {
        max-width: 200px;
    }
/* تأكيد ظهور الأيقونات في جميع أحجام الشاشات */
.sicon-menu:before {
    filter: none !important; /* إزالة أي فلاتر قد تخفي الأيقونات */
    display: inline-block !important; /* ضمان عرض الأيقونات */
    color: #000000 !important; /* تعيين لون الأيقونات إلى الأسود إذا كانت تعتمد على اللون */
}

/* جعل لون النص أسود في جميع العناصر */
body, 
body * {
    color: #000000 !important;
}

/* تعديل الأيقونات إذا كانت تعتمد على صورة أو SVG */
.sicon-menu img,
.sicon-menu svg {
    width: 24px!important; /* تعيين حجم مناسب للأيقونات */
    height: 24px!important;
    fill: #000000!important; /* تعيين لون تعبئة الأيقونات إذا كانت SVG */
}

/* ضمان استجابة الأيقونات في الشاشات الصغيرة */
@media (max-width: 768px) {
    .sicon-menu:before {
        /* أي تعديلات إضافية للأيقونات على الشاشات الصغيرة يمكن إضافتها هنا */
        width: 20px!important;
        height: 20px!important;
    }
    
    /* تعديل حجم النص إذا لزم الأمر */
    body, 
    body * {
        font-size: 16px !important; /* ضبط حجم الخط حسب الحاجة */
    }
}