/* Add custom CSS styles below */ 

/* --- الخطوط الأساسية والخطوط المخصصة --- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap');

/* تطبيق خط "Cairo" على جميع عناصر body ما عدا الأيقونات */
body :not(i) {
    font-family: cairo, sans-serif;
}
img[alt*="متجر بندر bndrstore logo"] {
  width: 150px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

/* --- تنسيقات الجسم والخلفية العامة --- */
body {
    background-size: cover!important;
    /* تعيين لون خلفية الصفحة الرئيسي */
    background: #f4f4f4;
}


/* --- المتغيرات الأساسية (Root Variables) --- */
/* تعريف متغيرات CSS الجذرية (root) للألوان والشعار */
:root {
    --main-color: rgba(186, 154, 119, 0.5);
    --color-primary: #ad8f47; /* لون أساسي */
    --second-color: #ECE3D9;
    --white-color: #fff;
    --black-color: #054449;

    /* متغيرات إضافية للألوان والشعار */
    --color-primary-dark: #876921; /* لون أساسي داكن */
    --color-primary-light: #d3b56d; /* لون أساسي فاتح */
    --color-primary-reverse: #edf5ff; 
    --1: #ad8f47;
    --2: #1e1b2e;
    --2-2: #ad8f476e;
    --3: #edf5ff;
    --4: #3b3b39;
    --4-4-4: #20201f;
    --4-4: #3131309c;
    --logo: url("https://cdn.salla.sa/DAQxj/q9Yzba87hliK3DeBZzP3wGnDy8qvp3gR4ncwOjGm.png");
}
/*
 * تعريف متغيرات CSS الجذرية (root)
 * تحتوي على ألوان رئيسية، وألوان مخصصة، وعنوان URL لشعار.
*/

.top-navbar {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    background-color: #c8b097; /* اللون */
}
  /* لون خلفية العنصر، مع تأثير بلوري */

.main-nav-container.fixed-header .inner {
  background-color: var(--main-glass-color);


  backdrop-filter: blur(12px) saturate(150%) contrast(120%);
  -webkit-backdrop-filter: blur(12px) saturate(150%) contrast(120%); /* لدعم Safari */


  /* انتقالات سلسة عند تطبيق أو إزالة التأثيرات */
  transition: background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
  /* نهاية التأثير البلوري */

		
		.s-product-card-vertical .s-product-card-wishlist-btn button {
			background-color: unset!important;
		}

.mm-ocd--open .mm-ocd__content {
    background: var(--second-color)
}



.mm-spn.mm-spn--navbar:after {
    opacity: 1
}
 /*
.mm-spn li a,
.mm-spn li span {
    color: var(--main-color)!important
}
*/

/* القائمة الجانبية */
:is([dir=rtl] .mm-spn.mm-spn--navbar.mm-spn--main):after {
    border: none!important;
    background: #054449;
    color: var(--white-color);
    font-weight: 800!important;
    text-align: right
}
.mm-spn.mm-spn--navbar ul {
    background-color: #054449; 
}

.header-container.container p.da-tm.hidden.text-xl.md\:block.ms-1,
.mm-spn li a,
.mm-spn li span,
ul.main-menu.hide-scroll.mm-spn--open h5.menu_title {
    font-weight: 800!important;
    color: #be996b;
}

/* إزالة الخطوط السفلية أو العلوية من عناصر القائمة الجانبية */
.mm-spn li,
.mm-spn li a,
.mm-spn li span,
.mm-spn li::before,
.mm-spn li::after {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
  .mm-ocd-opened .btn--close-sm
 {
    background-color: #be996b !important;
}

header.store-header :before {
    color: var(--second-color)!important
}

.s-cart-summary-count {
    background: var(--main-color);
    color: var(--second-color)
}
.main-nav-container.fixed-header .inner{
    background: var(--main-color)!important
}

.s-product-card-content-sub,.s-product-card-sale-price span,.s-product-card-content-title,.s-product-card-content-subtitle,
.s-slider-block__title,.s-block__title h2,
[dir=rtl] .s-slider-block__title h2{
color: var(--main-color)!important
    
}
.s-product-card-content salla-add-product-button .s-button-text{

    color: var(--second-color)!important;
    font-weight:700 !important;

}
.store-footer__inner {
        background-image: url(https://i.ibb.co/ZSGzsYd/footer.png);
    background-size:cover;
    background-position:center;
}


salla-slider#testimonials-12-slider .flex.flex-col.w-full.px-4.pb-8.-mt-8 * {
    color: var(--second-color)!important
}

footer.store-footer {
    margin-top: 0;
}

.angel-feature.flex-center.flex-col {
    box-shadow: 5px 5px 7px #ba9a7775;
    padding-bottom: 18px!important;
    width: 90%;
    border: 1px solid #be9f7e;
    border-radius: 15px;
}

.store-footer h3 {
    position: relative;
    width: fit-content;
    margin-inline: auto;
}

[dir=rtl] .footer-middle h3:before {
    content: "";
    width: 3px;
    margin-right: -7px;
    height: 90%;
    border-radius: 15px;

    background: var(--second-color);
    display: block;
    position: absolute;
}
.store-footer__inner *{
color:var(--second-color) !important
    
}
div#mainnav, .inner {
    background-color: rgba(186, 154, 119, 0.5);
}

.s-block--full-bg:first-of-type {
    margin-top: -1px;
}
.index > div.app-inner > section:nth-child(4):nth-child(4){
    margin-top:-0.3rem;
    z-index:2;
}



.menu-silde.lazy_bg.lazy {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.s-product-card-entry:hover .s-product-card-content-title a {
    color: var(--color-primary)
}

.s-product-card-content-title a {
    line-height: 2rem
}

@media(max-width: 1024px) {
    .s-product-card-content-title a {
        font-size:1rem
    }

    [dir=rtl] salla-slider[type]:not(.hydrated)>div,[dir=rtl] salla-slider[type]:not(.hydrated) .swiper>div>div,[dir=rtl] .carousel-slider .swiper {
        padding-left: 0
    }

    div#mainnav[style="height: 106px;"] {
        height: 73px!important
    }
}

.s-product-card-entry:hover img {
    scale: 1.05
}

.s-product-card-entry {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3)!important
}

body.dark-theme .s-button-primary-outline:hover {
    color: #000!important
}

.s-product-card-content-title a {
    font-size: 1.2rem
}

.s-button-primary-outline {
    color: #000
}

.s-button-icon .s-button-text {
    color: #000
}

.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 55px
}

