:root {
    --section-top-padding:50px;
}

body {
    color: #FFF;
}

#copyBtn {
    cursor: pointer;
}

section {
    border-radius: 40px;
}

.has-gap {
    margin-bottom:20px;
}

picture img {
    width:100%;
    height:auto;
    vertical-align: top;
}

.coin-desktop {
    display:none;
    aspect-ratio: 1291/274;
    pointer-events: none;    
}

.btn {
    position:relative;
    z-index: 2;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 32px; /* 133.333% */   
    justify-content: center;
    align-items: center;     
    display: flex;    
    flex-direction: column;
}
.btn.pink {
    border-radius: 9999px;
    background: #FF00B7;
    box-shadow: 0 23px 36.2px 0 rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(12px);    
    width: 311px;
    height: 70px;
    padding: 0 24px;
}

.hero-banner {
    background-image:url(../images/promo-code/bg-banner-mobile.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    aspect-ratio: 736/1548;
    display: flex;
    position: relative;
    padding-bottom:20px;
}
.hero-banner .wrapper {
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    padding-top:30px;
    max-width:322px;    

    margin:0 auto;
    position:relative;
    height:60vh;
    justify-content: space-between;
}

.hero-banner .wrapper .sign-up {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width:100%;
    position: relative;
    z-index:2;
    margin-top:-7%;
}
.glow {
    aspect-ratio: 776/108;
    width:100%;
    position:relative;
    z-index:3;
    margin-bottom:-7%;
}
.hero-banner .wrapper .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width:100%;
    max-height:750px;    
    position:relative
}
.hero-banner .wrapper .top:before {
    background-image: url(../images/promo-code/bg-coin-right.webp);
    aspect-ratio: 133/85;
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    top:45%;
    right:8%;
    width:45px;
    content:"";
    display:block;
    z-index:1;
    pointer-events: none;
}

.hero-banner .wrapper .top:after {
    background-image: url(../images/promo-code/bg-coin-left.webp);
    aspect-ratio: 149/87;
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    top:91%;
    left:10%;
    width:47px;
    content:"";
    display:block;
    z-index:1;
    pointer-events: none;
}
.hero-banner .wrapper .top span {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 177.778% */
}
.hero-banner .wrapper .top h1 {
    text-align: center;
    font-size: 24px;
    font-style: italic;
    font-weight: 900;
    line-height: 25px; /* 104.167% */
}
.hero-banner .wrapper .top > small {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 228.571% */
}
.hero-banner .wrapper .top .value-wrapper small {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top:-2px;
    display:block;
    text-align: right;
}
.hero-banner .wrapper .top .coin {
    aspect-ratio: 150/150;
    width:30px;
}
.hero-banner .wrapper .top .value {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 22px; /* 91.667% */    
    gap:8px;
}
.hero-banner .wrapper .top .value .gc,
.hero-banner .wrapper .top .value .sc {
    display:flex;
    flex-direction: row;
    align-items: center;
    gap:8px;
} 
.hero-banner .wrapper .top .value .gc {
    color: #FFD763;
}
.hero-banner .wrapper .top .value .sc {
    color: #00E5AF;
}
.hero-banner .wrapper .top .border {
    background-image: url(../images/promo-code/box-mobile.webp?v=3);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 690/370;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:15px 30px;
    scale:.8;
    margin-top:0;
}
.hero-banner .wrapper .top .border button {
    background-image:url(../images/promo-code/box-code-mobile.webp?v=2);
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 554/210;
    width:234px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color:transparent;
    border:0;
    color:white;
}
.hero-banner .wrapper .top .border button span {
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 13.5px;       
    height:54px;
    display:flex;
    align-items: center;
    padding-right:20px;
}
.hero-banner .wrapper .top .border ul {
    margin:0;
    padding:0;
    list-style: none;
    display:flex;
    flex-direction: column;
    gap:5px;
    margin-top:-10px;
}
.hero-banner .wrapper .top .border ul li {
    background-image:url(../images/promo-code/icon-bullet.svg);
    background-repeat: no-repeat;
    background-size: 13px;
    background-position: left center;
    padding-left:20px;
    text-align: left;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;    
}

