@font-face {
    font-family: "mainFont";
    src: url("../font/MusticaPro-SemiBold.otf");
    font-weight: 700;
}
*{
    font-family: mainFont;
    font-weight: 200;
    box-sizing: border-box;
}
body{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
   position: relative;
   background-color: white;
}

:root{
--button-color:blue;
--back-blue:aliceblue;
}

.uaPlace{
    height: 100vh;
    display: grid;
    place-items: center;
    width: 100%;
    background-color: aliceblue;
    position: fixed;
}


#uaHeart{
    position: relative;
    overflow: visible;
    width: 80%;
    max-width: 300px;
    max-height: 50vh;
    display: grid;
    place-items: center;
}
.heartHide{
    opacity: 0;
}
.inAnim{
    transform-origin: center center;
    user-select: none;
}
#fullHerat{
    fill: none;
}
#partsUa{
    opacity: 1;
}
.charMake{
    text-align: center;
    color: rgb(83, 83, 83);
    font-size: 1.8rem;    
}
.shadowBox{
    box-shadow: 2px 2px 5px rgba(143, 143, 143, 0.445);
    transition: .2s ease;
}
.textBlockWrap{
    margin: 20vh 0;
    width: clamp(200px,90%,600px);
    background-color: white;
    border-radius: 20px;
    padding: 15px 10px;
    z-index: 10;
}
.charMake>span{
    box-shadow:none;
}
.gap{
    height: 100vh;
    /* width: 100%; */
}
.topFull{
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
min-height: 60px;
background-color: white;
z-index: 20;
display: grid;
place-items: center;
box-shadow: 0px 2px 5px rgb(184, 184, 184);
}
.blockHead{
    max-width: 1000px;
    width: 90%;
    height: 100%;
    display: grid;
    place-items: center;
grid-template-columns: 20% 60% 20%;
}
.logoBlock,.langLogo{
    display: grid;
    place-items: center;
}
.navBlock{
    display: none;
    width: 100%;
    justify-content: space-around;
    align-items:center;
    height: 100%;
}
.navLink{
    display: grid;
    place-items: center;
    user-select: none;
    cursor: pointer;
    text-align: center;
    position: relative;
    padding: 10px ;
    height: 100%;
}
.navLink:hover{
    background-color: var(--button-color);
    color: white;
    /* border-radius: 10px; */
}
.alignCenter{
    display: grid;
    place-items: center;
    width: 100%;
    position: relative;
    margin: 0;
}
.showBlock{
    opacity: 1;
}
.logo{
    width: 70%;
    max-width: 60px;
    user-select: none;
}
.langLogo{
width: 90%;
max-width: 50px;
cursor: pointer;
transition: .8s cubic-bezier(.67,-0.98,.29,1.63);
}

.loader{
    position: fixed;
    z-index: 99;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: rgb(9, 14, 68);
    /* backdrop-filter: blur(5px); */
}
.fullBoxBlock{
    position: absolute;
    width: 90%;
    max-width: 500px;
    display: grid;
    place-items: center;
    bottom: -2px;
    border: none;
}
.zsu{
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
}
.zsuBoxWrap{
    display: grid;
    place-items: center;
    position: relative;
}

.boxBlockAnim{
   min-height: 100vh;
    background-color: var(--back-blue);
    overflow-x: hidden;
    z-index: 5;
}
.boxMain{
    max-width: 150px;
    width: 95%;
    margin: 2px;
}
.wheels{
    width:100% ;
    display: grid;
    place-items: center;
    grid-template-columns:repeat(3,calc(100%/3)) ;
}

.manipulator{
    width: 75%;
    display: grid;
    place-items: center;
    grid-template-columns:repeat(2,calc(100%/2)) ;
}
.topBox{
    width: 35%;
    display: grid;
    place-items: center;
}
.nextBlock{
    display: flex;
    width: 100%;
    height: 200vh;
    background-color: white;
    z-index: 15;
}
@keyframes wheelsRoll {
    to{transform: rotate(360deg);}
}
.loader>svg{
    width: 90%;
    max-width: 700px;
    overflow: hidden;
}
.loader>svg>path:nth-child(3n+1){
animation: loadPage 3s alternate-reverse infinite ease;
}
.loader>svg>path:nth-child(3n+2){
    animation: loadPage 3s alternate-reverse infinite -1s ease;
    }
    .loader>svg>path:nth-child(3n+3){
        animation: loadPage 3s alternate-reverse infinite -2s linear;
        }
@keyframes loadPage {
    
    to{opacity: 0.2;}
}