.s-block__title h2,.s-slider-block__title h2 {
    font-size: 1.75rem
}

.s-product-card-content-subtitle {
    display: none
}

.s-products-slider-card {
    padding-top: 5px!important;
    padding-bottom: 5px!important
}

.s-product-card-promotion-title,.promotion-title {
    background-color: var(--4);
    font-weight: 400
}

.s-product-card-vertical .s-product-card-image {
    overflow: hidden
}

.s-product-card-entry img {
    transition: .3s
}

.s-product-card-price {
    font-size: 1.5rem;
    line-height: 1.25rem;
    font-weight: 700
}

.s-button-btn {
    background-color: #ad8f47; /* لون خلفية الزر */
    border: 0px solid #BA9A77; /* حدود الزر بلون الخلفية */
    border-radius: 20px; /* زوايا مدورة */
    padding: 10px 20px; /* مساحة داخلية */
    font-size: 1.2em; /* حجم الخط */
}

.s-button-disabled .s-button-text span {
    color: #991b1b; /* اللون المميز لنص نفدت الكمية */
    font-weight: bold; /* لجعل النص عريض */
    font-size: 20px; /* حجم الخط */
}

.footer-is-light .store-footer {

    background-color: rgb(163 130 97);
   }
   
   
   
   
   
   
   
   
/*
 * تنسيق قسم الإعلانات (salla-advertisement)
 * يحدد لون الخلفية ولون النص.
*/
.salla-advertisement {
    background: var(--1)!important; /* تعيين لون الخلفية من متغير --1 */
    color: #fff!important /* تعيين لون النص إلى الأبيض */
}

