*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    font-family: 'Domaine Sans Text', sans-serif;
}

a{
    text-decoration: none;
}

a:hover{
    cursor: pointer;
}

/* Títulos */
.titulo{
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

/* Navbar */
#navbar{
    width: 100%;
    height: 70px;
    background: #009F67;
    opacity: 0.9;
    color: #FFFFFF;
    position: fixed;
    z-index: 1000;
}

#navbar a{
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 6px;
    transition: all 200ms ease;
}

#navbar h1{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5rem;
}

#navbar-container{
    width: 70%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    font-size: 2rem;
}

#navbar-items{
    display: flex;
    list-style: none;
    text-transform: uppercase;
    font-weight: bold;
}

#navbar-items li{
    padding: 20px;
}

#navbar-items a:hover{
    background-color: #eee;
    border-radius: 3px;
    color:#009F67;
    opacity: 0.9;
}

/* Topo */
#topo{
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background: url('../img/fundo-menu.jpg') repeat center center/contain;
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: color;
}

#topo a{
    text-transform: uppercase;
}

#topo-container{
    text-align: center;
}

#topo-container h1{
    font-size: 4rem;
    text-transform: uppercase;
}

#topo-container p{
    font-size: 1.2rem;
    padding-top: 20px;
}

#topo-container p a{
    color: #FFFFFF;
    font-weight: bold;
}

/* Sobre */
#sobre{
    width: 100%;
    background-color: #009F67;
    background: linear-gradient(#009F67, #085c5c);
    padding: 0 50px 50px 50px;
    margin: auto;
    text-align: center;
    align-items: center;
    color: #FFFFFF;
    opacity: 0.95;
}

#sobre .titulo{
    padding-top: 30px;
    padding-bottom: 10px;
}

#sobre-items{
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    list-style: none;
    align-items: center;
}

/* Unidades */
#unidades{
    width: 100%;
    background: url('../img/fundo-mapa.jpg') no-repeat center center/cover;
    /* Overlay */
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: color;
    padding: 0px 50px 50px 50px;
    align-items: center;
    text-align: center;
}

#unidades .titulo{
    color: #FFFFFF;
    padding-top: 50px;
    padding-bottom: 20px;
}

#unidades-container{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 30px;
}

.unidade{
    color: #085c5c;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #eee;
    border-radius: 15px;
    padding: 30px;
    border: 2px solid #085c5c;
}

.unidade h3{
    text-transform: uppercase;
    background-color: #FFFFFF;
    color: #085c5c;
    border-radius: 8px;
    padding: 4px 7px;
    margin-bottom: 15px;
}

.unidade p{
    padding-top: 15px;
}

.unidade p a{
    padding: 1px 3px;
    color: #085c5c;
    font-weight: bold;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.unidade p a:hover{
    background-color: #009F67;
    opacity: 0.95;
    color: #eee;
    border-radius: 4px;
    transition: all 300ms ease;
}

/* Contato/Trabalhe Conosco */
#contato{
    width: 100%;
    padding: 50px;
    align-items: center;
    text-align: center;
    background: url('../img/trabalhe-conosco.jpg') center center/cover;
    /* Overlay */
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: color;
    color: #FFFFFF;
}

#contato .titulo{
    padding: 8px;
}

#contato h3{
    padding-top: 30px;
    padding-bottom: 5px;
    font-size: 1.9rem;
}

#contato p{
    font-size: 1.2rem;
}

#contato a{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 5px 5px;
}

#contato p a:hover{
    background-color: #eee;
    border-radius: 5px;
    color: #009F67;
    transition: all 300ms ease;
}

.btn{
    padding: 5px 12px;
    background: #009F67;
    opacity: 0.9;
    border-radius: 7px;
    transition: all 500ms ease;
    border: 1px solid #009F67;
}

.btn:hover{
    background-color: #eee;
    font-style: normal;
    color: #009F67 !important;
}

/* Rodapé */
footer{
    color: #FFFFFF;
    padding: 10px;
    background-color: #009F67;
    background: linear-gradient(to bottom right, #009F67, #085c5c);
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9rem;
}

#link-topo{
    position: fixed;
    bottom: 10px;
    right: 15px;
    opacity: 0.9;
    font-size: calc(0.8rem + .9vw) !important;
    color:#085c5c;
}

#link-topo:hover{
    color: #eee;
    transition: 0.2s;
}

/* ----- MOBILE ----- */
@media screen and (max-width: 768px) {
    /* Navbar */
    #navbar{
        height: 100%;
        position: relative;
    }
    
    #navbar-container{
        flex-direction: column;
        padding: 20px 0;
    }
    
    #navbar-items{
        flex-direction: column;
        text-align: center;
    }
    
    #navbar-items li:nth-child(1){
        padding-top: 20px;
        border-bottom: 1px solid;
    }
    
    #navbar-items li:nth-child(3){
        border-top: 1px solid;
        border-bottom: 1px solid;
    }

    /* Topo */    
    #topo{
        height:100vh;
    }

    #topo-container p{
        line-height: 30px;
    }

    /* Sobre */
    #sobre-items{
        flex-direction: column;
        align-items: center;
        line-height: 30px;
    }

    /* Unidades */
    #unidades-container{
        width: 100%;
        grid-template-columns: 1fr;
        padding-top: 15px;
        padding-bottom: 20px; 
    }

    /*Contato */
    #contato a{
        padding: 1px 4px;
    } 
}