header.css

/* HEADER */

.nav-bar{
    
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}


/*LOGO*/

.logo-container{
    width: 10vw;
    height: 100px;
    background-image: url(/Financiamento/img/logo\ imob2.png);
    background-position:center;
    background-size: contain;    
    background-repeat: no-repeat;
    transition:  ease 0.3s;
}

.logo-container:hover{
    opacity: 0.7;
    transition:  ease 0.3s;
}


/* MENU NAVEGAÇÃO*/

ul{
    display: flex;
    font-size: 1.5vw;   
    margin-left: -30px;

}

li{
    list-style-type: none;
    padding:0px 1vw;
    border-right: black solid 1px;
    padding-top: 10px;
    padding-bottom: 10px;
    
}

li a{
    text-decoration: none;
    transition: all a.3s ease 0s;
    padding: 1.5vh 0.5vw;
    color: #10b3ae;
    
}

li a:hover{
    background-color: rgba(255, 255 ,255, 0.5);
    color: rgb(20, 20, 22, 0.8); 
    border-radius: 10px;
    transition:  ease 0.3s;
}

    .login-btn{
        font-size: 1.5vw;
        background-color: #10b3ae;
        padding: 1.5vw;
        border-radius: 20px;     
        text-decoration: none;
        color: rgba(255, 255, 255, 0.7);   
        transition: ease;
    }
    
   

    .login-btn:hover{
        background-color: rgba(255, 255, 255, 0.7);
        color:#10b3ae;
        transition: ease  0.3s;
    }
    
    
    #btn-mobile{
        display:none;
    }    

    @media (max-width: 768px){
        #btn-mobile{
            display: flex;
            padding: .5rem 1rem;
            font: 1rem;
            border: none;
            background: none;
            cursor: pointer;
            gap:.5rem;
            color: #10b3ae; 
            font-size: 20px;
        }



        /* MENU SANDUICHE */

        #hamburger{
            border-top: 2px solid;
            color: #10b3ae; 
        }

        #hamburger::after, #hamburger::before{
            content: '';
            display: block;
            width: 20px;
            height: 2px;
            background-color: currentColor;
            margin-top: 10px;
            transition: .3s;
            position: relative;
            width: 5vw;
        }

        #nav.active #hamburger{
            border-top-color: transparent;
        }

        #nav.active #hamburger::before{
            transform: rotate(135deg);
        }
        
        #nav.active #hamburger::after{
            transform: rotate(-135deg);
            top: -12px;    
        }


        
        /* RESPONSIVIDADE MENU ATIVO */
        
        #menu{
            display:none;
            position: absolute;
            width:100vw;
            top:20vw;
            height: 0;
            right: 0;
            font-size: 2.5vw;
            z-index: 1000;
        }

        #menu a{
            padding: 1rem;
            margin: 0 1rem;
        }
        

        /* RESPONSIVIDADE ITENS MENU */
 
         li{
             list-style-type: none;
             border:none;
             margin-top: 20px;
             padding-bottom: 10px;
         }

        #nav.active #menu{
            display: block;
            height: 80vh;
        }

    

        /* RESPONSIVIDADE BOTÃO LOGIN */

        .login-btn{
            font-size: 2.0vw;
            padding: 2vw;
        }


        /* RESPONSIVIDADE LOGO */
        .logo-container{
            width: 20vw;
            height: 15vh;
        }
    }