/*learn from   https://www.youtube.com/watch?v=AkK8yHC4TlI */

body

{

	

	font-family:'Open sans',sans-serif;

	/* background: url("../image/bg4.jpg"); */

	background-repeat: no-repeat;

	/* background-size: 1000px 800px; */

	

}



.div-about

{

	width: 100%;

	top:0px;

	left:0px;	

	text-align: left;

	justify-content: left;	

	position: relative;		

}



.no-padding

{

	padding:0;

	margin:0;

}

.main-form

{

	padding-top:0;

	

	margin-left:auto;

	margin-right:auto;

	

}

.div-form

{

	padding-top:10px;	

	margin-left:auto;

	margin-right:auto;

	margin-top:10px;

	background:rgba(0,0,0, .2);

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

	padding-bottom:250px;

}

.custom-section {

	width: inherit;

	padding: 40px 0; }

	@media screen and (max-width: 991.98px) {

	  .custom-section {

		flex-direction: column-reverse; } }

	.custom-section .col-lg-4 {

	  margin-top: 100px; }

	  .custom-section .col-lg-4 h2 {

		font-weight: 700;

		font-size: 63px;

		color: #000;

		margin-bottom: 0;

		line-height: 1;

		white-space: nowrap; }

	  .custom-section .col-lg-4 h3 {

		font-weight: 300;

		font-size: 64px;

		color: #000;

		line-height: 1; }

	  .custom-section .col-lg-4 p {

		color: #000;

		font-size: 14px;

		margin-top: 30px; }

	  .custom-section .col-lg-4 a {

		display: inline-block;

		padding: 8px 22px;

		color: #fff;

		background-color: #1EA5F7;

		border: 1px solid transparent;

		margin-top: 60px;

		text-decoration: none;

		transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); }

		.custom-section .col-lg-4 a:hover {

		  color: #1EA5F7;

		  background-color: #fff;

		  border: 1px solid #1EA5F7; }

	.custom-section .col-lg-8 img {

	  width: 100%;

	  position: absolute;

	  top: -14rem;

	  right: -11%; }

	  @media screen and (max-width: 991.98px) {

		.custom-section .col-lg-8 img {

		  width: 100%;

		  position: relative;

		  top: 0;

		  right: 0; } }

	.custom-section .col-lg-8 .animate-img img {

	  width: 118px;

	  position: absolute;

	  top: -13.5rem;

	  right: 2.9rem; }

  











.mystyle

{

	background-color:purple;

	padding-left:0px;

	padding-right:0px;

	padding-top:0px;

	padding-bottom:0px;

	margin-left:0px;

	margin-right:0px;

	margin-top:0px;

	margin-bottom:0px;

}

.div-bg

	{

	z-index:-1;

	top:-8px;

	bottom:0px;	

	position:relative;	

	width: 100%;	

	justify-content:center;

	text-align:center;

	background: #494646;

	}

	.div-bg img

	{		

		max-width:100%;		

		opacity: 0.4;

	}



	a {

		background-color: transparent;

		color: transparent;

		text-decoration: none;



	}

	a:hover{

		background-color: transparent;

		color: transparent;

		text-decoration: none;



	}

* 

{

	

	margin:0;

	padding:0;

	list-style:none;

	text-decoration:none;     	

}

.div-Service

{

	position: absolute;

	display:block;

	align-items: center;	

	justify-content: center;

	left:0;

	right:0;

	margin-bottom:0;

	top:30%;

	bottom:50%;	

	color:white;

}

.imgService img

{

	/* height:200px;

	width: 200px; */

	margin-top: 50px;

	max-width:100%;

	max-height:100%;

	background: cover;

}

.h2Vision:after

{

	content: ' \0027';

}

.underlineBold

{

	text-decoration: underline;

	color:lightgreen;

	font-weight: bold;

}

.missionVission

{

	color:white;

}

.inner{

	overflow:hidden;

}

.inner img

{

	transition: all 1.5s ease;

	width:100%;

}

.inner:hover img

{

	transform:scale(1.5);

}

.jumbotron

{

	background:url("../image/bg4.jpg") top center fixed;

	background-size:cover;

	

	margin-top:0px;

	padding-top:0px;

}

.homeContainer

{

	margin-top:10px;	

	width:100%;

	align-content: center;

	justify-content: center;

}

.homeContainer h3{

	font-size:28px;

	font-weight: bold;

}

.homeContainer img

{

	width:400px;

	max-height:300px;

	background-size:cover;

}

.fullWidth

{

	margin-top:10px;

	/*position: relative;*/

	width:100%;

	/* background-color:orange; */

	align-content: center;

	justify-content: center;

	text-align:center;

}

.serviceBg

{

	position: relative;	

	background-color: purple; 

	text-align: center;

	align-content: center;

	justify-content: center;

	/* filter:blur(20px); */

	width:99%;

}

.contactBg

{	position: relative;	

	align-content: center;

	text-align:center;

	justify-content: center;

	width:100%;	

	margin:0;

	padding:0;

	background-image: url("../image/bgblack.jpg");

	/* filter:blur(20px); */

	width:100%;

	background-size:cover;

}

.contactDesc

{

	background-color:yellow; 

	color:black;

	max-width:100%;

	padding-bottom:100px;

}



/*below use for contact us page*/



.home-inner

{	

	background-image:url("../image/bgblack.jpg");

	position:fixed;

	display:table;

	top:0;

	left:0;

	width:100%;

	height:100%;

	background-size:cover;

	background-position:center center;

	-webkit-transform:translateZ(0);

	transform:translateZ(0);

	will-change:transform;

}

.caption {

	width:100%;

	max-width:100%;

	position:absolute;

	top:40%;

	z-index:1;

	padding:0 2rem;

}

.caption h3{

	color:white;

	font-size:2.4rem; /*40px*/

	text-transform: uppercase;

	padding-bottom:2rem;

}

.caption p{

	color:white;

	font-size:1rem;

}

.btn{

	border-width:medium;

	border-radius:0;

	text-transform: uppercase;

	padding:.5rem 1.1rem;

	font-size:.9rem;

}

h3.heading

{

	text-align:center;

	font-size:1.9rem;

	text-transform:uppercase;

	margin-bottom:1.9rem;

}

.padding

{

	padding: 2rem 0;

}

.landing

{

	position:relative;

	width:100%;

	height:100vh;

	display:table;

	background:#E9ECEF;

	z-index:-1;

}

.home-wrap

{

	clip:rect(0,auto,auto,0);

	position:absolute;

	top:0;

	left:0;

	width:100%;

	height:100%;



}



/* end of contact us css*/

.aboutBg

{

	position: absolute;

	right: 0;

	/* background-color: purple; */

	/* background:url("../image/bgblack.jpg"); */

	background-image: url("../image/bgblack.jpg");

	/* filter:blur(20px); */

	width:100%;

	background-size:cover;

}

.aboutDesc

{

	/* background-color:yellow; */

	color:white;

	max-width:100%;

	padding-bottom:100px;

}

.containerO

{

	z-index: -5;

	position:absolute;

	width:100%; 

	/*background-size: cover;*/

	/* width:100vw; */

}



.containerH{

				z-index:-1;

				position: absolute;

				left: 0;

				top: 0;

				width: 100%;

				height: 100vh;

				animation: animate 30s ease-in-out infinite;

				background-size: cover;

			}



			.outer{

				position: absolute;

				left: 0;

				top: 0;

				width: 100%;

				height: 100vh;

				background: rgba(0,0,0,0.5)

			}



			.details{

				position: absolute;

				left: 50%;

				top: 50%;

				transform: translate(-50%, -50%);

				text-align: center;

			}



			.details h1{

				font-size: 3em;

				color: #fff;

				padding: 10px;

			}



			.details h2{

				text-transform: capitalize;

				color: #fff;				

				padding: 10px;

				padding-bottom: 20px;

			}

			.details h3{

				font-size: 20px;

				color: white;

				padding-bottom: 10px;

			}

			.details h2 span:nth-child(1){

				color: red;

			}



			.details h2 span:nth-child(2){

				color: yellow;

			}





			@keyframes animate{

				0%,100%{

					background-image: url("../image/bg4.jpg");

				}

				25%{

					background-image: url("../image/bg3.jpg");

				}

				50%{

					background-image: url("../image/bg2.jpg");

				}

				75%{

					background-image: url("../image/bg1.jpg");

				}

			}



			.serviceBackground

			{

				top:50px;

				left:0px;

				position: absolute;

				background-color:red;

				color:black;

				z-index: -999;

			}

/*

button

{

	position:relative;

	color: white;

	background-color:black;

	width:200px;

	padding:10px;

	font-size:24px;

	font-weight:250;

	border:3px solid white;

	letter-spacing:2px;

	cursor:pointer;

	border-radius:50px;

	transition:1.5s;

}

button:hover

{

	box-shadow:0 5px 20px 0 white inset, 

	0 5px 20px 0 white,

	0 5px 20px 0 white inset, 

	0 5px 20px 0 white;	

}

*/



.nav1

{

		height:70px;

		/* background: #2c3e50; */

		 background: white; /*navigation bar bg color*/ 

		

}



/* slider section*/

.carousel-caption

{

	margin-bottom:10%;	

}

.carousel-caption h5{

	font-size:60px;

	color:white;

	text-transform: uppercase;

	background:rgba(0,0,0,0.6);

}

.carousel-caption p{

	font-size:20px;

}



/*start of social media*/

.fab {

	position:fixed;

	bottom: 80px;

	right: 32px;

	border-radius: 50%;

	width: 60px;

	/*height: 290px;*/

	/*box-shadow: 1px 2px 4px gray;*/

	z-index:3; 

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

}

.fab:hover{

	cursor: pointer;

	/*transform:rotate(45deg);*/

	transform:scale(1.2); /*it become bigger size 1.2*/

	-ms-transform:scale(1.2);

	transition:0.2s;

}

.fab img{

	width:100%;

	

}

.social

{

	z-index:2;

	position:fixed;

	bottom: 44px;

	right: 10px;	

	transition-delay: 0.1s;

	/*height: 290px;*/

	height: 0px;

	/*width:80px;	*/

	display:flex;

	flex-direction:column;

	justify-content: space-between;

}

.item{

	overflow: hidden;

	transform:scale(0.7);

	-ms-transform: scale(0.7);

	/*border-radius: 50%;*/ /*it made it circle */

	transition:0.3s ease-in;

	/*width:44px;

	height: 44px;*/

	display: flex;

	flex-direction: row;

	align-items: center;

	justify-content: center;

	/*box-shadow: 1px 1px 3px grey;*/

}



.item1,.item2,.item3,.item4,.item5{

	transition-delay: 0.1s;

	padding: 30px 20px;

}

.item5

{

	margin-bottom: 180px; /* to let the last icon higher than chat us icon*/

}

.item:hover{

	cursor: pointer; 

	transform:scale(1);

	-ms-transform: scale(1);

}

.social-active{

	height:440px;	

}



/*end of social icon*/



.nav1 img

{

	height:60px;

	width:80px; 

	position:absolute;

	top: 5px;

	left: 20px;

}

.nav1 div /*for company name*/

{

	position: absolute;

	top:20px;

	left: 120px;

	text-decoration:none;

	font-weight:bold;

	list-style:none;

	color: black;

	font-size: 18px;

	text-transform: uppercase;

}

.nav1 ul

{

	float: right;

	margin-right:25px;

	

}

.nav1 ul li 

{

	display: inline-block;

	line-height:60px;

	margin:0 15px;

}

.nav1 ul li a 

{

	position: relative;

	color: black;

	font-size: 18px;

	padding: 5px 0; /*let have some spacing for the text with underline top down 5px, left right 0*/

	text-transform: uppercase;

}

.nav1 ul li a:before  /*each menu bar text underline*/

{

	 position: absolute;

	 content:'';

	 left:0;	 

	 bottom: 0;

	 height: 3px;

	 width: 100%;

	 background: black;

	 transform: scaleX(0); 

	 -ms-transform: scale(0);

	 transform-origin:right; /*the line appear from right to left*/

	 -ms-transform-origin: right;

	 transition: transform .2s linear; /*animation for the line from left to right slowly .4 second*/

}

.nav1 ul li a:hover:before

{

	transform:scaleX(1);

	transform-origin:left; /*the line after mouse over at right side*/

	-ms-transform: scaleX(1);

	-ms-transform-origin: left;

}



.nav1-active{

	background-image: linear-gradient(

		180deg, rgba(255, 255, 255, 0.884),

		rgba(250, 240, 240, 0.959) 81%,

		#fff 81.1%,

		#fff 85%,

		/* rgba(252, 245, 245, 0.863) 85.1%, */

		#fff 90%,

		#fff 50%,

		#000 0%,

		/* rgba(14, 12, 12, 0.89) */

		#000

		);

		text-decoration: none;

}



label #btn1,

label #cancel1 /*hamburger sign*/ 

{

	color:black;

	font-size:30px;

	/* float: right; */

	position: absolute;

	line-height:60px;

	margin-right: 40px;  

	cursor:pointer;

	display:none; /*hide it first*/	

}

#check1{

	display:none;

}

