@font-face{
	font-family : ubunto;
	src:url(../fonts/Ubuntu-Regular.ttf);
	font-weight:400;
}
@font-face{
	font-family : ubunto;
	src:url(../fonts/Ubuntu-Bold.ttf);
	font-weight:bold;
}
@font-face{
	font-family : ubunto;
	src:url(../fonts/Ubuntu-Light.ttf);
	font-weight:lighter;
}

:root{
	--main-color:#3375ec;
	--main-color-dark:#2c343b;	
	--secondary:#ff6f80;
}
::selection{
	color:white;
	background-color: gray;	
}
body,html,ul,li,ol,p,h1,h2,h3,h4,h5,h6{
	margin: 0;
	padding: 0;
	font-family:ubunto;
}
h1,#h2{
	width: 0.001px;
	height: 0.001px;
	opacity:0.001;
	overflow: hidden;
}
*{
	box-sizing:border-box;	
}
a{
	color:black;
	text-decoration: none;	
}
a:link,a:visited,a:hover,a:active{
	color:black;
	text-decoration: none;	
}
.animated{
	transition:0.6s ease all;	
}
.btn{
	border:none;
	background-color: #fff;	
	padding:12px 40px;
	cursor:pointer;
	box-shadow:0 2px 5px 1px rgba(0,0,0,0.4);
}
.btn-rounded{
	border-radius:30px;	
}
.btn-outline{
	border:solid 1px white;
	background-color: transparent;	
	color:white;
}
.btn-primary{
	border:none;
	background-color: var(--main-color);	
	color:white;
}
.btn-white{
	background-color:white;
	color: #000;
}
.btn-outline-primary{
	border-color:var(--main-color);
	color:var(--main-color)	;
	background-color: transparent;
}
.btn-outline-hover:hover{
	border-color:var(--main-color);
	color:var(--main-color)	;
	background-color: transparent;
}
.first-screen{
	background: url(../img/1.jpg);	
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;	
}
header{
	display:flex;
	width: 100%;	
	padding:35px 90px;
	align-items:baseline;
}
header .logo-wrapper{
	width: 10%;
}
header .logo-wrapper img{
	vertical-align: middle;
}
header .menu-wrapper{
	width: 70%;	
	margin-left: 7%;
}
	.menu-wrapper .main-menu{
		display: block;
		width: 100%;
	}	
	.menu-wrapper .main-menu .menu-item{
		display: inline-block;
		list-style-type: none;
		color:white;		
		font-weight:bold;
		vertical-align: middle;
		padding:3px 12px;
	}
		.main-menu .menu-item.active .menu-item-link{
			color:var(--main-color);
		}
			.main-menu .menu-item .menu-item-link{
				color:white;				
				transition:0.6s ease all;
			}
				.menu-item .menu-item-link:hover{
					color:var(--main-color);
				}
				.menu-item.active .menu-item-link:hover{
					color:var(--main-color-dark);
				}
header .sign-in-wrapper{
	width: 20%;
	text-align: right;	
}
header .sign-in-wrapper button{
	vertical-align: middle;
	position:relative;
	overflow:hidden;
}
	.sign-in-wrapper button span{
		transform:translate(0,0);	
	}
	.sign-in-wrapper button:after{
		content:'Sign In';
		position:absolute;
		right:100%;
		transition:0.6s ease all;
		width: 100%;
	}
	.sign-in-wrapper button:hover::after{
		right: 50%;			
		transform:translateX(50%);
	}
	.sign-in-wrapper button:hover span{
		transform:translate(200%,0);
		display: inline-block;
	}
	.sign-in-wrapper button:hover{
		background-color: var(--secondary);
	}
.first-screen .first-screen-text{
	padding: 140px;	
	padding-right: 0;
	padding-bottom: 50px;
}
	.first-screen-text .first-screen-title{
		color:white;
		font-size:40px;	
		padding-bottom: 40px;
	}
	.first-screen-text .first-screen-content{
		font-size:20px;
		font-weight:lighter;
		color:white;
		padding-bottom: 80px;	
	}
	.first-screen-text .btn{
		padding:25px 50px;	
		border-radius:40px;
		margin-right: 20px;
	}
	
main{
	padding-top: 80px;
	padding-bottom: 50px;
	background-color: #e0e0e0;	
}
.badge-wrapper{
	text-align: center;
	width: 100%;	
}
	.badge-wrapper .badge{
		padding:5px 15px;
		display: inline-block;
		background-color: #e5ebf7;
		color:var(--main-color);
		border-radius:15px;
	}	

