/* ==============================
   1- إعدادات أيقونات Lord Icon
============================== */
lord-icon.flex.m-auto {
    --lord-icon-primary: #000 !important;
    --lord-icon-secondary: #fff !important;
    --lord-icon-primary-base: #000 !important;
    --lord-icon-secondary-base: #fff !important;
}
/* ============================
   📱 موبايل (الهوم بيج بس)
============================ */
@media (max-width: 767px) {
  body.index::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110vh; /* غطّي أول سكشنين */
    background-image: url("https://i.ibb.co/tT8kwwGh/ondes-sombres-abstraites-avec-des-ombres-de-gradient-texturees-2-3.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: -1;
  }
}

/* ============================
   💻 ديسكتوب (الهوم بيج بس)
============================ */
@media (min-width: 1024px) {
  body.index::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180vh; /* ممكن تزود أو تقلل حسب طول أول سكشنين */
    background-image: url("https://i.ibb.co/tT8kwwGh/ondes-sombres-abstraites-avec-des-ombres-de-gradient-texturees-2-3.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: -1;
  }
}


/* خلفية الكونتينر */
div#contain {
    background-color: #2A3479;
}

/* ==============================
   2- تنسيقات خاصة بالديسكتوب (شاشات كبيرة)
============================== */
@media (min-width: 1024px) {
  .vedio_banner_innen.flex.items-start.justify-between.gap-4 { 
    padding-right: 300px; 
  
  }
.md\:w-\[60\%\].w-\[80\%\].flex.items-center.justify-center.flex-col.text-center.my-5.md\:my-0.mx-auto.sal-animate {
height : 800px ; 
}
h1.text-2xl.md\:text-\[32px\].font-bold.mb-4.md\:mb-6 {
    font-size: 52px !important;
}
p.text-base.md\:text-\[22px\].opacity-50.font-normal.mb-4.md\:mb-9 {
    font-size: 22px;
}
}

/* ==============================
   3- التحكم في المسافات بين السيكشنات
============================== */
section.featured-products-slider.mb-8.md\:mb-14.featured-products-slider--4.has-slider.sal-animate,
section.featured-products-slider.mb-8.md\:mb-14.featured-products-slider--8.has-slider.sal-animate {
    margin-top: 40px; 
}

/* ==============================
   4- إعدادات البانر الأساسي
============================== */
section.s-block.s-block--fixed-banner.wide-placeholder:nth-of-type(1) > .container {
    margin-top: 0;
    max-width: 100%;
}

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

section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
    margin-top: 0;
    height: 100%;
    overflow: hidden;
}

/* ==============================
   5- ألوان النصوص العامة
============================== */
.inner.bg-inherit {
    color: white; 
}

/* ==============================
   6- القائمة الفرعية (Sub Menu)
============================== */
.sub-menu.w-56 {
    color: black !important; 
}

/* الروابط داخل القائمة الفرعية */
.sub-menu a span {
    color: #000 !important;
    text-shadow: none !important;
    transition: none !important;
}

/* إلغاء الهوفر على الروابط الفرعية */
.sub-menu a:hover span {
    color: #000 !important;
    text-shadow: none !important;
    transform: none !important;
    background: transparent !important;
}

/* ==============================
   7- أيقونات الهيدر + العربة
============================== */
.header-btn__icon,
.s-cart-summary-icon,
.icon {
    color: #fff !important;
    transition: all 0.3s ease-in-out;
}

/* عند الهوفر */
.header-btn:hover .header-btn__icon,
.s-cart-summary-wrapper:hover .s-cart-summary-icon,
.s-cart-summary-wrapper:hover .icon {
    color: #ff4d4d !important;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
    transform: scale(1.1);
}

/* ==============================
   8- روابط النافبار الرئيسية
============================== */
.main-menu a span {
    color: #fff;
    transition: all 0.3s ease;
}

/* عند الهوفر */
.main-menu a:hover span {
    color: #ff4d4d;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
    transform: scale(1.05);
}

/* ==============================
   9- أزرار مميزة (البانر)
============================== */
a.fbanner-star-btn.py-\[8px\].px-\[25px\].md\:py-\[10px\].md\:px-\[40px\] {
    border-radius: 25px;
}

/* ==============================
   10- نصوص المنتجات (العنوان + السعر)
============================== */
.s-product-card-content-title a,
.s-product-card-price {
    color: #fff !important;
    transition: color 0.3s ease, transform 0.3s ease;
}

.s-product-card-content-title a:hover {
    color: #f0f0f0 !important;
    transform: scale(1.05);
}

/* ==============================
   11- أزرار أسفل الكارد (عرض المزيد + السلة)
============================== */
.s-product-card-content-footer .s-button-text span,
.s-product-card-content-footer i {
    color: #444 !important;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* عند الهوفر */
.s-product-card-content-footer .s-button-text span:hover,
.s-product-card-content-footer i:hover {
    color: #000 !important;
    transform: scale(1.1);
}

/* ==============================
   12- الشعار (اللوجو) في الديسكتوب
============================== */
@media (min-width: 480px) {
    .navbar-brand img {
        max-height: 84px;
        max-width: 170px;
    }
}

/* ==============================
   13- ستايل الكارد للموبايل (خلفية غامقة)
============================== */
@media (max-width: 767px) {
  .s-product-card-content {
    background: #2A3479;
    border-radius: 12px;
    padding: 12px;
  }

  .s-product-card-content-title a,
  .s-product-card-price {
    color: #fff !important;
  }
}

/* ==============================
   14- تحسين عرض الموبايل
============================== */
@media (max-width: 767px) {
  .s-products-slider-card {
      max-width: 185px;
  }
  .main-nav-container {
      min-height: 56px;
  }
  .s-button-element:not(:disabled):not([loading]) {
      font-size: 11px;
  }
p.text-base.md\:text-\[22px\].opacity-50.font-normal.mb-4.md\:mb-9 {
    font-size: 12px !important;
}

}

.md\:w-\[60\%\].w-\[80\%\].flex.items-center.justify-center.flex-col.text-center.my-5.md\:my-0.mx-auto.sal-animate {
justify-content: center;
    align-items: flex-start;
}
h1.text-2xl.md\:text-\[32px\].font-bold.mb-4.md\:mb-6 {
 
   font-size: 17px;
}
.inner.bg-inherit {
    background-color: white;
}
/* أي نص داخل الموبايل منيو */
#mobile-menu,
#mobile-menu * {
  color: #2A3479 !important;
}
/* 🎨 تغيير لون كل الأيقونات في الهيدر */
.header-left .header-btn__icon,
.header-left .s-cart-summary-icon,
.header-left .icon,
.header-left svg path {
  color: #2A3479 !important;
  fill: #2A3479 !important; /* للأيقونات الـ SVG */
}
.s-product-card-sale-price {
    color: white;
}
.s-product-card-sale-price h4 {
    color: #05FF02 !important;
}
.relative.w-\[170px\].h-\[340px\].md\:w-\[350px\].md\:h-\[500px\].shrink-0.sal-animate {
display : none ; 
}