@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Baloo+Da&display=swap');
body {
    padding: 0; 
    margin: 0; 
    font-family:  'PT Sans', sans-serif; 
    position: relative;

}  





 
* p{
    font-family: 'Nanum Gothic', sans-serif;

} 
* h1,h2,h3,h4 {
    font-family: 'Righteous', cursive;

}
:root{
    --primary-color:#4af681 ; 
    --secondry-color:#40f063 ; 
    --text-color: rgba(255, 255, 255, 0.678);
}   
.text-main{
    color: var(--primary-color)!important;
}
 
.navbar-dark .navbar-toggler {
    color: var(--primary-color)!important;
    border-color: none;
} 



.js-slidein {
    opacity:0;
    transform: translateY(100px);
    -webkit-transition:all 300ms ease-in-out;
    transition:all 300ms ease-in-out;
  }
   
  .js-slidein-visible {
    opacity:1 !important;
    transform: translateY(0)!important;
  }


/*========================= 
hero 
=============================*/

.navbar-brand{
    color: var(--secondry-color)!important; 
    font-family: 'Baloo Da', cursive;
}
.nav-item{
    margin: .1rem 1rem;
}
.nav-link{
    color: var(--secondry-color)!important;
padding: 10px 10px; 
font-size: 1.62rem; 
border-bottom:2px solid transparent ; 
transition: cubic-bezier(0.55, 0.085, 0.68, 0.53) 300ms all;
} 






.active {
    border: 2.1px solid var(--primary-color);  
    border-radius: 30px; 
    padding:0px 10px 3px 2px;
    
} 
.active:hover {
    background-color: var(--primary-color); 
   
     
} .active .nav-link:hover{
    color: #00032F!important;
}



a .btn-scroll {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}




#hero {
    position: relative; 
    width: 100%; 
    height: 100vh; 
  /*  background-image: url("/../hero/bg.png");*/ 
    background-color: rgb(36, 34, 93);
} 
.parallaxx {
    position: absolute;
}

.layer-1{
   background-image: url('../hero/Untitled-4.png'); 
   background-position: center; 
   background-size: cover; 
   width: 100%; 
   height: 100vh;
}  
.layer-2{
    background-image: url('../hero/Untitled-3.png'); 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    height: 100vh;
 } .layer-3{
    background-image: url('../hero/Untitled-2.png'); 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    height: 100vh;
 } .layer-4{
    background-image: url('../hero/Untitled-1.png'); 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    height: 100vh;
 }  
 .layer-fogg1{
    background-image: url('../hero/fog3.png'); 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    height: 100vh;
 } 
 .layer-fogg2{
    background-image: url('../hero/fog2.png'); 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    height: 100vh;
 }
 .layer-fogg{
    background-image: url('../hero/fog1.png'); 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    height: 100vh;
 }
.layer-sky{
    background-image: url('../hero/sky.png'); 
    background-position: center; 
    background-size: cover; 
    width: 100%; 
    height: 100vh;
}
h1{
    font-size: 2.7rem!important; 
    color: #f4f4f4!important;
} 
p { 
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.678);
}
.content-indrocue { 
    
    text-align: center;
    position: absolute;
    top: 20%;
    left: 25%;
    /* transform: translate(-50%, -50%); */
    z-index: 1;
    width: 50%;

} 
.content-indrocue img {
    width: 20%;
}   
/*========================= 
hero 
=============================*/ 
#sservices {
    background-color: #00032F; 
  
 color: white;
    z-index: 1; 
    height: 100%; 
position: relative;
    width: 100%;
}  
.wrapper p{
    color: var(--text-color)!important;
}
.wrapper { 
    position: relative; 
    display: grid; 
    grid-template-columns: 1fr 1fr ;   
   text-align: center ;  
   grid-gap: 10px;
   margin-top: 40px;
line-height: 1.7rem; 

letter-spacing: 2px; 

width: 100%; 
height: 100%; 
cursor: pointer;
box-sizing: border-box;
}  

