/* ========================

   SIMPLE & EFFECTIVE ACTIVE MENU STYLES

   ======================== */



/* Active menu item - Bold, Gold, with smooth transition */

.nav-links a.active {

    color: #f0a500 !important;

    font-weight: 700 !important;

    position: relative;

    transition: all 0.3s ease;

}



/* Beautiful bottom indicator bar */

.nav-links a.active::after {

    content: '';

    position: absolute;

    bottom: -8px;

    left: 50%;

    transform: translateX(-50%);

    width: 30px;

    height: 3px;

    background: #f0a500;

    border-radius: 3px;

    animation: slideInWidth 0.3s ease-out;

}



/* Smooth animation for the indicator */

@keyframes slideInWidth {

    0% {

        width: 0;

        opacity: 0;

    }

    100% {

        width: 30px;

        opacity: 1;

    }

}



/* Hover effect - subtle scale */

.nav-links a:hover {

    color: #f0a500 !important;

    transform: translateY(-2px);

    transition: all 0.2s ease;

}



/* Mobile menu active styles */

@media (max-width: 768px) {

    .nav-links a.active {

        background: linear-gradient(90deg, rgba(240, 165, 0, 0.15), transparent);

        padding-left: 15px;

        border-left: 4px solid #f0a500;

    }

    

    .nav-links a.active::after {

        display: none;

    }

}