/* Horizontal Scroll Steps — lightweight CSS, no framework dependency */

.hs-steps {
	--hs-item-width: 380px;
	--hs-gap: 60px;
	--hs-padding-y: 60px;
	--hs-line-color: #dcdcdc;
	--hs-dot-color: #111111;
	--hs-dot-size: 9px;
	--hs-icon-size: 60px;
	--hs-tablet-cols: 1fr 1fr;
	position: relative;
	width: 100%;
}

/* ---------- Pin wrapper (inert on mobile/tablet) ----------
 * On mobile/tablet these are plain, unstyled wrapping divs — the grid
 * layout below lives on .hs-steps__track exactly as before.
 * On desktop, script.js gives .hs-steps-pin-spacer an explicit inline
 * height (1 viewport height + the horizontal distance the track needs
 * to travel) and adds the hs-steps--desktop class, which is what turns
 * .hs-steps__pin-inner into the sticky, pinned viewport below.
 */
.hs-steps__pin-spacer {
	display: block;
}

.hs-steps__pin-inner {
	display: block;
}

.hs-steps__track {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 30px;
	padding: var(--hs-padding-y) 0;
	margin: 0;
	list-style: none;
}

/* ---------- Item base (shared) ---------- */
.hs-steps__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hs-steps__dot-wrap {
	display: none;
}

.hs-steps__dot {
	display: block;
	width: var(--hs-dot-size);
	height: var(--hs-dot-size);
	margin: 0 auto;
	border-radius: 50%;
	background: var(--hs-dot-color);
	position: relative;
	z-index: 1;
}

.hs-steps__head {
	display: flex;
	align-items: center;
	gap: 16px;
	order: 2;
}

.hs-steps__number {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.02em;
}

.hs-steps__connector {
	flex: 1 1 auto;
	height: 1px;
	min-width: 20px;
	background: var(--hs-line-color);
}

.hs-steps__title {
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	margin: 0;

}

.hs-steps__icon {
	order: 3;
	margin: 20px 0 40px;
	display: flex;
	align-items: center;
}

.hs-steps__icon svg {
	width: var(--hs-icon-size);
	height: var(--hs-icon-size);
	fill: currentColor;
}

.hs-steps__icon i {
	font-size: var(--hs-icon-size);
}

.hs-steps__desc {
	order: 4;
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}

/* ---------- Tablet: 2 (or 1) column grid ---------- */
@media (min-width: 601px) {
	.hs-steps__track {
		grid-template-columns: var(--hs-tablet-cols);
		gap: 56px 40px;
	}
}

/* ---------- Desktop: pinned horizontal scroll ----------
 * This class is added/removed by script.js based on the widget's own
 * "Switch to Grid Below (px)" setting AND the "enable" toggle, NOT a
 * fixed CSS media query — that way the admin-configurable breakpoint
 * actually controls it. Before JS runs (or if JS is disabled) the grid
 * layout above is the fallback, so the widget always degrades gracefully.
 *
 * The pin-inner becomes `position: sticky; top: 0; height: 100vh`, which
 * is what actually holds ("pins") the section in the viewport. script.js
 * gives the pin-spacer an inline height tall enough to cover the full
 * horizontal travel distance, then translateX()s the track to match how
 * far the user has scrolled through that spacer. The section only lets
 * go and resumes normal page scrolling once the track has fully reached
 * either end — in both scroll directions.
 */
.hs-steps.hs-steps--desktop .hs-steps__pin-inner {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hs-steps.hs-steps--desktop .hs-steps__track {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: var(--hs-gap);
	will-change: transform;
}

.hs-steps.hs-steps--desktop .hs-steps__item {
	flex: 0 0 var(--hs-item-width);
	position: relative;
}
@media (min-width: 1019px) {
    .hs-steps__track > .hs-steps__item:first-child {
        margin-left: 8rem;
    }
	.hs-steps.hs-steps--desktop .hs-steps__pin-inner{
		top: 50px;
	}
}
/* connecting line drawn through the dots */
.hs-steps.hs-steps--desktop .hs-steps__dot-wrap {
	display: block;
	position: relative;
	height: 20px;
	order: 1;
}

.hs-steps.hs-steps--desktop .hs-steps__dot-wrap::after {
	content: '';
	position: absolute;
	top:10px;
	left: 50%;
	width: calc(100% + var(--hs-gap));
	height: 1px;
	background: var(--hs-line-color);
	transform: translateY(-50%);
	z-index: 0;
}

.hs-steps.hs-steps--desktop .hs-steps__item:last-child .hs-steps__dot-wrap::after {
	display: none;
}

.hs-steps.hs-steps--desktop .hs-steps__head {
	display: block;
	text-align: center;
	margin:35px 0;
}

.hs-steps.hs-steps--desktop .hs-steps__number,
.hs-steps.hs-steps--desktop .hs-steps__connector {
	display: none;
}

.hs-steps.hs-steps--desktop .hs-steps__title {
	text-align: center;
	margin-top: 22px;
}

.hs-steps.hs-steps--desktop .hs-steps__icon {
	justify-content: center;
}

.hs-steps.hs-steps--desktop .hs-steps__desc {
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.hs-steps.hs-steps--desktop .hs-steps__track {
		transition: none;
	}
}