/**
 * Easy Elements Pro — Service Card widget
 * Scoped under .eel-service-card. Uses standard Elementor selector targets so
 * controls (typography/colors/spacing) override these defaults predictably.
 */
.eel-service-card {
	background: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	padding-bottom: 30px;
	position: relative;
	transition: box-shadow .3s ease, transform .3s ease;
}

.eel-service-card-link {
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
}

.eel-service-card-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.eel-service-card-image-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.eel-service-card-image-wrap img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 12px;
}

/* Icon badge under the image — light gray default circle so the badge is visible
   before the user picks a Background; Group_Control_Background overrides this. */
.eel-service-card-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: -25px;
	margin-bottom: 12px;
	background-color: #F1F4F9;
	flex-shrink: 0;
	z-index: 3;
	position: relative;
}

.eel-service-card-icon i {
	font-size: 22px;
	line-height: 1;
	color: #1a1a1a;
}

.eel-service-card-icon svg {
	width: 22px;
	height: 22px;
	fill: #1a1a1a;
	display: block;
}

.eel-service-card-body {
	width: 100%;
	box-sizing: border-box;
	padding: 0 20px;
}

.eel-service-card-title {
	margin: 0 0 12px 0;
	color: #0E1330;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
}

.eel-service-card-desc {
	margin: 0 0 22px 0;
	color: #5A6378;
	font-size: 15px;
	line-height: 1.6;
}

.eel-service-card-button-wrap {
	display: flex;
	justify-content: center;
	margin-top: 4px;
	position: relative;
	z-index: 5;
}

.eel-service-card-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 26px;
	border: 1px solid #E2E5EE;
	border-radius: 50px;
	background: #FFFFFF;
	color: #0E1330;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
	cursor: pointer;
	position: relative;
	z-index: 5;
}

.eel-service-card-button:hover,
.eel-service-card-button:focus {
	background: #0E1330;
	color: #FFFFFF;
	border-color: #0E1330;
	text-decoration: none;
}

.eel-service-card-button:hover i,
.eel-service-card-button:focus i {
	color: inherit;
}

.eel-service-card-button:hover svg,
.eel-service-card-button:focus svg,
.eel-service-card-button:hover svg path,
.eel-service-card-button:focus svg path {
	fill: currentColor;
}

.eel-service-card-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.eel-service-card-button-icon svg {
	width: 1em;
	height: 1em;
}

.eel-service-card:hover .elementor-animation-grow,
.eel-service-card:focus-within .elementor-animation-grow {
	transform: scale(1.1);
}

.eel-service-card:hover .elementor-animation-shrink,
.eel-service-card:focus-within .elementor-animation-shrink {
	transform: scale(0.9);
}

.eel-service-card:hover .elementor-animation-bounce-in,
.eel-service-card:focus-within .elementor-animation-bounce-in {
	transform: scale(1.2);
	transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36);
}

.eel-service-card:hover .elementor-animation-bounce-out,
.eel-service-card:focus-within .elementor-animation-bounce-out {
	transform: scale(0.8);
	transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36);
}

.eel-service-card:hover .elementor-animation-rotate,
.eel-service-card:focus-within .elementor-animation-rotate {
	transform: rotate(4deg);
}

.eel-service-card:hover .elementor-animation-grow-rotate,
.eel-service-card:focus-within .elementor-animation-grow-rotate {
	transform: scale(1.1) rotate(4deg);
}

.eel-service-card:hover .elementor-animation-float,
.eel-service-card:focus-within .elementor-animation-float {
	transform: translateY(-8px);
}

.eel-service-card:hover .elementor-animation-sink,
.eel-service-card:focus-within .elementor-animation-sink {
	transform: translateY(8px);
}

.eel-service-card:hover .elementor-animation-skew,
.eel-service-card:hover .elementor-animation-skew-forward,
.eel-service-card:focus-within .elementor-animation-skew,
.eel-service-card:focus-within .elementor-animation-skew-forward {
	transform: skew(-10deg);
}

.eel-service-card:hover .elementor-animation-skew-backward,
.eel-service-card:focus-within .elementor-animation-skew-backward {
	transform: skew(10deg);
}

