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

 :root {
     --black: #000000;
     --white: #fff;
     font-size: 10px;
     scroll-behavior: smooth;
 }

 body {
     font-family: "Mona Sans", sans-serif;
     background-color: #f7fbfd;
 }

 .container {
     width: 100%;
     padding-right: var(--bs-gutter-x, 0.75rem);
     padding-left: var(--bs-gutter-x, 0.75rem);
     margin-right: auto;
     margin-left: auto;
 }


 @media (min-width: 576px) {
     .container {
         max-width: 540px;
     }
 }

 @media (min-width: 768px) {
     .container {
         max-width: 720px;
     }
 }

 @media (min-width: 992px) {
     .container {
         max-width: 960px;
     }
 }

 @media (min-width: 1200px) {
     .container {
         max-width: 1140px;
     }
 }

 @media (min-width: 1400px) {
     .container {
         max-width: 1320px;
     }
 }


 h2 {
     font-size: 3.2rem;
     font-weight: bold;
     color: var(--black);
     margin-bottom: 34px;
     text-align: center;
 }

 section {
     padding: 54px 0;
 }

 .features-container {
     background-color: #F8FDFF;

 }

 .features {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 24px;
 }

 .card {
     background: #F5FFFF;
     border: 1px solid #CCCCCC;
     border-radius: 11px;
     padding: 38px 18px;
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: transform 0.3s ease;
 }

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

 .card img {
     width: 116px;
     height: 116px;
     margin-bottom: 26px;
 }

 .card h3 {
     font-size: 2.8rem;
     font-weight: 700;
     margin-bottom: 10px;
     width: 100%;
     line-height: 3.4rem;
     color: var(--black);
 }

 .card p {
     font-size: 1.5rem;
     color: #6B6A6A;
     width: 100%;
     line-height: 2rem;
 }


 .rules-section {
     padding: 60px 20px;
     background-color: #1A1F23;
     position: relative;
     overflow: hidden;
 }

 .rules-section::after {
     content: "";
     background-image: url(../img/bg.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0;
 }

 .rules-section h2 {
     color: var(--white);
 }

 .rules-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(280px, 1fr));
     gap: 50px;
 }

 .rule {
     display: flex;
     flex-direction: column;
 }

 .rule h3 {
     color: #FFB74D;
     font-size: 3.2rem;
     font-weight: 700;
     margin-bottom: 2px;
 }

 .rule p {
     color: var(--white);
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 2.4rem;
 }


 .testimonial-section {
     background-color: #E3F2FD;
 }


 .testimonial-card {
     background-color: var(--white);
     padding: 30px 20px;
     box-shadow: 0px 0px 15px #00000029;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     min-height: 390px;
     transition: transform 0.3s ease;
 }

 .quote-icon {
     margin-bottom: 25px;
     height: 174px;
     display: flex;
     align-items: center;
 }

 .swiper {
     width: 100%;
     padding: 30px 0;
 }

 .swiper-slide {
     display: flex;
     justify-content: center;
     padding: 0px 30px;
 }

 .testimonial-card:hover {
     transform: scale(1.1);
 }

 .testimonial-text {
     font-size: 2rem;
     font-weight: 700;
     color: var(--black);
     margin-bottom: 10px;
     line-height: 2.4rem;
     text-align: center;
 }

 .testimonial-card:hover .testimonial-text {
     color: #37474F;

 }

 .testimonial-author {
     font-size: 1.8rem;
     font-weight: 500;
     color: var(--black);
 }

 .faq-container {
     background: #E3F2FD;
     padding: 69px 80px;

 }

 .inner-faq-container {
     background: var(--white);
     padding: 32px 10px;
     border-radius: 8px;
     max-width: 1500px;
     margin: 0 auto;
 }


 .faq-item {
     background: #F5FFFF;
     border: 1px solid #CCCCCC;
     border-radius: 5px;
     padding: 18px 27px;
     margin-bottom: 19px;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .faq-item:hover {
     transform: translateY(-2px);
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
 }

 .faq-item h3 {
     font-size: 2rem;
     font-weight: 700;
     color: var(--black);
     margin-bottom: 8px;
 }

 .faq-item p {
     font-size: 1.8rem;
     color: var(--black);
     line-height: 2.4rem;
 }

 footer {
     background-color: #E3F2FD;
 }

 footer .inner-footer {
     background-color: #011225;
     color: white;
     padding: 33px 0 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     border-radius: 25px 25px 0 0;
 }

 .footer-top {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .footer-top ul {
     list-style: none;
     display: flex;
     gap: 20px;
     margin: 0;
     padding: 0;
 }

 .footer-top ul li a {
     text-decoration: none;
     color: var(--white);
     font-size: 1.6rem;
     padding: 6px 14px;
     font-weight: 400;
     border-radius: 20px;
     transition: 0.3s;
 }

 .footer-top ul li a.active,
 .footer-top ul li a:hover {
     background-color: #FFB74D;
     font-weight: bold;
     color: var(--black);
 }

 .footer-copy {
     font-size: 1.6rem;
     font-weight: 400;
     color: var(--white);
 }

 .footer-bottom {
     display: flex;
     gap: 12px;
     font-size: 1.2rem;
     justify-content: center;
     margin-top: 32px;
     text-align: center;
 }

 .footer-bottom .right {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .footer-bottom a {
     color: var(--white);
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     border-radius: 5px;
     transition: 0.3s;
     text-decoration: none;
 }

 .footer-bottom a img {
     width: 100%;
 }


 .hero-container {
     padding: 0;
     background-color: #FFF3E0;
     /* height: 100vh; */
 }

 .hero-container header {
     background: #37474F;
     box-shadow: 0px 3px 6px #00000029;
     border-radius: 0px 0px 30px 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 18px 45px;
 }

 .hero-container header ul {
     display: flex;
     align-items: center;
     list-style: none;
     gap: 16px;
 }

 .hero-container header a img {
     width: 190px;
 }

 .hero-container header ul a {
     text-decoration: none;
     color: #E3F2FD;
     font-weight: 400;
     font-size: 1.6rem;
     padding: 5px 16px;
 }

 .hero-container header ul a.active,
 .hero-container header ul a:hover {
     background-color: #FFB74D;
     color: #37474F;
     font-weight: bold;
     border-radius: 50px;
 }

 .play-now {
     background-color: #FFB74D;
     border-radius: 8px;
     font-size: 1.6rem;
     color: #070500;
     font-weight: 600;
     padding: 14px 38px;
     text-decoration: none;
 }

 .hero-container .container {
     height: 100%;
 }

 .hero-container .inner-hero {
     height: 100%;
     display: flex;
     padding: 20px 0;
 }

 .inner-hero>div {
     position: relative;
 }

 .hero-container .left {
     max-width: 480px;
     padding-top: 150px;
 }

 .hero-container .left a {
     color: var(--black);
     font-weight: 600;
     font-size: 2.6rem;
     background: #FFB74D;
     box-shadow: 0px 0px 1px #37474F;
     border-radius: 8px;
     padding: 18px 72px;
     text-decoration: none;
     display: inline-block;
     margin-left: 60px;

 }

 .hero-container .left a:hover,
 .play-now:hover {
     background-color: transparent;
     color: #FFB74D;
     border: 1px solid #FFB74D;
 }

 .hero-container h1 {
     font-size: 5.6rem;
     color: var(--black);
     font-weight: 900;
     line-height: 6.4rem;
 }

 .hero-container p {
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 2.4rem;
     color: var(--black);
     margin: 15px 0 56px;
 }

 .hero-container .right img {
     width: 115%;
     margin-left: -15%;
 }

 .stats-container {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--black);
     padding: 30px 60px;
     border-radius: 17px;
     color: var(--white);
     gap: 25px;
     position: absolute;
     bottom: 30px;
     right: 36px;
 }

 .stat-box {
     text-align: center;
 }

 .stat-number {
     font-size: 3.2rem;
     font-weight: bold;
     color: #FFB74D;
 }

 .stat-label {
     font-size: 1.4rem;
     color: var(--white);
     font-weight: 400;
 }

 .divider {
     width: 3px;
     height: 64px;
     background-color: var(--white);
     opacity: 0.21;
 }

 .menu-toggle {
     width: 35px;
     height: 30px;
     position: relative;
     cursor: pointer;
     display: none;
 }

 .bar {
     position: absolute;
     height: 4px;
     width: 100%;
     background-color: var(--white);
     border-radius: 2px;
     transition: 0.4s;
 }

 .bar:nth-child(1) {
     top: 0;
 }

 .bar:nth-child(2) {
     top: 13px;
 }

 .bar:nth-child(3) {
     top: 26px;
 }

 .menu-toggle.open .bar:nth-child(1) {
     transform: rotate(45deg);
     top: 13px;
 }

 .menu-toggle.open .bar:nth-child(2) {
     opacity: 0;
 }

 .menu-toggle.open .bar:nth-child(3) {
     transform: rotate(-45deg);
     top: 13px;
 }

 /* Hide checkbox */
 #menu-checkbox {
     display: none;
 }

 /* privacy policy.................. */

 .header-quizplus {
     background: #37474F;
     box-shadow: 0px 3px 6px #00000029;
     border-radius: 0px 0px 30px 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 18px 45px;
 }

 .header-quizplus a img {
     width: 190px;
 }

 .header-quizplus ul {
     display: flex;
     align-items: center;
     list-style: none;
     gap: 16px;
 }

 .header-quizplus ul a.active,
 .hero-container header ul a:hover {
     background-color: #FFB74D;
     color: #37474F;
     font-weight: bold;
     border-radius: 50px;
 }

 .header-quizplus ul a {
     text-decoration: none;
     color: #E3F2FD;
     font-weight: 400;
     font-size: 1.6rem;
     padding: 5px 16px;
 }

 /* body section.................. */

 .earning-history-content {
     text-wrap: wrap;
     width: 100%;
     padding: 32px 0;
 }

 .earning-history-content h3 {
     font-size: 20px;
     margin-bottom: 20px;
 }

 .earning-history-content p,
 .earning-history-content ul li,
 .earning-history-content ol li {
     font-size: 16px;
     margin-bottom: 16px;
     line-height: 28px;
 }

 .earning-history-content ol {
     padding-left: 15px;
 }

 .earning-history-content ul {
     list-style: none;
 }



 .earning-history-content a {
     color: #5f4c31;
 }


 .tabs {
     display: flex;
     cursor: pointer;
     margin-bottom: 10px;
 }

 .tab {
     padding: 10px 30px;
     background: #eee;
     border: 1px solid #ccc;
     margin-right: 5px;
     border-radius: 5px 5px 0 0;
     transition: background 0.3s;
     font-size: 18px;
     font-weight: 600;
 }

 .tab.active {
     background: #ffb74d;
     border-bottom: none;
 }

 .tab-content {
     display: none;
     padding: 15px;
     border: 1px solid #ccc;
     border-radius: 0 5px 5px 5px;
     background: #fff;
 }

 .tab-content.active {
     display: block;
 }

 .content-common-container h3,
 .content-common-container h4 {
     font-size: 15px;
     font-weight: 600;
 }

 .content-common-container p {
     font-size: 13.5px;
     line-height: 22px;
     width: 100%;
     font-weight: 400;
     margin-bottom: 12px;
 }

 .earning-cookies {
     padding: 15px;
     border: 1px solid #ccc;
     border-radius: 0 5px 5px 5px;
     background: #fff;
 }

 /* footer section.......................... */

 footer {
     background-color: #E3F2FD;
 }

 footer .inner-footer {
     background-color: #011225;
     color: white;
     padding: 33px 0 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     border-radius: 25px 25px 0 0;
 }

 .footer-top {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .footer-top ul {
     list-style: none;
     display: flex;
     gap: 20px;
     margin: 0;
     padding: 0;
 }

 .footer-top ul li a.active,
 .footer-top ul li a:hover {
     background-color: #FFB74D;
     font-weight: bold;
     color: var(--black);
 }

 .footer-top ul li a.active,
 .footer-top ul li a:hover {
     background-color: #FFB74D;
     font-weight: bold;
     color: var(--black);
 }

 .footer-top ul li a {
     text-decoration: none;
     color: var(--white);
     font-size: 1.6rem;
     padding: 6px 14px;
     font-weight: 400;
     border-radius: 20px;
     transition: 0.3s;
 }