@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;900&display=swap");
@import url('https://fonts.cdnfonts.com/css/akrobat');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

/*Обнуление*/
*{padding:0;margin:0;border:0;}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
:focus,:active{outline:none;}
a:focus,a:active{outline:none;}
nav,footer,header,aside{display:block;}
/*html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*/
input,button,textarea{font-family:inherit;}
input::-ms-clear{display:none;}
button{cursor:pointer;}
button::-moz-focus-inner{padding:0;border:0;}
a,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul li{list-style:none;}
img{vertical-align:top;}
/*h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}*/

body{
    height: 100%;
}

:root {
    --BL: linear-gradient(90deg, #3259DD 6.5%, #89A3FE 100%);
}

.wrapper{
    --min-height: 100%;
    --overflow: hidden;

    --display: flex;
    --flex-direction: column;
}

.content {
    flex: 1 1 auto;
    background-color: black;
}

.logo-top{
    justify-content: center;
}

.horizontal-line {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    z-index: 10; /* Ensure it is above other elements */
    opacity: 0.5;
    background: #CAD8F2;
}
.horizontal-line:first-child {
    top: 10%; /* Adjust the vertical position */
}

.horizontal-line:nth-child(2) {
    top: 80%; /* Adjust the vertical position */
}


.vertical-line {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    z-index: 10; /* Ensure it is above other elements */
    opacity: 0.5;
    background: #CAD8F2;
}

.vertical-line:first-child {
    left: 12%; /* Adjust the horizontal position */
}

.vertical-line:nth-child(2) {
    right: 12%; /* Adjust the horizontal position */
}

.crosshair {
    position: absolute;
    width: 15px; /* Width of the SVG */
    height: 15px; /* Height of the SVG */
    margin-top: -7.5px; /* Half of the SVG height to center */
    margin-left: -7.5px; /* Half of the SVG width to center */
    z-index: 20; /* Ensure it is above the lines */
}

.crosshair:first-child {
    top: 73%; /* Same as horizontal line top position */
    left: 12%
}
.crosshair:nth-child(2) {
    top: 86%; /* Same as horizontal line top position */
    left: 12%
}
.crosshair:nth-child(3) {
    top: 73%; /* Same as horizontal line top position */
    right: 11.6%
}
.crosshair:nth-child(4) {
    top: 86%; /* Same as horizontal line top position */
    right: 11.6%
}


.vertical-line-addition {
    position: absolute;
    width: 15px;
    height: 1.657px;
    z-index: 10; /* Ensure it is above other elements */
    opacity: 0.5;
    background: #CAD8F2;
}

.vertical-line-addition:first-child {
    top: 82%;
    left: 11.5%; /* Adjust the horizontal position */
}
.vertical-line-addition:nth-child(2) {
    top: 82%;
    right: 11.5%; /* Adjust the horizontal position */
}



/* Adjustments for responsiveness */
@media screen and (max-width: 1400px) {
    .horizontal-line {
        top: 45%; /* Adjust as necessary */
    }
    .vertical-line {
        left: 45%; /* Adjust as necessary */
    }
}

.main-btn{
    color: white;
    background: #121622;
    padding: 0.975rem;
    border-radius: 10px;
}

.nav-btn{
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20) inset;
    border: 1px solid rgba(255, 255, 255, 0.20);
}
.nav-elements {
    display: flex;
    gap: 28rem;
}



