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

body {
    font-family: Arial, sans-serif;
    background-color: #000E32;
}

@font-face {
    font-family: 'Gilroy-Heavy';
    src: url('gilroy-heavy.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }

@keyframes pulse-border {
    0% {
      border-width: 4px; 
      border-color: #eb882a; 
    }
    50% {
      border-width: 1px; 
      border-color: #00DBDD;
    }
    100% {
      border-width: 4px; 
      border-color: #eb882a; 
    }
  }


/* --------- main --------- */


.main-page{
    position: relative; 
    width: 100%; 
    height: 750px;
    display: inline-block;
    background-color: #0F1241;
}

.main-img{
    position: relative; 
    width: 100%; 
    height: 719px;
}

.header{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

.logo-main{
    position: absolute;
    top: 54px;
    left: 100px;
    width: 160px;
}

.main-main{
    position: absolute;
    top: 200px;
    left: 100px;
    width: 45%;
    font-family: 'Gilroy-Heavy';
    font-weight: 700;
    font-size: 70px;
    color: #FFFFFF;
    line-height: 72px;
    letter-spacing: 1px;
}

.main-second{
    position: absolute;
    top: 360px;
    left: 100px;
    width: 35%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 30px;
    color: #FFFFFF;
    line-height: 1.2;
    letter-spacing: 1px;
}

.bonus{
    color: #11f311;
}

.play-btn{
    position: absolute;
    left: 100px;      
    top: 70%;
    width: 400px;
    height: 60px;
    background-image: linear-gradient(to bottom, #44E543, #00DBDD);
    border: 1px solid #44E543;
    border-radius: 10px;
    font-family: 'Montserrat';
    font-weight: 800;
    font-size: 20px;
    color: black;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}


/* --------- block 1 --------- */


.block1-page{
    position: relative;
    background-color: #0F1241;
    height: 110px;
    width: 100%; 
    text-align: center;
    justify-content: center;
    align-items: center;
}

.block1-page p{
    width: 60%;
    position: absolute;
    top: 10%;
    left: 19%;
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 24px;
}


/* --------- block 2 --------- */


.block2-page{
    position: relative;
    display: inline-block;
    width: 100%; 
    height: 590px;
    background-color: #0F1241;
}

.block2-img{
    position: relative; 
    width: 100%; 
    height: 590px;
}

.btn-frame{
    /* background-color: red; */
    display: inline-block;
    position: absolute;
    width: 70%;
    height: 360px;
    top: 5%;
    left: 15%;
}

.btn1{
    position: absolute;
    left: 0%;
    top: 0%;
    width: 32%;
    height: 160px;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn-frame p{
    position: absolute;
    top: 15%;
    left: 20px;
    width: 80%;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 200%;
    line-height: 36px;
    color: #FFFFFF;
}

.checkbox-cl{
    display: none;
  }

.check-box-label{
    position: absolute;
    top: 104px;
    left: 83%;
    width: 15%;
    height: 43px;
    background-color: #000920;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
}

.checkbox-cl:checked + .check-box-label::after {
    content: ''; 
    position: absolute;
    top: 0%; 
    left: 34%;
    width: 30%; 
    height: 30px; 
    border: solid #33FF33; 
    border-width: 0 3px 3px 0; 
    transform: rotate(45deg); 
    cursor: pointer;
  }

.btn2{
    position: absolute;
    left: 34%;
    top: 0%;
    width: 32%;
    height: 160px;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn3{
    position: absolute;
    left: 68%;
    top: 0%;
    width: 32%;
    height: 160px;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn4{
    position: absolute;
    left: 0%;
    top: 56%;
    width: 32%;
    height: 160px;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn5{
    position: absolute;
    left: 34%;
    top: 56%;
    width: 32%;
    height: 160px;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn6{
    position: absolute;
    left: 68%;
    top: 56%;
    width: 32%;
    height: 160px;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn6-img-1{
    position: absolute;
    top: 65%;
    left: 27%;
    width: 40%;
}

.btn6-img-2{
    position: absolute;
    top: 5%;
    left: 61%;
    width: 23%;
}

.get-reward{
    position: absolute;
    left: 38%;
    top: 450px;
    width: 25%;
    height: 60px;
    background-image: linear-gradient(to bottom, #44E543, #00DBDD);
    border: 1px solid #44E543;
    border-radius: 10px;
    font-family: 'Montserrat';
    font-weight: 800;
    font-size: 20px;
    color: black;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}

/* ----- block 3 (web) -----*/

.block3-page{
    position: relative;
    width: 100%; 
    height: 920px;
    background-color: #000920;
    /* background-color: blue; */
}

.cards-img{
    position: absolute;
    left: 12%;
    top: 3%;
    width: 62%;
    height: 433px;
}

.cards-block-main{
    position: absolute;
    top: 529px;
    left: 17%;
    width: 20%;
    font-family: 'Gilroy-Heavy';
    font-weight: 700;
    font-size: 48px;
    color: #FFFFFF;
    line-height: 52px;
    letter-spacing: 1px;
}

.cards-block-second{
    position: absolute;
    top: 670px;
    left: 17%;
    width: 20%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 23px;
    letter-spacing: 1px;
}

.join-btn{
    position: absolute;
    left: 17%;
    top: 765px;
    width: 20%;
    height: 60px;
    background-image: linear-gradient(to bottom, #44E543, #00DBDD);
    border: 1px solid #44E543;
    border-radius: 10px;
    font-family: 'Roboto';
    font-weight: 800;
    font-size: 120%;
    color: black;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}

.car-img{
    position: absolute;
    left: 45%;
    top: 416px;
    width: 42%;
    height: 480px;
}


.car-block-main{
    position: absolute;
    top: 100px;
    left: 65%;
    width: 20%;
    font-family: 'Gilroy-Heavy';
    font-weight: 700;
    font-size: 48px;
    color: #FFFFFF;
    line-height: 52px;
    letter-spacing: 1px;
}

.car-block-second{
    position: absolute;
    top: 240px;
    left: 65%;
    width: 20%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 23px;
    letter-spacing: 1px;
}

.get-car-bonus{
    position: absolute;
    left: 65%;
    top: 340px;
    width: 20%;
    height: 60px;
    background-image: linear-gradient(to bottom, #44E543, #00DBDD);
    border: 1px solid #44E543;
    border-radius: 10px;
    font-family: 'Roboto';
    font-weight: 800;
    font-size: 120%;
    color: black;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}

/* ------------- block 4 (web) ------------- */

.block4-page{
    position: relative;
    height: 160px;
    width: 100%;
    background-color: #0F1241;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}

.block4-page p{
    width: 42%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 32px;
    line-height: 37px;
    letter-spacing: 1px;
    color: #FFFFFF;
}

  /* ----- portrait tablet & horiz mob ----- */

  @media (min-width: 650px) and (max-width: 979px) {
    /* --------- main  --------- */
    .main-page{
        position: relative; 
        width: 100%;
        height: 500px;
        display: inline-block;
    }

    .main-img{
        position: relative; 
        width: 100%; 
        height: 440px;
        filter: brightness(0.6);
    }

    .logo-main{
        position: absolute;
        top: 20px;
        left: 10%;
        width: 166px;
        height: 44px;
    }

    .main-main{
        position: absolute;
        top: 120px;
        left: 10%;
        width: 65%;
        font-family: 'Gilroy-Heavy';
        font-weight: 700;
        font-size: 50px;
        color: #FFFFFF;
        line-height: 52px;
        letter-spacing: 1px;
    }
    
    .main-second{
        position: absolute;
        top: 255px;
        left: 10%;
        width: 45%;
        font-family: 'Roboto';
        font-weight: 400;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 1.0;
        letter-spacing: 1px;
    }

    .play-btn{
        position: absolute;
        left: 10%;      
        top: 70%;
        width: 400px;
        height: 60px;
        background-image: linear-gradient(to bottom, #44E543, #00DBDD);
        border: 1px solid #44E543;
        border-radius: 10px;
        font-family: 'Montserrat';
        font-weight: 800;
        font-size: 20px;
        color: black;
        cursor: pointer;
        animation: pulse-border 1.5s infinite;
    }

    /* ------------ block 2 (tablet) ------------ */

    .check-box-label{
        position: absolute;
        top: 110px;
        left: 70%;
        width: 24%;
        height: 38px;
        background-color: #000920;
        border: 1px solid #FFFFFF;
        border-radius: 8px;
        cursor: pointer;
    }

    .btn-frame p{
        position: absolute;
        top: 10%;
        left: 15px;
        width: 80%;
        font-family: 'Montserrat';
        font-weight: 700;
        font-size: 130%;
        line-height: 27px;
        color: #FFFFFF;
    }

    .get-reward{
        position: absolute;
        left: 30%;
        top: 450px;
        width: 40%;
        height: 60px;
        background-image: linear-gradient(to bottom, #44E543, #00DBDD);
        border: 1px solid #44E543;
        border-radius: 10px;
        font-family: 'Montserrat';
        font-weight: 800;
        font-size: 20px;
        color: black;
        cursor: pointer;
        animation: pulse-border 1.5s infinite;
    }

/* ----- block 3 (tablet) -----*/

.block3-page{
    position: relative;
    width: 100%; 
    height: 820px;
    background-color: #000920;
    /* background-color: blue; */
}

.cards-img{
    position: absolute;
    left: 10%;
    top: 3%;
    width: 62%;
    height: 340px;
}

.cards-block-main{
    position: absolute;
    top: 429px;
    left: 15%;
    width: 24%;
    font-family: 'Gilroy-Heavy';
    font-weight: 700;
    font-size: 48px;
    color: #FFFFFF;
    line-height: 52px;
    letter-spacing: 1px;
}

.cards-block-second{
    position: absolute;
    top: 560px;
    left: 15%;
    width: 29%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 23px;
    letter-spacing: 1px;
}

.join-btn{
    position: absolute;
    left: 15%;
    top: 665px;
    width: 24%;
    height: 60px;
    background-image: linear-gradient(to bottom, #44E543, #00DBDD);
    border: 1px solid #44E543;
    border-radius: 10px;
    font-family: 'Roboto';
    font-weight: 800;
    font-size: 120%;
    color: black;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}

.car-img{
    position: absolute;
    left: 48%;
    top: 360px;
    width: 42%;
    height: 420px;
}


.car-block-main{
    position: absolute;
    top: 70px;
    left: 67%;
    width: 24%;
    font-family: 'Gilroy-Heavy';
    font-weight: 700;
    font-size: 48px;
    color: #FFFFFF;
    line-height: 52px;
    letter-spacing: 1px;
}

.car-block-second{
    position: absolute;
    top: 190px;
    left: 67%;
    width: 27%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 23px;
    letter-spacing: 1px;
}

.get-car-bonus{
    position: absolute;
    top: 270px;
    left: 67%;
    width: 24%;
    height: 60px;
    background-image: linear-gradient(to bottom, #44E543, #00DBDD);
    border: 1px solid #44E543;
    border-radius: 10px;
    font-family: 'Roboto';
    font-weight: 800;
    font-size: 120%;
    color: black;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}
  }


/* ----- mob ----- */

  @media (max-width: 480px) {
    .main-page{
        position: relative; 
        width: 100%;
        height: 440px;
        display: inline-block;
        background-color: #000E32;
    }

    .main-img{
        position: relative; 
        width: 100%; 
        height: 420px;
        filter: brightness(0.6);
    }

    .logo-main{
        position: absolute;
        top: 20px;
        left: 10%;
        width: 166px;
        height: 44px;
    }

    .main-main{
        position: absolute;
        top: 110px;
        left: 10%;
        width: 40%;
        font-family: 'Gilroy-Heavy';
        font-weight: 700;
        font-size: 28px;
        color: #FFFFFF;
        line-height: 32px;
        letter-spacing: 1px;
    }
    
    .main-second{
        position: absolute;
        top: 220px;
        left: 10%;
        width: 45%;
        font-family: 'Roboto';
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 23px;
        letter-spacing: 1px;
    }
    
    .play-btn{
        position: absolute;
        left: 10%;      
        top: 320px;
        width: 80%;
        height: 42px;
        border-radius: 10px;
        font-family: 'Montserrat';
        font-weight: 800;
        font-size: 20px;
        color: black;
        cursor: pointer;
        animation: pulse-border 1.5s infinite;
    }

    /* block 1 */

    .block1-page{
        position: relative;
        display: flex;
        background-color: #000E32;
        height: 138px;
        width: 100%; 
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    
    .block1-page p{
        width: 80%;
        position: absolute;
        top: 14%;
        left: 10%;
        font-family: 'Montserrat';
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 24px;
    }

    /* --------- block 2 --------- */

.block2-page{
    position: relative;
    display: inline-block;
    width: 100%; 
    height: 400px;
    background-color: #000E32;
}

.block2-img{
    position: relative; 
    width: 100%; 
    height: 400px;
}

.btn-frame{
    display: inline-block;
    position: absolute;
    width: 70%;
    height: 260px;
    top: -2%;
    left: 5%;
}

.btn1{
    position: absolute;
    left: 0%;
    top: 0%;
    width: 61%;
    height: 35%;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn-frame p{
    position: absolute;
    top: 15%;
    left: 10px;
    width: 80%;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 100%;
    line-height: 16px;
    color: #FFFFFF;
}

.checkbox-cl{
    display: none;
}

.check-box-label{
    position: absolute;
    top: 57%;
    left: 76%;
    width: 20%;
    height: 35%;
    background-color: #0A0A0B;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
}

.checkbox-cl:checked + .check-box-label::after {
    content: ''; 
    position: absolute;
    top: 0%; 
    left: 35%;
    width: 18%; 
    height: 22px; 
    border: solid #33FF33; 
    border-width: 0 3px 3px 0; 
    transform: rotate(45deg); 
    cursor: pointer;
  }

.btn2{
    position: absolute;
    left: 67%;
    top: 0%;
    width: 61%;
    height: 35%;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn3{
    position: absolute;
    left: 0%;
    top: 42%;
    width: 61%;
    height: 35%;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn4{
    position: absolute;
    left: 67%;
    top: 42%;
    width: 61%;
    height: 35%;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn5{
    position: absolute;
    left: 0%;
    top: 84%;
    width: 61%;
    height: 35%;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.btn6{
    position: absolute;
    left: 67%;
    top: 84%;
    width: 61%;
    height: 35%;
    border-radius: 16px;
    background-color: #000920CC;
    border: 3px solid transparent;
    background:
        linear-gradient( #000920f8, #000920f8) padding-box,
        linear-gradient(45deg, #00DBDD, #44E543) border-box;
}

.get-reward{
    position: absolute;
    left: 10%;      
    top: 85%;
    width: 80%;
    height: 42px;
    border-radius: 10px;
    font-family: 'Montserrat';
    font-weight: 800;
    font-size: 20px;
    color: #000;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}


/* block 3 */

.block3-page{
    position: relative;
    width: 100%; 
    height: 1040px;
    background-color: #000920;
}


.cards-img{
    position: absolute;
    left: 4%;
    top: 220px;
    width: 92%;
    height: 317px;
}

.cards-block-main{
    position: absolute;
    top: 50px;
    left: 10%;
    width: 85%;
    font-family: 'Gilroy-Heavy';
    font-weight: 800;
    font-size: 34px;
    color: #FFFFFF;
    line-height: 36px;
    letter-spacing: 1px;
    text-align: center;
}

.cards-block-second{
    position: absolute;
    top: 105px;
    left: 10%;
    width: 80%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
}

.join-btn{
    position: absolute;
    left: 20%;
    top: 165px;
    width: 60%;
    height: 42px;
    border-radius: 10px;
    font-family: 'Roboto';
    font-weight: 800;
    font-size: 100%;
    color: #000;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}

.car-img{
    position: absolute;
    left: 10%;
    top: 740px;
    width: 80%;
    height: 300px;
}

.car-block-main{
    position: absolute;
    top: 570px;
    left: 10%;
    width: 85%;
    font-family: 'Gilroy-Heavy';
    font-weight: 800;
    font-size: 34px;
    color: #FFFFFF;
    line-height: 36px;
    letter-spacing: 1px;
    text-align: center;
}

.car-block-second{
    position: absolute;
    top: 620px;
    left: 10%;
    width: 80%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
}

.get-car-bonus{
    position: absolute;
    left: 20%;
    top: 665px;
    width: 60%;
    height: 42px;
    border-radius: 10px;
    font-family: 'Roboto';
    font-weight: 800;
    font-size: 100%;
    color: #000;
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}

.block4-page{
    position: relative;
    height: 100px;
    width: 100%;
    background-color: #000E32;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}

.block4-page p{
    width: 80%;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1px;
    color: #FFFFFF;
}

}