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

 a {
     text-decoration: none !important;
 }

 body {
     background: fixed;
     background-image: url(../img/bg.webp);
     background-repeat: no-repeat;
     background-position: center;
     min-height: 100vh;
     background-size: cover;
     overflow-x: hidden;
     font-family: "Inter";
 }

 main {
     flex: 1;
     /* Jo bacha hua space hai use le */
 }

 #main-section {
     min-height: 100vh;
 }


 .main-footer {
     border-top: 2px solid gray;
 }

 .main-footer a {
     text-decoration: none;
     color: white;
     display: inline-block;
     padding: 10px 40px;
     padding-bottom: 20px;
     position: relative;
 }

 .game span {
     position: absolute;
     top: 26px !important;
     left: 20px;
     font-size: 12px !important;
     color: white;
 }


 .about span {
     position: absolute;
     top: 26px !important;
     left: 20px;
     font-size: 12px !important;
     color: white;
 }


 .contact span {
     position: absolute;
     top: 26px !important;
     left: 20px !important;
     font-size: 12px !important;
 }


 .privacy span {
     position: absolute;
     top: 26px !important;
     left: 17px;
     font-size: 12px !important;
     color: white;
 }


 .row {
     --bs-gutter-x: 1.5rem;
     --bs-gutter-y: 0;
     display: flex;
     flex-wrap: wrap;
     margin-top: calc(var(--bs-gutter-y) * 0) !important;
     margin-right: calc(var(--bs-gutter-x) * 0) !important;
     margin-left: calc(var(--bs-gutter-x) * 0) !important;
 }

 .row {
     display: flex;
     flex-wrap: wrap;
 }

 .col-1 {
     width: 8.33%;
 }

 .col-2 {
     width: 16.67%;
 }

 .col-3 {
     width: 25%;
 }

 .col-4 {
     width: 33.33%;
 }

 .col-5 {
     width: 41.67%;
 }

 .col-6 {
     width: 50%;
 }

 .col-7 {
     width: 58.33%;
 }

 .col-8 {
     width: 66.67%;
 }

 .col-9 {
     width: 75%;
 }

 .col-10 {
     width: 83.33%;
 }

 .col-11 {
     width: 91.67%;
 }

 .col-12 {
     width: 100%;
 }


 .theme-box,
 .theme-box h1,
 .theme-box h2,
 .theme-box h4,
 .theme-box p,
 .theme-box span,
 .theme-box li,
 .theme-box a,
 .theme-box button {
     color: rgb(255, 255, 255);
 }

 .theme-box.dark-mode,
 .theme-box.dark-mode h1,
 .theme-box.dark-mode h2,
 .theme-box.dark-mode h4,
 .theme-box.dark-mode p,
 .theme-box.dark-mode span,
 .theme-box.dark-mode li,
 .theme-box.dark-mode a,
 .theme-box.dark-mode button {
     background-color: #ffffff;
     color: rgb(0, 0, 0);
 }

 .games button i,
 .multiplayer button i {
     color: gold !important;
 }

 .secure-pay button i,
 .rewards button i {
     color: wheat !important;
 }

 .rating-box1 i {
     color: tomato !important;
 }

 .rating-box2 i {
     color: rgba(60, 3, 165, 0.637) !important;
 }

 .rating-box3 i {
     color: white !important;
 }

 .rating-box4 i {
     color: gold !important;
 }

 .main-footer i {
     color: rgb(255, 174, 0) !important;
 }

 header {
     width: 100%;
     position: fixed;
 }

 footer {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     color: white;
     text-align: center;
 }


 ul {
     list-style-type: none;
 }

 .light {
     border-radius: 8px;
     height: 36px !important;
     width: 36px !important;
     background-color: rgb(255 73 0 / 31%) !important;
     color: white;
     border: none;
     margin-left: 68px;
     font-size: 18px;
 }



 .container {
     background-color: hsl(240 10% 3.9%);
     width: 30% !important;
     margin: 0 auto;
 }

 .logo {
     margin: 0 auto;
     display: flex;
     align-items: center;
 }

 .main-header {
     display: flex;
     justify-content: space-between;
     padding: 1rem;
     border-bottom: 1px solid rgb(53 53 53);
 }

 .main-header a {
     margin: 0 auto;
     padding-top: 7px;
 }

 .Advertisement {
     padding-top: 60px;
 }

 .Advertisement2 {
     padding-top: 10px;
 }

 .main-title h1 {
     text-align: center;
     color: white;
     font-size: 20px !important;
 }

 .sub-title p {
     text-align: center;
     color: gray;
     font-size: 10px;
 }

 .age-btn1 {
     display: flex;
     justify-content: center;
     margin-bottom: 10px;
 }

 .age-btn2 {
     margin-top: 10px;
 }

 .btn-1 {
     background-color: hsl(255 78% 63%) !important;
     border: none;
     border-radius: 20px;
     padding: 13px 130px;
     color: white !important;
     cursor: pointer;
     display: block;
     margin: 0 auto;
     font-size: 13px;
 }

 .btn-2 {
     background-color: hsl(29 98% 63%) !important;
     border: none;
     border-radius: 20px;
     padding: 13px 130px;
     color: white !important;
     cursor: pointer;
     display: block;
     margin: 0 auto;
     font-size: 13px;
 }

 .games {
     border-radius: 10px;
     border: 1px solid rgb(97, 97, 97);
     width: 162px !important;
     height: 102px;
     margin-bottom: 10px;
 }

 .games button {
     background-color: rgba(162, 0, 255, 0.178) !important;
     border-radius: 20px;
     border: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 10px;
     margin-top: 10px;
 }

 .games button i {
     font-size: 15px;
 }

 .multiplayer {
     border-radius: 10px;
     border: 1px solid rgb(92, 92, 92);
     width: 162px !important;
     height: 102px;
     margin-bottom: 10px;
 }

 .multiplayer button {
     background-color: rgba(255, 196, 0, 0.144) !important;
     border-radius: 20px;
     border: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 10px;
     margin-top: 10px;
 }

 .multiplayer button i {
     font-size: 15px;
 }

 .secure-pay {
     border-radius: 10px;
     border: 1px solid rgb(91, 91, 91);
     align-items: center;
     width: 162px !important;
     height: 102px;
     margin-bottom: 10px;
 }

 .secure-pay button {
     background-color: black !important;
     border-radius: 20px;
     border: none;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     padding: 10px;
     margin-top: 10px;
 }

 .secure-pay button i {
     font-size: 15px;
 }

 .rewards {
     border-radius: 10px;
     border: 1px solid rgb(91, 91, 91);
     width: 162px !important;
     height: 102px;
     margin-bottom: 10px;
 }

 .rewards button {
     background-color: black !important;
     border-radius: 20px;
     border: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 10px;
     margin-top: 10px;
 }

 .rewards button i {
     margin: 0 auto;
     font-size: 15px;
 }

 .main-box {
     display: flex;
     margin: 0px auto;
     width: 345px !important;
     justify-content: space-between;
     margin-top: 12px !important;
 }

 .sub-box {
     padding-right: 10px;
 }

 .sub-box2 {
     padding-right: 0;
 }

 .main-box h2 {
     font-size: 14px;
     color: white;
     text-align: center;
     margin-top: 10px;
 }

 .gameHub {
     margin: 0 auto;
     border: 1px solid gray;
     padding: 10px;
     width: 353px !important;
     border-radius: 10px;
 }

 .gameHub h4 {
     color: white;
     font-size: 16px;
     text-align: center;
 }

 .gameHub p {
     color: white;
     font-size: 13px;
 }

 .gameHub i {
     font-size: 20px;
     padding-right: 10px;
 }

 .main-gamehub {
     display: flex;
     justify-content: center;
 }

 .datatype {
     display: flex;
     align-items: baseline;
 }

 .main-gamehub ul {
     padding-top: 20px;
     padding: inherit;
 }

 .rating {
     display: flex;
     justify-content: center;
     text-align: center;
 }

 .rating-box1 button {
     background-color: rgba(255, 38, 0, 0.178) !important;
     border-radius: 20px;
     border: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 13px;
 }

 .rating-box2 button {
     background-color: rgba(162, 0, 255, 0.178) !important;
     border-radius: 20px;
     border: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 13px;
 }

 .rating-box3 button {
     background-color: rgba(0, 0, 0, 0.178) !important;
     border-radius: 20px;
     border: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 13px;
 }

 .rating-box4 button {
     background-color: rgba(255, 174, 0, 0.178) !important;
     border-radius: 20px;
     border: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 13px;
 }

 .rating h2 {
     color: white;
     font-size: 13px;
     text-align: center;
     margin: 6px -13px;
 }

 .rating-box1 {
     padding: 0 20px;
 }

 .rating-box2 {
     padding: 0 20px;
 }

 .rating-box3 {
     padding: 0 20px;
 }

 .rating-box4 {
     padding: 0 20px;
 }

 .rating-box1 i {
     color: tomato !important;
 }

 .rating-box2 i {
     color: rgba(60, 3, 165, 0.637) !important;
 }

 .rating-box3 i {
     color: white !important;
 }

 .rating-box4 i {
     color: gold !important;
 }

 .Content-Rating h4 {
     color: white;
     padding-top: 12px;
     font-size: 14px;
 }

 .Content-Rating {
     text-align: center;
     border-radius: 1px solid gray;
 }

 .main-content {
     width: 355px !important;
     border: 2px solid gray;
     display: flex;
     justify-content: center;
     margin: 0 auto !important;
     border-radius: 11px;
     height: 120px;
     margin-top: 20px !important;
     padding-bottom: 182px;
 }

 footer i {
     color: #5a5a5a !important;
 }

 .game span {
     position: absolute;
     top: 32px !important;
     left: 20px !;
     font-size: 12px !important;
     color: white;
 }



 .about span {
     position: absolute;
     top: 32px !important;
     left: 24px !important;
     font-size: 12px !important;
     color: #ffffff;
 }


 .contact span {
     position: absolute;
     top: 32px !important;
     left: 19px !important;
     font-size: 12px !important;
     color: white;
 }




 .privacy span {
     position: absolute;
     top: 32px !important;
     left: 20px !important;
     font-size: 12px !important;
     color: white;
 }

 .ad-box {
     width: 335px;
     margin: 50px auto;
     cursor: pointer;
     text-align: center;
 }

 .ad-box img {
     width: 100%;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .popup {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     backdrop-filter: blur(8px);
     justify-content: center;
     align-items: center;
     z-index: 1000;
 }

 .popup-content {
     width: 100%;
     max-width: 380px;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 8px 20px rgb(0 0 0 / 38%);
     animation: zoomIn 0.3s ease;
     border: 3px solid gray
 }

 .popup-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
     border-bottom: 1px solid #ccc;
     font-size: 20px;
     font-weight: bold;
 }
  .popup-header h5 {
    font-size: 16px;
  }

 .close-btn {
     font-size: 24px;
     transition: 0.3s;
     cursor: pointer;
 }

 .popup-body {
     padding: 30px 20px;
     text-align: center;
 }

 .popup-body h2 {
     margin: 10px 0;
     font-size: 28px;
     color: black !important;
 }

 .popup-body h4 {
     margin: 0;
     font-weight: normal;
     color: #666;
 }

 .logo,
 .light {
     align-items: center;
 }

 .popup-body img {
     max-width: 100%;
     border-radius: 10px;
 }

 .signup-btn {
     display: inline-block;
     padding: 12px 30px;
     background-color: #1976d2;
     color: white;
     text-decoration: none;
     font-size: 20px;
     border-radius: 50px;
     transition: 0.3s;
 }

 .signup-btn:hover {
     background-color: #0f5fb8;
 }

 @keyframes zoomIn {
     from {
         transform: scale(0.8);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }