* {
    margin:0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}

[data-scroll] {
    transition: opacity 5s;
  }
  [data-scroll="in"] {
    opacity: 1;
    animation-name: rotate;
    animation-duration: 3s

  }
  [data-scroll="out"] {
    opacity: 0;
  }

.center
{
	text-align: center;
}

.row:before, .row:after{
  width: 0px;
  height: 0px;
}
.tagLine{
    position: relative;
    top: 29vh;
    text-align: center;
    font-size: 3.75rem;
}

.tagSubLine{
    position: relative;
    top: 30vh;
    text-align: center;
    font-size: 1.75rem;
    transform: all uppercase;}

    .tagSubLine1{
        position: relative;
        top: 31vh;
        text-align: center;
        font-size: 1.75rem;
        transform: all uppercase;}

.icon-size{
    font-size:4rem;
}

.icon-size:hover{
    animation-name: rotateIcon;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.owl-carousell {
  
    width:100%;
    height:500px;
}



.space{
    position: absolute;
    top:800px;
    color: #fff;
    background-image: url('home-bg.jpg');
    height:300px;
    z-index: 5000;
}



.imgSize {
    max-width: 225px;
    height: 190px;
    border:1px solid #ccc;
    background-color: #264468;
}

.carosel{
    background-image: "testi-bg.png";
}

.imgSized {
    max-width: 175px;
    
    border: solid;
    border: 5px;
    border-color: #264468;
    color:#bdcbe1
}
.imgSized:hover {
    border:1px solid #ccc;
    
    z-index: 100;
}
.rad{
    border: #264468;
    border: solid;
    border: 5px;
    border-color: #264468;
    color: blue;
    border-radius:50%;

}

.nav-bar{position: fixed;
    background-color: #264468;
    padding-bottom: 30px;
    height:75px;
    width:100vw;
    padding: 0px;
    margin: 0px;
    z-index: 1000;
}

/*** contact section ***/

.about
{
	background-color: #5d8bbe;
	background-attachment: fixed;
	
	color: #fff;
}
  .about .about-header h1{
    padding-top: 100px;
  } 
form.contact-form
{
	width: 40%;
	margin: 0 auto;
	text-align: center;
}
.team{
    background-image: url('home-bg.jpg');
    height: 100%;
}

.mt-3{
   margin-top: 0px
}



input:not([type=submit]),textarea
{
	width: 100%;
	margin-bottom: 40px;
	color: #777;
	padding-left: 20px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.2) inset;
	border: none;
}

input:not([type=submit])
{
	height: 40px;
	line-height: 40px;
}

textarea
{
	padding-top: 10px;
}
#submit
{
	padding: 10px 30px;
	color:#fff;
	background-color: #e74c3c;
	border:none;
	font-weight: bold;
}

@keyframes rotate {
  from {
      opacity: 0;
    transform: translateX(0px) translateY(100px);
  }
 to {
     opacity: 1;
    transform: translateX(0px) translateY(0px);
}
}


