/* --- GLOBAL STYLES & VARIABLES --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --dark-blue-bg: #0a193b; /* Fallback */

  --dark-blue-gradient: linear-gradient(145deg, #0a193b, #1d2b53);

  --form-blue-gradient: linear-gradient(145deg, #2a3a6b, #1e2a52);

  --yellow-gradient: linear-gradient(145deg, #ffc94a, #ffab1d);

  --yellow-color: #ffc94a;

  --white-color: #ffffff;

  --light-gray: #f0f4f8;

  --text-muted: #b0c4de;

  --verified-green: #4caf50;

  --pending-orange: #ff9800;

  --blue: rgb(62, 176, 221);

  --nav-btn: #000000;

  --nav-link-font: 16px;

  --services-bg: #d0ff71;

  --bg-black: #000000;

  --accent-lime: #b6ff33;

  --text-gray: #a1a1a1;

  --transition: all 0.3s ease;

  --bg-main: #ffffff;

  --bg-secondary: #f0f8ff;

  --bg-dark: #0a1e3c;

  --text-main: #25335f;

  --text-light-bg: #25335f;

  --text-dark-bg: #ffffff;

  --text-color-bg: #0a1e3c;

  --btn: #004cc5;

  --btn-text: #ffffff;

  --btn-hover: #003a96;

  --accent: #004cc5;

  --accent-light: #e8f0ff;

  --shadow: 2px 2px 10px 2px #004bc41a;

  --radius-card: 45px;

  --radius-img-out: 45px;

  --radius-img-in: 29px;

  --radius-inner: 29px;

  --pad-img: 16px;

  --pad-text: 32px;

  --font: "Montserrat", sans-serif;

  /* wheel colours */

  --w1: #004cc5;
  --w2: #0a1e3c;
  --w3: #1a6af0;

  --w4: #003a96;
  --w5: #25335f;
  --w6: #0055d4;
}

* {
  box-sizing: border-box;

  margin: 0;

  padding: 0;

  /* outline: 1px solid salmon; */
}

body {
   font-family: "Montserrat", sans-serif !important;

  /* color: #000066; */

  line-height: 1.6;

  /* overflow: hidden; */
  /* background-color: #0a1e3c; */
}

/* //// Navbar ////// */

.navbar {
  max-width: 1140px;

  height: 80px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 0 auto;

  padding: 0 35px;
  background:white;
}

.nav-logo img {
  height: 20px;
}

/* Universal link styling for all navigation links */

a:link,
a:visited,
a:active {
  color: var(--nav-btn);

  text-decoration: none;
}

ul {
  display: flex;

  gap: 20px;
}

/* General list item styling */

ul li {
  position: relative;

  display: inline-block;

  overflow: hidden;
}

/* Hover effect and removing outline */

ul li:hover,
ul li:focus {
  outline: none;
}

/* Link styling inside the list items

ul li a {
  position: relative;

  display: inline-block;

  color: #fff;

  font-size: var(--nav-link-font);

  text-decoration: none;

  font-family: "Manrope", Sans-serif;

  font-weight: 500;

  transition: transform 0.5s ease;

  -webkit-transition: transform 0.5s ease;
}



ul li a:before {
  position: absolute;

  top: 100%;

  content: attr(title);

  color: #333;

  transform: translate3d(0, 0, 0);

  transition: transform 0.5s ease; /* Smooth transition for hover effect 
}



ul li:hover a,
ul li:focus a {
  transform: translateY(-100%);
} */

/* Universal link styling for all navigation links */

a:link,
a:visited,
a:active {
  color: var(--white-color);

  text-decoration: none;
}

.nav-item-right {
  background: #0a1e3c ;

  /* background: red; */
  color: #fff;
  padding: 10px 20px;

  border-radius: 20px;
}

.mobile-navbar {
  max-width: 1200px;

  height: 80px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 0 auto;

  padding: 0 35px;
}

/* Initial state of the mobile navbar */

.mobile-nav-item {
  position: absolute;

  top: -100%; /* Start off-screen (above the screen) */

  left: 50%;

  margin-top: 50px;

  transform: translateX(-50%); /* Center it horizontally */

  display: block;

  background-color: #fff;

  width: 100%;

  padding: 20px;

  opacity: 0; /* Initially hidden */

  visibility: hidden; /* Prevent interaction while hidden */

  transition:
    transform 0.5s ease,
    opacity 0.5s ease,
    visibility 0s 0.5s; /* Apply smooth transition */
}

/* When the menu becomes active, it slides and fades in */

.mobile-nav-item.active {
  top: 0; /* Slide into view */

  opacity: 1; /* Fade in */

  visibility: visible; /* Make the menu interactive */

  transition:
    transform 0.5s ease,
    opacity 0.5s ease; /* Apply smooth transition when active */
}

.mobile-nav-item ul {
  display: flex;

  flex-direction: column;

  gap: 5px;
}

.mobile-nav-btn a {
  border: 2px solid var(--text-gray);

  padding: 7px 14px;

  border-radius: 40px;
}

#btn-hamburger {
  border: none;

  outline: 0;

  background: transparent;

  border-radius: 3px;

  padding: 0.6em;

  cursor: pointer;

  .line-1,
  .line-2,
  .line-3 {
    width: 22px;

    height: 2px;

    background-color: var(--dark-blue-bg);

    margin: 4px 0;

    transition: 0.4s;
  }

  &.animeOpenClose .line-1 {
    -webkit-transform: rotate(-45deg) translate(-4px, 4px);

    transform: rotate(-45deg) translate(-4px, 4px);
  }

  &.animeOpenClose .line-2 {
    opacity: 0;
  }

  &.animeOpenClose .line-3 {
    -webkit-transform: rotate(45deg) translate(-4px, -4px);

    transform: rotate(45deg) translate(-4px, -4px);
  }
}

/* Responsive adjustments for small screens */

@media screen and (max-width: 768px) {
  /* Stacking the navigation items vertically */

  ul {
    display: block;

    text-align: center;
  }

  ul li {
    display: block;
  }

  .nav-logo img {
    width: 150px; /* Adjust logo size for smaller screens */
  }

  .nav-btn {
    width: 100%;

    text-align: center;

    padding: 12px 0;
  }
}

@media screen and (max-width: 480px) {
 
  .nav-btn {
    font-size: 1em; /* Adjust button font size for mobile */
  }
}

/* Hide the default navbar on small screens */

@media (max-width: 900px) {
  
.nav-item-right{
 padding: 10px 10px;
 font-size: 12px;
}
  .nav-logo img {
    height: 15px;
    width: 120px;
  }
 
}

/* Hide the mobile navbar on larger screens */

@media (min-width: 901px) {
  .mobile-navbar {
    display: none;
  }
}

/* Section-1 */

.section-1 {
  max-width: 1140px; 

  /* margin: 20px auto; */

  padding: 70px 35px;

  display: grid;
  grid-template-columns:40% 60%;
  grid-template-rows:80%, 20%;
  /*flex-direction: row;*/

  /* flex-wrap: wrap; */

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  /* height: 100vh; */
  background-color: #0a1e3c;

  overflow: hidden;
}

.section-box {
  display: flex;
 
  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;
}

.section-1 .logo {
  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;
}
.section-1 p{
  font-size: 48px;
  font-weight:900;
color: white;

}
.section-1 h1{
  font-size: 20px;
  font-weight:600;
color: white;
  
}
/*.section-1 h1,p {*/
/*  text-align: left;*/
/*  color: white;*/
/*}*/

.section-1 button {
  display: flex;
}

@media (max-width: 770px) {
  .section-1 h1 {
    font-size: 2.2rem;
  }

  .section-box p {
    font-size: 14px;

    margin: 0;
  }

  .cta-button {
    font-size: 0.7rem;
  }

  .wheel-container img {
    height: 250px;
  }
}

@media (max-width: 500px) {
  .section-box {
    justify-content: center;
    width: 100%;
    align-items: center;
  }

  .section-1 {
    

    grid-template-columns:1fr;
    /*gap: 2rem;*/
    padding:70px 0px;
    justify-content: center;

    align-items: center;
  }

  .section-1 h1 {
    font-size: 1.8rem;
  }

  .section-box {
    justify-content: center;

    align-items: center;
  }

  .section-1 h1 {
    text-align: center;
    margin:15px 0px;
  }
  .WhyChooseBox{
      flex-wrap:wrap;
  }
}

/* ===== FEATURES SECTION ===== */

.section-2 {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;
}

.features {
  max-width: 1200px;
display:flex;
  
grid-column: 1 / -1;
 justify:space-between;

  gap: 20px;

  padding: 10px 20px;
}

.feature {
  font-size: 12px;

  opacity: 0;

  animation: fadeUp 0.8s ease forwards;

  line-height: 1.6;

  flex-basis: 100%;

  text-align: center;


}

/*.feature:nth-child(1) {*/
/*  animation-delay: 0.3s;*/
/*}*/

/*.feature:nth-child(2) {*/
/*  animation-delay: 0.6s;*/
/*}*/

/*.feature:nth-child(3) {*/
/*  animation-delay: 0.9s;*/
/*}*/

/*.feature:nth-child(4) {*/
/*  animation-delay: 1.2s;*/
/*}*/

.feature i {
  color: #ffc94a;

  margin-right: 6px;

  font-size: 1rem;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design */

@media (max-width: 768px) {
  .feature-item {
    margin-bottom: 20px;

    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .features {
    justify-content: space-between;

    margin: 40px;
  }

  .feature {
    flex-basis: 30%;

    text-align: left;
  }
}

@media (max-width: 480px) {
  .section-2 {
    margin: 15px auto;
  }

  .features {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    justify-content: center;
  }

  .feature {
    text-align: left;

    margin: 0 auto;
  }

  /* Make the last feature full width + centered content

    .features .feature:last-child {

        grid-column: 1 / 3;    

        text-align: center;    

        max-width: 100%;      

    } */
}

/* --- PRIZES SECTION --- */

.prizes-section {
  background: var(--white-color);
}

.prize-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  max-width: 1000px;

  margin: 10px auto 0 auto;
}

.prize-item {
  background: #f9f9f9;

  padding: 25px;

  border-radius: 8px;

  font-weight: 500;

  color: #444;

  text-align: center;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.prize-more {
  text-align: center;

  margin-top: 30px;

  padding: 20px;

  background: #f0f4f8;

  border-radius: 8px;

  max-width: 1000px;

  margin: 30px auto 0 auto;

  font-style: italic;

  color: #555;
}

.section-title {
  font-size: 2.5rem;

  font-weight: 700;

  color: var(--primary);

  margin-bottom: 10px;

  text-align: center;
}

.prizes {
  overflow: hidden;

  width: 100%;

  position: relative;

  padding: 10px 0;

  margin: auto;

  background: var(--services-bg);
}

.prizes ul {
  display: flex;

  gap: 30px;

  width: max-content;

  margin: 0;

  padding: 0;

  animation: scrollLeft 40s linear infinite;
}

.prizes li {
  list-style: none;

  padding: 10px;

  font-weight: 600;

  display: flex;

  align-items: center;

  white-space: nowrap;

  border-radius: 10px;

  transition: transform 0.3s ease;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .prizes ul,
  .prizes.prizes-right ul {
    animation-duration: 40s;
  }

  .prizes {
    padding: 5px 0px;
  }
}

/* feature-section */

.feature-box {
  display: flex;

  justify-content: center;

  align-items: center;

  padding: 0px 35px;

  margin: 30px auto;
}

.feature-section {
  background: var(--nav-btn);

  display: flex;

  justify-content: center;

  align-items: center;
}

.feature-item {
  flex: 1;

  padding: 30px;

  text-align: left;

  border-radius: 10px;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;

  position: relative;

  color: white;
}

.feature-item .step {
  position: absolute;

  top: 0;

  font-size: 20px;

  font-weight: 700;
}

.feature-item h2 {
  font-size: 1.6em;

  margin: 10px 0px;

  text-align: left;
}

.feature-item p {
  font-size: 1em;

  margin-bottom: 20px;

  color: #9ca3af;
}

.feature-item a {
  color: #fff;
}

/* .learn-more {

  position: relative;

  display: inline-block;

  text-decoration: none;

  color: #f39c12;

  font-weight: bold;

  font-size: 1.2em;

} */

/*

.learn-more .default-text,

.learn-more .hover-text {

  display: inline-block;

  transition: opacity 0.2s ease, transform 0.6s ease;

}



.learn-more .hover-text {

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  transform: translateY(10px);

}



.learn-more:hover .default-text {

  opacity: 0;

  transform: translateY(-10px);

}



.learn-more:hover .hover-text {

  opacity: 1;

  transform: translateY(0);

} */

@media (max-width: 500px) {
  .feature-box {
    flex-direction: column;

    color: white;
  }
}

.container {
  max-width: 1140px;

  margin: 0 auto;

  /* padding: 0 20px; */

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 20px;

 padding: 100px 10px;

  text-align: center;
  /* background-color: white; */
}
.container p,h1,h2 {
  color: #25335F;
}


h1,
h2,
h3 {
  line-height: 1.3;

  margin-bottom: 15px;
}

h1 {
  font-size: 2.8rem;
}

h2 {
  font-size: 32px;
  text-align: center;
}

h3 {
  font-size: 20px;
}

.cta-button {
  font-size: 1rem;
  font-family: 'Montserrat';
  font-weight: bold;

  color: var(--dark-blue-bg);

  /* background: var(--yellow-gradient); */

  background: #ffff;

  border: none;

  padding: 15px 35px;

  border-radius: 50px;

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 1px;

  transition:
    transform 0.2s ease;




  margin-top: 30px;
}

.cta-button:hover {
  transform: translateY(-2px);
    background:skyblue;
}

.cta-button:disabled {
  background: #aaa;

  color: #777;

  cursor: not-allowed;

  box-shadow: none;
}

/* --- HERO SECTION --- */

.hero-section {
  /* background: linear-gradient(360deg,rgba(255, 255, 255, 1) 0%, rgba(133, 167, 255, 0.84) 2%, rgba(0, 72, 255, 0.95) 5%, rgba(0, 72, 255, 1) 10%, rgba(0, 72, 255, 1) 100%); */

  max-width: 1200px;

  margin: 50px auto;

  /* background: gainsboro; */

  color: var(--bg-black);

  /* padding: 60px 35px; */

  min-height: 50vh;

  display: grid;

  grid-template-columns: 1fr;

  position: relative;

  z-index: 1;
}

.hero-content {
  flex-basis: 100%;

  padding-right: 0;

  margin-bottom: 40px 0px;

  text-align: left;
}

.logo img {
  width: 100%;

  max-width: 300px;

  margin-bottom: 20px;
}

.highlight-yellow {
  color: var(--yellow-color);

  font-weight: 800;
}

.hero-content p {
  font-size: 1.1rem;

  margin-bottom: 30px;
}

.wheel-container img {
  height: 350px;
  

  transition: transform 2s ease; /* smooth animation */

  transform-origin: center center;
}

/* Rotate the image when checkbox is checked */

.wheel-pointer {
  /* width: 100;

  height: 100;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-top: 30px solid var(--yellow-color);

  position: absolute;

  top: -30px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10; */
}

#spin-wheel-img {
  object-fit: contain;

  /* This will be controlled by JS */

  transition: transform 5s cubic-bezier(0.2, 0.8, 0.4, 1);
}

.wheel-unlocked #spin-btn {
  cursor: pointer;

  background: none; /* Bright yellow when active */

  color: #000;
}

/* Style for when button is disabled (e.g., during spin) */

#spin-btn:disabled {
  cursor: not-allowed;

  opacity: 1;

  color: #999;
  background-color: var(--dark-blue-bg);
}

