/* Active Menu Highlight Styles */

/* Active state for navigation links */
.navbar .navbar-nav>li a.nav-link.active {
    color: var(--primary, #fd5523) !important;
    font-weight: 600;
    position: relative;
}

/* Active state with underline effect for desktop */
@media (min-width: 1200px) {
    .navbar .navbar-nav>li a.nav-link.active:before {
        content: '';
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background-color: var(--primary, #fd5523);
        border-radius: 2px;
        animation: slideIn 0.3s ease-in-out;
    }

    /* Active state when scrolled */
    header .header-nav-wrapper.header-sticky.scroll-on .navbar .navbar-nav>li a.nav-link.active:before {
        bottom: 15px;
    }
}

/* Animation for underline */
@keyframes slideIn {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 30px;
        opacity: 1;
    }
}

/* Mobile active state */
@media (max-width: 1199.98px) {
    .navbar .navbar-nav>li a.nav-link.active {
        color: var(--primary, #fd5523) !important;
        background-color: rgba(253, 85, 35, 0.05);
        border-left: 3px solid var(--primary, #fd5523);
        padding-left: 10px !important;
        font-weight: 600;
    }
}

/* Ensure active state is visible on hover */
.navbar .navbar-nav>li:hover a.nav-link.active,
header .header-nav-wrapper .navbar .navbar-nav li:hover a.nav-link.active {
    color: var(--primary, #fd5523) !important;
}

/* Active state for offcanvas menu */
.offcanvas .navbar-nav .nav-item .nav-link.active {
    color: var(--primary, #fd5523) !important;
    font-weight: 600;
}