/* Default styles for the active nav-link */
.navbar-nav .nav-item.active .nav-link {
    text-decoration: none;
    font-weight: bold;
    color: #ff9900;
    position: relative;
}

.navbar-nav .nav-item.active .nav-link::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background-color: #ff9900;
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    .navbar-nav .nav-item.active .nav-link::after {
        display: none; /* Hide underline effect on mobile */
    }

    .navbar-nav .nav-item {
        margin-left: 5%;
    }

    .navbar-nav .nav-item.active .nav-link {
        color: #ff9900;
        font-weight: bold;
        background-color: rgba(255, 153, 0, 0.1); /* Highlight background for active link */
        border-radius: 5px; /* Add some rounding */
    }
}

/* Ensure styles are applied even when collapsed */
.navbar-collapse.show .navbar-nav .nav-item.active .nav-link {
    color: #ff9900;
    font-weight: bold;
    background-color: rgba(255, 153, 0, 0.1); /* Highlight background for active link */
    border-radius: 5px; /* Add some rounding */
}











/* Default styles for the active nav-link */
/* .navbar-nav .nav-item.active .nav-link {
    text-decoration: none;
    font-weight: bold;
    color: #ff9900;
    position: relative;
}

.navbar-nav .nav-item.active .nav-link::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background-color: #ff9900;
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

@media (max-width: 767px) {
    .navbar-nav .nav-item.active .nav-link::after {
        display: none;
    }

    .navbar-nav .nav-item {
        margin-left: 5%;
    }

    .navbar-nav .nav-item.active .nav-link {
        color: #ff9900;
        font-weight: bold;
    }
} */