*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
html{
    font-size: 16px;
}
@font-face {
    font-family: CircularXXTT-Bold;
    src: url(./fonts/CircularXXTT-Bold.ttf);
}
@font-face {
    font-family: CircularXXTT-Regular;
    src: url(./fonts/CircularXXTT-Regular.ttf);
}
@font-face {
    font-family: Neue-Plak-Bold;
    src: url(./fonts/Neue-Plak-Bold.ttf);
}
@font-face {
    font-family: Neue-Plak-Regular;
    src: url(./fonts/Neue-Plak-Regular.ttf);
}
@font-face {
    font-family: Neue-Plak-Extended-Regular;
    src: url(./fonts/Neue-Plak-Extended-Regular.ttf);
}
@font-face {
    font-family: Neue-Plak-Extended-ExtraBlack;
    src: url(./fonts/Neue-Plak-Extended-ExtraBlack.ttf);
}
.scroll-container {
    position: fixed;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}
.modal-container{
    display: none;
}
.stickyBottom{
    display: none;
}
.loader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: #0C1920;
  }
  
  .loader::before {
    content: "";
    position: static;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(0, 176, 255, 1);
    border-top-color: #0C1920;
    animation: preloader 500ms linear infinite;
  }
  
  .loader.hidden {
    display: none;
  }
  
  .loader.hidden::before {
    animation: unset;
  }
  
  @keyframes preloader {
    100% {
      transform: rotate(360deg);
    }
  }
  
