/**
 * Services Carousel Block Front-end CSS
 * Updated to display 4 cards in a row and support bottom background
 */

/* Background Colors - Named Colors */
.services-carousel.bg-dark-blue,
.services-carousel-section .bg-dark-blue {
	background-color: #001C33;
	opacity: 0.9;
}

.services-carousel.bg-dark-brown,
.services-carousel-section .bg-dark-brown {
	background-color: #290B0B;
	opacity: 0.9;
}

.services-carousel.bg-burgundy,
.services-carousel-section .bg-burgundy {
	background-color: #800020;
	opacity: 0.9;
}

.services-carousel.bg-gold,
.services-carousel-section .bg-gold {
	background-color: #B8860B;
	opacity: 0.9;
}

.services-carousel.bg-copper,
.services-carousel-section .bg-copper {
	background-color: #B87333;
	opacity: 0.9;
}

.services-carousel.bg-periwinkle,
.services-carousel-section .bg-periwinkle {
	background-color: #CCCCFF;
	opacity: 0.9;
}

.services-carousel.bg-deep-blue,
.services-carousel-section .bg-deep-blue {
	background-color: #00008B;
	opacity: 0.9;
}

.services-carousel.bg-dark-red,
.services-carousel-section .bg-dark-red {
	background-color: #8B0000;
	opacity: 0.9;
}

.services-carousel.bg-white,
.services-carousel-section .bg-white {
	background-color: #FFFFFF;
	opacity: 0.9;
}

.services-carousel-section .bg-white-compliment {
	background-color: #F6F6F6;
	opacity: 0.9;
}

.services-carousel.bg-black,
.services-carousel-section .bg-black {
	background-color: #000000;
	opacity: 0.9;
}

/* Text Colors */
.services-carousel.text-white,
.services-carousel.text-white h1,
.services-carousel.text-white h2,
.services-carousel.text-white h3,
.services-carousel.text-white h4,
.services-carousel.text-white h5,
.services-carousel.text-white h6,
.services-carousel.text-white p,
.services-carousel.text-white .services-carousel-title,
.services-carousel.text-white .services-carousel-description,
.services-carousel-section.text-white,
.services-carousel-section.text-white h1,
.services-carousel-section.text-white h2,
.services-carousel-section.text-white h3,
.services-carousel-section.text-white h4,
.services-carousel-section.text-white h5,
.services-carousel-section.text-white h6,
.services-carousel-section.text-white p,
.services-carousel-section.text-white .services-carousel-title,
.services-carousel-section.text-white .services-carousel-description {
	color: #FFFFFF;
}

.services-carousel.text-black,
.services-carousel.text-black h1,
.services-carousel.text-black h2,
.services-carousel.text-black h3,
.services-carousel.text-black h4,
.services-carousel.text-black h5,
.services-carousel.text-black h6,
.services-carousel.text-black p,
.services-carousel.text-black .services-carousel-title,
.services-carousel.text-black .services-carousel-description,
.services-carousel-section.text-black,
.services-carousel-section.text-black h1,
.services-carousel-section.text-black h2,
.services-carousel-section.text-black h3,
.services-carousel-section.text-black h4,
.services-carousel-section.text-black h5,
.services-carousel-section.text-black h6,
.services-carousel-section.text-black p,
.services-carousel-section.text-black .services-carousel-title,
.services-carousel-section.text-black .services-carousel-description {
	color: #000000;
}

.services-carousel.text-dark-blue,
.services-carousel.text-dark-blue h1,
.services-carousel.text-dark-blue h2,
.services-carousel.text-dark-blue h3,
.services-carousel.text-dark-blue h4,
.services-carousel.text-dark-blue h5,
.services-carousel.text-dark-blue h6,
.services-carousel.text-dark-blue p,
.services-carousel.text-dark-blue .services-carousel-title,
.services-carousel.text-dark-blue .services-carousel-description,
.services-carousel-section.text-dark-blue,
.services-carousel-section.text-dark-blue h1,
.services-carousel-section.text-dark-blue h2,
.services-carousel-section.text-dark-blue h3,
.services-carousel-section.text-dark-blue h4,
.services-carousel-section.text-dark-blue h5,
.services-carousel-section.text-dark-blue h6,
.services-carousel-section.text-dark-blue p,
.services-carousel-section.text-dark-blue .services-carousel-title,
.services-carousel-section.text-dark-blue .services-carousel-description {
	color: #0F293E;
}