/*
 * تنسيق تذييل الصفحة (footer.store-footer)
 * يحدد صورة الخلفية وحجمها وموضعها.
*/
footer.store-footer {
    background-image: url(); /* تحديد صورة الخلفية (الفارغة تعني لا يوجد صورة حاليًا) */
    background-size: cover; /* تغطية صورة الخلفية للمساحة بالكامل */
    background-position: 1rem /* تحديد موضع صورة الخلفية */
}

/*
 * تنسيق تذييل الصفحة (footer.store-footer) على الشاشات الصغيرة (أقل من 600 بكسل)
 * يضبط موضع صورة الخلفية ليتناسب مع الشاشات الصغيرة.
*/
@media(max-width: 600px) {
    footer.store-footer {
        background-position:38rem 18rem /* تغيير موضع صورة الخلفية */
    }
}

/*
 * تنسيق عنوان سلايدر الصور (s-block--photos-slider)
 * يخفي عنوان قسم سلايدر الصور تمامًا.
*/
section.s-block.s-block--photos-slider .s-slider-block__title {
    display: none!important; /* إخفاء العنصر */
}

/*
 * تنسيق مجموعة عناصر ذات محاذاة أفقية ونهاية (flex items-center justify-end)
 * يحدد المسافة بين هذه العناصر.
*/
.flex.items-center.justify-end {
    gap: 7px /* المسافة بين العناصر المرنة */
}

/*
 * تنسيقات خاصة بالشاشات الصغيرة (أقل من 767 بكسل)
*/
@media(max-width: 767px) {
    /*
     * تنسيق الشرائح داخل سلايدر الفئات على الشاشات الصغيرة
     * يجعل الشرائح تعرض كشبكة من عمودين.
    */
    body>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--categories.merge-with-top-component>div>salla-slider .swiper .swiper-wrapper.s-slider-swiper-wrapper {
        display:grid; /* تحويل العرض إلى شبكة (Grid) */
        grid-template-columns: 1fr 1fr!important /* عمودين متساويين */
    }

    /*
     * تنسيق حجم عناصر الشرائح الفردية داخل سلايدر الفئات على الشاشات الصغيرة
     * يجعل كل شريحة تأخذ عرض 100% من عمودها في الشبكة.
    */
    body>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--categories.merge-with-top-component>div>salla-slider .swiper .swiper-wrapper.s-slider-swiper-wrapper div {
        width: calc(100%/1)!important /* جعل العرض 100% */
    }

    /*
     * تنسيق مجموعة عناصر ذات محاذاة أفقية ونهاية على الشاشات الصغيرة
     * يقلل المسافة بين العناصر.
    */
    .flex.items-center.justify-end {
        gap: 2px /* تقليل المسافة بين العناصر المرنة */
    }

    /*
     * تنسيق صورة الأفاتار الخاصة بقائمة المستخدم على الشاشات الصغيرة
     * يضبط عرض وارتفاع الصورة.
    */
    img.s-user-menu-trigger-avatar {
        width: 25px; /* عرض الصورة */
        height: 26px /* ارتفاع الصورة */
    }
}

/*
 * تنسيق احتواء صورة المنتج (s-product-card-image-contain)
 * يزيل خاصية object-fit مما يسمح للصورة بالتكيف بحرية.
*/
.s-product-card-image-contain {
    object-fit: unset /* إلغاء سلوك object-fit الافتراضي */
}

/*
 * تنسيق خيارات المنتج والعناوين في الوضع الداكن (dark-theme)
 * يزيل خلفية ويحدد لون نص هذه العناصر.
*/
body.dark-theme .s-product-options-wrapper,body.dark-theme .s-product-options-option-label b {
    background: 0 0; /* إزالة الخلفية (تعادل background-color: transparent) */
    color: #fff!important /* تعيين لون النص إلى الأبيض */
}

/*
 * تنسيق سلايدر الصور في وضع RTL (من اليمين لليسار)
 * يزيل الهامش الداخلي (padding) من سلايدر الصور.
*/
[dir=rtl] salla-slider.photos-slider .swiper {
    padding: 0 /* إزالة الهامش الداخلي */
}

