@import url(theme.css);

.accent.solutions{background-color: #ffb310 !important;}

/*===================*/
.banner-section>div{
	padding: 130px 0 60px;
	min-height: 530px;
}

.banner-section>div.solutions-fade{
	position: relative;
	background: -webkit-linear-gradient(to bottom, rgba(255,215,0,1), rgba(255,215,0,0));
	background: -moz-linear-gradient(to bottom, rgba(255,215,0,1), rgba(255,215,0,0));
	background: linear-gradient(to bottom, rgba(255,215,0,1), rgba(255,215,0,0));
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.banner-section .solutions-fade:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 300px;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,1) 100%);
}

.banner-section .solutions-fade svg{
	position: absolute;
	top: 0;
	left: 0;
	height: 90%;
	width: 100%;
	z-index: -1;
}

.banner-section .solutions-fade svg .lines{
	opacity: 0.05;
}

.banner-section .solutions-fade svg .line{
	fill-rule: evenodd;
	clip-rule: evenodd;
	fill: #ECC0B0;
}

.banner-section .solutions-fade svg .lights{
	opacity: 0.9;
}

.banner-section .solutions-fade svg .light{
	fill-rule: evenodd;
	clip-rule: evenodd;
	fill: #ECC0B0;
}



.banner-section .home-banner{
	min-height: 500px;
}

.banner-section .home-banner .brand-title{
	padding-top: 7.8rem;
}

.home-banner .body .home-big-title{
	font-size: 66px;

}

.home-banner .body .home-big-title span{
	font-size: 28px;
	line-height: 2;
}

.home-banner .body .home-small-title{
	text-align: justify;
	text-align-last: center;
}

.banner-section .box>div{
	background: #ffffff;
	min-height: 150px;
	padding: 1.5rem;
	text-align: right;
	-webkit-box-shadow: 0 30px 25px -15px rgba(255,215,0,0.15), 0 25px 40px -20px rgba(255,215,0,0);
	-moz-box-shadow: 0 30px 25px -15px rgba(255,215,0,0.15), 0 25px 40px -20px rgba(255,215,0,0);
	-ms-box-shadow: 0 30px 25px -15px rgba(255,215,0,0.15), 0 25px 40px -20px rgba(255,215,0,0);
	box-shadow: 0 30px 25px -15px rgba(255,215,0,0.15), 0 25px 40px -20px rgba(255,215,0,0);
}

.banner-section .home-banner .box>div i{
	color: #ffb310;
}

.banner-section .home-banner .box>div p{
	font: 100 14px/1.6 "Shabnam", sans-serif;
	margin-bottom: 0;
}

.banner-section canvas{
	position: absolute;
	top:60px;
	left: 0;
	z-index: -5;
}

.feature-section .feature-body{
	padding-top: 1rem; 
}

.feature-section .feature-body a, .trend-section .trend-container a, .cloud-section .cloud-container a{
	color: rgb(10, 111, 249);
	font-weight: 600;
}

.feature-section .feature-body a:hover, .trend-section .trend-container a:hover, .cloud-section .cloud-container a:hover{
	color: #26304e;
}


.feature-section .even .feature-body{
	padding-right: 2rem;
	padding-left: 0;
}

.feature-section .feature-body p {
	font: 100 16px/1.6 "Shabnam", sans-serif;
}

.feature-section .feature-body ul.inline-bold{
	font: 300 14px/1.63 "Shabnam", sans-serif !important;
	margin-bottom: 2rem;
}

.feature-section .feature-body ul.inline-bold li{
	position: relative;
	margin-bottom: 0.8em;
	padding-right: 1rem;
}

.feature-section .feature-body ul.inline-bold li:before{
	content: '•';
	font-weight: 600;
	font-size: 24px;
	line-height: 1.25;
	position: absolute;
	top: 0;
	right: 0;
	color: #0a6ff9;
}

.feature-section .feature-body ul.inline-bold li:last-child{
	margin-bottom: 0;
}

.trend-section, .cloud-section{
	margin: 4rem 0; 
}

