/* Add custom CSS styles below */ 
/* تغيير لون شريط البحث */

/* إخفاء جزء تواصل معنا */
.s-contacts s-contacts-header hydrated {
  display: none;
}
.s-contacts-topnav-link {
  display: none;
}
/* لون الخط عند الكتابة في البحث */
 .s-search-input {
    color: #0d0d0d;
}
/* لون: أدخل كلمة البحث */
.s-search-input::placeholder {
    color: #0d0d0d;
}
/* لون: أيقونة البحث */
.s-search-icon svg {
    height: 1rem;
    width: 1rem;
    fill: #0b0b0d;
}
/*لون: خلفية شريط البحث / سمك ولون حدها الأسفل */
.top-navbar {
     background-color: #0d0d0d;
     border-bottom-width: 0.002rem;
     border-bottom-color: #0d0d0d;
}
/* لون، حجم خط: مميزات المتجر */
.s-block--features__item h4 {
    font-size: 22px;
    color: #0d0d0d;
}
/* لون: العملة بجانب البحث */
.btn--rounded-gray > span {
    color: #0b0b0d;
}
/* لون: تواصل معنا */
.topnav-link-item{
    color: silver;
}
 /* لون: خلفية المتجر */
.bg-gray-50 { 
     background-color: #f2f2f2;
}
/* لون: كلمة القائمة الرئيسية على الهاتف */
.mm-spn.mm-spn--light {
    color: #ebebeb;
    background: #0b0b0d;
}

/* حجم، وضعية، انحناء الزوايا: مميزات المتجر  */
.s-block--features__item {

    align-items: center;
    border-radius: 20 rem;
}

/* لون زر الاقفال في القائمة الرئيسية على الهاتف */
.btn--close-sm {
    background-color: #0b0b0d;
}
/*لون وحجم خط: الثمن الاجمالي للمشتريات */
.s-cart-summary-total {
    font-weight: 600;
    color: #ffffff;
}
/*لون : أيقونات الهيدر و حيزها */
.header-btn__icon {
    color: #CD9444;
    border-color: #0d0d0d;
}

/*لون : القيمة في سلة المشتريات */
.s-cart-summary-count {
    background-color: #CD9444;
}
/*لون : العناوين القائمة الرئيسية */
.main-menu {
    color: white;
}
/*لون : التخفيضات */
.main-menu #offers a {
    color: #CD9444;
}
/*لون : شريط القائمة الرئيسية */
.bg-inherit {
    background-color: #0d0d0d;
}
/*لون : الفاصل تحت شريط القائمة الرئيسية */
.main-nav-container {
    background-color: #0b0b0d;
}
/*لون : أيقونة القائمة الرئيسية */
.sicon-menu:before {
    color: white;
}
/*لون : العناوين الفرعية القائمة الرئيسية */
.main-menu .sub-menu {
    color: #0b0b0d;
}

/* تغير لون القوائم الداخلية عند وضع الماوس */
.main-menu .has-children .has-children:hover>a, .main-menu .has-children li a:hover {
    background-color: #f2f2f2;
    color: #CD9444;
}
/* استدارة حواف البانر */
.banner--fixed img {
    border-radius: 0rem;

}



/*   تغير لون عناوين القائمة الرئيسية عند وضع الماوس عليها */
.main-menu > .has-children:hover > a {
  color: #CD9444;
}


.s-slider-block__title h2 {
  padding-right: 2rem;
}
.main-menu li.root-level:hover >a {
  color: #CD9444;
}
.justify-end {
  padding-left: 1rem;
}
  text-align: center;
}
//////////////////
/*   وضع الشعار أسفل الفوتر */
.store-footer {
    position: relative;
    background-color: #0d0d0d; /* تأكد من مطابقة لون الخلفية */
    padding: 50px 0; /* زيادة المسافة لتناسب الشعار */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.store-footer::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px; /* يمكنك ضبط المسافة العلوية حسب الحاجة */
    left: 50%;
    transform: translateX(-50%);
    background: url('https://cdn.salla.sa/cdn-cgi/image/format=auto/bpvVN/Gb1NUsZEr5HZ0K6JI0xkxPSv2wm7FAn28Vil5Kqn.png') no-repeat center center;
    background-size: contain;
    width: 200px; /* عرض الشعار */
    height: 200px; /* ارتفاع الشعار */
}