@keyframes rotateIcon {
    from {
        transform: rotate(45deg);
    }
   to {
    transform: rotate(-45deg);
  }
  }

  .services-header, .portfolio-header{
      margin-bottom:42px;
      text-align: center;

  }
  .parallax {
    /* The image used */
    background-image: url("cak.png");
  
    /* Set a specific height */
    min-height: 225px; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .portolio{
	
    color: #fff;
    background-color:#264468;
    height:100%;
  
}

.portfolio .inner-content{
    position: relative;
    width:200px;
}

.portfolio .inner-content .overlay-content{
    position: absolute;
    top: 100%;
    left: 0px;
    text-align: center;
    background: rgba(0, 0, 0, 8);
    width: 100%;
    height: 100%;
    transition:all 0.3s ease-in;

    
}

.portfolio .inner-content .overlay-content h3 .portfolio .inner-content .overlay-content p{

color: #fff;
}

.portfolio .inner-content:hover .overlay-content{
    top:0px;
}

.portfolio{
	
    color: #fff;
    
    background-color: #5d8bbe;
  
    width: 100%;
    height: 500px;
	
}

.bs{
    background-color: #5d8bbe;
    color:#fff;
    background-size: cover;
    width: 100%;
    height: 500px;
	
}

::placeholder {
    color: #fff;
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #fff;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
   color: #fff;
  }

.inner-content{
    position: relative;
}


.overlay-content{
    text-align: center;
    position: absolute;
    color: #fff;
    top: 100%;
    left: 0px;
    background-color: black;
    z-index: 5000;
    height: 100%;
    width: 100%;
  
}



.overlay-content h3{
    position: relative; 
    color: #fff;
    text-align: center;
    top: 20%;
    
}

.overlay-content p{
    position: relative; 
    color: #fff;
    text-align: center;
    top: 25%;
  
    
}

footer{
    background-color: #264468;
    height: 250px;
}










header{
   background-image: url("home-bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	height:100vh;
	width: 100vw;
	z-index: 100;
	padding-top: -1;
	margin-top: -1;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;

}
.logo{
   
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links{
    display: flex;
    justify-content: space-around;
    width:40%;

}

.nav-links li{
  list-style: none;
} 

.nav-links li a{
    color: #fff;
  
    text-decoration: none;
    
  
    font-size: 14px;
    
  } 
  .nav-links li a:hover{
   
    color: coral;
    transition: all ease-in 0.5s;
    font-size: 14px;

    border-bottom: solid 2px;
    
  } 
 
  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius:50px;
  }
  
  .button1 {
    background-color: transparent; 
    color: coral; 
    border: 2px solid coral;
  }
  .button1:hover {
    background-color:coral;
    color: white;
  }

  .burger{
    display: none;
    cursor: pointer;
}     

  .burger div{
      width:25px;
      height:3px;
      background-color: #fff;
      margin: 5px;
      transition: all 0.3s
  }  

  .section-padding
{
	padding-top: 100px;
}

.team{
     background-color: #5d8bbe;color: #fff;
    padding-top: 100px;
}
 .space{
     height:200px;
     background-image: url('home-bg.jpg');
     background-size: cover;
     width: 100%;
 }
 .contact{
    background-color: #fff;
 }
/***** slider section *****/


  @media screen and (max-width:1064px){
    .nav-links{
        width: 60%;
    }
}

@media screen and (max-width:989px){
    .portfolio .inner-content  img{
       width: 150px;
       height:150px;
    }

    .portfolio .inner-content .overlay-content{
        
        text-align: center;
        position: absolute;
        color: #fff;
        top: 100%;
        left: 0px;
        background-color: black;
        z-index: 5000;
        height: 150px;
        width: 150px;
      
    }
}


  @media screen and (max-width:768px){
  body{
      overflow-x: hidden;
  }
    .nav-links{
       position: absolute;
       right:0px;
       height: 92vh;
       top: 8vh;
       background-color:#264468;
       display: flex;   
       flex-direction: column;
       align-items: center;
       width: 50%;
       transform: translateX(100%);
       transition: transform 0.5s ease-in;
    }
    .nav-links li{
       opacity: 0;
    }

    .burger{
        display: block;
     }

     .portfolio .inner-content  img{
        width: 100px;
        height:100px;
     }

     .portfolio .inner-content .overlay-content{
       display: none;
     }


  }

  .nav-active{
      transform: translateX(0%);
  }
  
@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);

    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}


@keyframes movTitless{
    from{
       
        opacity: 0;

    }
    to{
       
        opacity:1;
      
       
    }
}

@keyframes movTitles{
    from{
       
        transform: translateX(0px);
       

    }
    to{
       
    
        transform: rotate(-90deg) ;
        
        
       
    }
}

@keyframes fader{
    from{
       
        opacity: 1;
       

    }
    to{
       
    
        opacity: 0;
        
        
       
    }
}


.movTitle{
   /***** transform: rotate(-90deg) translate(30px, -70px);} *****/
   position: relative;
  
   text-align: center;
   font-size: 3.75rem;
   animation-name: movTitles;
   animation-duration: 1s;
   animation-delay: 1s;
   animation-fill-mode: forwards;
   z-index: 5000;
}

.tagFade{
    animation-name: fader;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
.setTitle{
    position: relative;
    top:30vh;
    left:200px;
}

.movTitless{
transform: rotate(-90deg) translate(30px, -70px);
 
    animation-name: movTitless;
    animation-duration: 5s;
    animation-fill-mode: forwards;
   
 }

.toggle .line1{
    transform: rotate(-45deg) translate(-5px, 6px);}
.toggle .line2{
   opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px, -6px)
}

.toggler{
    transform: rotate(-45deg) translate(-5px, 6px);}