body{
   margin: 0;
   padding: 0;
   background-color: #000000;
   scroll-behavior: smooth;
}
header{
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 40px;
   z-index: 999;
   background-color: #4b4b4b5b;
   backdrop-filter: blur(10px);


}

.head-left{
   display: flex;
   align-items: center;
}

.head-left img{
   width: 40px;
   height: 40px;
   border-radius: 20%;
}

.head-left button{
   border: none;
   padding: 10px 30px;
   border-radius: 20px;
   font-weight: 700;
   cursor: pointer;
   transition: 0.3s;
}

.head-left button:hover{
   opacity: 0.7;
}

.head-right{
   display: flex;
}

.head-right a{
   text-decoration: none;
   padding-left: 25px;
   color: white;
   font-size: 15px;
}

.head-left a{
   align-items: center;
   font-family: Arial, Helvetica, sans-serif;
   color: #000000;
   font-size: 16px;
   
}

.Top-Games{
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

.Top-Games h1{
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 900;
   font-size: 100px;
   max-width: 1150px;
   width: 100%;
   text-align: center;
   margin: 25px auto;
   text-transform: uppercase;
   background: linear-gradient(to right, #bb4db2, #a6659b,#9a58ad,#6070fd,#2a46ff,#0099ff,#a551c1);
   background-size: 200%;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
   to{
      background-position: 200%;
   }
}

.box-container {
  max-width: 900px; 
  margin: 0 auto;   
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
  
}

.Top-Games .box-container {
  max-width: 960px;  
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem;
  justify-items: center; 
  align-items: center;
  padding: 0 20px;
}

.Top-Games .box {
  width: 100%;
  max-width: 400px;
  height: 400px;
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.Top-Games .box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}



.Top-Games .box-container .box{
   height: 27rem;
   border-radius: .5rem;
   overflow: hidden;
   position: relative;
}

.Top-Games .box-container .box img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: .2s linear;
}

.Top-Games .box-container .box:hover img{
   transform: scale(1.1);

}

.Top-Games .box-container .box::before{
   content: 'PLAY NOW';
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   z-index: 1;
   background: rgba(0, 0, 0, .5);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 2rem;
   transform: scale(1.5);
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
   
}

.Top-Games .box-container .box:hover::before{
   opacity: 1;
   transform: scale(1);
}

.container-side{
    padding-top: 120px;
    padding-bottom: 0px;
    text-align: center;
    width: 100%;
    overflow: hidden;
   
    
}
.container-side h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    margin-right: 20px;
    margin: 0;
    z-index: 1;


}
.left{
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: flex-start;
   
   max-width: 60%;
   padding-left:  20px;
   padding-right:  20px;
   max-width: 100%;
}

.left button{
   border: none;
   padding: 10px 30px;
   border-radius: 20px;
   font-weight: 700;
   cursor: pointer;
   transition: 0.3s;
   gap: 2rem;
}

.left button:hover{
   opacity: 0.7;
   color: #9e54b5;
}

.hidden {
  display: none !important; 
}


.filter-btn.active {
    background-color: #b162b7; 
    color: black;
    border-color: #7c2983;
    opacity: 1; 
}

footer {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    margin-top: 40px;
    background-color: #000000; 
    color: #fff;
    font-size: 0.9em;
}



@media (max-width: 575.98px) {
    
    header {
        padding: 10px 20px; 
    }
    .head-left img {
        width: 35px;
        height: 35px;
    }
    .logo-button { 
        font-size: 20px;
    }
    .head-right {
        flex-direction: column; 
        align-items: flex-start; 
        position: absolute; 
        top: 70px; 
        left: 20px;
        background-color: rgba(75, 75, 75, 0.9); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 15px;
        border-radius: 8px;
        display: none; 
    }
    .head-right.active { 
        display: flex;
    }
    .head-right p {
        margin: 5px 0; 
    }
    .head-right a {
        font-size: 14px;
    }
    

    
    .Top-Games h1 {
        font-size: 60px; 
        padding: 0 15px; 
    }
    .Top-Games .box-container {
        grid-template-columns: repeat(1, 1fr); 
        gap: 1.5rem;
        padding: 0 15px;
    }
    .Top-Games .box {
        height: 250px; 
    }
    .Top-Games .box::before {
        font-size: 1.5rem;
    }

    
    .container-side {
        padding-top: 80px; 
    }
    .left {
        justify-content: center; 
        padding: 0 15px;
    }
    .left h1 {
        font-size: 30px; 
        text-align: center;
        margin-right: 0;
    }
    .left button {
        padding: 10px 25px; 
    }
    .filter-btn {
        margin-bottom: 10px; 
    }
    .filter-btn.active {
        width: 80%; 
        margin: 0 auto 10px auto;
        text-align: center;
    }

    
    .login-box, .register-box-section {
        width: 90%; 
        padding: 20px 25px;
    }
    .main-info h1 {
        font-size: 50px; 
    }
    .main-section {
        padding-left: 0; 
        justify-content: center; 
    }

    
    .faq-hero, .contact-hero {
        height: 250px;
    }
    .faq-hero h1, .contact-hero h1 {
        font-size: 2.5em;
    }
    .faq-hero p, .contact-hero p {
        font-size: 1em;
    }
    .search-bar {
        width: 90%;
        flex-direction: column;
        padding: 10px;
    }
    #faq-search {
        margin-right: 0;
        margin-bottom: 10px;
    }
    #faq-search-button {
        width: 100%;
    }
    .faq-main-content, .contact-main-content {
        width: 90%;
        padding: 25px;
    }
    .faq-question h2, .contact-details h2, .contact-form h2 {
        font-size: 1.2em;
    }
    .faq-icon {
        font-size: 1.5em;
    }
    .contact-details, .contact-form {
        max-width: 100%;
        flex-basis: 100%;
        margin-bottom: 40px;
    }
    .contact-item {
        flex-wrap: wrap; 
        justify-content: center;
        text-align: center;
    }
    .contact-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .contact-text {
        width: 100%;
    }
}


@media (min-width: 576px) and (max-width: 767.98px) {
    
    

    
    .Top-Games .box-container {
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem;
        padding: 0 20px;
    }
    .Top-Games .box {
        height: 280px; 
    }

    
    .left {
        justify-content: center;
    }
    .left h1 {
        font-size: 45px;
    }

    
    .main-info h1 {
        font-size: 60px;
    }
    .login-box, .register-box-section {
        width: 80%;
    }

    
    .faq-hero h1, .contact-hero h1 {
        font-size: 3em;
    }
    .search-bar {
        width: 70%;
    }
    .faq-main-content, .contact-main-content {
        width: 80%;
    }
}


@media (min-width: 768px) and (max-width: 991.98px) {
    

    
    .Top-Games .box-container {
        grid-template-columns: repeat(2, 1fr); 
        gap: 2rem;
    }
    .Top-Games .box {
        height: 300px;
    }

    
    .left {
        justify-content: center;
    }
    .left h1 {
        font-size: 60px;
    }

    
    .main-info h1 {
        font-size: 70px;
    }
    .login-box, .register-box-section {
        width: 70%;
    }

    
    .faq-hero h1, .contact-hero h1 {
        font-size: 3.2em;
    }
    .search-bar {
        width: 65%;
    }
    .faq-main-content, .contact-main-content {
        width: 75%;
    }
}