*{
	padding: 0;
	margin: 0;
	  font-family: 'Poppins', sans-serif;  
}

.header{
		min-height: 100vh;
	width: 100%;
	background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/inoimage.jpg);
		background-position: center;
		background-size: cover;

		position: relative;
 
	
}


nav{
	
	display: flex;
	padding: 2% 6%;
	justify-content: space-between;
	align-items: center;
}

 nav img{
	width: 200px;
	height: 120px;


 }
  .nav-links{

		flex: 1;
		text-align: right;
		

  }
  
  
    .nav-links ul li{
		list-style: none;
		display: inline-block;
		padding: 8px 12px;
		position: relative;
 
	}
	    .nav-links ul li a{
			color: #fff;
			text-decoration: none;
			font-size: 13px;
			
			
		}
 	 
	     .nav-links ul li::after{

		content: '';
		width:0%;
		height: 2px;
		background: #f44336;
		display: block;
		margin: auto;
		transition: 0.5s;
	 
		 }
		.nav-links ul li:hover::after{
					 
				width:100%;
      	}
				 
	.text-box{

	width: 90%;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	 
	}		
	
	.text-box h1{

		font-size: 62px;
		}
		
	.text-box p{

		margin: 10px 0 40px;
		font-size: 14px;
		color: #fff;
		 
	}
	
	.hero-btn{
				display: inline-block;
			text-decoration: none;
		color: #fff;
	border: 1px solid #fff;
	padding: 12px 34px;
	font-size: 13px;
	background: transparent;
	position: relative;
	cursor: pointer;
		
		
	}
			.hero-btn:hover{

	border: 1px solid #f44336;;
	background: #f44336;
	transition: 1s;
	 
			}
			
		 	
		nav .fa{
				display:none; 
				
			}
 		
			
			@media(max-width: 700px){
				
	.text-box h1{

		font-size: 20px;

				
			}
			
			
	.nav-links ul li{

display: block;


		}	
		
			.nav-links{
			/* position: absolute; */

			position: fixed;  
	background: #f44336;
	height: 100vh;
	width: 200px;
	top: 0;
	right: -200px;
	text-align: left;
	z-index: 2;
	  transition: 1s;  

			}
			
			
			
				nav .fa{
			display: block;
			color: #fff;
			margin: 10px;
			font-size: 22px;
			cursor: pointer;
			 	}
		
				
		
					.nav-links ul{
	padding: 30px;


					}
		
			
			
		
			}
						
		
 

/*------- Aout us -------*/		
	.about{
		
		width: 80%;
		margin: auto;
		text-align: center;
		padding-top: 10px;
		


	}
	h1{

		font-size: 30px;
		font-weight: 600;

	}

	p{

	color:#777;
			font-size: 14px;
		font-weight: 300;
		line-height: 22px;
		padding: 10px;

	}		
					
	.row{

	margin-top: 5%;
	display: flex;
	justify-content: space-between;
	}

	.course-col{
		
		flex-basis: 45%;
		background: #fff3f3;
		border-radius: 10px;
		margin-bottom: 5%;
		padding: 20px 12px;
		box-sizing: border-box;
		transition: 0.5s;
	}
	
	h3{
		text-align: center;
		font-weight: 600;
		margin: 10px 0;
		
	}
		.course-col:hover{

		box-shadow: 0 0 20px rgba(0,0,0,0.2);

		}

				
	@media(max-width: 700px){

	.row{
	
	flex-direction: column;

	}



	
	
	}
	 
	 
	 	/* -----Services -----*/
	
		.services{
		
		width: 80%;
		margin: auto;
		text-align: center;
		padding-top: 10px;
		
	}
	
	 
	 
/* <!-- services-col--> */
.main_container{
		 	flex-basis: 32%;
					margin-bottom: 30px;
 border-radius: 10px;
 		overflow: hidden;   

 /* border-radius: 10px;
		position: ralative;  
		overflow: hidden;   
	 margin: 6% 0 0 36%; */
	position: relative;
	/* width: 25%; */
	
	
}

/* <!-- 	.services-col img --> */


.image{
	
	display:block;
	width: 100%;
	height: auto;
	
}

/* <!-- layer --> */

.overlay{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		/* background-color: rgba(0,0,0,0.75); */
		
				 	  background: rgba(226,0,0,0.7);  
        color: #fff;	
        overflow: hidden;
		width: 100%;
		height: 0;
		transition: 0.5s ease;
		
		
}


.main_container:hover .overlay{
	height: 100%;
	
}
 
 	.location{
 		width: 80%;
		margin: auto;
/* padding: 80px; */
		
 		text-align: center;
		padding-top: 10px;
		
		
		
		
		
	}


		.location iframe{
			
			width: 100%;
			
			
		}
 


		.contact-us{
	
	width: 80%;
	margin:auto;
	text-align: center;
		padding-top: 10px;
		
		}
		
				.contact-col{
					
					flex-basis: 48%;
					margin-bottom: 30px;
					
				}

		.contact-col div{
			display: flex;
			align-items: center;
			margin-bottom: 40px;
				text-align: left;

			
		}

		.contact-col div .fa{

		font-size: 28px;
		color: #f44336;
		margin: 10px;
		margin-right: 30px;

		}
		
				.contact-col div p{

			padding: 0;
			

				}
				
			.contact-col div h5{
						font-size: 20px;
					margin-bottom: 5px;
					color: #555;
					font-weight: 400;

										
			}
			
			.contact-col input, .contact-col textarea{
				
				width: 100%;
				padding: 15px;
				margin-bottom: 17px;
				outline: none;
				border: 1px solid #ccc;
				
				
				
				
			}
			
			 .form-btn {
	
	
	
	display: inline-block;
			text-decoration: none;
		color: #fff;
	border: 1px solid #fff;
	padding: 12px 34px;
	font-size: 13px;
	background: #B9DFFF;
	position: relative;
	cursor: pointer;
	
	
}

.form-btn:hover {
	background: #016ABC;
	color: #fff;
	border: 1px solid #eee;
	border-radius: 20px;
	box-shadow: 5px 5px 5px #eee;
	text-shadow: none;
}


.footer{
	width: 100%;
	text-align: center;
	padding: 30px 0;
}

.footer h4{
		
		margin-bottom: 25px;
				margin-top: 20px;
		font-weight: 600;


}

.icons .fa{
	
	color: #f44336;
	margin: 0 13px;
	cursor: pointer;
	padding: 18px 0;
	
}

.copy{
font-weight: bold;	
}


/*---- Products ----*/
 
.sub-header{
	height: 50vh;
	width: 100%;
	
		background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/downloadinno.jfif);

	background-position: center;
	background-size: cover;
	text-align: center;
	color: #fff;
	
}

.sub-header h{

margin-top: 100px;

}

.products{
		
		width: 80%;
		margin: auto;
		text-align: center;
		padding-top: 10px;
		


	}
	
	
		.tgate{
		
		width: 80%;
		margin: auto;
		text-align: center;
		padding-top: 10px;
		
	}
	
	 		.tgate h1{

		color: green;
 
			}