.store-footer__inner {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 220px; /* لإعطاء مساحة للشعار */
}



.footer-is-light .store-footer {
    background-color: #0d0d0d;

}



.container grid grid-col-1 lg:grid-cols-6 gap-8 lg:gap-6{
    display: grid;
}
.store-footer h3 {
    color: #fff;
    background: #0d0d0d;
    border-radius: 8px;
    font-weight: bold;
    padding-top: 0.3rem;
    width: 100%;
    padding-bottom: 0.3rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
/////////////////
.store-footer__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px; /* المسافة بين العناصر */
    padding: 40px 0; /* تعديل المسافة العلوية والسفلية */
    background-color: #f9f9f9; /* تأكد من مطابقة لون الخلفية */
}

.store-footer__inner .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px; /* المسافة بين الأعمدة */

}

.store-footer__inner .container > div {
    flex: 1 1 30%;
    text-align: center;
    margin-bottom: 20px; /* تعديل المسافة السفلية بين الأقسام */
}

.store-footer__inner .container > div h3 {
    margin-bottom: 20px; /* تعديل المسافة السفلية بين العنوان والمحتوى */
}

.store-footer__inner .container > div p,
.store-footer__inner .container > div a,
.store-footer__inner .container > div .s-contacts-list,
.store-footer__inner .container > div .s-menu-footer-list {
    margin: 0 auto; /* توسيط المحتوى داخل العمود */
}

///////////////////

.s-block--features__item {
    background-color: var(--color-primary);
    padding: 2rem;
    border-radius: 200px 40px 200px 40px/10px 200px 10px 200px;
}
//////////////////////////////////////////////
/* ضبط القسم بأكمله ليكون بعرض الشاشة */
.s-block--fixed-banner {
  width: 100%; /* عرض القسم بالكامل */
  margin: 0; /* إزالة أي هامش قد يكون موجود */
  padding: 0; /* إزالة أي حشوة قد تكون موجودة */
  overflow: hidden; /* لإخفاء أي محتوى خارج الحدود */
  display: flex; /* استخدام flex لتسهيل محاذاة المحتوى داخلياً */
  justify-content: center; /* محاذاة المحتوى في الوسط */
  align-items: center; /* محاذاة المحتوى رأسياً في المركز */
}

/* ضبط الحاوية الداخلية لتكون بعرض الشاشة */
.s-block--fixed-banner .container {
  width: 100%; /* عرض الحاوية بالكامل */
  max-width: 100%; /* التأكد من عدم وجود حدود على العرض */
  padding: 0; /* إزالة أي حشوة قد تكون موجودة */
  margin: 0 auto; /* محاذاة الحاوية في الوسط */
}

/* ضبط البانر ليكون بحجم الحاوية */
.banner--fixed {
  width: 100%;
  height: auto; /* يجعل الصورة تتكيف مع عرض الشاشة */
  max-height: 100%; /* تقييد الارتفاع الأقصى للصورة */
  display: block; /* منع وجود مساحة بيضاء حول الصورة */
}

/* ضبط الصورة داخل البانر */
.banner--fixed img {
  width: 100%;
  height: auto; /* يجعل الصورة تتكيف بشكل ديناميكي مع حجم الشاشة */
  object-fit: cover; /* تغطية الصورة بالكامل للبانر مع الحفاظ على نسبة الأبعاد */
  display: block; /* منع وجود مساحة بيضاء حول الصورة */
}
/* إزالة المسافة بين الهيدر والبانر العلوي */
.store-header {
  margin-bottom: 0; /* إزالة أي هامش سفلي من الهيدر */
  padding-bottom: 0; /* إزالة أي حشوة سفلية من الهيدر */
}

