.gsc-services-group{
	&.no-gutter{
		.service-item{
			margin-bottom: 0;
		}
	}
	&.layout-carousel.margin-disable.style-4{
		.swiper-slide.center{
			.service-item.style-4{
				margin: 0 -2px;
				@include media-breakpoint-down(lg){
					margin-right: 0;
				}
			}
		}
		.service-item.style-4{
			border: 2px solid $border-color;
			transition: all 0.35s;
    		.service-item-content .service-content{
				box-shadow: none;
			}
		}
	}
	&.layout-grid.no-gutter{
		.item-columns{
			border: 2px solid $border-color;
    		margin: -1px;
		}
		.service-item.style-4 {
			max-width: 100%;
			.service-item-content .service-content{
				box-shadow: none;
			}
		}
	}
	.service-item{
		position: relative;
		overflow: hidden;
		max-width: 560px;
		margin: 0 auto 30px; 
		transition: all 0.5s ease;
		&.style-1{
			padding: 50px 35px;
			background: $white;
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
			@include media-breakpoint-down(lg){
				padding: 40px 30px;
			}
			.service-item-content{
				position: relative;
				z-index: 9;
				text-align: center;
				.box-icon{
					position: relative;
					font-size: 60px;
					color: $theme-color;
					right: 0;
					bottom: 0;
					transition: all 0.5s ease;
					display: block;
					width: 100%;
					svg{
						width: 60px;
						fill: $theme-color;
					}
				}
				.title{ 
					font-size: 20px;
					font-weight: 500;
					margin: 0 0 18px;
					color: $theme-color-2;
					transition: all 0.5s ease;
				}
				.arrow{
					margin-top: 30px;
					.icon{
						display: inline-block;
						width: 55px;
						height: 55px;
						line-height: 54px;
						border-radius: 50%;
						border: 2px solid $border-color;
						text-align: center;
					}
				}
				.desc{
					font-size: 18px;
					transition: all 0.5s ease;
				}
			}
			 .service-background{
				position: absolute;
				top: 0;
				left: 0;
				@include size(100%, 100%);
				z-index: 6;
				opacity: 0;
				@include scale(0.9);
				transition: all 0.35s; 
				transition-delay: 0.1s;
				&:after{
					content: '';
					width: 100%;
					height: 100%;
					background: $theme-color-2;
					opacity: 0.9;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				img{
					position: absolute;
					height: 100%;
					width: 100%;
					object-fit: cover;
					transform: translate(-50%, -50%);
					top: 50%;
					left: 50%;
				}            
			}
			.number{
				font-size: 200px;
				line-height: 150px;
				font-weight: 700;
				-webkit-text-stroke: 1px #EDEFEF;
				-webkit-text-fill-color: transparent;
				position: absolute;
				top: 50px;
				left: 0;
				width: 100%;
				text-align: center;
				z-index: 8;
				transition: all 0.16s;
			}
			.link-overlay{
				position: absolute;
				@include size(100%, 100%);
				top: 0;
				left: 0;
				z-index: 11;
			}
			&:hover, &:focus, &.active{
				.service-item-content{
					.title{
						color: $white;
					}
					.box-icon{
						color: $white;
						svg{
							fill: $white;
						}
					}
					.desc{
						color: #D2DCE5;
					}
					.arrow{
						.icon{
							color: $white;
							background: $theme-color;
							border-color: $theme-color;
						}
					}
				}
				.service-background{
					opacity: 1;
					@include scale(1);
				}
				.number{
					opacity: 0.12;
				}
			}
		}
		&.style-2{
			position: relative;
			margin-bottom: 0;
			.service-content{
				margin-left: 20px;
				margin-right: 20px;
				margin-top: -40px;
				background: $white;
				position: relative;
				z-index: 9;
				padding: 30px 30px 25px;
				box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
				margin-bottom: 30px;
				.content-inner{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						margin: 0;
						font-size: 20px;
						font-weight: 500;
						padding-right: 10px;
						margin-top: -6px;
					}
					.box-icon{
						position: relative;
						&:before{
							content: '';
							width: 38px;
							height: 38px;
							background: #EDF3F6;
							position: absolute;
							top: 0;
							left: -15px;
							z-index: 1;
						}
						i, svg{
							position: relative;
							z-index: 2;
						}
						i{
							font-size: 58px;
							color: $theme-color;
						}
						svg{
							width: 58px;
							fill: $theme-color;
						}
					}
				}
			}
			.service-content-hover{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: calc(100% - 30px);
				z-index: 9;
				display: flex;
				text-align: center;
				align-items: center;
				transition: all 0.35s;
				transition-delay: 0.1s;
				opacity: 0;
				@include scale(0.9);
				.content-inner{
					position: relative;
					z-index: 9;
					padding: 20px 15px;
					max-width: 280px;
					 margin: 0 auto;
					.box-icon{
						i{
							font-size: 62px;
							color: $white;
						}
						svg{
							width: 62px;
							fill: $white;
						}
					}
					.title{
						color: $white;
						font-size: 22px;
						font-weight: 500;
						margin: 18px 0 18px;
						br{
							display: none;
						}
						a{
							color: $white;
						}
					}
					.desc{
						color: $white;
						font-size: 18px;
						opacity: 0.82;
						line-height: 30px;
					}
				}
				.service-background{
					position: absolute;
					top: 0;
					left: 0;
					@include size(100%, 100%);
					z-index: 6;
					transition: all 0.35s; 
					&:after{
						content: '';
						width: 100%;
						height: 100%;
						background: $theme-color-2;
						opacity: 0.8;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}
					img{
						position: absolute;
						height: 100%;
						width: 100%;
						object-fit: cover;
						transform: translate(-50%, -50%);
						top: 50%;
						left: 50%;
					}            
				}
				.link-overlay{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 11;
				}
			}
			&:hover, &:focus, &.active{
				.service-content-hover{
					@include scale(1);
					opacity: 1;
				}
			}
		}

		&.style-3{
			background: $white;
			overflow: visible;
			.service-item-content{
				position: relative;
				z-index: 9;
				box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
				.service-image{
					position: relative;
					.box-icon{
						position: absolute;
						font-size: 62px;
						background: $theme-color;
						color: $white;
						right: 30px;
						bottom: -20px;
						margin: 0;
						transition: all 0.5s ease;
						width: 100px;
						height: 100px;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 9;
						svg{
							width: 60px;
							fill: $white;
						}
					}
					.link-overlay{
						position: absolute;
						@include size(100%, 100%);
						top: 0;
						left: 0;
						z-index: 11;
					}
				}
				.service-content{
					padding: 40px 15px 30px;
					@media(max-width: 1200px){
						padding: 30px 15px 25px;
					}
					.content-inner{
						max-width: 260px;
						margin: 0 auto;
					}
					.title{ 
						font-size: 22px;
						font-weight: 500;
						margin: 0 0 15px;
						color: $theme-color-2;
					}
					.desc{
						font-size: 16px;
					}
					.read-more{
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-top: 1px solid $border-color;
						padding-top: 12px;
						margin-top: 16px;
					}
				}
			}
			&:hover, &:focus, &.active{
				.service-item-content{
					.service-image{
						.box-icon{
							bottom: 0;
						}
					}
				}
			}
		}

		&.style-4{
			overflow: visible;
			@include media-breakpoint-down(md){
				text-align: center;
			}
			.service-item-content{
				transition: all 0.35s;
				background: $white; 
				position: relative;
				z-index: 9;
				.service-content{
					padding: 55px 60px 45px;
					box-shadow: 0 0 0 2px $border-color inset;
					@include media-breakpoint-down(xl){
						padding: 30px;
					}
					.box-icon{
						@include transition(all 0.35s);
						display: inline-block;
						height: 60px;
						i{ color: $theme-color-2; @include transition(all 0.35s);}
						svg{ fill: $theme-color-2; @include transition(all 0.35s);}
					}
					.title{ 
						font-size: 24px;
						font-weight: 500;
						line-height: 30px;
						margin: 10px 0 15px;
						color: $theme-color-black;
						@include transition(all 0.35s); 
					}
					.desc{
						@include transition(all 0.35s);
						font-weight: 300;
						line-height: 34px;
					}
					.link-overlay{
						position: absolute;
						@include size(100%, 100%);
						top: 0;
						left: 0;
						z-index: 11;
					}
				}
			}
			&:hover, &:focus, &.active{
				.service-item-content{
					box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.08);
					.service-content{
						.box-icon{
							i{ color: $theme-color; }
							svg{ fill: $theme-color; }
							animation: beat 1.5s ease 0s infinite;
						}
					}
				}
			}
		}
	}
}

.item-active.center{
	.service-item{
		&.style-1{
			.service-item-content{
				.title{
					color: $white;
				}
				.desc{
					color: #D2DCE5;
				}
				.box-icon{
					color: $white;
					svg{
						fill: $white;
					}
				}
				.arrow{
					.icon{
						color: $white;
						background: $theme-color;
						border-color: $theme-color;
					}
				}
			}
			.service-background{
				opacity: 1;
				@include scale(1);
			}
			.number{
				opacity: 0.12;
			}
		}
		&.style-2{
			.service-content-hover{
				@include scale(1);
				opacity: 1; 
			}
		} 
		&.style-4{
			.service-item-content{
				box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.08);

				.service-content{
					.box-icon{
						i{ color: $theme-color; }
						svg{ fill: $theme-color; }
					}
				}
			}
		}
	}
}

.gsc-services-group{
	&.layout-grid{
		.service-item{
			&.style-3{
				box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
			}
		}
	}
}