*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
/* social media */
.social{
    width:100%;
    height:5vh;
    background:linear-gradient(to left,red, rgb(17, 17, 18));
}
.socialrap{
    width:80%;
    margin: auto;
}
.name{
    position: absolute;
}
.name h1{
    color: aliceblue;
    text-transform: uppercase;
}
.app{
    float: right;
}
.app ul li{
    display: inline;
}
.app ul li a{
    color:aliceblue;
    font-size: 30px;
    padding: 20px;
}
/* Navigation bar */
#nav{
    width: 100%;
    height: 10vh;
    background: linear-gradient(to left, rgb(75, 11, 124), rgb(214, 41, 145));
    position: sticky;
    top: 0px;
    border-bottom: 5px solid white;
}
.navrap{
    width: 80%;
     /* height: 10vh;
    background-color: black; */
    margin:auto; 
}
.logo{
    position:absolute;
}
.logo img{
    height: 10vh;
}
.menu{
    float: right; 
}
.menu ul{
    margin-top: 22px;
}
.menu ul li{
    display:inline;
}
.menu ul li a{
    text-decoration: none;
    font-size:25px;
    text-transform: uppercase;
    padding-left: 20px;
    padding-right: 20px;
    color: aliceblue;
}
.menu ul li a:hover{
    border: 2px solid white;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
} 
/* Banner */
.ban{
    background-image: url(./ban.jpg);
    width: 100%;
    height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
}
.banrap{
    width: 100%;
    height: 80vh;
    background-color: rgba(0,0,0,0.5);
}
.banrap1{
    margin: auto;
    /* border: 2px solid white; */
    padding-top: 375px;
}
.company{
    width: 50%;
    margin: left;
}
.banrap1 h1{
    font: bold;
    text-align: center;
    padding-left: 15px;
    color:darkorange;
    font-size: 85px;
}
.banrap p{
    padding-left: 250px;
    font: italic;
    text-align: center;
    color: ghostwhite;
    font-size: 45px;
}
/* Middle */
.mid{
    width: 100%;
    height: 74vh;
    background-image:url(./bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.midrap{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 50px;
}
.box1{
    background-image: url(./box1.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 60vh;
    width: 100%;
    background-size: cover;
}
.box1rap{
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.7); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 100%;
    margin-top: 275px;
    padding-right: 90px;
  }
.box1rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 25px;
    padding-top: 270px;
    text-align:center;
    color:aliceblue;
}
.box2{
    background-image: url(./box2.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 60vh;
    width: 100%;
    background-size: cover;
}
.box2rap{
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.7); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 100%;
    margin-top: 275px;
}
.box2rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 25px;
    padding-top: 270px;
    text-align:center;
    color:white;
}
.box3{
    background-image: url(./box3.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 60vh;
    width: 100%;
    background-size: cover;
}
.box3rap{
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.7); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 100%;
    margin-top: 275px;
}
.box3rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 25px;
    padding-top: 275px; ;
    text-align:center;
    color:white;
}
.box4{
    background-image: url(./box4.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 60vh;
    width: 100%;
    background-size: cover;
}
.box4rap{
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.7); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 100%;
    margin-top: 275px;
}
.box4rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 25px;
    padding-top: 275px; ;
    text-align:center;
    color:white;
}
/* Mid1 */
.mid1{
    width: 100%;
    height: 30vh;
}
.mid1rap{
    width: 80%;
    height: 25vh;
    background-image: url(mid1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 40px;
    margin-left: 150px;
}
/* Mid2 */
.mid2{
    width: 100%;
    height: 53vh;
    background-image:url(./bg2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.mid2rap{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 50px;
}
.m2box1{
    background-image: url(./m2box1.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m2box1rap{
    height: 10vh;
    padding-top: 200px;
}
.m2box1rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px; ;
    text-align:center;
    color:white;
}
.m2box2{
    background-image: url(./m2box2.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m2box2rap{
    height: 10vh;
    padding-top: 200px;
}
.m2box2rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px; ;
    text-align:center;
    color:white;
}
.m2box3{
    background-image: url(./m2box3.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m2box3rap{
    height: 10vh;
    padding-top: 200px;
}
.m2box3rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px;
    text-align:center;
    color:white;
}
.m2box4{
    background-image: url(./m2box4.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m2box4rap{
    height: 10vh;
    padding-top: 200px;
}
.m2box4rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px;
    text-align:center;
    color:aliceblue;
}
/* Mid3 */
.mid3{
    width: 100%;
    height: 30vh;
}
.mid3rap{
    width: 80%;
    height: 25vh;
    background-image: url(./mid3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 40px;
    margin-left: 150px;
}
/* Mid4 */
.mid4{
    width: 100%;
    height: 53vh;
    background-image:url(./bg3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.mid4rap{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 50px;
}
.m4box1{
    background-image: url(./m4box1.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m4box1rap{
    height: 10vh;
    padding-top: 200px;
}
.m4box1rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px; ;
    text-align:center;
    color:black;
}
.m4box2{
    background-image: url(./m4box2.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m4box2rap{
    height: 10vh;
    padding-top: 200px;
}
.m4box2rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px; ;
    text-align:center;
    color:black;
}
.m4box3{
    background-image: url(./m4box3.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m4box3rap{
    height: 10vh;
    padding-top: 200px;
}
.m4box3rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px;
    text-align:center;
    color:black;
}
.m4box4{
    background-image: url(./m4box4.jpg);
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    height: 40vh;
    width: 250px;
    background-size: cover;
}
.m4box4rap{
    height: 10vh;
    padding-top: 200px;
}
.m4box4rap p a{
    text-decoration: none;
    font-style: bold;
    font-style: italic;
    text-transform: uppercase;
    font-size: 20px;
    padding-top: 200px;
    text-align:center;
    color:black;
}
/* Mid5 */
.mid5{
    width: 100%;
    height: 150vh;
}
.mid5rap1{
    width: 80%;
    height: 120vh;
    background-image: url(./mid5.jpg);
    background-repeat: no-repeat;
    margin-top: 40px;
    margin-left: 150px;
}
.mid5rap2{
    width: 70%;
    height: 20vh;
    background: linear-gradient(to right, rgb(35, 6, 122), rgb(117, 12, 12));
    margin: auto;
    border-radius: 10%;
}
.mid5rap2 h1 a{
    padding-top: 10px;
    font-size: 50px;
    color: darkorange;
    text-decoration: none;
    padding-left: 30px;

}
.mid5rap2 p{
    padding-left: 50px;
    padding-right: 50px;
    font-size: 20px;
    color: aliceblue;
}

/* Sponsors */
.spn{
    width: 100%;
    height: 80vh;
}
.spnrap{
    width: 80%;
    height: 70vh;
    margin: auto;
}
.spnrap1{
    width: 30%;
    height: 20vh;
    margin: auto;
}
.spnrap1 h1{
    font-size: 25px;
    color: darkblue;
    text-align: center;
}
.spnrap1a{
    width: 30%;
    height: 2vh;
    margin: auto;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 80px;
}
.spnrapr{
    margin: auto;
    width: 100%;
    height: 30vh;
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    padding: 10pX;
    padding-top: 30px;
}
.spnrap2{
    width: 70%;
    height: 20vh;
    /* margin: left; */
    margin-left: 60px;
}
.spnrap2 h1{
    font-size: 25px;
    color: darkblue;
    text-align: center;
    padding-left: 30PX;
}
.spnrap2i{
    width: 100%;
    height: 20vh;
    display: grid;
    grid-template-columns:auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 30px;
}
.spnrap2ia{
    width: 50%;
    height: 10vh;
}
.spnrap2ib{
    width: 50%;
    height: 10vh;
    padding-right: 20px;
}
.spnrap3{
    width: 50%;
    height: 20vh;
    /* margin:auto; */
    margin-left: 250px;
}
.spnrap3 h1{
    font-size: 20px;
    color: darkblue;
    text-align: center;
    padding-left: 90px;
}
.spnrap3a{
    width: 30%;
    height: 10vh;
    margin-top: 20px;
    margin-left: 40px;
    padding-right: 60px;
}
.spnrapr1{
    margin: auto;
    width: 100%;
    height: 30vh;
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    padding: 10px;
    padding-top: 60px;
}
.spnrap4{
    width: 70%;
    height: 20vh;
    /* margin: left; */
    margin-left: 10px;
}
.spnrap4 h1{
    font-size: 20px;
    color: darkblue;
    text-align: center;
}
.spnrap4i{
    width: 100%;
    height: 20vh;
    display: grid;
    grid-template-columns:auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 30px;
}
.spnrap4ia{
    width: 70%;
    height: 10vh;

}
.spnrap4ib{
    width: 70%;
    height: 10vh;
}
.spnrap4ic{
    width: 70%;
    height: 10vh;
}
.spnrap5{
    width: 50%;
    height: 20vh;
    /* margin:auto; */
    margin-left: 150px;
}
.spnrap5 h1{
    font-size: 20px;
    color: darkblue;
    text-align: center;
}
.spnrap5a{
    width: 30%;
    height: 10vh;
    margin-top: 20px;
    margin-right: 30px;
}
/* FT */
.ft{
    width: 100%;
    height: 80vh;
    background-color: rgb(13, 13, 99);
    margin-top: 10px;
}
.ftrap{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.ftbx1{
    padding: 10px;
    height: 50vh;
    width: 100%;
}
.ftbx1rap{
    color: #f1f1f1;
    width: 100%;
    margin-top: 20px;
}
.ftbx1rap h1{
    font-size: 30px;
}
.ftbx1rap ul{
    margin-top: 10px;
}
.ftbx1rap ul li{
    display: inline;
}
.ftbx1rap ul li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    text-align:center;
    color:aliceblue;
}
.ftbx2{
    padding: 10px;
    height: 60vh;
    width: 100%;
}
.ftbx2rap{
    color: #f1f1f1;
    width: 100%;
    margin-top: 20px;
  }
.ftbx2rap h1{
    font-size: 30px;
}
.ftbx2rap ul{
    margin-top: 10px;
  }
.ftbx2rap ul li{
    display: inline;
}
.ftbx2rap ul li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    text-align:center;
    color:aliceblue;
}
.ftbx3{
    padding: 10px;
    height: 60vh;
    width: 100%;
}
.ftbx3rap{
    color: #f1f1f1;
    width: 100%;
    margin-top: 20px;
}
.ftbx3rap h1{
    padding-top: 15px;
    font-size: 30px;
}
.ftbx3rap ul{
    margin-top: 25px;
}
.ftbx3rap ul li{
    display: inline;
}
.ftbx3rap ul li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    text-align:center;
    color:aliceblue;
}
.ftbx4{
    padding: 10px;
    height: 60vh;
    width: 100%;
}
.ftbx4rap{
    color: #f1f1f1;
    width: 100%;
    margin-top: 20px;
}
.ftbx4rap h1{
    font-size: 30px;
    padding-top: 15px;
}
.ftbx4rap ul{
    margin-top: 20px;
}
.ftbx4rap ul li{
    display: inline;
}
.ftbx4rap ul li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px; 
    text-align:center;
    color:aliceblue;
}
.ftbx5{
    padding: 10px;
    height: 60vh;
    width: 100%;
}
.ftbx5rap{
    color: #f1f1f1;
    width: 100%;
    margin-top: 20px;
}
.ftbx5rap h1{
    font-size: 30px;
    padding-top: 15px;
}
.ftbx5rap ul{
    margin-top: 20px;
}
.ftbx5rap ul li{
    display: inline;
}
.ftbx5rap ul li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    text-align:center;
    color:aliceblue;
}
.ftbx6{
    padding: 10px;
    height: 60vh;
    width: 150%;
    background-size: cover;
}
.ftbx6rap{
    color: #f1f1f1;
    width: 100%;
    margin-top: 20px;
}
.ftbx6rap h1{
    font-size: 30px;
    padding-top: 15px;
}
.ftbx6rap ul{
    margin-top: 20px;
}
.ftbx6rap ul li{
    display: inline;
}
.ftbx6rap ul li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 30px;
    text-align:center;
    color:white;
    padding-left: 10px;
    padding-right: 10px;
}
.ftrap1{
    bottom: 0;
    width: 100%;
    height: 7vh;
    background-color: rgb(86, 65, 181);
    margin-top: 60px;
}
.ftrap1 p{
    text-align: center;
    padding-top: 17px;
    color: aliceblue;
}
.ftrap2{
    bottom: 0;
    width: 100%;
    height: 6vh;
    background-color: goldenrod;
}
.ftrap2 p{
    text-align: center;
    padding-top: 17px;
    color: aliceblue;
}