/* Update container rule to confine sticky images */
.freeze-scroller {
	background-color: transparent!important;
	padding-top: 2rem;
}

.freeze-scroller .howto-use-title h2 {
	text-align: center;
	color: var(--text);
	margin-bottom: 5px;
}

.freeze-scroller .howto-use-title p {
	text-align: center;
	color: var(--text);
	margin-bottom: 30px;
}

.freeze-scroller .abs-img {
	width: 100%;
	transition: all linear 0.4s;
	height: auto;
	font-size: 0;
	border-radius: 24px;
	text-align: right;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	max-width: 30vw;
	max-height: calc(100vw - 2px);
}

.freeze-scroller .abs-img.hide {
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	position: sticky;
	top: 50%;
	transform: translateY(-50%) scale(0.7) rotate(9deg);
	max-width: 30vw;
	max-height: calc(100vw - 2px);
}

.freeze-scroller .freeze-scroller-item {
	padding: 120px 0;
	text-align: left;
}

.freeze-scroller .freeze-scroller-item h3 {
	font-size: var(--font-xxl);
	color: var(--text);
	font-weight: 600;
	text-transform: capitalize;
	text-align: left
}

.freeze-scroller .freeze-scroller-item h4 {
	font-size: var(--font-md);
	margin-bottom: 10px;
	margin-top: 10px;
	font-weight: 600;
	text-align: left;
}

.freeze-scroller .freeze-scroller-item p {
	color: var(--text);
	text-align: left;
	margin: 22px 0;
	line-height: 28px;
}

.freeze-scroller .freeze-scroller-item .cta {
	width: fit-content;
}

.freeze-scroller a.cta-sl {
	height: 45px;
	line-height: 45px;
}

.freeze-scroller .freeze-scroller-images {
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 1;
}

.freeze-scroller .freeze-scroller-images img {
	width: 100%;
	border-radius: 24px;
	display: block;
}

.freeze-scroller {
	/* margin-top: 50px; */
}

.freeze-scroller .freeze-scroller-inner {
	display: inline-flex;
	justify-content: space-between;
	max-width: 100%;
}

.freeze-scroller .step-num {
	color: var(--maestra-yellow);
	font-size: var(--font-xl);
	font-weight: 600;
	text-align: left;
}

@media (max-width: 767px) {
    /* How To Use */
	.freeze-scroller .step-num {
		color: #fff;
		font-weight: 600;
		display: inline-block;
		background: #ffbe3d;
		border-radius: var(--button-border-radius);
		width: fit-content;
		height: fit-content;
		padding: 0 0.5em;
		text-align: center;
		line-height: 30px;
		margin-right: 5px;
	}

	.freeze-scroller .freeze-scroller-item {
		max-height: 48px;
		overflow: hidden;
		background: var(--background);
		margin-bottom: 20px;
		padding: 20px !important;
		border-radius: var(--button-border-radius);
		position: relative;
		border: solid 2px color-mix(in srgb, var(--text) 20%, transparent);
		transition: all 0.2s;
	}

	.freeze-scroller .freeze-scroller-item,
	.freeze-scroller .freeze-scroller-item.active {
		max-height: 2400px;
		overflow: hidden;
	}

	.freeze-scroller .freeze-scroller-opener {
		position: absolute;
		right: 0;
		bottom: 8px;
		width: 100%;
		height: 80px;
		line-height: 60px;
		/* border-radius: 50%; */
		/* background-color: #eee; */
		text-align: center;
		line-height: 113px;
		transition: all 0.4s;
		background: rgb(34, 34, 34);
		background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 2) 71%, rgba(255, 255, 255, 0) 100%);
		color: #fff;
	}

	.freeze-scroller .freeze-scroller-opener i {
		position: relative;
		top: 3px;
	}

	.freeze-scroller .freeze-scroller-item.active .freeze-scroller-opener {
		transform: rotate(180deg);
	}

	.freeze-scroller .freeze-scroller-item h3 {
		font-weight: 600;
		display: inline;
		line-height: 30px;
	}

	.freeze-scroller .freeze-scroller-item img {
		width: 100%;
		height: auto;
		border-radius: var(--button-border-radius);
		margin-top: 20px;
		opacity: 0;
		visibility: hidden;
		position: relative;
		transition: all 0.4s;
		transform: scale(0.8);
	}

	.freeze-scroller .freeze-scroller-item.show img {
		opacity: 1;
		visibility: visible;
	}

	.freeze-scroller .freeze-scroller-item p {
		color: #969696;
		line-height: 26px;
		margin: 8px 0;
	}

	.freeze-scroller .freeze-scroller-opener i {
		line-height: 30px;
	}

	.freeze-scroller .freeze-scroller-images {
		display: none;
	}

	.freeze-scroller .freeze-scroller-item {
		padding: 9px 15px;
	}

	.freeze-scroller .freeze-scroller-item .cta {
		margin-top: 22px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Specific transform for the first image */
.freeze-scroller .abs-img:first-child {
	position: sticky;
	transform: translateY(0);
	top: 30%;
}

/* Specific transform for the last image */
.freeze-scroller .abs-img:last-child {
	position: sticky;
	transform: translateY(-20px);
}