/* Service  Area css
============================================================================================ */

.service-area{
	.single-service{
		border: 1px solid #edf1f6;
		background: #fff;
		text-align: left;
		padding: 40px 30px 45px;
		background-image: url(../img/elements/single_bg.png);
		background-position: right top;
		background-repeat: no-repeat;
		@include transition;
		&:hover{
			
		}
		.service-icon {
			width: 170px;
			height: 95px;
			text-align: center;
			margin-bottom: 20px;
			position: relative;
			z-index: 1;
			line-height: 112px;
			&: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: #050817;
			}
		}
		.service-content{
			h5{
				font-size: 20px;
				font-weight: 600;
				color: $dip;
				margin-bottom: 18px;
			}
			p{
				line-height: 27px;
				font-size: 14px;
				margin-bottom: 35px;

			}
			a{
				font-size: 14px;
				color: $dip;
				position: relative;
				font-weight: 500;
				&:after{
					content:'';
					position: absolute;
					left: 0;
					bottom: -6px;
					height: 2px;
					width: 90px;
					background: #edf1f6;
				}
				&:hover{
					&:after{
						background: $baseColor;
						@include transition;

					}
				}
			}

		}
	}
}

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

}
.col-lg-4:nth-child(2) .single-service{
	margin-top: 50px;
	.service-icon:after{
		background: $circle2;
	}

}
.col-lg-4:nth-child(3) .single-service{
	.service-icon:after{
		background: $circle3;
	}

}
.service-page.service-area{
	background: #fff;
	.single-service{
		background: $bg_one;
	}

}
.area-heading{
	margin-bottom: 90px;
	text-align:center;
	margin-top: 15px;
	h3{
		font-size: 30px;
		color: $dip;
		position: relative;
	}
	p{
		font-size: 14px;
		color: $pfont;
	}
	.line:after{
		content: '';
		position:absolute;
		width:20px;
		height: 5px;
		background: $baseColor;
		left: 50%;
		transform: translateX(-50%);
		top: -16px;
	}
	.line:before{
		content: '';
		position:absolute;
		width:100px;
		height: 1px;
		background: $baseColor;
		left: 50%;
		transform: translateX(-50%);
		top: -14px;
	}
}