#clouds{
    position: absolute;
	 padding: 100px 0;
	/* background: #c9dbe9;
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
    background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%); */  
    animation: float 6s ease-in-out infinite;
}

/*Time to finalise the cloud shape*/
.cloud {
	width: 200px; height: 57px;
	/* background: #fff; */
	
	/* border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px; */
	
    position: relative; 
    

    background-image: url(../img/home-banner/cloud.png);
    background-repeat: no-repeat;
    background-size: contain;


}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	/* background: #fff; */
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	
	/* border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px; */
	
	/* -webkit-transform: rotate(30deg);
	transform: rotate(30deg);
    -moz-transform: rotate(30deg); */


   
    
}

/* .cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
} */

/*Time to animate*/
.x1 {
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
    opacity: 0.6; /*opacity proportional to the size*/
    
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 35s linear infinite;
	-moz-animation: moveclouds 35s linear infinite;
	-o-animation: moveclouds 35s linear infinite;
}

.x3 {
	left: -250px; top: -200px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.6; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 30s linear infinite;
	-moz-animation: moveclouds 30s linear infinite;
	-o-animation: moveclouds 30s linear infinite;
}

.x4 {
	left: 470px; top: -250px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 28s linear infinite;
	-moz-animation: moveclouds 28s linear infinite;
	-o-animation: moveclouds 28s linear infinite;
}

.x5 {
	left: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.6; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 30s linear infinite;
	-moz-animation: moveclouds 30s linear infinite;
	-o-animation: moveclouds 30s linear infinite;
}


.plane {
	width: 200px; height: 57px;
	/* background: #fff; */
	
	/* border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px; */
	
    position: relative; 
    

    background-image: url(../img/home-banner/plane.png);
    background-repeat: no-repeat;
    background-size: contain;


}
.x-plane5 {
 
	
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
	opacity: 1; /*opacity proportional to the size*/
	

	left: 470px; top: -410px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	 
}


@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

@keyframes float {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(-20px);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
}

/* #hero h1 span{display: block;} */
  .typing-container strong{display: block;}
  .typing-container span::after{
      content: '|';
      animation-name: blinking; 
      animation-duration: .71s; 
      animation-iteration-count: infinite;
  }
  @keyframes blinking{
      from{
          color: transparent; 
      }
      to{
          color: lightgrey; 
      }
  }



  


  @import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300');
 *, *::before, *::after {
	 box-sizing: border-box;
}
 /* h1 {
	 font-family: 'Arima Madurai', cursive;
	 color: black;
	 font-size: 4rem;
	 letter-spacing: -3px;
	 text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
	 position: relative;
	 z-index: 3;
}
 .container {
	 z-index: 1;
	 position: relative;
	 overflow: hidden;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 min-height: 35rem;
	 background-image: linear-gradient(to bottom, rgba(255, 168, 76, 0.6) 0%, rgba(255, 123, 13, 0.6) 100%), url('https://images.unsplash.com/photo-1446824505046-e43605ffb17f');
	 background-blend-mode: soft-light;
	 background-size: cover;
	 background-position: center center;
	 padding: 2rem;
} */
 .bird {
	 background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
	 background-size: auto 100%;
	 width: 88px;
	 height: 125px;
	 will-change: background-position;
	 animation-name: fly-cycle;
	 animation-timing-function: steps(10);
	 animation-iteration-count: infinite;
}
 .bird--one {
	 animation-duration: 1s;
	 animation-delay: -0.5s;
}
 .bird--two {
	 animation-duration: 0.9s;
	 animation-delay: -0.75s;
}
 .bird--three {
	 animation-duration: 1.25s;
	 animation-delay: -0.25s;
}
 .bird--four {
	 animation-duration: 1.1s;
	 animation-delay: -0.5s;
}
 .bird-container {
	 position: absolute;
	 top: 20%;
	 left: -10%;
	 transform: scale(0) translateX(-10vw);
	 will-change: transform;
	 animation-name: fly-right-one;
	 animation-timing-function: linear;
	 animation-iteration-count: infinite;
}
 .bird-container--one {
	 animation-duration: 15s;
	 animation-delay: 0;
}
 .bird-container--two {
	 animation-duration: 16s;
	 animation-delay: 1s;
}
 .bird-container--three {
	 animation-duration: 14.6s;
	 animation-delay: 9.5s;
}
 .bird-container--four {
	 animation-duration: 16s;
	 animation-delay: 10.25s;
}
 @keyframes fly-cycle {
	 100% {
		 background-position: -900px 0;
	}
}
 @keyframes fly-right-one {
	 0% {
		 transform: scale(0.3) translateX(-10vw);
	}
	 10% {
		 transform: translateY(2vh) translateX(10vw) scale(0.4);
	}
	 20% {
		 transform: translateY(0vh) translateX(30vw) scale(0.5);
	}
	 30% {
		 transform: translateY(4vh) translateX(50vw) scale(0.6);
	}
	 40% {
		 transform: translateY(2vh) translateX(70vw) scale(0.6);
	}
	 50% {
		 transform: translateY(0vh) translateX(90vw) scale(0.6);
	}
	 60% {
		 transform: translateY(0vh) translateX(110vw) scale(0.6);
	}
	 100% {
		 transform: translateY(0vh) translateX(110vw) scale(0.6);
	}
}
 @keyframes fly-right-two {
	 0% {
		 transform: translateY(-2vh) translateX(-10vw) scale(0.5);
	}
	 10% {
		 transform: translateY(0vh) translateX(10vw) scale(0.4);
	}
	 20% {
		 transform: translateY(-4vh) translateX(30vw) scale(0.6);
	}
	 30% {
		 transform: translateY(1vh) translateX(50vw) scale(0.45);
	}
	 40% {
		 transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
	}
	 50% {
		 transform: translateY(0vh) translateX(90vw) scale(0.45);
	}
	 51% {
		 transform: translateY(0vh) translateX(110vw) scale(0.45);
	}
	 100% {
		 transform: translateY(0vh) translateX(110vw) scale(0.45);
	}
}