@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
html,
body {
  overflow-x: hidden !important;
}
body {
  padding: 0px;
  margin: 0;
  box-sizing: border-box;
  font-family: "Urbanist", sans-serif;
  background-color: var(--Background);
  color: var(--Text-White);
}

:root {
  --Background: #030712;
  --Background-Secondary: #1d212a;
  --Background-Secondary: #1d212a;
  --Text-White: #ffffff;
  --Text-Secondary: #d1d5db;
  --Text-Tertiary: #71717a;
  --Cards: #fbf1e9;
}
.button-one {
  background-image: linear-gradient(#672dff, #932dff, #e522ff);
  padding: 10px 30px;
  color: var(--Text-White);
  border-radius: 10px;
  border: none;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.button-one:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(146, 45, 255, 0.5);
  filter: brightness(1.2);
}

.button-two {
  position: relative;
  display: inline-block;
  padding: 10px 30px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  background: #0b0120;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  background-image: linear-gradient(#0b0120, #0b0120),
    linear-gradient(90deg, #672dff, #932dff, #e522ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.button-two:hover {
  color: #fff;
  background-image: linear-gradient(#1a0036, #1a0036),
    linear-gradient(90deg, #e522ff, #932dff, #672dff);
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(146, 45, 255, 0.5);
}

.header .nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
}

.header .nav-bar .logo {
  height: 90px;
}

.sub-heading {
  border: 1px solid var(--Text-Tertiary);
  font-size: 14px;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 30px;
  color: #d1d5db;
  margin-bottom: 10px;
}
.heading-one {
  font-size: 56px;
  font-weight: 700;
}
.heading-two {
  font-size: 48px;
  font-weight: 700;
}

.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mobile-hend-box {
  position: relative;
  text-align: center;
}

.mobile-task {
  border: 1px solid var(--Text-Tertiary);
  font-size: 14px;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 30px;
  color: #d1d5db;
  margin: 0 auto;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Positions */
.mobile-task.task-one {
  position: absolute;
  left: 0;
  top: 20%;
  z-index: 1;
  animation-name: moveLeftRight;
}

.mobile-task.task-two {
  position: absolute;
  left: 10%;
  top: 60%;
  z-index: 1;
  animation-name: moveUpDown;
}

.mobile-task.task-there {
  position: absolute;
  right: 0;
  top: 40%;
  z-index: 1;
  animation-name: tiltSwing;
}

@keyframes moveLeftRight {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(15px);
  }
}

@keyframes moveUpDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes tiltSwing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}

.game-rate-ul {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style-type: none;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.game-rates-card {
  background-color: #fbf1e9;
  padding: 14px 50px;
  border-radius: 12px;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  white-space: nowrap;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

/* Hover effect */
.game-rates-card:hover {
  transform: translateY(-6px);
  background-color: #fff;
  border-color: #e0c3fc;
  box-shadow: 0 8px 20px rgba(103, 45, 255, 0.2);
  color: #672dff;
}


.game-rates-card h3 {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}
.game-rates-card h4 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.best-choise-list {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
  gap: 30px;
}
.best-choise-list li {
  display: flex;
  gap: 10px;
}
.best-choise-list li .Choice-content h3 {
  font-size: 26px;
  margin: 0;
  font-weight: 600;
}
.best-choise-list li .Choice-content p {
  font-size: 18px;
  margin: 0;
  color: var(--Text-Tertiary);
  margin: 0;
}

.five-section-box {
  background-image: linear-gradient(to right, #e522ff, #672dff, #030712);
  background-image: linear-gradient(
    to right,
    rgba(229, 34, 255, 0.6),
    rgba(103, 45, 255, 0.6),
    rgba(3, 7, 18, 0.6)
  );
  border-radius: 30px;
  padding: 10px;
}

.market-game {
  margin: -100px 0;
}
.dwnl-text {
  font-size: 24px;
  margin-bottom: 20px;
}

.footer {
  background-color: var(--Background-Secondary);
}
.footer .footer-logo {
  max-height: 160px;
}

.footer-heading {
  font-size: 20px;
  font-weight: 600;
}
.footer-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style-type: none;
  gap: 6px;
}
.footer-links {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: #d1d5db;
  font-size: 16px;
}
.copy-right {
  color: var(--Text-Tertiary);
  text-align: center;
}

.Social-list {
  display: flex;
  gap: 10px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

@media only screen and (max-width: 992px) {
  .heading-one {
    font-size: 32px;
  }
  .heading-two {
    font-size: 28px;
  }
  .sub-heading {
    font-size: 12px;
    padding: 6px 16px;
  }
  .button-two,
  .button-one {
    font-size: 14px;
    padding: 8px 20px;
  }
  .mobile-task {
    animation: none !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  .mobile-task-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .market-game {
    margin: 0 0;
  }
  .dwnl-text{
    font-size: 18px;
  }
  .best-choise-list li .Choice-content h3{
    font-size: 20px;
  }
  .best-choise-list li .Choice-content p{
    font-size: 14px;
    line-height: 1.4;
  }
}