/* gantari font properties */

.gantari-<uniquifier> {
    font-family: "Gantari", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }

  /* platypi font properties */
  
.platypi-<uniquifier> {
    font-family: "Platypi", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }

  /* font styling */

  h1 {
    font-family: "Platypi", serif;
    font-size: 64px;
    font-weight: 500;
    font-style: normal;
color: white;
  }

  h2 {
font-family: "Platypi", serif;
    font-size: 48px;
    font-weight: 500;
    font-style: normal;
color: #3E3E3E;

  }

  h3 {
    font-family: "Platypi", serif;
    font-size: 32px;
    font-weight: 500;
    font-style: normal;
color: #3E3E3E;
    
  }

  h4{
    font-family: "Platypi", serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
color: #3E3E3E;

  }

  .p1 { 
    font-family: "Gantari", serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    color: white;
  }

  .p2 {
    font-family: "Gantari", serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    color: #3E3E3E;

  }

  .p3 {
    font-family: "Gantari", serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: #3E3E3E;
  }


  .p4 {
    font-family: "Gantari", serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #3E3E3E;
  }


  /* nav styling */

  nav {
background-image: url(../figmadownloadedimages/navbar.jpg);
width: 100%;
padding: 20px;
background-size: cover;

  }

  nav a {
color: #3E3E3E;
text-decoration: none;


  }

  nav p {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  

  }

  

  /*nav div {
    display: flex;
    justify-content: space-around;
 
  }*/

  nav a:hover {
    font-weight: bolder;
  }


  .booknow1 {
    background-color: #206CAB;
    border-radius: 5px;
    padding: 10px;
    /* how to get text a different color? tried using <span> but that did not work */
      }

      nav span a {
        color: white;

      }
    

  /* header styling */

  header {
    background-image: url(../figmadownloadedimages/headerimage.png);
    padding: 600px 980px 100px 50px;
   background-size: cover;

  }

  header a {
    color: white;
   
  }
  header span {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
    
  }

  header a:hover {
font-weight: bolder;
  }

  #hero {
    height: 100vh;
 background-color: lawngreen;
 overflow: hidden;

}
  /*#hero img { 
  
    max-height: 100%; 
    min-width: 100%;  
    object-fit: cover; 
    vertical-align: bottom; 
  
    } */

    
  .learnmore1 {
    background-color: #206CAB;
    border-radius: 5px;
    padding: 10px;
    text-decoration: none;
  }

  .booknow2 {
    background-color: #206dab00;
    border-radius: 5px;
    padding: 10px;
    text-decoration: none;

  }

  /* about section styling */

  main {
background-image: url(../figmadownloadedimages/aboutimage.png);
padding: 250px; 
background-size: cover;
display: flex;
justify-content: space-between;
    column-gap: 30px;
  

  }

  

  /* our services section styling */

#services {

  background-image: url(../figmadownloadedimages/servicesimage.png);
background-size: cover;
text-align: center;

}

#services div {
display: flex;
justify-content: space-around;
flex-direction: column;

}


  section  {
background-image: url(../figmadownloadedimages/servicesimage.png);
padding: 100px 0px 100px 100px;
background-size: cover;
justify-content: center;
  }

  

  section a {
    color: #3E3E3E; 
    text-decoration: none;
  }

  section a:hover {
    font-weight: bolder;
    width: 100;

  }


  /* solid border */
hr.solid {
  border-top: 3px #b2e2fd;

}


  /* pamper section styling */

  #pamper {
    background-image: url(../figmadownloadedimages/pamperimage.png);
padding: 100px 0px 100px 100px;
background-size: cover;
  }

  section {
background-image: url(../figmadownloadedimages/pamperimage.png);
padding: 100px 0px 100px 100px;
background-size: cover;

  }

  
  section span a {
    color: white;
    font-size: 18px;

  }
  
  

  /* contact us styling */
  section {
  background-image: url(../figmadownloadedimages/contactimage.png);
  padding: 100px 0px 100px 100px;
  background-size: cover;

  }

  /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #206CAB;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  font-weight: bolder;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

  /* footer styling */

  footer {
background-image: url(../figmadownloadedimages/footerimage.png);
padding: 50px 100px 50px 100px;
  background-size: cover;
  display: flex;
  flex-direction: column; 

  }

  footer div {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    padding: 10px 100px;

  }

  footer span {
    display: flex;
    flex-direction: column; 
  }

 footer a {
    color: #3E3E3E; 
    text-decoration: none;
    display: flex;
  flex-direction: column; 
  }

 footer a:hover {
    font-weight: bolder;

  }

  footer .p4 {
    display: flex;
    align-items: flex-end; 
  }

  /* tablet */

  @media (max-width: 825px) {
  body {
   background-color: pink;
  }   
   nav {
    display: flex;
    flex-direction: column;

  }
header {
  padding: 10px 30px;
}

#about {
  padding: 10px 30px;
}
#p2 {
  padding: 10px 30px;

}

}



  /* mobile*/ 

  @media (max-width: 450px) {
    body {
        background-color: purple;
    }
    nav {
      display: flex;
      flex-direction: column;
    }
    header {
      padding: 10px 30px;
    }

    #about {
      padding: 10px 30px;
    }
    #p2 {
      padding: 10px 30px;

    }

  }