header{
 
    #navbarColor01{
        justify-content: space-between;
    }

    font-weight: bolder;

    & nav{
        background-color: #0A1F54;
        border-bottom: 1px solid black;
        box-shadow:  0px 3px 5px rgba(76, 76, 76, 0.49);
    }


    & .container-fluid{
        padding: 0px 10px;
    }

    & #logo-navbar{
        width: 60px;
        height: 50px;
    }

    & ul{
        display: flex;
        gap: 5px;
       
    }

    & li{
        margin-right: 7px;
        display: flex;
        align-items: center;
    }

    &  .nav-link,  & .dropdown-toggle{
        padding: 10px;
        transition: scale 0.1s;
        border-radius: 2px;
        font-size: 1.2rem;
        color: white;
        font-weight: bolder;
        background-color: transparent;
        border: none;
        text-align: left;
        width: 100%;
    }

    & .butao{
        width: 100%;
        padding: 10px;
        transition: scale 0.1s;
        border-radius: 2px;
        font-size: 1.2rem;
        color: white;
        font-weight: bolder;
        background-color: transparent;
        border: none;
        text-align: left; 
        text-decoration: none;
        display: flex;
    }

    & .butao:focus{
        outline: 1px solid black;
        background-color: rgba(241, 241, 241, 0.504);  
    }

    & .butao:hover{
        background-color: #0056b3;
        scale: 1.02;
    }

    & .dropdown-toggle{
        padding: 10px 8px;
    }
    

    & .nav-item > .nav-link:focus, & .dropdown-toggle:focus{
        outline: 1px solid black;
        background-color: #0056b3;
    }

    & .nav-item >  .nav-link:hover, & .dropdown-toggle:hover{
        background-color: #0056b3;
        scale: 1.02;
    }

    & .carousel-control-prev-icon{
        color: red;
    }
    
}


@media screen and (max-width: 991px){
    header{

        & .navbar{
            max-height: 100vh; /* altura máxima igual à altura da viewport */
            overflow-y: auto;
            

        }
        

        & .dropdown-toggle{
            width: 100%;
            text-align: left;
        }
        
        & .container-fluid{
            padding: 0px 20px;
        }

        & .nav-item >  .nav-link:hover, & .dropdown-toggle:hover{
            scale: 1.02;
        }
    }
}