nav{
    border-radius: 0px 0px 1.8rem 1.8rem;
    background: #0C1920;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 25px 50px -12px rgba(0, 0, 0, 0.70);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.2rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.container{
    width: 100%;
    max-width: 71rem;
    margin: 0 auto;
}
nav .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav .moonspin-logo{
    width: 12rem;
}
.loginBtn,.registerBtn{
    width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0;
    height: auto;
    font-size: 1rem;
    padding: 0.6rem;
}
.registerBtn{
    background-color: rgba(0, 176, 255, 1);
    margin-left: 1.5rem;
}
.loginBtn::before {
    content: "";
    position: absolute;
    top: 0;
    border-radius: 0.5rem;
    border: 0.2rem solid transparent;
    background: linear-gradient(#00B0FF, rgba(3,129,185,0.4)) border-box;
    -webkit-mask-composite: destination-out;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.loginBtn span,.registerBtn span{
    text-align: center;
    font-family: CircularXXTT-Bold;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: -0.03rem;
}
.loginBtn span{
    color: #00B0FF;
    margin-left: 0.5rem;
}
.btnCont{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btnCont a{
    text-decoration: none;
}
.registerBtn span{
    color: #000;
    margin-left: 0.5rem;
}
/* body.webp-support .section1{
    background-image: url(./images/section1-bg.webp);
}
body.webp-not-support .section1{
    background-image: url(./images/section1-bg.png);
} */
section{
    overflow: hidden;
}
.section1{
    background-size: 120rem;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
.section1::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 112rem;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: -1;
    top: 0;
    left: 0;
}
.section1::before{
    content: '';
    position: absolute;
    width: 32rem;
    height: 32rem;
    background-size: 30rem;
    background-repeat: no-repeat;
    background-position: center;
    /* z-index: -1; */
    top: 1rem;
    left: 33rem;
    animation-name: moon-anim1;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes moon-anim1 {
    0% {
        transform: rotate(0deg) scale3d(1, 1, 1);
        animation-timing-function: ease;
        transform-origin: top;
    }
    
    50% {
        transform: rotate(-25deg) scale3d(1.3, 1.3, 1.3);
        animation-timing-function: ease;
        transform-origin: top;
    }
    100% {
        transform: rotate(0deg) scale3d(1, 1, 1);
        animation-timing-function: linear;
        transform-origin: top;
    }
}
body.webp-support .section1::after{
    background-image:url(./images/section1-bg.webp);
}
body.webp-not-support .section1::after{
    background-image:url(./images/section1-bg.png);
}
body.webp-support .section1::before{
    background-image:url(./images/section1-moon.webp);
}
body.webp-not-support .section1::before{
    background-image:url(./images/section1-moon.png);
}
@keyframes moon-anim{
    0% {
        transform: rotate(0deg) scale3d(1, 1, 1); 
        animation-timing-function: ease;
        transform-origin: top;
    }
    50% {
        transform: rotate(-45deg) scale3d(1.4, 1.4, 1.4);
        animation-timing-function: ease;
        transform-origin: top;
    }
    100% {
        transform: rotate(0deg) scale3d(1, 1, 1);
        animation-timing-function: linear;
        transform-origin: top;
    }
}
.leftSide,.rightSide{
    width: 50%;
    position: relative;
    text-align: center;
}
.section1 .rightSide{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.imgCont img{
    position: absolute;
}
.section1 .container{
    display: flex;
    justify-content: space-between;
    height: 65rem;
}
.section1 .rightSide h2{
    font-family: Neue-Plak-Extended-ExtraBlack;
    color: #13E3BA;
    text-align: center;
    font-size: 2.05rem;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing: -2px;
    text-transform: capitalize;
}
.section1 .rightSide h1{
    color: #F9D75F;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 4.3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 114.286%;
    letter-spacing: -2.1px;
    margin-bottom: 3.5rem;
    text-transform: uppercase;
}
.section1 .rightSide p{
    font-family: CircularXXTT-Regular;
    color: #FFF;
    text-align: center;
    font-size: 1.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}
.section1 .rightSide span{
    font-family: CircularXXTT-Regular;
    color: #FFF;
    text-align: center;
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 400;
    line-height: 84.211%;
    margin-bottom: 1.5rem;
}
.cta {
    display: inline-block;
    padding: 0.8rem 2rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: #000;
    text-align: center;
    font-family: CircularXXTT-Bold;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 133.333%;
    letter-spacing: -0.762px;
    text-decoration: none;
    background-color: #13E3BA;
    border-radius: 0.8rem;
    min-width: 13rem;
    border: 2px solid #13E3BA;
    transition: all ease 0.5s;
    z-index: 10;
}
.cta:hover{
    background-color: #000;
    color: #13E3BA;
}
.cta-black{
    color: #FFFFFF;
    background-color: #000;
    border: 2px solid #FFF;
}
.cta-black:hover{
    background-color: #FFF;
    color: #000;
}
.section1 .cta{
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
}
.section1 .iconCont{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.87rem;
}
.section1 .iconCont a img{
    width: 1.5rem;
    height: auto;
}
.imgCont{
    width: 32rem;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.section1 .slot-machine{
    width: 45rem;
    left: 0.5rem;
    top: 9.5rem;
}
.section1 .astronot{
    width: 20rem;
    top: 20rem;
    right: -7.5rem;
}
.section1 .man-character{
    width: 13.8rem;
    top: 20rem;
    left: 0rem;
}
.section1 .coins{
    width: 33rem;
    top: 20rem;
    right: -17rem;
}
.section2{
    margin-top: 2rem;
    margin-bottom: 5rem;
}
.section2 .container{
    display: flex;
    justify-content: space-between;
}
.section2 .textBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28%;
}
.section2 .textBox img{
    width: 3.1rem;
}
.section2 .textBox h2{
    color: #13E3BA;
    text-align: center;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 900;
    line-height: 109.091%;
    letter-spacing: -0.44px;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.section2 .textBox p{
    color: #FFF;
    text-align: center;
    font-family: CircularXXTT-Regular;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.32px;
}
.section3{
    margin-top: 4rem;
}
.section3 img{
    position: absolute;
}
.section3 .container{
    height: 70rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.section3 .cardCont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 71rem;
    margin-top: 15rem;
    margin-bottom: 4.5rem;
}
.section3 .container .card{
    width: 34.6rem;
    height: 15rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-size: 118%;
    background-position: center;
    padding: 2.18rem;
    border-radius: 1.3rem;
}

body.webp-support .section3 .container .card.cosmic{
    background-image: url(./images/cosmic-bonuses-bg.webp);
}
body.webp-not-support .section3 .container .card.cosmic{
    background-image: url(./images/cosmic-bonuses-bg.png);
}

body.webp-support .section3 .container .card.gold{
    background-image: url(./images/buy-gold-coins-bg.webp);
}
body.webp-not-support .section3 .container .card.gold{
    background-image: url(./images/buy-gold-coins-bg.png);
}
.section3 .container .card h2{
    color: #F9D75F;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 3.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 117.315%;
    letter-spacing: -1.5px;
}
.section3 .container .card h3{
    color: #FFF;
    text-align: center;
    font-family: Neue-Plak-Extended-Regular;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 112.5%;
}

.section3 .astronot2{
    width: 55rem;
    left: 9.5rem;
    top: 12.5rem;
    z-index: -1;
    animation-name: astronot-anim;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
 @keyframes astronot-anim {
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-2rem);
    }
    100%{
        transform: translateY(0);
    }
 }
 .section3 .black-shadow{
    position: absolute;
    width: 41rem;
    bottom: -10rem;
    left: 18rem;
 }
.section3 .coin-left{
    position: absolute;
    width: 35rem;
    height: 30rem;
    right: -2rem;
    top: 0rem;
    animation-name: astronot-anim;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
.section3 .coin-right{
    position: absolute;
    width: 35rem;
    height: 23rem;
    left: -2rem;
    top: 5rem;
    animation-name: astronot-anim;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
.section4 .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60rem;
}

.section4 .leftSide h2{
    color: #FFF;
    text-align: center;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 3rem;
    font-style: normal;
    font-weight: 900;
    line-height: 112.5%;
    letter-spacing: -2px;
}
.section4 .leftSide h1{
    color: #F9D75F;
    text-align: center;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -2.4px;
    margin-bottom: 1rem;
}
.section4 .leftSide h1 span{
    color: #13E3BA;
}
.section4 .leftSide p{
    color: #FFF;
    text-align: center;
    font-family: CircularXXTT-Regular;
    font-size: 1.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 115.789%;
    margin-bottom: 3.5rem;
}
.section4 .leftSide .cta{
    margin-bottom: 8rem;
}
.section4 .rightSide .section4-bg{
    width: 37rem;
    right: -3.5rem;
    top: -23rem;
}
.section4 .rightSide .section4-moon{
    width: 17rem;
    left: 3.5rem;
    top: -19rem;
    animation-name: moon-anim;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.section4 .rightSide .astronot3{
    position: absolute;
    width: 46.5rem;
    height: 53rem;
    top: -21rem;
    left: -13rem;
    z-index: 1;
}
.section4 .rightSide .phone{
    width: 20.2rem;
    right: -2.5rem;
    top: -21rem;
}
.section5 .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46rem;
}

.section5 .rightSide h2{
    color: #F9D75F;
    text-align: center;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height:  112.5%;
    letter-spacing: -2px;
}
.section5 .rightSide h1{
    color: #FFF;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -2.4px;
    margin-bottom: 3.5rem;
}
.section5 .rightSide h1 span{
    color: #13E3BA;
}
.section5 .rightSide p{
    color: #FFF;
    text-align: center;
    font-family: CircularXXTT-Regular;
    font-size: 1.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 84.211%;
    margin-bottom: 3.5rem;
}
.section5 .rightSide .cta{
    margin-bottom: 5rem;
}
.section5 .leftSide .section5-bg{
    width: 59rem;
    left: -2.2rem;
    top: -22.5rem;
}
.section5 .leftSide .astronot4{
    width: 27rem;
    top: -14rem;
    left: 11rem;
    animation-name: astronot4-anim;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.section5 .leftSide .rocket-fire{
    width: 23.5rem;
    top: 6rem;
    left: -1rem;
    animation-name: rocket-fire-anim;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes astronot4-anim {
    0%{
        transform: translate(0rem,0rem);
    }
    20%{
        transform: translate(1rem,-1rem);
    }
    100%{
        transform: translate(0rem,0rem);
    }
}
@keyframes rocket-fire-anim {
    0%{
        filter: brightness(1);
        opacity: 0.4;
        transform: translate(0rem,0rem);
    }
    20%{
        filter: brightness(2) drop-shadow(5px 5px 5px #7b6e75);
        opacity: 1;
        transform: translate(1rem,-1rem);
    }
    100%{
        filter: brightness(1);
        opacity: 0.4;
        transform: translate(0rem,0rem);
    }
}

.section6 .container{
    height: 50rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.section6 .container .imgCont{
    width: 71rem;
    display: flex;
    justify-content: center;
}
.section6 .section6-bg{
    width: 63.1rem;
    left: 0;
    top: 6rem;
}
.section6 .astronot5{
    position: absolute;
    width: 41.5rem;
    right: -11.5rem;
    top: 3rem;
    z-index: 1;
}
.section6 .lightning{
    width: 24.9rem;
    right: 1.2rem;
    top: 2.2rem;
    animation-name:  lightning-anim;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes lightning-anim {
    0%{
        opacity: 0;
        filter: brightness(1);
    }
    25%{
        opacity: 1;
        filter: brightness(1.5);
    }
    30%{
        opacity: 0.3;
        filter: brightness(1);
    }
    36%{
        opacity: 1;
        filter: brightness(1.5);
    }
    40%{
        opacity: 0.3;
        filter: brightness(0.5);
    }
    45%{
        opacity: 1;
        filter: brightness(1.1);
    }
    100%{
        opacity: 0;
        filter: brightness(1);
    }
}
.section6 .crash{
    width: 15rem;
    left: 4.3rem;
    top: 8.5rem;
}
.section6 .bitcoin-line{
    width: 19rem;
    left: 12.7rem;
    top: 11rem;
}
.section6 .limbo{
    width: 14rem;
    left: 5.7rem;
    top: 26.8rem;
    z-index: 1;
}
.section6 .rocket-moon{
    width: 13.2rem;
    left: 11rem;
    top: 21.6rem;
}
.section6 .dice{
    width: 12rem;
    right: 26.2rem;
    top: 10.5rem;
    z-index: 1;
}
.section6 .dices{
    width: 10.5rem;
    right: 20rem;
    top: 9.7rem;
}
.section6 .hilo{
    width: 14.3rem;
    right: 22.8rem;
    top: 25.5rem;
    z-index: 1;
}
.section6 .heart-icon{
    width: 3.5rem;
    right: 38.7rem;
    top: 26.8rem;
}
.section6 .cards{
    width: 13.5rem;
    right: 14.5rem;
    top: 22rem;
}
.section6 .cta-black{
    margin-top: -9.5rem;
    margin-right: 4rem;
}
.section7{
    margin: 12rem 0;
}
.section7 .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section7 .container .textCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section7 .container .tp-logo{
    width: 107rem;
    margin-bottom: 1.3rem;
}
.section7 .container .textCont img{
    height: 2.4rem;
}
.section7 .container .textCont h2{
    font-family: "Poppins", sans-serif;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 700;
}
.section7 .container .textCont h2 span{
    font-weight: 500;
}
.section7 .container .textCont h2 b{
    color: #04DA8D;
}
.section7 .container .textCont div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-right: 7rem;
}
.section7 .container .textCont div p{
    font-family: "Poppins", sans-serif;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 700;
}
.section7 .container .textCont h3{
    font-family: "Poppins", sans-serif;
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 500;
}
.section7 .container .textCont h3 span{
    color: #04DA8D;
}
.section7 .cardsContainer{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 4.1rem;
}
.section7 .card{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 22.5rem;
    text-align: left;
    position: relative;
}
.section7 .userName{
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    border-radius: 50px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.section7 .userName p{
    color: #08141B !important;
    font-family: CircularXXTT-Bold !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    line-height: 1 !important;
    margin-top: 0 !important;
}
.section7 .userName img{
    height: 1rem;
}
.section7 .card:nth-child(1) .userName{
    background-color: #FFA794;
}
.section7 .card:nth-child(2) .userName{
    background-color: #AD73FF;
}
.section7 .card:nth-child(3) .userName{
    background-color: #FFD740;
}
.section7 .card-image{
    width: 22.5rem;
}
.section7 .stars{
    width: 9.5rem;
}
.section7 .starCont{
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
.section7 .starCont span{
    color: rgba(19, 227, 186, 1);
    text-shadow: 11px 14px 100px #000;
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.32px;
    margin-left: 1.25rem;
}
.section7 .card h1{
    color: rgba(255, 255, 255, 1);
    font-family: Neue-Plak-Extended-ExtraBlack;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 114.286%;
    letter-spacing: -0.56px;
    margin-top: 0.2rem;
}
.section7 .card p{
    color: rgba(125, 157, 174, 1);
    font-family: CircularXXTT-Regular;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.32px;
    margin-top: 0.5rem;
}
footer{
    background: #0C1920;
    padding-top: 3.5rem;
    padding-bottom: 6rem;
}
footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
footer h2{
    color: #FFF;
    text-align: center;
    font-family: CircularXXTT-Bold;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 40%;
    letter-spacing: -0.8px;
}
footer h2:nth-child(3){
    margin-top: 4rem;
}
footer .supported-coins{
    height: 2.93rem;
    margin-top: 2rem;
}
footer .social-media-cont{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}
footer .social-media-cont svg{
    width: 2rem;
    height: 2rem;
}
footer .link-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 4rem 0;
}
footer .link-cont div{
    display: flex;
    gap: 1.5rem;
}
footer .link-cont a{
    color: #4FAFF9;
    text-align: center;
    font-family: CircularXXTT-Bold;
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 72.727%;
    letter-spacing: -0.44px;
    text-decoration: none;
}
footer .moonspin-logo{
    width: 17.4rem;
}
footer p{
    color: #849DAC;
    text-align: center;
    font-family: CircularXXTT-Regular;
    font-size: 1.04rem;
    font-style: normal;
    font-weight: 400;
    line-height: 94.118%;
    letter-spacing: -0.34px;
    margin-bottom: 4rem;
    padding: 0 6.8rem;
}

footer span{
    color: #DCDCDC;
    text-align: center;
    font-family: CircularXXTT-Regular;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 94.118%;
    letter-spacing: -0.34px;
}
footer .footer-logo-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.6rem;
}
footer .footer-logo-cont img{
    height: 4.8rem;
}

/**** RESPONSİVE ****/

@media (max-width: 1500px) {
    html{
        font-size: 13px;
    }
}

@media (max-width: 1300px) {
    html{
        font-size: 13px;
    }
}
@media (max-width: 1200px) {
    html{
        font-size: 10px;
    }
}
@media (max-width: 1100px) {
    html{
        font-size: 10px;
    }
}
@media (max-width: 1000px) {
    html{
        font-size: 10px;
    }
}
@media (max-width: 900px) {
    html{
        font-size: 10px;
    }
    nav .container{
        padding: 0 2rem;
    }
    .section1 .container{
        flex-direction: column;
        height: 98rem;
    }
    .leftSide, .rightSide{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .section1 .rightSide h2{
        font-size: 4rem;
    }
    .section1 .rightSide h1{
        font-size: 5.5rem;
    }
    .section1 .rightSide p,.section1 .rightSide span,.section2 .textBox h2{
        font-size: 2rem;
    }
    .cta {
        padding: 1rem 3rem;
        font-size: 2.5rem;
        min-width: 20rem;
    }
    .section1 .iconCont {
        gap: 2rem;
    }
    .section1 .iconCont a img {
        width: 3rem;
    }
    .section2 .textBox p{
        font-size: 1.3rem;
    }
    .section2 .textBox img{
        width: 4rem;
    }
    .section3 .container {
        height: 84rem;
    }
    .section3 .cardCont {
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        margin-top: 21rem;
    }
    .section4 .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 82rem;
        flex-direction: column-reverse;
    }
    .section4 .container .rightSide{
        height: 50rem;
    }
    .section4 .rightSide .section4-bg{
        top: 0rem;
    }
    .section4 .rightSide .astronot3{
        top: 8rem;
    }
    .section4 .rightSide .phone{
        top: 2rem;
    }
    .section5 .container{
        flex-direction: column;
        height: 80rem;
    }
    .section5 .leftSide .section5-bg{
        top: 0rem;
    }
    .section5 .leftSide .astronot4{
        top: 10.3rem;
    }
    .section6 .section6-bg {
        width: 45rem;
        left: 9rem;
    }
    .section6 .container{
        height: 68rem;
    }
    .section6 .astronot5 {
        width: 47.5rem;
        right: -3.5rem;
        top: 11.5rem;
        z-index: 1;
    }
    .section6 .crash {
        width: 27rem;
        left: 10.3rem;
        top: 6.5rem;
    }
    .section6 .bitcoin-line {
        width: 24rem;
        left: 25.7rem;
        top: 8rem;
    }
    .section6 .dice {
        width: 12rem;
        right: auto;
        left: 12rem;
        top: 20.5rem;
        z-index: 1;
    }
    .section6 .dices {
        width: 10.5rem;
        right: auto;
        left: 21rem;
        top: 20.7rem;
    }
    .section6 .limbo {
        width: 16rem;
        left: 12rem;
        top: 32.3rem;
        z-index: 1;
    }
    .section6 .rocket-moon {
        width: 13.2rem;
        left: 21rem;
        top: 27.6rem;
    }
    .section6 .hilo {
        width: 22.3rem;
        right: auto;
        left: 10rem;
        top: 41.5rem;
        z-index: 1;
    }
    .section6 .cards {
        width: 13.5rem;
        right: auto;
        left: 26rem;
        top: 39rem;
    }
    .section6 .heart-icon{
        display: none;
    }
    .section6 .lightning {
        width: 39.9rem;
        right: -3.8rem;
        top: -6.8rem;
    }
    .section7 .container {
        width: 100%;
        max-width: none;
    }
    .section7 .container .cardsContainer{
        overflow-x: scroll;
        margin-top: 4vw;
    }
    .section7 .container .tp-logo{
        width: 223vw;
        margin-bottom: 3vw;
    }
    .section7 .container .textCont img {
        height: 5vw;
    }
    .section7 .container .textCont{
        flex-direction: column;
    }
    .section7 .container .textCont div {
        margin-right: 0;
        position: absolute;
    }
    .section7 .container .textCont div p{
        font-size: 4vw;
    }
    .section7 .container .textCont h3{
        font-size: 3vw;
    }
    .section7 .container .textCont h2 {
        font-size: 4vw;
        margin-top: 7vw;
    }
    .section7 .userName {
        top: 1vw;
        left: 1vw;
        padding: 2vw;
        gap: 1vw;
    }
    .section7 .userName p{
        font-size: 2.5vw !important;
    }
    .section7 .userName img {
        height: 2.5vw;
    }
    .section7 .card-image,.section7 .card {
        width: 25.5rem;
    }
    .section7 .card {
        margin: 1rem;
    }
    .section7 .stars {
        width: 12rem;
    }
    .section7 .starCont span,.section7 .card h1{
        font-size: 1.5rem;
    }
    .section7 .card h1{
        font-size: 2.2rem;
    }

}
@media (max-width: 576px) {
    .container {
        width: 100%;
        max-width: none;
        margin: 0 auto;
    }
    nav{
        padding: 5vw 0;
    }
    nav .container {
        padding: 0 5vw;
    }
    nav .moonspin-logo {
        width: 32vw;
    }
    .loginBtn::before{
        border: 0.4vw solid transparent
    }
    .loginBtn, .registerBtn {
        width: 24vw;
        border-radius: 0.5rem;
        font-size: 1rem;
        padding: 2vw;
    }
    .loginBtn span, .registerBtn span {
        font-size: 3.3vw;
        line-height: 100%;
    }
    .section1::after{
        background-size: 125vw;
        background-position: -12vw 10vw;
    }
    .section1 .container {
        height: 194vw;
    }
    .section1::before{
        content: '';
        width: 70vw;
        height: 70vw;
        background-size: 64vw;
        /* z-index: -1; */
        top: 0vw;
        left: auto;
        right: -1vw;
    }
    body.webp-support .section1::after{
        background-image:url(./images/section1-bg-mobile.webp);
    }
    body.webp-not-support .section1::after{
        background-image:url(./images/section1-bg-mobile.png);
    }
    body.webp-support .section1::before{
        background-image:url(./images/section1-moon-mobile.webp);
    }
    body.webp-not-support .section1::before{
        background-image:url(./images/section1-moon-mobile.png);
    }
    .ref{
        width: 96vw;
        top: 11vw;
        left: 3vw;
    }
    .imgCont{
        width: 100%;
    }
    .section1 .slot-machine {
        width: 95vw;
        left: 5vw;
        top: 11vw;
    }
    .section1 .astronot {
        width: 45vw;
        top: 30vw;
        right: 12vw;
    }
    .section1 .man-character {
        width: 31vw;
        top: 32vw;
        left: 3vw;
    }
    .section1 .coins {
        width: 65vw;
        top: 99vw;
        right: 1vw;
    }
    .section1 .rightSide h2 {
        font-size: 5.5vw;
        letter-spacing: -0.3vw;
    }
    .section1 .rightSide h1 {
        font-size: 12vw;
        margin-bottom: 7vw;
    }
    .section1 .rightSide p, .section1 .rightSide span, .section2 .textBox h2 {
        font-size: 4.5vw;
    }
    .section1 .cta {
        margin-top: 6vw;
        margin-bottom: 4vw;
    }
    .cta {
        padding: 2vw 5vw;
        font-size: 6vw;
        min-width: 43vw;
    }
    .section1 .rightSide span{
        margin-bottom: 4vw;
    }
    .section1 .iconCont a img {
        width: 7vw;
    }
    .section2 {
        margin-top: 5vw;
        margin-bottom: 5vw;
    }
    .section2 .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .section2 .textBox{
        width: 85%;
        margin-bottom: 12vw;
    }
    .section2 .textBox img {
        width: 14vw;
    }
    .section1 .rightSide p, .section1 .rightSide span, .section2 .textBox h2 {
        font-size: 4.5vw;
    }
    .section2 .textBox p {
        font-size: 4.5vw;
    }
    .section2 .textBox h2 {
        margin-top: 5vw;
        margin-bottom: 3vw;
    }
    .section3 {
        margin-top: -17vw;
    }
    .section3 .container {
        height: 185vw;
    }
    .section3 .cardCont {
        gap: 5vw;
        margin-top: 57vw;
        width: 100%;
    }
    .section3 .astronot2 {
        width: 98vw;
        left: 2vw;
        top: 22vw;
        z-index: -1;
    }
    .section3 .black-shadow{
        display: none;
    }
    .section3 .coin-left {
        width: 75vw;
        height: 44vw;
        right: -18vw;
        top: 5vw;
    }
    .section3 .coin-right {
        width: 75vw;
        height: 44vw;
        left: -18vw;
        top: 10vw;
    }
    .section3 .container .card {
        width: 90vw;
        height: 38vw;
        padding: 5vw;
    }
    .section3 .container .card h3{
        font-size: 6vw;
    }
    .section3 .container .card h2{
        font-size: 8vw;
    }
    .section4{
        padding-top: 20vw;
    }
    .section4 .container{
        height: 210vw;
    }
    .section4 .rightSide .section4-bg {
        width: 93vw;
        right: 3vw;
        top: 0;
    }
    .section4 .rightSide .section4-moon {
        width: 48vw;
        left: 8vw;
        top: 11vw;
    }
    .section4 .rightSide .phone {
        width: 45vw;
        right: 5vw;
        top: 7vw;
    }
    .section4 .rightSide .astronot3 {
        width: 128vw;
        height: 133vw;
        top: -10vw;
        left: -28vw;
        z-index: 1;
    }
    .section4 .leftSide h2{
        font-size: 8vw;
        margin-bottom: 2vw;
    }
    .section4 .leftSide h1 {
        font-size: 13vw;
        margin-bottom: 5vw;
    }
    .section4 .leftSide p {
        font-size: 4vw;
        margin-bottom: 8vw;
    }
    .section5 .container {
        height: 222vw;
    }
    .section5 .leftSide .section5-bg {
        width: 100vw;
        left: 0;
        top: 0;
    }
    .section5 .leftSide .astronot4 {
        width: 72vw;
        top: 44vw;
        left: 19vw;
    }
    .section5 .leftSide .rocket-fire{
        width: 60vw;
        top: 90.5vw;
        left: -6vw;
    }
    .section5 .rightSide h2{
        font-size: 8vw;
    }
    .section5 .rightSide h1 {
        font-size: 13vw;
        margin-bottom: 5vw;
        padding: 0 4vw;
    }
    .section5 .rightSide p{
        font-size: 4vw;
        margin-bottom: 8vw;
    }
    .section5 .rightSide .cta {
        margin-bottom: 23vw;
    }
    .section6 .container {
        height: 143vw;
    }
    .section6 .container .imgCont{
        width: 100%;
    }
    .section6 .section6-bg {
        width: 91vw;
        left: 5vw;
        top: 18vw;
    }
    .section6 .astronot5 {
        width: 84vw;
        height: 108vw;
        right: -6vw;
        top: 33vw;
        z-index: 1;
    }
    .section6 .crash {
        width: 50vw;
        left: 6vw;
        top: 20vw;
    }
    .section6 .dice {
        width: 25vw;
        left: 9vw;
        top: 49vw;
    }
    .section6 .dices {
        width: 22vw;
        right: auto;
        left: 27vw;
        top: 48vw;
    }
    .section6 .bitcoin-line {
        width: 47vw;
        left: 27vw;
        top: 28vw;
    }
    .section6 .limbo {
        width: 35vw;
        left: 9vw;
        top: 74vw;
        z-index: 1;
    }
    .section6 .rocket-moon {
        width: 30vw;
        left: 25vw;
        top: 67vw;
    }
    .section6 .hilo {
        width: 41vw;
        right: auto;
        left: 6vw;
        top: 94vw;
        z-index: 1;
    }
    .section6 .cards {
        width: 27vw;
        right: auto;
        left: 29vw;
        top: 87vw;
    }
    .section6 .lightning {
        width: 55vw;
        right: 0vw;
        top: -7vw;
    }
    .section6 .cta-black {
        margin-top: 0;
        margin-right: 0;
    }
    .section7 {
        margin: 20vw 0;
    }
    .section7 .card {
        margin: 3vw;
    }
    .section7 .card-image, .section7 .card {
        width: 60vw;
    }
    .section7 .starCont {
        margin-top: 5vw;
    }
    .section7 .stars {
        width: 29vw;
    }
    .section7 .starCont span {
        font-size: 4vw;
        margin-left: 3vw;
    }
    .section7 .card h1{
        font-size: 5vw;
    }
    .section7 .card p {
        font-size: 3.2vw;
        margin-top: 2vw;
    }
    footer {
        padding-top: 15vw;
        padding-bottom: 30vw;
    }
    footer h2{
        font-size: 7vw;
    }
    footer .supported-coins {
        height: 23vw;
        margin-top: 7vw;
    }
    footer h2:nth-child(3) {
        margin-top: 12vw;
    }
    footer .social-media-cont svg {
        width: 8vw;
        height: 8vw;
    }
    footer .social-media-cont {
        gap: 8vw;
        margin-top: 8vw;
        max-width: none;
    }
    footer .link-cont div {
        display: flex;
        gap: 5vw;
        flex-wrap: wrap;
        justify-content: center;
    }
    footer .link-cont a{
        font-size: 4vw;
    }
    footer .link-cont {
        gap: 7vw;
        margin: 10vw 0;
        flex-direction: column;
        width: 75%;
    }
    footer .moonspin-logo {
        width: 60vw;
    }
    footer p,footer span {
        font-size: 3.6vw;
        margin-bottom: 10vw;
    }
    footer p{
        padding: 0 16vw;
    }
    footer .footer-logo-cont img {
        height: 10vw;
    }

    /** modal **/
    .modal-container {
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.80);
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: -10;
    }

    .modal-container.show {
        opacity: 1;
        z-index: 100;
    }

    .modal {
        border-radius: 2vw;
        background: #222121;
        width: 85vw;
        height: 112vw;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15vw;
        background-size: cover;
        background-position: center;
        z-index: 100;
    }
    body.webp-support .modal {
        background-image: url(./images/modal-bg.webp);
    }
    body.webp-not-support .modal {
        background-image: url(./images/modal-bg.png);
    }
    .modal .modal-astronot {
        position: absolute;
        top: -19vw;
        right: 1vw;
        width: 82vw;
    }
    .modal p{
        font-family: Neue-Plak-Extended-ExtraBlack;
        color: #FFF;
        text-align: center;
        font-size: 7vw;
        font-style: normal;
        font-weight: 400;
        line-height: 28.737px;
        letter-spacing: -1.064px;
        position: absolute;
        top: 50vw;
    }
    .modal h1{
        font-family: Neue-Plak-Extended-ExtraBlack;
        color: #13E3BA;
        text-align: center;
        font-size: 10vw;
        font-style: normal;
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -1.22px;
        position: absolute;
        top: 64vw;
    }
    .modal h1 b{
        color: #F9D75F;
    }
    .modal .cta-container {
        top: 92vw;
        width: 63vw;
        position: absolute;
        display: flex;
        justify-content: center;
    }

    .modal .modal-close-icon {
        position: absolute;
        z-index: 10;
        cursor: pointer;
        width: 9vw;
        top: 2vw;
        right: 2vw;
    }

    .stickyBottom {
        position: fixed;
        z-index: 100;
        bottom: 0;
        display: flex;
        border-radius: 5px;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 3vw;
        transition: transform .3s;
        transform: translateY(100%);
        background-size: cover;
        background-position: center;
    }
    body.webp-support .stickyBottom {
        background-image: url(./images/sticky-bottom-bg.webp);
    }
    body.webp-not-support .stickyBottom {
        background-image: url(./images/sticky-bottom-bg.png);
    }
    .stickyBottom .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .stickyBottom .text p{
        color: #FFF;
        text-align: center;
        font-family: Neue-Plak-Extended-ExtraBlack;
        font-size: 4.4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 112.11%;
        letter-spacing: -0.1vw;
    }
    .stickyBottom .text h1{
        color: #13E3BA;
        text-align: center;
        font-family: Neue-Plak-Extended-ExtraBlack;
        font-size: 5.4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 104.709%;
        letter-spacing: -0.1vw;
    }
    .stickyBottom .text h1 b{
        color: #F9D75F;
    }
    .stickyBottom .cta-container {
        position: relative;
        width: 35vw;
    }

    .stickyBottom .cta-container .cta {
        font-size: 4.5vw;
        min-width: 100%;
    }

    .stickyBottom img {
        width: 58vw;
        margin-right: 5vw;
    }

    .stickyBottom.show {
        transform: translateY(0)
    }
}