/*
 * تنسيق زر قائمة المستخدم (s-user-menu-trigger)
 * يزيل الهامش الداخلي (padding) من الزر.
*/
.s-user-menu-trigger {
    padding: 0 /* إزالة الهامش الداخلي */
}

/*
 * تنسيق شبكة قسم اللافتات (banners)
 * يحدد عرض الشبكة لتكون 4 أعمدة متساوية.
*/
.s-block.s-block--banners>.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr /* 4 أعمدة متساوية */
}

/*
 * تنسيق عناصر اللافتات الفردية داخل الشبكة (فارغ حالياً)
*/
.s-block.s-block--banners>.grid .banner-entry {
    /* لا يوجد تنسيق مطبق حالياً */
}

/*
 * تنسيق شبكة قسم اللافتات على الشاشات المتوسطة (أقل من 991 بكسل)
 * يضبط عرض الشبكة لتكون عمودين.
*/
@media(max-width: 991px) {
    .s-block.s-block--banners>.grid {
        grid-template-columns:1fr 1fr /* عمودين متساويين */
    }

    /*
     * تنسيق عناصر اللافتات الفردية داخل الشبكة على الشاشات المتوسطة (فارغ حالياً)
    */
    .s-block.s-block--banners>.grid .banner-entry {
        /* لا يوجد تنسيق مطبق حالياً */
    }
}

/*
 * تنسيق أول لافتة في تخطيط "صفين"
 * يعيد تعيين موضع الشبكة الافتراضي للعنصر الأول.
*/
.two-row .banner-entry:first-child {
    grid-column: auto; /* إعادة تعيين عمود الشبكة */
    grid-row: auto /* إعادة تعيين صف الشبكة */
}

/*
 * تنسيق محتوى اللافتة (article) و الطبقة العلوية (has-overlay:after)
 * يزيل الهامش الداخلي ويخفي هذه العناصر.
*/
.banner-entry article,.has-overlay:after {
    padding: 0; /* إزالة الهامش الداخلي */
    display: none /* إخفاء العنصر */
}

/*
 * هذا الجزء من الكود مُعلق تماماً ولا يتم تطبيقه.
 * كان يستخدم لتنسيق أيقونات الفئات (أو الصور المصغرة) لجعلها دائرية
 * وإخفاء محتواها الافتراضي ووضع خلفية.
*/
/*
body>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--categories>div>salla-slider>div>div>div>a>i:before {
    content: ""
}

 body>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--categories>div>salla-slider>div>div>div>a>i {
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 82px;
    border-radius: 50%;
    background-color: #000
}
*/

/*
 * تنسيق روابط شرائح الفئات (slide--cat-entry)
 * يضيف انتقالات سلسة وتأثير منظور للتحولات ثلاثية الأبعاد.
*/
a.slide--cat-entry {
    transition: transform .5s ease; /* انتقال للتحويلات مدته 0.5 ثانية (هذا يتم تجاوزه بالسطر التالي) */
    transition: transform .3s ease-in-out; /* انتقال للتحويلات مدته 0.3 ثانية (هذا هو الفعال) */
    perspective: 1000px /* تحديد منظور للتحويلات ثلاثية الأبعاد */
}

/*
 * تأثير التحويل عند مرور المؤشر فوق روابط شرائح الفئات
 * يجعل العنصر يدور ويكبر حجمه عند التفاعل.
*/
a.slide--cat-entry:hover {
    transform: rotateY(20deg) rotateX(20deg) scale(1.1) /* دوران حول المحورين Y و X وتكبير الحجم */
}

/*
 * تعريف حركة مفتاحية (keyframes) لمرور العلامات التجارية (scrollBrands)
 * تستخدم لتغيير موضع خلفية عنصر ما بمرور الوقت، مما يخلق تأثير تمرير لا نهائي.
*/
@keyframes scrollBrands {
    0% {
        background-position-x: 0 /* تبدأ من الموضع الأفقي 0 */
    }

    50% {
        background-position-x: 35000px /* تتحرك إلى 35000 بكسل أفقياً */
    }

    100% {
        background-position-x: 0 /* تعود إلى الموضع الأفقي 0 */
    }
}

