.gsc-icon-box-group .icon-box-item{
	width: 100%;
}
//Item One
.iconbox-one{
	&__single{
		margin: 0 auto 30px;
		position: relative;
		width: 100%;
		text-align: center;
		max-width: 210px;
	}
	&__wrap{
	}
	&__number{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-weight: 700;
		background: $border-color;
		transition: all 0.35s;
	}
	&__content{
		border-radius: 20px;
		text-align: center;
		padding: 30px 20px 22px;
		position: relative;
		overflow: hidden;
      clip-path: polygon(68px 0, 100% 0, 100% 100%, 0 100%, 0% 68px);
      background: rgba(0, 0, 0, 0.2);
      @media(max-width: 1320px){
         padding: 30px 12px 22px;
      }
		&:before{
			content: "";
			position: absolute;
			top: 1px;
			left: 1px;
         right: 1px;
         bottom: 1px;
	 		clip-path: polygon(68px 0, 100% 0, 100% 100%, 0 100%, 0% 68px);
         background: $white;
         padding: 2px;
         border-radius: 20px;
         transition: all 0.5s;
		}
	}
	&__content-inner{
		position: relative;
	}
	&__icon{
		font-size: 60px;
		color: $theme-color;
		transition: all 0.5s;
		i{
		}
		svg{
			width: 60px;
			fill: $theme-color;
		}
	}
	&__title{
		font-size: 20px;
		margin: 15px 0 0;
		transition: all 0.5s;
      @media(max-width: 1320px){
         font-size: 18px;
      }
	}
	&__desc{
		font-size: 14px;
		line-height: 24px;
		font-weight: 500;
		margin-top: 10px;
		transition: all 0.5s;
	}
	&__link-overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}
	&__single{ 
		&:hover, &:focus, &.active{ 
			.iconbox-one{
				&__content{
					background: none;
					&:before{
						background: $theme-color-2;
					}
				}
				&__number{
					color: $white;
					background: $theme-color;
				}
				&__icon{
					color: $white;
				}
				&__title{
					color: $white;
				}
				&__desc{
					color: $white;
				}
			}
		}
	}
}

.item-active.center{
 	
}

// Item Two
.iconbox-two{
	&__single{
		padding: 32px 30px;
		position: relative;
		background: $white;
		overflow: hidden;
      @media(max-width: 1200px){
         padding: 30px 12px;
      }
      @media(max-width: 1024px){
         padding: 20px 12px;
      }
	}
	&__wrap{
		display: flex;
		align-items: center;
	}
	&__content{

	}
	&__icon{
		margin-right: 20px;
		flex: 0 0 80px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #FDF8F4;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 38px;
		color: $link-color;
      @media(max-width: 1200px){
         margin-right: 12px;
         flex: 0 0 68px;
         width: 68px;
         height: 68px;
         font-size: 30px;
      }
		i{
			transition: all 0.35s;
		}
		svg{
			width: 38px;
			fill: $link-color;
			transition: all 0.35s;
		}
	}
	&__title{
		font-size: 19px;
		font-weight: 700;
		margin: 0;
      @media(max-width: 1200px){
         font-size: 17px;
      }
	}
	&__desc{
		position: relative;
		line-height: 24px;
	}
	&__link-overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}
	&__single{ 
		&:hover, &:focus, &.active{ 
			.iconbox-two{
				&__icon{
					background: $theme-color;
					color: $white;
					svg{
						fill: $white;
					}
				}
			}
		}
	}
}
.skin-border{
	border-radius: 30px;
    overflow: hidden;
    .item-columns{
    	border-right: 1px solid #DFDFDF;
    	border-bottom: 1px solid #DFDFDF;
    	&:nth-of-type(1), &:nth-of-type(4), &:nth-of-type(5){
	    	.iconbox-two{
	    		&__single{
	    			background: #F2F5F9;
	    		}
	    	}
	    }
    }
}
.item-active.center{
	.iconbox-two{
		&__icon{
			background: $theme-color;
			i{
				color: $white;
			}
			svg{
				fill: $white;
			}
		}
	}
}

// Item Three
.iconbox-three{
	&__single{
		margin: 0 0 20px;
		position: relative;
		width: 100%;
		background: $bg-gray;
		border-radius: 20px;
		padding: 30px 15px;
		text-align: center;
		transition: all 0.35s;
	}
	&__icon{
		font-size: 50px;
		color: $theme-color;
		i{
			transition: all 0.35s;
		}
		svg{
			width: 50px;
			fill: $theme-color;
			transition: all 0.35s;
		}
	}
	&__title{
		font-size: 18px;
		margin: 10px 0 0;
		transition: all 0.5s;
	}
	&__desc{
		margin-top: 15px;
	}
	&__link-overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}
	&__single{ 
		&:hover, &:focus, &.active{ 
			background: $theme-color;
			.iconbox-three{
				&__icon{
					color: $white;
					svg{
						fill: $white;
					}
				}
				&__title, &__desc{
					color: $white;
				}
			}
		}
	}
}