#spin-wheel {
  width: 280px;

  height: 280px;

  border-radius: 50%;

  position: relative;

  overflow: hidden;

  border: 10px solid #fff;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

  background: conic-gradient(
    #fbc02d 0deg 30deg,

    /* Yellow */ #333 30deg 60deg,

    /* Grey */ #4caf50 60deg 90deg,

    /* Green */ #e53935 90deg 120deg,

    /* Red */ #1e88e5 120deg 150deg,

    /* Blue */ #fbc02d 150deg 180deg,

    /* Yellow */ #333 180deg 210deg,

    /* Grey */ #4caf50 210deg 240deg,

    /* Green */ #e53935 240deg 270deg,

    /* Red */ #1e88e5 270deg 300deg,

    /* Blue */ #fbc02d 300deg 330deg,

    /* Yellow */ #333 330deg 360deg /* Grey */
  );

  transition: transform 5s cubic-bezier(0.2, 0.8, 0.4, 1);

  cursor: not-allowed;
}

#spin-wheel.unlocked {
  cursor: pointer;
}

.wheel-center {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 80px;

  height: 80px;

  background: #fff;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.2rem;

  font-weight: bold;

  color: var(--dark-blue-bg);

  z-index: 5;

  border: 5px solid #ccc;
}

/* Add this to your style.css */

