/*===========================
    11.REQUST QUOTE css 
===========================*/




.requst-quote-area{
	position: relative;
	z-index: 10;
	padding-bottom: 230px;
	padding-top: 117px;
	&::before{
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgb(1, 84, 247);
		opacity: 0.702;
		z-index: -2;
	}
	&::after{
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-image: url(../images/request-dot.png);
		z-index: -1;
	}
	& .requst-content{
		& span{
			color: $white;
			font-size: 35px;
		}
		& .title{
			font-size: 60px;
			color: $white;
			line-height: 60px;
			padding-bottom: 40px;
			@media #{$xs} {
				font-size: 28px;
			}
			@media #{$sm} {
				font-size: 50px;
			}
		}
		& a{
			width: 215px;
		}
	}
	&.services-quote{
		padding-bottom: 130px;
	}
	&.about-quote{
		padding-top: 115px;
	}
}




.newaletter-area{
	margin-bottom: 130px;
	position: relative;
	margin-top: -100px;
	z-index: 11;
	@media #{$xs} {
		margin-top: 0;
		margin-bottom: 200px;
	}
	@media #{$sm} {
		margin-top: -110px;
		margin-bottom: 130px;
	}
	& .newaletter-item{
		height: 200px;
		& .newaletter-content{
			width: 370px;
			background: #ef5b51;
			height: 200px;
            @media #{$md} {
                width: 200px;
            }
            @media #{$xs} {
                width: 100%;
                height: 150px;
            }
            @media #{$sm} {
                width: 170px;
                height: 200px;
            }
			& .item{
				@media #{$md} {
					padding-left: 40px;
				}
				@media #{$xs} {
					padding-left: 20px;
				}
				& span{
					color: $white;
					font-weight: 300;
					font-size: 24px;
		            @media #{$md} {
		                font-size: 16px;
		            }
		            @media #{$sm} {
		                font-size: 16px;
		            }
				}
				& .title{
					color: $white;
					font-size: 40px;
					line-height: 45px;
		            @media #{$md} {
		                font-size: 26px;
		            }
		            @media #{$sm} {
		                font-size: 26px;
		            }

				}
			}
		}
		& .newaletter-input{
			background: $grey;
			width: 67%;
			position: relative;
			z-index: 10;
			@media #{$xs} {
				width: 100%;
				height: 200px;
				padding: 20px;
			}
			&::before{
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				background-image: url(../images/newsletter-dot.png);
				opacity: .1;
				z-index: -1;
			}
			& input{
				width: 400px;
				background: $white;
				border: 0;
				opacity: 1;
				line-height: 60px;
				padding-left: 30px;
				border-radius: 5px;
				margin-right: 10px;
				font-size: 14px;
				color: #8a8a8a;
				@media #{$lg} {
					width: 300px;
				}
				@media #{$md} {
					width: 240px;
				}
				@media #{$xs} {
					width: 100%;
					margin-bottom: 20px;
				}
				@media #{$sm} {
					width: 170px;
					margin-bottom: 0;
				}
				&::placeholder{
					opacity: 1;
					color: #8a8a8a;
				}
			}
		}
	}

}


.brand-area{
	padding-bottom: 128px;
	& .brand-item{
		& img{
			display: inline-block;
		}
	}
	&.about-brand{
		background: #eef3f9;
	}
}