*{
    margin: 0;
}
body{
    font-family: sans-serif;
}
.nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
    padding: 10px;
}
.nav-logo{
    display: flex;
    gap: 10px;
    align-items: center;

}
.logo-text{
    font-size: 30px;
    font-weight: bolder;
}
.g{
    color: rgba(255, 66, 165, 1);
}
nav ul{
    display: flex;
}
nav li{
    list-style: none;
    margin-right: 10px;
}
.banner-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image:url(images/Group\ 14.png), linear-gradient(rgba(140, 87, 238, 0.05), rgba(241, 68, 174, 0.05));
    padding: 100px;
}
.grad{
    color:rgba(249, 72, 178, 1);
    font-size: 95px;
    font-weight: bolder;
}
h3{
    font-size: 40px;
}
.banner-text{
    font-size: 18px;
    margin-top: 12px;
    
}
.banner-img{
    width: 550px;
}
.btn{
    margin-top: 12px;
    margin-left: 12px;
    border-radius: 15px;
    padding: 10px;
    border: none;
    background-color: rgba(255, 66, 165, 1);
    color: white;
}
.btn2{
    background-color: rgba(78, 197, 247, 1);
}

/* online-game */

.online-game{
    text-align: center;
    align-items: center;
    margin-top: 30px;
}
.online-game h2{
    font-size: 48px;
    font-weight: 700;
}
.online-game > p{
    margin-top: 15px;
    font-size: 18px;
    color: #534C64;
}
.game-container{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}
.games img{
    width: 250px;
}
.games p{
    text-align: left;
    margin-top: 10px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.616);
    font-weight: bold;
}
.play-container{
    margin-top: 100px;
    margin-bottom: 120px;
    display: flex;
    justify-content:space-around;
    align-items: center;
    text-align: right;
}
.play-text h3{
    text-align: left;
      color: rgba(255, 66, 165, 1);
}
.play-text h2{
    margin-top: 20px;
    font-size: 48px;
}
.play-text p{
    margin-top: 15px;
    font-size: 18px;
}
.play-container img{
    width: 500px;
}





.careers-container{
    
    padding: 60px 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(images/Group\ 14.png),linear-gradient(rgba(255, 66, 165, 1),rgb(221, 199, 210));
    color: white;
}
.careers-container img{
    width: 550px;
}
.careers-head{
    font-size: 45px;
    margin-bottom: 20px;
}
.sub-con{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.sub1 ul{
    
    list-style: none;
    
    

}
.sub2 ul{
    list-style: none;
}
.last-btn{
    margin-top: 20px;
    padding: 15px;
    border: none;
    border-radius: 18px;
    color:rgba(255, 66, 165, 1) ;
    font-size: 20px;
}




.footer-container{
    background-color: rgba(11, 2, 35, 1);
    padding: 120px;
    color: white;
}

.footer-logo{
    padding-top: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.footer-end{
    text-align: center;
    margin-top: 50px;
    color: rgba(255, 255, 255, 0.603);
}
.list1{
    display: flex;
    margin-top: 30px;
    justify-content: center;
    gap: 50px;
    list-style: none;
}
.list2{
    display: flex;
    list-style: none;
    gap: 30px;
    margin-top: 100px;
    justify-content: center;
    color: rgba(255, 255, 255, 0.527);

}


@media screen and (max-width:576px) {
    .nav-bar{
        flex-direction: column;
    }
    .nav-text{
        flex-direction: column;
    }
    nav ul{
        flex-direction: column;
    }
    .banner-container{
        flex-direction: column-reverse;
    }
    .careers-container{
        flex-direction: column;
    }
    .play-container{
        flex-direction: column;
    }
}