// Service area 1
.service_area{
	@extend .section_padding_2;
	@include gradient_bg_8(right);
	clear: both;
}
.single_service_item{ 
	margin-bottom: 50px;
	padding:30px;
	background: #ffffff1a;
	@include transition(all,.3s,ease-in-out);
	position:relative;
	top:0;
	z-index:3;	
	.service_img{
		margin: auto;
		margin-bottom:20px;
		width: 80px;
		height:80px;
	}
	h3{ 
		@include firasans(700); 
		font-size: 24px; 
		line-height:32px;
		margin-bottom: 15px;
		color: #fff;
		@include transition(all,.3s,ease-in-out);
	}
	p{ 
		color: $text;
		margin-bottom:15px; 
		@include firasans(400); 
		font-size:16px; 
		line-height:28px;
	}
	.boxed_btn{ 
		@extend .gradient_btn_main;
		@include gradient_bg(right);
		padding: 15px 20px;
		border-radius: 5px;
		&:after{
			border-radius: 5px;
			background: $green;
		}		
	}
	&:before{
		width: 3px;
		height: 100%;
		top: 0;
		left: auto;
		@include gradient_bg(top);
		right: 0px;
		position: absolute;
		z-index: -1;
		@include transition(all,.3s,ease-in-out);
		content: '';
		opacity: 0;
	}
	&:hover:before{	opacity: 1; }
	&:hover{ top:-10px; }
	&:hover h3{ color: $brand; }
}

	// Service area 2
