/* Add custom CSS styles below */ 
/* 1. نقل حاوية التصنيفات لتكون تحت اللوجو وفي المنتصف */
.main-menu-wrapper {
    display: flex !important;
    justify-content: center !important; /* توسيط القائمة */
    width: 100% !important;
    margin-top: 15px !important;
    border-top: 1px solid #f0f0f0; /* خط بسيط للفصل */
    padding-top: 10px;
}

/* 2. تنسيق روابط التصنيفات الرئيسية */
.main-menu__item > a {
    font-weight: bold !important;
    font-size: 15px !important;
    color: #333 !important;
    padding: 10px 20px !important;
}

/* 3. إظهار التصنيفات الفرعية عند تمرير الماوس (القائمة المنسدلة) */
.main-menu__item:hover .sub-menu {
    display: block !important;
    position: absolute;
    background: #fff;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    min-width: 200px;
    z-index: 999;
}

/* 4. تنسيق الروابط الفرعية داخل القائمة */
.sub-menu li a {
    display: block;
    padding: 10px 15px;
    color: #666;
    border-bottom: 1px solid #fafafa;
    text-align: right; /* ليتناسب مع اللغة العربية */
}

.sub-menu li a:hover {
    background-color: #f8f8f8;
    color: #00baf3; /* لون هويتك */
}