*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
}
body{
  font-family: "Poppins",sans-serif;
}
h1{
  font-size: 2.6rem;
}
li,button,label,input,p{
  font-size: 2rem;
}
h2{
  font-size: 4.8rem;
}
h3{
  font-size: 3rem;
  font-weight:normal ;
}
h4,h5{
  font-size: 2.8rem;
}
a{
  color: white;
  text-decoration: none;
}
button{
  padding: 2rem 6rem;
  background: #4c6e97;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  transition:all 1s ease-in-out;
animation: cloudAnimation 2s infinite alternate 1.5s;
}
button:hover{
  background: #27394e;
  font-size: 2.4rem;
}
/*Nav Section with hero*/
.main-head{
  background:#131c27 ;
  color: white;
}
nav{
  min-height: 10vh;
  padding: 2rem;
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
  flex-wrap: wrap ;
}
nav ul{
  display: flex;
  flex: 1 1 40rem;
  justify-content: space-around;
  align-items: center;
  list-style: none;
}
#logo{
  flex: 2 1 40rem;
  font-family: "Pattaya",sans-serif;
  font-weight: 400;
}
.hero{
   background: linear-gradient(rgba(0,0,0,0.5),transparent),url("img/landing-page.jpg") no-repeat center;
  min-height:90vh ;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
}
/*Benefits Section*/
#locations{
  background-size: cover;
  min-height: 100vh;
background:  linear-gradient(rgba(0,0,0,0.5),transparent),url("/img/new-york-page.png") no-repeat center;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.locations-head{
  width: 90%;
  margin: auto;
}
.locations-head h2{
  padding: 1rem 0rem;
  text-decoration: underline;
}
.locations-head h3{
  padding: 4rem 0rem;
  background: linear-gradient(#131c27,#663b34);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cloud{
  position: absolute;
  top: 0%;
  right: 0%;

}
.moving-cloud-1{
animation: cloudAnimation 3s infinite alternate ease-in-out;
}
.moving-cloud-2{
  animation: cloudAnimation 4s infinite alternate ease-in-out;
  top: 20%;
  z-index: -1;
  opacity: 0.5;
}
@keyframes cloudAnimation {
  /*0%{*/
  /*  background: lightblue;*/
  /*}*/
  /*25%{*/
  /*  background: rgb(35,98,119);*/
  /*}*/
  /*100%{*/
  /*  background: rgb(99,35,119);*/
  /*}*/
  from{
    transform: translate(10%,-10%);
  }
  to{
    transform: translate(0%,0%);
  }
}
/*Benefits Section*/
.benefits-head{
  background: #343c44;
  padding: 3rem;
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}
.benefits-head h3{
  padding: 1rem;
}
.cards{
  width: 90%;
  margin: auto;
  display: flex;
  min-height: 70vh;
  align-items: center;
  flex-wrap: wrap;
}
.card{
  /*background: lightcoral;*/
  text-align: center;
  flex: 1 1 25rem;
  min-height: 45vh;
  margin: 2rem 5rem;
  box-shadow:0px 10px 10px rgba(0,0,0,0.1),0px 20px 20px rgba(0,0,0,0.1);

}
.cards img{
  max-width:15%;
  margin: 2rem;
  background: #4c6e97;
  /*height: 100px;*/
}
.card h4, .card p {
  padding: 1rem;
}

.card-icon{
  background:#4c6e97;
}
#contact{
  min-height: 100vh;
  background-size: cover;
  background:linear-gradient(rgba(0,0,0,0.5),transparent), url("/img/contact-mountain.png") no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.from-wrapper{
  background: rgba(19,28,29,0.8);
  width: 60%;
  color: white;
  border-radius: 20px;
}
.form-head{
  text-align: center;
  padding: 4rem;
}
.name-form,.email-form{
  padding: 3rem;
  text-align: center;
}
.from-wrapper button{
  width: 80%;
  padding: 2rem;
  margin-top: 8rem;
  border-radius:20px ;
}
.from-wrapper input{
  padding: 1rem 3rem;
}
footer{
  color: white;
  background: rgba(19,28,39,1);
}
.footer-wrapper{
  display: flex;
  padding: 2rem;
  width: 90%;
  margin: auto;
  align-items: center;
  min-height: 10vh;
  flex-wrap: wrap;
}
footer ul{
  display: flex;
  list-style: none;
  flex: 1 1 40rem;
  justify-content: space-between;
  align-items: center;
}
footer h5{
  flex: 1 1 40rem;
}
button:focus{
  background: #2c3f57;
  outline-style: solid;
  outline-color: cornflowerblue;
}
/*Media Queries*/
@media screen and (max-width:932px) {
  html{
  font-size: 45%;
  }
 nav{
    text-align: center;
  }
  #logo{
    padding: 2rem;
  }
  .cloud{
    height: 40rem;
  }
  .moving-cloud-1{
   z-index: -1;
  }
  .moving-cloud-2{
  z-index: -2;
  }
  .locations-head h3{
    background:rgba(19,28,39,0.8);
    -webkit-text-fill-color:white  ;
  }
  footer{
    text-align: center;
  }
  footer h5{
    padding-bottom: 2rem;
  }
  .from-wrapper{
    width: 100%;
  }

}