@media (max-width: 991px) {
    /* 1. Fundo do menu principal */
    #navbar-top {
        background-color: #9D223B !important; 
    }

    /* 2. Item principal selecionado/clicado (ex: "Docentes") */
    #navbar-top .nav-link.active, 
    #navbar-top .nav-link.is-active,
    #navbar-top .nav-link:hover,
    #navbar-top .nav-link:focus {
        background-color: #962038 !important; 
        color: #FFFFFF !important; 
    }

    /* 3. Fundo da caixa do submenu (onde fica a lista de cursos) */
    #navbar-top .dropdown-menu {
        background-color: #9D223B !important; /* Usa a mesma cor do menu para parecer integrado */
        border: none !important; /* Remove qualquer bordinha indesejada */
    }

    /* 4. Remove o fundo branco e azul padrão dos itens do submenu */
    #navbar-top .dropdown-menu .dropdown-item,
    #navbar-top .dropdown-menu a {
        background-color: transparent !important; 
        color: #FFFFFF !important; 
    }

    /* 5. Item do submenu selecionado ou com mouse em cima */
    #navbar-top .dropdown-menu .dropdown-item:hover,
    #navbar-top .dropdown-menu .dropdown-item:focus,
    #navbar-top .dropdown-menu .dropdown-item.active,
    #navbar-top .dropdown-menu .dropdown-item.is-active,
    #navbar-top .dropdown-menu a:hover,
    #navbar-top .dropdown-menu a:focus,
    #navbar-top .dropdown-menu a.active,
    #navbar-top .dropdown-menu a.is-active {
        background-color: #962038 !important; /* Destaque sutil com o vermelho mais escuro do topo */
        color: #FFFFFF !important;
    }
}