header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  border-bottom: 1px solid #1C1C1C;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(18, 18, 18, 0.81) 100%);
  backdrop-filter: blur(4px);
  z-index: 999;
}


header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  padding: 0 24px;
  margin: 0 auto;
}


header .logo {
  width: auto;
  height: 28px;
}


header .licences {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}


header .licences img {
  width: auto;
  height: 28px;
}

main > section:not(.hero,
main .tnc) {
  padding: 40px 0;
}

.holder {
  gap: 24px;
}

.hero .bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 768px;
  z-index: -1;
}

.hero .section-title-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 352px;
}

.hero .btn-container {
  padding: 10px;
}

.hero .lead-text {
  color: #F7A609;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.42px;
}

.hero .title {
  display: inline;
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 0.54px;
  background: linear-gradient(90deg, #8F6A31 0%, #BC9656 22.04%, #FFE196 55.1%, #BC9656 88.16%, #8F6A31 110.2%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .sub-title {
  font-family: var(--font-roboto-condensed), sans-serif;
  color: #FFF;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 40px;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: 1.2px;
}

.hero .steps {
  position: relative;
  padding: 32px 24px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.50) 0%, rgba(66, 0, 0, 0.50) 26.17%, rgba(131, 0, 0, 0.50) 50%, rgba(66, 0, 0, 0.50) 73.83%, rgba(0, 0, 0, 0.50) 100%);
  backdrop-filter: blur(2px);
}

.hero .steps:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #960000 50.32%, rgba(0, 0, 0, 0.00) 100%);
  content: '';
}

.hero .steps:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, #000 -10%, #960000 50.32%, #000 110%);
  content: '';
}

.hero .steps > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
  min-width: 342px;
  margin: 0 auto;
}

.hero .steps > ul li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.hero .steps > ul li:after {
  position: absolute;
  top: 8px;
  left: 58px;
  width: 2px;
  height: calc(100% - 16px);
  background-color: #6B1D1D;
  content: '';
}

.hero .steps > ul li .num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 54px;
  font-weight: 900;
  line-height: 54px;
  letter-spacing: 1.62px;
  text-align: center;
  background: linear-gradient(180deg, #D94F4F 0%, #CC1010 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .steps > ul li .description h2 {
  color: #FFF;
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px; /* 125% */
  letter-spacing: 0.48px;
}

.hero .steps > ul li .description p {
  color: #D4D4D4;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  letter-spacing: 0.42px;
}

.hero .tnc {
  color: #737373;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.42px;
  margin-top: 8px;
  padding: 0 24px;
}

.community .bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 846px;
  z-index: -1;
}

.community .bg:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg, #000 35.97%, rgba(0, 0, 0, 0.00) 91.67%);
  content: '';
}

.community .image-container {
  position: relative;
  width: 100%;
  height: 300px;
}

.community .ambassadors {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 558px;
  height: 100%;
}

.community .ambassadors > div {
  position: absolute;
  background-image: linear-gradient(180deg, rgba(31, 49, 63, 0.20) 0%, rgba(255, 196, 114, 0.20) 100%);
  backdrop-filter: blur(6px);
  border-radius: 30px / 40px;
  overflow: hidden;
}

.community .ambassadors > div:first-child {
  top: 32.21%;
  width: 8.96%;
  left: 90%;
}

.community .ambassadors > div:nth-child(2) {
  top: 8.6%;
  width: 7.17%;
  left: 87%;
}

.community .ambassadors > div:nth-child(3) {
  top: 23.15%;
  width: 10.22%;
  left: 75.7%;
}

.community .ambassadors > div:nth-child(4) {
  top: 45.5%;
  width: 15.41%;
  left: 67.71%;
}

.community .ambassadors > div:nth-child(5) {
  top: 8.56%;
  width: 17.20%;
  left: 53.7%;
}

.community .ambassadors > div:nth-child(6) {
  top: 51.22%;
  width: 24.01%;
  left: 41.14%;
}

.community .ambassadors > div:nth-child(7) {
  top: 13.4%;
  width: 14.34%;
  left: 33.4%;
}

.community .ambassadors > div:nth-child(8) {
  top: 42.9%;
  width: 20.25%;
  left: 18.5%;
}

.community .ambassadors > div:nth-child(9) {
  top: 22.28%;
  width: 6.09%;
  left: 23.7%;
}

