* {
    margin: 0; 
    padding:0; 
    box-sizing:border-box; 
}

html{
    font-size:62.5%
}

h1{
    font-size:2.6rem; 
}

li, button, label, input, p{
    font-size:2rem;
}

h2{
    font-size:4.0rem; 
}
h3{
    font-size:2.5rem; 

    font-weight: normal;
}

h4, h5{
    font-size:2.8rem;
}
body{
    font-family: "Poppins",sans-serif;
}

a{
    color:white;
    text-decoration: none;
}
/*
Nav section with hero
*/

.main-head{
    background:#131c27 ;

}

nav{
    display: flex;
    width: 90%;
    margin:auto;
    padding: 2rem;
  align-items: center;
  min-height:10vh;
min-height: 2rem;
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;
    align-items:center;
    font-family: 'Pattaya', sans-serif;
    color: white;
    font-weight: 400;;

}


button{
    padding: 2rem 6rem; 
    background: #4c6e97;
    border:none;
color: white;
font-size: 1.8rem;
cursor: pointer;
transition: background 0.5s ease-in-out;
}

button:hover{
    background:#27394e ;
}


.hero{
    min-height: 90vh;

    background: linear-gradient(rgba(0,0,0, 0.5), transparent),url("/img/landing-page.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    flex-direction:column;
    justify-content:center; 
    align-items:center;
    text-align:center;

}

.hero h3{
    padding:5rem
}


/**
LOCATION SECTION
*/

#locations{
    min-height: 100vh;
    background: linear-gradient(rgba(0,0,0, 0.5), transparent),url("/img/new-york-page.png");
    background-size:cover;
    background-position: center;
    display: flex;

align-items: center;
position: relative;
overflow: hidden;
}

.location-head h2{
    margin-top: -9rem;
}


.cloud{
    position:absolute;
    top:0%;
    right: 0%;

}
.moving-cloud-1{
    animation: cloudAnimation 3s infinite alternate ease-in-out;

}
.moving-cloud-2{
    top:20%;
    z-index:-1;
    opacity: 0.5;
    animation: cloudAnimation 3.5s infinite alternate ease-in-out;

}

@keyframes cloudAnimation{
    from{

        transform: translate(10%, -10%);
    }to{
        transform: translate(0%,0%);
    }
}

.location-head{
    width: 90%;
margin: auto;

}

.location-head h2{
    padding: 1rem 0rem;
    text-decoration:underline;
  
}

.location-head h3{
    padding: 4rem 0rem;
    background: linear-gradient(#131c27, #663b34);
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;

}

/*
BENEFITS SECTION 
*/

.benefits-head{
    background: #343c44;
    padding: 3rem;
    min-height: 30vh;
    display: flex;
    flex-direction:column ;
    justify-content: center;
    text-align: center;
    color: white;
    text-align:center;

}

.benefits-head h3{
    padding: 1rem;
}
.cards{
    width: 90%;
    margin: auto;
    display: flex;
    min-height: 30vh;
    flex-wrap: wrap;
margin-top: 6rem;
margin-bottom: 6rem;

}
.card{
    text-align: center;
    flex: 1 1 25rem;
    min-height: 30vh;
    margin: 2rem 5rem;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1);

}
.card p{
    padding: 2rem;
}
.card h4{
    padding: 2rem;
}

.cards img{
    max-width: 25%;
    padding: 2rem 2rem;

}
.card-icon{
    background: #27394e;
}

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

    html{
        font-size: 45%;
    }
    nav{
        text-align: center;
        padding:2rem;
    }
    .cloud{
        height: 40rem;

    }
    .moving-cloud-1{
        z-index:-1;
    }
    .moving-cloud-2{
        display: none;
    }
    .location-head h3{
        background:rgba(19,28,39,0.8);
        -webkit-text-fill-color: white;
    
    }

    #logo{
        padding: 2rem;
    }

    footer{
        text-align: center;
    }

    footer h5{
        padding-bottom: 2rem ;
    }
.form-wrapper{
    width: 100%;
}
}

#contact{
    min-height: 100vh; 
    background:  linear-gradient(rgba(0,0,0, 0.5), transparent), url("/img/contact-mountain.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; 
    justify-content: center;

}

.form-wrapper{
    background:rgba(19,28,39,0.8);
    width:60%; 
    color: white;
    border-radius: 20px;
}
.form-wrapper label{
    margin:0rem 3rem;
}
.form-wrapper button{
    width:100% ;
    padding: 2rem;
    margin-top:8rem;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

}

.form-wrapper input{
    padding:1rem 3rem
}
.form-head{
    text-align: center;
    padding: 4rem;
}

.name-form, 
.email-form{
    padding:3rem; 
    text-align: center;
}

.footer-wrapper{
    display: flex;
    padding:2rem; 
    width: 90%;
    margin: auto;
    align-items: center;
    min-height: 10vh;
    flex-wrap: wrap;
}
footer{
    background:rgba(19,28,39, 1);
    color: white;
}
footer h5{
    flex: 1 1 40rem;
}

footer ul{
    display: flex;
    list-style: none;
    flex: 1 1 40rem;
    padding:1rem;
    align-items: center;
    justify-content: space-between;

}