.kwok-hero-slider {
	position: relative;
	overflow: hidden;
	padding: 0;
	background: #101a2e;
}

.kwok-hero-slider-slides,
.kwok-hero-slide {
	position: absolute;
	inset: 0;
}

.kwok-hero-slide {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 0 72px;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.kwok-hero-slide::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(7, 20, 40, 0.68) 0%,
		rgba(7, 20, 40, 0.52) 42%,
		rgba(7, 20, 40, 0.46) 100%
	);
	content: "";
}

.kwok-hero-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.kwok-hero-slide .hero-image-title-wrap {
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.8s ease 0.25s, transform 0.8s ease 0.25s;
}

.kwok-hero-slide.is-active .hero-image-title-wrap {
	opacity: 1;
	transform: translateY(0);
}

.kwok-hero-dots {
	position: absolute;
	right: 0;
	bottom: 28px;
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.kwok-hero-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.86);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	cursor: pointer;
}

.kwok-hero-dots button.is-active {
	background: #ffffff;
}