.clip-leaf {
    clip-path: polygon(50% 0%, 100% 25%, 75% 100%, 50% 75%, 25% 100%, 0% 25%);
}



.nav-link {
    position: relative;
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    transition: color 0.3s ease-in-out;
}

/* شريط برتقالي أسفل الرابط النشط */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100%;
    height: 6px;
    background-color: #ff6b2b;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;


    /* تدوير أعلى اليسار وأسفل اليمين */
    border-top-left-radius: 13px;  /* تدوير أعلى اليسار */
    border-bottom-right-radius: 13px; /* تدوير أسفل اليمين */

}

/* عند تمرير الماوس أو عندما يكون الرابط نشطًا */
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link.active {
    color: #ff6b2b; /* تغيير لون النص إلى البرتقالي */
}


/*
#navbar {
    transition: transform 0.3s ease-in-out;
} */
/* {{-- اخفاء الناف بار عند التمرير لاسفل  --}} */

#navbar {
    transition: transform 0.3s ease-in-out;
}
/* إخفاء الخط البرتقالي (pseudo-element) في الشاشات الأصغر من 768px */
@media (max-width: 768px) {
    .nav-link::after {
        display: none !important; /* إجبار الإخفاء */
        content: none; /* إلغاء المحتوى تماماً */
    }

    /* اختياري: يمكنك تغيير خلفية الرابط بالكامل في الموبايل لتمييزه بدلاً من الخط */
    .nav-link.active {
        /* background-color: #12161eb7;  */
        border-radius: 5px;
        color: #ff6b2b;
    }
}