@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot'); /* IE9 Compat Modes */
  src: url('fonts/fontawesome-webfont.woff') format('woff'), /* Modern Browsers */
       url('fonts/fontawesome-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/fontawesome-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

:root{
  --mafube-green: #27ae60;
  --light-green: #90e9b6;
  --blue-gray: #34495e;
}

body::-webkit-scrollbar{
  width: 7px;
}
body::-webkit-scrollbar-track{
  background-color: var(--blue-gray);
}
body::-webkit-scrollbar-thumb{
  
  background-color: var(--light-green);
}

h1{
  margin: 0px;
  padding: 0px;
}
a{
  text-decoration: none;
  color: #ffffff;
}
body{
  margin: 0px;
  font-family: 'FontAwesome',sans-serif;
}

header{
  width: 100%;
  position: fixed;
}

#topdiv{
background-color: var(--mafube-green);
width: 100%;
height: 80px;
margin: 0px;
padding: 0px;
}
#nav{
  width: 100%;
  color: #ffffff;
  text-align: center;
}
#wrapper{
padding-top: 30px;
padding-right: 40px;
float: right;
}
.last{
  margin-right: 0px;
}
.others{
  margin-right: 40px;
}
.mid{
  margin-right: 35px;
}

#nav div a{
  font-family: 'FontAwesome',sans-serif;
  font-style: normal;
  text-decoration: none;



}
#logo{
  display: block;
  margin-left: auto;
  margin-right: auto;
 float: left;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;


}
#nav div a:hover{
font-style: italic;

}
#mainimage{
  margin: 0px;
  padding: 0px;

  width: 100%;
  height: 100vh;
background-image: url('images/mainpic.jpg');
background-size: cover;
background-position: center center;
overflow: hidden;

}
#mainimage h1{
  color: #ffffff;
  padding-top: 40vh;
  font-weight: bold;
  font-size: 60px;
  text-align: center;
  margin-left: 30px;
  margin-right: 30px;



}
#mainimage h3{
  color: #ffffff;
  font-weight: normal;
  font-style: italic;
  font-size: 30px;
  text-align: center;
  margin-left: 30px;
  margin-right: 30px;


}
#about{
  height: 600px;
  width: 100%;
  background-image: url('images/edge.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
#about h1{
  color: var(--blue-gray);
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding-top: 80px;
}
#about p{
  color: #7f8c8d;
  font-size: 29px;
  font-weight: normal;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}
#details{
  background-color: var(--blue-gray);
  height: 430px;
  overflow: hidden;
}
#details h3{

  color: #bdc3c7;
  font-size: 35px;
}


#details img{
  float: left;
  padding-right: 15%;
  padding-left: 30%;
  margin-top: 20px;
}
#details h1{
  color: #ecf0f1;
  text-align: center;
  font-size: 60px;
  padding-top: 10px;
  margin-bottom: none;
  padding-bottom: none;
}

#phone , #mail{

width: 100%;

padding-top: 50px;

}
#foot{
  background-color: var(--mafube-green);
  color: #90e9b6;
  text-align: center;
  height: 60px;
}
#foot h5{
  font-family: sans-serif;
  margin: 0px;
  padding-top: 20px;
}



@media screen and (max-height: 550px) {

  #mainimage{
    height: 100vh
  }
  #mainimage h1{
    padding-top: 30vh;
    font-size: 40px;
  }
  #mainimage h3{
    font-size: 20px;
  }
  #details h1{
    font-size: 40px;
  }
  #details img{
    float:none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0%;
    padding-left: 0%;
    padding-top: 0px;
    margin-top: 0px;

  }

  #details h3{
    text-align: center;
    font-size: 28px;
    margin: 0px;
    padding: 0px;
  }




}
@media screen and (max-height: 300px) {
  #mainimage{
    height: 130vh
  }
}




@media screen and (max-width: 850px){
  #details img{

    padding-right: 10%;
    padding-left: 25%;
    margin-top: 15px;
  }


}


@media screen and (max-width: 720px){
#details h1{
  font-size: 40px;
}
#details img{
  float:none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0%;
  padding-left: 0%;
  padding-top: 0px;
  margin-top: 0px;

}

#details h3{
  text-align: center;
  font-size: 28px;
  margin: 0px;
  padding: 0px;
}





#logo{
  float: none;
  height: 35px;
  padding-left: 0px;
}
li{
 display: block;
}
#nav{
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}
#wrapper{
  padding-top: 0px;
  padding-right: 0px;
  float: none;
}
}
@media screen and (max-width: 480px){
#mainimage h1{
  padding-top: 30vh;
  font-size: 40px;
  margin-left: 20px;
  margin-right: 20px;

}
#mainimage h3{
  font-size: 25px;
  margin-left: 20px;
  margin-right: 20px;
}
#about p{

    font-size: 20px;
}
#about h1{
  font-size: 40px;
}
}
@media screen and (min-width: 1600px){

  #mainimage h1{
    font-size: 100px;
  }

  #mainimage h3{
    font-size: 50px;
  }

  #about h1{
    font-size: 70px;
  }
  #about p{
    font-size: 35px;
  }
  #details h1{
    font-size: 70px;
  }

}