/* For incorrect OTP */

.otp-invalid {
  border: 2px solid #ff4d4f !important; /* Red border */

  animation: shake 0.5s; /* Apply shake animation */

  animation-iteration-count: 1;
}

/* For correct OTP */

.otp-verified {
  border: 2px solid #52c41a !important; /* Green border */
}

/* Shake animation for input */

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

/* For status messages */

.verification-status.error {
  color: #ff4d4f; /* Red text for error messages */

  font-weight: bold;
}

.verification-status.verified {
  color: #52c41a; /* Green text for verified messages */

  font-weight: bold;
}

.resend-btn:hover {
  background: var(--yellow-color);
}

/* Style for the timer/lockout message */

.timer-message {
  width: 100%;

  text-align: center;

  color: var(--yellow-color);

  font-size: 0.9rem;

  padding: 5px 0;
}

/* New class for verified OTP input */

#phone-otp-field.otp-verified {
  border: 2px solid var(--verified-green);

  background: rgba(76, 175, 80, 0.1);
}

/* New class for invalid OTP input */

#phone-otp-field.otp-invalid {
  border: 2px solid #e53935; /* Red */

  background: rgba(229, 57, 53, 0.1);
}

/* Ensure placeholder color is visible on new backgrounds */

#phone-otp-field.otp-verified::placeholder,
#phone-otp-field.otp-invalid::placeholder {
  color: var(--text-muted);
}

/* --- WHEEL --- */

.wheel-container {
  flex-basis: 50%;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;
}

.wheel-pointer {


  /* border-left: 20px solid transparent;

  border-right: 20px solid transparent; */

  /* border-top: 30px solid var(--yellow-color); */

  position: absolute;

  top: -15px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;
}

#spin-wheel {
  width: 350px;

  height: 350px;

  border-radius: 50%;

  position: relative;

  overflow: hidden;

  border: 10px solid #fff;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

  /* Colors from your image */

  background: conic-gradient(
    #fbc02d 0deg 30deg,

    /* Yellow */ #333 30deg 60deg,

    /* Grey */ #4caf50 60deg 90deg,

    /* Green */ #e53935 90deg 120deg,

    /* Red */ #1e88e5 120deg 150deg,

    /* Blue */ #fbc02d 150deg 180deg,

    /* Yellow */ #333 180deg 210deg,

    /* Grey */ #4caf50 210deg 240deg,

    /* Green */ #e53935 240deg 270deg,

    /* Red */ #1e88e5 270deg 300deg,

    /* Blue */ #fbc02d 300deg 330deg,

    /* Yellow */ #333 330deg 360deg /* Grey */
  );

  transition: transform 5s cubic-bezier(0.2, 0.8, 0.4, 1);

  cursor: not-allowed;
}

#spin-wheel.unlocked {
  cursor: pointer;
}

.wheel-center {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100px;

  height: 100px;

  background: #fff;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.5rem;

  font-weight: bold;

  color: var(--dark-blue-bg);

  z-index: 5;

  border: 5px solid #ccc;
}

.spin-btn-box {

  display: flex;

  justify-content: center;

  align-items: center;
  position:absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#spin-btn {
  margin: 0px auto;

  color: white;

  border: none;

  font-size: 1.2rem;

  font-weight: bold;

  padding: 10px 10px;

  background:#004cc5;

  border-radius: 100%;
}



/* --- HERO SHADOW EFFECT (blue fade from top to transparent) --- */

.hero-shadow {
  width: 100%;

  height: 100px; /* Adjust height based on how deep you want the fade */

  background: linear-gradient(
    to bottom,
    #0039cb 0%,
    rgba(255, 255, 255, 0.81) 100%
  );

  margin-top: -40px; /* Pull it up to blend with hero section */
}

.cont {
  color: var(--primary);

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;
}

.containe {
  width: 90%;

  max-width: 1200px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 50px;
}

.hero-2 {
  display: flex;

  align-items: center;
}

.box {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 20px;

  margin: 20px;
}

.box1 h3 {
  text-align: left;

  margin-bottom: 5px;

  font-weight: 800;
}

.box h4 {
  font-weight: 600;

  text-align: left;

  margin-bottom: 5px;

  color: var(--blue);
}

.box p {
  font-size: 14px;
}

.card {
  background: linear-gradient(144deg, #fff 34%, rgba(212, 255, 251, 0.45) 100%);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  padding: 20px;

  border-radius: 10px;

  transition: transform 0.3s ease;
}

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

.rewardSection {
  position: relative;

  padding: 100px 0;

  display: flex;

  justify-content: center;

  align-items: center;
}

.headingBox {
  position: sticky;

  top: 50px;

  padding: 20px 0;

  z-index: 10;
}

.sectionHeading {
  text-align: center;

  font-size: 28px;

  font-weight: bold;
}

.stepsCardBox {
  position: sticky;

  top: 200px;

  height: 100vh;

  z-index: 99;

  width: 100%;
}

.stepCard {
  position: sticky;

  top: 150px;

  display: flex;

  align-items: center;

  gap: 20px;

  background: white;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  border-radius: 16px;

  padding: 30px;

  transform: scale(0.9);

  transition: all 0.3s ease;
}

.stepImages {
  width: 180px;

  border-radius: 12px;
}

.stepCardTextBox h4 {
  margin: 0;

  color: #2563eb;
}

.stepCardTextBox h3 {
  margin: 5px 0;

  font-size: 22px;

  color: #000066;
}

.stepText {
  color: #555;
}

.stepsCardBox:nth-child(2) .stepCard {
  z-index: 2;
}

.stepsCardBox:nth-child(3) .stepCard {
  z-index: 3;
}

.stepsCardBox:nth-child(4) .stepCard {
  z-index: 4;
}

.stepCard:hover {
  transform: scale(1);

  opacity: 1;
}

/* ===== SERVICES SECTION ===== */

.services-section {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  /* background: linear-gradient(318deg,rgba(238, 174, 202, 0.253) 80%, rgba(148, 188, 233, 0.274) 100%);  */

  border-radius: 20px;

  max-width: 1200px;

  margin: 60px auto;

  flex-wrap: wrap;
}

.services-image img {
  width: 100%;

  max-width: 500px;

  border-radius: 20px;

  object-fit: cover;
}

.services-content {
  flex: 1;

  min-width: 300px;
}

.services-content h2 {
  font-size: 1.9rem;

  font-weight: 700;

  margin-bottom: 15px;

  text-align: left;
}

.services-content p {
  line-height: 1.6;

  margin-bottom: 25px;

  text-align: left;
}

.service-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 15px;
}

