* {
    font-family: 'Fredoka', sans-serif !important;
}




/* Tab halaman */
.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.links li a:hover i {
	transform: translateY(-5px) !important; /* Ikon terangkat sedikit saat di-hover */
}

.ti-arrow-big-down-lines {
	transition: 0.3s ease-in-out;
}
.ti-arrow-big-down-lines:hover {
	color: white !important;
	transform: scale(1.15);
	transition: 0.3s ease-in-out;
}





/* 

.penjelasan a:hover .image-penjelasan {
	transform: scale(1.15);
	transition: 0.3s ease-in-out;
} */







/* Untuk Scroll WebKit Browser (Chrome, Safari) */
::-webkit-scrollbar {
	width: 12px; /* Lebar scrollbar */
}

::-webkit-scrollbar-track {
	background: black; /* Warna track */
}

::-webkit-scrollbar-thumb {
	background-color: white; /* Warna thumb */
	border-radius: 10px; /* Membuat ujung scroll menjadi bulat */
	border: 3px solid black; /* Memberikan jarak antar thumb dengan track */
}

::-webkit-scrollbar-thumb:hover {
	background: #555; /* Warna thumb saat di-hover */
}






/* 
@keyframes morph {
	0% { transform: scale(1); }
	50% { transform: scale(1.5); }
	100% { transform: scale(1); }
  } */

  .morph {
	animation: morph 8s ease-in-out 1s infinite; 
	background-blend-mode: multiply; 
	box-shadow: inset 0 0 0 9px hsla(0,0%,100%,.3); 
	border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; 
	overflow: hidden;
	/* border-radius: 40% 10% 10% 50%/40% 10% 50% 20%; */
  }

@keyframes morph {
	0% {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
	}
	50% {
		border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
	}
	100% {
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
	}
}

/* @keyframes morph {
	0% {
		border-radius: 48% 32% 24% 56%/48% 24% 56% 32%;
	}
	50% {
		border-radius: 24% 48% 56% 32%/40% 48% 24% 48%;
	}
	100% {
		border-radius: 48% 32% 24% 56%/48% 24% 56% 32%;
	}
} */












.padding-0 {
	padding: 0px !important;
}

.padding-4rem {
	padding: 4rem;
}
@media (max-width: 768px) { 
	.padding-4rem {
		padding: 3rem;
	}
}

.padding-2rem {
	padding: 2rem;
}

.bg-white {
	background-color: white;
}

.color-white {
	color: white;
}

.my-4rem {
	margin: 4rem !important;
}







.two-column-layout {
	display: flex; gap: 20px; flex-wrap: wrap;
}

@media (max-width: 768px) {
	.two-column-layout { flex-direction: column; }
}

.bagi-tiga {
	max-width: 33.3%;
}

@media (max-width: 922px) {
	.bagi-tiga {
		max-width: 50%;
	}
}

@media (max-width: 768px) {
	.bagi-tiga {
		max-width: 100%;
	}
}







.grid-container {
	display: grid;
	grid-template-columns: 1fr; 
	gap: 20px;
}

/* Tablet: 2 kolom */
@media (min-width: 768px) {
	.grid-container {
	grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop: 3 kolom */
@media (min-width: 1024px) {
	.grid-container {
	grid-template-columns: repeat(3, 1fr);
	}
}

.grid-container .image {
	margin-bottom: 15px;
}






.bagi-dua-container {
	display: grid;
	grid-template-columns: 1fr; 
	gap: 20px;
}

/* Tablet: 2 kolom */
@media (min-width: 768px) {
	.bagi-dua-container {
	grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop: 3 kolom */
@media (min-width: 1024px) {
	.bagi-dua-container {
	grid-template-columns: repeat(2, 1fr);
	}
}








.bagi-tiga-container {
	display: grid;
	grid-template-columns: 1fr; 
	gap: 20px;
}

/* Tablet: 2 kolom */
@media (min-width: 768px) {
	.bagi-tiga-container {
	grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop: 3 kolom */
@media (min-width: 1024px) {
	.bagi-tiga-container {
	grid-template-columns: repeat(3, 1fr);
	}
}






.bagi-tiga-container-price {
	display: grid;
	grid-template-columns: 1fr; 
	gap: 20px;
}

/* Tablet: 2 kolom */
@media (min-width: 768px) {
	.bagi-tiga-container-price {
	grid-template-columns: repeat(3, 1fr);
	}
}

/* Desktop: 3 kolom */
@media (min-width: 1024px) {
	.bagi-tiga-container-price {
	grid-template-columns: repeat(3, 1fr);
	padding: 4rem 10rem;
	}
}






.bagi-empat {
	display: grid;
	grid-template-columns: 1fr; 
	gap: 20px;
}

/* Tablet: 2 kolom */
@media (min-width: 768px) {
	.bagi-empat {
	grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop: 3 kolom */
@media (min-width: 1024px) {
	.bagi-empat {
	grid-template-columns: repeat(4, 1fr);
	}
}





.desktop {
	display: none !important;
}
.mobile {
	display: block !important;
}

@media (min-width: 768px) {
	.desktop {
		display: block !important;
	}
	.mobile {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.desktop {
		display: block !important;
	}
	.mobile {
		display: none !important;
	}
}





.pembatas-jasa::before, .pembatas-jasa::after {
	width: calc(50% - 12rem) !important;
}

.pembatas-join::before, .pembatas-join::after {
	width: calc(50% - 17rem) !important;
}


.pembatas-16rem::before, .pembatas-16rem::after {
	width: calc(50% - 16rem) !important;
}

.pembatas-14rem::before, .pembatas-14rem::after {
	width: calc(50% - 14rem) !important;
}

.pembatas-12rem::before, .pembatas-12rem::after {
	width: calc(50% - 12rem) !important;
}

.pembatas-10rem::before, .pembatas-10rem::after {
	width: calc(50% - 10rem) !important;
}

.pembatas-8rem::before, .pembatas-8rem::after {
	width: calc(50% - 8rem) !important;
}