*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
background: black;
font-family: 'Roboto', sans-serif;

}


/*.row{
	box-sizing: border-box;
	content: "";
  	clear: both;
  	display: table;
  	width: 100%;
}


.col{
	float: left;
  padding: 15px;
}

*/



/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

#email_number{
	display: flex;
	justify-content: space-between;
	text-align: center;
	color: darkorange;
	padding: 0px 6vw 5px 6vw;
	font-size: 1.3vw;
}

.email_number_icon{
	margin: 3px 5px 0 0;
	font-size: 1.5vw;
}


#email_number div{
	display: flex;
	padding-top: 2px;
}

#menu {
  position: relative;
  width: 100%;
  height: 10vh;
  display: flex;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;	
  justify-content: space-between;
  align-items: center;

}

#menu::before{
	content: "";
	position: absolute;
	width: 6%;
  height: 100%;
  border-radius: 48%;
  box-shadow: -50px -30px 20px 50px #00ffff;
	background: linear-gradient(#0099ff, #00c3ff);
	animation: glow 10s forwards infinite, rotate 10s linear infinite;
	

}

#menu::after{
content: "";
position: absolute;
background: white;
inset: 0.4vw;
border-radius: 5px;
}

@keyframes glow{
	 0% {left:-3vw; top:-5vh;}
   48% {left:96vw; top:-5vh;}
   50% {left:96vw; top:5vh;}
   98% {left:-3vw; top:5vh;}
   100% {left:-3vw; top:-5vh;}

  }

 @keyframes rotate{
 	0%{transform: rotate(0deg);}
 	48%{transform: rotate(0deg);}
 	50%{transform: rotate(90deg);}
 	52%{transform: rotate(180deg);}
 	98%{transform: rotate(180deg);}
 	100%{transform: rotate(360deg);}
 }

#menu_btn_open{
		display: none;
	}

#logo{
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

#logo img{
	padding-left: 2rem;
	max-width: 14rem;
	height: 80%;
}

#menu_option{
	position: relative;
	padding-right: 1vw;
	font-size: 1.5vw;
	z-index: 2;
	display: flex;
	justify-content: space-between;
}

#menu_option li{
	list-style-type: none;
	padding: 20px;
}

#mobile_menu{
	background: white;
	display: none;
}

#menu a{
	text-decoration: none;
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<< menubar for smaller media >>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

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

	#email_number{
		position: absolute;
		right: -3%;
		display: block;
		z-index: 1;
		margin: 10px 0 10px 10px;
		margin-top: 5px;
		font-size: 12px;
		font-weight: bolder;
		color: black;
		color: darkorange;	
	}

	#email_number span{
		font-size: 12px;
		font-weight: bolder;
		color: black;
	}

	#menu{
		justify-content: initial;
		height: 6vh;
	}

	#logo img{
		padding: 0;
		max-width: 7rem;
	}

	#menu_option{
		display: none;
	}

	#menu_btn_open{
		display: initial;
		padding: 20px 10px;
		z-index: 2;
		font-size: 2rem;
		font-weight: bolder;
	}

	#mobile_menu{
		position: absolute;
		display: flex;
		background-color: black;
		opacity: 0.7;
		width: 50vw;
		left: -80vw;
		border-radius: 5px;
		z-index: 3;
		box-shadow: 0px 0px 10px #00ffc3 ;

	}

		#mobile_menu a{
		text-decoration: none;
		color: white;
	}


	#mobile_menu_option{
		list-style-type: none;
		width: 100%;
		margin: 10px 10px 0 0;
	}

	#mobile_menu_option li{
		position: relative;
		display: flex;
		color: white;
		border: 2px solid #00b3ff;
		border-radius: 0 15px 15px 0;
		justify-content: space-around;
		align-content: center;
		padding: 5px;
		margin-bottom: 10px;
		box-shadow: 0 0 5px #00ffc3 ;
	}
}

/*   ////////////////////////////////  menu ends /////////////////////////////// */

/*///////////////////////////////////// hero ///////////////////////////////////*/


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Header font animation >>>>>>>>>>>>>>>>>>>>>>>>>>*/

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

.content{
	position: relative;
	width: 100%;
	padding-bottom: 7.5vw;
	text-align: center;
	font-family: "Poppins", sans-serif;
}

.content h1 {
	color: #fff;
	font-size: 6.5vw;
	position: absolute;
	width: 100%;
}

.content h1:nth-child(1) {
	color: transparent;
	-webkit-text-stroke: 2px #03a9f4;
}

.content h1:nth-child(2) {
	color: #03a9f4;
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< header font animation ends >>>>>>>>>>>>>>>>>>>>>>>*/

#heros{
	position: relative;
	height: 80vh;
	color: white;
}

#heros video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	opacity: 0.5;
}

.carousel-slide{
	position: absolute;
	display: flex;
	top: 0;
	width: 100%;
	height: 80vh;
	overflow: hidden;	
}

.slide_panel{
	width: 100%;
	height: 80vh;
	display: none;
	object-fit: cover;
}

.slide_row{
	display: flex;
	flex-wrap: wrap;
	height: 100%;
}

.col_1{
	width: 60%;
	height: 100%;
	display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
/*  overflow: hidden;*/
}

.col_2{
	width: 40%;
	height: 100%;
	padding-top: 2vw;
/*	padding-left: 1vw;*/
	text-align: center;
}

.tag-line{
	font-size: 1.7vw;
	margin-top: 2vw;
	text-align: center;
}

.heros-img{
	width: 85%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	animation: updown 3s linear infinite;
}

@keyframes updown{
	0%{
		transform: translateY(10px);
	}
	50%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(10px);
	}
}

@media screen and (max-width: 720px){
	.col_1{
		width: 100%;
		height: 50%;
		order: 2;
	}

	.col_2{
		width: 100%;
		height: 50%;
		order: 1;
	}

	.content{
		padding-bottom: 12vw;
	}

	.col_1 .content h1{
		font-size: 12vw;
	}

	.large-word{
		font-size: 10vw!important;
	}

	.tag-line{
		font-size: 90%;
		
	}

	.heros-img{
		margin-top: 20px;
		margin-left: 1vw;
		width: 85%;
		object-fit: cover;
	}

}


.slider_button{
	font-size: 3rem;
	padding: 1rem;
	align-self: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: white;
	position: absolute;
	opacity: 0.5;
	transition: 200ms;
}

#nextButton{
	right: 0px;
}

.slider_button:hover{
	opacity: 1;
}

.smooth-slide{
	animation: smooth-transition 1s;
}

@keyframes smooth-transition{
	from{
		opacity: 0.7;
		transform: translateX(var(--transitionValue));
	}
	to{
		transform: translateX();
		opacity: 1;
	}
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> brand flex <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

.brand-flex{
	display: flex;
	width: 200vw;
	height: 80px;
	background-color: white;
	justify-content: space-around;
	overflow: hidden;
	box-shadow: 0px 0px 10px #00ffc3

}

.brand-flex img {
  max-height: 100%;
  object-fit: contain;
}

.brand-flex {
  animation: slide 30s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Slide only one set of images */
  }
}


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

	.brand-flex{
		height: 30px;
	}

	.brand-flex img{
		padding: 0 15px;
	}
}
/* >>>>>>>>>>>>>>>>>>>>>  test zone <<<<<<<<<<<<<<<<<<<<< */

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eaeaea;
  margin: 10px;
}

@media (max-width: 600px) {
  #box1 {
    order: 2;
  }
  
  #box2 {
    order: 1;
  }
  
  #box3 {
    order: 3;
  }
}