.block-carousel-slider {
	padding: var(--block-padding-y) var(--block-padding-x);
}

.layout-boxed .block-carousel-slider {
	width: var(--layout-boxed-width);
	max-width: var(--layout-boxed-max-width);
	margin: auto;
	border: var(--layout-boxed-border);
	border-radius: var(--layout-boxed-border-radius);
}

.block-carousel-slider-inner {
	width: 100%;
	max-width: 100%;
	margin: auto;
}

/* top content */

.block-carousel-slider .top-content {
	max-width: calc(100% - (90vw - 1100px));
	font-size: var(--top-content-text-size);
	line-height: var(--top-content-text-line-height);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--top-content-margin-bottom);
}

.block-carousel-slider .top-content-inner {
	max-width: var(--top-content-width);
}

.block-carousel-slider .top-content .preheading {
	justify-content: center;
}

.block-carousel-slider.bg-dark h2,
.block-carousel-slider.bg-dark .subheader {
	color: var(--color-white-ui);
}

/* slide container */

.block-carousel-slider .splide__track {
	overflow: visible;
}

.block-carousel-slider .carousel-slide {
	border-radius: var(--carousel-slider-radius);
	border: var(--carousel-slider-border);
	box-shadow: var(--carousel-slider-shadow);
}

.block-carousel-slider .slide-content {
	position: relative;
}


/* slide image */

.block-carousel-slider .slide-image-background {
	aspect-ratio: 11 / 6;
	background: linear-gradient(180deg, #F0F1FF 0%, #FAF5FF 100%);
	border-top-left-radius: calc( var(--carousel-slider-radius) - 1px );
	border-top-right-radius: calc( var(--carousel-slider-radius) - 1px );
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
}

.block-carousel-slider .slide-image {
	border-top-left-radius: calc( var(--carousel-slider-radius) - 1px );
	border-top-right-radius: calc( var(--carousel-slider-radius) - 1px );
	overflow: hidden;
	position: relative;
	z-index: 9;
}

.block-carousel-slider .slide-image::before,
.block-carousel-slider .slide-image::after {
	content: '';
	position: absolute;
	width: 275px;
	height: 275px;
	border-radius: 33554428px;
	filter: blur(64px);
}

.block-carousel-slider .slide-image::before {
	top: 38px;
	left: -38px;
	background: rgba(99, 102, 241, 0.10);
}

.block-carousel-slider .slide-image::after {
	bottom: 38px;
	right: -38px;
	opacity: 0.5;
	background: rgba(139, 92, 246, 0.10);
}

.block-carousel-slider .slide-image picture {
	display: block;
	aspect-ratio: 11 / 6;
}

.block-carousel-slider .slide-image picture img {
	object-position: center;
	width: 100%;
	height: 100%;
}

.block-carousel-slider .slide-image.image-fit-cover picture img {
	object-fit: cover;
}

.block-carousel-slider .slide-image.image-fit-contain picture img {
	object-fit: contain;
}

/* slide text */

.block-carousel-slider .slide-text-container {
	background-color: var(--color-white-ui);
	padding: var(--carousel-slider-text-padding);
	border-bottom-left-radius: calc( var(--carousel-slider-radius) - 1px );
	border-bottom-right-radius: calc( var(--carousel-slider-radius) - 1px );
}

.block-carousel-slider .slide-text-container h3 {
	font-size: 24px;
	margin-bottom: 10px;
}

.block-carousel-slider .slide-text-container p {
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 16px;
}

.block-carousel-slider .slide-text-container .inner-block-buttons {
	margin-top: 0;
}

.block-carousel-slider .slide-text-container .button {
	font-size: 14px;
	line-height: 20px;
	padding: 11px 22px;
}

/* feature popovers */

.block-carousel-slider .hotspot-wrapper {
    position: absolute;
    aspect-ratio: 11 / 6;
    inset: 0;
    pointer-events: none; /* lets clicks pass through to the image */
}

.block-carousel-slider .feature-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all; /* re-enable clicks on the hotspot itself */
    z-index: 99;
}

.block-carousel-slider .feature-hotspot--1 {
	top: 28%;
	left: 33%;
}

.block-carousel-slider .feature-hotspot--2 {
	top: 55%;
	left: 26%;
}

