.navbar {
    transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.navbar .container {
    padding: 8px 40px;
}

.navbar-scrolled {
    background-color: #ffffff !important;
    padding: 0px 0 !important;
    box-shadow: #04000011 0px 2px 12px 0px !important;
}

@media (max-width: 767px) {
    .navbar {
        background-color: white !important;
    }
    .active::after {
        content: "";
        position: absolute !important;
        left: 0 !important;
        transform: none;
        bottom: 0 !important; 
        width: 25% !important;
        border-radius: 5px;
    }


}


@media (min-width: 768px) and (max-width: 1024px) {
    .navbar {
        background-color: white !important;
    }

    .active::after {
        content: "";
        position: absolute !important;
        left: 0 !important;
        transform: none;
        bottom: 0 !important; 
        width: 10% !important;
        border-radius: 5px;
    }


}