.service_area_2{
	@extend .section_padding_2;
	.single_service_item_2 {
		margin-bottom: 50px;
		padding: 30px;
		background: #ffffff1a;
		@include transition(all,.3s,ease-in-out);
		position: relative;
		top: 0;
		z-index: 3;
	    border-radius: 40px;
		.service_img{
			margin: auto;
			margin-bottom:20px;
			width: 80px;
			height:80px;
		}
		h3{ 
			@include firasans(700); 
			font-size: 24px; 
			line-height:32px;
			margin-bottom: 15px;
			color: $brand_2;
			@include transition(all,.3s,ease-in-out);
		}
		p{ 
			color: $text;
			margin-bottom:15px; 
			@include firasans(400); 
			font-size:16px; 
			line-height:28px;
			@include transition(all,.3s,ease-in-out);
		}
		.boxed_btn{
			@extend .gradient_btn_main;
	    	border-radius: 30px;
	    	@include gradient_bg_2(top);
	    	color: #fff;
	    	padding: 14px 22px;
	    	border: 2px solid #fff;
	    	&:after{
	    		border-radius: 20px;
	    		background: #fff;
	    		border: none;
	    	}
	    	&:hover{ 
				color: $brand_2;
				border: 2px solid #fff;
			}
	    }
		&:before{
			width: 100%;
			height: 100%;
			top: 0;
			left: auto;
			@include gradient_bg(top);
			right: 0px;
			position: absolute;
			z-index: -1;
			border-radius: 40px;
			@include transition(all,.3s,ease-in-out);
			content: '';
			opacity: 0;
		}
		&:hover:before{	opacity: 1; @include gradient_bg_2(top);}
		&:hover{ top:-10px; }
	    &:hover h3{ color: #fff; }
	    &:hover p{ color: #a7b6f1; }
	}
}

	// Service area 3
.service_area_3{
	@include gradient_bg_7(right);
	@extend .section_padding_2;
	.single_service_item_3 { 
		margin-bottom: 50px;
		background: none;
		box-shadow: none;
		padding: 30px;
		border: 1px solid transparent;
		@include transition(all, .3s, ease-in-out);
		position:relative;
		top: 0;
		z-index: 3;
		.service_img{
			margin: auto;
			margin-bottom:20px;
			width: 80px;
			height:80px;
		}
		h3{ 
			@include firasans(700); 
			font-size: 24px; 
			line-height:32px;
			margin-bottom: 15px;
			color: #fff;
			@include transition(all,.3s,ease-in-out);
		}
		p{ 
			color: #fff;
			margin-bottom:15px; 
			@include firasans(400); 
			font-size:16px; 
			line-height:28px;
		}
		.boxed_btn{ 
			margin-bottom:0;
			background:#fff;
			padding: 15px 20px;
			color: $brand_3;
			border-radius: 0;
			display: inline-block;
			@include transition(all, .3s, ease-in-out);
			&:hover{
				border-radius: 0;
				background: $dark;
				color: #fff;
			}		
		}
		&:hover{ 
			background: rgba(0,0,0,0.1);
			border: 1px solid #fff;
			color: #fff;
			top: -5px;
		}
		&:hover	h3{ color: $brand;}
	}
}

	// Service area 4
.service_area_4{ 
    @extend .section_padding_2;
	.single_service_item_4 {
		margin-bottom: 50px;
		padding: 30px; 
		@include transition(all,.3s,ease-in-out);
		position: relative;
		top: 0;
		background: #ffffff1a;
		z-index: 3;
	    border-radius: 40px;
		.service_img{
			margin: auto;
			margin-bottom:20px;
			width: 80px;
			height:80px;
		}
		h3{ 
			@include firasans(700); 
			font-size: 24px; 
			line-height:32px;
			margin-bottom: 15px;
			color: #fff;
			@include transition(all,.3s,ease-in-out);
		}
		p{ 
			color: $text;
			margin-bottom:15px; 
			@include firasans(400); 
			font-size:16px; 
			line-height:28px;
			@include transition(all,.3s,ease-in-out);
		}
		.boxed_btn{
			@extend .gradient_btn_main;
	    	border-radius: 30px;
	    	@include gradient_bg_12(top);
	    	color: #fff;
	    	padding: 14px 22px;
	    	border: 2px solid #fff;
	    	&:after{
	    		border-radius: 20px;
	    		background: #fff;
	    		border: none;
	    	}
	    	&:hover{ 
				color: $dark;
				border: 2px solid #fff;
			}
	    }
		&:before{
			width: 100%;
			height: 100%;
			top: 0;
			left: auto;
			@include gradient_bg_12(top);
			right: 0px;
			position: absolute;
			z-index: -1;
			border-radius: 40px;
			@include transition(all,.3s,ease-in-out);
			content: '';
			opacity: 0;
		}
		&:hover:before{	opacity: 1; }
		&:hover{ top:-10px; }
	    &:hover h3{ color: #fff; }
	    &:hover p{ color: #fff; }
	}
}

	// Service area 5
.service_carousel_area_1 {
	@extend .section_padding;
	position: relative;
	background: transparent;
	z-index: 2;
	.service_carousel{
		padding-bottom: 100px;
		.swiper-pagination-bullet {
		    color: beige;
		    background: $brand_2;
		    width: 15px;
		    height: 15px;
		    opacity: 1;
		    &.swiper-pagination-bullet-active{ opacity: .5; }
		}
	}
	.single_service_item_5 {
		@extend .single_service_item_comn_2;
		overflow: hidden;
		margin: 0 15px;
	    border-radius: 20px;
	    background: #00000059;
	    padding: 30px;
	    position: relative;
	    &.colored_bg{
	    	@include gradient_bg_12(right);
	    	color: #fff;
	    	z-index: 1;
	    	h3{
	    		background: none !important;
	    		-webkit-text-fill-color: #fff;
	    	}
	    	h3, p, li, i { color: #fff; }
	    	a.boxed_btn {
			    background: rgba(#fff, .15);
			    color: #fff;
			    &:hover{ color: $dark; }
			    &:after{ background: #fff; }
			    &:hover i{ color: $dark; }
			}
	    }
	    h3 {
		    font-size: 36px;
		    margin-bottom: 20px;
		    @include firasans(500);
		    color: $brand_5;
		}
		p {
		    margin-bottom: 20px;
		    font-size: 16px;
		    line-height: 1.5;
		    color: $text;
		}
		li {
		    margin-bottom: 15px;
		    position: relative;
		    z-index: 2;
		    @include firasans(500);
		    font-size: 18px;
		    color: #fff;
		    i {
		    	@include transition(all, .3s, ease-in-out);
		    	font-weight: 900; 
		    	margin-right: 5px;
		    	color: $green; 
		    }
		    &:last-child{ margin-bottom: 0; }
		}
		a.boxed_btn {
		    @include gradient_bg_4(right);
		    @extend .gradient_btn_main;
		    color: #fff;
			margin-top: 30px;
		    padding: 12px 15px;
		    border-radius: 5px;
		    font-size: 14px;
		    @include firasans(700);
		    text-transform: uppercase;
		    i{
		    	margin-left: 5px;
		    	color: #fff;
	    		font-size: 12px;
	    		font-weight: 700; 
	    		@include transition(all, .3s, ease-in-out);
		    }
		    &:after{ 
		    	background: $brand_6;
		    	border-radius: 5px; 
		    	&:hover, &:hover i{ color: #fff; }
		    }
		}
		img {
		    position: absolute;
		    left: 42%;
		    top: 40%;
		}
	}
}

	// Service area 6
.service_carousel_area_4 {
	@extend .section_padding;
	position: relative;
	z-index: 2;
	.single_service_item_8 {
		@extend .single_service_item_comn_2;
		overflow: hidden;
		margin: 0 15px;
	    border-radius: 20px;
	    background: #00000059;
	    padding: 30px;
	    position: relative; 
	    &.colored_bg{
	    	@include gradient_bg_4(right);
	    	color: #fff; 
	    	z-index: 1;
	    	h3{
	    		background: none !important;
	    		-webkit-text-fill-color: #fff;
	    	}
	    	h3, p, li, i { color: #fff; }
	    	a.boxed_btn {
			    background: rgba(#fff, .15);
			    color: #fff;
			    &:hover{ color: $dark; }
			    &:after{ background: #fff; }
			    &:hover i{ color: $dark; }
			}
	    }
	    h3 {
		    font-size: 36px;
		    margin-bottom: 20px;
		    @include firasans(500);
		    color: $brand_5;
		}
		p {
		    margin-bottom: 20px;
		    font-size: 16px;
		    line-height: 1.5;
		    color: $text;
		}
		li {
		    margin-bottom: 15px;
		    @include firasans(500);
		    font-size: 18px;
		    position: relative;
		    z-index: 2;
		    color: #fff;
		    i {
		    	@include transition(all, .3s, ease-in-out);
		    	font-weight: 900; 
		    	margin-right: 5px;
		    	color: $green; 
		    }
		    &:last-child{ margin-bottom: 0; }
		}
		a.boxed_btn {
		    @include gradient_bg_4(right);
		    @extend .gradient_btn_main;
		    color: #fff;
			margin-top: 30px;
		    padding: 12px 15px;
		    border-radius: 5px;
		    font-size: 14px;
		    @include firasans(700);
		    text-transform: uppercase;
		    i{
		    	margin-left: 5px;
		    	color: #fff;
	    		font-size: 12px;
	    		font-weight: 700; 
	    		@include transition(all, .3s, ease-in-out);
		    }
		    &:after{ 
		    	background: $brand_6;
		    	border-radius: 5px; 
		    	&:hover, &:hover i{ color: #fff; }
		    }
		}
		img {
		    position: absolute;
		    left: 42%;
		    top: 40%;
		}
	}
	.service_carousel{
		padding-bottom: 100px;
		.swiper-pagination-bullet {
		    color: beige;
		    background: $brand_2;
		    width: 15px;
		    height: 15px;
		    opacity: 1;
		    &.swiper-pagination-bullet-active{ opacity: .5; }
		}
	}
}

	// Service area 7
.service_carousel_area_2{  
	@extend .section_padding;
	background: transparent;
	position: relative;
	z-index: 2;
	.single_service_item_6 {
		overflow: hidden;
		margin: 0 15px;
	    border-radius: 20px;
	    background: #00000059;
	    padding: 30px;
	    position: relative; 
	    &.colored_bg{
	    	@include gradient_bg_9(right);
	    	color: #fff; 
	    	z-index: 1;
	    	h3, p, li, i { color: #fff; }
	    	a.boxed_btn {
			    background: rgba(#fff, .15);
			    color: #fff;
			    &:hover{
			    	color: $dark;
			    	background: #fff;
			    }
			    &:hover i{ color: $dark; }
			}
	    }
	    h3 {
		    font-size: 36px;
		    margin-bottom: 20px;
		    @include firasans(500);
		    color: $brand_5;
		}
		p {
		    margin-bottom: 20px;
		    font-size: 16px;
		    color: $text;
		    line-height: 1.5;
		}
		li {
		    margin-bottom: 15px;
		    @include firasans(500);
		    color: #fff;
		    position: relative;
		    z-index: 2;
		    font-size: 18px;
		    i {
		    	@include transition(all, .3s, ease-in-out);
		    	color: $green; 
		    	font-weight: 900; 
		    	margin-right: 5px;
		    }
		    &:last-child{ margin-bottom: 0; }
		}
		a.boxed_btn {
			margin-top: 30px;
		    padding: 12px 15px;
		    background: $brand_6;
		    border-radius: 5px;
		    color: #fff;
		    font-size: 14px;
		    @include firasans(700);
		    text-transform: uppercase;
		    display: inline-block;
	    	@include transition(all, .3s, ease-in-out);
		    i{
		    	margin-left: 5px;
	    		font-size: 12px;
	    		font-weight: 700; 
	    		color: #fff;
	    		@include transition(all, .3s, ease-in-out);
		    }
		    &:hover{
		    	color: #fff;
		    	background: $dark_3;
		    }    
		    &:hover i{ color: #fff; }
		}
		img {
		    position: absolute;
		    left: 42%;
		    top: 40%;
		}
	}
	.service_carousel{
		padding-bottom: 100px;
		.swiper-pagination-bullet {
		    color: beige;
		    background: $brand_6;
		    width: 15px;
		    height: 15px;
		    opacity: 1;
		    &.swiper-pagination-bullet-active{ opacity: .5; }
		}
	}
}

	// Service area 8
.service_carousel_area_3{  
	@extend .section_padding;
	position: relative;
	z-index: 99;
	.single_service_item_7 {
		overflow: hidden;
		margin: 0 15px;
	    border-radius: 20px;
	    background: #00000059;
	    padding: 30px;
	    position: relative; 
	    &.colored_bg{
	    	@include gradient_bg_7(right);
	    	color: #fff; 
	    	z-index: 1;
	    	h3{
	    		background: none !important;
	    		-webkit-text-fill-color: #fff;
	    	}
	    	h3, p, li, i { color: #fff; }
	    	a.boxed_btn {
			    background: rgba(#fff, .15);
			    color: #fff;
			    &:hover{
			    	color: #13128c;
			    	background: #fff;
			    }
			    &:after{ background: #fff; }
			    &:hover i{ color: #13128c;  }
			}
	    }
	    h3 {
		    font-size: 36px;
		    margin-bottom: 20px;
		    @include firasans(500);
		    color: #13128c;
		}
		p {
		    margin-bottom: 20px;
		    font-size: 16px;
		    line-height: 1.5;
		    color: $text;
		}
		li {
		    margin-bottom: 15px;
		    @include firasans(500);
		    color: #fff;
		    position: relative;
		    z-index: 2;
		    font-size: 18px;
		    i {
		    	@include transition(all, .3s, ease-in-out);
		    	color: #13128c;
		    	font-weight: 900; 
		    	margin-right: 5px;
		    }
		    &:last-child{ margin-bottom: 0; }
		}
		a.boxed_btn {
			margin-top: 30px;
		    padding: 12px 15px;
		    @include gradient_bg_7(right);
		    border-radius: 5px;
		    @extend .gradient_btn_main;
		    color: #fff;
		    font-size: 14px;
		    @include firasans(700);
		    text-transform: uppercase;
		    i{
		    	margin-left: 5px;
	    		font-size: 12px;
	    		font-weight: 700; 
	    		color: #fff;
	    		@include transition(all, .3s, ease-in-out);
		    }
		    &:after{ 
		    	border-radius: 5px;
		    	background: #13128c;
		    }
		    &:hover, &:hover i{ color: #fff;  }
		}
		img {
		    position: absolute;
		    left: 42%;
		    top: 40%;
		}
	}
}




	// Responsive
@media #{$medium_device}{
	.single_service_item_comn_2 img {
	    top: 42%;
	}
	.service_carousel_area_2 .single_service_item_6 img {
	    top: 42%;
	}	
	.service_carousel_area_3 .single_service_item_7 img {
	    top: 42%;
	}
}
@media #{$tab_device}{
	.service_area{ padding-bottom: 20px; }
	.single_service_item_comn_2  { margin: 0 60px; }
	.service_carousel_area_2 .single_service_item_6  { margin: 0 60px; }
	.service_carousel_area_3 .single_service_item_7  { margin: 0 60px; }
}
@media #{$small_mobile}{
	.service_area{ padding-bottom:10px; }
	.single_service_item{
		h3{ font-size: 18px;}
		p{ font-size:14px;}
		.boxed_btn{ 
			padding: 10px 20px; 
			span{ font-size: 14px; }
		}
	}
	.single_service_item_comn_2 {
		padding: 15px;
		h3{  font-size: 24px; margin-bottom: 10px;}
		p{ font-size: 14px; margin-bottom: 15px;}
		li { font-size: 14px; margin-bottom: 10px;}
		.boxed_btn{ margin-top: 10px; padding: 10px 15px; }
	}
	.service_carousel_area_1 .single_service_item_5 {
		@include gradient_bg_12(right);
		padding: 15px;
		h3{  font-size: 24px; margin-bottom: 10px; color: #fff;}
		p{ font-size: 14px; margin-bottom: 15px; color: #fff;}
		li { font-size: 14px; margin-bottom: 10px; color: #fff;}
		.boxed_btn{ margin-top: 10px; padding: 10px 15px; background: #ffffff2a;}
	}
	.service_carousel_area_2 .single_service_item_6 {
		@include gradient_bg_9(right);
		padding: 15px;
		h3{  font-size: 24px; margin-bottom: 10px; color: #fff;}
		p{ font-size: 14px; margin-bottom: 15px; color: #fff;}
		li { font-size: 14px; margin-bottom: 10px; color: #fff;}
		.boxed_btn{ margin-top: 10px; padding: 10px 15px; background: #ffffff2a;}
	}
	.service_carousel_area_3 .single_service_item_7 {
		@include gradient_bg_7(right);
		padding: 15px;
		h3{  font-size: 24px; margin-bottom: 10px; color: #fff;}
		p{ font-size: 14px; margin-bottom: 15px; color: #fff;}
		li { font-size: 14px; margin-bottom: 10px; color: #fff;}
		.boxed_btn{ margin-top: 10px; padding: 10px 15px; background: #ffffff2a;}
	}
	.service_carousel_area_4 .single_service_item_8 {
		@include gradient_bg_4(right);
		padding: 15px;
		h3{  font-size: 24px; margin-bottom: 10px; color: #fff;}
		p{ font-size: 14px; margin-bottom: 15px; color: #fff;}
		li { font-size: 14px; margin-bottom: 10px; color: #fff;}
		.boxed_btn{ margin-top: 10px; padding: 10px 15px; background: #ffffff2a;}
	}
}
@media #{$large_mobile}{
	
}