.social-media-btns {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.main-rectangle-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 412px;
    color: white;
    justify-content: center;
    margin-right: 2vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    padding-right: 0.4vw;
    padding-left: 0.4vw;

    background: linear-gradient(90deg, #3259DD 6.5%, #89A3FE 100%);
    p {
        margin: 0;
        color: #FFF;
        font-family: "Alfa Slab One", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.2vw;
        line-height: 40px; /* 133.333% */
        text-transform: uppercase;
    }
}
.promo {
     position: relative;
     background: url("../img/back.png") no-repeat center center fixed;
     background-size: cover;
     overflow: hidden;
}
.main-txt {
    color: #FFF;
    font-family: 'Akrobat', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 35px;
    margin-bottom: 1rem;
}

.navbar {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
@media screen and (min-width: 992px) {
    .promo {
        min-height: 140vh;
    }
    .navigation-elements {
        margin-left: 21%;
        gap: 1vw;
    }
    .support-mobile, .mobile-big-title {
        display: none;
    }
    .main-center {
        position: relative;
        width: 100% !important;
        max-width: 1100px !important;
        height: 350px; /* Fixed height for consistent layout */
        margin: 0 auto;
        margin-top: 10vh !important;
    }

    .car-frame {
        width: 407.15px;
        height: 302.25px;
        .car-frame-image {
            max-width: 407.15px;
            max-height: 302.25px;
        }
    }

    .overlay {
        position: absolute;
        top: -32%;
        left: -13%;
        display: flex;
        align-items: center;
        pointer-events: none;
    }
    .donate-char {
        position: absolute;
        top: -37%;
        right: -25%;
        display: flex;
        align-items: center;
        pointer-events: none
    }

    .char-image {
        max-width: 1014px;
        max-height: 1297px;
    }


    .right {
        position: absolute;
        top: 8%;
        left: 35%;
        /*transform: translate(-50%, 0);*/
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 5vh;
        justify-content: center;

        .text-frame {
            display: flex;
            flex-direction: column;
            gap: 8vh;
            padding-top: 5%;
            h1 {
                color: #FFF;
                font-family: "Alfa Slab One", serif;
                font-size: 8.68vh;
                font-style: normal;
                font-weight: 400;
                line-height: 40px; /* 57.143% */
                text-transform: uppercase;

            }

            .big-title {
                color: #FFF;
                font-family: "Alfa Slab One", serif;
                font-size: 10vh;
                font-style: normal;
                font-weight: 400;
                line-height: 40px; /* 33.333% */
            }

            div {
                display: flex;
                flex-direction: column;
                gap: 4vh;
            }

        }
    }


    .main-title {
        font-family: 'Akrobat', sans-serif;
        font-style: normal;
        font-weight: 800;
        font-size: 7.5rem;
        line-height: 1.2;
        opacity: 150%;
        text-transform: uppercase;
        -webkit-text-stroke-color: #000;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) -39.29%, rgba(129, 129, 129, 0.50) 94.29%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 auto 0 -2%;
    }

    .main-txt {
        margin-bottom: 2rem;
    }
}


.action-button {
    background: var(--BL, linear-gradient(90deg, #3259DD 6.5%, #89A3FE 100%));
    padding: 0.75rem 2.1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1%;

    svg {
        margin-top: 1.5%;
    }

    span {
        color: #FFF;
        font-family: 'Akrobat', sans-serif;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}


.main-scroll-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 90% !important;
    gap: 0.4rem;
}

.main-scroll-block span {
    color: #FFF;
    text-align: center;
    font-family: 'Akrobat', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.character{
    margin-top: -45%;
}

.review-btn{
    font-family: 'Akrobat', sans-serif;
    color: #1D7FD9;
    background: #384055;
    box-shadow: inset 0 0 2px #000;
    border: 1px solid rgba(29, 127, 217, 20);
    margin-top: 6%;
}
.star-txt{
    width: 280px!important;
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.7);
    z-index: 5;

}

.star{
    width: 245px;
    height: 24px;
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #5AAFFC;
    text-shadow: 0 0 6px rgba(90, 175, 252, 0.9);
    flex: none;
    order: 0;
    flex-grow: 0;

}

.star-two{
    text-align: right;
}

.text-one{
    margin-top: 10% !important;
}

.text-two{
    text-align: right;
}
.promo-footer{
    position: absolute;
    bottom: 0;
}

.watch-btn{
    font-size: 22px;
    background: #1d7fd9;
    padding: 1.5rem 2.975rem 1.5rem 2.975rem;
    border: 1px solid rgb(255, 255, 255);
    margin-top: 7%;
    z-index: 1;
}

.watch-btn span{
    margin-left: 8px;
}

.watch-btn svg{
    margin-bottom: 4px;
}

.icon-logo{
    position: relative;
    left: 40%;
    top: 50%;
}



/*.line{*/
/*    !* line *!*/

/*    position: absolute;*/
/*    width: 1920px;*/
/*    height: 1px;*/
/*    left: 0px;*/
/*    top: 1326px;*/

/*    background: rgba(0, 0, 0, 0.1);*/

/*}*/


.padding-remove{
    padding: 0 !important;
}

.how{
    margin-top: 8%;
}

.steps{
    background: url("../img/back.png") no-repeat center center fixed;
    position: relative;
}

.chars-wrapper {
    background: url("../img/char02.png") right bottom 100% no-repeat,
    url("../img/char01.png") left top no-repeat;
    position: relative;
}


.span-ml{
    margin-left: 10px;
}

.svg-mb{
    margin-bottom: 4px;
}

.svg-mb8{
    margin-bottom: 8px;
}

.how h2{
    width: auto;
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: normal;
    text-transform: uppercase;
    color: white;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0;
}


.donate-title h2{
    width: auto;
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: normal;
    text-transform: uppercase;
    color: white;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0;
}
.step-title p{
    /* Мы вынуждены отталкиваться от того, что внедрение современных методик, а также свежий взгляд на привычные вещи — безусловно открывает новые горизонты для новых принципов формирования материально-технической и кадровой базы. */
    height: 4%;
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    /*font-size: 20px;*/
    font-size: calc(14px + (8 * 0.7) * (100vw / 1920));
    line-height: 24px;
    color: white;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.pre-step{
    margin: 0 0 0 1%;
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    padding-bottom: 20px;
}

.step-one{
    margin-left: 56%;
}

.step{
    width: 100%;
}

.h-txt{
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    text-transform: uppercase;
    padding-bottom: 20px;
    color: white;

}

.step-one h2{
    margin: 0 0 0 1%;
}

.pre-step-2{
    width: 340px;
}

.word-color{
    color: #1D7FD9;
}

.light-gray-text {
    color: rgba(255, 255, 255, 0.80);
}


.a-footer{
    text-decoration: none;
    color: #1d7fd9;
}

.li-footer li{
    margin-bottom: 1rem;
}
.li-footer{
    padding-left: 0!important;

}

.step-btn{
    font-family: 'Akrobat', sans-serif;
    color: white;
    border-radius: 10px;
    height: 60px;
    background: #1D7FD9;
    border: #1D7FD9;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    /*font-size: calc(16px + (12 * 0.7) * (100vw / 1920));*/
    line-height: 150%;
    padding: 0 19%;
    text-align: center;
    text-transform: uppercase;
}

.step-btn-2{
    margin: 0 0 0 -5%;
    background: #384055;
    border: #384055;
    white-space: nowrap;
}

.pre-step-2-1{
    margin: 0;
    text-align: right;

}

.step-two h2{
    text-align: right;
}

.step-two{
    width: 340px;
    margin-left: 40%;
}

.pre-step-2-2{
    width: 340px;
    color: white;
    padding-bottom: 30px;
    text-align: right !important;
}

.step-btn-3{
    width: 340px !important;
    margin-left: 3%;
}
.step-three{
    margin-left: 56%;
    padding-bottom: 15%;
}


.step-three h2{
    margin: 0 0 0 1%;
}

.pre-step-3-2{
    width: 340px;
    color: white;
    padding-bottom: 30px;
}

.step-btn-4{
    width: 340px !important;
    margin-left: 3%;
    background: #272D3C;
    border: #272D3C;
}

.block-position{
    margin-bottom: 8%;
}

.box{
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(56, 64, 85, 0.4);
    border-radius: 10px;

    width: calc(1/3*100% - 10px);
    margin: 0 0 4% 0;
}

.slider-discr{
    margin: 0!important;
}

.pic-hidden{
    overflow: hidden;
}
.about{
    min-height: 140vh;
    background: url("../img/back.png") no-repeat center center fixed;
}
.about-txt{
    font-family: 'Akrobat', serif;
    font-style: normal;
    font-weight: 700;
    font-size: calc(24px + 12 * (100vw / 1920));
    line-height: 43px;
    text-transform: uppercase;
    color: white;
}

.about-p{
    font-family: 'Roboto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: rgba(56, 64, 85, 0.8);
    width: 115%;
}

.about-txt-position{
    padding: 4% 0 0 6% !important;
}

.img-slider {
    display: block;
}

.img-padding img{
    padding: 3% 0 0 2%!important;
    margin-bottom: 0;
}

.spase{
    width: calc(1/3*100% - 10px);
}

.img-money{
    padding: 3% 0 0 2%!important;
}

.img-referral{
    padding: 3% 0 0 2%!important;
}


.social-block{
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    /*border: 1px solid rgba(56, 64, 85, 0.4);*/
    border-radius: 10px;
    background-color: #1d7fd9;
    width: calc(1/3*100% - 10px);
    /*margin: 0 0 3% 0;*/
}

.social-inner{
    /*margin: 7% 0 7% 7%;*/
    padding: 7% 0 0 6% !important;
}

.social-block-title{
    /* СООБЩЕСТВО ВКОНТАКТЕ */
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.vk{
    margin: 40% 10% 10% 10%;
}

.social-block-title-add{
    /* 100 000+ участников */
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.social-discord {
    background-color: #758BDB !important;
    margin-left: 2%;
}
.gun{
    padding-left: 3%;
}

.social-png{
    margin-left: 8%;
    transform: scale(1.3);
}

.footer{
    background: #000;
}

.footer-all
{
    margin-bottom: 10%;
}

.footer-tex{
    font-family: 'Roboto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: rgba(56, 64, 85, 0.50);
}

.footer-contact{
    width: 100%;
    height: 19px;
    font-family: 'Roboto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.blue-txt{
    font-family: 'Roboto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #1D7FD9;
}


.balance{
    transition: all 1s;
    min-height: 100vh;
    position: relative;
    background: url("../img/back.png") no-repeat 50%/cover;


}

.donate-page {
    background: url("../img/donate-back.jpg") no-repeat 50%/cover;
    transition: all 1s;
    min-height: 100vh;
    position: relative;
}

.bonus {
    position: relative;
    background: url("../img/back.png") no-repeat 50%/cover;
}
.couple{
    z-index: -1;
}

.balance-block {
    margin-top: -6%;
}
.balance-txt{
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    /*font-size: calc(50px + (14 * 0.7) * (100vw / 1920));*/
    line-height: 77px;
    text-transform: uppercase;
    color: #384055;
}

.balance-txt-two{
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    text-transform: uppercase;
    color: rgba(56, 64, 85, 0.50);
}

.castom-btn{
    white-space: nowrap;
    font-family: 'Akrobat', sans-serif!important;
    /*background: #1D7FD9!important;*/
    border: rgba(56, 64, 85, 0.4);
    font-weight: 700!important;
    font-size: calc(16px + (12 * 0.7) * (100vw / 1920))!important;
    padding: 10%!important;
    color: rgba(56, 64, 85, 0.50);
}

.castom-txt {
    color: rgba(56, 64, 85, 0.50);
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: white!important;
    background-color: #1D7FD9!important;

}
.btn-outline-primary {
    border-color: rgba(56, 64, 85, 0.4)!important;
    --bs-btn-color: #384055 !important;
}

.bonus-select-btn {
    border-radius: 10px;
    background: #384055;
    display: inline-flex;
    height: 76px;
    padding: 18px 30px;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    font-family: 'Akrobat', sans-serif;
    color: white;
    border: #1D7FD9;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
}

.bonus-select-btn-active {
    background: #1D7FD9;
}

.btn-blue{
    white-space: nowrap;
    font-family: 'Akrobat', sans-serif;
    background: #1D7FD9;
    border: #1D7FD9;
    font-weight: 700;
    font-size: calc(16px + (12 * 0.7) * (100vw / 1920));
    padding: 10% 30%;
}

.btn-white{
    font-family: 'Akrobat', sans-serif;
    background: #fff!important;
    --bs-btn-bg: white;
    border: #1D7FD9;
    font-weight: 700;
    font-size: calc(16px + (12 * 0.7) * (100vw / 1920));
    padding: 10% 30%;
    border: 1px solid rgba(56, 64, 85, 0.4);
    border-radius: 10px;
    text-transform: uppercase;
    color: #384055;
}

.label{
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 19px;
    /* identical to box height */
    text-align: center;
    color: rgba(56, 64, 85, 0.50);
    padding: 4% 0;
}

.light-label{
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 19px;
    /* identical to box height */
    text-align: center;
    color: white;
    padding: 4% 0;
}

.sum{
    font-size: 2.5rem!important;
}

.form-check-input{
    width: 1.5em!important;
    height: 1.5em!important;
    margin-top: 0!important;
}
.form-check-label{
    margin-left: 3%;
    color: rgba(56, 64, 85, 0.50);
}

.navigation {
    margin-top: 3.2vh !important;
}



    /*.navigation {*/
    /*    margin-top: 10vh;*/
    /*}*/

.add{
    padding: 5%;
    font-size: calc(22px + (14 * 0.7) * (100vw / 1920));
}

.need{
    width: 100%;
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    /*font-size: 16px;*/
    font-size: calc(16px + (8 * 0.7) * (100vw / 1920));
    line-height: 1em;
    bottom: 3%;
    color: rgba(56, 64, 85, 0.5);
    margin-top: 15%;
}

/*.balance-btn-nav{*/
/*    padding: 0, 10%;*/
/*}*/

.img-bg{
    opacity: 25%;
    transform: scale(1.4);
    margin-left: -18%;
}

.main-add{
    margin-top: 18%;
}

.add-h1{
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    /*font-size: 64px;*/
    font-size: calc(60px + (14 * 0.7) * (100vw / 1920));
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
    color: #384055;
}

.add-h2{
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    /*font-size: 36px;*/
    font-size: calc(32px + (16 * 0.7) * (100vw / 1920));
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
    color: rgba(56, 64, 85, 0.5);
}

.add-p{
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    /*font-size: 16px;*/
    font-size: calc(14px + (8 * 0.7) * (100vw / 1920));
    line-height: 1.5em;
    color: rgba(56, 64, 85, 0.7);
}
.add-btn{
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 5%;
}

/*========================================*/
/*              copy*/

.copy-pop{
    display: none;
    background: rgba(0, 0, 0, 0.69);
    padding: 2% 8%;
    border-radius: 10px;
    left: 180%;
    bottom: 101%;
}
/*.copy-pop span{*/
/*    text-transform: uppercase;*/
/*}*/


@media screen and (max-width: 1800px){
    .footer-man{
        display: none;
    }
    .block-around{
        display: flex;
        justify-content: space-around;
    }
}

@media screen and (max-width: 1400px){
    .character{
        margin-top: -80%;
    }

    .sides-txt{
        padding-bottom: 20%;
    }

    .img-padding img {
        padding: 8% 0 0 2%!important;
    }

}

@media screen and (max-width: 1200px){
    .social-discord{
        margin: 0;
    }
    .social-img img{
        width: 118%;
    }
}


@media screen and (max-width: 992px){
    .logo-add{
        width: 30%;
    }
    .logo-top{
        width: 30%;
    }
    .car-frame, .text-frame, .social-media-btns {
        display: none;
    }
    .img-bg{
        transform: scale(3.5);
        margin-left: 40%;
        margin-bottom: 60%;
        opacity: 15%;
    }
    .box{
        margin: 0;
    }
    .pic-slider img{
        margin: 3% 0;
    }
    .box-md{
        width: 30%!important;
    }
    .about-txt{
        font-size: calc(24px + (12 * 0.7) * (100vw / 1920));
        text-align: center;
        text-transform: uppercase;
        color: #272D3C;
    }
    .character{
        margin-top: -15%;
        margin-left: -20%;
    }
    .character img{
        transform: scale(2.3);
    }
    .star-txt{
        display: none;
    }
    .review-btn{
        height: 70%;
        width: 50%;
        font-size: 200%;
    }
    .watch-btn{
        width: 100%;
        font-size: 210%;
    }
    .icon-logo{
        display: none;
    }
    .nav-btn{
        width: 100%;
        font-size: 170%;
    }
    .logo-top{
        justify-content: left;
    }
    .add-btn{
        width: 90%;
        padding: 3%;
        font-size: 18px;
        margin: 0;
        display: flex;
        justify-content: center;
    }
    .bottom-part{
        position: absolute;
        bottom: 4%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        text-align: center;
    }
    .modal-dialog-centered{
        align-items: flex-end!important;

    }
    .balance-main-img{
        display: none;
    }
    .need{
        width: 100%;
        font-size: calc(24px + (8 * 0.7) * (100vw / 1920));
        line-height: 1.2em;
        position: relative;
        font-family: 'Rubik', serif;
        font-style: normal;
        font-weight: 400;
        color: rgba(56, 64, 85, 0.5);
       padding: 10% 2%;
    }
    .label{
        font-size: 20px;
    }
    .light-label{
        font-size: 20px;
    }
    .form-check-label{
        font-size: 32px;
    }
    .form-check-input{
            width: 2.5em!important;
            height: 2.5em!important;
            margin-top: 1%!important;
    }
    .footer-tex{
        font-size: 22px;
        line-height: 1.2em;
        color: rgba(56, 64, 85, 0.50);
    }
}

@media screen and (max-width: 768px){
    .step-title{
        align-items: center;
    }
    .step-title p{
        width: 90%;
        text-align: justify;
    }
    .review-btn{
        width: 70%;
    }
    .watch-btn{
        width: 100%;
        font-size: 210%;
    }
    .nav-btn {
        font-size: 140%;
    }
    .add-h1{
        font-size: calc(58px + (14 * 0.7) * (100vw / 1920));
        line-height: 1.5em;
        margin: 0;
    }
    .form-check-label{
        font-size: 24px;
        margin-top: 7px;
    }
}

@media screen and (max-width: 576px){
    .fix-size{
        margin-top: 5%!important;
    }
    .about-txt{
        font-size: 3vh;
        line-height: 1.5;
    }
    .box-md{
        width: 30%!important;
    }
    .nav-btn {
        font-size: 130%;
    }
    .watch-btn{
        font-size: 180%;
    }
    .add-p{
        font-size: calc(16px + (8 * 0.7) * (100vw / 1920));
    }
    .add-h1{
        font-size: calc(50px + (14 * 0.7) * (100vw / 1920));
    }
    .main-add{
        margin-top: 50%;
    }



}

@media screen and (max-width: 492px){
    .nav-btn {
        font-size: 90%;
    }
    .watch-btn{
        font-size: 130%;
    }
    .review-btn{
        font-size: 120%;
    }
    .add-p{
        font-size: calc(14px + (8 * 0.7) * (100vw / 1920));
    }
    .add-h2 {
        font-size: calc(26px + (16 * 0.7) * (100vw / 1920));
    }
    .add-h1{
        font-size: calc(38px + (14 * 0.7) * (100vw / 1920));
        line-height: 1.5em;
    }
    .form-check-label{
        font-size: 18px;
    }
    .need{
        font-size: calc(14px + (8 * 0.7) * (100vw / 1920));
    }
}

@media screen and (max-width: 380px){
    .nav-btn {
        font-size: 80%;
    }
    .watch-btn{
        font-size: 100%;
    }
    .review-btn{
        font-size: 120%;
    }
    .add-h1{
        font-size: calc(32px + (14 * 0.7) * (100vw / 1920));
    }
    .form-check-input{
        width: 1.5em!important;
        height: 1.5em!important;
        margin-top: 0!important;
    }
}

/*======================================*/

.ellipse-one{
    box-sizing: border-box;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 660px;
    top: 271px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid rgba(0, 0, 0, 0.2);
}

.ellipse-two{
    box-sizing: border-box;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 660px;
    top: 592px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid rgba(0, 0, 0, 0.2);
}

.ellipse-three{
    box-sizing: border-box;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 660px;
    top: 913px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid rgba(0, 0, 0, 0.2);
}
.line {
    position: absolute;
    width: 620px; /* New width decreased */
    height: 2px;
    left: calc(162px + 118.5px + (800px - 620px) / 2); /* Adjust left position to keep the line centered */
    top: 600px;
    background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    transform: rotate(90deg);
}

@media screen and (max-width: 1400px){
    .ellipse-one{
        left: 588px;
    }

    .ellipse-two{
        left: 588px;
    }

    .ellipse-three{
        left: 588px;
    }

    .line{
        left: 90px;
    }

}


@media screen and (max-width: 1200px){
    .step{
        width: 50%;
    }
   .step-one{
        margin-left: 0;
        width: 100%;
    }

    .step-title p{
        width: 100%;
    }

    .pre-step{
        width: 100%;
        text-align: center;
    }

    .h-txt{
        width: 100%;
        text-align: center;
    }


    .step-two h2{
        text-align: center;
    }

    .step-one h2{
        margin: 0 0 0 1%;
        width: 100%;
        text-align: center;
    }

    .pre-step-2{
        width: 100%;
        text-align: center;
    }

    .word-color{
        color: #1D7FD9;
    }

    .step-btn{
        margin: 0;
        height: 80px;
        width: 98%;
        padding: 0;
    }

    .step-btn-2{
        margin: 0;
        background: #384055;
        border: #384055;
    }

    .pre-step-2-1{
        margin: 0;
        text-align: center;

    }

    .step-two{
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    .pre-step-2-2{
        width: 100%;
        color: #272D3C;
        padding-bottom: 30px;
        text-align: center!important;
    }

    .step-btn-three{
        display: flex;
        justify-content: center;
    }

    .step-btn-3{
        /*width: 50%!important;*/
        margin-left: 0;
    }

    .step-three{
        margin-left: 0;
        width: 98%;
        padding-bottom: 5%;
    }

    .step-three h2{
        margin: 0 0 0 1%;
    }

    .pre-step-3-2{
        width: 100%;
        color: #272D3C;
        padding-bottom: 30px;
    }

    .step-btn-4{

        width: 50% !important;
        background: #272D3C;
        border: #272D3C;
    }

    .stick{
        display: none;
    }

    .copy-pop{
        padding: 1% 4%;
        border-radius: 10px;
        left: 66%;
        bottom: 101%;
    }

}


@media screen and (max-width: 992px){
    .step-title p{
        width: 100%;
    }

    .pre-step{
        width: 100%;
        text-align: center;
    }

    .h-txt{
        width: 100%;
        text-align: center;
    }

    .step-one h2{
        margin: 0 0 0 1%;
        width: 100%;
        text-align: center;
    }

    .pre-step-2{
        width: 100%;
        text-align: center;
    }

    .word-color{
        color: #1D7FD9;
    }

    .step-btn{
        margin: 0;

        width: 98%;
    }

    .step-btn-2{
        margin: 0;
        background: #384055;
        border: #384055;
    }

    .pre-step-2-1{
        margin: 0;
        text-align: center;

    }


    .step-two{
        width: 100%;
        margin-left: 0;
    }

    .pre-step-2-2{
        width: 100%;
        color: #272D3C;
        padding-bottom: 30px;
        text-align: center!important;
    }

    .step-btn-3{
        /*width: 100%!important;*/
        margin-left: 0;

    }

    .step-three{
        margin-left: 0;
        width: 98%;
        padding-bottom: 5%;
    }

    .step-three h2{
        margin: 0 0 0 1%;
    }

    .pre-step-3-2{
        width: 100%;
        color: #272D3C;
        padding-bottom: 30px;
    }

    .step-btn-4{
        width: 100% !important;
        margin-left: 0;
        background: #272D3C;
        border: #272D3C;
    }

}

@media screen and (max-width: 768px){
    .about-txt{
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        line-height: 24px;
    }
    .about-txt-position {
        padding: 14% 0 9% 3% !important;
    }

}

/*@media screen and (max-width: 576px){*/
/*    .about-txt{*/
/*        font-style: normal;*/
/*        font-weight: 400;*/
/*        font-size: 22px;*/
/*        line-height: 24px;*/
/*    }*/
/*    .about-txt-position {*/
/*        padding: 14% 0 9% 3% !important;*/
/*    }*/
/*}*/

@media screen and (max-width: 467px){
    .about-txt{
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;

    }
    .about-txt-position {
        padding: 14% 0 9% 3% !important;
    }
}


/*=============================================*/

/*Modal*/

.modal-content{
    background-color: #384055!important;
    padding: 8%;
    height: auto;
    border-radius: 10px;
}

.form-control-modal{
    background-color: #262B39!important;
    border: #262B39!important;
    padding: 1.375rem 1.75rem!important;
    border-radius: 10px!important;
    font-size: 24px!important;
}

.modal{
    --bs-modal-width: 480px!important;
}

.modal-h1{
    text-transform: uppercase;
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px!important;
}
.modal-description{
    padding: 3% 0;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400!important;
    font-size: 16px;
    line-height: 19px;
    color: rgba(255, 255, 255, 0.8)!important;
}
.modal-inputs{
    width: 1.5em!important;
    height: 1.5em!important;
}

.label-modal{
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px!important;
    line-height: 19px!important;
    color: rgba(255, 255, 255, 0.5)!important;
    margin-bottom: 8px;
}

.label-modal-sm{
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px!important;
    line-height: 19px!important;
    color: rgba(255, 255, 255, 0.5)!important;
    margin-bottom: 5px;
}

.btn-modal{
    font-family: 'Akrobat', sans-serif!important;
    font-style: normal;
    font-weight: 700!important;
    font-size: 24px!important;
    line-height: 29px!important;
    text-transform: uppercase;
    color: #FFFFFF;
    --bs-btn-padding-y: 1.375rem!important;
    background-color: #1D7FD9!important;
    width: 100%;
    height: 70px;
    border-radius: 10px;

}
.icon-parent{
    position: relative;
}

.password-icon{
    /* icons */
    margin: 0 auto;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 80%;
    right: 4.17%;
    top: 55%;
    bottom: 18.75%;
}

.password-icon-reg{
    margin-right: 10px;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 85%;
    right: 4.17%;
    top: 55%;
    bottom: 18.75%;
}


.password-icon-reg-2{
    /*margin-right: 10px;*/
    margin: 0 auto;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 85%;
    right: 4.17%;
    top: 55%;
    bottom: 18.75%;
}



input::placeholder {
    font-family: 'Akrobat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px!important;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.3)!important;
}


.modal-back{
    position: relative;
    background: url('../img/characters-couple-white.png') no-repeat 100%/cover;
}
.pic-slider {
    position: relative;
}

.pic-slider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* This will ensure the image doesn't overflow the parent div */
}

.brighter-image {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover; /* This will ensure the aspect ratio of the image is maintained */
    z-index: 999;
}

.invite-referral {
    left: 40%;
}

.down-img-referral {
    margin-left: -40%;
}

.pic-slider img{
    object-fit: cover;
    margin-left: 1%;
    border-radius: 10px;
    /*border: 1px solid rgba(56, 64, 85, 0.4);*/
}

.solder h2 {
    width: 110%;
}
.compare p {
    width: 65%;
}
/*SLIDER*/

.slider-gradient::before{
    content: '';
    z-index: 10;
    margin-left: 1%;
    width: 96.5%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    position: absolute;
    background: linear-gradient(360deg, rgba(56, 64, 85, 0.8) 0%, rgba(56, 64, 85, 0) 100%);
    padding: 3% 0 0 2%!important;
    margin-bottom: 0;
    border-radius: 10px;
}

.slider-txt{
    padding: 10%;
    bottom: 0;
    z-index: 10;
}

.slider-txt h2{
    font-family: 'Akrobat', serif;
    font-style: normal;
    font-weight: 700;
    font-size: calc(24px + 12 * (100vw / 1920));
    line-height: 43px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.slider-txt p{
    font-family: 'Roboto', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    /*font-size: calc(12px + (8 * 0.7) * (100vw / 1920));*/
    line-height: 19px;
    /*color: rgba(56, 64, 85, 0.8);*/
    color: rgba(255, 255, 255, 0.8);
}

.active-slider{
    background: #1D7FD9!important;
}

.active-slider>.row>.about-txt-position h2{
    color: #FFFFFF;
    font-family: 'Akrobat', sans-serif;
}
.active-slider>.row>.about-txt-position p{
    color: #FFFFFF;
    color: rgba(255, 255, 255, 0.8);
}

.img-mir{
    padding: 2%!important;
    max-width: 60px;
    width: 100%;
    vertical-align: 0;
}

@media screen and (max-width: 1400px){
    .slider-gradient::before{
        width: 96%;
    }
    /*.password-icon-reg{*/
    /*    left: 25%;*/
    /*}*/
    /*.password-icon-reg-2{*/
    /*    left: 25%;*/
    /*}*/
}

@media screen and (max-width: 1200px){
    .slider-gradient::before{
        width: 95%;
    }
}

@media screen and (max-width: 992px){
    .slider-gradient::before{
        width: 96.8%;
        margin-left: 0;
        height: 97.5%;
    }
}

@media screen and (max-width: 768px){
    .slider-gradient::before{
        width: 95.5%;
    }


}

@media screen and (max-width: 576px){
    .slider-gradient::before{
        width: 95.6%;
    }
}

@media screen and (max-width: 492px){
    .slider-gradient::before{
        width: 94.8%;
    }
}
@media screen and (max-width: 420px){
    .img-mir{
        padding: 4%!important;
    }
}

@media screen and (max-width: 390px){
    .slider-gradient::before{
        width: 93.8%;
    }
    .img-mir{
        padding: 6%!important;
    }
}

a{
    text-decoration: none!important;
}
.course{
    font-size: 21px!important;
}
/*.fee{*/
/*    display: block;*/
/*}*/

.table_block {
    border-radius: 10px;

    border: 1px solid #000;
    display: block;
}

.white-bonus{
    margin-bottom: 8%;
}

.rules{
    width: 100%;
    font-family: 'Rubik', serif;
    font-style: normal;
    font-weight: 400;
    /*font-size: 16px;*/
    font-size: calc(16px + (8 * 0.7) * (100vw / 1920));
    line-height: 1em;
    bottom: 3%;
    color: rgba(56, 64, 85, 0.5);
    /*margin-top: 15%;*/
}

/*.select-income{*/
/*    margin-bottom: 51%;*/
/*}*/

.income{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.up{
    align-content: flex-start;
}

/*.str{*/
/*    align-items: stretch;*/
/*}*/

.friend{
    margin-left: 45px;
}

@media screen and (max-width: 1200px){
    .friend{
        margin-left: 0;
    }
}

.dataTables_paginate a{
    color: #232d2d !important;
}

.slider-bonus{
    display: block;
}


.pc-invisible {
    display: none !important;
}
@media screen and (max-width: 420px){
    .slider-bonus{
        display: none;
    }
}

.label-bonus{
    height: 50%;
}

.btn-bonus{
    padding: 0 20px !important;
}

.slider-bonus-img{
    margin: 0;
}

@media screen and (max-width: 992px){
    .slider-bonus-img img {
        margin: 1.8% 0 !important;
    }
}

.custom-select {
    text-align: center;
    font-size: calc(12px + (12 * 0.7) * (100vw / 1920)) !important;
    border: 1px solid #1d7fd9;
    border-radius: 10px;
    color: #1d7fd9;
}
/*.pic-slider2 img{*/
/*    object-fit: cover;*/
/*    margin-left: 1%;*/
/*    min-width: 100%;*/
/*    border-radius: 10px;*/
/*    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));*/
/*}*/

/*@media screen and (max-width: 992px){*/
/*    .pic-slider2 img {*/
/*        margin-top: 2%;*/
/*        margin-left: 0%;*/
/*    }*/

/*}*/

.main-actions {
    display: flex;
}
.pc-invisible-flex {
    display: flex;
}
.action-button-mobile {
    display: none !important;
}
.overlay-mobile {
    display: none !important;
}

.mobile-container {
    display: none;
}


@media screen and (max-width: 768px) {
    .about {
        display: none !important;
    }

    .support-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;

        button {
            border-radius: 10px;
            background: linear-gradient(90deg, #3259DD 6.5%, #89A3FE 100%);

            color: #FFF;
            font-family: "Alfa Slab One";
            font-size: 30px;
            font-style: normal;
            font-weight: 400;
            line-height: 40px; /* 133.333% */
            padding: 0.325rem 2rem;
        }

        svg {
            position: absolute;
            left: 62%;
            top: -1%;
        }

    }

    .action-button-pc {
        display: none !important;
    }
    .action-button-mobile {
        display: flex !important;
    }

    .right {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .mobile-big-title {
        color: #FFF;
        font-family: "Alfa Slab One", serif;
        font-size: 9.5vh;
        font-style: normal;
        font-weight: 400;
        line-height: 40px; /* 50% */
        margin-top: 4vh;
    }

    .steps-title {
        font-size: 2.5rem !important;
    }

    .h-txt{
        font-size: 1.8rem !important;
    }

    .mobile-invisible {
        display: none !important;
    }
    .mobile-container {
        display: flex;
        flex-direction: column;
    }

    .main-actions {
        display: none !important;
    }

    .mobile-center {
        justify-content: center !important;
        align-items: center !important;
    }

    .main-title {
        text-align: center;
        font-family: Aclonica;
        font-size: 3rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        background: linear-gradient(180deg, #FFF -39.29%, #818181 94.29%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
    }

    .mobile-container {
        text-align: center;
        width: 80%;
    }
    .main-txt {
        font-size: 1rem;
        line-height: 20px;
        /*margin-left: 10%;*/

    }

    .promo {
        min-height: 120vh;

        background: url("../img/mobile-main-back.png") no-repeat center center fixed;
    }

    .pc-invisible-flex {
        display: flex !important;
    }

    .overlay-pc {
        display: none !important;
    }

    .overlay-mobile {
        display: block !important;
    }
    .overlay-mobile-1 {
        position: absolute;
        top: 11%;
        left: 47.85%;
        transform: translate(-50%, 0);
        align-items: center;
        pointer-events: none;
    }

    .overlay-mobile-2 {
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translate(-50%, 0);
        align-items: center;
        svg {
            max-width: 280px;
            max-height: 178px;
        }
    }



    .horizontal-line, .crosshair, .vertical-line, .vertical-line-addition {
        display: none !important;
    }

    .action-button-block {
        width: 100%;
    }
    .action-button-mobile {
        border-radius: 10px;
        border: 1px solid #FFF;
        width: 100%;
        background: #1D7FD9;
        padding: 0.325rem 1.05rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem;

        svg {
            margin-top: 1.5%;
        }

        span {
            color: #FFF;
            font-family: 'Akrobat', sans-serif;
            font-size: 1.5rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
    }


    .right {
        width: 100%;
        margin-top: 1.5vh;
    }
    .main-scroll-block {
        display: none !important;
    }
    .char-image {
        margin-top: 0;
    }

    .navigation {
        margin-left: 0 !important;
    }

    .main-title-pc, .main-txt-pc {
        display: none;
    }
}