/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */

/* Carousel base class */

.carousel {

  /*margin-bottom: 4rem; /*old*/ 

  box-shadow: 0 1rem 1rem rgba(0,0,0,.1); /**/

}

.carousel-inner

{

	max-height:38rem!important;

}

.carousel-item-next,

.carousel-item-prev,

.carousel-item.active

{

	transition:transform 1.2s ease;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  /* bottom: 3rem;

  z-index: 10; */

  position:absolute;

  top:54%;

  transform: translateY(-50%);

}



/* Declare heights because of positioning of img element */

.carousel-item {

  height: 32rem;

	

	

}

.carousel-item > img {

  position: absolute;  

  top: 0;

  left:0;

  bottom:0;

  right:0;

  margin:auto;



  /* margin-left:auto; */

  /* margin-right:auto; */

  /* display:block; */

 

  

  min-width:100%;  

  height: 32rem;

}



/* Footer CSS */

	.footer{

	/* margin-top:60px;   */

	z-index: 4;

	position:fixed;

	width: 100%;

	bottom: 0;

	height:50px;

	background-color:black;

	color: white;

	margin:0;

	text-align:center;	

	}



	.copyright

	{

		margin:12px;

		color: white;				

		/* vertical-align:center; */

	}



	.footer a{

	text-decoration: none;

	color: white;

	}



	.cardStyle

	{

		width:18em;

	}

	.divExtra

	{

		/*position: relative;*/

		display:block;

		margin:0;

		width:100%;

		height:30px;

		padding-bottom:80px;

	}

	.homeTopBox

	{

		position:relative;

		text-align:center;

		margin:10%;

		height:100px;		

		width:auto;

		color:white;

		background-color:black;

	}

	.homeBg

	{

		/* width:100%;

		background:url("../home/home.jpg");

		background-color:black;		

		margin-top:10px;

		position: absolute;

		top:10px;	

		/* background-color:orange; 

		align-content: center;

		justify-content: center;

		text-align:center; */

	position: relative;	

	align-content: center;

	text-align:center;

	justify-content: center;

	width:100%;

	

	margin:0;

	padding:0;

	background-size:cover;

	background-color:black;

	/*background-image: url("../image/homeH.jpg"); */

	/* filter:blur(20px); */

	

	/*background-size:cover;*/



	}

	.homeBg img

	{

		filter:blur(1px);

		max-width:100%;

		background:cover;

	}

	.homeText

	{

		position:absolute;

		top:30%;

		backdrop-filter:grayscale(0.8) opacity(0.4);

		text-align:center;

		align-items: center;

		justify-self: center;

		justify-content: center;

		padding:15px;

		margin-left:auto;

		margin-right:auto;

		width: 100%;

		

	}

	.homeBg h2,

	.homeBg h4

	{

		

		color:white;



	}