.service-tags span {
  background: transparent;

  border: 1px solid #242424;

  padding: 8px 18px;

  border-radius: 25px;

  font-size: 0.9rem;

  cursor: default;

  transition: all 0.3s ease;
}

.service-tags span:hover {
  background: #061133;

  color: #ffffff;
}

/* ===== FAQ SECTION ===== */

.faq-section {
  display: flex;
max-width: 1140px;
  gap: 60px;

  padding: 100px 10px;

  /* max-width: 1200px; */

  margin: auto;
  background-color: white;
}

.faq-section h1 {
  flex: 1;

  font-size: 50px;

  font-weight: 800;

  line-height: 1.1;

  position: sticky;

  top: 100px;

  height: fit-content;
}

.faq-list {
  flex: 2;
}

.faq-item {
  background: #f9fafb;

  border-radius: 12px;

  margin-bottom: 20px;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);

  overflow: hidden;

  transition: all 0.3s ease;

  border-radius: 20px;
}

.faq-question {
  font-weight: 600;

  padding: 20px 25px;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition: all 0.3s ease;
   color: #25335F;
}

.faq-answer {
  max-height: 0;

  overflow: hidden;

  color: #4a4f54;

  background: #fdfdfd;

  transition:
    max-height 0.4s ease,
    padding 0.3s ease;

  padding: 0 25px;
}

.faq-item.active .faq-answer {
  max-height: 400px;

  padding: 20px 25px;
}

.faq-question span {
  font-size: 30px;

  transition: transform 0.3s ease;

  color: white;
}

.faq-item.active .faq-question span {
  transform: rotate(180deg);
}

/* ===== FOOTER SECTION ===== */

.main-footer {
  background-color: var(--bg-black);

  color: #ffffff;

  padding: 80px 5% 40px 5%;

  overflow: hidden;

  margin: 30px 15px 15px;

  border-radius: 40px;

  position: relative;
}

/* .main-footer::after {

    content: "MILLION HITS";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0.3;

    color: #cccccc;

    font-size: 40px;

    font-weight: bold;

    pointer-events: none;

    z-index: 0;

} */

.footer-container {
  max-width: 1200px;

  margin: 0 auto;
}

/* Grid Layout */

.footer-grid {
  display: grid;

  grid-template-columns: 1.5fr 1fr 1.2fr;

  gap: 40px;

  margin: 50px auto 0px;
}

/* Branding Column */

.logo {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 25px;
}

.brand-info h2 {
  font-size: 1.5rem;

  margin-bottom: 15px;

  line-height: 1.2;

  text-align: left;
}

.footer-grid .brand-info a {
  color: var(--white-color);
}

.footer-grid li a:before {
  color: var(--white-color);
}

.brand-info p {
  color: var(--text-gray);

  margin-bottom: 25px;

  font-size: 0.95rem;
}

.cta-link {
  color: #fff;

  text-decoration: none;

  font-weight: 500;

  display: flex;

  align-items: center;

  gap: 8px;
}

/* List Styling */

.footer-col h3 {
  font-size: 1.1rem;

  margin-bottom: 25px;
}

.footer-col ul {
  list-style: none;

  display: flex;

  flex-direction: column;
}

.footer-col ul li a {
  color: var(--text-gray);

  text-decoration: none;

  font-size: 0.9rem;

  transition: var(--transition);
}

.footer-links {
  display: flex;

  gap: 50px;
}

/* Social Icons */

.social-sub {
  color: var(--text-gray);

  font-size: 0.85rem;

  margin-bottom: 20px;
}

.social-icons {
  display: flex;

  gap: 12px;
}

.icon {
  width: 40px;

  height: 40px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff !important;

  text-decoration: none;

  font-size: 0.8rem;

  transition: var(--transition);
}

/* Massive Watermark Text */

.massive-text {
  font-size: 7vw;

  font-weight: 900;

  text-align: center;

  opacity: 1;

  letter-spacing: -5px;

  margin: 20px 0;

  white-space: nowrap;

  user-select: none;
}

/* Footer Bottom */

.footer-bottom {
  padding-bottom: 20px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 0.8rem;

  color: var(--text-gray);
}

.free-link {
  color: var(--text-gray);

  text-decoration: none;
}

/* --- Responsive Adjustments --- */

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .brand-info h2 {
    font-size: 1.2rem;

    margin-bottom: 15px;

    line-height: 1.2;

    text-align: left;
  }

  .footer-col ul {
    text-align: left;
  }

  .footer-col .logo img {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;

    gap: 15px;

    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .massive-text {
    font-size: 16px;

    letter-spacing: 10px;
  }
}

/* Cta-Section */

.cta-section {
  /* max-width: 1200px; */

  position: relative;

  width: 100%;

  min-height: 100vh;

  background-color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  padding: 100px 35px;
}

/* Central Text Styling */

.cta-content {
  text-align: center;

  z-index: 10; /* Keep text above all images */

  max-width: 700px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
}

.cta-content h1 {
  font-size: 2rem;

  font-weight: 800;

  color: var(--bg-black);

  line-height: 1.1;

  margin-bottom: 20px;
}

.cta-content p {
  color: var(--text-gray);

  margin-bottom: 40px;
}

.cta-btn {
  background: var(--text-gray);

  padding: 10px 15px;

  border-radius: 20px;
}

.cta-btn li a:before {
  color: var(--bg-black);
}

/* Floating Images Base Styling */

