/* Add custom CSS styles below */ 
/* تكبير الشعار وتحويله للون الأبيض */
.flex.items-center.m-0.justify-center.lg\:justify-start img {
    max-height: 100px !important; /* يمكنك زيادة الرقم حسب الرغبة */
    filter: brightness(0) invert(1) !important;
    transition: all 0.3s ease; /* لإضافة نعومة عند التحميل */
}

/* اختيار اختياري: تكبير إضافي للشاشات الكبيرة فقط */
@media (min-width: 1024px) {
    .flex.items-center.m-0.justify-center.lg\:justify-start img {
        max-height: 120px !important;
    }
}


/* 1. تخصيص العنصر النشط: اللون الأبيض والحركة للأعلى */
.bottom-navbar .navbar-item.active {
    color: #ffffff !important; 
    transform: translateY(-5px); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; /* ضروري لضبط موقع النقطة */
}

/* 2. تحويل الأيقونات إلى الأبيض الناصع */
.bottom-navbar .navbar-item.active i, 
.bottom-navbar .navbar-item.active svg,
.bottom-navbar .navbar-item.active img {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
    filter: brightness(0) invert(1) !important;
}

/* 3. إضافة النقطة المضيئة تحت العنصر المختار */
.bottom-navbar .navbar-item.active::after {
    content: '';
    position: absolute;
    bottom: -8px; /* موقع النقطة أسفل النص */
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background-color: #ffffff; /* لون النقطة أبيض */
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* تأثير توهج للنقطة */
}