@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Nanum+Brush+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --light: #f1f1f2;
    --dark: #0e1111;
  }

.color-dark{
    color: #f1f1f2;
}

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

body{
    background: #0e1111;
    scroll-behavior: smooth;
}


/* preload */

.preloader{
    position: fixed;
    top:0;
    display: flex;
    -webkit-box-pack: justify;
    
    justify-content: center;
    align-items: center;
    width:100%;
    height: 100vh;
    background: #070707;
    z-index: 1000000000;

}

.preloader.active{
    transform: translateY(-100vh);
    transition: ease-in-out 2s;
    transition-delay: 1s;

}

.preloader::before{
content: url('../images/logo_loader.png');

opacity: 0.3;
position:absolute;
size: 10em;
font-family: 'Roboto mono', monospace;
color: rgba(255,255,255,0.3)
}

.counter{
    position: relative;
    
    top:20%;

    color: #fff;
    font-size: 8em;
    font-family: 'Roboto mono', monospace;
    font-weight: 300;
    z-index: 1;
}
.counter:after{
    content: '%';
    font-size: 0.5em;
    font-family: 'Roboto mono', monospace;


}

.hide{
    opacity: 0;
    transition: 1s;
    pointer-events: none;
}

.wraper{
    width: 100%;
    height: 100%;
}

.wrapper .container {
	width: 96%;
	margin: 0px auto;
}

/*Header*/

header{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding: 0px 100px;
    z-index: 10000;
    transition: 0.5s;
   
}

header.sticky{
    padding: 10px 100px;
    background: transparent;
    mix-blend-mode: difference;
    
    
    
}

.header-mobile{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding: 0px 100px;
    z-index: 10000;
    transition: 0.5s;
   
}

@media (max-width: 991px) {
	header.sticky  {
		padding: 10px 50px !important;
        
        

        
	}

   
    
}

/* Mobile navbar*/




.toggle{
    position: fixed;
    right:40px;
    min-width: 40px;
    height: 40px;
    display: none;
    cursor: pointer;
    transition: 0.5s;
    z-index: 0;
    text-transform: lowercase;
    padding: 0 20px;
    mix-blend-mode: difference;
    color: #f1f1f2;
    font-family: 'Roboto Mono', monospace;
}





.close{
    position: absolute;
    top: 40px;
    right:40px;
    
    height: 40px;
    cursor: pointer;
    z-index: 10;
    width: 0;
    padding: 0 40px;
    color: #f1f1f2;
    font-family: 'Roboto Mono', monospace;
}






.navbar-mobile{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    background-color: #0e1111 !important;
    mix-blend-mode: none;

    display: flex;
    -webkit-box-pack: center;
    
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: 0.5s;
    transform: translateX(-100%);
    
}
.navbar-mobile-logo{
    
    position: absolute;
    background:url('../images/logo_jovan.png');
    background-position: center;
    background-size: cover;
  
    color: #f1f1f2;
    font-family: 'Roboto Mono', monospace;
    top:0;
    left:40px;
    width:150px;
    height:100px;
    z-index:10;

   

}

/*.navbar-mobile-header::before{
    content: url('../images/logo_jovan.png');
    color: #f1f1f2;
    font-family: 'Roboto Mono', monospace;
    
}*/







.navbar-mobile.active{
    left:0;
}



.navbar-mobile ul{
    position: relative;
    

}

.navbar-mobile ul li{
    list-style: none;
    text-transform: lowercase;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    
}

.navbar-mobile ul li a{
    display: block;
    text-decoration: none;
    padding: 5px;
    text-transform: lowercase;
    color: #f1f1f2;
    
    letter-spacing: 1px;
    font-size: 40px;
  
    transition: 0.5s ease-in-out;
    transition-delay: 1s;
    
    
}



.navbar-mobile ul li a:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0%;
    height: 3px;
    background:#0e1111;
    transition: 0.3s;
}





.navbar-mobile ul li a:hover:after{
    width:100%;
}

.navbar-mobile ul li a::before{
    content: attr(data-text);
    position: absolute;
    top:0;
    left:50%;
    transform: translate(-50%,-50%);
    transition: 0.5s;
    font-size: 80px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    font-family: 'Roboto Mono', monospace;
    color:#f1f1f2;
}

.navbar-mobile ul li a:hover::before{
    opacity: 0.1;
    top:50%;
}

.media {
    position: absolute;
    bottom: 100px;
    left: 20%;
    display: none;
   
}

.media ul {
    list-style: none;
}

.media ul li {
    display: inline-block;
    color:#f1f1f2;
   
    padding-right: 0;
}

.media ul li a{
    display: block;
    text-decoration: none;
    padding: 5px;
    text-transform: none;
    color: #f1f1f2;
    font-size: 12px;
    letter-spacing: 1px;
    font-family: 'Roboto Mono', monospace;
    transition: 0.5s ease-in-out;
    transition-delay: 1s;
}

.media ul li a:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0%;
    height: 3px;
    background:#0e1111;
    transition: 0.3s;
}
.media ul li a:hover:after{
    width:100%;
}


/*Main navbar*/

header{
    background:#0e1111;
}