.floating-img {
  position: absolute;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.floating-img img {
  width: 100%;

  height: auto;

  display: block;
}

/* Specific Positions (Matching the Image) */

.img-1 {
  top: 10%;
  left: 5%;
  width: 280px;
  z-index: 1;
}

.img-2 {
  top: 8%;
  right: 15%;
  width: 280px;
  z-index: 2;
}

.img-3 {
  top: 20%;
  right: 5%;
  width: 220px;
  z-index: 1;
} /* Overlaps img-2 */

.img-4 {
  bottom: 15%;
  left: 5%;
  width: 220px;
  z-index: 2;
}

.img-5 {
  bottom: 0%;
  left: 18%;
  width: 280px;
  z-index: 1;
} /* Overlaps img-4 */

.img-6 {
  bottom: 10%;
  right: 10%;
  width: 220px;
  z-index: 1;
}

/* Responsive: Hide or reposition images on small screens */

@media (max-width: 1024px) {
  .floating-img {
    width: 150px; /* Scale down for tablets */
  }
}

@media (max-width: 768px) {
  .cta-section {
    min-height: 600px;
  }

  .cta-content h1 {
    font-size: 1.5rem;
  }

  .cta-content p {
    font-size: 0.8rem;
  }

  .cta-btn {
    padding: 5px 14px;
  }

  .img-1 {
    top: 10%;
    left: 5%;
    width: 120px;
    z-index: 1;
  }

  .img-2 {
    top: 8%;
    right: 15%;
    width: 120px;
    z-index: 2;
  }

  .img-3 {
    top: 20%;
    right: 5%;
    width: 100px;
    z-index: 1;
  } /* Overlaps img-2 */

  .img-4 {
    bottom: 15%;
    left: 5%;
    width: 100px;
    z-index: 2;
  }

  .img-5 {
    bottom: 0%;
    left: 18%;
    width: 120px;
    z-index: 1;
  } /* Overlaps img-4 */

  .img-6 {
    bottom: 10%;
    right: 10%;
    width: 100px;
    z-index: 1;
  }
}

@media (max-width: 480px) {
  .cta-section {
    min-height: 500px;
  }
}

/* --- POPUP STYLES --- */

.popup-overlay {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  backdrop-filter: blur(10px) saturate(120%);

  background: rgba(0, 0, 0, 0.4); /* Darker overlay for better contrast */

  z-index: 1000;

  display: flex;

  justify-content: flex-start; /* Aligns content to the LEFT */

  align-items: stretch; /* Stretches content to full height */

  opacity: 0;

  visibility: hidden;

  transition: all 0.5s ease;
}

.popup-overlay.active {
  opacity: 1;

  visibility: visible;
}

.popup-content {
  background: #0A1E3C
; /* Solid theme color */

  padding: 60px 40px;

  width: 50%; /* TAKES 50% WIDTH */

  height: 100vh; /* FULL HEIGHT */

  position: relative;

  overflow-y: auto; /* Allows scrolling if form is long */

  /* Slide-in from left */

  transform: translateX(-100%);

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffff;

  border-right: 2px solid rgba(255, 255, 255, 0.1);
}
.popup-content::-webkit-scrollbar {
    display: none;
}
.popup-overlay.active .popup-content {
  transform: translateX(0);
}

.close-btn {
  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 2rem;

  color: #ffff;

  cursor: pointer;

  background: transparent;

  border: none;
}

.popup-content h3 {
  text-align: center;

  font-size: 1.8rem;

  margin-bottom: 5px;


}

.popup-content p {
  text-align: center;



  margin-bottom: 20px;

  font-size: 15px;
}

/* --- FORM STYLES --- */

#registration-form input:not([type="checkbox"]),
#registration-form textarea {
  width: 100%;

  padding: 14px 18px;

  margin: 8px 0px;

  border: none;

  border-radius: 14px;

  background: rgba(255,255,255,.07);

  color: black;

  font-size: 0.8rem;

  resize: none; /* Optional */

  overflow: auto; /* Allows scrolling */

  /* Hide scrollbar for Webkit browsers (Chrome, Safari) */

  &::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */

  scrollbar-width: none;
}
.inp-label{
  font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,.7);
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
}
#registration-form input::placeholder,
#registration-form textarea::placeholder {
  color: gray;
}

.input-group {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 8px;

  align-items: center;

  /* margin-bottom: 15px; */

  position: relative; /* For status absolute positioning */

  width: 100%;
}

.input-group input[type="email"],
.input-group input[type="tel"] {
  flex-grow: 1;

  margin-bottom: 0; /* Override default margin */
}

.send-otp-btn.pending {
  background: #ffb227; /* <-- REPLACED */

  color: var(--dark-blue-bg);

  box-shadow: none; /* <-- REPLACED (cleaner) */
}

.yellow-btn {
  font-weight: bold;

  /* color: #005BB7; */

  color: white;

  background: #002c5775; /* <-- REPLACED */

  border: none;

  padding: 10px;

  border-radius: 15px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

  box-shadow: none; /* <-- REPLACED (cleaner) */
}

.otp-btn:hover:not(:disabled) {
  background-color: #777;
}

.otp-btn:disabled {
  background-color: #333;

  color: #888;

  cursor: not-allowed;
}

.otp-verification-group {
  display: grid;

  gap: 10px;

  width: 100%;

  margin: 5px 0px;

  grid-template-columns: 1fr 1fr 1fr;

  align-items: center;
}

.otp-verification-group input {
  flex-grow: 1;

  max-width: 150px; /* Adjust as needed for OTP field */

  text-align: center;
}

.verification-status {
  position: absolute;

  right: 10px; /* Adjust as needed */

  top: 50%;

  transform: translateY(-50%);

  font-size: 0.9rem;

  font-weight: bold;

  padding: 5px 10px;

  border-radius: 3px;

  white-space: nowrap;

  pointer-events: none; /* So it doesn't block clicks */
}

.verification-status.pending {
  color: var(--pending-orange);

  font-weight: bold;

  background: #002b57;

  border: none;

  padding: 10px;

  border-radius: 15px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

  box-shadow: none;
}

.verification-status.verified {
  color: var(--verified-green);
}

#registration-form .cta-button {
  width: 100%;

  margin-top: 15px;
}

/* --- RESULT POPUP --- */

.result-icon {
  width: 80px;

  height: 80px;

  margin: 0 auto 20px auto;

  display: block;

  /* Faking icon color */

  filter: invert(80%) sepia(59%) saturate(1637%) hue-rotate(320deg)
    brightness(101%) contrast(101%);
}

#result-popup h2 {
  text-align: center;

  color: var(--yellow-color);

  font-size: 2rem;
}

#result-popup #win-content p {
  color: var(--white-color);
}

.prize-won {
  font-size: 1.5rem;

  font-weight: bold;

  color: var(--white-color);

  background: rgba(0, 0, 0, 0.2);

  padding: 15px;

  border-radius: 5px;

  text-align: center;

  margin: 15px 0;
}

#result-popup .cta-button {
  width: 100%;

  margin-top: 20px;
}

.verifyBar {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  place-items: center;

  place-content: center;
}

/* ===== RESPONSIVE STYLES ===== */

@media (max-width: 768px) {
  .circle {
    width: 220px;

    height: 220px;

    border: 5px solid white;
  }

  .wheel-center {
    width: 55px;

    height: 55px;

    font-size: 0.9rem;
  }

  .triangle {
    top: -12px;

    border-left: 8px solid transparent;

    border-right: 8px solid transparent;

    border-bottom: 12px solid yellow;
  }

  .hero-2 {
    flex-wrap: wrap;
  }

  .stepsCardBox {
    height: 80vh;
  }

  .services-section {
    flex-direction: column;

    text-align: center;

    padding: 35px;

    margin: 0px auto;
  }

  .services-image img {
    max-width: 100%;
  }

  .services-content h2 {
    font-size: 1.5rem;

    margin-bottom: 7px;

    text-align: center;
  }

  .services-content p {
    line-height: 1.2;

    margin-bottom: 15px;
  }

  .service-tags {
    gap: 7px;

    justify-content: center;
  }

  .faq-section {
    flex-direction: column;

    padding: 35px;

    gap: 30px;
  }
  .faq-h2{
      text-align: left;
      font-size:24px !important;
  }

  .faq-section h1 {
    position: relative;

    font-size: 36px;

    text-align: left;

    top: 0;
  }

  .faq-question {
    font-size: 16px;

    padding: 18px 20px;
  }

  .faq-answer {
    font-size: 15px;

    padding: 0 20px;
  }

  .popup-content {
    width: 100%; /* Take full width on mobile devices */

    border-radius: 0;
  }

  .popup-form {
    width: 95%;

    padding: 30px 25px;
  }

  .popup-form h2 {
    font-size: 1.2rem;
  }

  .popup-form p {
    font-size: 0.85rem;

    margin-bottom: 20px;
  }

  .input-with-btn {
    flex-direction: column;

    align-items: stretch;
  }

  .input-with-btn button {
    width: 100%;

    margin-top: 5px;
  }

  .otp-section {
    flex-direction: column;

    align-items: stretch;
  }

  .otp-section button {
    width: 100%;

    margin-top: 5px;
  }

  #confirmUnlock {
    font-size: 0.95rem;
  }

  #spin-btn {
    font-size: 0.8rem;
  }

  .hero-section span {
    font-size: 12px;
  }

  .close-btn {
    font-size: 30px;

    top: 15px;

    right: 50px;
  }
}

