body {
  background-color: #F2EFED; /* لون بيج للخلفية */
}
/* تنسيق الجسم */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F2EFED; /* لون خلفية التحميل */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 1s ease 1.8s forwards; /* إخفاء بعد 3 ثوانٍ */
}

/* إضافة الشعار كخلفية */
body::after {
    content: "";
    background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,heigh=40...redirect,format=auto/gZnloV/EJHJwUkURmuLFzkpV48Z5cyRqOp9vqlhGeUxasnK.png); /* مسار صورة الشعار */
    background-size: 150px 150px; /* حجم الشعار */
    background-repeat: no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    z-index: 1001;
    animation: fadeOut 1s ease 1.5s forwards; /* إخفاء الشعار بعد 3 ثوانٍ */
}
/* حركة الإخفاء */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
        100% {
        transform: scale(3); /* زيادة الحجم إلى 110% */
    }
}

footer {
    background-color: #7d906a !important; /* لون الخلفية */
    color: #F2EFED !important; /* لون النص */
}

footer a {
    color: #F2EFED !important; /* لون الروابط */
}
footer a:hover {
    color: #cdc9e2 !important; /* لون الروابط عند التمرير عليها */
}
footer {
    background-color: #7d906a !important; /* استبدل هذا اللون باللون الذي تريده */
    color: #7d906a; /* لون النص داخل التذييل */
    padding: 0px; /* مساحة داخلية للتذييل */
}
/* تنسيق البطاقة الأساسية */
.s-product-card-content {
    background-color: #F2EFED ;
}
/* تنسيق عنوان المنتج */
.s-product-card-content h3 {
    font-size: 20px;
    color: #cdc9e2 ;
    margin: 10px 0;
    font-weight: bold;
    text-align: right;
}
/* زر إضافة إلى السلة */
.s-product-card-content button {
    padding: 10px 20px;
    background-color: #7d906a;
    color: #F2EFED ;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.s-product-card-entry {
    background-color: #F2EFED ; /* تغيير لون الخلفية */
}
.slide--cat-entry {
    width: 90%; /* عرض العنصر بالكامل */
    padding: 0; /* إزالة الحشوة الداخلية */
    background-color: rgba(125, 144, 106, 0); /* لون خلفية فاتح مع شفافية */
    border-radius: 15px; /* زوايا دائرية */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0); /* ظل خفيف */
    margin: 15px 10; /* إضافة مسافة بين العناصر (15 بكسل في الأعلى والأسفل) */
    overflow: hidden; /* منع أي جزء من الصورة من الخروج عن الحدود */
    transition: background-color 0.3s ease; /* تأثير الانتقال لتغيير اللون */
    border: none; /* إزالة الإطار */
}

/* تغيير لون الخلفية عند التمرير */
.slide--cat-entry:hover {
    background-color: rgba(205, 201, 226, 0); /* لون جديد عند التمرير (مثلاً: وردي) */
}

/* تنسيق الصورة داخل العنصر */
.slide--cat-entry img {
    width: 80%; /* تملأ الصورة عرض العنصر */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    object-fit: cover; /* يجعل الصورة تغطي العنصر بالكامل */
    border-radius: 10px; /* زوايا دائرية للصورة */
}
.slide--cat-entry {
    font-size: 16px; /* حجم النص */
    font-weight: bold; /* جعل النص عريض */
    color: #F2EFED ; /* لون النص */
    text-align: center; /* محاذاة النص في الوسط */
    line-height: 1.5; /* ارتفاع السطر */
    padding: 10px; /* حشوة حول النص */
    margin: 0; /* إزالة الهامش الافتراضي */
}

/* تأثيرات عند التمرير */
.slide--cat-entry:hover {
    color: #F2EFED; /* تغيير لون النص عند التمرير */
    text-decoration: underline; /* إضافة خط تحت النص عند التمرير */
}
.slide--cat-entry {
    position: relative; /* تأكد من أن العنصر في موضع نسبي */
    padding: 20px; /* إضافة حشوة حول النص */
    overflow: hidden; /* التأكد من عدم خروج الخط عن حدود المربع */
}
.slide--cat-entry {
    position: relative; /* تأكد من أن العنصر في موضع نسبي */
    padding: 1px; /* تقليل الحشوة داخل المربع لتقريب العناصر */
}
/* تغيير لون الصورة عند التمرير */
.slide--cat-entry:hover img {
    filter: grayscale(100%); /* جعل الصورة بالأبيض والأسود */
    /* يمكنك استخدام فلتر آخر مثل brightness أو sepia حسب التأثير المطلوب */
}
.home-slider__content {
    display: flex; /* استخدام Flexbox لتوزيع المحتوى */
    flex-direction: column; /* جعل المحتوى عمودياً */
    justify-content: center; /* محاذاة المحتوى في المنتصف عمودياً */
    align-items: center; /* محاذاة المحتوى في المنتصف أفقياً */
    padding: 20px; /* إضافة حشوة داخلية */
    background-color: rgba(255, 255, 255, 0)!important; /* خلفية بيضاء مع شفافية بسيطة */
    border-radius: 8px; /* إضافة زوايا دائرية */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف */
    margin: 0 auto; /* مراكزة العنصر في المنتصف */
    max-width: 1200px; /* تحديد أقصى عرض */
    position: relative; /* تأكيد موضع النسبي */
    overflow: hidden; /* التأكد من عدم خروج المحتوى عن الحدود */
}