.trend-section .trend-container, .cloud-section .cloud-container{
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 220px;
	border-radius: 12px;
	padding: 0 36px;
}

.trend-section .trend-container{
	background: rgba(0,170,220,0.05) url('../img/svg/landing-curves.svg');
	background-position: right 20px top 10px;
	background-repeat: no-repeat;
	background-size: cover;
}

.cloud-section .cloud-container{
	background: rgba(233,239,243,0.5) url('../img/svg/landing-curves.svg');
	background-position: left 20px bottom 0px;
	background-repeat: no-repeat;
	background-size: cover;
}

.trend-section .trend-container .trend-icon, .cloud-section .cloud-container .cloud-icon{
	color: #0021a5;
}

.trend-section .trend-container .trend-body h2, .cloud-section .cloud-container .cloud-body h2{
	margin: 0;
}

.trend-section .trend-container .trend-body p, .cloud-section .cloud-container .cloud-body p{
	margin: 0.5rem 0 0 0;
}


/* Smartphones (portrait) ----------- */
@media only screen and (min-width: 320px) and (max-width: 479px){

	.banner-section>div{
		padding: 130px 0 60px;
		min-height: 500px;
	}


	.home-banner .body{
		position: unset;
		left: unset;
		width:unset;
		
		-webkit-transform: unset;
		-moz-transform: unset;
		-ms-transform: unset;
		transform: unset;
		text-align: center;
	}
	
	.banner-section .home-banner .brand-title{
		padding-top: 2.8rem;
	}

	.home-banner .body .home-big-title{
		font-size: 46px;

	}

	.home-banner .body .home-big-title span{
		font-size: 24px;
		display: block;
		line-height: 1.4;
		padding: 10px;
	}

	.banner-section .home-banner .box{
		padding-bottom: 1rem;
	}

	.trend-section .trend-container, .cloud-section .cloud-container{
		padding-top: 2rem;
		padding-bottom: 3rem;
	}

	.trend-section .trend-container .trend-icon, .cloud-section .cloud-container .cloud-icon{
		text-align: right;
	}

	.feature-section .even .feature-body{
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 480px) and (max-width: 767px){

	.banner-section>div{
		padding: 100px 0 60px;
		min-height: 400px;
	}

	.banner-section .home-banner{
		min-width: 400px;
	}

	.home-banner .body{
		position: unset;
		left: unset;
		width:unset;
		
		-webkit-transform: unset;
		-moz-transform: unset;
		-ms-transform: unset;
		transform: unset;
		text-align: center;
	}


	.trend-section .trend-container, .cloud-section .cloud-container{
		border-radius: 0;
		padding-top: 2rem;
		padding-bottom: 3rem;
	}

	.trend-section .trend-container .trend-icon, .cloud-section .cloud-container .cloud-icon{
		text-align: right;
	}

	.feature-section .even .feature-body{
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

/* Tablets ----------- */
@media only screen and (min-width: 768px) and (max-width: 991px){

	.banner-section>div{
		padding: 100px 0 60px;
		min-height: 400px;
	}

	.banner-section .home-banner{
		min-width: 400px;
	}

	.home-banner .body{
		position: unset;
		left: unset;
		width:unset;
		
		-webkit-transform: unset;
		-moz-transform: unset;
		-ms-transform: unset;
		transform: unset;
		text-align: center;
	}

	.banner-section .home-banner .box{
		padding-bottom: 0.5rem;
	}

	.trend-section .trend-container, .cloud-section .cloud-container{
		padding-top: 2rem;
		padding-bottom: 3rem;
	}

	.trend-section .trend-container .trend-icon, .cloud-section .cloud-container .cloud-icon{
		text-align: right;
	}
}

/* Desktops and laptops and Tablets (landscape) ----------- */
@media only screen and (min-width: 992px) and (max-width: 1140px){
	.feature-section>div{min-height: unset;}
	.feature-section .feature-figure{min-height: unset;}
	.feature-section .feature-figure img{max-width: 100%;}
}