/* Override to exclude services info from the text color inheritance */
.services-carousel .services-info h3.services-name,
.services-carousel .services-info p.services-description,
.services-carousel-section .services-info h3.services-name,
.services-carousel-section .services-info p.services-description {
	color: #FFFFFF;
}

/* Special case for white background */
.services-carousel .services-info.bg-white h3.services-name,
.services-carousel .services-info.bg-white p.services-description,
.services-carousel-section .services-info.bg-white h3.services-name,
.services-carousel-section .services-info.bg-white p.services-description,
.services-carousel .services-info.bg-white-compliment h3.services-name,
.services-carousel .services-info.bg-white-compliment p.services-description,
.services-carousel-section .services-info.bg-white-compliment h3.services-name,
.services-carousel-section .services-info.bg-white-compliment p.services-description {
	color: #000000;
}

/* Eyebrow Styles */
.services-carousel-section .eyebrow {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 6.72px;
	text-transform: uppercase;
	margin-bottom: 10px;
	display: block;
}

/* Eyebrow style variations */
.services-carousel-section .eyebrow-style-uppercase {
	font-weight: 400;
	text-transform: uppercase;
}

.services-carousel-section .eyebrow-style-default {
	font-weight: 400;
	text-transform: uppercase;
}

.services-carousel-section .eyebrow-style-bold {
	font-weight: 700;
	text-transform: uppercase;
}

.services-carousel-section .eyebrow-style-elegant {
	font-style: italic;
}

/* Title and Description Styles */
.services-carousel .services-carousel-title,
.services-carousel-section .services-carousel-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 32px;
	font-weight: 400;
	text-align: left;
}

.services-carousel .services-carousel-description,
.services-carousel-section .services-carousel-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	letter-spacing: -0.48px;
	margin-bottom: 48px;
	text-align: left;
}

/* Button Styles */
/* Button Style 1: Default (Blue Background) */
.services-carousel-section .wp-block-button.is-style-default .wp-block-button__link {
	background-color: #A6B8E3;
	color: #000000;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
}

.services-carousel-section .wp-block-button.is-style-default .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
	background-color: #788FC6;
}

/* Button Style 2: Solid (Brown Background) */
.services-carousel-section .wp-block-button.is-style-solid .wp-block-button__link {
	background-color: #AA632C;
	color: #FFFFFF;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
	border: none;
	cursor: pointer;
	text-align: center;
}

.services-carousel-section .wp-block-button.is-style-solid .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
}

/* Button Style 3: Arrow */
.services-carousel-section .wp-block-button.is-style-arrow .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	position: relative;
	border-radius: 0;
}

.services-carousel-section .wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 29px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' viewBox='0 0 29 16' fill='none'%3E%3Cpath d='M28.7071 8.70711C29.0976 8.31659 29.0976 7.68342 28.7071 7.2929L22.3431 0.928934C21.9526 0.53841 21.3195 0.53841 20.9289 0.928934C20.5384 1.31946 20.5384 1.95262 20.9289 2.34315L26.5858 8L20.9289 13.6569C20.5384 14.0474 20.5384 14.6805 20.9289 15.0711C21.3195 15.4616 21.9526 15.4616 22.3431 15.0711L28.7071 8.70711ZM-8.74228e-08 9L28 9L28 7L8.74228e-08 7L-8.74228e-08 9Z' fill='%23AA622C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 10px;
	transition: transform 0.3s ease;
}

.services-carousel-section .wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

.services-carousel .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button__link,
.services-carousel-section .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button__link {
	border-left: 1px solid rgba(0, 0, 0, 0.31);
}

