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

html {
  font-family: "Nunito", sans-serif;
}

body {
  margin: 0;
}

h2 {
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

h3 {
  margin-top: 32px;
  color: var(--ui-kit-react-blue, #1249b5);
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

p {
  margin-top: 16px;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

a {
  color: var(--ui-kit-react-black, #111318);
  text-decoration: inherit;
}

ol,
ul {
  margin-top: 16px;
  padding-left: 16px;
}

li {
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

main {
  background: #f2f4f5;
  position: relative;
  overflow: hidden;
}

main ul li::before {
  background: #000;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  top: 7px;
}

main ul li:first-child::before {
  top: 7px;
}

.container-common {
  position: relative;
  padding: 24px 16px 32px;
  min-height: 100svh;
  z-index: 1;
}

@media (min-width: 540px) {
  .container-common {
    padding-top: 48px;
    padding-bottom: 137px;
    max-width: 360px;
    margin: 0 auto;
  }
  main::before {
    background: url("../img/stars1.svg") no-repeat;
    content: "";
    position: absolute;
    top: -368px;
    left: -563px;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  main::after {
    background: url(../img/stars2.svg) no-repeat;
    content: "";
    position: absolute;
    bottom: -216px;
    right: -214px;
    width: 719px;
    height: 967px;
    z-index: 0;
  }
}

.footer {
  display: none;
}

/* Purchase */

.purchase a {
  text-decoration: underline;
}

.back-to-main {
  width: fit-content;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  margin-bottom: 32px;
  border-radius: 8px;
  border: 1px solid var(--ui-kit-react-blue, #1249b5);
  transition: 0.15s linear;
}

.back-to-main__text {
  color: var(--ui-kit-react-blue, #1249b5);
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.28px;
  margin-top: 0;
}

.purchase .back-to-main__btn {
  color: inherit;
  text-decoration: none;
}

.back-to-main:hover,
.go-back__btn:hover,
.info__wrapper button:hover,
.download:hover,
.important__btn:hover {
  background: rgba(0, 51, 153, 0.05);
}
.back-to-main:active,
.go-back__btn:active,
.info__wrapper button:active,
.download:active,
.important__btn:active {
  background: var(--UI-kit-react-Blue-15, rgba(0, 51, 153, 0.15));
}

.purchase__grid-container {
  margin-top: 16px;
  display: grid;
  grid-template-areas: "online online" "sms subscription" "offline offline";
  gap: 8px;
}

.purchase .purchase__box {
  text-decoration: none;
  width: 100%;
  height: 120px;
  position: relative;
  padding: 12px;
  border-radius: 12px;
  background: #e0ebff;
}

.purchase__box p {
  margin-top: 0;
}

.purchase__box img {
  position: absolute;
  bottom: 0;
  right: 0;
}

.purchase__box,
.winning__box,
.runs__box,
.faq__box,
.rules__box,
.blue-box {
  transition: 0.15s linear;
}

.purchase__box:hover,
.winning__box:hover,
.runs__box:hover,
.faq__box:hover,
.rules__box:hover,
.blue-box:hover {
  transform: scale(1.04);
}

.purchase__box:active,
.winning__box:active,
.runs__box:active,
.faq__box:active,
.rules__box:active,
.blue-box:active {
  transform: scale(1.04);
}

.online {
  grid-area: online;
}

.sms {
  grid-area: sms;
}

.subscription {
  grid-area: subscription;
}

.offline {
  grid-area: offline;
}

/* Winnings */

.winnings h3 {
  margin-top: 24px;
  margin-bottom: 16px;
}

.winnings a {
  text-decoration: none;
}

.winning__box {
  margin-bottom: 8px;
  width: 100%;
  height: 120px;
  position: relative;
  padding: 12px;
  border-radius: 12px;
  background: #f6eae1;
}

.winning__box p {
  margin-top: 0;
}

.winning__box img {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* Runs */

.runs h3 {
  margin-top: 24px;
  margin-bottom: 16px;
}

.runs a {
  text-decoration: none;
}

.runs__box {
  width: 100%;
  height: 120px;
  position: relative;
  padding: 12px;
  border-radius: 12px;
  background: #dff2df;
}

.runs__box p {
  margin-top: 0;
}

.runs__box img {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* Faq */

.faq h3 {
  margin-top: 24px;
  margin-bottom: 16px;
}

.faq a {
  text-decoration: none;
}

.faq__box {
  width: 100%;
  height: 120px;
  position: relative;
  padding: 12px;
  border-radius: 12px;
  background: #dbe3f5;
}

.faq__box p {
  margin-top: 0;
}

.faq__box img {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* Rules */

.rules h3 {
  margin-top: 24px;
  margin-bottom: 16px;
}

.rules__box {
  text-decoration: none;
  margin-bottom: 8px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 10px;
  background: #dbe3f5;
  padding: 10px 15px;
}

.rules__box:last-child {
  margin-bottom: 0;
}

.rules__box p {
  margin-top: 0;
  color: var(--, #000);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.rules__box:last-child p {
  width: 100%;
}

/* How Purchase */

main ol > li::before {
  top: 0;
}

.sms-purchase p {
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  /* 17.5px */
}

.purchase li {
  padding-top: 0;
  padding-bottom: 0;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.box {
  margin-top: 32px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--background-stroke, #d2dcf0);
  background: linear-gradient(
      0deg,
      rgba(255, 204, 0, 0.1) 0%,
      rgba(255, 204, 0, 0.1) 100%
    ),
    #fff;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.box li {
  padding-top: 10px;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.box ul li::before {
  height: 6px;
  width: 6px;
  top: 15px;
}

.box a {
  font-size: inherit;
  line-height: inherit;
}

.live {
  position: relative;
}

.live::after {
  content: "";
  background: url("../img/live.png") no-repeat;
  background-size: contain;
  position: absolute;
  width: 55px;
  height: 22px;
  margin-left: 12px;
}

.download {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 29px 16px 24px;
  border-radius: 12px;
  border: 1px solid var(--buttons-primary, #1249b5);
  transition: 0.15s linear;
}

.download span {
  color: var(--buttons-primary, #1249b5);
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}

.purchase .purchase-btn {
  text-decoration: none;
}

.sms-purchase__btn {
  margin-top: 16px;
  border-radius: 12px;
  background: var(--ui-kit-react-blue, #1249b5);
  padding: 18px 24px;
  color: #fff;
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  transition: 0.15s linear;
}

.sms-purchase__btn:hover {
  background: #0d3fa3;
}

.sms-purchase__btn:active {
  background: #00297a;
}

.schedule__headline {
  font-size: 24px;
}

.schedule__text {
  margin-top: 0;
}

.schedule__text a {
  text-decoration: underline;
}

.note {
  margin-top: 32px;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.sms p {
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

.sms-box1 {
  margin-top: 16px;
}

.sms-box2 {
  margin-top: 24px;
}

/* Accordion */

.accordion {
  width: 100%;
  margin-top: 16px;
}

.accordion-item {
  margin-bottom: 5px;
  width: 100%;
  background: #fff;
  cursor: pointer;
  border: 0.2px solid #d2dcf0;
  border-radius: 16px;
}

.accordion-title {
  border: 0.2px solid #d2dcf0;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  transition: 0.1s linear;
}

.accordion-title:hover {
  box-shadow: 0px 0px 10px 6px #d2dcf0;
}

.accordion-title p {
  margin: 0;
  color: #111318;
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.accordion-title img {
  margin-left: 16px;
  transition: transform 0.3s ease-in-out;
}

.accordion-item.animated img {
  transform: rotate(-180deg);
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

.accordion-item.animated .accordion-content {
  max-height: 500px;
}

.accordion-content__inner {
  margin: 0;
  padding: 16px;
  pointer-events: none;
}

.accordion-content__inner p {
  margin-top: 0;
  font-size: 16px;
  line-height: 17.5px;
}

.accordion-content__inner li {
  font-size: 16px;
  line-height: 17.5px;
}

.accordion-content__inner ul li::before,
.accordion-content__inner ul li:first-child::before {
  width: 6px;
  height: 6px;
  top: 5px;
}

.accordion-content__inner a {
  font-size: inherit;
  line-height: inherit;
}

/* Sms Purchase */

.content p {
  padding-left: 0;
  padding-right: 0;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  /* 17.5px */
}

.gray-box {
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--background-stroke, #d2dcf0);
  background: rgba(235, 241, 255, 0.2);
}

.gray-box p {
  margin-top: 0;
  padding: 0 16px;
  color: var(--Grey-Text, #a6a6a6);
  font-family: Nunito;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.gray-box p:first-child {
  padding-top: 16px;
}

.gray-box p:last-child {
  padding-bottom: 16px;
}

.gray-box p strong {
  color: var(--ui-kit-react-black, #111318);
  font-weight: 700;
}

.gray-box p strong span,
.content p span {
  color: var(--ui-kit-react-blue, #1249b5);
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.gray {
  color: #a6a6a6 !important;
  font-weight: 400 !important;
}

.ml {
  margin-left: 10px;
  color: initial !important;
  font-weight: initial !important;
}

/* Get Winning */

.transition {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.move {
  border-radius: 8px;
  border: 1px solid #a8beea;
  background: #fff;
  padding: 11px 19px;
  color: #a8beea;
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  position: relative;
  width: 32px;
  height: 32px;
  padding: 11px 19px;
}

.move::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 3;
}

.move1::before {
  content: "1";
}

.move2::before {
  content: "2";
}

.move3::before {
  content: "3";
}

.move.active {
  color: #fff;
  border-radius: 8px;
  border: 1px solid, #1249b5;
  background: #1249b5;
}

.move::after {
  background: #a8beea;
  content: "";
  width: 143px;
  height: 1px;
  top: 50%;
  position: absolute;
  left: 100%;
  transform: translateY(-50%);
}

.move.completed {
  border-radius: 8px;
  border: 1px solid #0abe68;
  background: #0abe68;
}

.move.completed::before {
  content: url("../img/tick.svg");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 3;
}

.move.completed::after {
  background: linear-gradient(270deg, #039 0%, #0abe68 100%), #039;
}

.move.final::after {
  background: #0abe68;
}

.move:last-child::after {
  display: none;
}

.how__wrapper {
  padding-top: 8px;
}

.blue-box {
  margin-top: 8px;
  height: 120px;
  border-radius: 12px;
  background: #dbe3f5;
  padding: 14px 16px;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
}

.blue-small-box {
  height: 56px;
}

.get-win-main,
.get-win-online,
.get-win-offline,
.online-amounts,
.offline-amounts,
.final-result {
  display: none;
}

.go-back {
  text-decoration: none;
  cursor: pointer;
}

.go-back__btn {
  margin-top: 32px;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid var(--ui-kit-react-blue, #1249b5);
  color: var(--ui-kit-react-blue, #1249b5);
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  transition: 0.15s linear;
}

/* Intervals */

h3 span {
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.info__wrapper {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--background-stroke, #d2dcf0);
  background: #fff;
}

.info__wrapper p {
  margin-top: 0;
}

.info__wrapper button {
  background: #fff;
  width: 100%;
  margin-top: 24px;
  padding: 18px 24px;
  border-radius: 12px;
  border: 1px solid var(--ui-kit-react-blue, #1249b5);
  color: var(--ui-kit-react-blue, #1249b5);
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.15s linear;
}

.info__wrapper li {
  padding-top: 0;
  padding-bottom: 0;
  color: var(--ui-kit-react-black, #111318);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 122.222% */
}

.yellow-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--background-stroke, #d2dcf0);
  background: linear-gradient(
      0deg,
      rgba(255, 204, 0, 0.1) 0%,
      rgba(255, 204, 0, 0.1) 100%
    ),
    #fff;
}

.yellow-box p {
  margin-top: 0;
  color: var(--ui-kit-react-black, #111318);
  /* small regular */
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 114.286% */
}

.important__container {
  padding-top: 8px;
  padding-bottom: 12px;
}

.important__buttons {
  margin-top: 40px;
}

.important__btn {
  margin-top: 8px;
  padding: 18px 24px;
  border-radius: 12px;
  border: 1px solid var(--ui-kit-react-blue, #1249b5);
  text-align: center;
  font-family: Nunito;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  transition: 0.15s linear;
}

.important__btn a {
  text-decoration: none;
  color: var(--ui-kit-react-blue, #1249b5);
  font-size: inherit;
}

.info__wrapper-list {
  margin-top: 0;
}

.info__wrapper span {
  color: var(--ui-kit-react-blue, #1249b5);
  /* bold */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  /* 122.222% */
}

.final-result .box {
  margin-top: 16px;
}

/* Sales-points */

.spoints-tel {
  color: var(--ui-kit-react-blue, #1249b5);
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  text-decoration-line: underline;
}

.signs-box {
  margin-top: 24px;
  border-radius: 16px;
  border: 1px solid var(--background-stroke, #dce2e4);
  background: var(--background-white, #fff);
  padding: 16px;
}

.signs-box__items {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.signs-box__items:nth-child(2) {
  margin-top: 16px;
  margin-bottom: 16px;
}

.signs-box__name {
  margin-top: 0;
  color: var(--ui-kit-react-blue, #1249b5);
  /* Txt react/bold */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  /* 122.222% */
}

.map {
  margin-top: 24px;
  width: 100%;
  height: 413px;
  border-radius: 16px;
  border: 1px solid var(--background-stroke, #dce2e4);
}

.spoints__subtitle {
  margin-top: 32px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.spoints__subtitle-name {
  margin-top: 0;
  color: var(--ui-kit-react-blue, #1249b5);
  /* Txt react/bold */
  font-family: Nunito;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  /* 122.222% */
}

.spoints__description {
  margin-top: 32px;
}

.spoints__description2 {
  margin-top: 24px;
}

.video {
  margin-top: 32px;
  border-radius: 16px;
  width: 100%;
}