/* خيارات تنسيق النص داخل المحتوى */
.home-slider__content h1 {
    font-size: 2.5rem; /* حجم خط العنوان */
    color: rgba(255, 255, 255, 0)!important; /* لون الخط */
    margin-bottom: 10px; /* مسافة بين العنوان وبقية المحتوى */
    text-align: center; /* محاذاة العنوان في المنتصف */
}

.home-slider__content p {
    font-size: 1.125rem; /* حجم خط الفقرة */
    color: rgba(255, 255, 255, 0)!important; /* لون الخط */
    margin: 0; /* إزالة الهوامش الافتراضية */
    text-align: center; /* محاذاة الفقرة في المنتصف */
}

/* خيارات إضافية لتنسيق الصورة في شريط التمرير */
.home-slider__content img {
    width: 100%; /* جعل الصورة تملأ العنصر بالكامل */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    border-radius: 20px; /* إضافة زوايا دائرية للصورة */
    margin-top: 15px; /* مسافة فوق الصورة */
}
.s-slider-nav-arrow {
    background-color: rgba(205, 201, 226, 0.2)!important; /* لون خلفية أزرق مع شفافية */
    color: rgba(205, 201, 226, 0.2)!important; /* لون النص أبيض */
 
    transition: background-color 0.6s ease; /* تأثير انتقال سلس عند التغيير */
    box-shadow: 0 2px 5pxrgba(205, 201, 226, 0.5);
    z-index: 20; /* وضع الزر فوق العناصر الأخرى */
}

.s-slider-nav-arrow {
    background-color: rgba(205, 201, 226, 0.2) !important; /* لون خلفية أزرق داكن عند التمرير */
}

.s-slider-nav-arrow { /* إذا كان هناك أي رمز SVG داخل الزر */
    width: 30px; /* عرض الرمز */
    height: 30px; /* ارتفاع الرمز */
    color: #7d906a !important ; /* لون الرمز أبيض */
}
.banner {
    position: none; /* وضع العنصر بالنسبة للعناصر الأخرى */
    width: 100%; /* جعل البانر بعرض كامل الصفحة */
    height: 400px; /* تحديد ارتفاع البانر */
    overflow: hidden; /* منع ظهور المحتوى خارج الحدود */
   border-radius: 0px;
    background-color: #f8f8f8; /* خلفية بلون فاتح */
}

.banner img {
    width: 100%; /* جعل الصورة تملأ عرض البانر بالكامل */
    height: 100; /* الحفاظ على نسبة العرض إلى الارتفاع */
    border-radius: 0px;
    display: block; /* إزالة الفراغات السفلية */
}

.banner-content {
    position: absolute; /* تحديد موضع محتوى البانر */
    top: 100%; /* محاذاة المحتوى من أعلى */
    left: 100%; /* محاذاة المحتوى من اليسار */
    transform: translate(-50%, -50%); /* محاذاة المحتوى في المنتصف */
    color: #ffffff; /* لون النص */
    text-align: center; /* محاذاة النص في المنتصف */
}

.banner-content h1 {
    font-size: 3rem; /* حجم خط العنوان */
    margin: 0; /* إزالة الهوامش الافتراضية */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* إضافة ظل للنص */
}

.banner-content p {
    font-size: 1.25rem; /* حجم خط الفقرة */
    margin-top: 10px; /* مسافة فوق الفقرة */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* إضافة ظل للنص */
}

.banner-button {
    margin-top: 0px; /* مسافة فوق الزر */
    padding: 0px 0px; /* حشوة داخلية للزر */
    background-color: #007bff; /* لون خلفية الزر */
    color: #ffffff; /* لون النص في الزر */
    border: none; /* إزالة الحدود الافتراضية */
    border-radius: 0px; /* زوايا دائرية */
    cursor: pointer; /* تغيير المؤشر عند التمرير فوق الزر */
    transition: background-color 0.3s; /* تأثير انتقال سلس */
}