.wrapper .icon{  
    color: var(--secondry-color)!important; 
  box-sizing: border-box;
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    border: 2px solid var(--secondry-color)!important;  
    vertical-align: middle;
position: relative; 
margin-bottom: 3rem;
top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);  
    

}  

.wrapper .icon i{ 
    font-size: 1.7rem;
position: absolute; 
top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    color: var(--secondry-color)!important;
}

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


======================================*/ 
#aboutme {  
    position: relative;
    width: 100%;
    height: 70vh;
        background: #00032F;  
        
}  
#aboutme .container h3{
    color: white; 
    font-size: 2rem;
}
.wrapper_2{
    
    color: #f4f4f4; 
    text-align: center; 
    padding: 50px;  
padding-top: 140px;
}   

.wrapper_2 h2{
    font-size: 2.3rem;
}
.wrapper_2 p{
    font-size: 1.5rem;
}
.profile{
    width: 18%; 
    margin-bottom: 30px; 
    
}

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


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

.gap-gradient{
    width: 100%; 
    height: 40vh; 
    background: linear-gradient(to bottom, #00032F 0%, #250338 100%);
} 
/*parallx*/ 

.gap-vector{ 
    position: relative;
z-index: -1;
    width: 100%; 
height: 400px;
    background-image: url("../hero-ii/bg.png") ;  
    background-size: cover;
    background-repeat: no-repeat;
} 
.layer1{  
background-position: center; 
background-repeat: no-repeat;
background-size: cover;
   width: 100%; 
   height: 400px;

 background-image: url("../hero-ii/Untitled-1.png");
} 
.layer2{  
    background-position: center; 
    background-repeat: no-repeat;   
    background-size: cover;
       width: 100%; 
       height: 400px;

     background-image: url("../hero-ii/Untitled-2.png");
    } 
    .layer3{  
        background-position: center; 
        background-repeat: no-repeat;
        background-size: cover;
           width: 100%; 
           height: 400px;

         background-image: url("../hero-ii/Untitled-3.png");
        } 
        .layer4{  
            background-position: center; 
            background-repeat: no-repeat;
            background-size: cover;
               width: 100%; 
               height: 400px;

             background-image: url("../hero-ii/Untitled-4.png");
            }     

            .layerx{  
                background-position: center; 
                background-repeat: no-repeat;
                background-size: cover;
                   width: 100%; 
                   height: 400px;
    
                 background-image: url("../hero-ii/Untitled-x.png");
                } 
 /*================= 
 
 
 +++++++================*/ 
 #folios {
     background-color: #250338; 
     color: var(--primary-color); 
     padding: 80px 0;} 
     #folios h3{
font-size: 3rem; 
 


     }
 .wrapper_3 {
     display: grid; 
     grid-template-columns: 1fr 1fr 1fr;  
     
     
 }  
 .wrapper_3 img{
     width: 100%; 
  transition: cubic-bezier(0.445, 0.05, 0.55, 0.95) .3s all;
 } 
 .wrapper_3 img:hover{
    width: 100%;  
    padding: 10px;
 
}  
.btn-portfolio{
    color: var(--secondry-color); 
    border: 2px solid var(--primary-color); 
    text-decoration: none; 
    padding: 10px 20px; 
    border-radius: 30px; 
    margin: 50px 30px auto; 
   display: inline-block; 
   text-align: center;
transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) .3s; 
font-size: 1.4rem;
} 
.btn-portfolio:hover{
background-color: var(--primary-color); 
color: black; 
text-decoration: none;
} 
.btn-portfolio:last-child{
    background-color: var(--primary-color); 
    color: black; 
    text-decoration: none;
    }
/*==============================================================================



*/ 

