@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');


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

 html {
     font-size: 62.5%;
     font-family: 'Roboto', sans-serif;
 }

 /* NAVBAR START */
 li {
     list-style: none;
 }

 a {
     text-decoration: none;
 }

 /* css to reset all the designs */

 /* add styles on elements */

 .header {
     border-bottom: 1px solid #E2E8F0;
     background-color: #222;
     /* border-radius: 30px; */
     margin-top: 0px;
 }

 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem 1.5rem;
 }

 .hamburger {
     display: none;
 }

 .bar {
     display: block;
     width: 25px;
     height: 3px;
     margin: 5px auto;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     /* background-color: #101010; */
     background-color: #fff;
 }

 .nav-menu {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .nav-item {
     margin-left: 5rem;
 }

 .nav-link {
     /* font-size: 1.6rem; */
     font-size: 2rem;
     font-weight: 400;
     /* color: #475569; */
     color: #fff;
     /* change */
 }

 .nav-link:hover {
     text-decoration: underline;
     text-decoration-color: rgb(18, 21, 162);
     -o-transition: 2.8s;
     -ms-transition: 2.8s;
     -moz-transition: 2.8s;
     -webkit-transition: 2.8s;
     transition: 2.8s;


 }

 .nav-logo {
     /* font-size: 2.1rem; */
     font-size: 3rem;
     font-weight: 500;
     /* color: #482ff7; */
     color: #fff;
 }

 /* NAVBAR END */

 /* COLOR CARDING CONTAINER START */

 .container {
     height: 60vh;
     width: 100%;
     background: linear-gradient(45deg, #d2001a, #7462ff, #23d5ab);
     background-size: 300% 300%;
     animation: color 12s ease-in-out infinite;
 }

 @keyframes color {
     0% {
         background-position: 0 50%;
     }

     5% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0 50%;
     }

 }

 /* COLOR CARDING CONTAINER END */

 /* HEADLINE & KEYWORD START */

 .headline {
     text-align: center;
     justify-content: center;


 }

 .headline-text {
     font-size: 80px;
     font-weight: 600;
     color: #fff;
     padding-top: 80px;
     font-family: "Montserrat", sans-serif;
 }

 p {
     color: #fff;
     font-weight: 500;
     margin-top: 10px;
     font-size: 20px;
     font-family: "Montserrat", sans-serif;
 }


 /* HEADLINE & KEYWORD END */

 /* img start */

 .card-section {
     display: flex;
     gap: 20px;
     justify-content: center;
     padding: 30px;
     flex-wrap: wrap;
 }

 .card {
     width: 350px;
     background: #fff;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
     transition: 0.3s;
 }

 .card:hover {
     transform: scale(1.03);
 }

 .card img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* img end */

 /* download section start */
 .download-sec {
     background: #222;
 }

 .download-line {
     text-align: center;
     justify-content: center;

 }

 .download-line h1 {
     font-size: 50px;
     color: #fff;
     font-family: "Montserrat", sans-serif;


 }




 /* download section end */


 .tool-section {
     padding: 20px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 20px;
 }

 /* CARD BASE START */

 .tool-card {
     background: #0c1b2c;
     padding: 25px;
     border-radius: 12px;
     height: 100%;
     color: white;
     display: flex;
     gap: 25px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: 0.3s;
 }

 .tool-card:hover {
     transform: translateY(-5px);
 }

 /* LEFT SIDE */
 .left {
     display: flex;
     flex-direction: column;
     gap: 15px;
     min-width: 150px;
 }

 .version {
     background: rgba(255, 255, 255, 0.1);
     padding: 8px 12px;
     border-radius: 8px;
     text-align: center;

 }

 /* Buttons */
 .btn {
     background: #ffca28;
     color: #000;
     text-align: center;
     padding: 10px 15px;
     border-radius: 10px;
     font-weight: bold;
     text-decoration: none;
     transition: 0.3s;
 }

 .btn:hover {
     opacity: 0.8;
 }

 .btn.blue {
     background: #4fc3f7;
     color: #000;
 }

 .btn.orange {
     background: #ff9800;
     color: #000;
 }

 /* RIGHT SIDE */
 .right h2 {
     margin-bottom: 10px;
     color: #4fc3f7;
     font-size: 22px;
 }

 .right ul {
     margin: 0;
     padding-left: 20px;
 }

 .right ul li {
     color: #aee571;
     margin-bottom: 6px;
     list-style: "✔ ";
 }

 /*  CARD BASE END */

 /* live server start */

 .live-status {
     width: 100%;
     padding: 40px 20px;
     text-align: center;
 }

 .live-status h2 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 25px;
 }

 .status-table {
     max-width: 900px;
     margin: auto;
     border-radius: 12px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
 }

 .status-table .row {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     padding: 15px 10px;
     font-size: 18px;
     transition: 0.3s ease;
 }

 .status-table .header {
     background: #007bff;
     color: #fff;
     font-weight: 700;
 }

 .status-table .row:not(.header):hover {
     background: #f3f7ff;
     transform: scale(1.02);
 }

 .online {
     color: green;
     font-weight: bold;
 }

 .offline {
     color: red;
     font-weight: bold;
 }


 /* live server end */

 /* RUILES SECTION START */

 .rules-container {
     border: 2px solid #0c1b2c;
     width: 100%;
     background: #fff;
     padding: 25px;
     display: flex;
     justify-content: space-between;
     gap: 30px;
     border-radius: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     flex-wrap: wrap;
 }

 /* Left Section */
 .rules-left {
     flex: 2;
 }

 .rule-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 20px;
 }

 .rule-item .icon {
     font-size: 28px;
     margin-right: 12px;
     color: #ff9800;
 }

 .rule-item p {
     margin: 0;
     font-size: 16px;
     line-height: 1.4;
     color: #333;
 }

 /* RUILES SECTION END */

 /* Right Section */
 .rules-right {
     flex: 1;
     text-align: center;
 }

 .rules-right h2 {
     font-size: 26px;
     color: #333;
     font-weight: 700;
 }


 .ga-footer {
     margin-top: 20px;
     width: 100%;
     background: linear-gradient(90deg, #041d3d, #06142b, #010a1a);
     padding: 40px 20px;
     text-align: center;
     color: #d6e2ff;
     font-family: 'Poppins', sans-serif;
 }

 .ga-footer h3 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 5px;
     color: #ffffff;
 }

 .ga-footer p {
     font-size: 15px;
     opacity: 0.9;
 }

 .footer-links {
     margin: 18px 0;
 }

 .footer-links a {
     margin: 0 12px;
     color: #4db8ff;
     font-size: 15px;
     text-decoration: none;
     transition: 0.3s;
 }

 .footer-links a:hover {
     color: #00eaff;
     text-shadow: 0 0 8px #00eaff;
 }

 .copy {
     margin-top: 10px;
     opacity: 0.7;
     font-size: 14px;
 }

 .ads-logo {
     margin-top: 10px;
     height: 40px;
     width: 10%;
 }

 .ga-footer-resller{
    margin-top: 10%;
     width: 100%;
     background: linear-gradient(90deg, #041d3d, #06142b, #010a1a);
     padding: 40px 20px;
     text-align: center;
     color: #d6e2ff;
     font-family: 'Poppins', sans-serif;
 }


 @media only screen and (max-width: 768px) {
     .nav-menu {
         position: fixed;
         left: -100%;
         top: 6rem;
         flex-direction: column;
         /* background-color: #fff; */
         background-color: #222;
         width: 100%;
         border-radius: 10px;
         text-align: center;
         transition: 0.3s;
         box-shadow:
             0 10px 27px rgba(0, 0, 0, 0.05);
     }

     .nav-link {
         color: #fff;
     }

     .nav-menu.active {
         left: 0;
     }

     .nav-item {
         margin: 2.5rem 0;
     }

     .hamburger {
         display: block;
         cursor: pointer;
     }

     .hamburger.active .bar:nth-child(2) {
         opacity: 0;
     }

     .hamburger.active .bar:nth-child(1) {
         transform: translateY(8px) rotate(45deg);
     }

     .hamburger.active .bar:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
     }


     .container {
         height: 60vh;
         width: 100%;
         background: linear-gradient(45deg, #d2001a, #7462ff, #23d5ab);
         background-size: 300% 300%;
         animation: color 12s ease-in-out infinite;
     }

     .headline-text {
         font-size: 50px;
         font-weight: 600;
         color: #fff;
         padding-top: 80px;
         font-family: "Montserrat", sans-serif;
     }

     p {
         color: #fff;
         font-weight: 500;
         margin-top: 10px;
         font-size: 20px;
         font-family: "Montserrat", sans-serif;
     }


     /*  CARD BASE START */
     .tool-card {
         flex-direction: column;
         margin-left: -18px;
     }

     .tool-card {
         background: #0c1b2c;
         padding: 20px;
         border-radius: 12px;
         height: 100%;
         color: white;
         display: flex;
         gap: 25px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         transition: 0.3s;
     }

     /*  CARD BASE END */

     .ads-logo {
         margin-top: 10px;
         height: 40px;
         width: 40%;
     }

     .cards-continer {
     margin-top: 10px;
     margin-left: -40px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     /* gap: 20px; */
 }
     

 }


 .resller {
     background: #222;
     margin-top: 10px;
 }

 .resller-portal {
     text-align: center;
     justify-content: center;
     font-size: 30px;
     color: #fff;
     font-family: "Montserrat", sans-serif;
 }


 .cards-continer {
     margin-top: 10px;
     margin-left: 60px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
 }

 .cards {
     background: white;
     border: 2px solid #e3e6ea;
     border-radius: 14px;
     padding: 20px;
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .cards img {
     width: 90px;
     height: auto;
 }

 .cards .content {
     flex: 1;
 }

 .cards h3 {
     margin: 0;
     font-size: 20px;
     font-weight: bold;
 }

 .cards a {
     color: #1a73e8;
     text-decoration: none;
     font-weight: bold;
 }

 .small-red {
     color: #d93025;
     font-size: 13px;
     font-weight: bold;
 }

 .small-blue {
     color: #1a73e8;
     font-size: 13px;
 }

 .icons {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-left: auto;
 }

 .icons img {
     width: 28px;
     cursor: pointer;
 }