main h3{
	font-weight:400;
	padding-top: 20px;
	padding-bottom: 50px;
	font-size:44px;	
	text-align: center;
}
main .cards-wrapper{
	display:flex;
	width: 100%;
	flex-wrap:wrap;
	padding-left: 70px;
	padding-right: 70px;
	padding-bottom: 150px;	
}
	.cards-wrapper .card-wrapper{
		background-color: #f5fbff;
		width:29.7%;
		padding:20px;
		margin: 20px;
		box-sizing:border-box;
		box-shadow:0 0 15px 1px rgba(0,0,0,0.2);
		text-align: center;
	}	
		.card-wrapper .icon-wrapper-wrapper{
			height: 110px;
			margin-bottom: 55px;
			margin-top: 15px;
		}
		.card-wrapper .icon-wrapper{
			width: 110px;
			height: 110px;
			line-height: 110px;
			text-align: center;
			font-size:50px;
			color:var(--main-color);
			background-color: #e5ebf7;	
			border-radius:50%;
			display: inline-block;
			margin-bottom: 55px;
			margin-top: 15px;
			transition:all 0.6s ease;
		}
			.icon-wrapper:hover{
				width: 80px;
				height: 80px;
				line-height: 80px;
				margin-top:30px;	
				
			}
		.card-wrapper .card-heading{
			font-size:26px;	
			letter-spacing:3px;
			padding-bottom: 25px;
			text-shadow:1px 1px 3px rgba(0,0,0,0.3);
/*			text-shadow:hoff voff blur color;*/
		}
		.card-wrapper .card-text{
			color:#454b87;
			line-height: 1.6;
			word-spacing:5px;
			margin-bottom: 30px;
		}
	
	
.about-wrapper{
	display:flex;
	flex-wrap:wrap;
	background-color: var(--main-color);
	padding: 100px;
	padding-left: 40px;
	padding-bottom: 200px;
}

	.about-wrapper .video-wrapper{		
		overflow: hidden;
		width: 50%;
		height: 400px;
		box-sizing:content-box;
		border-radius:10px;
		position:relative;
		
	}	
	.about-wrapper .first-image{
		width: 100%;
		height: 100%;
		background: url(../img/2.jpg) , rgba(0,0,0,.5);	
		background-blend-mode:multiply;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		background-position: center center;
		transition:.6s ease all;		
	}
	.about-wrapper .first-image:hover{
		transform:scale(1.2,1.2);
	}
	.video-wrapper .play-wrapper{
		position:absolute;
		left: 50%;
		top: 50%;
		transform:translate(-50%,-50%);
		color:white;
		font-size:30px;
		border-radius:10px;
		overflow: hidden;
		padding: 20px;
		cursor:pointer;
	}
	.video-wrapper .play-wrapper:hover .top{
		width: 100%;
		transition:0.6s ease;
	}
	.video-wrapper .play-wrapper:hover .right{
		height: 100%;
		transition:0.6s ease 0.6s;
	}
	.video-wrapper .play-wrapper:hover .bottom{
		width: 100%;
		left:0;
		transition:0.6s ease 1.2s;
	}
	.video-wrapper .play-wrapper:hover .left{
		top: 0;		
		height: 100%;
		transition:0.6s ease 1.8s;
	}
	.top,.right,.left,.bottom{
		position:absolute;	
	}
	.top{
		top: 0;
		left: 0;
		width: 0;
		height: 3px;
		background-color: #fff;
		
	}	
	.right{
		top: 0;
		right: 0;
		width: 3px;
		height: 0;
		background-color: #fff;
		
	}	
	.bottom{
		bottom: 0;
		left: 100%;
		width: 0;
		height:3px;
		background-color: #fff;
		
	}	
	.left{
		top: 100%;
		left: 0;
		width: 3px;
		height: 0;
		background-color: #fff;		
	}	
	#video{
		width: 70%;
		margin-left: 15%;
		position:fixed;
		top: -800px;
		transition:0.6s ease;		
	}
		#video .close{
			font-size:50px;
			color:white;
			width: 40px;
			height: 40px;
			line-height: 32px;
			text-align: center;
			border-radius:50%;
			background-color: rgba(0,0,0,0.6);
			position:absolute;
			top: 50px;
			right: 50px;
			cursor:pointer;	
			transition:0.6s ease;		
			display: block;
		}
		#video .close:hover{
			background-color: rgba(0,0,0,1);	
		}
	#video:target{
		top: 80px;	
	}
