/* =============================================================================
- Fancy Box
============================================================================= */
.e-con-inner > .elementor-widget-gwel-fancy-box {
	width: var(--container-widget-width);
	--flex-grow: var(--container-widget-flex-grow);
}

.gwel-fancy-box {
	background-color: $color-grey;
	position: relative;
	overflow: hidden;
	&:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		pointer-events: none;
		transition: opacity .3s ease;
	}
	&:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 3;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
	}
	.gwel-inner {
		padding: 30px;
		min-height: 450px;
		position: relative;
		z-index: 6;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		pointer-events: none;
	}

	.gwel-bg-wrapper {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		transition: transform 9s cubic-bezier(.24,1,.3,1);
	}
	&.gwel-hover-anim {
		.gwel-content {
			transform: translateY(100%);
			transition: transform .6s cubic-bezier(.05,.3,.2,1);
		}
		.gwel-top-wrapper {
			transition: transform .6s cubic-bezier(.05,.3,.2,1);
			transform: translateY(-100%);
		}
		&:hover {
			.gwel-top-wrapper,
			.gwel-content {
				transform: translateY(0);
			}
		}
	}
	&:hover {
		.gwel-bg-wrapper {
			transform: scale(1.2);
		}
		&:before {
			opacity: 0;
		}
		&:after {
			opacity: 1;
		}
	}
	.gwel-title {
		margin: 0 0 18px 0;
		flex: 1;
	}
	.gwel-description {
		margin: 0;
	}

	.gwel-btn {
		margin-top: 30px;
		position: relative;
		z-index: 10;
		pointer-events: visible;
	}

	.gwel-icon {
		display: inline-flex;
		margin-bottom: 18px;
		font-size: var(--gwel-icon--size, 60px);
	}
}