/* Ensure all buttons in multi-button scenario have the arrow style */
.services-carousel .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button__link::after,
.services-carousel-section .wp-block-buttons:has(.wp-block-button:nth-child(2)) .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 29px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' viewBox='0 0 29 16' fill='none'%3E%3Cpath d='M28.7071 8.70711C29.0976 8.31659 29.0976 7.68342 28.7071 7.2929L22.3431 0.928934C21.9526 0.53841 21.3195 0.53841 20.9289 0.928934C20.5384 1.31946 20.5384 1.95262 20.9289 2.34315L26.5858 8L20.9289 13.6569C20.5384 14.0474 20.5384 14.6805 20.9289 15.0711C21.3195 15.4616 21.9526 15.4616 22.3431 15.0711L28.7071 8.70711ZM-8.74228e-08 9L28 9L28 7L8.74228e-08 7L-8.74228e-08 9Z' fill='%23AA622C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 10px;
	transition: transform 0.3s ease;
}

.services-carousel-bg-image-cont{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	height: 100%;
}

/* Services Carousel Styles */
.services-carousel-section {
	position: relative;
	min-height: 676px;
	width: 100%;
	overflow: hidden;
	padding: 117px 0;
}

/* Background bottom section */
.services-carousel-section {

	z-index: 5;
}

/* Support for hex colors */
.services-carousel-section [class*="bg-hex-"] {
	/* Note: Hex colors will need to be handled with inline styles or JavaScript */
}

.services-carousel-container {
	display: flex;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 30px; /* Increased padding for better spacing */
	position: relative;
	flex-direction: column;
	z-index: 10; /* Ensure content stays above the background */
}

@media (max-width: 1500px) {
	.services-carousel-container {
		max-width: 1200px
	}
}

@media (max-width: 1500px) {
	.services-carousel-section .eyebrow {
		font-size: 16px !important;
	}

	.services-carousel .services-carousel-description,
	.services-carousel-section .services-carousel-description {
		font-size: 16px !important;
	}

	.services-carousel-section .wp-block-button.is-style-default .wp-block-button__link {
		font-size: 16px !important;
	}

	.services-carousel-section .wp-block-button.is-style-solid .wp-block-button__link {
		font-size: 16px !important;
	}

	.services-carousel-section .wp-block-button.is-style-arrow .wp-block-button__link {
		font-size: 16px !important;
	}

	.services-content-column .flex .midfield-description p,
	.services-content-column .flex .midfield-description li {
		font-size: 16px !important;
	}

	.services-name {
		font-size: 16px !important;
	}

	.cs-cta-description {
		font-size: 16px !important;
	}

	.services-carousel-cta-link {
		font-size: 16px !important;
	}
}

/* Content Column */
.services-content-column {
	display: flex;
	flex-direction: row !important; /* Force row direction */
	justify-content: space-between !important; /* Space between content and navigation */
	align-items: flex-start !important; /* Align items to the top */
	margin-bottom: 40px; /* Space between content and carousel */
	width: 100%;
}

/* Content Wrapper */
.services-content-wrapper {
	flex: 1 1 100%; /* Take 70% of the space but allow flex */
	padding-right: 30px; /* Add some spacing between content and navigation */
	text-align: left;
}

/* Desktop/Mobile visibility control */
.desktop-only {
	display: flex;
}


/* Buttons below inner blocks (when buttons_left is true) - desktop only */
.services-navigation.services-buttons-below {
	display: flex;
	justify-content: flex-start !important;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 15;
	margin-top: 25px;
	margin-bottom: 25px;
}

/* Container for navigation buttons and optional midfield description */
.services-content-column .flex {
	display: flex;
	/*flex-direction: row;*/
	/*flex-direction: column;*/
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-top: 30px;
	width: 100%;
}


.services-navigation.services-buttons-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0;
	gap: 8px;
	position: relative;
	z-index: 15;
	/*margin-left: 30px;*/
	flex: 0 0 auto;
}

/* Mobile navigation (independent of buttons_left setting) */
.services-navigation.mobile-only {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	justify-content: flex-start !important;
}

/**
 * Midfield Description WYSIWYG Styles
 */

/* Base container for midfield description */
.services-content-column .flex .midfield-description {
	flex: 1;
	/*max-width: calc(100% - 120px);*/
}