.hero-banner .girl {
    aspect-ratio: 661/786;
    position:absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    width:90%;
    z-index:1;
    pointer-events: none;
}
.hero-banner .cat {
    aspect-ratio: 204/335;
    position:absolute;
    bottom:5%;
    left:0;
    width:25%;
    pointer-events: none;
}

.what-you-get {
    color: #F0FCFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px; /* 225% */
    margin-top:var( --section-top-padding);
    display:flex;
    flex-direction: column;
    gap:20px;
}
.what-you-get h2 {
    background: linear-gradient(270deg, #FF00B7 -0.86%, #FFF 74.08%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 34px;
    font-style: italic;
    font-weight: 900;
    line-height: 35px; /* 102.941% */    
}
.what-you-get ul {
    list-style: none;
    padding:0;
    display:flex;
    flex-direction: column;
    gap: 20px;
}
.what-you-get ul li {
    border-radius: 40px;
    border: 1px solid #1B1B1E;
    background: #27272A;
    backdrop-filter: blur(12.5px);
    padding:11px 0;
}
.what-you-get ul li.bonus:before {
    background-image: url(../images/promo-code/chest-mobile.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 122px;
    height: 130px;
    aspect-ratio: 61/65;    
    content:"";
    display:block;
    z-index:1;
    margin:0 auto;
}
.free-spins-offer:before {
    content:none!important;
}

.what-you-get ul li.offers:before {
    background-image: url(../images/promo-code/ticket-mobile.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 148px;
    height: 142px;
    aspect-ratio: 74/71; 
    content:"";
    display:block;
    z-index:1;
    margin:0 auto;
}

.what-you-get ul li div {
    display:flex;
    flex-direction: column;
    align-items: center;
}
.what-you-get ul li div span {
    display:flex;
    flex-direction: row; 
    align-items: center;
    gap:8px;
}
.what-you-get ul li div small {
    color:  #FAFAFA;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 240% */
}
.what-you-get ul li div span.top-line {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px; /* 225% */
}
.what-you-get ul li div span.bottom-line {
    color: #F0FCFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px;    
}
.what-you-get ul li div span.bottom-line span {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; /* 257.143% */
}

.what-you-get ul li div span.gc {
    color: #FFD763;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px; /* 100% */
}
.what-you-get ul li div span.sc {
    color: #00E5AF;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px; /* 100% */    
}
.what-you-get ul li .coin {
    aspect-ratio: 150/150;
    width:30px;
}
.luck-party,
.casino-party {
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:20px;
    margin-top:var(--section-top-padding);
    border-radius: 41px;
    background: #27272A;
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;    
}
.luck-party {
    padding-bottom:30px;
}

.luck-party h2,
.casino-party h2 {
    text-align: center;
    font-size: 36px;
    font-style: italic;
    font-weight: 900;
    line-height: 38px; /* 105.556% */    
}
.luck-party h2 span,
.casino-party h2 span {
    background: linear-gradient(270deg, #00E5AF -1.18%, #FFF 96.27%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.luck-party p,
.casino-party p {
    text-align: center;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    line-height: 20px; /* 166.667% */    
}
.luck-party .btn.gold,
.casino-party .btn.gold {
    display: flex;
    width: 209px;
    height: 32px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    background: #FF9D00;    
    font-size: 12px;
    font-style: normal;
    line-height: 16px; /* 133.333% */    
}
.luck-party .last-line,
.casino-party .last-line {
    text-align: center;
    font-size: 13px;
    font-style: italic;
    line-height: 20px; /* 153.846% */
}
.casino-party:after {
    background-image:url(../images/promo-code/luckyparty-sc-gc.webp);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 663/600;
    content:"";
    width:100%;
    margin-top:-14%;
    margin-bottom:-34%;
}

.luck-party .steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.luck-party .steps li {
  display: flex;
  align-items: center;
  position: relative;
  counter-increment: steps-counter;
}

.luck-party .steps {
  counter-reset: steps-counter;
}

.luck-party .steps li::before {
  content: counter(steps-counter);
  font-size: 68px;
  font-weight: 900;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 2px #2ecc8f;
  background: linear-gradient(180deg, #2ecc8f 0%, #1a7a55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  min-width: 50px;
  line-height: 1;
  position: relative;
  z-index: 0;
  flex-shrink: 0;
  margin-right: -10px;
}

.luck-party .steps li span {
    position:relative;
    display: flex;
    width: 209px;
    height: 52px;
    padding: 10px 20px;
    align-items: center;
    gap: 10px;
    text-align: left;    
    border-radius: 20px;
    border: 0.5px solid #FFF;
    background: linear-gradient(87deg, #27272A 11.31%, rgba(255, 255, 255, 0.00) 99.88%);
    box-shadow: 0 4px 14.7px 0 #FFF inset;
}

@media (min-width:390px) {
    .hero-banner .wrapper {
        height:74vh;
    }
    .hero-banner .wrapper .top .border{
        margin-top:15px;
        scale:1;
    }
    .hero-banner .wrapper .sign-up {
        margin-top:0;
    }

    .hero-banner .wrapper .top:before {
        top:42%;
        right:-10px;
        width:66px;
    }
    .hero-banner .wrapper .top:after {
        top:96%;
        left:0px;
        width:68px;
    }
}

@media (min-width:768px) {
    .luck-party .steps {
        flex-direction: row;
    }

    .coin-desktop {
        display:block;
        position:absolute;
        top: 73%;
        left: 18%;
        width: 63%;
    }
    .hero-banner {
        background-image:url(../images/promo-code/bg-banner-desktop.webp);
        aspect-ratio: 1408/773;
        overflow: hidden;
        padding-bottom:0;
    }
    .hero-banner .girl {
        aspect-ratio: 2535/1387;
        left:unset;
        transform: none;
        right:0;
    }
    .hero-banner .cat {
        aspect-ratio: 492/623;
        bottom:0;
        width:15%;
    }
    .hero-banner .wrapper {
        height:auto;
        margin:0;
        justify-content: center;
    }
    .hero-banner .wrapper .top:before,
    .hero-banner .wrapper .top:after {
        content:none;
    }
    .hero-banner .wrapper {
        margin-left:11.5%;
    }
    .hero-banner .wrapper {
        scale:.9;
        padding-top:0;
    }
    .hero-banner .wrapper .top .border {
        aspect-ratio: 948/444;
        background-image: url(../images/promo-code/box-desktop.webp?v=2);
        max-width:474px;
    }
    .hero-banner .wrapper .top .border button {
        background-image: url(../images/promo-code/box-code-desktop.webp?v=2);
        aspect-ratio: 817/246;
        height:auto;
        width:100%;
    }
}

@media (min-width:768px) {
    .hero-banner .wrapper {
        scale: 0.5;
        margin-left: -16%;
        max-width: 968px;
    }
    .hero-banner .wrapper .top h1 {
        font-size: 64px;
        font-weight: 900;
        line-height: 52px;
        white-space: nowrap;
    }
    .hero-banner .wrapper .top > small {
        font-size:20px;
    }
    .hero-banner .wrapper .top .value {
        font-size: 40px;
        font-weight: 900;
        line-height: 22px; /* 34.375% */
    }
    .hero-banner .wrapper .top .border button span {
        font-size: 50px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 12.5px;
        height:84px;
    }
    .hero-banner .wrapper .top .value-wrapper small {
        font-size:20px;
    }
    .hero-banner .wrapper .top .coin {
        width:63px;
    }
    .hero-banner .wrapper .top span {
        font-size:30px;
    }
    .hero-banner .wrapper .top .sc span,
    .hero-banner .wrapper .top .gc span {
        font-size:64px;
    }

    .btn.pink {
        width:398px;
    }
    .glow {
        width:45%;
        margin-bottom:-3%;
    }
    .what-you-get ul li.bonus:before,
    .what-you-get ul li.offers:before {
        background-position: bottom left;
        background-size: contain;    
        height:100%;
        width:50%;
    }
    .what-you-get ul li.bonus:before {
        background-image: url(../images/promo-code/chest-desktop.webp);
        aspect-ratio: 319/251;
    }
    .what-you-get ul li div {
        width:50%;
        justify-content: center;
    }
    .what-you-get ul li.offers:before {
        background-image: url(../images/promo-code/ticket-desktop.webp);
        aspect-ratio: 656/502;
    }
    .what-you-get ul li {
        display:flex;
        flex-direction: row;
        width:100%;
        padding:0;
        height:250px;
    }
    .what-you-get ul li .coin {
        width:38px;
    }
    .what-you-get ul li div span.top-line {
        font-size:20px;
    }
    .what-you-get ul li div span {
        font-size:24px;
    }
    .what-you-get ul li div span.sc,
    .what-you-get ul li div span.gc {
        font-size:32px;
    }
    .what-you-get ul li div span.bottom-line {
        font-size:16px;
    }
    .luck-party h2,
    .casino-party h2 {
        font-size: 48px;
        font-weight: 900;
        line-height: 49px; /* 102.083% */
    }

    .casino-party:after {
        width: 37%;
        margin-top: -6%;
        margin-bottom: -12%;
    }

    .luck-party p,
    .casino-party p {
        font-size:14px;
        max-width:868px;
    }
}

@media (min-width:1024px) {
    .luck-party h2,
    .casino-party h2 {
        background: linear-gradient(270deg, #00E5AF 1.06%, #FFF 98.05%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }    
    .luck-party h2 span,
    .casino-party h2 span {
        background: none;
        background-clip: unset;
        -webkit-background-clip:unset;
        -webkit-text-fill-color:unset;
    }

    .luck-party .steps {
        width: 100%;
        justify-content: space-between;        
    }
    .luck-party .steps li {
        font-size:20px;
    }
    .luck-party .steps li span {
        width:auto;
        min-width: 266px;
        height:72px;
    }


    .hero-banner .wrapper {
        scale: 0.65;
    }
    .what-you-get ul {
        flex-direction: row;
    }    
    .what-you-get ul li {
        height:170px;
    }
    .what-you-get ul li div {
        width:100%;
    }
    .what-you-get ul li.bonus:before,
    .what-you-get ul li.offers:before {
        width:40%;
    }    
}
@media (min-width:1200px) {
    .hero-banner {
        height:620px;
        width:100%;
    }
    .hero-banner .wrapper {
        scale: 0.7;
        margin-left:0;
    }    
    .hero-banner .girl {
        height:90%;
        width:auto;
    }
    .what-you-get ul li {
        height:200px;
    }
    .what-you-get ul li.bonus:before,
    .what-you-get ul li.offers:before {
        width:100%;
    }    

    .luck-party,
    .casino-party {
        padding-bottom: 30px;
        position:relative;
    }
    .casino-party:before {
        position: absolute;
        background-image: url(../images/promo-code/luckparty-coin-sc.webp);
        background-size:contain;
        aspect-ratio: 250/250;
        content: "";
        width:250px;
        left:-7%;
        top:50%;
        transform: translateY(-50%);
    }
     .casino-party:after {
        position: absolute;
        background-image: url(../images/promo-code/luckparty-coin-gc.webp);
        aspect-ratio: 571/588;
        right:-10%;
        top:50%;
        transform: translateY(-50%);
        width: 290px;
        margin:0;
    }
    .luck-party .btn.gold,
    .casino-party .btn.gold {
        width: 484px;
        height: 70px;        
        font-size: 30px;
        font-weight: 900;
        line-height: 36px; /* 120% */
    }
    .luck-party .last-line,
    .casino-party .last-line {
        font-size:14px;
    }
}   

@media (min-width:1366px) {
    .what-you-get ul li {
        height:250px;
    }
}

@media (min-width:1600px) {
    .hero-banner .wrapper {
        scale: 1;
    }
}

@media (min-width:1920px) {
    .hero-banner {
        width:100%;
        height:100%;
    }
}