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;
   
}

.about-us{
   width: 100%;
   height: 100%;
   margin-top: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   color: white;

}

.image-box{
   width: 960px;
   height:510px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50px;

}


.about-us p{
   font-size: 12px;
}



.about-us h1{
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-weight: 900;
   font-size: 100px;
   max-width: 1150px;
   text-align: center;
   margin: 25px 0;
   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%;
   }
   
}

.autoBlur{
   animation: autoBlurAnimation linear both;
   animation-timeline: view();
}

@keyframes autoBlurAnimation{
   0%{
      filter: blur(40px);
   }
   40%,60%{
      filter: blur(0);
      transform: translateY(0px);
      opacity: 1;
   }

   100%{
      filter: blur(40px);
      transform: translateY(-200px);
      opacity: 0;
   }
}

.about-us h4{
   margin-top: 50px;
   margin-bottom: 0;
   margin: 25px 0;
   text-align: center;
   
}

.about-us p{
    margin-top: 5px;
   color: gray;
   max-width: 450px;
   text-align: center;
   line-height: 25px;
   font-size: 14px;
}

.about-us h5{
   margin-top: 5px;
   color: rgb(255, 255, 255);
   max-width: 450px;
   text-align: center;
   line-height: 25px;
   font-size: 16px;
}

.about-us{
   position: relative;
   width: 100%;
   margin-top: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100vh;
}

.about-us .img1{
   position:absolute;
   top: 20%;
   right: 20px;
   height: 400px;
  clip-path: polygon(59% 0, 100% 0%, 90% 100%, 28% 100%);
}

.about-us .img2{
   position:absolute;
   left: 40px;
   top: 10px;
   height: 300px;
   width: auto;
   clip-path: polygon(36% 0, 82% 10%, 68% 100%, 18% 100%, 7% 39%);
}

.about-us .img3{
   position: absolute;
   left: 5%;
   bottom: 10%;
   height: 320px;
   width: auto;
   clip-path: polygon(18% 0, 57% 0, 68% 49%, 78% 100%, 25% 100%, 0% 50%);
}

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;
   }
   .head-left button { 
      display: none;
   }
   .head-right a {
      font-size: 14px;
      padding-left: 15px;
   }
   .main-info {
      left: 5%;
      top: 60px; 
   }
   .main-info h1 {
      font-size: 60px; 
   }

   .gaming-text {
      font-size: 60px; 
      right: 5%;
      bottom: 20px;
   }
   .next-btn {
      left: 25%;
      top: 50%;
      transform: translate(-25%, -50%); 
   }

   .about-us {
      margin-top: 100px; 
      height: auto; 
   }
   .about-us h1 {
      font-size: 50px;
   }
   .image-box {
      width: 90%;
      height: 350px; 
   }
   .about-us h4, .about-us p, .about-us h5 {
      max-width: 90%;
      font-size: 13px; 
   }
   .about-us p { 
      font-size: 13px;
   }
   .about-us h5 { 
      font-size: 14px;
   }

   
   .info-card {
      grid-template-columns: 1fr;
   }
   .card {
      height: 50vh;
   }
   .card h1 {
      font-size: 40px;
   }

   
   .Top-Games h1 {
      font-size: 50px;
   }
   .Top-Games .box-container {
      grid-template-columns: repeat(1, 1fr); 
      gap: 1rem;
      max-width: 90%;
   }
   .Top-Games .box {
      width: auto;
      height: 200px;
   }
   .Top-Games .box::before {
      font-size: 1.5rem;
   }

   .more-games {
      margin-top: 100px;
      height: auto;
   }
  
   .about-us .img1,
   .about-us .img2,
   .about-us .img3 {
      position: relative; 
      height: auto; 
      width: 80%; 
      margin: 10px auto; 
      clip-path: none; 
      top: auto;
      right: auto;
      left: auto;
      bottom: auto;
      display: block; 
   }

   .more-games .section-paragraph {
      margin-top: 50px;
      font-size: 16px;
   }
   .more-games h1 {
      font-size: 60px;
      max-width: 300px;
   }
}


@media (max-width: 767.98px) {
   .head-right a {
      padding-left: 15px;
      font-size: 14px;
   }
   .main-info h1 {
      font-size: 80px;
   }
   .gaming-text {
      font-size: 80px;
   }
   .next-btn {
      left: 40%;
      top: 45%;
   }
   .about-us {
      margin-top: 150px; 
   }
   .image-box {
      width: 80%;
      height: 400px;
   }
   .Top-Games .box-container {
      grid-template-columns: repeat(2, 1fr); 
   }
   .Top-Games .box {
      width: auto;
      height: 280px;
   }
   .more-games h1 {
      font-size: 60px;
   }
   .more-games .img1, .more-games .img2, .more-games .img3 {
      height: 250px;
   }
}

@media screen and (max-width: 650px) { 
   .about-us .img1,
   .about-us .img2,
   .about-us .img3 {
      position: relative; 
      height: auto; 
      width: 80%; 
      margin: 10px auto; 
      clip-path: none; 
      top: auto;
      right: auto;
      left: auto;
      bottom: auto;
      display: block; 
   }
}