#gradient-gap-1{
    width: 100%; 
    height: 150vh; 
    background-image: linear-gradient(to bottom, #250338, #214277);
  padding-top: 150px;
} 
/*================================ 


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

.wrappe_4{
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;  
    padding-top: 30px;
    width: 100%; 
    height: 300px; 
   
}  

.wrappe_4 img{
    width: 100%;
}  
.wrappe_4  .dotplan{
    width:40%;
}
.wrappe_4 div{
    width: 30%; 
    margin: auto; 
    opacity: .8;
} 
/*=======================================
leave a message 
==========================================*/ 
#contact {
    width: 100%; 
    height: 140vh; 
    background-image:linear-gradient(rgba(0, 0, 0, 0.176), rgba(0, 0, 0, 0.5)), url('../hero-iii/Untitled-1.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;  
    text-align: center;  
    padding-top: 40px; 
    background-attachment: fixed; 
    
    
} 
#contact .icon
    { 
       font-size:2rem; 
       color: #00032F; 
       background-color: var(--primary-color); 
       width: 100px; 
       margin: auto; 
       height: 100px; 
       padding: 20px; 
       border-radius: 50%;
    }  
  
#contact h4{
    font-size: 2rem; 
    margin: 30px 0px; 
color: var(--primary-color);
} 
#contact a {
   border: var(--primary-color) 2px solid;
    font-size: 2.2rem; 
    padding: 10px 25px; 
    border-radius: 40px; 
    color: var(--primary-color); 
   text-decoration: none; 
   text-transform: uppercase; 
   transition: cubic-bezier(0.55, 0.085, 0.68, 0.53) .2s;
}  
#contact a:hover{
    background-color: var(--primary-color); 
border: 2px solid var(--primary-color); 
color: #00032F;
}
/*---------------------------------- 
getin touch
-----------------------------------------*/ 
#getin{
    width: 100%; 
    height: 30vh;
background-color:#090538 ; 
color: #f7f7f7; 
font-size: 2.5rem; 
padding-top: 50px;
z-index: 1; 
position: relative;
}    
#getin h5{
    font-size:1.5rem;
} 
.wrapper_5 a{ 
    padding:10px;
}


/*============= 
--------------
======================*/ 
footer{
    background-color: #00032F;  
    padding-top: 60px; 
 
}  

footer h4{
    color: var(--primary-color); 

} 
footer .row{
    text-align: left;

} 
footer li {
    list-style: none; 
    transition: cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s all; 
    font-size: 18px;
}  
footer li a:hover {
    list-style: none;  
    color: var(--primary-color); 
    font-weight: 100;  
    text-decoration: none;
    

}  
.copyright {
        color: rgba(255, 255, 255, 0.741); 
        text-align: center;
} 

#contact1{
    width: 100%; 
    height: 20vh; 
    background-color: #090538;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;  
    text-align: center;  
      
} 
#contact1 h4{
    font-size: 2rem; 
    margin: 30px 0px;  
    color: #69b6fa;

} 
#contact1 a {
    background-color:var(--primary-color); 
    font-size: 2.2rem; 
    padding: 10px 25px; 
    border-radius: 40px; 
    color: #00032F; 
   text-decoration: none; 
   text-transform: capitalize; 
   transition: cubic-bezier(0.55, 0.085, 0.68, 0.53) .2s;  
   position: relative;
   z-index: 2;
}  
#contact1 a:hover{
    background-color: transparent; 
border: 2px solid var(--primary-color); 
color: var(--primary-color);
}  



/*===================================================== 
Media 
=====================================*/ 
@Media(max-width: 768px) {  

.wrapper, .wrapper_2, .wrapper_3,  .wrapper_5 {
    grid-template-columns: 1fr ;
}
.wrappe_4{
    grid-template-columns: 1fr 2fr;
} 
.wrappe_4 div {
    width: 60%;
} 
    #hero h1{
        font-size: 2rem!important; 
        
    } 
   #hero .container .content-indrocue .avatar {
        width: 70%;
    }
.wrapper_2{
    padding:60px 0px;
} 
#getin{
    padding-top: 30px;
} 
.profile{
    width:50%;
} 

#gradient-gap-1{
    height: 200vh;
} 

}