.item-active.center{
	.iconbox-three{
		&__icon{
			background: $theme-color;
			i{
				color: $white;
			}
			svg{
				fill: $white;
			}
		}
	}
}

// Item Four
.iconbox-four{
	&__single{
		border: 1px solid $border-color;
		padding: 22px 18px 22px 30px;
		margin: 0 0 16px;
		position: relative;
		background: $white;
		z-index: 9; 
		border-radius: 5px;
	}
	&__wrap{
		display: flex;
		align-items: center;
	}
	
	&__icon{
		flex: 0 0 70px;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background: $bg-gray;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.35s;
		i{
			font-size: 35px;
			color: $theme-color;
			transition: all 0.5s;
		}
		svg{
			width: 35px;
			fill: $theme-color;
			transition: all 0.5s;
		}
	}
	&__content{
		padding-left: 20px;
		flex: 0 0 calc(100% - 70px);
		width: calc(100% - 70px);
	}
	&__title{
		font-size: 18px;
		margin: 0 0 4px;
	}
	&__desc{
		position: relative;
		line-height: 22px;
		font-size: 14px;
		font-weight: 400;
	}
	&__link-overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}
	&__single{ 
		&:hover, &:focus, &.active{ 
			.iconbox-four{
				&__icon{
					background: $theme-color;
					i{
						color: $white;
					}
					svg{
						fill: $white;
					}
				}
			}
		}
	} 
} 

.item-active.center{
	.iconbox-four{
		&__icon{
			background: $theme-color;
			i{
				color: $white;
			}
			svg{
				fill: $white;
			}
		}
	}
}

// Item Five
.iconbox-five{
	&__single{
		border: 1px solid rgba(0,0,0,0.05);
		padding: 20px 20px 25px 30px;
		margin: 0 0 30px;
		position: relative;
		background: $white;
		z-index: 9; 
		@media(max-width: 1024px){
			padding: 30px 18px;
		}
	}
	&__content{
	
	}
	&__content-inner{

	}
	&__icon-wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&__number{
		font-size: 30px;
		color: #d6dee1;
	}
	&__icon{
		flex: 0 0 68px;
		width: 68px;
		height: 68px;
		border-radius: 50%;
		background: $bg-gray;
		display: flex;
		align-items: center;
		justify-content: center;
		i{
			font-size: 28px;
			color: $theme-color;
			transition: all 0.5s;
		}
		svg{
			width: 28px;
			fill: $theme-color;
			transition: all 0.5s;
		}
	}
	&__content-inner{
		padding-top: 25px;
	}
	&__title{
		font-size: 18px;
		margin: 0 0 5px;
	}
	&__desc{
		position: relative;
		line-height: 22px;
		margin-top: 12px;
		font-size: 15px;
	}
	&__link-overlay{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}
	&__single{ 
		&:hover, &:focus, &.active{ 
			.iconbox-five{
				&__icon{
					background: $theme-color;
					i{
						color: $white;
					}
					svg{
						fill: $white;
					}
				}
			}
		}
	}
}

.item-active.center{
	.iconbox-five{
		&__icon{
			background: $theme-color;
			i{
				color: $white;
			}
			svg{
				fill: $white;
			}
		}
	}
}

.list-icon-one{
	margin-bottom: 30px;
	ul{
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		li{
			margin-right: 10px;
			margin-bottom: 10px;
			white-space: nowrap;
			&:last-child{
				margin-right: 0;
			}
		}
		.title{
			font-weight: 600;
			color: $headings-color;
			position: relative;
			margin-right: 15px;
		}
		.icon-item{
			position: relative;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 5px;
			padding: 2px 16px;
			color: $white;
			font-size: 12px;
			font-weight: 700;
			transition: all 0.35s;
         display: flex;
			.icon{
				margin-right: 5px;
            font-size: 14px;
			}
			.link-overlay{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				right: 0;
				z-index: 1;
			}
			&:hover, &:active{
				background: $theme-color;
			}
		}
	}
}

.list-icon-one{
	&.arrow-1{
		.title{
			&:after{
				content: '';
				width: 55px;
				height: 29px;
				background: url('#{$image-theme-path-base}arrow-1.png') no-repeat center center transparent;
				position: absolute;
				top: 100%;
				right: -12px;
				margin-top: 3px;
				z-index: 1;
				@media(max-width: 992px){
					display: none;
				}
			}
		}
	}
	&.arrow-2{
		.title{
			&:after{
				content: '';
				width: 81px;
				height: 84px;
				background: url('#{$image-theme-path-base}arrow-4.png') no-repeat center center transparent;
				background-size: 100%;
				position: absolute;
				bottom: 100%;
				right: 100%;
				margin-bottom: -24px;
				margin-right: 16px;
				z-index: 1;
			}
		}
	}
	&.arrow-3{
		.title{
			&:after{
				content: '';
				width: 55px;
				height: 29px;
				background: url('#{$image-theme-path-base}arrow-5.png') no-repeat center center transparent;
				position: absolute;
				top: 100%;
				right: -12px;
				margin-top: 3px;
				z-index: 1;
				@media(max-width: 992px){
					display: none;
				}
			}
		}
	}
}

