/* =========================================================
   VakeelEdge Services Manager 3.3.2
   Reference card target (desktop): 392px x 520px
   ========================================================= */

.vem-services,
.vem-services * {
	box-sizing: border-box !important;
}

.vem-services {
	--vem-primary: #1d2c44;
	--vem-secondary: #af966d;
	--vem-accent: #fff8ee;
	--vem-card-border: #c8ced8;
	--vem-text: #3f424b;
	width: 100%;
	margin: 0;
	padding: 28px 0 24px;
	background: #f7f8fc;
}

.vem-services-inner {
	width: 100%;
	max-width: 1264px;
	margin: 0 auto;
	padding: 0;
}

/* Optional category filters. Hidden unless filters="yes" is used. */
.vem-service-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 28px;
}

.vem-filter-button {
	min-height: 42px;
	padding: 9px 20px;
	border: 1px solid rgba(29, 44, 68, 0.22) !important;
	border-radius: 999px !important;
	outline: 0;
	background: #fff !important;
	color: var(--vem-primary) !important;
	font-family: "Avenir Next", Avenir, Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.vem-filter-button:hover,
.vem-filter-button:focus-visible,
.vem-filter-button.is-active {
	border-color: var(--vem-primary) !important;
	background: var(--vem-primary) !important;
	color: #fff !important;
}

/* Slider viewport. On desktop it is only a transparent wrapper. */
.vem-services-viewport {
	position: relative;
	width: 100%;
}

/* Slider controls stay hidden until the mobile slider is active. */
.vem-slider-arrow,
.vem-slider-dots {
	display: none;
}

/* Exact desktop spacing from the supplied reference. */
.vem-services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 392px));
	justify-content: center;
	align-items: stretch;
	column-gap: 44px;
	row-gap: 34px;
	width: 100%;
}

.vem-columns-1 .vem-services-grid {
	grid-template-columns: minmax(0, 392px);
}

.vem-columns-2 .vem-services-grid {
	grid-template-columns: repeat(2, minmax(0, 392px));
}

.vem-columns-4 .vem-services-grid {
	grid-template-columns: repeat(4, minmax(0, 292px));
	column-gap: 28px;
}

.vem-service-card {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 392px !important;
	height: 520px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #fff !important;
	border: 1px solid var(--vem-card-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 20px rgba(29, 44, 68, 0.06) !important;
	text-align: left !important;
	transition: transform .22s ease, box-shadow .22s ease;
}

.vem-service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(29, 44, 68, 0.11) !important;
}

.vem-service-card[hidden] {
	display: none !important;
}

.vem-service-image {
	position: relative;
	flex: 0 0 201px;
	height: 201px !important;
	margin: 7px 7px 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: #eef0f3;
	border: 0 !important;
	border-radius: 3px 3px 0 0 !important;
}

.vem-service-image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	/* cover (not contain) - the image fills the box edge to edge with no
	   empty strip above/below or on the sides. A photo whose proportions
	   don't match the 392x201 (~2:1) box will be lightly cropped at the
	   top/bottom or sides instead of leaving blank space. */
	object-fit: cover !important;
	object-position: center center !important;
	transition: transform .35s ease;
}

.vem-service-card:hover .vem-service-image img {
	transform: scale(1.025);
}

.vem-service-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #f0f2f5;
	color: #9da5b0;
}

.vem-service-image-placeholder svg {
	width: 46px;
	height: 46px;
	fill: currentColor;
}

.vem-service-body {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	min-height: 0;
	margin: 0 !important;
	padding: 42px 33px 37px !important;
	background: #fff !important;
}

.vem-service-icon {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 29px !important;
	height: 29px !important;
	margin: 0 0 15px !important;
	padding: 0 !important;
	color: var(--vem-secondary) !important;
}

.vem-service-icon svg {
	display: block !important;
	width: 29px !important;
	height: 29px !important;
	margin: 0 !important;
	fill: currentColor !important;
}

.vem-services .vem-service-title,
.vem-services h3.vem-service-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--vem-primary) !important;
	font-family: "Avenir Next", Avenir, Arial, sans-serif !important;
	font-size: 25px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1.18 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: none !important;
}

.vem-services .vem-service-title a,
.vem-services .vem-service-title a:hover,
.vem-services .vem-service-title a:focus,
.vem-services .vem-service-title a:visited,
.vem-services h3.vem-service-title a {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
}