.donateBox{
    display: grid;
    place-items: center;
    z-index: 2;
    
    max-width: 300px;
    width: 100%;
    position: relative;
    transform-style: flat;
}
.donateBoxTop{
    position: absolute;
    width: 90%;
    z-index: 5;
    transform-style: flat;
}
.donateBoxBack{
    width: 90%;
}

.coinInBox{
    position: absolute;
    transform-origin: center;
    width: 15%;
    z-index: 3;
}

.blockFullOpen{
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    background-color: rgb(233, 240, 168);
}
.houseFull{
    min-height: 300vh;
    /* background: radial-gradient(rgb(55, 70, 97),black ); */
    z-index: 10;
}
.family{
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: scale(1.5);
}
.window{
    opacity: 0;
    width: 100%;    
    max-width: 400px;
    z-index: 2;
    max-height: 60vh;
}
.windowView{
    position:absolute;
    display: grid;
    place-items: center;
    overflow: hidden;
    z-index: 5;
    width: 90%;
    max-width: 350px;
}
.famWrap{
    position: absolute;
    display: grid;
    place-items: center;
    width: 100%;
}
.monument{
    position: absolute;
    bottom: 0;
    height: 80vh;
    max-width: 800px;
    right: 100vw;
    z-index: 5;
}
.city{
    display: grid;
    place-items: center;
    position: absolute;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    transform: scale(1.3) translateY(50px);
}
.l1,.l2,.l3{
    position: absolute;
    width: 100%;
}
.supportBlock{
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    mix-blend-mode: hard-light;
}
.phraseMain{
    font-size: 5rem;
    color: white;
    user-select: none;
    
}
.iban,.emailBox{
    position: relative;
    display: grid;
    place-items: center;
    padding: 15px;
    font-size: 0.9rem;
    word-break: keep-all;
}
.aliPhBlock{
    display: grid;
    place-items: center;
}

.rocket{
    position: absolute;
    display: grid;
    place-items: center;
    right: -500px;
    z-index: 10;
}
.inTextRocket{
    color: white;
    position: absolute;
    transform: translateY(-4%);
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
    z-index: 2;
    display: grid;
    place-items: center;
    font-size: 2em;
    user-select: none;
}
.rocketImg{
    max-width: 250px;
    width: 90vw;
    z-index: 0;
   
}
.menuSvg{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

#blueLineUa{
    stroke: black;
    stroke-width:2px;
    fill:none;
    stroke-dasharray: 0 2000;
    stroke-dashoffset: 2000;
    pointer-events: none;
}

#menuId rect{
    z-index: 1;
    cursor: pointer;
}
#menuId text{
    z-index: 2;
    cursor: pointer;
    user-select: none;
    pointer-events: none;
}

.navBlock{
    display: none;
}
.mobileToogle{
    height: 100%;
    max-height: 50px;
    padding: 10px;
    cursor: pointer;
}
.toggleBoxMobile{
    display: grid;
    place-items: center;
    width: 50px;
    position: relative;
    height: 100%;
}
.centerLine{
    width: 100%;
    background-color: var(--button-color);
    height: 5px;
    border-radius: 4px;
}
.menuMobileBlock{
    z-index: 50;
    background-color: white;
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100%;
}
.topHeaderMenu{
    display: grid;
    place-items: center;
    width: 100%;
    height: 80px;
    background-color: var(--button-color);
}
.closeButtonMenuMobile,.closeText{
    width: 100%;
    display: grid;
    place-items: center;
    height: 100%;
    cursor: pointer;
}
.closeText{
    max-height: 30px;
    max-width: 50px;
    position: relative;
}
.titleMenu{
    user-select: none;
    color: white;
    font-size: 2rem;
}
.centerMenuBoxLine{
    width: 100%;
    background-color: white;
    height: 5px;
    border-radius: 4px;
    position: absolute;
    transform-origin: center;
}
.textLineClose{
    display: grid;
    place-items: center;
    color: var(--button-color);
    overflow: hidden;
    font-size: 1.5rem;
}
.textToCloseMenu{
    opacity: 0;
}


.menuItems{
    height:calc(100% - 150px);
    display: grid;
    place-items: center;
}
.mobNav{
    user-select: none;
    font-size: 2rem;
}
.blockDonateWrap{
    display: grid;
    place-items: center;
    width: 90%;
    max-width: 900px;
    overflow: hidden;
    grid-template-columns: 100%;
    /* border: 1px solid black; */
    border-radius: 20px;
    padding: 30px 20px;
    background-color: rgb(247, 248, 255);
    box-shadow: 4px 4px 10px rgb(172, 172, 172);
}
.donateBlock{
    min-height: 100vh;
    z-index: 10;
    
}
.phraseForCoins{
    font-size: 1.5rem;
    padding: 15px;
    width: 95%;
    text-align: center;
    border-radius: 20px;
    background-color: var(--button-color);
    color: white;
    z-index: 5;
    margin-bottom: 150px;
}
.blockAnim{
    display: grid;
    place-items: center;
    overflow: hidden;
}


