.homePage{
	.bannerSec{
		background-image: url('../img/banner/home-banner.jpg'); background-repeat: no-repeat;background-position:center;
		background-size: cover; min-height: 100vh; display: flex; padding-top: 80px;
		&__content{height: 100%;
			.leftContent{
				h1{font-size: 55px; font-weight: 700;}
				p{font-size:20px; line-height:32px; margin: 20px 0 25px;	}
			}
		}
		@media (max-width:1399px){
			&__content{
				.leftContent{
					h1{font-size: 45px; }
					p{font-size:18px; line-height:27px;}
				}
			}
		}
		@include media-breakpoint-down(lg) {
			padding-top: 70px;
			&__content{
				.leftContent{
					h1{font-size: 40px; }
					p{font-size:18px; margin:15px 0 20px;}
				}
			}
		}
		@include media-breakpoint-down(md) {
			padding-top: 70px;
			&__content{
				.leftContent{
					h1{font-size: 36px; }
					p{font-size:16px; line-height:25px;}
				}
			}
		}
		@include media-breakpoint-down(sm) {
			padding-top: 55px; min-height: auto; padding: 85px 0 25px;
			&__content{
				.leftContent{
					h1{font-size: 30px; }
					p{font-size:15px; line-height:20px; margin:10px 0 20px;}
				}
			}
		}
		@include media-breakpoint-down(xs) {
			&__content{text-align: center;
				.leftContent{
					h1{font-size: 26px; margin: 0;}
				}
			}
		}
	}
	.commonTitle{
		text-align: center; margin-bottom: 50px;
		h2,h3{font-size:36px; font-weight:700; margin: 0;}
		.heading{
			position: relative; display: inline-block; padding-bottom: 15px; margin-bottom: 30px;
			span{
				position: absolute; height: 8px;width: 90px;background:color(500); border-radius:2px;right: 34px; bottom: 0;
				&:after,&:before{
					content: "";position: absolute; right: 0; bottom: 0; height: 8px; width: 8px; border-radius:2px; right: -34px;
					background:color(500);
				}
				&:after{right: -18px;}
			}
		}
		p{font-weight: 300; line-height: 26px; margin: 0; }
		@media (max-width:1399px){
			margin-bottom: 40px;
			h2,h3{font-size:32px;}
			.heading{
				padding-bottom: 12px; margin-bottom: 25px;
				span{
					height: 5px;
					&:after,&:before{
						height: 5px; width: 5px; 
					}
				}
			}
		}
		@include media-breakpoint-down(lg) {
			margin-bottom: 35px;
			h2,h3{font-size:28px;}
			.heading{
				span{
					width: 65px;
				}
			}
		}
		@include media-breakpoint-down(md) {
			margin-bottom: 25px;
			h2,h3{font-size:25px;}
			.heading{margin-bottom: 20px;
				span{
					height: 3px; right: 22px;
					&:after,&:before{
						height: 3px; width: 3px; right: -22px;
					}
					&:after{right: -12px;}
				}
			}
			p{line-height: 24px;}
		}
		@include media-breakpoint-down(sm) {
			margin-bottom: 20px;
			h2,h3{font-size:22px;}
			.heading{margin-bottom:15px;padding: 0;
				span{display: none;}
			}
		}
		@include media-breakpoint-down(xs) {
			h2,h3{font-size:20px;}
			.heading{margin-bottom:10px;}
		}
	}
	.featureSec{
		padding: 80px 0;
		&__box{
			text-align: center; padding: 0 59px; position: relative;
			&__img{
				height: 160px; width: 160px; @include flexcenter(); @include flexbox();
				background-color:rgba(#E0EDF8,0.45); border-radius:50%; margin: 0 auto 30px;
			}
			h4{font-size:22px; font-weight:700; margin-bottom: 15px;}
			p{
				color:color(100); line-height:26px;
			}
			&:after{
				content: "";position: absolute; width: 55%; height:30px; background-image: url("../img/feature-bg1.svg");background-repeat: no-repeat;
				left: 76%;top: 20%; background-size: 100%;
			}
			&--secondtBg{
				&:after{
					background-image: url("../img/feature-bg2.svg"); top: 25%;
				}
			}
			&--noBg{
				&:after{
					display: none;
				}
			}
		}
		@media (max-width:1599px){
			padding: 60px 0;
			&__box{
				padding: 0 35px;
				&__img{
					height: 145px; width: 145px;margin: 0 auto 25px;
					img{max-width:60px;}
				}
				h4{font-size:20px;}
				&:after{
					width: 50%; left: 80%;top: 17%;
				}
				&--secondtBg{
					&:after{top: 22%;}
				}
			}
		}
		@media (max-width:1399px){
			padding: 50px 0;
			&__box{
				padding: 0;
				&:after{top: 19%;}
				&--secondtBg{
					&:after{top: 24%;}
				}
			}
		}
		@include media-breakpoint-down(lg){
			padding: 45px 0;
			&__box{
				&__img{
					height: 130px; width: 130px;margin: 0 auto 20px;
					img{max-width:50px;}
				}
				h4{font-size:18px; margin-bottom: 10px;}
				&:after{display: none;}
				p{line-height:23px;}
			}
		}
		@include media-breakpoint-down(md){
			padding: 35px 0 20px;
			&__box{margin-bottom: 20px;}
		}
		@include media-breakpoint-down(sm){
			padding: 25px 0 10px;
			&__box{margin-bottom: 20px;
				&__img{
					height: 110px; width: 110px;margin: 0 auto 15px;
					img{max-width:40px;}
				}
				h4{font-size:17px; margin-bottom: 6px;}
				p{font-size:14px; line-height: 22px;}
			}
		}
	}
	.interiorSec{
		padding: 75px 0; background: color(80);
		.commonTitle{
			text-align: left; margin: 0; height: 100%;
		}
		@media (max-width:1599px){
			padding: 60px 0;
		}
		@media (max-width:1399px){
			padding: 50px 0;
		}
		@include media-breakpoint-down(lg){
			padding: 40px 0;
		}
		@include media-breakpoint-down(md){
			padding: 35px 0;
		}
		@include media-breakpoint-down(sm){
			padding: 25px 0 35px;
		}
		@include media-breakpoint-down(xs){
			&__list{text-align: center;
				img{max-width:280px;}
				&:not(:last-child){margin-bottom: 25px;}
			}
			.commonTitle{
				margin-bottom:20px; height: auto; text-align:center;
			}
		}
		@media (max-width:479px){
			&__list{
				img{max-width:200px;}
			}
		}
	}
	.screenSec{
		background-image:url("../img/screenbg.jpg"); padding: 75px 0; background-repeat: no-repeat; background-size: 100% 100%; background-position:center;
		.commonTitle{
			.heading{
				span{background:color(700);
					&:after,&:before{background:color(700);}
				}
			}
		}
		.swiper-button{
			background-image:none;
			height: 40px; width: 45px; border-radius:4px; border: 1px solid color(50); left: -60px;
			&.swiper-button-next{
				left: auto; right: -60px;
				&:before{
					left: auto;
				    right: 12px;
				    top: 50%;
				    transform: translate(0,-50%) rotate(-135deg);
				}
			}
			&:after{
				height: 2px;
			    width: 20px;
			    background: color(50);
			    content: "";
			    position: absolute;
			    left: 50%;
			    top: 50%;
			    transform: translate(-50%,-50%);
			}
			&:before{
				content: "";
			    height: 12px;
			    width: 12px;
			    border-left: 2px solid color(50);
			    border-bottom: 2px solid color(50);
			    position: absolute;
			    left: 12px;
			    top: 50%;
			    transform: translate(0,-50%) rotate(45deg);
			}
			&:hover{
				background: color(50);
				&:after{
					background:color(500);
				}
				&:before{border-color: color(500);}
			}
		}
		@media (max-width:1599px){
			padding: 60px 0;
			.swiper-button{
				height: 30px; width: 35px; left: -45px;
				&.swiper-button-next{
					left: auto; right: -45px;
					&:before{right: 9px;}
				}
				&:after{
				    width: 18px;
				}
				&:before{height: 10px;width: 10px;left: 9px;}
			}
		}
		@media (max-width:1399px){
			padding: 50px 0;
			.swiper-button{
				left: -25px;
				&.swiper-button-next{
					left: auto; right: -25px;
				}
			}
		}
		@include media-breakpoint-down(lg){
			padding: 40px 0; background-image: none; background-color:color(500);
			.container{
				padding: 0 45px;
			}
			.swiper-button{
				left:0px;
				&.swiper-button-next{
					left: auto; right: 0px;
				}
			}
		}
		@include media-breakpoint-down(md){
			padding: 35px 0;
			.container{
				padding: 0 45px;
			}
			.swiper-button{
				height: 25px; width: 30px; left: 10px;
				&.swiper-button-next{left: auto;right: 10px;
					&:before{right: 8px;}
				}
				&:after{
				    width: 12px; height: 1px;
				}
				&:before{height: 8px;width: 8px;left: 8px; border-width:1px;}
			}
		}
		@include media-breakpoint-down(xs){
			padding: 25px 0 55px;
			.container{
				padding: 0 15px;
			}
			.swiper-button{
				top:calc(100% + 35px); transform: translate(0); left:calc(50% - 40px);
				&.swiper-button-next{right:calc(50% - 40px); left: auto;}

			}
		}
	}
	.testimonialSec{
		padding: 70px 0;
		&__left{
			.swiper-slide{
				p{
					font-weight:300; color:color(100); margin-bottom: 10px;
				}
				span{color:color(100);}
				h4{font-size:22px; font-weight: 400; margin: 0;}
			}
			.swiper-button{
				top: auto; bottom: 0; transform: translate(0); margin-top: 25px;background-image:none;
				height: 40px; width: 45px; border-radius:4px; position: static;display: inline-block;
				&.swiper-button-next{margin-left: 15px;
					&:before{
						left: auto;
					    right: 12px;
					    top: 50%;
					    transform: translate(0,-50%) rotate(-135deg);
					}
				}
				&:after{
					height: 2px;
				    width: 20px;
				    background: color(100);
				    content: "";
				    position: absolute;
				    left: 50%;
				    top: 50%;
				    transform: translate(-50%,-50%);
				}
				&:before{
					content: "";
				    height: 12px;
				    width: 12px;
				    border-left: 2px solid color(100);
				    border-bottom: 2px solid color(100);
				    position: absolute;
				    left: 12px;
				    top: 50%;
				    transform: translate(0,-50%) rotate(45deg);
				}
				&:hover{
					background: color(700);
					&:after{
						background:color(50);
					}
					&:before{border-color: color(50);}
				}
			}
		}
		@media (max-width:1599px){
			padding: 60px 0;
			&__left{
				.swiper-button{
					height: 30px; width: 35px; margin-top: 15px;
					&.swiper-button-next{
						&:before{right: 9px;}
					}
					&:after{
					    width: 18px;
					}
					&:before{height: 10px;width: 10px;left: 9px;}
				}
			}
		}
		@media (max-width:1399px){
			padding: 50px 0;
		}
		@include media-breakpoint-down(lg){
			padding: 40px 0;
			&__left{
				.swiper-slide{
					h4{font-size:20px;}
				}
			}
		}
		@include media-breakpoint-down(md){
			padding: 35px 0;
			&__left{
				.swiper-button{
					height: 25px; width: 30px;
					&.swiper-button-next{
						&:before{right: 8px;}
					}
					&:after{
					    width: 12px; height: 1px;
					}
					&:before{height: 8px;width: 8px;left: 8px; border-width:1px;}
				}
			}
		}
		@include media-breakpoint-down(sm){
			padding: 25px 0;text-align: center;
			&__left{
				.swiper-slide{
					h4{font-size:18px;}
				}
				.swiper-button{
					background:color(100);
					&:after{background-color:color(50);}
					&:before{border-color:color(50);}
				}
			}
		}
	}
	.downloadSec{
		padding: 130px 0; overflow: visible;
		.commonTitle{
			.heading{
				span{background:color(700);
					&:after,&:before{background:color(700);}
				}
			}
		}
		&__content{
			background-image: url('../img/download-app-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position:center;
			&__img{
				position: absolute; top: -130px; left: 0;
			}
			&__left{
				padding: 164px 0;
			}
		}
		@media (max-width:1599px){
			&__content{
				&__img{
					img{max-width:320px;}
				}
				&__left{
					padding: 86px 0;
				}
			}
		}
		@media (max-width:1399px){
			padding: 110px 0;
			&__content{
				&__img{
					top: -110px;
					img{max-width:290px;}
				}
			}
		}
		@include media-breakpoint-down(lg){
			padding: 77px 0;
			&__content{
				&__img{
					top: -77px;
					img{max-width:250px;}
				}
			}
		}
		@include media-breakpoint-down(md){
			padding: 50px 0;
			&__content{
				&__img{
					top: -50px;
					img{max-width:200px;}
				}
				&__left{padding:55px 0;}
			}
		}
		@include media-breakpoint-down(sm){
			padding:0;
			&__content{
				&__left{padding:35px 0; text-align: center;}
			}
		}
		@include media-breakpoint-down(sm){
			&__content{
				&__left{padding:25px 0;}
			}
		}
	}
	section{overflow-x: hidden;}
}