.vem-services .vem-service-description,
.vem-services p.vem-service-description {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--vem-text) !important;
	font-family: "Classico URW", Georgia, "Times New Roman", serif !important;
	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.42 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: none !important;
}

.vem-service-footer {
	display: flex !important;
	flex: 0 0 auto;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 18px;
	width: 100%;
	margin: auto 0 0 !important;
	padding: 10px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid #c2c7d0 !important;
	background: transparent !important;
}

.vem-services .vem-service-button,
.vem-services .vem-service-button:link,
.vem-services .vem-service-button:visited {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 153px !important;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 21px !important;
	border: 0 !important;
	border-radius: 999px !important;
	outline: 0;
	background: var(--vem-primary) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: "Classico URW", Georgia, "Times New Roman", serif !important;
	font-size: 20px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 40px !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap !important;
	transition: background-color .2s ease, transform .2s ease;
}

/* Important: prevents the site's global span color from making button text invisible. */
.vem-services .vem-service-button span,
.vem-services .vem-service-button:hover span,
.vem-services .vem-service-button:focus span,
.vem-services .vem-service-button:visited span {
	margin: 0 !important;
	padding: 0 !important;
	color: #fff !important;
	font: inherit !important;
	line-height: inherit !important;
	text-decoration: none !important;
}

.vem-services .vem-service-button:hover,
.vem-services .vem-service-button:focus-visible {
	background: var(--vem-secondary) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.vem-services .vem-service-arrow,
.vem-services .vem-service-arrow:link,
.vem-services .vem-service-arrow:visited {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vem-primary) !important;
	text-decoration: none !important;
}

.vem-service-arrow svg {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	transition: transform .2s ease;
}

.vem-service-arrow:hover svg,
.vem-service-arrow:focus-visible svg {
	transform: translateX(4px);
}

.vem-no-services {
	margin: 0 !important;
	padding: 18px 22px !important;
	border: 1px solid #d8dde5 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--vem-primary) !important;
	font-family: "Classico URW", Georgia, "Times New Roman", serif !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-align: center !important;
}

/* Medium desktop/tablet: keep the exact card width, switch to two columns. */
@media (max-width: 1263px) {
	.vem-services-grid,
	.vem-columns-3 .vem-services-grid,
	.vem-columns-4 .vem-services-grid {
		grid-template-columns: repeat(2, minmax(0, 392px));
		column-gap: 32px;
	}
}

/* Mobile: same visual proportions, card simply fits the available width. */
@media (max-width: 860px) {
	.vem-services-inner {
		padding: 0 16px;
	}

	.vem-services-grid,
	.vem-columns-1 .vem-services-grid,
	.vem-columns-2 .vem-services-grid,
	.vem-columns-3 .vem-services-grid,
	.vem-columns-4 .vem-services-grid {
		grid-template-columns: minmax(0, 392px);
		row-gap: 24px;
	}

	.vem-service-filters {
		justify-content: flex-start;
	}
}

/* =========================================================
   MOBILE SLIDER (only when the section has .vem-mobile-slider)
   ========================================================= */