/* Default paragraph and list item styles for midfield description */
.services-content-column .flex .midfield-description p,
.services-content-column .flex .midfield-description li {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	letter-spacing: -0.48px;
	margin-bottom: 16px;
	line-height: 1.5;
}

/* List styles for midfield description */
.services-content-column .flex .midfield-description ul {
	padding-left: 20px;
	margin-bottom: 16px;
}

.services-content-column .flex .midfield-description ol {
	padding-left: 20px;
	margin-bottom: 16px;
}

/* Header styles for midfield description - match innerblock headers */
.services-content-column .flex .midfield-description h1,
.services-content-column .flex .midfield-description h2,
.services-content-column .flex .midfield-description h3,
.services-content-column .flex .midfield-description h4,
.services-content-column .flex .midfield-description h5,
.services-content-column .flex .midfield-description h6 {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 24px;
	font-weight: 400;
}

/* Adjust heading sizes for hierarchy */
.services-content-column .flex .midfield-description h2 {
	font-size: 40px;
}

.services-content-column .flex .midfield-description h3 {
	font-size: 32px;
}

.services-content-column .flex .midfield-description h4 {
	font-size: 24px;
}

.services-content-column .flex .midfield-description h5,
.services-content-column .flex .midfield-description h6 {
	font-size: 20px;
}

/* Link styles for midfield description as specified */
.services-content-column .flex .midfield-description a {
	color: #AA622C;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.48px;
	text-decoration: underline;
	transition: all 0.3s ease;
}

.services-content-column .flex .midfield-description a:hover {
	opacity: 0.8;
}

/* Services Carousel Column */
.services-carousel-column {
	flex: 0 0 100%;
	position: relative;
	overflow: visible;
	height: auto;
	min-height: 450px;
	z-index: 10;
	margin-bottom: 83px;
}

/* Carousel Track - Modified for 4-card layout */
.services-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	position: relative;
	margin-bottom: 30px;
	justify-content: center;
	overflow: visible;
	width: 100%;
}

.services-carousel-item {
	position: relative;
	height: auto;
	flex: 0 0 calc(25%);
	max-width: calc(25%);
	margin-right: 0;
	transition: all 0.3s ease;
	min-height: 579px;
}

.services-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.3s ease; /* Add smooth transition for hover effect */
}

/* Image hover effect - 1.1 scale zoom */
.services-card:hover .services-image {
	transform: scale(1.1);
}

/* Navigation Buttons */
.services-prev,
.services-next {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.3s ease;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.services-prev svg,
.services-next svg {
	width: 45px;
	height: 45px;
}

.services-prev:disabled,
.services-next:disabled {
	cursor: pointer; /* Changed to allow clicking even when "disabled" for loop effect */
	opacity: 1; /* Keep full opacity for loop effect */
}

.services-prev:focus,
.services-next:focus {
	outline: none;
}

/* Card styling for services */
.services-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* Ensure image doesn't overflow on hover */
	height: 100%;
}

/* Container for name and description */
.services-info {
	position: absolute;
	background: rgba(255, 255, 255, 0.77);
	display: flex;
	padding: 32px 24px;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	top: 0;
	z-index: 10;
	margin: 50% 32px;
	width: 80%;
	min-height: 240px;
}

/* Name styling */
.services-name {
	font-family: 'DM Sans', sans-serif;
	color: #000 !important;
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 135.903%;
	letter-spacing: 5.94px;
	text-transform: uppercase;
	margin-bottom: 9px;
}

/* Description styling */
.services-description {
	font-family: 'DM Sans', sans-serif;
	color: #000 !important;
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 135.903%;
	letter-spacing: -0.48px;
	margin-bottom: 32px;
}

