*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
/* nav bar */
.navi{
    background: linear-gradient(to bottom, rgb(89, 19, 19) ,rgb(79, 13, 13));
    /* top: 0px; */
    color: black;
    /* border: 2px solid black; */
}
.main{
  color: black;
    /* margin-left: 350px; */
    /* border: 2px solid black; */
}
.new{
  color: black;
}
.name{
    color: white;
    font-size: 18px;
    font-weight: 600;
}
.name:hover{
    color: rgb(225, 191, 0);
    /* font-weight: 600; */
}
.navi2{
    width: 1390%;
    height: 53.5vh !important;
    margin-left: -200px !important;
    border:0px solid white !important;
    /* border: 2px solid black; */
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    background-color: rgba(0,0, 0,0.5) !important; 
}
.navi2 p{
    background-color: rgba(0,0, 0,0.8);
}
.sub{
    width: 100%;
    height: 90vh;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-column-gap: 15px;
    /* border: 2px solid black; */
}
/*  */
/*  */

.box1{
    width: 100%;
    height: 60vh;
    /* border: 2px solid black; */
    padding-top: 15px;
    
}
.box1 p{
    text-align: center;
    font-size: 20px;
    color: rgb(225, 191, 0);
}
.box2{
    width: 100%;
    height: 60vh;
    /* border: 2px solid black; */
    padding-top: 15px;
    
}
.box2 p{
    text-align: center;
    font-size: 20px;
    color: rgb(225, 191, 0);
}
.box3{
    width: 100%;
    height: 60vh;
    /* border: 2px solid black; */
    padding-top: 15px;
    
}
.box3 p{
    text-align: center;
    font-size: 20px;
    color: rgb(225, 191, 0);
}
.box4{
    width: 100%;
    height: 60vh;
    /* border: 2px solid black; */
    padding-top: 15px;
    
}
.box4 p{
    text-align: center;
    font-size: 20px;
    color: rgb(225, 191, 0);
}
.box5{
    width: 100%;
    height: 60vh;
    /* border: 2px solid black; */
    padding-top: 15px;
    
}
.box5 p{
    text-align: center;
    font-size: 20px;
    color: rgb(225, 191, 0);
}
.box6{
    width: 100%;
    height: 60vh;
    /* border: 2px solid black; */
    padding-top: 15px;
    
}
.box6 p{
    text-align: center;
    font-size: 20px;
    color: rgb(225, 191, 0);
}
/*  */
/*  */


.menu1 ul li{
    /* padding: 25px; */
    display: inline;
    /* margin: auto; */
}
.menu1 ul li a{
    color: white;
}
.menu1 ul li a:hover{
    color: rgb(225, 191, 0);
}
.ban1{
    width: 100%;
    height: 126.9vh;
    margin-top: -23px;
    /* border: 2px solid black;  */
}
.banrap1{
    width: 100%;
    height: 126.9vh;
    margin: auto;
    /* border: 2px solid black;  */
}

.ban2{
    width: 100%;
    height: 130.5vh;
    margin-top: -8px;
    /* border: 2px solid rgb(7, 7, 7);  */
}
.banrap2{
    width: 100%;
    height: 130.5vh;
    margin: auto;
    /* border: 2px solid black;  */
}
.img-area{
  width: 100%;
  margin: auto;
}

.single-img {
  position: absolute;
  width: 100%;
  /* float: left; */
  /* margin: 0 1%; */
}

.image {
  /* display: block; */
  width: 100%;
  height: 130vh;
}

.img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0, 0,0.8);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.single-img:hover .img-overlay {
  height: 100%;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-family: poppins;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
}
.text span{
  font-weight: 300;
}
/* Middle 3 */
.mid3{
    width: 100%;
    height: 80vh;
    margin-top: -5px;
    /* padding-top: 30px; */
    /* border: 2px solid black; */
}
.midrap3{
    width: 100%;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.9); */
    /* border: 2px solid black; */
    background-color: rgb(63, 63, 63);
    height: 80vh;
    padding-top: 139px;
    margin: auto;
    /* border: 2px solid black; */
}
.midrap4{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    /* grid-column-gap: 20px; */
}
.box7{
    width: 100%;

}
.box8{
    width: 100%;
    
}
.box9{
    width: 100%;
    
    
}
.midrap5{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    /* grid-column-gap: 20px; */
}
.box10{
    width: 100%;
    
   
}
.box11{
    width: 100%;
    
    
}
.box12{
    width: 100%;
    
   
}
.midrap6{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    /* grid-column-gap: 20px; */
}
.box13{
    width: 100%;
    
    
}
.box14{
    width: 100%;
    
    
}
.box15{
    width: 100%;
    
}
/* Footer */
.foot{
    width: 100%;
    height: 50vh;
    background-color: rgb(45, 45, 57);
    /* border: 2px solid black; */
  }
  .footrap{
    width: 90%;
    /* border: 2px solid black; */
    padding-top: 25px;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-column-gap: 20px;
  }
  .box20{
    width: 100%;
    /* border: 2px solid black; */
    text-align: center;
  }
  .box20 h1{
    font-size: 25px;
    color: white;
    font-style: oblique;
  }
  .box20 ul{
    text-align: center;
    list-style: none;
  }
  .box20 ul li a{
   color: white;
   font-size: 15px; 
   font-style: italic;
   text-decoration: none;
  }
  .box16{
    width: 100%;
    /* border: 2px solid black; */
    text-align: center;
  }
  .box16 h1{
    font-size: 25px;
    color: white;
    font-style: oblique;
  }
  .box16 ul{
    text-align: center;
    list-style: none;
  }
  .box16 ul li a{
   color: white;
   font-size: 15px; 
   font-style: italic;
   text-decoration: none;
  }
  .box17{
    width: 100%;
    /* border: 2px solid black; */
    text-align: center;
  }
  .box17 h1{
    font-size: 25px;
    color: white;
    font-style: oblique;
  }
  .box17 ul{
    text-align: center;
    list-style: none;
  }
  .box17 ul li a{
   color: white;
   font-size: 15px; 
   font-style: italic;
   text-decoration: none;
  }
  .box18{
    width: 100%;
    /* border: 2px solid black; */
    text-align: center;
  }
  .box18 h1{
    font-size: 25px;
    color: white;
    font-style: oblique;
  }
  .box18 ul{
    text-align: center;
    list-style: none;
  }
  .box18 ul li a{
   color: white;
   font-size: 25px; 
   font-style: italic;
   text-decoration: none;
  }
  .box19{
    width: 100%;
    /* border: 2px solid black; */
    text-align: center;
  }
  .box19 iframe{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .footfinal{
    width: 100%;
    height: 10vh;
    background-color: rgb(45, 45, 57);
  }
  .footfinalrap{
    width: 90%;
    margin: auto;
  }
  .menulast{
    text-align: center;
  }
  .menulast p{
    color: white;
    font-size: 15px;
    font-style: oblique;
  }