@font-face {
    src: url(/css/font/Poppins-Bold.ttf);
    font-family: Poppins;
}


body{
    font-family: "Poppins";
    background-image: url(/media/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow-y: hidden;
}
html,body{
    overflow-x:hidden;
}

nav{
    z-index: 1;
}


#text-area1 > h1{
    font-size: 4vw;
    font-weight: 750; 
    line-height: 5vw;
    letter-spacing: -2px;
    width: 45vw;
}

#transparent-text{
    color: #000A13;
    text-shadow:
	   -1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		 1px 1px 0 #fff
}

@media(min-width:1400px){
    #row2{
    margin-top: 20vh;
}
}

@media(max-width:767px) and (orientation:portrait) and (min-width: 500px){
    #phone{
        width: 30% !important;
        transform: translateY(15%);
    }
}



@media(max-width:500px) and (orientation:portrait){

    #text-area1 > p{
    font-size: 3vw !important;
    }
    #text-area1 > h1{
        font-size: 10vw;
        font-weight: 750; 
        line-height: 12vw;
        letter-spacing: -2px;
        width: 100%;
    }

    nav div{
        width: 55% !important;
    }
    #phone{
        width: 60% !important;
        transform: translateY(15%);
    }

    #row2{
        margin-top: 30% ;
        
    }

    #row2 p{
        font-size: 3vw !important;
    }

    #uis-div{
        height: 350px;
    }

    #phone-uis{
        transform: translateY(20%);
        width: 100% !important;
    }
    .uis-col{
        padding: 0px;
        align-items: end;
    }
    
}

@media(max-width: 800px) and (min-width: 768px){
    
    #text-area1 > h1{
        font-size: 7vw;
        font-weight: 750; 
        line-height: 7vw;
        letter-spacing: -2px;
        width: 100vw !important;
    }
    #text-area1 > p{
        width: 130% !important;
        font-size: 1.1rem !important;
    }
    #row2 p{
        width: 160% !important;
        font-size: 1.1rem!important;
    }
}

@media(min-width: 1100px){
#text-area1 > p{
        width: 140% !important;
        font-size: 1.9vh !important;
    }
    #row2 p{

        font-size: 1.9vh!important;
    }
}

@media(max-width: 1100px) and (min-width: 800px){
    #text-area1 > p{
        width: 140% !important;
        font-size: 1.5vh !important;
    }
    #row2 p{

        font-size: 1.5vh!important;
    }
}

@media(min-width: 800px){

    

    #phone{
        width:55% !important;
        transform: translatex(-15%) translateY(5%) !important;
    }


    
}

@media(max-width:830px) and (orientation:portrait){
    #phone{
        transform: translateY(20%) !important;
    }
    #text-area1 > h1{

        width: 100%;
    }
    
}
@media(max-width:830px) and (min-width:740px) and (orientation:landscape){
    #text-area1 > h1{
        font-size: 5vw;
        font-weight: 750; 
        line-height: 4vw;
        letter-spacing: -2px;
        width: 150%;
    }
}

@media(max-width:830px) and (orientation:landscape){
    nav div{
        width: 30% !important;
    }

    #phone{
        transform: translateY(20%) !important;
        width: 30% !important;
    }
    #text-area1 > p{
        width: 100%;
        font-size: 1.5vw !important;
    
        }


    #yaay{
        width: 15% !important;
        margin-top: 15%;
    }

    #row2 p{
        font-size: 1.5vw !important;
    }

    #market{
        width: 25vw;
    }

    
}


#phone{
    width: 80%;
    transform: translateY(5%);
    filter: drop-shadow(30px 10px 50px rgba(0,0,0,1));
}




#market-apple{
    width: 40%;
}
#market-play{
    width: 52%;
}

#scroll-icon,#scroll-icon-up{
    
    margin: auto;
    right:0;
    left:0;
}
#scroll-icon svg,#scroll-icon-up svg{
    width: 19vh;
}
.scrolled-nav{
    transition: all 0.8s;
    background: rgba(0, 16, 33, 0.9) !important;
}

.rest-nav{
    transition: all 0.8s;
    background: transparent;
}

.scroll-icon-trans{
    transition: all  500ms;
    display: block;
    width: 19vh !important;
}

.scroll-icon-trans2{
    width: 0% !important;
    transform: rotate(360deg);
    transition: all  500ms;
    opacity: 0;
}

.scroll-icon-trans3{
    position: fixed !important;
    padding: 2vh;
    margin-right:0 !important;
}

#language{
    right: 2vw;
}


/* Eng page */

@media (max-width: 830px) and (orientation: landscape){
    .text-area1 > h1 {
        font-size: 5vw;
        font-weight: 750;
        line-height: 4vw;
        letter-spacing: -2px;
        width: 100% !important;
    }
}

footer{
    margin-top: 10%;
}

.cls-1 {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    fill-rule: evenodd;
  }

  .cls-2, .cls-3 {
    fill: #fff;
  }

  .cls-3 {
    font-size: 13px;
    opacity: 0.3;
    text-anchor: end;
    font-family: Poppins;
    font-weight: 800;
    text-transform: uppercase;
  }