* {
    padding: 0px;
    margin: 0px;
}

/* navigation bar */
.nav {
    width: 100%;
    height: 10vh;
    background-color: rgb(125, 163, 129);
}

.navrap {
    width: 80%;
    padding-top: 2vh;
    margin: auto;
    font-style: oblique;
}

.logo h1 {
    color: black;
    font-size: 40px;
    padding-top: -4vh;
}

.menu {
    float: right;
}

.menu ul {
    margin-top: -30px;
}

.menu ul li {
    display: inline;
    padding: 5px;
}

.menu ul li a {
    color: white;
    background-color: slategray;
    text-decoration: none;
    padding: 14px;
    border-radius: 15px;
    font-weight: bolder;
}

.menu ul li a:hover {
    padding: 14px;
    border-radius: 15px;
    color: slategray;
    background-color: white;
}

/* banner */
.ban {
    width: 100%;
    height: 60vh;
    background-size: cover;
    background-color: white;
}

.banrap {
    width: 100%;
    height: 100vh;
}

.banrap1 {
    padding-top: 30px;
    margin-left: 10px;
}

.banrap2 {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 20px;
}

.box img {
    width: 100%;
    height: 50vh;
    border-radius: 30px;
    border: 6px solid black;
}

.box1 h1 {
    color: palevioletred;
    font-family: cursive;
    font-weight: bolder;
    font-size: 40px;
}

.box1 h2 {
    color: purple;
    font-family: cursive;
    font-weight: bolder;
    font-size: 50px;
}

