@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&display=swap');

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  
}

body{
    animation: 1s fadein 0.1s forwards;
	opacity:0; 
	background:#072f5f;
}

.background-image{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:cover;
	z-index: -1;
	opacity:0.04;
}

@keyframes fadein{
	100%{
		opacity:1;
	}
} 

.container{
    margin-top:20px;
}

.nav{
   display:flex;
   justify-content:flex-end;
}

.nav ul {
    display:flex;
    flex-direction:row;
    margin-right:15%;
}

.nav li {
    margin-right:20%;
   
}

.nav li a{
    font-size:100%;
    font-family: 'Fira Sans', sans-serif;
    color:#ffffff;
    text-decoration:none;
}

.nav li:nth-of-type(5){
    background-color:#ffffff;
    border-radius:20px;
    margin-left:-3%;
    
}
.nav li:nth-of-type(5) a {
     color:#072f5f;
     padding:15px; 
     
}

.header{
    margin-top:3%;
    min-height:60vh;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-content:center;
}
 .header .logo{
    display:flex;
    align-self:center;
    margin-bottom:5%;
}


.header .search-box{
    display:flex;
    align-self:center;
    background: #ffffff;
    height: 4vh;
    width: 55%;
    border: 2px;
    border-radius: 30px;
}

.header input{
    display:flex;
    align-self:center;
    height: 4vh;
    width: 100%;
    border: 0;
    outline:0;
    border-radius: 30px;
    padding-left:8px;
    
}


.header .search-box i.fas{
    color:#072f5f;
    font-size:120%;
    display:flex;
    align-self:center;
    justify-content: flex-start;
    margin-left:2%;
    margin-top:0.5%;
}

footer{
    margin:0;
    min-height:20vh;
    display:flex;
    flex-direction:row;
    justify-content:center;
    
}

footer ul{
    display:flex;
    align-self:flex-end;
    margin-bottom:0;
     
}

footer li {
    
    align-self:center;
    margin-right:20%;
    
}

footer ul li a{
    color:#ffffff;
}

footer li a:hover{
    color:#ffffff;
    text-decoration:none;
}

footer icon {
    display:flex;
    align-self:flex-end;
    margin-left:20%;
    
}


footer icon .fab{
    
    margin-left:10%;
    align-self:center;
    color:#ffffff;
    font-size:140%;
    cursor:pointer;
}

 p{
    margin-top:2%;
    text-align:center;
    color:#ffffff;
}

.hamburger{
    display:none;
}



@media screen and (min-width:1500px) and (min-width:2560px){
    
     body{
        transform: scale(1.1);
      }
}
@media screen and (max-width:1400px){
    .nav ul {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    margin-right:10%;
    }
}

@media screen and (max-width:1200px){
    .nav ul {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        margin-right:10%;
         
    }
    .nav li {
        margin-right:15%;
       
    }
    footer{
        margin:0;
        min-height:15vh;
    }
    
    footer li {
        
        align-self:center;
        margin-right:10%;
        
    }
    
    footer icon {
        margin-left:12%;
    }

}


@media screen and (max-width:800px){
   .nav ul {
    
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        margin-right:25%;
    
    }
    
    footer li {
        
        align-self:center;
        margin-right:10%;
        
    }
    
    footer icon {
        margin-left:18%;
    }


}




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

    .hamburger{
        display:block;
        text-align:center;
        color:#ffffff;
        font-size:150%;
        margin:0;
        cursor:pointer;
    }
    
    .nav{
        display:flex;
    }
    
    .nav ul{
        display:flex;
        flex-direction:column;
        justify-content:center;
        margin:auto;
        
    }
    .nav li{
        align-self:center;
        margin:0;
    }
    
    .nav .hamburger{
        align-self:center;
        margin-bottom:3px;
    }
    
    .nav li:nth-of-type(5){
        margin-top:10%;
    }
    footer{
        display:flex;
        flex-direction:column;
         
    }
    footer ul {
        display:flex;
        flex-direction:column;
        align-self:center;
    
       
    }
    footer icon{
        display:flex;
        align-self:center;
        margin-left:-10%;
        margin-top:5%;
       
    }


}