/* Custom styles */
.bg-uim-primary {
	background-color: #098f96 !important;
}

.bg-uim-secondary {
	background-color: #46a1a6 !important;
}

.bg-uim-tertiary {
	background-color: #fed219 !important;
}

.bg-uim-quaternary {
	background-color: #f5e7d7 !important;
}

.text-uim-primary {
	color: #098f96 !important;
}

.text-uim-secondary {
	color: #46a1a6 !important;
}

.text-uim-tertiary {
	color: #fed219 !important;
}

.text-uim-quaternary {
	color: #f5e7d7 !important;
}

.text-white {
	color: #f8f9fa !important;
	/* Slightly off-white color */
}

.uim-primary {
	color: #098f96 !important;
}

.uim-secondary {
	color: #46a1a6 !important;
}

.uim-tertiary {
	color: #fed219 !important;
}

.uim-quaternary {
	color: #f5e7d7 !important;
}

.uim-white {
	color: #f8f9fa !important;
	/* Slightly off-white color */
}

.min-h-75vh {
	min-height: 75vh;
}

.min-h-80vh {
	min-height: 80vh;
}

.min-h-90vh {
	min-height: 90vh;
}

.carousel-indicators li {
	background-color: #46a1a6 !important;
	/* Menggunakan warna dari kelas uim-primary */
}

@media (min-width: 992px) {

	.pl-lg-43 {
		padding-left: 13rem !important;
	}

	.pr-lg-43 {
		padding-right: 13rem !important;
	}

	.px-lg-43 {
		padding-left: 13rem !important;
		padding-right: 13rem !important;
	}

	.pl-lg-53 {
		padding-left: 23rem !important;
	}

	.pr-lg-53 {
		padding-right: 23rem !important;
	}

	.px-lg-53 {
		padding-left: 23rem !important;
		padding-right: 23rem !important;
	}
}

.navbar-toggler {
	color: rgba(248, 249, 250, 0.9) !important;
	/* Slightly off-white color */
	border-color: rgba(248, 249, 250, 0.9) !important;
	/* Slightly off-white color */
}

.blob {
	overflow: hidden;
	border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
	/* background: url(/colors.jpg); */
	background-size: cover;
	background-position: center;
	animation: morph 3.25s linear infinite;
}

@keyframes morph {
	0% {
		border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
	}

	33% {
		border-radius: 42% 48% 48% 72% / 48% 72% 42% 72%;
	}

	66% {
		border-radius: 100% 56% 56% 100% / 100% 72% 100% 56%;
	}
}


.swiper-pagination-bullet {
	background-color: #46a1a6 !important;
	/* Use the color from the uim-primary class */
}

.swiper-pagination-bullet-active {
	background-color: #098f96 !important;
	/* Use the color from the uim-primary class for active state */
}

.swiper-button-next,
.swiper-button-prev {
	color: #46a1a6 !important;
}

html {
	scroll-snap-type: y proximity !important;
}

section {
	scroll-snap-align: start !important;
	scroll-snap-stop: always !important;
	scroll-margin-top: 93px !important;
}

.highlight {
	display: inline-block;
	position: relative;
}

.highlight {
	display: inline-block;
	position: relative;
	z-index: 1;
	/* Increase z-index of the highlight element */
	color: #098f96 !important;
	font-weight: bolder !important;
}

.highlight::before {
	content: '';
	position: absolute;
	top: 75%;
	left: 0;
	bottom: 0.2em;
	width: 100%;
	height: 20%;
	background: #fed219 !important;
	transform: rotate(-1.25deg);
	z-index: -1;
	border-radius: 69px;
}

ul.custom-bullets {
	list-style: none;
	padding-left: 0;
}

ul.custom-bullets li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 10px;
}

ul.custom-bullets li::before {
	content: '\2022';
	/* Unicode for bullet */
	position: absolute;
	left: 0;
	color: #46a1a6;
	/* Custom color for bullet */
	font-size: 2.75em;
	/* Custom size for bullet */
	line-height: 0.6;
}


.wizard-aside {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	overflow-y: auto;
	z-index: 1000;
}

.wizard-content {
	margin-left: 300px;
	/* Adjust this value based on the width of your aside */
	overflow-y: auto;
	height: 100vh;
}

@media (min-width: 992px) {
	.wizard-content {
		margin-left: 400px;
		/* Adjust this value based on the width of your aside */
	}
}

@media (min-width: 1200px) {
	.wizard-content {
		margin-left: 500px;
		/* Adjust this value based on the width of your aside */
	}
}

@media (max-width: 991.98px) {
	.wizard-aside {
		position: relative;
		height: auto;
	}

	.wizard-content {
		margin-left: 0;
		height: auto;
	}
}