.block-carousel-slider .feature-hotspot--3 {
	top: 45%;
	left: 74%;
}

.block-carousel-slider .feature-hotspot--4 {
	top: 70%;
	left: 67%;
}

.block-carousel-slider .feature-hotspot .hotspot-trigger {
	display: flex;
	width: 48px;
	height: 48px;
	justify-content: center;
	align-items: center;
	border-radius: 9999px;
	border: 2px solid rgba(93, 152, 185, 0.50);
	background-color: #5D98B9;
	padding: 0;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
}

.block-carousel-slider .feature-hotspot .hotspot-trigger:hover,
.block-carousel-slider .feature-hotspot .hotspot-trigger:focus {
	transform: scale(1.1);
}

.block-carousel-slider .hotspot-popover {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
    top: 50%;
    transform: translateX(0) translateY(-50%);
    width: 280px;
    z-index: 2;
    background-color: #fff;
    border: 1px solid #5d98b9;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 15px 25px #00000010;
}

.block-carousel-slider .feature-hotspot--1 .hotspot-popover,
.block-carousel-slider .feature-hotspot--2 .hotspot-popover {
	left: 100%;
	margin-left: 24px;
}

.block-carousel-slider .feature-hotspot--3 .hotspot-popover,
.block-carousel-slider .feature-hotspot--4 .hotspot-popover {
	right: 100%;
	margin-right: 24px;
}

/* Popover visible state — driven by aria-hidden */
.block-carousel-slider .hotspot-popover[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
}

.block-carousel-slider .hotspot-popover__title {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	margin-bottom: 4px;
}

.block-carousel-slider .hotspot-popover__body {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 0;
}

/* shadows and circles */

.block-carousel-slider .concentric-circles {
	height: 100%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block-carousel-slider .concentric-circles > div {
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block-carousel-slider .concentric-circles .large-shadow {
	height: 85%;
	background: rgba(54, 54, 103, 0.25);
	filter: blur(64px);
}

.block-carousel-slider .concentric-circles .hotspot-circle-1 {
	height: 60%;
	border-radius: 99999px;
	border: 1px solid #E5E7EB;
}

.block-carousel-slider .concentric-circles .hotspot-circle-2 {
	height: 75%;
	border-radius: 99999px;
	border: 1px solid #E5E7EB;
}

.block-carousel-slider .concentric-circles .hotspot-circle-3 {
	height: 90%;
	border-radius: 99999px;
	border: 1px solid #E5E7EB;
}

/* splide */

.block-carousel-slider .splide__arrow {
	display: flex;
	width: 56px;
	height: 56px;
	justify-content: center;
	align-items: center;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.90);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
	opacity: 1;
	transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
}

.block-carousel-slider .splide__arrow:hover,
.block-carousel-slider .splide__arrow:focus {
	background: rgba(255, 255, 255, 1);
}

.block-carousel-slider .splide__arrow--prev {
	left: -40px;
}

.block-carousel-slider .splide__arrow--next {
	right: -40px;
}

.block-carousel-slider .splide__arrow svg {
	height: 24px;
	width: auto;
	flex-shrink: 0;
	fill: none;
}

.block-carousel-slider .splide__arrow:disabled {
	visibility: hidden;
}

/* responsive */

@media screen and (max-width: 1600px) {

	.block-carousel-slider .top-content {
		width: 76%;
		max-width: 1100px;
	}

}

@media screen and (max-width: 1100px) {

	.block-carousel-slider .top-content {
		width: 82%;
	}

}

@media screen and (max-width: 900px) {

	.block-carousel-slider .slide-image-background,
	.block-carousel-slider .slide-image picture {
		aspect-ratio: 5 / 6;
	}

	.block-carousel-slider .hotspot-wrapper {
		display: none !important;
	}

	.block-carousel-slider .splide__track {
		padding-bottom: 60px;
	}

	.block-carousel-slider .splide__arrows {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		gap: 30px;
	}

	.block-carousel-slider .splide__arrow {
		transform: none;
		position: relative;
		top: unset;
		bottom: 0;
	}

	.block-carousel-slider .splide__arrow--prev {
		left: unset;
	}

	.block-carousel-slider .splide__arrow--next {
		right: unset;
	}

}

@media screen and (max-width: 600px) {

	.block-carousel-slider .top-content {
		width: 90%;
	}

}