@media (max-width: 480px) {
  .popup-content {
    height: 100vh;

    overflow: auto;
  }

  .popup-content h3 {
    font-size: 20px;
  }

  .popup-content p {
    font-size: 12px;
  }

  .popup-content label {
    font-size: 14px;
  }

  .circle {
    width: 180px;

    height: 180px;

    border: 4px solid white;
  }

  .wheel-center {
    width: 45px;

    height: 45px;

    font-size: 0.8rem;
  }

  .triangle {
    top: -10px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 10px solid yellow;
  }

  .popup-form {
    padding: 25px 20px;

    border-radius: 15px;
  }

  .popup-form h2 {
    font-size: 1.1rem;
  }

  .popup-form p {
    font-size: 0.8rem;
  }

  /* Styles for the new contact info */

  .contact-notice {
    font-size: 1rem; /* 16px */

    color: #ffffff;

    margin-top: 20px;

    margin-bottom: 16px;
  }

  .contact-links {
    margin-top: 16px;

    text-align: left;

    /* Center the block */

    max-width: 280px;

    margin-left: auto;

    margin-right: auto;
  }

  .contact-links p {
    font-size: 1.1rem; /* 18px */

    font-weight: 600;

    margin-bottom: 16px;

    color: #ffffff; /* White text */
  }

  .contact-link-item {
    display: flex;

    align-items: center;

    margin-bottom: 16px;

    text-decoration: none;

    color: #e0e0e0; /* Light gray text */

    transition: color 0.2s ease;
  }

  /* Makes the links brighter on hover */

  .contact-link-item:hover {
    color: #ffffff;
  }

  /* Styles for the icons (SVG) */

  .contact-link-item svg {
    width: 20px;

    height: 20px;

    margin-right: 12px;

    fill: currentColor; /* Makes the icon match the text color */
  }

  .contact-link-item span {
    font-size: 0.95rem; /* 15px */

    /* Allows the email to wrap if too long */

    word-break: break-all;
  }

  input,
  button {
    font-size: 0.9rem;
  }

  .close-btn {
    font-size: 24px;

    top: 10px;

    right: 15px;
  }

  #spin-btn {
    font-size: 0.7rem;
  }

  .verifyBar {
    grid-template-columns: 1fr;

    gap: 10px;
  }
}

@media (max-width: 1000px) {
  .services-section {
    flex-direction: column;

    text-align: center;
  }
}

@media (max-width: 1300px) {
  .services-section {
    padding: 35px;

    margin: 0px auto;
  }
}

#email-otp-group input:not([type="checkbox"]) {
  margin: 0;
}

#phone-otp-group input:not([type="checkbox"]) {
  margin: 0;
}

.basic-details {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}

/* Default (no border visible) */

#registration-form input:not([type="checkbox"]),
#registration-form textarea {
  border: 1px solid transparent; /* invisible border to prevent layout shift */
  color:white;
  transition: all 0.3s ease;
}

/* Hover, focus, and active states */

#registration-form input:not([type="checkbox"]):hover,
#registration-form input:not([type="checkbox"]):focus,
#registration-form input:not([type="checkbox"]):active,
#registration-form textarea:hover,
#registration-form textarea:focus,
#registration-form textarea:active {
  box-shadow: 0 0 10px rgba(2, 128, 255, 0.5);

  background-color: rgba(2, 128, 255, 0.08);

  border-color: #0280ff; /* appears blue only on hover/focus */

  outline: none;

  transform: scale(1.01); /* optional subtle grow effect */
}

/* Optional: make placeholder fade out on focus */

#registration-form input:focus::placeholder,
#registration-form textarea:focus::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* ===== Make hero-2 behave like rewardSection ===== */

.hero-2 {
  position: relative;

  padding: 100px 0; /* match rewardSection spacing */

  display: grid; /* two columns: left text, right cards */

  grid-template-columns: 1.2fr 1.8fr;

  gap: 40px;
}

/* Left column (title/paragraph) acts like the sticky headingBox */

.hero-2 .box1 {
  position: sticky;

  top: 100px; /* where it locks on scroll */

  align-self: start;

  padding: 20px 0;

  z-index: 5;
}

/* Right column becomes a vertical stack like stepsCardBox */

.hero-2 .box2 {
  position: relative;

  display: grid;

  gap: 60px; /* space between sticky cards (visual separation) */
}

/* Cards mimic stepCard look/feel + sticky layering */

.hero-2 .box2 .card {
  position: sticky;

  top: 140px; /* lock height similar to rewardSection cards */

  background: #fff;

  border-radius: 16px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  padding: 28px;

  transform: scale(0.92);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  z-index: 1;
}

/* Subtle hover pop like reward cards */

.hero-2 .box2 .card:hover {
  transform: scale(1);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Layering order so later cards appear above earlier ones */

.hero-2 .box2 .card:nth-child(1) {
  z-index: 2;
}

.hero-2 .box2 .card:nth-child(2) {
  z-index: 3;
}

.hero-2 .box2 .card:nth-child(3) {
  z-index: 4;
}

/* Headings/colors aligned with your reward styles */

.hero-2 .box1 h3 {
  font-size: 28px;

  font-weight: 800;

  margin-bottom: 8px;
}

.hero-2 .box2 .card h4 {
  margin: 0 0 6px 0;

  font-weight: 700;

  color: #2563eb; /* same blue accent used in reward cards */
}

.hero-2 .box2 .card p {
  color: #555;

  font-size: 15px;

  margin: 0;
}

/* ===== Responsive to match rewardSection behaviour ===== */

@media (max-width: 992px) {
  .hero-2 {
    display: block;

    padding: 80px 0;
  }

  .hero-2 .box1 {
    position: sticky; /* keep it sticky */

    top: 40px; /* smaller top offset for mobile */

    z-index: 2;

    margin-bottom: 40px;
  }

  .hero-2 .box2 {
    display: flex;

    flex-direction: column;

    gap: 40px;
  }

  .hero-2 .box2 .card {
    position: sticky; /* maintain sticky */

    top: 365px; /* adjust for smaller screen height */

    z-index: 2;

    transform: none;

    height: 200px;
  }

  .hero-2 .box2 .card:nth-child(2) {
    z-index: 3;
  }

  .hero-2 .box2 .card:nth-child(3) {
    z-index: 4;
  }
}

.hero-section span {
  text-align: center;

  margin-top: 10px;
}

.wheel-container img {
  height: 350px;

  transition: transform 3s ease-in-out;
}

.iconBox {
  display: flex;

  gap: 20px;

  align-items: center;
}

a.icons {
  color: #fff;

  display: flex;

  font-size: 0.8rem;

  justify-content: center;

  gap: 5px;

  align-items: center;

  text-decoration: none;
}

.icons i {
  font-size: 1.3rem;

  /* color: black;   */
}

@media (max-width: 450px) {
  .iconBox {
    display: grid;

    grid-template-columns: 1fr 1fr; /* first 2 items = 50% each */

    gap: 10px;
  }

  /* Make the last element full width + centred */

  .iconBox a.icons:last-child {
    grid-column: 1 / 3; /* span across both columns */

    justify-content: center; /* center the content */
  }
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 768px) {
  .wheel-container img {
    height: 250px;
  }

  .cta-button {
    font-size: 0.7rem;

    padding: 10px 27px;
  }
}

@media (min-width: 768px) {
  .hero-content {
    flex-basis: 50%;

    padding-right: 40px;

    margin-bottom: 0;
  }

  .wheel-container {
    flex-basis: 50%;

    margin: 0;
  }

  #spin-wheel {
    width: 350px;

    height: 350px;
  }

  .wheel-center {
    width: 100px;

    height: 100px;

    font-size: 1.5rem;
  }
}

/* Responsive for mobile */

@media (max-width: 480px) {
  .hero-section {
    margin: 0px auto;
  }

  h1 {
    font-size: 2.2rem;
  }

  .hero-content {
    text-align: center;

    margin-bottom: 300px;
  }

  .hero-content h1 {
    font-size: 1.5rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  #spin-wheel {
    width: 250px;

    height: 250px;
  }

  .wheel-center {
    width: 70px;

    height: 70px;

    font-size: 1rem;
  }

  .feature {
    font-size: 11px;
  }

  .cta-button {
    margin-bottom: 20px;
  }
}