.sc-card-cta{
	color: #000 !important;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.sc-card-cta::after {
	content: "";
	display: inline-block;
	width: 29px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' viewBox='0 0 29 16' fill='none'%3E%3Cpath d='M28.7071 8.70711C29.0976 8.31659 29.0976 7.68342 28.7071 7.2929L22.3431 0.928934C21.9526 0.53841 21.3195 0.53841 20.9289 0.928934C20.5384 1.31946 20.5384 1.95262 20.9289 2.34315L26.5858 8L20.9289 13.6569C20.5384 14.0474 20.5384 14.6805 20.9289 15.0711C21.3195 15.4616 21.9526 15.4616 22.3431 15.0711L28.7071 8.70711ZM-8.74228e-08 9L28 9L28 7L8.74228e-08 7L-8.74228e-08 9Z' fill='%23AA622C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 10px;
	transition: transform 0.3s ease;
}

.services-carousel-item:hover .sc-card-cta::after {
	transform: translateX(5px);
}

/* Style for white background complementary color */
.bg-white-compliment {
	background-color: #0F293E; /* Or any complementary color you want */
}

/* Text color overrides */
.services-name.text-black {
	color: #000000 !important;
}

.services-description.text-black {
	color: #000000 !important;
}

/* Reset color overrides from parent elements */
.text-black .services-info,
.text-dark-blue .services-info {
	color: #FFFFFF;
}

.text-black .services-name,
.text-dark-blue .services-name,
.text-black .services-description,
.text-dark-blue .services-description {
	color: #FFFFFF;
}

.sc-bottom-overlay{
	display: block;
}

.sc-bottom-overlay-mobile{
	display: none;
}

/* Responsive adjustments - Tablet */
@media (max-width: 1250px) {
	.services-carousel-container {
		flex-direction: column;
		padding: 0 30px;
	}

	.services-content-column {
		flex-direction: column !important;
	}

	.services-content-wrapper {
		flex: 1 1 100%;
		max-width: 100%;
		padding-right: 0;
		margin-bottom: 0;
	}

	.services-content-column .flex {
		width: 100%;
		flex-direction: column;
		margin-top: 0;
	}

	/* Apply to desktop navigation */
	.services-navigation.services-buttons-right,
	.services-navigation.services-buttons-below {
		margin-left: 0;
		margin-top: 0;
	}

	.services-carousel-column {
		flex: 0 0 100%;
		width: 100%;
	}

	.services-content-wrapper {
		max-width: 100%;
	}

	.services-carousel-section {
		min-height: auto;
		padding: 60px 0;
	}

	/* Adjust to 2 cards per row on tablet with mobile-like styling */
	.services-carousel-item {
		flex: 0 0 calc(50%);
		max-width: calc(50%);
		min-height: 600px; /* Same as mobile */
	}

	/* Make images fill the full height like mobile */
	.services-card .services-image {
		width: 100%;
		height: 100%; /* Same as mobile */
		display: block;
		object-fit: cover;
	}

	.services-name {
		font-size: 22px;
	}

	.services-info{
		margin: 35% 32px;
		width: 88% !important;
	}

	/* Responsive adjustments for midfield description */
	.services-content-column .flex .midfield-description {
		max-width: 100%;
		margin-bottom: 20px;
	}

	.services-content-column .flex .midfield-description h1,
	.services-content-column .flex .midfield-description h2 {
		font-size: 36px;
	}

	.services-content-column .flex .midfield-description h3 {
		font-size: 28px;
	}

	.services-content-column .flex .midfield-description p,
	.services-content-column .flex .midfield-description li {
		font-size: 16px;
	}

	.services-navigation.mobile-only {
		margin-bottom: 40px;
		margin-top: 0 !important;
	}
}