.blockInfo{
    display: grid;
    place-items: center;
    width: 100%;
    margin: 40px 0px;
    max-width: 700px;
}
.topDonateText{
    font-size: 2rem;
    margin: 30px 0px;
}
.donateItems{
    display: grid;
    place-items: center;
    width: 90%;
    
}
.donateAs{
    width: 100%;
    max-width: 300px;
    height: 50px;
    display: grid;
    place-items: center;
    /* border: 1px solid black; */
    position: relative;
    border-radius: 20px;
    margin: 10px 0px;
    background-color: white;
    box-shadow: 4px 4px 10px rgb(172, 172, 172);
    color: inherit; 
    text-decoration: none; 
    overflow-y: hidden;
}
.donateAs> .topBlock{
    display: grid;
    place-items: center;
    width: 100%;
    height: 50px;
    grid-template-columns: 30% 70%;
    cursor: pointer;
}
.donateText{
    user-select: none;
    pointer-events: none;
}
.donateAs> .topBlock > img{
    width: 40px;
    pointer-events: none;
    user-select: none;
    
}


.documents{
    z-index: 5;
    background-color: var(--back-blue);
    background-image: url(../image/back.png);
}
.docImgBlock{
    overflow-x: hidden;
    max-width: 1200px;
    grid-template-columns: 100%;
}
.docImg{
    width: 90%;
    max-width: 800px;
    margin: 20px 0px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgb(136, 136, 136);
}
.topDocTitel{
    margin: 30px 0px;
    font-size: 2rem;
}
.coinPlace{
    perspective: 1300px;
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transform-style: flat;
    z-index: 3;
}
#canvas1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    
}

.canvasBlock {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 5;
    background-color: transparent;
    border: 2px solid white;
    width: 95%;
    max-width: 900px;
    border-radius: 20px;
    overflow: hidden;
}

.logoMyLand {
    width: 100%;
    z-index: 10;
    background-color: transparent;
    position: relative;
}
.hideSand{
    opacity: 0;
    transition: .5s ease;
}
.myLandFullBlock{
    background-color: black;
    min-height: 100vh;
    z-index: 10;
}