/*
 * تنسيق رأس المتجر (header.store-header) على الشاشات الصغيرة (أقل من 767 بكسل)
 * يضبط حجم وموضع صورة الخلفية قبل رأس الصفحة.
*/
@media(max-width: 767px) {
    header.store-header:before {
        background-size:180%; /* حجم صورة الخلفية */
        height: 39px; /* ارتفاع العنصر الزائف */
        background-position: center; /* توسيط صورة الخلفية */
        margin-bottom: -2px /* هامش سفلي سالب */
    }
}

/*
 * تنسيق صورة المنتج في بطاقات المنتجات المصغرة (s-product-card-minimal)
 * يحدد عرض الصورة.
*/
.s-product-card-minimal .s-product-card-image {
    width: 15rem /* عرض الصورة */
}

/*
 * تنسيق صورة المنتج في بطاقات المنتجات المصغرة على الشاشات المتوسطة (أقل من 1024 بكسل)
 * يقلل عرض الصورة.
*/
@media(max-width: 1024px) {
    .s-product-card-minimal .s-product-card-image {
        width:10rem /* تقليل عرض الصورة */
    }
}

/*
 * تنسيق الخلفية الرمادية الفاتحة (bg-gray-100)
 * يجعل الخلفية شفافة.
*/
.bg-gray-100 {
    background-color: transparent /* جعل الخلفية شفافة */
}

/*
 * تنسيق خلفية جسم الصفحة (body)
 * يحدد لون خلفية الصفحة الرئيسي.
*/

/*
 * تنسيق خلفية روابط شرائح الفئات (slide--cat-entry)
 * يحدد لون خلفية هذه الروابط.
*/
a.slide--cat-entry {
    background: #ecebeb /* تعيين لون خلفية الرابط */
}

/*
 * تنسيق شرائح Swiper (swiper-slide) (فارغ حالياً)
*/
.swiper-slide {
    /* لا يوجد تنسيق مطبق حالياً */
}

/*
 * تنسيق مجموعة عناصر مركزية ومتباعدة (md:flex items-center justify-between py-4 container text-center) (فارغ حالياً)
*/
.md\:flex.items-center.justify-between.py-4.container.text-center {
    /* لا يوجد تنسيق مطبق حالياً */
}

/*
 * تنسيق نص حقوق الطبع والنشر (copyright-text)
 * يضبط الهامش الأفقي للنص.
*/
span.text-sm.copyright-text {
    margin: 1px 62px; /* الهامش العلوي/السفلي 1px، الهامش الأيمن/الأيسر 62px */
}

/*
 * تعريف حركة مفتاحية (keyframes) للانتقال (trns)
 * تستخدم لتغيير شفافية لون النص من شفاف تمامًا إلى شبه شفاف.
*/
@keyframes trns {
    0% {
        color: #ffffff00; /* يبدأ بلون أبيض شفاف تماماً */
    }

    100% {
        color: #ffffff99; /* ينتهي بلون أبيض شبه شفاف (99 = 60% تقريباً شفافية) */
    }
}

/* --- تنسيقات شاشة التحميل (Loader/Splash Screen) --- */
/* تنسيق العنصر الزائف للصفحة الرئيسية (شاشة التحميل) */
.index:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff var(--logo);
    position: fixed;
    top: 0;
    z-index: 99999999999999999 !important;
    background-size: 250px !important;
    background-repeat: no-repeat;
    background-position: center !important;
    animation-name: logobg;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    bottom: 0;
    left: 0;
    right: 0;
}
/*
 * تعريف حركة مفتاحية (keyframes) لظهور الشعار (logobg)
 * تستخدم لإنشاء تأثير إخفاء تدريجي (fade out) لشاشة التحميل.
*/
@keyframes logobg {
    0% {
        opacity: 1; /* يبدأ مرئياً بالكامل */
    }

    50% {
        opacity: 1; /* يبقى مرئياً بالكامل حتى منتصف الحركة */
    }

    100% {
        opacity: 0; /* يختفي تماماً */
        visibility: hidden /* يصبح غير مرئي للعناصر الأخرى */
    }
}