/* ضبط البانر ليكون متصلاً مباشرة بالهيدر */
.s-block.s-block--fixed-banner.wide-placeholder {
  margin: 0; /* إزالة أي هوامش قد تكون موجودة */
  padding: 0; /* إزالة أي حشوات قد تكون موجودة */
}

/* تعديل الحاوية الداخلية إن وجدت أي حشوات */
.s-block.s-block--fixed-banner.wide-placeholder .container {
  margin: 0; /* إزالة أي هوامش داخلية قد تكون موجودة */
  padding: 0; /* إزالة أي حشوات داخلية قد تكون موجودة */
}
////////////////////////
/* استهداف الحاوية الداخلية للـ footer */
.store-footer__inner {
  background-color: #0d0d0d; /* تعيين لون الخلفية ليكون داكن */
  color: #fff; /* تعيين لون النص ليكون فاتح */
}

/* تعديل ألوان النصوص */
.store-footer__inner h3,
.store-footer__inner p,
.store-footer__inner a {
  color: #fff; /* تحويل لون النصوص إلى الأبيض */
}

/* تعديل لون الروابط عند التحويم */
.store-footer__inner a:hover {
  color: #ccc; /* تحويل لون الروابط عند التحويم إلى رمادي فاتح */
}

/* تعديل الأيقونات */
.store-footer__inner .s-social-icon,
.store-footer__inner .s-contacts-icon {
  fill: #fff; /* تحويل لون الأيقونات إلى الأبيض */
}

/* إعدادات إضافية للأيقونات عند التحويم */
.store-footer__inner .s-social-icon:hover,
.store-footer__inner .s-contacts-icon:hover {
  fill: #ccc; /* تحويل لون الأيقونات عند التحويم إلى رمادي فاتح */
}

/* تعديل ألوان الخلفيات داخل الحاويات */
.store-footer__inner .container {
  background-color: #0d0d0d; /* تعيين لون الخلفية ليكون داكن */
}

/* تعديل حاوية الروابط لتتناسب مع الألوان الداكنة */
.store-footer__inner .s-menu-footer-list {
  background-color: #0d0d0d; /* تعيين لون الخلفية ليكون داكن */
}

/* تعديل حاوية وسائل التواصل الاجتماعي */
.store-footer__inner .s-social-list {
  background-color: #0d0d0d; /* تعيين لون الخلفية ليكون داكن */
}

/* إعداد ألوان الأيقونات والنصوص داخل وسائل التواصل */
}.store-footer__inner .s-social-link a {
  color: #fff; /* تعيين لون النصوص داخل وسائل التواصل ليكون أبيض */
}
.container grid grid-col-1 lg:grid-cols-6 gap-8 lg:gap-6 {
  background-color: #0d0d0d; /* تعيين لون الخلفية ليكون داكن */
  color: #fff; /* تعيين لون النص ليكون فاتح */
}
.store-footer__inner .container > div h3 {
    margin-bottom: 20px;
    background-color: #131313;
    color: #c9c9c9;
}

.slide--cat-entry i {
    display: none;
}
.slide--cat-entry h2 {
    font-size: medium;
}

.s-user-menu-trigger * {
    background-color: #0d0d0d;;
}
.s-user-menu-trigger {
    background-color: #0d0d0d;;
}
a.slide--cat-entry {
    height: 4rem;
}

 .banner-entry p {
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
}
.banner-entry p.visible {
    opacity: 1;
}
.banner__title {
    color: white;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.banner__title.visible {
    opacity: 1;
}




.s-menu-footer-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important; /* المسافة بين الروابط */
}

@media (max-width: 767px) {
  .grid.md\:grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}