/* =====================================================

       STATS STRIP

       ===================================================== */

/* .stats-strip {
  background: var(--bg-secondary);

  display: flex;

  justify-content: center;

  align-items: center;
} */

.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stats-strip__item {
  text-align: center;

  background: #fff;
  border-radius: var(--radius-inner);

  padding: 32px 24px;
  box-shadow: var(--shadow);
}

.stats-strip__number {
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;

  margin-bottom: 8px;
}

.stats-strip__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

@media (max-width: 900px) {
  .stats-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-strip__grid {
    grid-template-columns: 1fr;
  }
  .stats-strip__number{
    font-size: 24px;
  }
  
}

/* =====================================================

       HOW IT WORKS

       ===================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step-card {
  background: var(--bg-main);
  border-radius: var(--radius-card);

  padding: var(--pad-text);
  box-shadow: var(--shadow);

  position: relative;
  overflow: hidden;

  transition: transform 0.3s;

  text-align: start;
}

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

.step-card__num {
  font-size: 56px;
  font-weight: 800;
  color: var(--accent-light);

  line-height: 1;
  margin-bottom: 20px;
  display: block;
}

.step-card__icon {
  width: 56px;
  height: 56px;
  background: var(--accent-light);

  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.step-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.step-card h3 {
  margin-bottom: 12px;
  color: #25335F;
}

.step-card p {
  color: rgba(37, 51, 95, 0.7);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* =====================================================

       PRIZES

       ===================================================== */

.prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.prize-card {
  background: var(--bg-main);
  border-radius: var(--radius-card);

  padding: var(--pad-text);
  box-shadow: var(--shadow);

  transition:
    transform 0.3s,
    box-shadow 0.3s;
text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prize-card:hover {
  transform: translateY(-8px);

  box-shadow: 2px 8px 32px 2px rgba(0, 76, 197, 0.18);
}

.prize-card--featured {
  background: var(--bg-dark);
  color: var(--text-dark-bg);

  grid-column: span 3;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

.prize-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: var(--accent-light);
  color: var(--accent);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
}

.prize-card--featured .prize-card__badge {
  background: rgba(0, 76, 197, 0.3);
  color: #7eb3ff;
}

.prize-card__icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;

  background: var(--accent-light);
  display: grid;
  place-items: center;
}

.prize-card--featured .prize-card__icon-wrap {
  background: rgba(0, 76, 197, 0.25);
  width: 80px;
  height: 80px;
  border-radius: 22px;
}

.prize-card__icon-wrap svg {
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.prize-card--featured .prize-card__icon-wrap svg {
  width: 40px;
  height: 40px;
  color: #7eb3ff;
}

.prize-card h3 {
  margin-bottom: 0;
   color: #25335F;
}

.prize-card--featured h3 {
  font-size: 28px;
  color: #fff;
}

.prize-card p {
  color: rgba(37, 51, 95, 0.7);
  margin-top: 0;
}

.prize-card--featured p {
  color: rgba(255, 255, 255, 0.7);
}

.prize-card__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  margin-top: 4px;
}

.prize-card--featured .prize-card__value {
  color: #7eb3ff;
  font-size: 32px;
}

.prize-card__ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.prize-card__ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  font-size: 14px;
  color: rgba(37, 51, 95, 0.75);
}

.prize-card--featured .prize-card__ul li {
  color: rgba(255, 255, 255, 0.7);
}

/* .prize-card__ul li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;

  background: var(--accent-light);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
} */

.prize-card__ul li .check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;

  background: var(--accent-light);
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.prize-card--featured .prize-card__ul li .check {
  background: rgba(0, 76, 197, 0.3);
}

.prize-card__ul li .check svg {
  width: 10px;
  height: 10px;
  color: var(--accent);
}

.prize-card--featured .prize-card__ul li .check svg {
  color: #7eb3ff;
}

@media (max-width: 900px) {
  .prizes-grid {
    grid-template-columns: 1fr;
  }

  .prize-card--featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* =====================================================

       SERVICES OFFERED (prizes detail)

       ===================================================== */

.services-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.service-card {
  background: var(--bg-main);
  border-radius: var(--radius-card);

  overflow: hidden;
  box-shadow: var(--shadow);

  transition: transform 0.3s;
}

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

.service-card__head {
  background: var(--bg-dark);
  padding: 32px;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-card__head-icon {
  width: 52px;
  height: 52px;
  background: rgba(0, 76, 197, 0.3);
  border-radius: 14px;

  display: grid;
  place-items: center;
}

.service-card__head-icon svg {
  width: 26px;
  height: 26px;
  color: #7eb3ff;
}

.service-card__head h3 {
  color: #fff;
}

.service-card__head p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.service-card__body {
  padding: 32px;
}

.service-card__deliverables {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card__deliverables li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

.service-card__deliverables li .tick {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 1px;
}

.service-card__deliverables li .tick svg {
  width: 18px;
  height: 18px;
}

.service-card__prize-banner {
  margin-top: 20px;
  background: var(--accent-light);
  border-radius: var(--radius-inner);

  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);

  text-align: center;
}

@media (max-width: 900px) {
  .services-strip {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* =====================================================

       WHY MILLION HITS

       ===================================================== */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--bg-dark);
  border-radius: var(--radius-card);
  padding: 35px;
}

.why-visual {
  position: relative;
   
}

.why-visual__card {
  /* background: var(--bg-dark); */
  /* border-radius: var(--radius-card); */

  /* padding: 40px; */
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.why-visual__metric {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-inner);

  padding: 16px 20px;
}

.why-visual__metric-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.why-visual__metric-value {
  font-size: 20px;
  font-weight: 800;
  color: #7eb3ff;
}

.why-bar-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-bar-item__label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.why-bar-item__track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.why-bar-item__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--btn);
  transition: width 1.2s ease;
  width: 0;
}

.why-content {
  text-align: start;
}

#why-heading {
  text-align: start;
  color: var(--white-color);
}

.section-label {
  text-transform: uppercase;
text-align: center;
  padding: 5px 15px;

  background: #e8f0ff;

  width: fit-content;

  border-radius: 15px;

  font-weight: bolder;

  color: var(--accent);

  margin: 20px auto;

  letter-spacing: 2px;
}
.section-label-why{
  text-transform: uppercase;
text-align: left;
  padding: 5px 15px;

  background: #e8f0ff;

  width: fit-content;

  border-radius: 15px;

  font-weight: bolder;

  color: var(--accent);

  margin-bottom: 20px;

  letter-spacing: 2px;
}

.why-points {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
  color: #fff;
}

.why-point {
  display: flex;
  gap: 20px;
}

.why-point__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-light);

  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.why-point__icon svg {
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.why-point h3 {
  margin-bottom: 6px;
}

.why-point p {
  color: #fff; 
  font-size: 15px;
}

@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================

       TESTIMONIALS

       ===================================================== */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.testimonial-card {
  background: var(--bg-main);
  border-radius: var(--radius-card);

  padding: var(--pad-text);
  box-shadow: var(--shadow);

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial-card__stars {
  display: flex;
  gap: 4px;
}

.testimonial-card__stars svg {
  width: 18px;
  height: 18px;
  color: #f59e0b;
  fill: #f59e0b;
}

.testimonial-card__quote {
  font-size: 16px;
  color: var(--text-main);
  line-height: 1.65;

  flex: 1;
}

.testimonial-card__result {
  background: var(--accent-light);
  border-radius: var(--radius-inner);

  padding: 16px 20px;
}

.testimonial-card__result-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 4px;
}

.testimonial-card__result-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;

  background: var(--bg-secondary);

  display: grid;
  place-items: center;
  flex-shrink: 0;

  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}

