/* Feature Area css
============================================================================================ */
.feature-area{
	
	position: relative;
	&:after{
		content: '';
		position: absolute;
		width: 50%;
		height: 100%;
		background-image: url(../img/banner/about2.png);
		background-position: center left;
		background-repeat: no-repeat;
		left: 165px;
		top: 0;

	}

	@media (max-width: 1199px){
		&:after {
			left: 25px;
			background-size: contain;
			width: 40%;
		}
	}
	.area-heading {
		margin-bottom: 50px;
	}

	.single-feature{
		text-align: left;		
		@include transition;
		&:hover{
			
		}
		.feature-icon {
			width: 80px;
			height: 80px;
			text-align: center;
			margin-bottom: 20px;
			position: relative;
			z-index: 1;
			line-height: 100px;
			min-width: 80px;
			margin-right: 40px;
			&:after{
				content: '';
				position: absolute;
				height: 80px;
				width: 80px;
				background: #fcefed;
				border-radius: 100%;
				left: 0;
				z-index: -1;
				top: 0;
			}
			i{
				font-size: 40px;
				color: $dip;
			}
		}
		.single-feature-content{
			h5{
				font-size: 20px;
				font-weight: 600;
				color: $white;
				margin-bottom: 18px;
			}
			p{
				line-height: 27px;
				font-size: 14px;
				margin-bottom: 35px;
				color: $white;
			}

		}
	}
	.col-:nth-child(1) .single-feature{
		.feature-icon:after{
			background: $circle1;
		}

	}
	.col-:nth-child(2) .single-feature{
		.feature-icon:after{
			background: $circle2;
		}

	}

}


.area-heading.light{

	h4{
		color: $white;
	}
	h6{
		color: $white;
	}
	p{
		color: $white;
	}
}

/* Feature Area css End
============================================================================================ */


/* Brands  Area css
============================================================================================ */

.single-brand-item{
	cursor: pointer;
	margin: 0 auto;
	img{
		filter: grayscale(100%);
		@include transition;
	}
	&:hover{
		img{
			filter: grayscale(0);
			@include transition;
		}
	}
}

/* End Brands  Area css
============================================================================================ */


/* Features  Area css
============================================================================================ */
.faq_area{

	.card {
		border: none;
		border-radius: 0;
		margin-bottom: 20px;
		.card-header {
			
			border-radius: 0;
			border: none;
			background-color: #fff;
		}
		.card-header:first-child {
			border-radius: 0;
		}
		.btn-link.collapsed {
			border: 1px solid #e9ecef;
			background: #f6f6f6;
			font-weight: 600;
			color: #1d1d1d;
			font-size: 16px;
			width: 100%;
			text-align: left;
			box-shadow: none;
			@include transition;
			&:hover{
				text-decoration: none;
			}		
		}
		.card-body {
			font-weight: 300;
			font-size: 14px;
			line-height: 27px;
		}
		.card-header {
			padding: 0;
		}
		.btn-link {
			font-weight: 600;
			color: #1d1d1d;
			font-size: 16px;
			width: 100%;
			text-align: left;
			padding: 13px 15px;
			box-shadow: 0px 5px 15px 0px rgba(42, 34, 123, 0.1);
			@include transition;
			&:hover{
				text-decoration: none;
			}		
		}
	}

}



.faq_area .card h5 .btn::after {
	content: "\e61a";
	font-family: 'themify';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	right: 22px;
	position: absolute;
	top: 19px;
}


/* End Features  Area css
============================================================================================ */