@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

*{
margin:0;
padding:0;
font-family: 'Ubuntu', sans-serif;}

.hero{
width:100%;
height:100vh;
background:linear-gradient(rgb(0,0,0,0.7),rgb(0,0,0,0.5)), url("images/hero.jpg");
background-size:cover;
background-position:center;
position:relative;
overflow:hidden;}

.img-fluid{
width:50%;
margin:120px 0 40px 0;
display:block;}

h3{
color:#FFFFFF !important;
font-size:45px !important;
margin:30px 0 10px 0 !important;
font-weight:700 !important;}

.block{
display:flex;}

.contact{
display:flex;}

#right{
color:#FFFFFF !important;
font-size:20px !important;
margin:20px 0px 10px 0 !important;
}

#left{
color:#FFFFFF !important;
font-size:20px !important;
margin:40px 0px 10px 0 !important;
}

#white{
color:#FFFFFF !important;
font-size:25px !important;
margin:15px 5px 10px 20px !important;
}

.contact img{
width:30px;
height:30px;
margin:15px 0px 10px 20px !important;
}

.contact a{
text-decoration:none !important;}

.contact p{
color:#FFFFFF !important;
font-size:15px !important;
margin:17px 10px 10px 0 !important;
font-weight:700 !important;
}

#wht{
width:55% !important;
height:auto !important;
margin:-10px 0 0 20px !important;
}

h1{
color:#FFFFFF !important;
font-size:22px !important;
margin:120px 0 10px 0 !important;
font-weight:500 !important;}

.line{
width:160px;
height:5px;
background:#FFFFFF;
border-radius:15px;
margin:130px 0 0 10px;}

.flex{
display:flex;}

h4{
color:#FFFFFF !important;
font-size:45px !important;
margin:0px 0 10px 0 !important;
font-weight:700 !important;}

input{
width:90%;
height:40px;
background:none;
border:2px solid #FFFFFF;
border-radius:5px;
color:#FFFFFF;
padding:0 0 0 10px;}

input::placeholder{
color:#FFFFFF;
padding:0 0 0 10px;}

textarea{
width:90%;
height:100px;
background:none;
border:2px solid #FFFFFF;
border-radius:5px;
color:#FFFFFF;
padding:0 0 0 10px;}

textarea::placeholder{
color:#FFFFFF;
padding:0 0 0 10px;}

#submit{
width:200px;
height:45px;
display:block;
border-radius:6px;
background: #FF0000;
color:#FFFFFF;
font-size:20px;
text-align:center;}

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

#right{
font-size:15px !important;
margin:20px 0px 10px 0 !important;
}

#left{
font-size:15px !important;
margin:55px 0px 10px 0 !important;
}

#white{
color:#FFFFFF !important;
font-size:25px !important;
margin:15px 10px 10px 10px !important;
}

.contact img{
width:25px;
height:25px;
margin:15px 0px 10px 10px !important;
}

.contact p{
font-size:15px !important;
margin:18px 15px 10px 0px !important;
}

#wht{
width:80% !important;
margin:-5px 0 0 10px !important;
}

}


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

.hero{
width:100%;
height:auto;}

form{
margin-bottom:90px;}

#right{
font-size:20px !important;
margin:20px 0px 10px 0 !important;
}

#left{
margin:75px 0px 10px 0 !important;
}

#white{
font-size:25px !important;
margin:15px 10px 10px 20px !important;
}

.contact img{
width:30px;
height:30px;
margin:15px 0px 10px 20px !important;
}

.contact p{
font-size:15px !important;
margin:17px 20px 10px 0 !important;
}

}


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

.block{
display:block;}

input{
width:100%;}

textarea{
width:100%;}

h1{
margin:90px 0 10px 0 !important;}

.line{
margin:100px 0 0 10px;}

h4{
font-size:35px !important;
margin-bottom:25px !important;}

h3{
font-size:35px !important;
text-align:center;
margin-bottom:30px !important;}


#wht{
margin:10px 0 0 10px !important;
}

#left{
margin:50px 0px 10px 0 !important;
}

.img-fluid{
width:70%;
display:block;
margin:50px auto 20px auto;}

}