.banner-button:hover {
    background-color: #0056b3; /* لون خلفية الزر عند التمرير */
}
.container {
    width: 100%; /* عرض كامل للشاشة */
    max-width: none; /* إزالة الحد الأقصى للعرض */
    padding: 0; /* إزالة الحشوات الداخلية إذا كانت موجودة */
    margin: 0; /* إزالة الهوامش */
}
.store-footer__inner {
    background-color: #7d906a !important; /* لون خلفية داكن */
    color: #ffffff; /* لون النص أبيض */
    padding: 20px 40px; /* حشوات داخلية للعنصر */
    display: flex; /* استخدام flexbox لتوزيع المحتوى */
    flex-wrap: wrap; /* السماح بالتفاف العناصر */
    justify-content: space-between; /* توزيع العناصر بالتساوي */
    align-items: center; /* محاذاة العناصر في المنتصف عموديًا */
}

.store-footer__inner a {
    color: #ffffff; /* لون الروابط أبيض */
    text-decoration: none; /* إزالة التسطير عن الروابط */
    transition: color 0.3s ease; /* تأثير الانتقال عند التمرير */
}

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

.store-footer__inner .footer-section {
    flex: 1 1 200px; /* تخصيص عرض مرن لكل قسم */
    margin: 10px; /* مسافة بين الأقسام */
}

.store-footer__inner h4 {
    font-size: 1.25rem; /* حجم خط العناوين */
    margin-bottom: 10px; /* مسافة أسفل العناوين */
}

.store-footer__inner p, .store-footer__inner li {
    font-size: 0.9rem; /* حجم خط النصوص */
    line-height: 1.6; /* ارتفاع الأسطر للنصوص */
    margin: 5px 0; /* مسافة بين الأسطر */
}

.store-footer__inner ul {
    list-style-type: none; /* إزالة نمط التعداد */
    padding: 0; /* إزالة الحشوات الداخلية */
    margin: 0; /* إزالة الهوامش */
}
.content {
    max-width: 1200px; /* تحديد عرض قصوى للمحتوى */
    margin: 0 auto; /* محاذاة المحتوى في منتصف الصفحة */
    padding: 20px; /* حشوات داخلية حول المحتوى */
    color: #F2EFED; /* لون النص */
    line-height: 1.6; /* ارتفاع الأسطر لتحسين قابلية القراءة */
    background-color: #7d906a; /* لون خلفية خفيف */
    border-radius: 0px; /* زوايا دائرية للحواف */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* إضافة ظل لطيف حول المحتوى */
}

.content h1, .content h2, .content h3 {
    color: #F2EFED; /* لون داكن للعناوين */
    margin-top: 20px; /* مسافة أعلى العناوين */
}

.content p {
    margin-bottom: 15px; /* مسافة أسفل الفقرات */
}

.content ul, .content ol {
    padding-left: 20px; /* حشوة يسارية لقوائم التعداد */
    margin-bottom: 15px; /* مسافة أسفل القوائم */
}

.content a {
    color: #007bff; /* لون الروابط */
    text-decoration: none; /* إزالة التسطير عن الروابط */
    transition: color 0.3s ease; /* تأثير سلس عند التمرير */
}

.content a:hover {
    color: #0056b3; /* تغيير لون الروابط عند التمرير */
}
.text-center {
    font-size: 24px; /* تحديد حجم النص */
    font-weight: bold; /* جعل النص عريض */
    line-height: 1.5; /* تحديد ارتفاع السطر لتحسين القراءة */
    color: rgba(0, 0, 0, 0); /* لون النص */
    margin: 10px 0; /* إضافة مسافة فوق وتحت النص */
    text-align: left; /* محاذاة النص لليسار */
    text-transform: uppercase; /* تحويل النص إلى أحرف كبيرة */
}
.bg-cover {
    size: 200px;
    font-size: 100px; /* تحديد حجم النص */
    line-height: 5; /* تحديد ارتفاع السطر لتحسين القراءة */
    background-color: #F2EFED!important; /* لون النص */
    margin: 0px 0; /* إضافة مسافة فوق وتحت النص */
    border: none !important; /* حذف الإطار */
    text-align: left; /* محاذاة النص لليسار */
    width: 100%;
    height: 100%;
    object-fit: contain; /* يمنع قص الصورة مع الحفاظ على تناسبها داخل العنصر *//* ارتفاع الصورة */
     background-repeat: no-repeat; /* يمنع تكرار الصورة */
    margin-left: 40px; /* إزاحة الصورة لليمين */
     background-size: 500px; /* يجعل الصورة بأكملها تظهر بدون قص */
     margin-right: 0px; /* إزاحة الصورة لليمين */
    margin-top: 0px; /* إزاحة الصورة لأسفل */
    text-transform: uppercase; /* تحويل النص إلى أحرف كبيرة */
}