/* Universal Colour Palette */
/* 
off white #FBFFF5
light green #769341
dark green #2C631C
lighter brown #423704
dark brown #273315 
*/

/* Universal Fonts */
/* .montserrat-<base-font> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.onest-<uniquifier> {
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

/* Universal Styles */
*{
  margin: 0;
}

h1{
  font: 600 32px "onest", sans-serif;
  color: #2C631C;
  margin: 3vh 0 1vh;
}

h2{
  font: 600 30px "onest", sans-serif;
  color: #2C631C;
}

h3{
  font: 600 28px "onest", sans-serif;
  color: #2C631C;
}

h4{
  font: 500 26px "onest", sans-serif;
  color: #2C631C;
}

h5{
  font: 500 26px "Montserrat", Arial, sans-serif;
  color: #2C631C;
}

h6{
  font: 600 18px "Montserrat", Arial, sans-serif;
  color: #2C631C;
}

p{
  font: 400 18px "Montserrat", Arial, sans-serif;
  color: #273315;
}

a{
  color: #2C631C;
  text-decoration: none;
}

a:hover{
  opacity: 80%;
  text-decoration: underline;
}

.universal-standard-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 10fr 1fr 2fr;
  grid-template-rows: 0.2fr 3fr 1fr;
}

header{
  grid-area: 1/1/2/6;
  background-color: #769341;
  display: flex;
}

.header_logo{
  margin-top: 1vh;
  margin-right: 2vw;
  margin-left: 3vw;
}

header ul{
  list-style-type: none;
  display: flex;
  /* font: 400 ; */
  margin-right: 1vw;
}

header li{
  margin: 5vh 4vw;
}

header a{
  text-decoration: none;
  color: #FBFFF5;
  font: 400 18px "Montserrat", Arial, sans-serif;
}

.login-link-icon{
  height: 60%;
  width: auto;
  margin: 3vh 3vw;
}

content{
  background-color: #FBFFF5;
}

footer{
  grid-area: 3/1/4/6;
  background-color: #769341;
  display: flex;
  justify-content: space-between;
}

.footer_logo img{
  width: 18vw;
}

.footer_logo{
  width: 18vw;
  height: 12vh;
  margin: 2vh 5vw;
}

.copyright-check{
  color: #FBFFF5;
  padding-top: 17vh;
  font: 100 12px "Montserrat", Arial, sans-serif;
}

footer ul{
 padding: 5vh 18vw 5vh 5vw;
}

footer li{
  list-style-type: none;
  padding-bottom: 1vh;
  font: 300 14px "Montserrat", Arial, sans-serif;
}

footer a{
  text-decoration: none;
  color: #FBFFF5;
}

.left-content{
  grid-area: 2/1/3/3;
  background-image: url("fern_raised.jpg");
  background-position: center;
  background-size: cover;
  background-color: #423704;
}

.right-content{
  grid-area: 2/4/3/6;
  background-image: url("fern_inHands.jpg");
  background-position: center;
  background-size: cover;
  background-color: #423704;
}

form{
  width: 50%;
  margin: 0 25%;
  display: flex;
  flex-direction: column;
  background-color: #769341;
  color: #FBFFF5;
  border-radius: 15px;
  padding: 2vh 2vw;
  box-shadow: 2px 2px 2px 2px #c3cfac;
  margin: 5vh 0 7vh;
}

form h3{
  align-self: center;
  padding-top: 3vh;
}

form input{
  margin: 1vh 0 2vh;
}

form button{
  align-self: center;
}

label{
  padding-top: 2vh;
  font: 500 18px "Montserrat", Arial, sans-serif;
}

button{
  color: #FBFFF5;
  background-color: #273315;
  width: fit-content;
  padding: 1vh 2vw;
  border-radius: 5px;
}

.home-inner-grid{
  grid-area: 2/3/3/4;
  display: grid;
  background-image: linear-gradient(#FBFFF5, #cdd7b9);
  align-items: center;
  padding: 5vh 5vw;
}

.home-inner-grid section{
  padding-top: 5vh;
}

.section-alt{
  text-align: right;
}

.about-inner-grid{
  background-color: #FBFFF5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh 5vw;
}

.contact-inner-grid{
  background-color: #FBFFF5;
  align-items: center;
  padding: 5vh 5vw;
}

.contact-inner-grid h1, .contact-inner-grid p{
  text-align: center;
  padding-top: 3vh;
}

.contact-inner-grid form{
  margin: 5% 22% 10%;
}

.practitioners-inner-grid{
  background-color: #FBFFF5;
  padding: 5vh 5vw;
}

.practitioners-inner-grid p{
  padding: 4vh 0;
}

.practitioner-card-container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.practitioner-card{
  width: 15vw;
  height: 40vh;
  border: 3px solid #769341;
  border-radius: 2px;
  padding: 3vh 3vw;
}

.services-inner-grid{
  background-color: #FBFFF5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh 5vw;
}

.services-inner-grid p{
  padding: 2vh 0 4vh;
}

.service-card-container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.service-card{
  width: 15vw;
  height: 35vh;
  border: 3px solid #769341;
  border-radius: 2px;
  padding: 3vh 3vw;
}

.voucher-inner-grid{
  background-color: #FBFFF5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh 5vw;
}

.voucher-inner-grid h1, .voucher-inner-grid p{
  text-align: center;
}

.admin-inner-grid{
  background-color: #FBFFF5;
  align-items: center;
  padding: 5vh 5vw;
}

.login-page{
  background-color: #769341;
  display: grid;
  justify-items: center;
  font-family: Montserrat, Arial, sans-serif;
}

.login-section{
  background-color: #FBFFF5;
  width: 20vw;
  padding: 5vh 8vw;
  margin-top: 10vh;
  border-radius: 10px;
}

.login-page h1{
  justify-self: center;
  padding: 2vh 0;
}

#voucher-purchase-form{
  margin: 5% 22%;
}

/* .login-section form{
  
} */