.eel-service-card:hover .elementor-animation-pulse,
.eel-service-card:focus-within .elementor-animation-pulse {
	animation-name: elementor-animation-pulse;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.eel-service-card:hover .elementor-animation-pulse-grow,
.eel-service-card:focus-within .elementor-animation-pulse-grow {
	animation-name: elementor-animation-pulse-grow;
	animation-duration: .3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.eel-service-card:hover .elementor-animation-pulse-shrink,
.eel-service-card:focus-within .elementor-animation-pulse-shrink {
	animation-name: elementor-animation-pulse-shrink;
	animation-duration: .3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.eel-service-card:hover .elementor-animation-push,
.eel-service-card:focus-within .elementor-animation-push {
	animation-name: elementor-animation-push;
	animation-duration: .3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

.eel-service-card:hover .elementor-animation-pop,
.eel-service-card:focus-within .elementor-animation-pop {
	animation-name: elementor-animation-pop;
	animation-duration: .3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

.eel-service-card:hover .elementor-animation-bob,
.eel-service-card:focus-within .elementor-animation-bob {
	animation-name: elementor-animation-bob-float, elementor-animation-bob;
	animation-duration: .3s, 1.5s;
	animation-delay: 0s, .3s;
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate;
}

.eel-service-card:hover .elementor-animation-hang,
.eel-service-card:focus-within .elementor-animation-hang {
	animation-name: elementor-animation-hang-sink, elementor-animation-hang;
	animation-duration: .3s, 1.5s;
	animation-delay: 0s, .3s;
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate;
}

.eel-service-card:hover .elementor-animation-wobble-vertical,
.eel-service-card:focus-within .elementor-animation-wobble-vertical {
	animation-name: elementor-animation-wobble-vertical;
}

.eel-service-card:hover .elementor-animation-wobble-horizontal,
.eel-service-card:focus-within .elementor-animation-wobble-horizontal {
	animation-name: elementor-animation-wobble-horizontal;
}

.eel-service-card:hover .elementor-animation-wobble-to-bottom-right,
.eel-service-card:focus-within .elementor-animation-wobble-to-bottom-right {
	animation-name: elementor-animation-wobble-to-bottom-right;
}

.eel-service-card:hover .elementor-animation-wobble-to-top-right,
.eel-service-card:focus-within .elementor-animation-wobble-to-top-right {
	animation-name: elementor-animation-wobble-to-top-right;
}

.eel-service-card:hover .elementor-animation-wobble-top,
.eel-service-card:focus-within .elementor-animation-wobble-top {
	animation-name: elementor-animation-wobble-top;
}

.eel-service-card:hover .elementor-animation-wobble-bottom,
.eel-service-card:focus-within .elementor-animation-wobble-bottom {
	animation-name: elementor-animation-wobble-bottom;
}

.eel-service-card:hover .elementor-animation-wobble-skew,
.eel-service-card:focus-within .elementor-animation-wobble-skew {
	animation-name: elementor-animation-wobble-skew;
}

.eel-service-card:hover .elementor-animation-wobble-vertical,
.eel-service-card:hover .elementor-animation-wobble-horizontal,
.eel-service-card:hover .elementor-animation-wobble-to-bottom-right,
.eel-service-card:hover .elementor-animation-wobble-to-top-right,
.eel-service-card:hover .elementor-animation-wobble-top,
.eel-service-card:hover .elementor-animation-wobble-bottom,
.eel-service-card:hover .elementor-animation-wobble-skew,
.eel-service-card:focus-within .elementor-animation-wobble-vertical,
.eel-service-card:focus-within .elementor-animation-wobble-horizontal,
.eel-service-card:focus-within .elementor-animation-wobble-to-bottom-right,
.eel-service-card:focus-within .elementor-animation-wobble-to-top-right,
.eel-service-card:focus-within .elementor-animation-wobble-top,
.eel-service-card:focus-within .elementor-animation-wobble-bottom,
.eel-service-card:focus-within .elementor-animation-wobble-skew {
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

.eel-service-card:hover .elementor-animation-buzz,
.eel-service-card:focus-within .elementor-animation-buzz {
	animation-name: elementor-animation-buzz;
	animation-duration: .15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.eel-service-card:hover .elementor-animation-buzz-out,
.eel-service-card:focus-within .elementor-animation-buzz-out {
	animation-name: elementor-animation-buzz-out;
	animation-duration: .75s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

/* Defensive resets so legacy theme/global CSS does not leak into card text */
.eel-service-card .eel-service-card-title,
.eel-service-card .eel-service-card-desc {
	word-wrap: break-word;
}