.box1 h3 {
    color: skyblue;
    font-family: cursive;
    font-weight: bolder;
    font-size: 40px;
    padding-top: 5px;
}
/* middle */
.mid{
    width: 100%;
    height: 105vh;
    background-color: aquamarine;
}
.midrap{
    width: 80%;
    margin: auto;
    padding-top: 30px;
}
.midrap h1{
    color: slateblue;
    text-align: center;
    font-size: 60px;
    font-family: cursive;
    font-weight: bolder;
}
.midrap img{
    margin-left: 30px;
    margin-top: 20px;
    border: 6px solid black;
}
.midrap1{
    width: 80%;
    margin: auto;
    padding-top: 50px;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.box2{
    border: 4px solid black;
}
.box2 h2{
    text-align: center;
    font-size: 30px;
    color: slateblue;
}
.box3{
    border: 4px solid black;
}
.box3 h2{
    text-align: center;
    font-size: 30px;
    color: slateblue;
}
.box4{
    border: 4px solid black;
}
.box4 h2{
    text-align: center;
    font-size: 30px;
    color: slateblue;
}
.box5{
    border: 4px solid black;
}
.box5 h2{
    text-align: center;
    font-size: 30px;
    color: slateblue;
}
/* middle */
.mid2{
    width: 100%;
    height: 190vh;
    background-color: plum;
}
.midrap2{
    width: 80%;
    margin: auto;
}
.midrap2 h1{
    font-size: 60px;
    color: purple;
    font-weight: bolder;
    font-family: cursive;
    text-align: center;
}
.box6{
    height: 165vh;
    border: 8px solid darkorchid;
    margin-top: 30px;
    border-radius: 30px;
}
.midrap3{
    width: 80%;
    margin: auto;
    padding-top: 40px;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
}
.box7 h3{
    color: rgb(60, 5, 60);
    font-size: 40px;
    font-family: cursive;
    font-weight: bolder;
}
.box7 h4{
    color: blueviolet;
    font-size: 30px;
    font-family: cursive;
    font-weight: bolder;
}
.box8 h3{
    color: rgb(60, 5, 60);
    font-size: 40px;
    font-family: cursive;
    font-weight: bolder;
}
.box8 h4{
    color: blueviolet;
    font-size: 30px;
    font-family: cursive;
    font-weight: bolder;
}
.box6 img{
    height: 60vh;
    margin-left: 250px;
    margin-top: 40px;
}
.box6 h5{
    text-align: center;
    color: blueviolet;
    padding-top: 15px;
    font-size: 50px;
    font-weight: lighter;
    font-family: cursive;
}
.box6 h6{
    text-align: center;
    color: blueviolet;
    padding-top: 1px;
    font-size: 40px;
    font-weight: lighter;
    font-family: cursive;
}
/* middle */
.mid4{
    width: 100%;
    height: 190vh;
    background-color: pink;
}
.midrap4{
    width: 80%;
    margin: auto;
}
.midrap4 h1{
    font-size: 60px;
    color: rgb(224, 91, 135);
    font-weight: bolder;
    font-family: cursive;
    text-align: center;
    padding-left: 80px;
}
.box9{
    height: 168vh;
    border: 8px solid rgb(208, 99, 135);
    margin-top: 30px;
    border-radius: 30px;
}
.midrap5{
    width: 80%;
    margin: auto;
    padding-top: 40px;
}
.box9 h2{
    color: rgb(121, 14, 75);
    font-size: 40px;
    font-family: cursive;
    font-weight: bolder;
}
.box9 h3{
    color: rgb(172, 94, 147);
    font-size: 30px;
    font-family: cursive;
    font-weight: bolder;
}
.box9 img{
    width: 50%;
    height: 60vh;
    margin-left: 250px;
    margin-top: 40px;
    border: 4px solid black;
    border-radius: 30px;
}
.box9 h5{
    text-align: center;
    color: rgb(226, 43, 128);
    padding-top: 15px;
    font-size: 50px;
    font-weight: lighter;
    font-family: cursive;
}
.box9 h6{
    text-align: center;
    color: rgb(226, 43, 128);
    padding-top: 1px;
    font-size: 40px;
    font-weight: lighter;
    font-family: cursive;
}
/* middle */
.mid6{
    width: 100%;
    height: 190vh;
    background-color: slategrey;
}
.midrap6{
    width: 80%;
    margin: auto;
}
.midrap6 h1{
    font-size: 60px;
    color: darkblue;
    font-weight: bolder;
    font-family: cursive;
    text-align: center;
}
.box10{
    height: 170vh;
    border: 8px solid slateblue;
    margin-top: 30px;
    border-radius: 30px;
}
.midrap7{
    width: 80%;
    margin: auto;
    padding-top: 40px;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
}
.box11 h2{
    color: rgb(16, 5, 60);
    font-size: 40px;
    font-family: cursive;
    font-weight: bolder;
}
.box11 h3{
    color: rgb(25, 96, 125);
    font-size: 30px;
    font-family: cursive;
    font-weight: bolder;
}
.box12 h2{
    color: rgb(16, 5, 60);
    font-size: 40px;
    font-family: cursive;
    font-weight: bolder;
}
.box12 h3{
    color: rgb(25, 96, 125);
    font-size: 30px;
    font-family: cursive;
    font-weight: bolder;
}
.box10 img{
    height: 60vh;
    margin-left: 320px;
    margin-top: 40px;
    border: 4px solid black;
    border-radius: 30px;
}
.box10 h5{
    text-align: center;
    color: rgb(58, 43, 226);
    padding-top: 15px;
    font-size: 50px;
    font-weight: lighter;
    font-family: cursive;
}
.box10 h6{
    text-align: center;
    color: rgb(58, 43, 226);
    padding-top: 1px;
    font-size: 40px;
    font-weight: lighter;
    font-family: cursive;
}
/* footer */
.footer{
    width: 100%;
    height: 8vh;
    background-color: rgb(125, 113, 113);
}
.footrap{
    width: 100%;
    height: 10vh;
    margin: auto;
}
.footrap h4{
    color: black;
    text-align: center;
    padding-top: 3vh;
    font-size: 25px;
    font-weight: bolder;
}