.gsc-image-content{
  	&.skin-v1{
	 	position: relative;
	 	margin: 0 auto;
	 	.image{
			position: relative;
			overflow: hidden;
			text-align: center;
			img{
		  		transition: all 8s;
			}
		}
	 	.icon_box_content{
	 		position: absolute;
	 		bottom: 50px;
	 		right: -20px;
	 		z-index: 11;
	 		background: $white;
	 		padding: 20px 20px 18px;
	 		border-radius: 8px;
	 		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	 		.content-inner{
	 			display: flex;
	 			.ib-icon{
	 				font-size: 32px;
	 				color: $theme-color;
	 				padding-right: 15px;
	 			}
		 		.ib-content{
		 			.title{
		 				font-size: 11px;
		 				font-weight: 500;
		 				text-transform: uppercase;
		 				margin: 0 0 3px;
		 				color: $body-color;
	 					letter-spacing: 1px;
		 			}
		 			.desc{
		 				font-size: 18px;
		 				font-weight: 700;
		 				color: $black;
		 				line-height: 1;
		 			}
		 		}
	 		}
	 	}
	 	.link-overlay{
	 		position: absolute;
	 		@include size(100%, 100%);
	 		top: 0;
	 		left: 0;
	 		z-index: 11;
	 	}
		&:hover{
			.image{
			  	img{
				 	@include scale(1.05);
			  	}
			}
		}
  	}

  	&.skin-v2{
	 	position: relative;
	 	margin: 0 auto 30px;
	 	.image{
	 		position: relative;
	 		z-index: 9;
	 	}
	 	&:after{
	 		content: '';
	 		@include size(205px, 200px);
	 		position: absolute;
	 		top: 0;
	 		left: 0;
	 		z-index: 1;
	 		background: url('#{$image-theme-path-base}image-shape.png') no-repeat center center $nocolor;
	 		opacity: 0.2;
		   animation-name: shapeMover;
		   animation-duration: 8s;
		   animation-timing-function: linear;
		   animation-iteration-count: infinite;
	 	} 
  	}

  	&.skin-v3{
	 	position: relative;
	 	text-align: left;
	 	max-width: 600px;
	 	margin: 0 auto 20px;
	 	.image{
			position: relative;
			overflow: hidden;
			text-align: center;
			border-radius: 50%;
			img{
		  		border-radius: 50%;
			}
	 	}
	 	.shape-1{
	 		position: absolute;
    		top: 120px;
    		left: -41px;
    		height: 95px;
    		width: 95px;
    		background-color: $theme-color-2;
    		border-radius: 50%;
    		animation-name: shapeMover;
    		animation-duration: 10s;
    		animation-timing-function: linear;
    		animation-delay: 2s;
    		animation-iteration-count: infinite;
    		perspective: 100px;
    		transform-origin: center center;
	 	}
	 	.shape-2{
	 		position: absolute;
	    	bottom: -60px;
	    	right: 57px;
	    	height: 180px;
	    	width: 180px;
	    	background-color: $theme-color;
	    	border-radius: 50%;
	    	z-index: -1;
	    	animation-name: shapeMover;
	    	animation-duration: 10s;
	    	animation-timing-function: linear;
	    	animation-delay: 2s;
	    	animation-iteration-count: infinite;
	    	perspective: 100px;
	    	transform-origin: center center;
	 	}
  	}

  	&.skin-v4{
	 	position: relative;
	 	text-align: left;
	 	max-width: 500px;
	 	margin: 0 auto 30px;
	 	.image{
			position: relative;
			overflow: hidden;
			text-align: center;
			img{
		  		@include transition(all 3s);
			}
	 	}  
	 	.box-content{
			background: $white;
			z-index: 1;
			padding: 35px 30px 60px;
			@include transition(all 0.35s); 
			text-align: center;
			position: relative;
			&:before{
				content: '';
				@include size(0, 1px);
				position: absolute;
				bottom: -6px;
				left: 0;
				background: $theme-color-2;
				z-index: 11;
				transition: width 0.35s;
			}
			&:after{
            content: '';
            background: url('#{$image-theme-path-base}image-content-pattern.png') repeat-x bottom center transparent;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 30px;
            opacity: 0;
			}
			.content-inner{
				max-width: 260px;
				margin: 0 auto;
				.title{
				  	font-size: 24px;
				  	color: $black;
				  	line-height: 36px;
					a{
 						background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 89% / 0px 2px no-repeat;
						&:hover{
							background-size: 100% 2px; 
						}
					}
				}
				.desc{
			  		margin: 25px 0 20px;
			  		color: $body-color;
				}
			}
	 	}
	 	&:hover{
	 		.box-content{
	 			background: $theme-color-2;
	 			&:before{
	 				width: 100%;
	 			}
	 			&:after{
	 				opacity: 1;
	 			}
	 			.content-inner{
	 				.title{
	 					color: $white;
	 					a{
	 						color: $white;
	 					}
	 				}
	 				.desc{
	 					color: #9d9d9d;
	 				}
	 				.read-more{
	 					a{
	 						color: $white;
	 						&:before{
	 							background: #333333;
	 						}
	 					}
	 				}
	 			}
	 		}
	 	}
  	}

  	&.skin-v5{
	 	text-align: center;
	 	position: relative;
	 	max-width: 560px;
	 	margin: 0 auto 30px;
	 	.image{
			position: relative;
			overflow: hidden;
			z-index: 11;
			max-width: calc(100% - 170px); 
			padding-bottom: 105px;
			@include media-breakpoint-down(sm){
		  		padding: 0;
		  		width: 100%;
			}
			img{
		  		transition: all 5s;
			}
			&:hover{
			  	img{
				 	@include scale(1.1);
			  	}
			}
		}
	 	.image-second{
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 11;
			width: 370px;
			max-width: calc(100% - 170px); 
			.line-2{
				width: 6px;
				height: 75px;
				background: $theme-color;
				bottom: 0;
				left: -36px;
				position: absolute;
				z-index: 1;
			}
			.image-second-inner{
			  	overflow: hidden;
			  	img{
				 	transition: all 5s;
			  	}
			}
		 	&:hover{
			  	img{
				 	@include scale(1.1);
			  	}
			}
	 	}
	 	.title{
	 		position: absolute;
	 		z-index: 11;
	 		color: $theme-color;
	 		right: 20px;
	 		bottom: 0;
			.text{
		  		font-family: $font-second;
	 			font-size: 45px;
	 			line-height: 115px;
	 			@include media-breakpoint-down(md){
	 				font-size: 38px;
	 				line-height: 95px;
	 			}
	 			@include media-breakpoint-down(sm){
	 				font-size: 32px;
	 			}
			}
	 	}

		.line-1{
			width: 180px;
			height: 200px;
			position: absolute;
			top: -50px;
			right: 100px;
			z-index: 6;
			border: 5px solid $theme-color;
 		} 
  	}
  	&.skin-v6{
	 	position: relative;
	 	text-align: left;
	 	max-width: 500px;
	 	margin: 0 auto 30px;
	 	border-radius: 8px;
	 	overflow: hidden;
	 	.box-content{
	 		position: relative;
	 		.content-inner{
	 			position: relative;
	 			z-index: 11;
	 			padding: 55px 35px 60px;
	 			text-align: center;
	 			@include media-breakpoint-down(lg){
	 				padding: 45px 20px 50px;
	 			}
	 			.title{
	 				margin: 0 0 30px; 
	 				font-size: 28px;
	 				a{
	 					color: $white;
	 				}
	 			}
	 			.desc{
	 				color: #9d9d9d;
	 				.medium{
	 					color: $white;
	 					display: block;
	 					margin-top: 20px;
	 					font-size: 22px;
	 					font-weight: 700;
	 				}
	 			}
	 			.read-more{
	 				padding-top: 15px;
	 			}
	 		}
	 		.bg-image{
	 			position: absolute;
	 			top: 0;
	 			left: 0;
	 			@include size(100%, 100%);
	 			z-index: 1;
	 			background-size: cover;
	 			background-position: center center;
	 			&:after{
	 				content: '';
	 				width: 100%;
	 				height: 100%;
	 				background: rgba(0, 0, 0, 0.85);
	 				position: absolute;
	 				top: 0;
	 				left: 0;
	 				z-index: 2;
	 			}
	 		}
	 	}
  	}

  	&.skin-v7{
	   position: relative;
	   margin-bottom: 30px;
	   text-align: left;
	   padding: 30px 45px;
	   border: 1px solid $border-color;
	   @include media-breakpoint-down(lg){
	      padding: 30px 20px;
	   }
	   .image{
	      position: relative;
	      overflow: hidden;
	      text-align: center;
	      img{
	        	@include transition(all 3s);
	      }
	   }  
	   .box-content{
	      background: $white;
	      z-index: 1;
	      @include transition(all 0.35s); 
	      text-align: center;
	      .title{
	        	margin: 20px 0 0;
	        	font-size: 20px;
	        	color: $black;
	        	line-height: 32px;
	      }
	      .desc{
	        	margin-top: 25px;
	        	color: $body-color;
	      }
	      .read-more{
	        	margin-top: 28px;
	      }
	   }
	}
}