.fa-facebook {
  background: white;
  color: #3B5998;
}

.fa-whatsapp {
  background: white;
  color: green;
}

.fa-linkedin {
  background: white;
  color: #007bb5;
}

.fa {
  width: 4vw;
  font-size : 20px;
  text-align: center;
  text-decoration: none;
}

.email {
   position : absolute;
   text-align : center;
   left : calc(12.5vw - 3.5vh - 75px);
   top : calc(9vh - 30px);
   font-size : 17px;
   border: 1px solid #7070ff;
   border-radius : 20px ;
   padding : 5px;
   font-family: georgia;
}


.header-email-button {
    font-size : 18px;
    font-family: georgia;
    position : relative;
    border-radius: 10px;
    border-color : #ff7f00;
    border-style : none;
    margin-bottom : 20px;
    background-color : #ffffff;
    color: #00007f;
    text-decoration: underline;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    }
    
.header-email-button:hover {
     color: #0000ff;
     cursor : pointer;
}


   
.phone {
   position : absolute;
   right : calc(12.5vw - 3.5vh - 75px);
   top : calc(9vh - 40px);
   font-style : georgia;
   font-size : 18px;
   line-height : 0.7;
   border: 1px solid #7070ff;
   border-radius : 20px ;
   padding : 0 1% 0 1%;
}

.phone-link-text {
     color:#00007f;
     white-space:nowrap;
}     

.phone-link-text:hover {
     color:#0000ff;
}     


.header-asub{
    width : 15px;
    position : relative;
    top : 5px;
}



img.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height : 19vh;
  padding: 10px 0 10px 0;
}

header {
    box-sizing : content-box;
    display: block;
    float: none;
    line-height: 18px;
    position : fixed;
    z-index : 1;
    width: 100%;
    background-color: white;
} 

.header-height {
     height: calc(19vh + 74px);
     width : 100%;
}     
 

.nav{
    border:1px solid #0f09ff;
    border-width: 1px 0 1px 0;
    height: 52px;
    display: flex;
    margin:0;
    padding:0;
    
}



.nav li{
    position : relative;
    text-align : center;
    display : inline-block;
    width :200px;
    margin : 2px calc(25vw - 100px) 0 calc(25vw - 100px);
    height : 42px;
    background-color : rgb(0,128,255);
    border-radius : 20px;
    border : 1px solid rgb(128,196,255);
    padding : 4px 0 0 0;
    line-height : 38px;
}

.contact {
    line-height : 38px;
}

.nav a{
    font-size: 21px;
    text-decoration: none;
    color : rgb(255,255,255);
    font-family : georgia;
    }

.nav li:hover {
  background : rgb(0,0,255);
  cursor :pointer;
}










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

     .email {
          display : none;
     }   
     
     .phone {
          display : none;
     }       
     
     
}



@media screen and (max-width : 660px){
    
     
    .nav a{
         font-size: 14px;
    }
     
.nav li{
    position : relative;
    text-align : center;
    display : inline-block;
    width :75px;
    margin : 2px calc(25vw - 37.5px) 0 calc(25vw - 37.5px);
    height : 42px;
    background-color : rgb(0,128,255);
    border-radius : 20px;
    border : 1px solid rgb(128,196,255);
    padding : 4px 0 0 0;
}
     

     


@media screen and (max-width : 360px){
    
     
     img.logo {
          height : 12vh;
     }

     .header-height {
         height: calc(12vh + 74px);
     }     
     

}


@media screen and (max-height : 500px){
    
     
     .email {
          display : none;
     }   
     
     .phone {
          display : none;
     }       
     
     

}