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

.navi {
    background-color:  rgb(240, 210, 170);
}

.menu {
    color: goldenrod!important;
    font-weight: bold!important;
    font-size: 15px!important;
}
.menu:hover{
    color: orangered!important;
    border-bottom: 2px solid white;
}

/* banner */
.banner {
    height: 80vh;
}

/* middle */
.midrap{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 30px;
    padding-bottom: 30px;
}
.box{
  width: 100%;
}
.box img{
  width: 100%;
  height: 30vh;
}
.midrap1{
  width: 100%;
  padding-left: 70px;
  padding-bottom: 30px;
}
.midrap1 img{
  width: 95%;
  border-radius: 10px;
}
.midrap1 img:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 black;
}
.midrap2{
  width: 100%;
}
.midrap2 h1{
  text-align: center;
  font-family: initial;
  color: rgb(185, 133, 216);
}
.midrap2 p{
  width: 95%;
  padding-left: 70px;
  text-align: center;
  font-family: cursive;
  color: rgba(0, 0, 0, 0.6);
}
.midrap3 h1{
  width: 100%;
  text-align: center;
  padding-top: 20px;
  font-family: initial;
  color: cadetblue;
}
.midrap3 h2{
  width: 100%;
  text-align: center;
  color: blue;
}
.midrap4{
  width: 100%;
}
.box1{
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  margin-top: 30px;
  padding-bottom: 30px;
}
.midrap4 img{
  width: 100%;
  height: 50vh;
  border-radius: 10px;
}
.midrap4 img:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 black;
}
.midrap4 p{
  padding-top: 60px;
  font-family: initial;
  color: darkgreen;
  font-size: 20px;
}
.midrap5{
  width: 100%;
  padding-left: 600px;
}
.box2{
  width: 25%;
  background-color: blue;
  border-radius: 10px;
}
.box2 p{
  text-align: center;
  font-size: 25px;
  color: white;
}
.box2 a{
  text-decoration: none;
}
.box2:hover{
  background-color: blueviolet;
}
.midrap6{
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  margin-top: 30px;
  padding-bottom: 30px;
}
.midrap6 {
  padding-top: 30px;
}

.box5 {
  width: 85%;
  padding-left: 200px;
}

.box5 img {
  width: 30%;
  height: 30vh;
}
.midrap7 {
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap: 30px;
  /* grid-row-gap: 20px; */
  margin-top: 30px;
  padding-bottom: 30px;
  background-image: url(footer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-left: 80px;  
  /* padding: 20px; */
}
.box6{
  width: 100%;
  margin-top: 20px;
}
.box6 h3{
  text-align: center;
  font-family: initial;
  color: rgb(92, 88, 88);
  font-weight: bold;
}
.box6 p{
  text-align: center;
 font-family: cursive;
 color: brown;
 font-weight: bold;
 font-size: 15px;
}
.box6 a{
  text-decoration: none;
}
.box6 p:hover{
  color: goldenrod;
}
.box7{
  width: 100%;
  margin-top: 20px;
}
.box7 h3{
  text-align: center;
  font-family: initial;
  color: rgb(92, 88, 88);
  font-weight: bold;
}
.box7 p{
  text-align: center;
 font-family: cursive;
 color: brown;
 font-weight: bold;
 font-size: 15px;
}
.box7 a{
  text-decoration: none;
}
.box7 p:hover{
  color: goldenrod;
}
.box8{
  width: 100%;
  margin-top: 20px;
}
.box8 h3{
  text-align: center;
  font-family: initial;
  color: rgb(92, 88, 88);
  font-weight: bold;
}
.box8 p{
  text-align: center;
 font-family: cursive;
 color: brown;
 font-weight: bold;
 font-size: 15px;
}
.box8 a{
  text-decoration: none;
}
.box8 p:hover{
  color: goldenrod;
}
.box9{
  width: 100%;
  margin-top: 20px;
}
.box9 h3{
  text-align: center;
  font-family: initial;
  color: rgb(92, 88, 88);
  font-weight: bold;
}
.box9 p{
  text-align: center;
 font-family: cursive;
 color: brown;
 font-weight: bold;
 font-size: 15px;
}
.box10{
  width: 100%;
  margin-top: 20px;
}
.box10 h3{
  text-align: center;
  font-family: initial;
  color:rgb(165, 157, 157);
  font-weight: bold;
}
.midrap8{
  width: 100%;
}
.midrap8 p{
  text-align: center;
  color: rgb(197, 17, 53);
  font-family: initial;
  font-weight: bold;
}
.midrap8 p span{
  color: navy;
  font-weight: bold;
}
.midrap8 p a{
  text-decoration: none;
}