.community .ambassadors > div:nth-child(10) {
  top: 7.32%;
  width: 47px;
  left: 15.25%;
}

.community .ambassadors > div:nth-child(11) {
  top: 36.24%;
  width: 10.22%;
  left: 6.9%;
}

.community .ambassadors > div:nth-child(12) {
  top: 62.5%;
  width: 7.89%;
  left: 0;
}

.community .features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  padding: 0 24px;
  margin: 0 auto;
}

.community .features > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image: linear-gradient(0deg, rgba(38, 15, 15, 0.5) -4.4%, rgba(101, 17, 17, 0.5) 100%);
  backdrop-filter: blur(7.5px);
  border-radius: 8px;
  padding: 16px;
}

.community .features > li:after {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: linear-gradient(180deg, #D02525, #3C0E0E 35%) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  content: '';
  pointer-events: none;
}

.community .features

/* Firefox */
@-moz-document url-prefix() > li {
  border: 2px solid #7d1d1d;
}

.community .features

/* Firefox */
@-moz-document url-prefix() > li: after {
  display: none;
}

.community .features .title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F02A2A;
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.54px;
}

.community .features .title .icon {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(217, 79, 79, 0.25);
}

.community .features .title .icon img {
  width: 24px;
}

.community .features .description {
  position: relative;
  list-style: unset;
  padding-left: 24px;
  color: #D4D4D4;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.42px;
}

.community .features .prize-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
}

.community .features .prize-container:before,
.community .features .prize-container:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, rgba(143, 106, 49, 0), rgba(135, 104, 50, 0.5), rgba(142, 119, 60, 1), rgba(135, 104, 50, 0.5), rgba(143, 106, 49, 0));
  content: '';
}

.community .features .prize-container:after {
  top: auto;
  bottom: 0;
}

.community .features .prize-container .prize {
  display: flex;
  gap: 10px;
}

.community .features .prize-container .prize .icon {
  width: 24px;
  height: 24px;
}

.community .features .prize-container .prize span {
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #BC9656 22.04%, #FFE196 55.1%, #BC9656 88.16%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.community .features .prize-container p {
  color: #D4D4D4;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.42px;
}

.winners .weekly-top {
  display: none;
}

.winners .embla {
  width: 100%;
}

.winners .embla__viewport {
  overflow: hidden;
}

.winners .embla__container {
  display: flex;
  gap: 8px;
}

.winners .embla__slide:last-child {
  margin-right: 8px;
}

.winners .nickname span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winners .nickname.hidden {
  display: flex;
  align-items: center;
}

.winners .nickname.hidden:before {
  flex: none;
  display: inline-block;
  mask: url('../images/promo-002/icon_hidden_player.svg') no-repeat center / cover;
  -webkit-mask: url('../images/promo-002/icon_hidden_player.svg') no-repeat center / cover;
  content: '';
}

.latest-winners {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 24px;
  gap: 8px;
  background: #18181B;
  overflow: hidden;
}

.latest-winners:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 100%;
  background: linear-gradient(270deg, #191919 50%, rgba(25, 25, 25, 0.00) 100%);
  content: '';
  pointer-events: none;
}

.latest-winners h3 {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px; /* 130% */
  letter-spacing: 0.6px;
}

.latest-winners .item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100px;
}

.latest-winners .game {
  border-radius: 8px;
  overflow: hidden;
}

.latest-winners .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.latest-winners .info .nickname {
  max-width: 64px;
  color: #FFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.36px;
}

.latest-winners .info .nickname.hidden {
  gap: 2px;
  color: #A3A3A3;
}

.latest-winners .info .nickname.hidden:before {
  width: 12px;
  height: 12px;
  background-color: #737373;
}

