/*===========================
15.PAGE BANNER css 
===========================*/


.page-banner{
	position: relative;
	background: -webkit-linear-gradient(left, rgba(15,169,208,1) 0%, rgba(63,189,82,1) 100%);
	background: -o-linear-gradient(left, rgba(15,169,208,1) 0%, rgba(63,189,82,1) 100%);
	background: linear-gradient(to right, rgba(15,169,208,1) 0%, rgba(63,189,82,1) 100%);
	display: -webkit-flex;
	display: flex;
	align-items: center;
	min-height: 40vh;
}

.page-banner:not(.type2) {
	padding-top: 115px;
	padding: 200px;

	@media #{$md}{
		padding-top: 100px;
		padding-bottom: 180px;
	}
	@media #{$xs}{
		padding-top: 80px;
		padding-bottom: 160px;
	}
}

.page-banner.type2{
	background: none;
	position: relative;
	top: 54px;
	padding: 60px 0;

	&:before{
		content: '';
		background: -webkit-linear-gradient(left, rgba(15,169,208,0.6) 0%, rgba(63,189,82,0.6) 100%);
		background: -o-linear-gradient(left, rgba(15,169,208,0.6) 0%, rgba(63,189,82,0.6) 100%);
		background: linear-gradient(to right, rgba(15,169,208,0.6) 0%, rgba(63,189,82,0.6) 100%);
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.page-banner-content{
		position: relative;
		z-index: 3;
	}
}

@media(max-width: 600px) {
	.page-banner.type2{
		display: none;
	}
}

.page-banner-content{
	// padding-top: 140px;
	
	@media #{$md}{
		padding-top: 105px;
	}
	@media #{$xs}{
		padding-top: 105px;
	}
	
	& .title{
		font-size: 48px;
		font-weight: 700;
		color: $white;
		
		@media #{$xs}{
			font-size: 30px;
		}
		@media #{$sm}{
			font-size: 40px;
		}
	}
	
	& p{
		color: $white;
		font-size: 18px;
		font-weight: 300;
		margin-top: 15px;
		
		@media #{$xs}{
			font-size: 16px;
		}
	}
}