/* 1. استایل دهی به آیتم منوی فعال (صفحه جاری) */
/* از li.active استفاده می‌کنیم که قوی‌تر است */
.sp-megamenu-parent > li.active > a {
    /* رنگ پس زمینه منوی فعال */
    background-color: #00ab58 !important; 
    /* رنگ متن منوی فعال */
    color: #ffffff !important;         
    /* (اختیاری) حذف هرگونه حاشیه یا سایه پیشفرض */
    box-shadow: none !important;
}

/* 2. قوی‌تر کردن استایل دهی برای حالت هاور روی آیتم فعال */
/* این کد حالت هاور را برای آیتم فعال ثابت نگه می‌دارد */
.sp-megamenu-parent > li.active > a:hover,
.sp-megamenu-parent > li.active.current-item > a:hover {
    /* از همان رنگ پس زمینه فعال استفاده شود */
    background-color: #00ab58 !important;
    /* از همان رنگ متن فعال استفاده شود */
    color: #ffffff !important;
}

/* 3. (اختیاری) اگر هاور آیتم‌های غیرفعال هم مشکل دارد */
/* اگر می‌خواهید رنگ هاور سایر آیتم‌ها را نیز کنترل کنید، از این کد استفاده کنید. */
.sp-megamenu-parent > li:hover > a {
    color: #ffffff; /* مثال: رنگ زرد طلایی برای هاور منوهای غیرفعال */
    background-color: #00ab58; /* مثال: رنگ پس زمینه خاکستری برای هاور منوهای غیرفعال */
}
/* پنهان کردن آیکون منوی سه‌خطی در صفحات با عرض زیاد (دسکتاپ) */
@media (min-width: 992px) {
    #offcanvas-toggler {
        display: none !important;
    }
}