*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  height: 100vh;
}
.btn{
background-color: white;
border-radius: 20px;
background: rgb(218, 88, 88);
color: white;
padding: 5px 15px;
border: none;
cursor: pointer;

}
.btn:hover{
  background: rgb(225, 128, 128);

}
.header{
  background-color: #7a35fa ;
  display: flex;
  justify-content: space-between;
align-items: center;
padding: 30px 100px 0 100px;
}
.header a{
  color: white;
  text-transform: capitalize;
padding:  5px 15px;
text-decoration: none;
margin: 50px;
  background-repeat: no-repeat;
  background-size: cover;
}
.header a:hover{
  background-color: rgb(92, 92, 191);
  border-radius: 20px;
}
.img-logo{
  width: 100px;

}



.landing-page{
  background-color: #7a35fa;
  display: flex;
  justify-content: space-between;
padding: 30px 100px 0 100px;
align-items: center;
color: white;
border-radius:0 0  50px 50px;
height:90vh;
}
.landing-page .welcome{
  font-size: x-large;
  color: white;
}
.landing-page-left-section{  
    padding-top: 30px;
    flex: 8;
    flex-grow: 8;
    flex-shrink: 1;
    flex-basis: 0%;
  }

.landing-page-left-section h1{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 50px;
}

.landing-page-search{
  margin-top: 20px;
}
.landing-page-search input{
  border-radius: 50px;
border: none;
outline: none;
height: 30px;
width: 500px;
height: 60px;
    padding: 30px 0px 30px 30px;
}
.landing-page button{
  position: absolute;
  left: 500px;
  height: 60px;
  width: 150px; 

}

.logo-Continer img{
  border-radius: 20px;
  width: 500px;
  height: 500px;
}


.landing-page-left-section p{
      color: #000;
    width: 80%;
    font-weight: 500;
}
.trending-games{
padding: 30px 100px 0 100px;

}

.trending-games span{
color: brown;
text-transform: uppercase;
font-size: 14px;
}
.trending-cards{
  display: flex;
  gap: 12px;
  justify-content: space-around;
  margin: 20px auto;
}
.trending-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-top{
  margin: 20px auto;

}
.card-top p{
  margin: 10px;
}
.card-top h4{
  margin: 10px;
}
.card{
  width: 300px;
  background-color: #eeeeee;
  border-radius: 20px;
}
.card .thumb{
  border-radius: 20px 20px 0 0;
}
.card-info{
  display: flex;
justify-content: space-around;
align-items: center;
padding-top: 15px ;

}
.card-info img{
  width: 50px;
}

.top-games{
padding: 30px 100px 0 100px;
background-color: #eeeeee;
  margin: 20px auto;
  border-radius: 50px;
}
.top-games .btn{
  height: 25px;
}
.top-games span{
  color: rgb(225, 128, 128);
  text-transform: uppercase;
  font-weight: bold;
}
.top-games h3{

  font-weight: bold;
font-size: 30px;
}
.header-top-games{
  display: flex;
  justify-content: space-between;

}

.top-played{
  display: flex;
  justify-content: space-around;
gap: 14px;
margin: 20px auto;
text-align: center;
padding: 50px 0;
}
.card-top img{
  border-radius: 20px;
  height: 260px;

}
.card-top p{
color: #928c8c;
}

.contuer-categories {
  display: flex;
  justify-content: center;
  align-items: center;
gap: 20px;
text-align: center;



}
.title-categories{
  text-align: center;
  margin: 20px auto;

}
.title-categories P{
  color: brown;
  font-size: 20px;
  margin-bottom: 10px;
}

.title-categories h3{
  font-size: xx-large;
  font-weight: bold;
}
.card-categories p{
  background-color: blue;
  color: white;
  padding: 20px;
    border-radius: 20px 20px 0px 0px;
text-transform: capitalize;
}

.card-categories img{
    border-radius: 0 0 20px 20px;

}
.Footer{
  /* height: 20vh; */
display: flex;
justify-content: center;
text-align: center;
padding: 40px;
margin:  20px 0 020px;
background-color: blue;
color: white;
border-radius: 50px 50px 0px 0px;
}