.startBlock{
    margin-top: 60px;
    /* min-height: 50vh; */
    z-index: 5;
}
.dronBlock{
    background-color: var(--back-blue);
    z-index: 5;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
.dronBlockFly{
    display: grid;
    place-items: center;
    height: 80vh;
    position: relative;
    grid-template-rows: 15% 85%;
}
.textBackDron{
    position: absolute;
    font-size: 2rem;
}
.ropeImageBlock{
    height: 100%;
    position: relative;
display: grid;
place-items: center;
transform: translateY(-4%);
transform-origin: top;
overflow: hidden;
grid-template-rows: 20% 80%
}
.imageGur{
    height: 100%;
    transform: translateY(-5%);
    z-index: 2;
    filter: drop-shadow(2px 2px 5px rgb(196, 196, 196));
}
.dronRope{
    display: grid;
    position: relative;
    height: 100%;
    z-index: 3;
}

.dron{
    height: 100%;
    filter: drop-shadow(2px 2px 5px rgb(196, 196, 196));
    z-index: 4;
}


.mainVideo{
    width: 90%;
    max-width: 1000px;
    max-height: 70vh;
    border-radius: 15px;
    box-shadow: 5px 5px 20px rgb(163, 163, 163);
}
.openPost{
    /* min-height: 100vh; */
    z-index: 5; 
    margin: 40px 0;
}
.placePosts{
    width: 95%;
    display: grid;
    place-items: center;
    max-width: 1000px;
    padding: 10px;
}
.postItemList{
    display: grid;
    place-items: center;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 2px 2px 10px rgb(77, 77, 77);
    background-color: white;
    text-align: center;
    grid-template-columns: 100%;
    width: 95%;
    margin: 40px 0;
}
.postImage{
    max-width: 400px;
    width: 90%;
    user-select: none;
}
.partInfo{
    display: grid;
    place-items: center;
}

.doneProgress{
    display: grid;
    place-items: center;
    width: 200px;
    height: 200px;
    position: relative;
    margin: 20px 0;
    transition: .7s ease;
}
.circleLine{
    position: absolute;
    width: 96%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(white,var(--button-color)0%,white 0%);
    z-index: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.circleLine::before{
    content: "";
    width: 94%;
    aspect-ratio: 1;
    background-color: white;
    position: absolute;
    border-radius: 50%;
}
.outerBar{
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 5px 5px 10px -1px rgb(0,0,0,0.15),
    -5px -5px 10px -1px rgb(255, 255, 255,0.7);
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.donePercent{
    color: var(--button-color);
    opacity: .5;
}
.innerBar{
    position: absolute;
    width: 85%;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset 5px 5px 10px -1px rgb(0,0,0,0.15),
    -5px -5px 10px -1px rgb(255, 255, 255,0.7);
    z-index: 2;
    cursor: pointer;
    overflow: hidden;
    display: grid;
    place-items: center;
    pointer-events: none;
}


.mainInfo{
    display: block;
    text-align: left;
    margin-bottom: 40px;
}
.priceToDonate{
    display: grid;
    place-items: center;
    border: none;
    margin: 20px 0;
    padding: 10px 30px;
    border-radius: 10px;
    max-width: 100%;
}
.pricePost{
    white-space: nowrap;
    font-size: 120%;
    color: var(--button-color);
}
.partMedia{
    display: grid;
    justify-items: center;
}

.animDonatePrice{
    position: absolute;
    left: 0;
    display: grid;
    width: 200%;
    grid-template-columns: 50% 50%;
    animation: donateToAnim 10s cubic-bezier(.67,-0.98,.29,1.63) alternate-reverse infinite;
}
.donateTo{
    display: grid;
    place-items: center;
}

img{ 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.textBackDron{
    width: 90%;
    text-align: center;
    word-break: break-word;
}

.langBox{
    position: fixed;
    width: 90%;
    height: 60%;
    max-width: 400px;
    max-height: 400px;
    background-color: white;
    display: grid;
    place-items: center;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 2px 2px 10px rgb(77, 77, 77);
    z-index: 50;
    transition: .8s cubic-bezier(.67,-0.98,.29,1.63);
    top:-500px;
}
.langChoose{
    text-decoration: none;
    color: black;
    margin: 10px 0;
    padding: 15px;
    font-size: 120%;
    position: relative;
}
.mainName{
    text-align: center;
    padding: 10px;
    width: 95%;
    margin: 60px 0;
    font-size:2rem;
}
.contactPlace{
    width: 90%;
    max-width: 500px;
    display: grid;
    place-items: center;
    background-color: var(--back-blue);
    padding: 20px;
    border-radius: 20px;
    border: none;
    box-shadow:  2px 2px 5px rgb(185, 185, 185);

}
.contactBlock{
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    z-index: 5;
    background-image: url(../image/back.png) ;
    min-height: 100vh;
    background-color: white;
    overflow-x: hidden;
}

.emailBlock{
    word-wrap: break-word;
    font-size: 12px;
}
.gallaryBlock{
    display: grid;
    place-items: center;
    width: 100%;
    z-index: 10;
    /* background-color: white; */
    position: relative;
    background-color: var(--back-blue);
}
.imgGal{
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    border-radius: 15px;
    box-shadow:  4px 4px 7px rgb(160, 160, 160);
    width: 95%;
}
.placeGallery{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    width: 85%;
    margin: 50px 0;
}
.placeGallery > a{
    height: 30vh;
    flex-grow: 2;
}
.mobNav::after,.langChoose::after{
    width: 100%;
    position: absolute;
    bottom: -2px;
    content: "";
    left: 0;
    border-top: 2px solid var(--button-color);
}

.placeGallery > a:last-child {
    flex-grow: 10;
  }
@keyframes donateToAnim {
    0%{transform: translateX(-50%);}
    10%{transform: translateX(-50%);}
    20%{transform: translateX(0%);}
    100%{transform: translateX(0%);}
}
@media screen and (min-width:1000px)  {

    .doneProgress:hover{
        transform: scale(1.1);
        transition: .4s ease;
    }
    .postItemList{
        grid-template-columns: 50% 50%;
    }
    .blockDonateWrap{
        grid-template-columns: 50% 50%;
    }
    .mobileToogle{
        display: none;
    }
    .navBlock{
        display: flex;
    }
    .docImgBlock{
        overflow-x: hidden;
        max-width: 1200px;
        grid-template-columns: 50% 50%;
    }
    .textBackDron{
        text-align: center;
        font-size: 3rem;
    }
}