@media (max-width: 860px) {

	/* The track itself carries the side padding so cards can peek. */
	.vem-mobile-slider .vem-services-inner {
		padding: 0 !important;
	}

	.vem-mobile-slider .vem-service-filters {
		margin: 0 16px 22px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.vem-mobile-slider .vem-service-filters::-webkit-scrollbar {
		display: none;
	}

	.vem-mobile-slider .vem-filter-button {
		flex: 0 0 auto;
	}

	.vem-mobile-slider .vem-services-grid,
	.vem-mobile-slider.vem-columns-1 .vem-services-grid,
	.vem-mobile-slider.vem-columns-2 .vem-services-grid,
	.vem-mobile-slider.vem-columns-3 .vem-services-grid,
	.vem-mobile-slider.vem-columns-4 .vem-services-grid {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		justify-content: flex-start !important;
		gap: 14px;
		width: 100%;
		margin: 0 !important;
		padding: 6px 16px 8px !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 16px;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		outline: none;
	}

	.vem-mobile-slider .vem-services-grid::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.vem-mobile-slider .vem-service-card {
		flex: 0 0 auto !important;
		width: 84% !important;
		max-width: 360px !important;
		min-width: 240px !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Small filler so the last card can also center on screen. */
	.vem-mobile-slider .vem-services-grid::after {
		content: "";
		flex: 0 0 1px;
	}

	.vem-mobile-slider .vem-service-card:hover {
		transform: none;
		box-shadow: 0 8px 20px rgba(29, 44, 68, 0.06) !important;
	}

	/* ---------- Dots ---------- */
	.vem-mobile-slider .vem-slider-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 16px 0 2px;
		padding: 0;
	}

	.vem-mobile-slider .vem-slider-dots:empty {
		display: none;
	}

	.vem-mobile-slider .vem-slider-dot {
		width: 8px !important;
		height: 8px !important;
		min-width: 8px !important;
		min-height: 8px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		outline: 0;
		background: rgba(29, 44, 68, 0.24) !important;
		box-shadow: none !important;
		cursor: pointer;
		transition: width .25s ease, background-color .25s ease;
	}

	.vem-mobile-slider .vem-slider-dot.is-active {
		width: 24px !important;
		background: var(--vem-secondary) !important;
	}

	.vem-mobile-slider .vem-slider-dot:focus-visible {
		box-shadow: 0 0 0 3px rgba(175, 150, 109, 0.35) !important;
	}

	/* ---------- Arrows (tablet width only) ---------- */
	.vem-mobile-slider .vem-slider-arrow {
		position: absolute;
		top: 50%;
		z-index: 5;
		display: none;
		align-items: center;
		justify-content: center;
		width: 40px !important;
		height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: translateY(-50%);
		border: 1px solid rgba(29, 44, 68, 0.12) !important;
		border-radius: 999px !important;
		outline: 0;
		background: #fff !important;
		box-shadow: 0 4px 14px rgba(29, 44, 68, 0.16) !important;
		color: var(--vem-primary) !important;
		cursor: pointer;
	}

	.vem-mobile-slider .vem-slider-arrow[hidden] {
		display: none !important;
	}

	.vem-mobile-slider .vem-slider-prev {
		left: 6px;
	}

	.vem-mobile-slider .vem-slider-next {
		right: 6px;
	}

	.vem-mobile-slider .vem-slider-arrow svg {
		display: block;
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* Arrows only make sense on wider touch screens; phones use swipe + dots. */
@media (min-width: 601px) and (max-width: 860px) {
	.vem-mobile-slider .vem-slider-arrow:not([hidden]) {
		display: flex;
	}

	.vem-mobile-slider .vem-service-card {
		width: 58% !important;
	}
}

@media (max-width: 460px) {
	.vem-services-inner {
		padding: 0 10px;
	}

	.vem-mobile-slider .vem-services-inner {
		padding: 0 !important;
	}

	.vem-mobile-slider .vem-services-grid {
		gap: 12px !important;
		padding: 6px 14px 8px !important;
		scroll-padding-left: 14px !important;
	}

	.vem-mobile-slider .vem-service-card {
		width: 86% !important;
	}

	.vem-mobile-slider .vem-service-filters {
		margin: 0 14px 20px;
	}

	.vem-service-card {
		height: 500px !important;
	}

	.vem-service-image {
		flex-basis: 188px;
		height: 188px !important;
	}

	.vem-service-body {
		padding: 32px 25px 28px !important;
	}

	.vem-service-icon {
		margin-bottom: 12px !important;
	}

	.vem-services .vem-service-title,
	.vem-services h3.vem-service-title {
		font-size: 23px !important;
	}

	.vem-services .vem-service-description,
	.vem-services p.vem-service-description {
		font-size: 16px !important;
		line-height: 1.45 !important;
	}

	.vem-services .vem-service-button,
	.vem-services .vem-service-button:link,
	.vem-services .vem-service-button:visited {
		min-width: 138px !important;
		height: 38px !important;
		min-height: 38px !important;
		padding: 0 18px !important;
		font-size: 18px !important;
		line-height: 38px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vem-service-card,
	.vem-service-image img,
	.vem-service-button,
	.vem-service-arrow svg,
	.vem-filter-button,
	.vem-slider-dot {
		transition: none !important;
	}

	.vem-mobile-slider .vem-services-grid {
		scroll-behavior: auto;
	}
}