header {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/*-------------CONTACT------------*/

.contact {     
    width: 100%; 
    margin: 1.5rem 0.5rem;
    display: flex;
    justify-content: center;
}

.reachme {
    width: 3.4vh;       
}

.phone-number {
    color: transparent;
    font-size: 0.75rem;    
    display: none;
}

.phone:hover {
    color:antiquewhite;
}

.bta {
    margin: auto 37.5%;
}

/*-------------LOGO------------*/
.logo {
 display: flex;
 justify-content: center;
 margin-top: 1.7vh;
}

.horizontal-logo {
    padding: 1.5rem 0.85rem;
    background: rgb(233, 239, 255);
    border-radius: 13%;
    box-shadow: 0 20px 5px -5px #ffffff31;
}

/*-------------AREAS------------*/
.areas {        
    margin-top: 0.85rem;
    width: 90%;
}

.areas > h2 {
    color: rgba(251, 250, 238, 1);
    font-size: 1.1rem;
}

/*-------------NAV------------*/
nav {    
    display: flex;
    justify-content: center;   
}

nav ul {       
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;    
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
}

nav li {      
    width: 20%;
    padding: 0.85rem 0.85rem;
    margin-right: 0.75rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav a {    
    color: rgba(255, 247, 214, 1);
    text-decoration: none;
    font-size: 0.8rem;    
    background: rgba(242, 254, 220, 0.22);
    width: 100%;
    height: 100%;
    padding: 0.2rem 0.4rem;
    border-radius: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav a:hover {
    background: rgba(0, 160, 244, 1);
    color: rgba(13, 29, 62, 1);
}

/* ================================
   Desktop Styles: 769px and greater
   ================================
*/

@media only screen and (min-width: 769px) {
   h2 {display: none; }

   .reachme { width: 5vh; }
    
   .logo {
    margin-top: 0;
    width: 35%;
   }

   .horizontal-logo {        
        width: 75%;
        box-shadow: none;
    }

   .areas {  
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-right: 0;      
    margin-left: 0; 
    width: 60%;
    }

    nav li {             
        width: 20%;
        padding: 0;
        margin-right: 0;       
    }

    nav a {    
        
        
        height: 40%;
        padding: 0.2rem 0.4rem;
        border-radius: 0%;
        
    }

}