/*==========================
    font styles START
    ======================== */

/* Import font styles from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Slabo+27px&display=swap');

/* Font Classes for website */
.abel-regular {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.slabo-27px-regular {
  font-family: "Slabo 27px", serif;
  font-weight: 400;
  font-style: normal;
}

/*==========================
    font styles END
    ======================== */

/*==========================
    Background Images START
    ======================== */

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
    .bg-home{
      background-image: url("../img/sand-5100918_1920.jpg");
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
    }
     .bg-sub{
      background-image: url("../img/sand-5100918_1920.jpg");
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;

    }
    /*==========================
    Background Images End
    ======================== */
      
    /*==========================
    Link Styles START
    ======================== */
    a{
      text-decoration: none;
      color: rgb(151, 152, 121);
    
    }
    a:hover{
      color:white;
    }
   /* =======================
    Link Styles END
    ====================== */

/* =======================
    Heading and Paragraph styles START
    ====================== */

h1 {font-size: 6rem;}
h2 {font-size: 5rem;}
h3 {font-size: 4rem;}
h4 {font-size: 3rem;}
h5 {font-size: 2rem;}
h6 {font-size: 1.6rem;}

h1, h2, h3, h4, h5, h6 {
font-family: "Slabo 27px", serif;
  font-weight: 400;
  font-style: normal;
  padding: 0;
  margin: 0;
}

p {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.75;
  padding: 0;
  margin: 0 0 20px 0;
}

/* =======================
    Heading and Paragraph styles END
    ====================== */

    /*==========================
    Button Styles START
    ========================  */

    .action-btn {
      background-color:#000000;
      box-shadow: 0px 0px 3px 3px rgb(0, 0, 0, 0.1);
      font-family: "Slabo 27px", serif;
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      font-size: 1.2rem;
      color: #ffffff;
      padding:7px 17px 7px 17px;
      border: none;
      outline: none;
      border-radius: 5px;
      cursor: pointer;

    }
    .action-btn:hover {
      background-color: rgb(151, 152, 121);
      color: black;
    }
    /*==========================
    Button Styles END
    ========================  */

/* =======================
    Navbar START
    ====================== */

.nav-container {
  background-color: #000000;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.4);
  font-size: 1.2rem;
  font-family: "Slabo 27px", serif;
  font-weight: 400;
  font-style: normal;
  height: 60px;
  width: 100%;
  position: sticky;
  top: 0;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.navbar ul {
  display: flex;
}

.nav-container .navbar {
  justify-content: space-between;
}

.navbar ul li {
  list-style-type: none;
}

.nav-container .navbar ul li {
  padding: 0px;
  margin: 0 20px;
}

.nav-container h6 {
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-style: normal; 
}

.navbar h2 {
  padding: 0px;
  margin: 0;
}

.navbar a {
  color: #ffffff;
  text-decoration: none;
}

.navbar a:hover {
  color:  rgb(151, 152, 121);
}

@media screen and (min-width: 390px) and (max-width: 787px) {
  .nav-container {
    height: auto;
  }

  .nav-container .navbar {
    flex-direction: column;
  }
}

/* =======================
    Navbar END
    ====================== */

    /*==========================
    Home page and Sub Page Containers START
    ========================  */
    .homepage-container{
      background-color: rgb( 255, 255, 255, 0.0);
      width:90%;
      max-width:1200px;
      margin:0 auto;
      padding: 20px;
      text-align:center;

    }
    .homepage-container h1{
      margin:150px 0 -10px 0;
    }
    .subpage-container{
      background-color: rgb( 255, 255, 255, 0.0);
      width:90%;
      max-width:1200px;
      margin:0 auto;
      padding: 20px;
      text-align:center;
      flex-grow: 1;

    }

    .grid-container {
      display: flex;
      justify-content: center;

    }

    .grid-cards {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }

    .grid-card {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(151, 152, 121);
      color: white;
      border-radius: 10px;

    }


    .grid-cards a:hover {
      background-color: rgb(89, 88, 88);
      border-radius:10px;

    }


   /*==========================
    Home page and Sub Page Containers END
    ========================  */

/*==========================
    Subpage Content Styles START
    ========================  */


 .subpage-content {
  width:80%;
  height: 100%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
 }


 .photo {
  width: 40%;
  border-radius:10px;
 }

.subpage-content details{
  background: #f9f9f900;
  border: 1px solid #dddddd;
  border-radius: 10px;
  margin-bottom: 5px;
}

.subpage-container summary {
  padding: 20px;
  font-weight: bold;
  font-size: 1.1rem;
  color:#000000;
  cursor: pointer;
  outline: none;
  list-style-type: '🌇';
}

.subpage-content li {
  list-style-type: none;
}

.subpage-content h2 {font-size: 2.5rem;}

.subpage-container summary:hover{
  background-color: #8aa0b500;
  border-radius: 10px;
}
.subpage-container details p {
  padding: 10px;
  margin-left: 28px;
  line-height: 1.5;
  color:#000000;
}


.subpage-contain h2{
  font-size: 1.5rem;
  color:#333333;
  padding-bottom: 5px;
  margin-top: 1.5rem;
}

.subpage-contain ul{
  list-style: none;
  padding-left: 0;

}

.subpage-contain li{
  background-color: rgba(138, 210, 221, 0.);
  border-radius: 10px;
  padding:20px;
  margin-bottom: 10px;
  line-height: 1.5;

}
.subpage-content li a {
  font-weight: bold;
  font-size: 1.2rem;
  color:rgb(216, 219, 193);
  text-decoration: none;

}


.subpage-content li a:hover{
  text-decoration: underline;
  color: rgb(151, 152, 121);
}
/*==========================
    Subpage Content Styles END
    ========================  */

/*==========================
    Contact Form Styles START
    ========================  */



    form{
      font-family: "Slabo 27px", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1rem;
      line-height: 1.75;

    }

    input[type=text], select {
      width:100%;
      padding: 20px;
      margin: 10px 0px 20px 0px;
      display: inline-block;
      border: 1px solid #000000;
      border-radius: 10px;
      box-sizing:border-box;
      font-family: "Slabo 27px", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1rem;
      line-height: 1.75;
    }


    input[ type=email]{
      width: 100%;
      padding: 20px;
      margin: 10px 0px 20px 0px;
      display: inline-block;
      border: 1px solid #000000;
      border-radius: 10px;
      box-sizing:border-box;
      font-family: "Slabo 27px", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1rem;
      line-height: 1.75;
    }


    textarea {
      width: 100%;
      height: 150px;
      padding: 20px;
      margin: 10px 0px 10px 0px;
      box-sizing: border-box;
      border: 1px solid #000000;
      border-radius: 10px;
      background-color: #f8f8f8;
      resize: none;
      font-family: "Slabo 27px", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1rem;
      line-height: 1.75;
    }
    
    input[type=submit]{
      background-color:#000000;
      box-shadow: 0px 0px 3px 3px rgb(0, 0, 0, 0.1);
      font-family: "Slabo 27px", serif;
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      font-size: 1.2rm;
      color: #ffffff;
      padding:7px 17px 7px 17px;
      border: none;
      outline: none;
      border-radius: 5px;
      cursor: pointer;

    }
      input[type=submit]:hover {
      background-color: rgb(151, 152, 121);
      color: black;}






  /*==========================
    Contact Form Styles END
    ========================  */

/* =======================
    Footer Styles START
    ====================== */
.footer-container {
  background-color:rgba(129, 168, 181, 0);
  height: 40px;
  width:100%;
  padding:20px 0px 10px 0px;
}

.footer-content {
  text-align: center;
  color:white;
  font: size 0.8rem;
  font-family: "Abel", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* =======================
    Footer Styles END
    ====================== */