* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

#nav {
  width: 100%;
  background-color: rgb(175, 175, 7);
  height: 11vh;
}

.navrap {
  width: 80%;
  margin: auto;
}

.logo {
  padding-left: 457px;
}

.logo img {
  width: 100px;
  height: 50px;
  margin-top: 10px;
}

.navi {
  background-color: rgb(218, 221, 12) !important;
}

.card {
  height: 70vh !important;
}

.menu {
  color: rgb(17, 8, 8) !important;
  text-transform: uppercase;
  font-weight: bold;
}

/* mid */

.mid {
  width: 100%;
  height: 60vh;
}

.mid h1 {
  margin-top: 40px;
  font-size: 40px;
  color: rgb(94, 109, 9);
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  


}

.midrap {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box {
margin-top: 50px;
}

.box p {
  font-size: 18px;
  color: black;
  text-align: justify;
  text-align: center;


}

/* mid 1 */
.mid1 {
  width: 100%;
  height: 50vh;
}


.midrap1 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box1 {
 margin-top: 50px;
}

.box1 img {
  width: 100%;
  height: 100%;
}

.hover-effect {
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  border-radius: 10px;
}
.hover-effect:hover {
  transform: scale(1.1);
}

/* mid2 */

.mid2 {
  width: 100%;
  height: 35vh;
}

.mid2 h1 {
  margin-top: 40px;
  font-size: 40px;
  color: rgb(94, 109, 9);
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;



}

.midrap2 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box2 {
margin-top: 50px;
}

.box2 p {
  font-size: 18px;
  color: black;
  text-align: justify;
  text-align: center;

}
/* mid3 */

.mid3 {
  width: 100%;
  height: 45vh;
}


.midrap3 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box3 {
 margin-top: 50px;
}

.box3 img {
  width: 100%;
  height: 100%;
}
.hover-effect {
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  border-radius: 10px;
}
.hover-effect:hover {
  transform: scale(1.1);
}

/* mid4  */

.mid4 {
  width: 100%;
  height: 40vh;
}

.mid4 h1 {
  margin-top: 40px;
  font-size: 40px;
  color: rgb(94, 109, 9);
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 


}

.midrap4 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box4 {
margin-top: 50px;
}

.box4 p {
  font-size: 18px;
  color: black;
  text-align: justify;
  text-align: center;
}
/* mid5 */

.mid5 {
  width: 100%;
  height: 60vh;
}


.midrap5 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box5 {
 margin-top: 50px;
}

.box5 img {
  width: 100%;
  height: 80%;
}
.hover-effect {
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  border-radius: 10px;
}
.hover-effect:hover {
  transform: scale(1.1);
}

/* mid6 */

.mid6 {
  width: 100%;
  height: 45vh;
}

.mid6 h1 {
  margin-top: 40px;
  font-size: 40px;
  color: rgb(94, 109, 9);
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}

.midrap6 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box6 {
margin-top: 50px;
}
.box6 p {
  font-size: 18px;
  color: black;
  text-align: justify;
  text-align: center;
 
}
/* mid7 */
.mid7 {
  width: 100%;
  height: 45vh;
}


.midrap7 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box7 {
 margin-top: 50px;
}

.box7 img {
  width: 100%;
  height: 100%;
}
.hover-effect {
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  border-radius: 10px;
}
.hover-effect:hover {
  transform: scale(1.1);
}

/* mid8 */

.mid8 {
  width: 100%;
  height: 45vh;
}

.mid8 h1 {
  margin-top: 40px;
  font-size: 40px;
  color: rgb(94, 109, 9);
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 

}

.midrap8 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box8 {
margin-top: 50px;
}
.box8 p {
  font-size: 18px;
  color: black;
  text-align: justify;
  text-align: center;

}

/* mid9 */
.mid9 {
  width: 100%;
  height: 75vh;
}


.midrap9 {
  width: 95%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.box9 {
 margin-top: 50px;
}

.box9 img {
  width: 100%;
  height: 80%;
}
.hover-effect {
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  border-radius: 10px;
}
.hover-effect:hover {
  transform: scale(1.1);
}

/* footer */

.footer {
  width: 100%;
  background-color: rgb(39, 39, 39);
  height: 80vh;

}

.footrap {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
}

.box10 h1 {
  font-size: 20px;
  margin-top: 30px;
  color: rgb(241, 237, 237);
  font-weight: bold;

}

.box10 ul li{
  color:rgb(105, 104, 104);
  list-style: none;
  margin-left: -30px;
  padding-top: 8px;
  font-weight: bold;
}

.box10 table{
  margin-top: 30px;
}
.box10 ul li:hover {
  color: rgb(230, 229, 229);
  text-decoration: underline;
}

  



