/*
Add this CSS to your main stylesheet (e.g., static/risesyria/assets/css/style.css) or inside a <style> tag in your base template.
It will show a horizontal line under the active tab in desktop view, and a vertical line next to the active tab in mobile view.
*/

.navbar-nav .nav-link.active {
    position: relative;
}

/* Desktop: underline active tab */
.navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #153459; /* Change color as needed */
    border-radius: 2px;
    transition: all 0.3s;
}

/* Mobile: vertical line left of active tab */
@media (max-width: 991px) {
    .navbar-nav .nav-link.active::after {
        left: 0;
        top: 0;
        bottom: auto;
        width: 3px;
        height: 100%;
        background: #153459;
        border-radius: 2px;
    }
}