.ks-widget-box {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	text-decoration: none !important;
	/* Smooth transition for properties other than background */
	transition: all 0.6s ease-in-out;
	justify-content: center; 
	align-items: flex-start;
	/* Default Gradient Background */
	background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

/* Pseudo-element for Smooth Gradient Hover */
.ks-widget-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0; /* Behind image and content */
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	/* The actual hover background will be injected here by Elementor */
}

.ks-widget-box:hover::before {
	opacity: 1;
}

.ks-image-wrapper {
	position: absolute;
	z-index: 1; /* Above background */
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ks-image-wrapper img {
	display: block;
	height: auto;
	max-width: 100%;
}

.ks-content-wrapper {
	position: relative;
	z-index: 2; /* Above image and background */
	width: 100%;
	/* Horizontal Layout: Title Left, Button Right */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ks-title {
	margin: 0;
	transition: color 0.6s ease-in-out;
}

.ks-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.6s ease-in-out;
}

.ks-button svg {
	width: 1em;
	height: 1em;
}