.latest-winners .info .amount {
  color: #FFD766;
  font-family: Inter;
  font-size: 11px;
  font-weight: 600;
  line-height: 11px;
  letter-spacing: 0.33px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rewards .image-container {
  position: relative;
  height: 300px;
}

.rewards .image-container .image-holder {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 768px;
  height: 100%;
}

.rewards .image-container .image-holder > div {
  position: absolute;
  transform: translate(-50%, -50%);
}

.rewards .image-container .image-holder .gradient {
  position: absolute;
  top: 50%;
  left: 60%;
  width: 316px;
  height: 278px;
  border-radius: 316px;
  background: radial-gradient(53.21% 53.21% at 50% 42.79%, #F00 -36%, rgba(0, 0, 0, 0.00) 70%);
}

.rewards .image-container .image-holder .pc {
  top: 61%;
  left: 50%;
  width: 300px;
}

.rewards .image-container .image-holder .tablet {
  top: 61%;
  left: 34%;
  width: 160px;
}

.rewards .image-container .image-holder .mobile {
  top: 58%;
  left: 64.5%;
  width: 150px;
}

.rewards .image-container .image-holder .icon-roulette {
  top: 31%;
  left: 43.5%;
  transform: translate(-50%, -50%) rotate(12deg);
  width: 250px;
}

.rewards .image-container .image-holder .icon-robo {
  top: 27%;
  left: 33%;
  width: 110px;
  transform: translate(-50%, -50%) rotate(15deg);
}

.rewards .image-container .image-holder .icon-train {
  top: 23%;
  left: 62.5%;
  width: 120px;
}

.rewards .image-container .image-holder .icon-sugar {
  top: 68%;
  left: 68%;
  width: 100px;
}

@media only screen and (min-width: 768px) {
  header {
    height: 80px;
  }

  header .logo {
    height: 40px;
  }

  header .licences {
    gap: 12px;
  }

  header .licences img {
    height: 44px;
  }

  .hero {
    padding: 40px 0;
  }

  .hero .holder {
    gap: 80px;
  }

  .hero .bg {
    width: 1600px;
  }

  .hero .section-title-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 452px;
    padding-top: 0;
    text-align: left;
  }

  .hero .lead-text {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.54px;
  }

  .hero .title {
    font-size: 32px;
    font-weight: 800;
    line-height: 36px; /* 112.5% */
    letter-spacing: 0.96px;
  }

  .hero .sub-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 56px;
    letter-spacing: 1.68px;
  }

  .hero .steps {
    padding: 24px;
  }

  .hero .steps > ul {
    flex-direction: row;
    gap: 0;
    max-width: none;
    min-width: auto;
  }

  .hero .steps > ul li {
    flex: 1;
    align-items: flex-start;
  }

  .hero .steps > ul li .description h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: 0.54px;
  }

  .community .bg {
    top: 110px;
    width: 1031px;
  }

  .community .holder {
    gap: 24px;
  }

  .community .image-container {
    height: 360px;
  }

  .community .ambassadors {
    width: 678px;
  }

  .community .section-title-container {
    order: -1;
  }

  .community .features {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: none;
    padding: 0 24px;
  }

  .community .features > li {
    flex: 1 0 354px;
    max-width: 490px;
  }

  .winners .contents {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 0 24px;
  }

  .winners .weekly-top {
    flex: none;
    position: relative;
    display: block;
    width: 282px;
    height: 249px;
    border-radius: 16px;
  }

  .winners .weekly-top h3 {
    position: relative;
    color: #FFF;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 128.571% */
    letter-spacing: 0.84px;
    text-align: center;
    z-index: 1;
  }

  .winners .weekly-top h3:before {
    position: absolute;
    z-index: -1;
    content: attr(data-text);
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: rgba(77, 0, 0, 0.70);
  }

  .winners .weekly-top .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .winners .weekly-top .emoji {
    position: absolute;
    bottom: 52%;
    left: 50%;
    transform: translateX(-50%);
    width: 156px;
  }

  .winners .weekly-top .text-container {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .winners .weekly-top .winner {
    display: flex;
    gap: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    background-blend-mode: plus-lighter;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(calc(50px / 2));
  }

  .winners .weekly-top .winner .game {
    flex: 0 0 58px;
    width: 58px;
    border-radius: 8px;
    overflow: hidden;
  }

  .winners .weekly-top .winner .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }

  .winners .weekly-top .winner .nickname {
    max-width: 160px;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px; /* 157.143% */
    letter-spacing: 0.42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .winners .weekly-top .winner .nickname.hidden {
    gap: 4px;
    color: #C7C7CC;
  }

  .winners .weekly-top .winner .nickname.hidden:before {
    width: 20px;
    height: 20px;
    background-color: #C7C7CC;
  }

  .winners .weekly-top .winner .amount {
    font-size: 42px;
    font-style: normal;
    font-weight: bold;
    line-height: 40px; /* 95.238% */
    letter-spacing: 1.26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(90deg, #8F6A31 0%, #BC9656 22.04%, #FFE196 55.1%, #BC9656 88.16%, #8F6A31 110.2%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .winners .latest-winners {
    flex: 1;
    padding: 20px 24px;
    border-radius: 16px;
  }

  .winners .latest-winners:after {
    border-radius: 0 16px 16px 0;
  }

  .winners .latest-winners .item {
    width: 120px;
  }

  .rewards .image-container {
    height: 360px;
  }

  .rewards .image-container .image-holder .gradient {
    top: 50%;
    left: 60%;
    width: 316px;
    height: 278px;
    border-radius: 316px;
    background: radial-gradient(53.21% 53.21% at 50% 42.79%, #F00 -36%, rgba(0, 0, 0, 0.00) 70%);
  }

  .rewards .image-container .image-holder .pc {
    top: 53%;
    left: 50%;
    width: 430px;
  }

  .rewards .image-container .image-holder .tablet {
    top: 54%;
    left: 26.5%;
    width: 210px;
  }

  .rewards .image-container .image-holder .mobile {
    top: 58%;
    left: 72.5%;
    width: 200px;
  }

  .rewards .image-container .image-holder .icon-roulette {
    top: 42%;
    left: 18%;
    transform: translate(-50%, -50%);
    width: 320px;
  }

  .rewards .image-container .image-holder .icon-robo {
    top: 63%;
    left: 17%;
    width: 140px;
    transform: translate(-50%, -50%);
  }

  .rewards .image-container .image-holder .icon-train {
    top: 23%;
    left: 74%;
    width: 150px;
  }

  .rewards .image-container .image-holder .icon-sugar {
    top: 60%;
    left: 84%;
    width: 140px;
  }
}

@media only screen and (min-width: 1280px) {
  header > div {
    padding: 0;
  }

  main > section:not(.hero,
  main .tnc) {
    padding: 72px 0;
  }

  .hero .bg {
    width: 2560px;
  }

  .hero .section-title-container {
    height: 692px;
    padding: 0;
  }

  .hero .lead-text {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.54px;
  }

  .hero .title {
    font-size: 42px;
    font-weight: 800;
    line-height: 46px; /* 109.524% */
    letter-spacing: 1.26px;
  }

  .hero .sub-title {
    font-size: 78px;
    font-weight: 900;
    line-height: 78px; /* 100% */
    letter-spacing: 2.34px;
    text-transform: uppercase;
  }

  .hero .steps ul > li {
    align-items: center;
  }

  .winners .contents {
    gap: 24px;
    padding: 40px 0 0;
  }

  .community {
    margin-top: -24px;
  }

  .community .holder {
    gap: 0;
  }

  .community .bg {
    top: 138px;
    width: 1270px;
  }

  .community .btn-cta {
    margin-top: 24px;
  }

  .community .image-container {
    height: 475px;
  }

  .community .ambassadors {
    width: 902px;
  }

  .community .features {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
    padding: 0;
  }

  .community .features > li {
    flex: 1;
    max-width: none;
    padding: 24px;
    border-radius: 16px;
  }

  .community .features > li:after {
    border-radius: 16px;
  }

  .community .features > li:nth-child(1):after {
    background-image: linear-gradient(246deg, #D02525, #3C0E0E 35%);
  }

  .community .features > li:nth-child(2) {
    margin-top: 70px;
  }

  .community .features > li:nth-child(3):after {
    background-image: linear-gradient(125deg, #D02525, #3C0E0E 35%);
  }

  .rewards .image-container {
    height: 512px;
  }

  .rewards .image-container .image-holder .gradient {
    top: 50%;
    left: 60%;
    width: 669px;
    height: 451px;
    border-radius: 669px;
  }

  .rewards .image-container .image-holder .pc {
    width: 618px;
  }

  .rewards .image-container .image-holder .tablet {
    top: 55%;
    left: 15.5%;
    width: 330px;
  }

  .rewards .image-container .image-holder .mobile {
    top: 58%;
    left: 83%;
    width: 290px;
  }

  .rewards .image-container .image-holder .icon-roulette {
    top: 40%;
    left: 4%;
    width: 500px;
  }

  .rewards .image-container .image-holder .icon-robo {
    top: 66%;
    left: 2%;
    width: 200px;
  }

  .rewards .image-container .image-holder .icon-train {
    top: 21.5%;
    left: 84%;
    width: 220px;
  }

  .rewards .image-container .image-holder .icon-sugar {
    top: 64%;
    left: 98%;
    width: 200px;
  }
}