@font-face {font-family: "Mont-Bold"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype");}
@font-face {font-family: "Mont-Regular"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype");}
@font-face {font-family: "Mont-Medium"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype");}
@font-face {font-family: "Mont-Semi-Bold"; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");}
@font-face {font-family: "Mont-light"; src: url("../fonts/Montserrat-light.ttf") format("truetype");}
@font-face {font-family: "Mont-thin"; src: url("../fonts/Montserrat-Thin.ttf") format("truetype");}
@font-face {font-family: "Poppins-Medium"; src: url("../fonts/Poppins-Medium.ttf") format("truetype");}

body{width: 100%;display: flex; flex-direction: column; 
    /* background: linear-gradient(to bottom, #202020 0%, #000000 100%); */
    background: #0F0F0F;
    align-items: center;}
*{margin: 0; padding: 0;}
a { text-decoration: none; } 
button:hover{background: #E65200;cursor: pointer;}

/* section{overflow: hidden;} */
footer{overflow: hidden;}

.hide-menu{
    width: 60%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: start;
    color: white;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.hide-menu.show{
    transform: translateX(0%);
}

.close-menu-btn{
    width: fit-content;
    height: fit-content;
    /* aspect-ratio: 1/1; */
    margin-left: auto;
    margin-right: 5%;
    color: white;
    background: transparent;
    border: none;
    font-size: 5vw;
}

.menu-text{
    margin-left: 10%;
    margin-top: 15%;
    margin-bottom: 10%;
    font-family: "Mont-Bold";
    font-size: 10vw;
}

.hide-menu a{
    margin-left: 10%;
    color: white;
    font-family: "Mont-Medium";
    font-size: 5vw;
    margin-bottom: 5%;
}

header{
    width: 60%;
    /* border: 1px solid red; */
    height: fit-content;
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    min-width: 1160px;
    z-index: 1000;
    /* border: 1px solid red; */
}

.burger{
    display: none;
    display: flex;
    height: fit-content;
    flex-direction: column;
    align-items: end;
    width: fit-content;
    gap: 10px;
    /* background: red; */
    margin-left: auto;
    display: none;
}

.burger-big{
    width: 53px;
    height: 4px;
    background: white;
    border-radius: 20px;
}

.burger-small{
    width: 38px;
    height: 4px;
    background: white;
    border-radius: 20px;
}

.header-logo{
    width: 6%;
    aspect-ratio: 77/86;
}

.header-logo-text{
    width: fit-content;
    font-family: "Mont-Light";
    font-size: 16px;
    color: white;
    margin-left: 3%;
    display: none;
}

.nav-menu{
    width: 60%;
    aspect-ratio: 697/50;
    background: linear-gradient(-45deg, #000000 10%, rgba(96, 96, 96, 0.21) 100%);
    border-radius: 318px;
    border: 1px solid rgba(113, 113, 113, 0.5);
    margin-left: auto;
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 4%;
}

.nav-btn{
    width: fit-content;
    font-family: "Mont-Regular";
    font-size: 16px;
    text-decoration: none;
    color: white;
    /* border: 1px solid red; */
    padding: 1% 3%;
    border-radius: 20px;
    background: transparent;
    transition: color 0.5s ease, background 10s ease;
}

.nav-btn.active, .nav-btn:hover{
    background: linear-gradient(135deg, #FF5D04 0%, #FF9E68 100%);
    color: black;
}

.main-screen{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    overflow: hidden;
}

.field-img{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.main-screen-content{
    width: 80%;
    aspect-ratio: 1160/600;
    /* border: 1px solid red; */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1160px;
    max-width: 1700px;
    display: flex;
}

.big-bear{
    width: 60%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(-20%) translateY(15%);

}


.iphone-main{
    width: 25%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(-20%);
}

.main-text-div{
    width: 40%;
    /* border: 1px solid yellow; */
    display: flex;
    flex-direction: column;
    color: white;
    gap: 20px;
    position: absolute;
    bottom: 10%;
}

.main-screen-content-mobile{
    display: none;
}

.main-text-div-sub{
    width: fit-content;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(50, 50, 50, 1) 10%, rgba(0, 0, 0, 1) 100%);
    justify-content: center;
    align-items: start;
    padding: 20px 10px;
    border-radius: 26px;
}

.main-screen-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #060709 0%, rgba(0, 0, 0, 0) 100%);
}

.btn-bot{
    width: 40%;
    aspect-ratio: 242/61;
    border: none;
    background: #FF5D04;
    border-radius: 10px 30px 30px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    font-family: "Mont-Medium";
}


.main-text-div-name{
    font-family: "Mont-Bold";
    font-size: 32px;
}

.main-text-div-text{
    font-family: "Mont-Light";
    font-size: 26px;
}

.main-text-div-text.mobile{
    display: none;
}

.main-text-div-position{
    font-family: "Mont-Bold";
    font-size: 26px;
}

.other-screen{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #E6E6E6;
}

.about-div{
    margin-top: 150px;
    width: 80%;
    aspect-ratio: 1657/500;
    background: linear-gradient(135deg, #393939 5%, #000000 100%);
    border-radius: 26px;
    min-width: 1160px;
    display: flex;
    position: relative;
    align-items: center;
    z-index: 1;
}

.money-img-desctop{
    position: absolute;
    width: 50%;
    bottom: 0;
    left: 0;
    transform: translateY(25%);
}

.about-content{
    display: flex;
    height: fit-content;
    flex-direction: column;
    width: 50%;
    margin-left: auto;
    margin-right: 5%;
    /* border: 1px solid red; */
    color: white;
    gap: 20px;
    
}

.about-content-name{
    font-size: clamp(32px, calc(2.08vw + -7.9px), 52px);
    font-family: "Mont-Bold";
}

.about-content-text{
    font-size: clamp(28px, calc(2.08vw + -7.9px), 32px);
    font-family: "Mont-Regular";
}

.shadow{
    width: 60%;
    height: 50px;
    opacity: 0.80;
    background: black; 
    box-shadow: 79.16000366210938px 79.16000366210938px 79.16000366210938px; 
    border-radius: 2.67px;
    filter: blur(39.58px);
    position: relative;
    z-index: 0;
    margin-top: -50px;
}









.rule-div{
    margin-top: 100px;
    width: 80%; 
    min-width: 1160px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 42px;
}

.rule{
    aspect-ratio: 810/298;
    background: white;
    border-radius: 26px;
    box-shadow: 26.67px 40px 66px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    justify-content: center;
}

.how-text{
    font-size: 52px;
    font-family: "Mont-Bold";
    margin-top: 150px;
}

.rule-string{
    width: 80%;
    color: black;   
}

.rule-number{
    font-size: 52px;
    font-family: "Mont-Bold";
}

.rule-name{
    font-size: 28px;
    font-family: "Mont-Bold";
}

.rule-text{
    font-size: 28px;
    font-family: "Mont-Regular";
}

.end-screen{
    width: 100%;
    background: rgb(230, 230, 230);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #E6E6E6 0%, #E6E6E6 40%, black 100%);
}

.end-screen-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottob, rgba(230, 230, 230, 1) 28%, rgba(58, 58, 58, 1) 64%, rgba(16, 16, 16, 1) 100%);
    z-index: 1;
}

.end-div-content{
    width: 86%;
    min-width: 1160px;
    /* border: 1px solid red; */
    margin-top: 100px;
    display: flex;
    height: fit-content;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.end-div-content-div{
    width: 60%;
    display: flex;
    flex-direction: column;
}

.end-div-content-mobile{
    display: none;
}

.end-div-conten-btn{
    width: 40%;
    aspect-ratio: 610/100;
    min-width: 200px;
    margin-top: 44px;
    border-radius: 10px 30px 30px 10px;
    background: #FF5D04;
    border: none;
    color: white;
    box-shadow: 18px 37px 44px rgba(0, 0, 0, 0.61);
}

.end-div-conten-btn-end{
    width: 25%;
    aspect-ratio: 286/61;
    min-width: 200px;
    margin-top: 44px;
    border-radius: 10px 30px 30px 10px;
    background: #FF5D04;
    border: none;
    color: white;
    box-shadow: 18px 37px 44px rgba(0, 0, 0, 0.61);
    font-size: 16px;
}

.end-board{
    width: 86%;
    min-width: 1160px;
    background: linear-gradient(135deg, #393939 5%, #000000 100%);
    aspect-ratio: 1657/321;
    border-radius: 13px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 2;
}

.end-board-string{display: flex; justify-content: center; text-align: center; height: fit-content;}

.end-board-string img{height: 100%;}

.rule-text.end{
    width: 55%;
    min-width: 884px;
}

.end-board-name{
    min-width: 964px;
    font-family: "Mont-Bold";
    font-size: 66px;   
}

.rule-number.end{
    text-align: center;
}

.orange-circle{
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: linear-gradient(151deg, #FF5D04 0%, #451710 100%);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    transform: translateX(-30%) translateY(20%);
}

.money-img-mobile{display: none;}

.end-text-block{
    width: 80%;
    background: linear-gradient(135deg, #393939 5%, #000000 100%);
    position: relative;
    z-index: 1;
    border-radius: 13px;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-bottom: 50px;
    padding-top: 50px;
    min-width: 1160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.mobile-empty{display: none;}

.end-text-block-name{
    width: 100%;
    text-align: center;
    font-family: "Mont-Bold";
    font-size: 58px;
}

.end-text-block-sub{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Mont-Regular";
    font-size: 28px;
    text-align: center;
    position: relative;
    gap: 5%;
}

.end-text-block-sub-text{
    width: 60%;
    height: fit-content;
}

.end-text-block-sub-img{
    width: 5%;
    aspect-ratio: 1/1;
    position: relative;
    /* border: 1px solid red; */
}

.end-text-block-sub-img img{
    width: 100%;
    height: 100%;
}







footer{
    
    width: 100%;
    display: flex;
    /* height: 400px; */
    justify-content: center;
}

.footer-div{
    margin-top: 60px;
    /* border: 1px solid green; */
    width: 60%;
    min-width: 1160px;
    display: flex;
    flex-direction: column;
}

.footer-menu {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    padding-bottom: 31px;
}

.footer-menu-row {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.footer-menu a {
    color: rgba(239, 239, 239, 1);
    font-size: 15px;
    font-family: "Mont-Regular";
    text-decoration: none;
}

.footer-info {
    display: grid;
    grid-template-columns: 1fr 10% 1fr;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 125px;
    /* border: 1px solid red; */
    margin-top: 31px;
    margin-bottom: 31px;
}

.footer-info-mobile{
    display: none;
}

.footer-info-content{
    /* border: 1px solid orange; */
    position: absolute;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-family: "Mont-Regular";
    color: white;
    height: fit-content;
}

.footer-info-content.start{left: 0;opacity: 0.75;}
.footer-info-content.center{left: 50%;transform: translateX(-50%);width: 9%;}
.footer-info-content.end{right: 0;}

@media (max-width: 1440px){
    header{width: 80%;min-width: 824px;}
    .nav-btn{font-size: clamp(11px, 1.0vw + 0.01px, 16px);}
    .header-logo-text{font-size: clamp(11px, 1.0vw + 0.01px, 16px);}

    .main-screen-content{min-width: 774px;}
    /* .main-screen{aspect-ratio: 1023/717;} */
    .main-text-div-name{font-size: clamp(21px, calc(1.2vw + 6px), 32px);}
    .main-text-div-text, .main-text-div-position{font-size: clamp(17px, calc(1vw + 6px), 26px);}

    .about-div{min-width: 745px;}
    .about-content-name{font-size: clamp(22px, calc(1.25vw + 5px), 32px);}
    .about-content-text{font-size: clamp(14px, calc(3.37vw - 20px), 28px);}
    
    .how-text{font-size: clamp(44px, calc(4.58vw - 22px), 66px);}

    .rule-number{font-size: clamp(45px, calc(4.58vw - 22px), 66px);}
    .rule-name{font-size: clamp(22px, calc(1.25vw + 5px), 32px);}
    .rule-text{font-size: clamp(22px, calc(1.25vw + 5px), 32px);}

    .rule-div{grid-template-columns: repeat(1, 1fr); min-width: 760px;}
    .rule{min-width: 774px; aspect-ratio: 774/200;}

    .orange-circle{min-width: 635px;}
    .end-div-content{min-width: 745px;}

    .end-board{min-width: 750px;}
    .end-board-string img{
        width: 5%;
    }

    .end-text-block-sub{gap: 1%;}
    .end-text-block-name{font-size: clamp(34px, calc(4.58vw - 22px), 58px);}
    .end-text-block-sub{font-size: clamp(22px, calc(1.25vw + 5px), 28px);}
    .end-text-block{min-width: 750px; width: 80%; }

    .footer-div{width: 80%;min-width: 824px;}
    .footer-info{font-size: clamp(9px, 1.2vw + 0.5px, 14px);}
    .footer-menu{font-size: clamp(11px, 1vw + 3px, 15px);}
}

@media (max-width: 900px){
    header{margin-top: 30px; min-width: 320px;}
    .header-logo{width: 21%;}
    .header-logo-text{display: none;}
    .nav-menu{display: none;}
    .burger{display: flex;}

    .end-div-content img{width: 40%;}
    /* .orange-circle{min-width: 400px;} */

    

    .big-bear{display: none;}
    .field-img{top: auto;bottom: 0;}
    /* .main-screen{aspect-ratio: 768/1005;} */
    .main-screen{padding-top: 400px;}
    .main-screen-mask{background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3)100%);}
    .main-screen-content{min-width: 640px; aspect-ratio: auto; padding-bottom: 400px;}
    .main-text-div{width: 55%; bottom: 10%;}
    .main-text-div-name{font-size: 38px; width: 100%;}
    .main-text-div-text, .main-text-div-position{font-size: 20px; width: 100%;}
    .main-text-div-sub{width: 100%;}
    .btn-bot{width: 100%; aspect-ratio: 350/60;}
    .iphone-main{width: 45%; transform: translateX(20%);}

    .about-div{min-width: 681px; width: 88%; align-items: start; position: relative; margin-top: 50px;}
    .about-content-name{font-size: 32px;}
    .about-content-name.main{display: none;}
    .about-content-text{font-size: 22px;}
    .about-content{width: 70%; margin-right: auto; margin-top: 80px; gap: 50px;}
    .money-img-desctop{display: none;}
    .money-img-mobile{display: flex; width: 100%; bottom: -29%; position: absolute; transform: translateX(-5%);}
    .how-text{font-size: 38px; margin-top: 150px;}

    .mobile-empty{display: flex; width: 50%;aspect-ratio: 506/954;}

    .rule-number{font-size: 45px;}
    .rule-name{font-size: 22px;}
    .rule-text{font-size: 22px;}

    .rule-div{grid-template-columns: repeat(1, 1fr); min-width: 678px;}
    .rule{min-width: 678px; aspect-ratio: 774/200;}

    .end-board{min-width: 678px; width: 88%; aspect-ratio: 678/303;}

    .end-board-string{
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .end-board-string img{
        width: 5%;
        margin-top: 20px;
    }

    .end-text-block{width:85%;}
    .end-text-block-sub{flex-direction: column; gap: 30px;}
    .end-text-block-sub-text{width: 100%;}
    .end-text-block-sub-img{width: 10%; min-width: 51px;}

    .footer-div{min-width: 640px;}
    .footer-menu{flex-direction: column; font-size: 30px; margin-top: 28px;}
    footer{background: black;}
    .footer-info{display: none;}
    .footer-info-mobile{display: flex;height: fit-content;width: 100%;align-items: center;margin-bottom: 100px;margin-top: 21px;gap: 30px;}
    .footer-info-content-img{width: 142px;aspect-ratio: 142/159;}
    .footer-info-content-rekv{flex: 1;display: flex;flex-direction: column;justify-content: end;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";margin-left: 20px;}
    .footer-info-content-prav{width: 35%;display: flex;flex-direction: column;justify-content: end;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";margin-left: 30px;}
    .footer-info-content-prav span{width: fit-content;}
}

@media (max-width: 768px){
    header{min-width: 310px;}
    .header-logo{min-width: 80px;}
    .burger{min-width: 53px;}

    .main-screen{padding-top: 0; align-items: center; height: fit-content; min-height: none; aspect-ratio: auto;}
    .main-screen-content.desctop{display: none;}
    .main-screen-content-mobile{width: 90%; position: relative; margin-top: 200px; margin-left: auto; margin-right: auto; color: white; display: flex;
        flex-direction: column; align-items: center;             
    }
    .iphone-mobile{width: 60%;height: auto;margin-top: 50px; transform: translateX(7%) translateY(10%); z-index: 1;}

    .main-text-div-sub{width: 80%; margin-top: -80px; z-index: 2;}
    .main-text-div-position{font-size: 4vw;}
    .main-text-div-text{margin-top: 50px;}
    .btn-bot{margin-top: 20px; margin-bottom: 10px;}

    .about-div{min-width: 310px; width: 91%; aspect-ratio: 358/500; align-items: start;}

    .rule-div{min-width: 310px; width: 91%;}
    .rule{min-width: 310px; aspect-ratio: 358/240;}

    .money-img-mobile{bottom: -15%;}

    .end-div-content{display: none;}
    .end-div-content img{ width: 50%; min-width: 310px;}
    .end-screen{background: linear-gradient(to bottom, #E6E6E6 0%, black 70%);}
    .how-text{text-align: center;}
    .end-div-content-mobile{display: flex; width: 100%; flex-direction: column; align-items: center;}
    .end-div-content-mobile-image{position: relative; z-index: 1; width: 80%; transform: translateX(10%); margin-top: 50px; min-width: 320px;}
    .orange-circle{
        top: 70px;
        left: 50vw;
        transform: translateX(-50%);
    }
    .phone-with-orange{
        height: fit-content;
        width: 100%;
        /* background: red; */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
    }

    .phone-with-orange img{
        transform: translateX(10%);
    }
    .rule-name.end{font-size: 4vw;}

    .cirle{
        width: 170%;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: linear-gradient(151deg, #FF5D04 0%, #451710 100%);
        position: absolute;
        max-width: 800px;
    }

    .end-div-content-mobile-text-content{
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    .end-text-block{min-width: 210px; width: 90%; aspect-ratio: none; padding: 20px 0 20px 0;}
    .end-div-content-div{width: 50%; min-width: 210px; }

    .end-text-block-name{font-size: 5vw;}
    .end-text-block-sub{font-size: 4vw}
    .end-text-block-sub-img{width: 10vw; min-width: auto;}

    footer{background: black; min-width: 310px;}
    .footer-menu{min-width: 310px; width: 100%; font-size: 30px; margin-top: 28px;}
    .footer-menu-row{width: 100%; gap: 30px;}
    .footer-menu-row a {font-size: 25px;}
    .footer-div{min-width: 310px;}
    .footer-info{min-width: 310px; display: none;}
    .footer-menu-row.down{flex-direction: column; align-items: center; gap: 20px;}
    .footer-info-mobile{display: flex;height: fit-content;width: 100%;align-items: center;flex-direction: column;margin-bottom: 100px;margin-top: 21px;gap: 30px;}
    .footer-info-content-img{width: 142px;aspect-ratio: 142/159;}
    .footer-info-content-rekv{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";}
    .footer-info-content-prav{width: 100%;display: flex;flex-direction: column;justify-content: center;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";text-align: center;align-items: center;}
    .footer-info-content-prav span{width: fit-content;}
}

@media (max-width: 660px){
    .mobile-empty{display: flex; width: 50%;aspect-ratio: 506/854;}
}

@media (max-width: 550px){
    .mobile-empty{display: flex; width: 50%;aspect-ratio: 506/754;}
}

@media (max-width: 510px){
    .rule-number{font-size: 8vw;}
    .rule-name{font-size: 4vw;}
    .rule-text{font-size: 4vw;}
    .how-text{font-size: 8vw; margin-top: 200px;}
    .rule-div{gap: 10px 10px; margin-top: 20px;}
    .money-img-mobile{bottom: -40%;}
}

@media (max-width: 450px){
    .mobile-empty{display: flex; width: 50%;aspect-ratio: 506/654;}
    .money-img-mobile{bottom: -30%;}
}

@media (max-width: 350px){
    .mobile-empty{display: flex; width: 50%;aspect-ratio: 506/554;}
}

@media (max-width: 690px){
    .money-img-mobile{bottom: -20%;}
}

@media (max-width: 610px){
    .money-img-mobile{bottom: -25%;}
}

@media (max-width: 550px){
    .money-img-mobile{bottom: -30%;}
}


@media (max-width: 500px){
    .money-img-mobile{bottom: -25%;}
}

@media (max-width: 380px){
    .money-img-mobile{bottom: -20%;}
}

@media (max-width: 340px){
    .money-img-mobile{bottom: -25%;}
}