.section__header.reveal.in-view {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
}

.testimonial-card__name {
  font-weight: 700;
  font-size: 15px;
}

.testimonial-card__biz {
  font-size: 13px;
  color: rgba(37, 51, 95, 0.55);
}

.why-point {
  text-align: start;
}

@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}
/* ========= MODERN OTP DESIGN ========= */
.modern-otp-group {
  margin-bottom: 28px;
}
.modern-otp-group label {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,.7);
  display: block;
  margin-bottom: 6px;
}
.email-resend-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.email-resend-row input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.95rem;
  transition: 0.2s;
}
.email-resend-row input:focus {
  border-color: #ffc107;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.2);
}
.resend-otp-btn {
  background: #f1f5f9;
  border: none;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  color: #7eb3ff;
  transition: all 0.2s;
  background: rgba(0,76,197,.35);
}
.resend-otp-btn:hover:not(:disabled) {
  background: rgba(0,76,197,.55);
  
}
.resend-otp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.otp-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  margin: 16px 0 10px 0;
  letter-spacing: 0.3px;
}
.otp-digit-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}
.otp-digit-box {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  border: 1.5px solid #cbd5e1;
  border-radius: 16px;
  background: white;
  transition: all 0.15s;
  font-family: monospace;
}
.otp-digit-box:focus {
  border-color: #ffc107;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.3);
  transform: scale(1.02);
}
.otp-digit-box.otp-verified {
  border-color: #22c55e;
  background: #f0fdf4;
}
.otp-digit-box.otp-invalid {
  border-color: #ef4444;
  animation: shake 0.4s ease-in-out;
}
.otp-status {
  font-size: 0.8rem;
  text-align: center;
  margin-top: 8px;
  min-height: 28px;
}
.timer-message {
  font-size: 0.75rem;
  text-align: center;
  color: #ff8c00;
  margin-top: 6px;
}
@keyframes shake {
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-5px); }
  75%{ transform: translateX(5px); }
}

/* Responsive */
@media (max-width: 550px) {
  .otp-digit-box {
    width: 42px;
    height: 52px;
    font-size: 1.3rem;
  }
  .email-resend-row {
    flex-direction: column;
  }
  .resend-otp-btn {
    width: 100%;
    text-align: center;
  }
}

svg{
  height: 35px;
}
@media(max-width:800px) {
   svg{
    height: 20px;
  }
  .spin-btn-box {
    top: 48.5%;
  }
}
@media(max-width:500px) {
   svg{
    height: 20px;
  }
  .spin-btn-box {
    top: 48.7%;
  }
  .container h2{
  font-size: 24px;
}
}
.roller-box{
position: relative;
}
 /* =====================================================
       FOOTER
       ===================================================== */
    .footer {
      background: var(--bg-dark); padding: 80px 0 40px;
      margin: 50px 0px 0px;
    }
    .footer__grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px;
      margin-bottom: 60px;
      text-align: left;
    }
    .footer__grid h4{
      color: white;
      margin-bottom: 20px;
    }
    .footer__logo { margin-bottom: 20px; }
    .navbar__logo-icon img{width: 70px;}
    .footer__about { color: rgba(255,255,255,.5) !important; font-size: 14px; line-height: 1.7; max-width: 280px; }
    .footer__socials { display: flex; gap: 12px; margin-top: 24px; }
    .footer__social-btn {
      width: 40px; height: 40px; border-radius: 12px;
      background: rgba(255,255,255,.08); display: grid; place-items: center;
      transition: background .2s;
    }
    .footer__social-btn:hover { background: var(--btn); }
    .footer__social-btn svg { width: 18px; height: 18px; color: rgba(255,255,255,.7); }
    .footer__col h4 { color: #fff; margin-bottom: 20px; }
    .footer__links { list-style: none; display: flex; flex-direction: column; gap: 12px; text-align: left; }
    .footer__links li a { color: rgba(255,255,255,.5); font-size: 14px;  }
    .footer__links li a:hover { color: #fff !important; }
    .footer__contact-item {
      display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px;
    }
    .footer__contact-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
    .footer__contact-item span { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.5; }
    .footer__contact-item a { color: rgba(255,255,255,.6); }
    .footer__contact-item a:hover { color: #fff; }
    .footer__bottom {
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 32px; display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 16px;
    }
    .footer__copy { color: rgba(255,255,255,.35); font-size: 13px; }
    .footer__legal { display: flex; gap: 24px; }
    .footer__legal a { color: rgba(255,255,255,.35); font-size: 13px; transition: color .2s; }
    .footer__legal a:hover { color: rgba(255,255,255,.7); }
    @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
    
    /* =====================================================
     RESULT POPUP (NEW MODERN DESIGN)
     ===================================================== */
.result-overlay .popup-content {
  background: #0A1E3C;
  color: white;
  width: 90%;
  max-width: 520px;
  height: auto;
  margin: auto;
  border-radius: 32px;
  padding: 40px 32px;
  transform: translateY(-20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-right: none;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.result-overlay.active .popup-content {
  transform: translateY(0);
}
.result-overlay {
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}
.result-close-btn {
  color: #94a3b8;
  top: 20px;
  right: 24px;
  font-size: 1.5rem;
}
.result-close-btn:hover {
  color: #1e293b;
}
.result-icon {
  text-align: center;
  margin-bottom: 20px;
}
.result-icon svg {
  width: 60px;
  height: 60px;
  color: #004cc5;
  stroke-width: 1.5;
}
#win-content h2, #lose-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: 8px;
}
.prize-badge {
  background: linear-gradient(135deg, #004cc5, #0066ff);
  color: white;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  padding: 16px 20px;
  border-radius: 60px;
  margin: 20px 0;
  letter-spacing: -0.3px;
  box-shadow: 0 8px 20px rgba(0, 76, 197, 0.2);
}
.prize-description {
  color: #334155;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  margin: 16px 0;
}
.next-steps {
  background: #f8fafc;
  border-radius: 24px;
  padding: 20px 24px;
  margin: 20px 0;
}
.next-steps h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  letter-spacing: -0.2px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 15px;
  color: #1e293b;
}
.contact-row svg {
  width: 20px;
  height: 20px;
  color: #004cc5;
  flex-shrink: 0;
}
.contact-note {
  font-size: 13px;
  color: #475569;
  text-align: center;
  margin: 20px 0 0;
  line-height: 1.5;
}
.result-cta {
  width: 100%;
  margin-top: 28px;
  background: #004cc5;
  box-shadow: 0 4px 12px rgba(0, 76, 197, 0.25);
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 16px;
}
.result-cta:hover {
  transform: translateY(-2px);
  background: #003a96;
}

@media (max-width: 550px) {
  .result-overlay .popup-content {
    padding: 32px 20px;
    width: 92%;
  }
  .prize-badge {
    font-size: 18px;
    padding: 12px 16px;
  }
  #win-content h2 {
    font-size: 24px;
  }
  .next-steps {
    padding: 16px;
  }
}

#hero-heading{
    font-size:32px;
}

.WhyChooseBox{
    grid-column: 1/-1;
    display: flex;
    gap:32px;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.WhyChooseCard{
    padding:12px 24px;
    border:1px solid white;
    background-color:rgba(255, 255, 255, 0.10);
    border-radius:29px;
    margin:0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add this to your CSS */
.roller-box {
    cursor: pointer;
}

.wheel-unlocked .roller-box {
    /* Optional: change cursor once unlocked or keep as pointer */
    cursor: default; 
}

#spin-btn:disabled {
    /* Ensure the disabled button doesn't block the click from reaching the roller-box */
    pointer-events: none; 
}

#spin-btn:not(:disabled) {
    /* Re-enable pointer events so the button can be clicked to spin */
    pointer-events: auto;
    cursor: pointer;
}