.cms-heading-galleries{
	.cms-img{
		@include transition();
		&:hover{
			@include transform(translateY(-10px));
		}
	}
}

// Layout 1
.cms-heading-layout-1{
	.cms-heading-desc.has-leftline .cms-content-desc-inner{
		&:before{
			@media (min-width: $screen-lg-min){
				content: '';
				width: 0px;
				border: 2px solid $border-color;
				position: absolute;
				left: -35px;
				top: 8px;
				bottom: 8px;
				[dir="rtl"] &{
					left: auto;
					right: -35px;
				}
			}
		}
	}
	.cms-heading-feature-item:not(:last-child){
		padding-bottom: 13px;
	}
	.cms-heading-info{
		.cms-info-icon:before{
			width: 58px;
			height: 58px;
			line-height: 58px;
			text-align: center;
			background: #{'rgba(var(--color-accent-rgb),0.2)'};
			color: $accent-color;
			border-radius: 50%;
			display: block;
		}
	}
}
// Layout 4
.cms-heading-layout-4{
	.cms-phone-icon{
		width: 50px;
		height: 50px;
		line-height: 40px;
		background: $primary-color;
		color: $white; 
		font-size: 20px;
		border: 4px solid $white;
		margin-left: -20px;
		[dir="rtl"] &{
			margin-left: 0;
			margin-right: -20px;
		}
	}
	// Make features 2 columns in Large Screen
	@media (min-width: $screen-lg-min){
		.cms-heading-features{
			display: flex;
			flex-wrap: wrap;
			margin-left: -20px;
			margin-right: -20px;
		}
		.cms-heading-feature-item{
			width: 50%;
			flex: 0 0 50%;
			max-width: 50%;
			padding-left: 20px;
			padding-right: 20px;
		}
	}
}
// Experience
.elementor-widget-cms_heading{
	.cms-heading-experience{
		writing-mode: vertical-lr;
		position: absolute;
		right: -30px;
    	top:-30px;
		background-color: $accent-color;
		color: $white;
		font-weight: 600;
		font-size: 18px;
		font-family: var(--heading-font-family);
		padding:30px 22px;
		@include border-radius(0 20px);
		box-shadow: -30px 30px 0 0 var(--color-white);
		z-index: 1;
		[dir="rtl"] &{
			right: auto;
			left: -30px;
			@include border-radius(20px 0);
			box-shadow: 30px 30px 0 0 var(--color-white);
		}
		@media (max-width: $screen-sm-min){
			font-size: 14px;
			right: -20px;
			padding: 20px 10px;
			box-shadow: -10px 10px 0 0 var(--color-white);
			[dir="rtl"] &{
				left: -20px;
				box-shadow: 10px 10px 0 0 var(--color-white);
			}
		}
	}
	.cms-heading-experience-inner{
		@include transform(rotate(180deg));
	}
	.cms-overlaps-divider{
		position: absolute;
		left: 50px;
		bottom: -13px;
		[dir="rtl"] &{
			left: auto;
			right: 50px;
		}
	}
}
// Shadow Color
.cms-heading-experience{
	@each $name, $color in $cms_theme_colors{
		&.shadow-#{$name}{
			box-shadow: -30px 30px 0 0 $color;
			[dir="rtl"] &{
				box-shadow: 30px 30px 0 0 $color;
			}
			@media (max-width: $screen-sm-min){
				box-shadow: -10px 10px 0 0 $color;
				[dir="rtl"] &{
					box-shadow: 10px 10px 0 0 $color;
				}
			}
		}
	}
}
// Layout 6
.cms-heading-layout-6{
	.cms-main-icon{
		width: 94px;
		height: 94px;
		line-height: 94px;
		text-align: center;
		background-color: $white;
		@include box-shadow('0 0 0 5px #{$accent-color}, 0 0 0 12px rgba(255,255,255, 0.2)');
		@each $name, $color in $cms_theme_colors {
			&.shadow-#{$name}{
				@include box-shadow('0 0 0 5px #{$color}, 0 0 0 12px rgba(255,255,255, 0.2)');
			}
		}
	}
}
// layout 7
.cms-heading-layout-7{
	.cms-list-icon-wrap,
	.cms-list-icon-bg{
		width: 58px;
		height: 58px;
		display: block;
	}
	.cms-list-icon-bg{
		@include opacity(0.2);
	}
	.cms-list-icon{
		position: absolute;
		top: 50%;
		left: 50%;
		@include transform(translate(-50%,-50%));
		z-index: 1;
	}
	.cms-list-desc{
		border-bottom: $border-main;
		padding-bottom: 22px;
	}
	.cms-heading-feature-item:last-child{
		.cms-list-desc{
			border-bottom: 0;
			padding-bottom: 0;
		}
	}
}
// layout 8
.cms-heading-layout-8{
	.cms-heading-divider{
		height: 4px;
		background: $primary-color;
		margin-top: 15px;
	}
}
// layout 9
.cms-heading-layout-9{
	.singnature-image{
		border: 10px solid #{'rgba(var(--color-accent-rgb), 0.2)'};
	}
	.cms-heading-features-wrap{
		padding-top: 40px;
		margin-top: 40px;
		border-top: $border-main;
	}
}
// Layout 10 
.cms-heading-layout-10{
	.singnature-image{
		border: 10px solid #{'rgba(var(--color-accent-rgb), 0.2)'};
	}
	@media (min-width: $screen-lg-min){
		.btn{
			overflow: visible;
			&:before{
				content: '';
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				min-width: 660px;
				background: inherit;
				border-radius: inherit;
				[dir="rtl"] &{
					right: auto;
					left: 0;
				}
			}
		}
	}
}