/* Responsive adjustments - Mobile */
@media (max-width: 768px) {
	.services-carousel-container {
		padding: 0;
	}

	.services-info{
		margin: 50% 32px !important;
		width: 83% !important;
	}

	.services-carousel .services-carousel-title,
	.services-carousel-section .services-carousel-title {
		font-size: 42px;
		margin-bottom: 24px;
	}

	.services-carousel-section {
		padding: 40px 0;
	}

	.services-carousel-container {
		padding: 0 20px;
	}

	.services-carousel-title {
		font-size: 28px;
		text-align: left !important;
	}

	.services-carousel-description {
		text-align: left !important;
	}

	.services-content-wrapper {
		text-align: left;
	}

	/* Adjust content title alignment */
	.services-carousel .services-carousel-title,
	.services-carousel-section .services-carousel-title {
		text-align: left !important;
	}

	.services-carousel .services-carousel-description,
	.services-carousel-section .services-carousel-description {
		text-align: left !important;
	}

	.sc-bottom-overlay{
		display: none !important;
	}

	.sc-bottom-overlay-mobile{
		display: block !important;
		height: 30%;
	}

	.sc-bottom-overlay-color-mobile{
		z-index: 1;
	}

	.services-navigation.services-buttons-right {
		justify-content: center;
		align-self: center;
	}

	/* Modified carousel layout for mobile to show peek effect */
	.services-carousel-column {
		overflow: hidden;
		padding: 0;
		margin: 0 -20px;
		width: calc(100% + 40px);
		position: relative;
		margin-bottom: 0;
	}

	.cs-bottom-content{
		padding-bottom: 118px;
		padding-top: 100px;
	}

	.services-carousel-track {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 0;
		gap: 0; /* Remove gap to ensure cards touch */
		transition: transform 0.3s ease;
	}

	/* Card styling for peek effect - 80% width with no gap */
	.services-carousel-item {
		flex: 0 0 80%; /* Each card takes 80% of viewport width */
		max-width: 80%;
		transition: all 0.3s ease;
		margin: 0; /* No margin between cards */
		box-sizing: border-box;
		position: relative;
		min-height: 600px;
	}

	.sc-bottom-overlay-mobile{
		height: 38%;
	}


	.sc-bottom-overlay-color-mobile{
		height: 38%;
	}

	/* Remove any scaling or opacity effects - show cards at full visibility */
	.services-carousel-item.active,
	.services-carousel-item {
		opacity: 1;
		transform: none;
	}

	/* UPDATED: Increased image height to 500px */
	.services-card .services-image {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover; /* Ensure image covers area without distortion */

	}

	.services-info {
		padding: 32px 20px;
	}

	.services-name {
		font-size: 20px;
	}

	/* Position navigation buttons for mobile */
	.services-navigation.mobile-only {
		position: relative;
		margin-top: 20px;
		margin-left: 0;
		justify-content: flex-start !important;
	}

	/* Make CTA button align with other content */
	.services-carousel-cta-link {
		margin-top: 20px;
		align-self: flex-start;
	}

	/* Eyebrow text alignment */
	.services-carousel-section .eyebrow {
		text-align: left;
	}

	/* Control overall card size - REMOVED max-height to ensure content isn't cut off */
	.services-card {
		margin: 0;
		height: 100%;
	}


	/* Mobile style for midfield description */
	.services-content-column .flex .midfield-description {
		width: 100%;
		max-width: 100%;
		margin-bottom: 15px;
	}

	.services-content-column .flex .midfield-description h1,
	.services-content-column .flex .midfield-description h2 {
		font-size: 28px;
		text-align: left;
	}

	.services-content-column .flex .midfield-description h3 {
		font-size: 24px;
	}

	.services-content-column .flex .midfield-description p,
	.services-content-column .flex .midfield-description li {
		font-size: 16px;
		text-align: left;
	}

	/* Ensure buttons layout properly on mobile */
	.services-content-column .flex {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 432px) {
	.sc-bottom-overlay-mobile{
		height: 44%;
	}


	.sc-bottom-overlay-color-mobile{
		height: 44%;
	}
}

.cs-cta-title{
	color: #FFF !important;
	text-align: center;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 400;
	line-height: 42px;
	margin-bottom: 20px;
}

.cs-cta-description{
	color: #FFF !important;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.54px;
	margin-bottom: 20px;
}


.services-carousel-cta-link {
	background-color: #A6B8E3;
	color: #000000;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
}

.services-carousel-cta-link:hover{
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
}

/* Optional: CSS for cloned items */
.services-carousel-item.clone-item {
	/* Keep the same styles as regular items */
	opacity: 1;
	transform: none;
}

/* JS sync - Target the same buttons whether they're in services-buttons-below, services-buttons-right, or mobile-only */
.services-carousel-section .services-prev,
.services-carousel-section .services-next {
	/* Same styling applies to all button locations */
}