/* Add custom CSS styles below */
/* - تغيير لون الخلفية: يجعل خلفية الصفحة بلون فاتح */
body#app.index{background-color:#ede9de!important}

/* - تصميم شريط التنقل: يعين لون النص أبيض #fff 
- وخلفية داكنة #1 d1d1d
. */
div#mainnav{color:#fff5d4;background:#7fc242}

/* - تغير لون النص عناصر القائمة الفرعية أسود
 */
.main-menu .sub-menu li {
    color: #136d37; /* اللون الأساسي */
    transition: color 0.3s ease; /* تأثير سلس عند التغيير */
}

.main-menu .sub-menu li:hover {
    color: #7fc242; /* اللون الجديد عند تمرير الماوس */
}

/* - تحسين أزرار ورموز معينة: يحدد لون بعض الأيقونات ليكون أبيض.
 */
header-btn_icon,.s-cart-summary-total{color:#7fc242!important}.

/* - تصميم الفوتر: يحدد لون خلفية التذييل (footer) ليكون رمادي داكن
 */
/*footer,footer{background-color:rgb(189 84 214)!important}*/

footer {
    background-color: #136d37!important;
}


/* - تغيير خلفية قسم الصور: يحدد لون الخلفية لهذا القسم بلون فاتح #fdf0cb.
 */
section.s-block.s-block--photos-slider
{background:#ede9de!important;margin-top:0!important}

/* - إزالة الهوامش والحشوات: يزيل الهوامش والحشوات من شرائح الصور.
 */
salla-slider.
photos-slider .swiper,salla-slider.photos-slider .swiper-slide{padding:0!important;margin:0!important}

/* - ضبط عرض الشرائح: يجعل عرض الشرائح بنسبة 100% من الحاوية.
 */
salla-slider.
photos-slider .swiper-slide{width:100%}

/* - تصميم خلفية صورة بانر: يجعل الخلفية شفافة.
 */
.banner--fixed img{background:#fff0}

/* - تنسيق العناوين باللغة العربية: يحدد لون النص للعناوين في الصفحات العربية (rtl)
 */
.s-reviews-header,.s-slider-block_title h2:where([dir="rtl"],[dir="rtl"] *){color:#fff5d4}

/* - تحسين تخطيط البانر الثابت: يضبط عرض الحاوية بنسبة 100% ويزيل الحشوات
 */

 section.s-block.s-block--fixed-banner.wide-placeholder .container{max-width:100%;padding:0
   
 }


/* تعديل الصور المتحركة لتتلائم مع حجم الشاشة  */

.swiper-slide, .swiper-slide-next {
    
    width: 100% !important;  
   }

 /*
.swiper-slide, .swiper-slide-next {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important; 
    height: auto !important;
    overflow: hidden !important;
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
}

*/