*{
    margin: 0px;
    padding: 0px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-sizing: border-box;
}
/* navigation bar */
#nav{
    width: 100%;
    height: 20vh;
    background: white;
}
.navrap{
    width: 90%;
    margin: auto;
}
.logo{
    position: absolute;
}
.logo img{
    height: 20vh;
    padding-top: 10px;
    padding-bottom: 10px;
}
.menu{
    float: right;
    margin-top: 10px;
    padding-right:60px ;
}
.menurap{
    border-radius: 15px;
    padding: 45px;
} 
.menurap ul li{
    display: inline;
}
.menurap ul li a{
    color:  grey;
    text-decoration: none;
    font-size: 17px;
    /* padding-left: 15px;
    padding-right: 15px; */
    padding: 15px; 
}
.menurap ul li a:hover{
    color: orange;
    border-bottom: 1px solid orangered;
    /* padding: 5px; */
}
/* banner */
.ban{
    width: 100%;
    height: 90vh;
    background-image: url(banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}
.banrap{
    width: 100%;
    height: 90vh;
    /* background-color: rgba(0, 0, 0, 0.3); */
}
.banrap1{
    float: right;
    margin-top: 200px;
    margin-right: 400px; 
    margin-left: 100px;
}
.name{
   text-align: center;
}
.name h1{
    color: aliceblue;
    font-size: 70px;
    text-align: center;
}
.name h2{
    color: aliceblue;
    font-size: 55px;
    text-align: center;
}
/* middle */
.midrap{
    width: 100%;
    background-color: white;
}
.midrap h1{
    text-align: center;
    padding-top: 30px;
    font-family: cursive;
    color: rgb(238, 28, 98);
}
.midrap p{
    text-align: center;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 10px;
    font-family: cursive;
    color: rgb(145, 92, 145);
}
.midrap1{
    width: 100%;
    padding-left: 600px;
    padding-right: 600px;
    margin-top: 20px;
}
.box{
    background-color: rgb(189, 23, 78);
}
.box p{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-family: cursive;
}
.box a{
  text-decoration: none;
}
.box :hover{
    background-color: rgb(139, 11, 54);
    color: white;
}
.midrap2{
    width: 100%;
    background-color: white;
}
.midrap2 h1{
    text-align: center;
    padding-top: 30px;
    font-family: cursive;
    /* color: rgb(238, 28, 98); */
}
.midrap3{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto ;
    grid-column-gap: 10px;
    grid-row-gap: 30px;
    margin-top: 40px;
    padding-bottom: 30px;
    padding-left: 10px;
}
.container {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container:hover .overlay {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container1 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay1 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container1:hover .overlay1 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container2 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s7.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay2 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container2:hover .overlay2 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container3 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay3 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay3 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container3:hover .overlay3 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container4 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay4 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s13.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay4 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container4:hover .overlay4 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container5 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay5 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s15.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay5 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container5:hover .overlay5 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container6 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s17.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay6 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container6:hover .overlay6 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container7 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay7 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s19.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay7 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container7:hover .overlay7 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container8 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay8 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s21.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay8 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container8:hover .overlay8 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container9 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay9 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s23.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay9 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container9:hover .overlay9 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container10 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay10 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s25.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay10 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container10:hover .overlay10 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .container11 {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay11 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-image: url(./s27.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .overlay11 p{
    text-align: center;
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
    color: brown;
    font-family: cursive;
  }
  .container11:hover .overlay11 {
    opacity: 1;
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }
  .midrap4{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 30px;
    margin-top: 40px;
    padding-bottom: 30px;
    /* padding-left: 10px; */
}
.box2{
    border: 2px solid gray;
}
.box2 img{
    width: 100%;
    height: 35vh;
}
.box2 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box3{
    border: 2px solid gray;
}
.box3 img{
    width: 100%;
    height: 35vh;
}
.box3 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box4{
    border: 2px solid gray;
}
.box4 img{
    width: 100%;
    height: 35vh;
}
.box4 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box5{
    border: 2px solid gray;
}
.box5 img{
    width: 100%;
    height: 35vh;
}
.box5 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box6{
    border: 2px solid gray;
}
.box6 img{
    width: 100%;
    height: 35vh;
}
.box6 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box7{
    border: 2px solid gray;
}
.box7 img{
    width: 100%;
    height: 35vh;
}
.box7 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box8{
    border: 2px solid gray;
}
.box8 img{
    width: 100%;
    height: 35vh;
}
.box8 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box9{
    border: 2px solid gray;
}
.box9 img{
    width: 100%;
    height: 35vh;
}
.box9 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box10{
    border: 2px solid gray;
}
.box10 img{
    width: 100%;
    height: 35vh;
}
.box10 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box11{
    border: 2px solid gray;
}
.box11 img{
    width: 100%;
    height: 35vh;
}
.box11 p{
    text-align: center;
    font-family: cursive;
    color: orangered;
}
.box12{
    border: 2px solid orangered;
}
.box12 img{
    width: 100%;
    height: 35vh;
}
.box12 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box13{
    border: 2px solid orangered;
}
.box13 img{
    width: 100%;
    height: 35vh;
}
.box13 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box14{
    border: 2px solid orangered;
}
.box14 img{
    width: 100%;
    height: 35vh;
}
.box14 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box15{
    border: 2px solid orangered;
}
.box15 img{
    width: 100%;
    height: 35vh;
}
.box15 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box16{
    border: 2px solid orangered;
}
.box16 img{
    width: 100%;
    height: 35vh;
}
.box16 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box17{
    border: 2px solid orangered;
}
.box17 img{
    width: 100%;
    height: 35vh;
}
.box17 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box18{
    border: 2px solid orangered;
}
.box18 img{
    width: 100%;
    height: 35vh;
}
.box18 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box19{
    border: 2px solid orangered;
}
.box19 img{
    width: 100%;
    height: 35vh;
}
.box19 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.box20{
    border: 2px solid orangered;
}
.box20 img{
    width: 100%;
    height: 35vh;
}
.box20 p{
    text-align: center;
    font-family: cursive;
    color: gray;
}
.midrap5{
  width: 100%;
  padding-top: 30px;
  /* height: 5vh; */
}
.midrap5 img{
  width: 100%;
  height: 120vh;
}
.midrap6 h1{
  text-align: center;
  padding-top: 30px;
  font-family: cursive;
  color: black;
}
.box21 img{
  width: 80%;
  height: 40vh;
}
.box21 p{
  width: 80%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box21 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.box22 img{
  width: 80%;
  height: 40vh;
}
.box22 p{
  width: 80%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box22 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.box23 img{
  width: 80%;
  height: 40vh;
}
.box23 p{
  width: 80%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box23 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.box24 img{
  width: 80%;
  height: 40vh;
}
.box24 p{
  width: 80%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box24 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.box25 img{
  width: 80%;
  height: 40vh;
}
.box25 p{
  width: 80%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box25 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.midrap7{
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 30px;
  margin-top: 40px;
  padding-bottom: 30px;
  /* padding-left: 10px; */
}
.box26 img{
  /* width: 80%; */
  height: 50vh;
} 
.box26 p{
  width: 90%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box26 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.box27 img{
  /* width: 80%; */
  height: 50vh;
} 
.box27 p{
  width: 90%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box27 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.box28 img{
  /* width: 80%; */
  height: 50vh;
} 
.box28 p{
  width: 90%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box28 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.box29 img{
  /* width: 80%; */
  height: 50vh;
} 
.box29 p{
  width: 90%;
  text-align: center; 
  font-family: cursive;
  color: maroon;
}
.box29 p span{
  width: 50%;
  text-align: center; 
  font-family: cursive;
  color: orangered;
}
.midrap8{
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 30px;
  margin-top: 40px;
  padding-bottom: 30px;
  /* padding-left: 10px; */
  background-color: rgb(233, 23, 93);
}
.box30{
  margin-top: 20px;
  padding-left: 30px;
}
.box30 p{
  color: white;
  padding-top: 10px;
}
.box30 a{
  text-decoration: none;
}
.box30 p:hover{
  color: rgb(58, 3, 58);
}
.box31{
  margin-top: 20px;
}
.box31 p{
  padding-top: 10px;
  color: white;
  padding-left: 30px;
}
.box31 p:hover{
  color: rgb(99, 5, 99);
}
.box32{
  margin-top: 20px;
}
.box32 p{
  padding-top: 10px;
  color: white;
  padding-left: 30px;
}
.box32 p:hover{
  color: rgb(58, 3, 58);
}
.box33{
  margin-top: 20px;
}
.box33 p{
  padding-top: 10px;
  color: white;
  padding-left: 30px;
}
.box34{
  margin-top: 20px;
}
.box34 p{
  padding-top: 10px;
  color: white;
  padding-left: 30px;
  padding-right: 30px;
}
.box34 span{
  color: white;
  font-weight: bolder;
}