header{
width: 100%;  
height: auto;
padding: 1% 0%;
display: flex;
justify-content: space-around;
align-items: center;
}

header img{
width: 10%;
}

header div{
width: 40%;
display: flex; 
justify-content: space-around;
}


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

header img{
width: 12%;
}

header div{
width: 60%;
}

header button{
font-size: 1vh;   
}

}

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

header img{
width: 15%;
}

header div{
width: 70%;
}

header a{
font-size: 1.3vh;    
}

header button{
display: none;
width: 0;   
}

}


.banner{
width: 100%;  
height: 65vh;
display: flex; 
justify-content: center;
align-items: center;
background-image: url(../src/banners/banner.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat; 
}

.banner div{
text-align: center;
}

.banner h1{
width: 50%;
margin: auto;    
}

.banner p{
width: 60%;
margin: auto;  
margin-top: 2.5%;  
}

.banner button{
margin-top: 2.5%;    
}


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

.banner{
height: 45vh;
}

.banner h1{
width: 70%;
}

.banner p{
width: 80%;
margin: auto;  
margin-top: 2.5%;  
}

.banner button{
margin-top: 2.5%;    
}

}

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

    .banner{
    height: 30vh;
    }
    
    .banner h1{
    width: 70%;
    }
    
    .banner p{
    width: 80%;
    margin: auto;  
    margin-top: 2.5%;  
    }
    
    .banner button{
    margin-top: 2.5%;    
    font-size: 1.8vh;
    }
    
}