/* @media (max-width:1118px)

{

		.nav1 div{

			display:none;

		}

} */

@media (max-width:992px)

{

	/* .divExtra{

		/* position: relative;		

		visibility: visible;

		width:70%;

		margin:0;

		padding:0; 

		height:800px;

		background-color:yellow;

	}

	.cardDiv{

		

		background:yellow;

	}

	*/

	.cardDiv .cardStyle	

	{

		width:100%;		

	} 	

	.inner img

	{	

		width:100%;

	}



	/*start of social icon*/	

	.fab {

		visibility: hidden;

		}

		.social{

			position: fixed;

			height: 80px;

			width:100%;

			z-index:3;

			bottom:30px;

			right:0px;

			flex-direction: row;		

			background-color:black;

			justify-content: center;		

		}

		.item{		

			padding:0px;

			transition: none;

		}

		.item1,.item2,.item3,.item4,.item5{

			margin-bottom:0px;

			transition: none;

		}

		/*end of social icon*/

		

		

}

@media (max-width:768px)

{

	.homeContainer h3{

		font-size:24px;

		margin-left:15px;		

	}

	.divExtra{

		/* position: relative;		

		visibility: visible;

		width:70%;

		margin:0;

		padding:0; */

		height:120px;

		/*background-color:yellow;*/

	}

	.cardDiv{

		

		background:yellow;

	}

	.cardDiv .cardStyle	

	{

		width:100%;		

	}











	.nav1 div{

		display:none;

	}



	.div-bg{

		position:relative;

		/* top:50px; */

		/* margin: 15px 0px 15px 0px; */

		margin:0;

	}

	

	.div-Service {

		top:10px;

	}



	



	label #btn1	

	{

		color:black;

	font-size:30px;

	/* float: right; */

	line-height:60px;

	margin-right: 40px;  



	cursor:pointer;

	right: 0;

		position: absolute;

		display:block; /*appear out the hamburger sign*/

	}

	.nav1 ul 

	{

		z-index:3; /*overlap any other images */

		position:fixed;

		width:100%;

		height: 100vh;

		background:black;  

		top:65px; /*the whole black box behind from screen top 65px*/		

		text-align:center;

		/* left:-100%; /*original hide at left*/ 		  

		

		 right: -120%; /*to let the slide from right to left  */

		

		transition: all .8s; /*slide speed*/

		

	}

	.nav1 ul li { /*each menu wording */

		display:block;

		margin:50px 0; 		

		line-height:30px;		

	}

	.nav1 ul li a

	{

		color:white;		

		font-size:20px; 

	}

	#check1:checked ~ ul 

	{

		/*width:100%;		 /*width of the block*/

		 /*left:0; /*this line is for slide from left to right during mobile view*/		 

		 /*below two line for slide right to left */		 

		  margin-right:0px;		  

		  right:0;  		 

	}

	#check1:checked ~label #btn1

	{

		display:none; /*hide it*/

	}

	#check1:checked ~ label #cancel1

	{

		margin-right: 40px;

		right:0;

		display:block;

	}

	.nav1-active{

		

		background-image: linear-gradient(

		180deg, rgba(15, 15, 4, 0.795),

		rgba(0,0,0,0) 81%,

		#222222 81.1%,

		#222222 85%,

		rgba(245, 236, 236, 0.76) 85.1%,

		rgba(240, 229, 229, 0.89)

		);

		text-decoration: none;

	}

	/*below to let the underline remain working for mobile , but the color become white */

	.nav1 ul li a:before  /*each menu bar text underline*/

	{

	 position: absolute;

	 content:'';

	 left:0;	 

	 bottom: 0;

	 height: 3px;

	 width: 100%;

	 background: white;

	 transform: scaleX(0); 

	 transform-origin:right; /*the line appear from right to left*/

	 -ms-transform-origin: right;

	 -ms-transform: scale(0);

	 transition: transform .2s linear; /*animation for the line from left to right slowly .4 second*/

	}

	.nav1 ul li a:hover:before

	{

		transform:scaleX(1);

		-ms-transform: scaleX(1);

		transform-origin:left; /*the line after mouse over at right side*/		

		-ms-transform-origin: left;

	}	

}