/*
 * تنسيق عنوان محتوى بطاقة المنتج (s-product-card-content-title)
 * يوسّط النص داخله.
*/
.s-product-card-content-title {
    text-align: center; /* توسيط النص */
}



/*
 * تنسيق العنصر الزائف (::before) لقسم الميزات (s-block--features)
 * يضيف نصاً وعناصر تنسيق للعنصر قبل المحتوى الفعلي.
*/
.s-block.s-block--features.container::before {
    content: "      ما يميزنا "; /* محتوى نصي (يبدو أنه مشفر أو به أحرف خاصة) */
    display: block; /* يجعله عنصر كتلة */
    /* text-align: center; */ /* تعليق على توسيط النص */
    font-size: 28px; /* حجم الخط */
    font-weight: 600; /* وزن الخط (عريض) */
    margin: 0 0 38px 0; /* هوامش حول العنصر */
}

/*
 * تنسيق عناصر الشبكة داخل قسم الميزات (s-block--features)
 * يحدد عرض الشبكة لتكون 4 أعمدة متساوية.
*/
section.s-block.s-block--features.container div {
    grid-template-columns: repeat(4,minmax(0,1fr))!important; /* 4 أعمدة متساوية للشبكة */
}

/*
 * تنسيق عناصر الشبكة داخل قسم الميزات على الشاشات الصغيرة (أقل من 767 بكسل)
 * يقلل عرض الشبكة إلى عمودين.
*/
@media (max-width: 767px) {
    section.s-block.s-block--features.container div {
        grid-template-columns: repeat(2,minmax(0,1fr))!important; /* عمودين متساويين للشبكة */
    }
}

/*
 * تنسيق أول عنصر في قسم الميزات (s-block--features__item)
 * يجعله يمتد على عمودين في الشبكة.
*/
.s-block--features__item:first-child {
    grid-column: span 1/span 2 /* يمتد على عمودين */
}



/* بداية تنسيق النافذة المنبثقة */
#custom-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4); /* شفافية الخلفية */
  z-index: 999999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#custom-popup {
  background-color: rgb(114 102 89 / 92%); /* نفس اللون مع شفافية خفيفة */
  border-radius: 24px;
  padding: 35px 30px;
  color: white;
  text-align: center;
  max-width: 95%;
  width: 420px; /* عرض النافذه */
  position: relative;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  font-family: inherit;
  backdrop-filter: blur(3px); /* لمسة ناعمة */
}

#custom-popup-close {
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

#custom-popup p {
  font-size: 19px;
  margin: 25px 0;
  font-weight: 700;
}

.custom-whatsapp-btn {
  display: inline-block;
  background-color: rgba(5, 68, 73, 0.95);
  color: white;
  padding: 11px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  transition: 0.3s ease;
}

.custom-whatsapp-btn:hover {
  background-color: #054449;
}



/* --- تنسيقات الماركات (Brands) --- */
.brand-item {
    position: relative;
    display: flex;
    height: 5rem; /* ارتفاع ثابت */
    align-items: center;
    justify-content: center;
    background-color: transparent; /* جعل الخلفية شفافة لإزالة لون البوكس */
    background-repeat: no-repeat; /* منع تكرار صورة الشعار */
    background-position: center; /* توسيط صورة الشعار */
    padding: 0.75rem;
    text-align: center;
    color: rgb(129, 15, 15); /* لون نص */
    transition: all 250ms ease-in-out; /* انتقال سلس لجميع التغييرات */
    cursor: pointer; /* لإظهار أنه عنصر قابل للنقر */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* ظل خفيف جداً يضيف عمق */
}

/* تأثير عند التمرير بالفأرة (Hover Effect) على عناصر الماركة */
.brand-item:hover {
    transform: translateY(-3px); /* رفع العنصر قليلاً */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* ظل أوضح قليلاً */
    border-color: rgba(0, 0, 0, 0.2); /* جعل الحدود أغمق قليلاً */
}