/* جعل اللوجو ثابتًا في الزاوية اليسرى دائمًا */
.logo {
    position: absolute;
    left: 20px; /* التحكم في المسافة من اليسار */
    top: 50%;
    transform: translateY(-50%);
}

/* إبعاد الجملة عن اللوجو في الشاشات الكبيرة */
.brand-title {
    margin-left: 100px; /* زيادة المسافة بين اللوجو واسم المتجر */
}

/* التأكد من عدم تحرك الصورة مع القائمة عند فتحها في الموبايل */
@media (max-width: 991px) {
    .logo {
        position: absolute;
        left: 10px; /* تقليل المسافة قليلاً لتناسب الشاشة الصغيرة */
        top: 10px; /* ضبط الموضع ليتناسب مع القائمة عند الفتح */
        transform: none; /* إلغاء التحريك عند الشاشات الصغيرة */
    }

    /* وضع اسم المتجر في وسط الشاشة بدون تأثر بمكان اللوجو */
    .brand-title {
        margin-left: 0; /* إزالة المسافة في الشاشات الصغيرة */
        text-align: center; /* التأكد من توسيط النص */
    }

    /* التأكد من أن القائمة لا تؤثر على موضع الصورة */
    .navbar-collapse {
        margin-top: 10px; /* فصل القائمة عن اللوجو عند الفتح */
    }
}