.text-wrapper 	{
	text-align: center;
	width: 50%;	
	padding-left: 100px;
}
	.text-wrapper .badge-wrapper{
		width: 100%;	
		text-align: left;
	}
	.text-wrapper .badge{
		background-color: rgba(255,255,255,0.2);
		color:white;
		font-weight:bold;
		font-size:14px;
	}
	.text-wrapper .about-text-heading{
		color:white;
		margin-top: 20px;
		font-size:36px;	
		letter-spacing:3px;
		word-spacing:6px;
	}
	.text-wrapper .about-text-text{
		color:white;
		word-spacing:5px;	
		margin-top: 15px;
		font-size:18px;
		line-height: 1.42;
		margin-bottom: 40px;
	}
	.text-wrapper .about-list{
		color:white;	
		margin-bottom: 40px;
	}
	.text-wrapper .read-more{
		position:relative;
		background-color: #fff;
		color:black;
		overflow: hidden;
		transition:0.3s ease;
		box-shadow:none;
	}
	.text-wrapper .read-more:hover{
		background-color: var(--secondary);
		border-color:var(--secondary);	
	}
	.text-wrapper .read-more:hover::before{
		left: 200px;
		transition:.6s ease 0.1s;
	}
	.text-wrapper .read-more:hover::after{
		z-index:1;
	}
	.text-wrapper .read-more::before{
		content:'';
		background-color: var(--secondary);		
		display: block;
		position:absolute;
		top: -7px;
		left: -150%;
		width: 140%;
		height: 50px;
		transform:skewX(40deg);		
		z-index:2;
	}
	.text-wrapper .read-more::after{
		content:"Read More";
		display: block;
		position:absolute;
		top: 0;
		left: 0;
	    padding: 12px 40px;	
		color:white;
		z-index:-1;
	}
		.about-list li{
			padding-left: 10px;	
			padding-bottom: 10px;
			font-size:20px;
			transform:translateX(17px)
		}
		

	#why-us-wrapper {
		padding: 50px;
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
		background-color: #e0e0e0;			
	}
	#why-us-wrapper .badge-wrapper{
		text-align: left;
	}	
	#why-us-wrapper .heading{
		font-size:42px;
		font-weight:normal;
		color:#303030;	
		padding-bottom: 40px;
	}
	#why-us-wrapper .text{
		color:#3a3a3a;
		padding-bottom: 40px;
		line-height: 1.5;	
	}
	#why-us-wrapper .list{
		list-style-type: none;
		margin-left: 20px;
		list-style-image:url(../img/bullet.png);
	}
	#why-us-wrapper .list li{
		padding-top: 15px;	
	}
	#why-us-wrapper .left-side,	#why-us-wrapper .right-side{
		width: 50%;
	}
	#why-us-wrapper .left-side{
		padding-right: 9%;
		padding-top: 20px;
		padding-left: 5%;	
	}
	#why-us-wrapper .right-side{
		transform:translateX(-20px);
	}
	#why-us-wrapper .right-side img{
		box-shadow:0 0 15px 0 rgba(0,0,0,0.1);	
	}
	#our-team{
		padding: 50px;	
		position:relative;
		overflow: hidden;
	}
	#our-team .heading{
		font-size:42px;
		font-weight:400;		
		text-align: center;
		margin-top: 20px;
	}
	[class*=-team]{
		display:flex;
		flex-wrap:wrap;
		margin-top: 20px;
		width: 90%;
		justify-content:center;
	}
	.team-member-wrapper{
		box-shadow:0 0 7px 1px rgba(0,0,0,0.2)	;
		position:relative;
		overflow: hidden;
		margin-top: 50px;
		margin-right: 1.5%;
		margin-left: 1.5%;
	}
	.desc-wrapper {
		text-align: center;
		margin-top: -3px;
	}
	.desc-wrapper-heading{
		font-size:20px;
		letter-spacing:2px;
		color:#4f4f4f;
		padding-top: 35px;
		padding-bottom: 5px;
	}
	.desc-wrapper .text{
		font-size:16px;
		letter-spacing:2px;
		color:#6a6a6a;
		padding-bottom: 70px;
	}
	.team-member-wrapper .over{
		position:absolute;
		background-color: var(--main-color);	
		color:white;
		width: 100%;
		height: 155px;	
		bottom:-26%;
		right:80%;
		transition:all .6s ease;
	}
	.team-member-wrapper .over .icon-wrapper{
		text-align: right;
		padding-top: 15px;	
		padding-right: 15px;
	}
	.team-member-wrapper .over .mdi-arrow-bottom-left{
		transform:rotate(180deg)	;
		display: inline-block;
		font-size:20px;
		transition:0.6s ease;
	}
	.team-member-wrapper:hover .over{
		right: 0;
		bottom:0;
	}
	.team-member-wrapper:hover .over .mdi-arrow-bottom-left{
		transform:rotate(0);	
	}
	.over-heading{
		font-size:26px;
		font-weight:normal;
		color:#efefef;	
	}
	.over-icons{
		font-size:28px;
		padding-top: 30px;	
	}
	.over-icons .mdi{	
		padding-right: 15px;
		padding-left: 15px;
		transition:0.6s ease all;
	}
	.over-icons .mdi:last-child{	
		padding-right: 0;
		padding-left: 3px;
	}
	.over-icons .mdi:hover{
		color:khaki;
		cursor:pointer;	
	}
	.pagination-wrapper{
		width: 88%;
		margin-left: 6%;
		text-align: center;
		margin-top: 50px;
	}
	.pagination-wrapper .bullet{
		width: 15px;
		display: inline-block;
		height: 15px;
		margin-right: 15px;
		border:solid 2px var(--main-color);
		border-radius:50%;
		transition:0.6s ease all;
		cursor:pointer;
		background-color: #fff;
	}
	.pagination-wrapper .bullet:hover{
		background-color: var(--main-color);
	}
	#second-team,#first-team{
		width: 100%;	
		padding-bottom: 20px;
		transition:0.6s ease;
	}
	#first-team{
		position: absolute;
		left: 100%;	
		opacity: 0;
		transition:0.6s ease all;
		z-index:1;	
	}
	#first-team:target{
		opacity: 1;
		left: 0;
	}
	#first-team:target~#second-team{
		opacity: 0;
		
	}
	.popular-questions-wrapper{
		display:flex;
		width: 100%;
		flex-wrap:wrap;
		justify-content:space-around;
		padding: 50px;
		padding-left: 5%;
		margin-top: 180px;
		background-color: #efefef;
	}
	.popular-left-side{
		width: 40%;
	
	}
	.popular-right-side{
		width: 60%;
		padding: 50px;
		padding-top: 10px;
	}
	.popular-left-side .badge-wrapper{
		text-align: left;	
	}
	.faq{
		font-size:40px;
		font-weight:normal;
		color:#3a3a3a;
		padding-top: 30px;
		padding-bottom: 40px;	
	}
	.row{
		border-bottom:solid 1px gray;			
		color:#6a6a6a;
		font-size:28px;
		font-weight:bold;
	}
	.row span{
		display: inline-block;
		padding: 20px 0px;	
	}
	.underline{
		border-bottom:solid 2px var(--main-color);	
	}
	.float-right{
		float: right;
		cursor:pointer;
	}
	.clearfix{
		clear:both;	
	}
	.comment-wrapper{
		padding: 50px 30px;
		box-shadow:0 0 10px 1px rgba(0,0,0,0.2)	;
		border-radius:5px;
		margin-bottom: 10px;
		background-color: #fff;
	}
	.comment-heading{
		color:var(--main-color);
		font-size:24px;
		font-weight:normal;
		margin-bottom: 20px;	
	}
	.comment-text{
		line-height: 1.6;
		color:#3a3a3a;
		text-align: justify;	
		-ms-text-align-last: left;
		text-align-last: left;
	}
	.our-partners-wrapper {
		background-color: var(--main-color);	
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.our-partners-wrapper .badge{
		color:white;
		background-color:rgba(255,255,255,0.3);	
	}
	.our-partners-wrapper .heading{
		color:white;
		font-size:30px;
		font-weight:normal;
		text-align: center;	
		margin-top: 10px;
		padding-bottom: 40px;
	}
	.partners img{
		width: 6%;
		margin-left: 6.4%;
		margin-right: 6.4%;
		transition:0.6s ease all;
		opacity:1;
		cursor:pointer;
	}
	.p-img:hover{
		opacity:0.4;	
	}