.hero-section .background-section {
	background-size: cover;
	background-position-y: top;
	background-position-x: var(--image-position);
	background-repeat: no-repeat;
	height: calc((100vh - 30px) - var(--menu-height-mobile));
	position: relative;
	background-image: var(--desktop-bg-image);
}

/* Mobile (<= 768px) */
@media (max-width: var(--breakpoint-mobile)) {
	.hero-section .background-section {
		background-image: var(--mobile-bg-image, var(--desktop-bg-image));
	}
}

/* Tablet and above (> 768px) */
@media (min-width: calc(var(--breakpoint-mobile) + 1px)) {
	.hero-section .background-section {
		height: calc((100vh - 30px) - var(--menu-height));
	}
}

/* Animations */
@keyframes progressFill {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes fadeUpCustom {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes zoomInCustom {
	from {
		opacity: 0;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes flipUpCustom {
	from {
		opacity: 0;
		transform: rotateX(90deg);
	}

	to {
		opacity: 1;
		transform: rotateX(0);
	}
}

/* Animation utility classes */
.hero-section .animate-fade-up {
	animation: fadeUpCustom 2s;
}

.hero-section .animate-zoom-in {
	animation: zoomInCustom 2s;
}

.hero-section .animate-flip-up {
	animation: flipUpCustom 2s;
}

/* Hide extra slides before slick initializes to prevent CLS from height collapse */
#heroSlider:not(.slick-initialized) > *:not(:first-child) {
	display: none;
}

/* Slick autoplay button */
.hero-section .slick-autoplay-toggle-button {
	bottom: 0;
	opacity: 1;
	height: 30px;
}

.hero-section .slick-autoplay-toggle-button .slick-pause-icon::before,
.hero-section .slick-autoplay-toggle-button .slick-play-icon::before {
	color: rgba(255, 255, 255, 0.4);
}
.hero-section .slick-dots li button .slick-dot-icon:before {
	content: none !important;
}