.valora-hero-benefits {
	--valora-hero-benefits-columns: 4;
	--valora-hero-benefits-duration: 220ms;
	--valora-hero-benefits-svg-duration: 650ms;
	--valora-benefits-separator-color: rgba(255, 255, 255, 0.45);
	--valora-benefits-separator-distance: 16px;
	--valora-benefits-separator-display: block;
	--valora-benefits-separator-height: 56px;
	--valora-benefits-separator-width: 1px;
	font-family: Inter, Arial, sans-serif;
	margin-inline: auto;
	position: relative;
	width: 100%;
}

.valora-hero-benefits__grid {
	display: grid;
	grid-template-columns: repeat(var(--valora-hero-benefits-columns), minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.valora-hero-benefits--carousel {
	overflow: hidden;
}

.valora-hero-benefits--carousel.valora-hero-benefits--edge-to-edge {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw !important;
	width: 100vw;
}

.valora-hero-benefits--carousel .valora-hero-benefits__grid {
	cursor: grab;
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	row-gap: 0;
	touch-action: pan-y;
	transform: translate3d(0, 0, 0);
	user-select: none;
	will-change: transform;
}

.valora-hero-benefits--carousel.is-dragging .valora-hero-benefits__grid {
	cursor: grabbing;
}

.valora-hero-benefits--carousel .valora-hero-benefits__item {
	flex: 0 0 var(--valora-carousel-item-width, 100%);
}

.valora-hero-benefits--carousel .valora-hero-benefits__item-inner,
.valora-hero-benefits--carousel .valora-hero-benefits__item-inner img {
	-webkit-user-drag: none;
}

.valora-hero-benefits__item {
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
	position: relative;
}

.valora-hero-benefits--separator-between .valora-hero-benefits__item:not(:last-child)::after,
.valora-hero-benefits--separator-after::after {
	background-color: var(--valora-benefits-separator-color);
	content: "";
	display: var(--valora-benefits-separator-display);
	height: var(--valora-benefits-separator-height);
	pointer-events: none;
	position: absolute;
	right: calc(0px - var(--valora-benefits-separator-distance));
	top: 50%;
	transform: translateY(-50%);
	width: var(--valora-benefits-separator-width);
}

.valora-hero-benefits__item-inner {
	align-items: center;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
	transition: background-color var(--valora-hero-benefits-duration) ease, border-color var(--valora-hero-benefits-duration) ease, box-shadow var(--valora-hero-benefits-duration) ease;
	width: 100%;
}

a.valora-hero-benefits__item-inner:hover,
a.valora-hero-benefits__item-inner:focus-visible {
	text-decoration: none;
}

a.valora-hero-benefits__item-inner:focus-visible {
	outline: 3px solid #68c63f;
	outline-offset: 5px;
}

.valora-hero-benefits__icon {
	align-items: center;
	background: rgba(0, 0, 0, 0.18);
	border: 2px solid #ffffff;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 42px;
	height: 82px;
	justify-content: center;
	overflow: hidden;
	transition: color var(--valora-hero-benefits-duration) ease, background-color var(--valora-hero-benefits-duration) ease, border-color var(--valora-hero-benefits-duration) ease;
	width: 82px;
}

.valora-hero-benefits__icon i,
.valora-hero-benefits__icon svg,
.valora-hero-benefits__icon img {
	display: block;
	flex: 0 0 auto;
	height: 1em;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: 1em;
}

.valora-hero-benefits__icon svg,
.valora-hero-benefits__icon svg * {
	transition: fill var(--valora-hero-benefits-duration) ease, stroke var(--valora-hero-benefits-duration) ease;
}

.valora-hero-benefits--svg-animate .valora-hero-benefits__icon i,
.valora-hero-benefits--svg-animate .valora-hero-benefits__icon svg,
.valora-hero-benefits--svg-animate .valora-hero-benefits__icon img {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}

.valora-hero-benefits--svg-animation-spring .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon svg,
.valora-hero-benefits--svg-animation-spring .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon svg,
.valora-hero-benefits--svg-animation-spring .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon img,
.valora-hero-benefits--svg-animation-spring .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon img,
.valora-hero-benefits--svg-animation-spring .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon i,
.valora-hero-benefits--svg-animation-spring .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon i {
	animation: valora-hero-benefits-svg-spring var(--valora-hero-benefits-svg-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.valora-hero-benefits--svg-animation-pulse .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon svg,
.valora-hero-benefits--svg-animation-pulse .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon svg,
.valora-hero-benefits--svg-animation-pulse .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon img,
.valora-hero-benefits--svg-animation-pulse .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon img,
.valora-hero-benefits--svg-animation-pulse .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon i,
.valora-hero-benefits--svg-animation-pulse .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon i {
	animation: valora-hero-benefits-svg-pulse var(--valora-hero-benefits-svg-duration) ease-in-out both;
}

.valora-hero-benefits--svg-animation-turn .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon svg,
.valora-hero-benefits--svg-animation-turn .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon svg,
.valora-hero-benefits--svg-animation-turn .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon img,
.valora-hero-benefits--svg-animation-turn .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon img,
.valora-hero-benefits--svg-animation-turn .valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon i,
.valora-hero-benefits--svg-animation-turn .valora-hero-benefits__item-inner:focus-visible .valora-hero-benefits__icon i {
	animation: valora-hero-benefits-svg-turn var(--valora-hero-benefits-svg-duration) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes valora-hero-benefits-svg-spring {
	0%, 100% { transform: translateY(0) rotate(0) scale(1); }
	38% { transform: translateY(-5px) rotate(-5deg) scale(1.13); }
	68% { transform: translateY(1px) rotate(2deg) scale(0.98); }
}

@keyframes valora-hero-benefits-svg-pulse {
	0%, 100% { transform: scale(1); }
	42% { transform: scale(1.16); }
	72% { transform: scale(0.97); }
}

@keyframes valora-hero-benefits-svg-turn {
	0%, 100% { transform: rotate(0) scale(1); }
	42% { transform: rotate(12deg) scale(1.1); }
	72% { transform: rotate(-3deg) scale(1); }
}

.valora-hero-benefits__item-inner:hover .valora-hero-benefits__icon {
	background: #68c63f;
	border-color: #68c63f;
	color: #111111;
}

.valora-hero-benefits__copy {
	align-items: inherit;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.valora-hero-benefits__heading {
	color: #ffffff;
	display: block;
	font-size: clamp(18px, 1.65vw, 24px);
	font-weight: 700;
	line-height: 1.15;
	max-width: 220px;
	text-align: center;
	text-transform: none;
	transition: color var(--valora-hero-benefits-duration) ease;
}

.valora-hero-benefits__label {
	color: #ffffff;
	display: block;
	font-size: clamp(16px, 1.45vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	max-width: 180px;
	text-align: center;
	text-transform: none;
	transition: color var(--valora-hero-benefits-duration) ease;
}

.valora-hero-benefits__label-breaks {
	display: none;
}

.valora-hero-benefits__label-breaks--desktop {
	display: inline;
}

@media (max-width: 1366px) {
	.valora-hero-benefits__label-breaks--desktop {
		display: none;
	}

	.valora-hero-benefits__label-breaks--laptop {
		display: inline;
	}
}

@media (max-width: 1200px) {
	.valora-hero-benefits__label-breaks--laptop {
		display: none;
	}

	.valora-hero-benefits__label-breaks--tablet-landscape {
		display: inline;
	}
}

@media (max-width: 1024px) {
	.valora-hero-benefits__label-breaks--tablet-landscape {
		display: none;
	}

	.valora-hero-benefits__label-breaks--tablet-portrait {
		display: inline;
	}
}

@media (max-width: 880px) {
	.valora-hero-benefits__label-breaks--tablet-portrait {
		display: none;
	}

	.valora-hero-benefits__label-breaks--mobile-landscape {
		display: inline;
	}
}

@media (max-width: 767px) {
	.valora-hero-benefits__label-breaks--mobile-landscape {
		display: none;
	}

	.valora-hero-benefits__label-breaks--mobile-portrait {
		display: inline;
	}
}

@media (max-width: 1024px) {
	.valora-hero-benefits {
		--valora-hero-benefits-columns: 2;
	}
}

@media (max-width: 767px) {
	.valora-hero-benefits {
		--valora-hero-benefits-columns: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.valora-hero-benefits__item-inner,
	.valora-hero-benefits__icon,
	.valora-hero-benefits__icon i,
	.valora-hero-benefits__icon svg,
	.valora-hero-benefits__icon img,
	.valora-hero-benefits__icon svg *,
	.valora-hero-benefits__heading,
	.valora-hero-benefits__label {
		animation: none !important;
		transition: none;
	}
}