header .logo{
    width: 150px;
    height: 100px;
    background: url('../images/logo_jovan.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    mix-blend-mode: difference;

}

header .logo img{
    width:150px;
    height:100px;
    line-height: 75px;
    transition: 0.4s ease-out;
}

header .main-navbar{
    position: relative;
    display: flex;
    
}


header .main-navbar li{
    list-style: none;
    margin-left: 30px;
}

header .main-navbar li a{
    text-decoration: none;
    color:#f1f1f2;
    font-family: 'Roboto Mono', monospace;
    text-transform: lowercase;
}



header .main-navbar li a span {
    position: relative;
    display: block;
    cursor: pointer;
  }
  
  header .main-navbar li a span:before, header .main-navbar li a span:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 3px;
    top: 50%;
    margin-top: -0.5px;
    background: #0e1111;
  }
  
  header .main-navbar li a span:before {
    left: -2.5px;
  }
  header .main-navbar li a span:after {
    right: 2.5px;
    background: #f1f1f2;
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  
  header .main-navbar li a span:hover:before {
    background: #f1f1f2;
    width: 100%;
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  
  header .main-navbar li a span:hover:after {
    background: transparent;
    width: 100%;
    transition: 0s;
  }
     
  /*home section*/


 

    
  
      .divider {
        width: 100%;
        height: 2px;
        background: #fff;
    }
    
    .whitespace {
        width: 100%;
        height: 80px;
    }

  
    



  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
 
.overlay{
    position: absolute;
    left: 0;
    right: 0;
    height: 500vh;
    background: linear-gradient(rgba(255, 255, 255, 0) white 80%);
    z-index: 1000;
}

  .section{
    height:100vh;
    display: flex;
    align-items:center;
    justify-content:center;
  }

  



.wrapp {
    
  width: 100%;
  height: 100%;
  background: #0e1111;
}
   
.wrapp .container {
  width: 96%;
  margin: 0px auto;
  padding: 80px 0;

}

  .header {
	margin: 80px 0;
   position: relative;

	z-index: 2 !important;
}



.header .header-container h1 {
	font-family: 'Roboto Mono', monospace;
	font-size: 7rem;
    color: #f1f1f2;
}




@media (max-width: 900px) {
	.header .header-container h1 {
		font-size: 3.8rem;
	}
}




/* hero-image */

.hero-image {
	width: 80%;
    position: relative;
    z-index: 0 !important;
	margin-top: -700px;
}

.hero-image::after {
	content: "";
	display: table;
	clear: both;
}

.hero-image .hero-image-container {
	width: 40%;
    
	float: right;
}

.hero-image .hero-image-container img {
	width: 100%;
    
    

}

@media (max-width: 900px) {
	.hero-image {
		margin-top: 40px;
        width:100%;

	}
	.hero-image .hero-image-container {
		width: 100%;
	}
}




 


.home__scroll {
    position: absolute;
    left: 0;
    bottom: 15%;
    font-size: 16px;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    color: #0e1111; 
font-family: 'Roboto Mono', monospace;
transition: 0.5s;}


    .home__scroll::after {
      content: '';
      position: absolute;
      top: 45%;
      left: -50%;
      width: 60px;
      height: 1px;
      background-color: #0e1111;
      margin-left: -2.5rem; 
      transition: 0.5s;}


      .home__scroll.scroll{
          opacity: 0;
          
      }

 .sci{
     position: absolute;
     top:0;
     text-decoration: none;
     right:0;
     width:60px;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     -webkit-writing-mode: vertical-rl;
     -ms-writing-mode: tb-rl;
         writing-mode: vertical-rl;
 -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
 padding-top: 5em;
     margin-right: 15px;
     list-style: none;
     
 }



 .sci a{
     display: inline-block;
     padding-top: 20px;
     font-family: 'Roboto', sans-serif;
     color: #f1f1f2;
     list-style: none;
    font-size: 20px;
    letter-spacing: 1px;
    text-decoration: none;
 }

 
/* section-header */

.section-header .section-header-container {
    

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 12px 0;
	font-size: 16px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    background: #fff;


    
}

/* about */

.about {
	width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    
    align-items: center;
    flex-wrap: wrap;
    transition: all 1s;
    
    
}




.about-container,.spacer{
    padding: 20px;
    margin:100px 0;
    width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #f1f1f2;
  font-family: 'Roboto', sans-serif;
  font-size: 4rem;
  visibility: hidden;
   
}
.about .spacer{
    visibility: visible;
    
    background: #f1f1f2;
    color: #0e1111;
    transition: all 0.5s ease-in-out;
}

.about-container{
	margin: 20px 100px;
	font-size: 36px;
    font-family: 'Roboto', sans-serif;
}

.spacer h2{margin:20px 100px;}
.spacer a {
	color:#0e1111;

	font-size: 4rem;
}
@media (max-width: 900px) {
	.about-container, .spacer {
		width: 100% !important;
	}
	
    .about-container h2{
      font-size: 1.5rem;
    }
.spacer, spacer a {
		font-size: 1.8rem;
        
	}
}

 /* Work section*/


 .work{
     padding: 100px 0;
     width: 100%;
     min-height: 100vh;
     display: flex;
     -webkit-box-pack: justify;
     justify-content: center;
     align-items: center;
 }


    

      


  @media (max-width:991px){
    .preloader::before{
        
        font-size: 2rem;
       
        }
        .counter{
            
            font-size: 3rem;
            
        }
       


    header{
        
       
        padding: 10px 50px;
        
       
    }

    

   
    
    
    .toggle{
        
        display: block;
          
    }
    header .main-navbar{
        
        display: none;
        
    }



    .navbar-mobile{
        
        display: flex;
        
        
        
    }

    .media {
        
        display: block;
        
       
    }


    /* home-section*/



    .sci{
        display: none;
    }

    
    .hidetext{
        position: absolute;
        text-align: center;
    }

    .home .home-content .typing span{
    
       
        font-size: 30px;
        height: 150px;
       
       
     }

    .home .home-content p{
        font-size: 2em;
        
    }
    .home__scroll {
        
        bottom: 10%;
        
       }


  }

  @media (max-width:768px){

   
       



    

    .sci{
        display: none;
    }

   

    
  }