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

/* social media */
.social {
    width: 100%;
    height: 12vh;
    background-color: black;
}

.socialrap {
    width: 70%;
    margin: auto;
}

.logo {
    position: absolute;
}

.logo img {
    width: 70px;
    height: 10vh;
    margin-left: -21px;
    margin-top: 29%;
}

.name {
    position: absolute;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: aliceblue;
    margin-left: 3%;
}

.name h1 {
    margin-top: 15%;
}

.app {
    float: right;
    margin-top: 6%;
    /* margin-right: -100px; */
}

.app ul li {
    display: inline;
}

.app ul li a {
    color: rgb(255, 255, 255);
    font-size: 15px;
    padding-left: 5px;
    /* padding-right: 10px; */
}

/* navigation bar */
#nav {
    width: 100%;
    height: 7vh;
    background: rgb(32, 32, 32);
}

.navrap {
    width: 80%;
    margin: auto;
}

.menu ul {
    padding-top: 20px;
}

.menu ul li {
    display: inline;
}

.menu ul li a {
    color: rgb(255, 255, 255);
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    /* padding: 10px; */
    padding-left: 30px;
    /* padding-right: 80px; */
}

.menu ul li a:hover {
    border-top: 2px;
    border-bottom: 2px solid rgb(46, 13, 112);
    color: rgb(246, 32, 221);
}

/* banner*/
.ban {
    width: 100%;
    height: 80vh;
    background-image: url(./banner.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

/* banner 1*/
.ban1 {
    width: 100%;
    height: 80vh;
    background-image: url(./ban1.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: -15%;
}

/* banner 2*/
.ban2 {
    width: 100%;
    height: 80vh;
    background-image: url(./ban2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: -10%;
    position: absolute;
}
/* banner4 */
.ban5{
    width: 100%;
    height: 80vh;
    background-image: url(./ban4.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 13%;
    /* position: absolute;  */
}
.ban5 h1{
    color: aliceblue;
    text-align: center;
    font-size: 80px;
}
.banrap5{
    width:100% ;
    height: 80vh;
    background-color: rgba(0, 0, 0, 0.451);
}

.banrap5 h1{
    font-size: 40px;
    /* margin-top: 20%; */
}

.banrap55{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-row-gap: 10px;
    grid-column-gap:50px;
    padding-top: 50px;
}
.box{
    /* border: 9px solid rgb(255, 0, 212); */
    background-color: rgb(0, 0, 0);
    height: 50vh;
    width: 110%;
    padding: 50px;
}
.box img{
    /* color: rgb(229, 228, 228); */
    /* margin-left: 53%; */
    height: 100%;
    width: 100%;
}
.xob{
    text-align: center;
}
.xob h1{
    font-size: 15px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.xob p{
    font-size: 15px;
    color: rgb(50, 165, 241);
}

/* banner7 */
.ban7{
    width: 100%;
    /* height: 50vh; */
}
.banrap7{
    width:90% ;
    margin: auto;
}
.banrap777{
    padding-top: 50px;
    padding-bottom: 50px;
}
.banrap7 img{
    width: 100%;
    height: 110%;
    /* padding-top: 50px; */
    border-radius: 25px;
}

.banrap77{
    width: 100%;
    /* margin: auto; */
    display: grid;
    grid-template-columns: auto auto auto;
    grid-row-gap: 10px;
    grid-column-gap:10px;
    /* padding-top: -100px; */
    margin-left: 1%;
}
.box1{
    /* border: 9px solid rgba(232, 46, 238, 0.412);
    background-color: rgb(255, 255, 255); */
    height: 50vh;
    /* width: 120%; */
    padding: 10px;
    margin-top: 5%;
}
.box1 img{
    /* color: rgb(229, 228, 228); */
    /* margin-left: 53%; */
    /* height: 120%; */
    width: 100%;
    border-radius: 9%;
}
/* footer */
.foot{
width: 100%;
height: 70vh;
background-color: black;
/* padding: 20px; */

}
.footer{
    width: 50%;
    margin: auto;
}
.image{
    width: 17%;
    margin: auto;
}
.image img{
    width: 100%;
    height: 15vh;
    margin-left: 1%;
}
.company{
    width: 100%
}
.company h1{
    text-align: center;
    color: aliceblue;
    font-size: 25px;
}

.app4 {
    width: 100%;
    margin: auto; 
    /* border: 2px solid white; */
    margin-top: 60px;
} 
.app4 ul{
    margin-left: 37%; 
}
.app4 ul li {
    display: inline;
}

.app4 ul li a {
    color: rgb(255, 255, 255);
    font-size: 25px;
    padding-left: 9px;
    /* padding-right: 0px; */
}
.info{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-column-gap: 20px;
    padding-top: 5%;
    /* padding: 10%; */
}
.inforap h1{
    color: aliceblue;
    text-align: center;
    font-size: 30px;
}
.inforap p{
    color: darkgray;
    text-align: center;
    font-size: 20px;
}
.conclu{
    margin-top: 3% ;
}
.conclu p{
    text-align: center;
    color: aliceblue;
    font-size: 20px;
}