/* تغيير خلفية الصفحة الرئيسية */
body {
    background-color: #f0f0f0; /* لون الخلفية */
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, rgba(240, 240, 240, 0.5) 20%, rgba(240, 240, 240, 0.5) 80%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 80%);
    background-size: 5px 5px; /* حجم الخلايا */
    color: #333; /* لون النص */
}

/* تغيير خلفية قسم المنتجات */
.product-container {
    background-color: #ffffff; /* تغيير لون خلفية قسم المنتجات */
}

/* تغيير خلفية قسم العنوان */
.header {
    background-color: #333333; /* لون خلفية العنوان */
    color: #ffffff; /* لون النص في العنوان */
}

/* تغيير خلفية قسم الفوتر */
.footer {
    background-color: #222222; /* لون خلفية الفوتر */
    color: #ffffff; /* لون النص في الفوتر */
}





/* تأكد من أن هذا الكود مُستخدم بشكل صحيح */
.product-add.add_to_cart_btn {
    background-color: #3d0c02 !important; /* لون الخلفية */
    color: #ffffff !important; /* لون النص */
    border: none !important; /* إزالة الحدود */
    padding: 10px 20px !important; /* الحشو */
    border-radius: 5px !important; /* زوايا مدورة */
    cursor: pointer !important; /* تغيير شكل المؤشر */
    transition: background-color 0.3s !important; /* تأثير الانتقال عند التحويم */
}

/* تأثير عند التحويم على الزر */
.product-add.add_to_cart_btn:hover {
    background-color: #5e2a1f !important; /* لون داكن عند التحويم */
}




.bg-promotion.clear.text-center {
    background-size: cover; /* لتغطية الحاوية بالكامل */
    background-repeat: no-repeat; /* منع تكرار الصورة */
    background-attachment: scroll; /* لجعل الصورة تتحرك مع الصفحة */
    background-position: center; /* توسيط الصورة */
}



.search input {
    background-color: #1A0000!important; /* لون الخلفية البني */
    color: #D3D3D3!important; /* لون النص الأبيض */
    padding: 10px; /* حشو داخلي */
    border-radius: 5px; /* زوايا مستديرة */
}


#search_form {
    display: none; /* إخفاء حقل البحث */
}


.container {
    justify-content: center; /* توسيط العناصر أفقياً */
    align-items: center; /* توسيط العناصر عمودياً */
    text-align: center; /* توسيط النص */
    height: 100%; /* تأكد من أن الحاوية تأخذ الارتفاع الكامل إذا كان ذلك ضروريًا */
}