/* تخصيص شكل البنرات */
.brand-item {
    width: 200px; /* توحيد حجم الصور */
    height: 150px; /* توحيد حجم الصور */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* لتأثير التحريك */
    margin: 0 auto;
}

/* التأثير عند المرور بالماوس */
.brand-item:hover {
    transform: scale(1.1); /* تكبير الصورة عند المرور */
}

/* تخصيص النص داخل البنرات */
.brand-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* لضمان بقاء الصورة متناسقة */
}

/* ترتيب البنرات في صفين تحت بعض */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* صفين */
    gap: 20px; /* المسافة بين البنرات */
    justify-items: center;
    margin-top: 20px;
}

/* تخصيص ترتيب العناصر على الجوال */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* صفين على الجوال */
    }

    .brand-item {
        width: 150px; /* تقليل حجم البنرات على الجوال */
        height: 120px;
    }
}
/* تخصيص شكل البنرات */
.banner-entry {
    border-radius: 50%; /* يجعل الصور دائرية */
    width: 150px; /* تحديد عرض البنر */
    height: 150px; /* تحديد ارتفاع البنر */
    background-size: cover; /* تأكد من أن الصورة تغطي المساحة بشكل جيد */
    background-position: center; /* محاذاة الصورة بشكل صحيح داخل الدائرة */
    display: block;
    margin: 0 auto;
    position: relative; /* ضروري لتحديد مكان النص داخل الصورة */
}

/* تخصيص النص داخل البنرات */
.banner-entry__text {
    position: absolute;
    bottom: 10px; /* وضع النص أسفل الصورة */
    left: 50%;
    transform: translateX(-50%); /* لضبط النص في المنتصف تمامًا */
    background-color: rgba(0, 0, 0, 0.5); /* خلفية مظللة للنص */
    color: white; /* لون النص أبيض لسهولة القراءة */
    padding: 5px;
    font-size: 14px; /* تكبير حجم النص إذا لزم الأمر */
    text-align: center; /* محاذاة النص في المنتصف */
    width: 100%;
    box-sizing: border-box; /* ضمان أن النص لا يتجاوز حدود الصورة */
}

/* ترتيب البنرات بشكل صفوف متعددة على الجوال */
.grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* يسمح للبنرات بالالتفاف على الجوال */
    gap: 20px; /* المسافة بين البنرات */
}

/* تعديل بنرات الجوال */
@media (max-width: 768px) {
    .banner-entry {
        width: 120px; /* تقليل حجم البنرات على الجوال */
        height: 120px;
    }
}

/* أكواد للصور الخاصة بالماركات التجارية */
.banner-entry[data-bg="https://cdn.salla.sa/form-builder/J4YqaxtBTtoF1nb8Mz81S67M4X1HqiqUSu3Mwr4l.jpg"] {
    background-image: url('https://cdn.salla.sa/form-builder/J4YqaxtBTtoF1nb8Mz81S67M4X1HqiqUSu3Mwr4l.jpg');
}

.banner-entry[data-bg="https://cdn.salla.sa/form-builder/xNwXqY7Yh4eQCB733KlEsp19vSojaYOYTjZSHhpM.jpg"] {
    background-image: url('https://cdn.salla.sa/form-builder/xNwXqY7Yh4eQCB733KlEsp19vSojaYOYTjZSHhpM.jpg');
}

.banner-entry[data-bg="https://cdn.salla.sa/form-builder/oiyEf2F20HBcfKcYztXl4H9g76wJTDAmZ38uO75S.jpg"] {
    background-image: url('https://cdn.salla.sa/form-builder/oiyEf2F20HBcfKcYztXl4H9g76wJTDAmZ38uO75S.jpg');
}

.banner-entry[data-bg="https://cdn.salla.sa/form-builder/shghlY20gytGYrqynXq49o6gUfm6KtZBOvQjuQBC.jpg"] {
    background-image: url('https://cdn.salla.sa/form-builder/shghlY20gytGYrqynXq49o6gUfm6KtZBOvQjuQBC.jpg');
}

.banner-entry[data-bg="https://cdn.salla.sa/form-builder/xFpppsbrZTtF1sH5lep3DDIRCYt3ybb2Kqkm8KkQ.jpg"] {
    background-image: url('https://cdn.salla.sa/form-builder/xFpppsbrZTtF1sH5lep3DDIRCYt3ybb2Kqkm8KkQ.jpg');
}
/* Add custom CSS styles below */ 
/* إخفاء عنصر السجل التجاري بالكامل */
salla-trust-badges.s-trust-badges-wrapper.dark.hydrated {
    display: none !important;
}



/* Add custom CSS styles below *//* تخصيص شكل البنرات */
.banner-entry {
    border-radius: 50%; /* يجعل الصور دائرية */
    width: 150px; /* تحديد عرض البنر */
    height: 150px; /* تحديد ارتفاع البنر */
    background-size: cover; /* تأكد من أن الصورة تغطي المساحة بشكل جيد */
    background-position: center; /* محاذاة الصورة بشكل صحيح داخل الدائرة */
    display: block;
    margin: 0 auto;
    position: relative; /* ضروري لتحديد مكان النص داخل الصورة */
}

/* تخصيص النص داخل البنرات */
.banner-entry__text {
    position: absolute;
    bottom: 10px; /* وضع النص أسفل الصورة */
    left: 50%;
    transform: translateX(-50%); /* لضبط النص في المنتصف تمامًا */
    background-color: rgba(0, 0, 0, 0.5); /* خلفية مظللة للنص */
    color: white; /* لون النص أبيض لسهولة القراءة */
    padding: 5px;
    font-size: 14px; /* تكبير حجم النص إذا لزم الأمر */
    text-align: center; /* محاذاة النص في المنتصف */
    width: 100%;
    box-sizing: border-box; /* ضمان أن النص لا يتجاوز حدود الصورة */
}

/* ترتيب البنرات بشكل صفوف متعددة على الجوال */
.grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* يسمح للبنرات بالالتفاف على الجوال */
    gap: 20px; /* المسافة بين البنرات */
}

/* تعديل بنرات الجوال */
@media (max-width: 768px) {
    .banner-entry {
        width: 120px; /* تقليل حجم البنرات على الجوال */
        height: 120px;
    }
}