@font-face {
	font-family: "Axiata";
	src: url("/assets/fonts/Axiata-Book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Axiata";
	src: url("/assets/fonts/Axiata-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Axiata";
	src: url("/assets/fonts/Axiata-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Axiata";
	src: url("/assets/fonts/Axiata-BookItalic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	--color-primary-blue-ultralight: #f3f6fa;
	--color-neutral-semidark: #4f5a62;
	--color-neutral-extradark: #1e2225;
	--color-neutral-ultralight: #ffffff;
	--color-neutral-dark: #3b4449;
	--color-neutral-light: #c1c6ca;
	--color-secondary-silver-ultralight: #f8fafb;
	--color-neutral-semilight: #929ca2;
	--color-secondary-silver-base: #bacad3;
	--color-neutral-base: #63717a;

	--color-primary-blue-base: #164396;
	--color-secondary-turquoise-base: #1dbecb;


	--svg-icon-gradient-start-color: var(--color-primary-blue-base);
	--svg-icon-gradient-end-color: var(--color-secondary-turquoise-base);
	--svg-icon-glass-color: var(--color-secondary-silver-base);

	--font-family-sans: "Axiata", Arial, system-ui, Avenir, Helvetica, sans-serif;
	--font-weight-book: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
}

/* Reset and base styles */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-sans);
	
}

.generic-container {
	width: 100%;
	/* w-full */
	padding-left: 16px;
	/* px-4 */
	padding-right: 16px;
	max-width: 1200px;
	/* max-w-[1200px] */
	margin-left: auto;
	/* mx-auto */
	margin-right: auto;
}

@media (min-width: 768px) {

	/* md:px-16 */
	.generic-container {
		padding-left: 64px;
		padding-right: 64px;
	}
}

@media (min-width: 1024px) {

	/* lg:px-[83px] */
	.generic-container {
		padding-left: 83px;
		padding-right: 83px;
	}
}

@media (min-width: 1280px) {

	/* xl:px-0 */
	.generic-container {
		padding-left: 0;
		padding-right: 0;
	}
}

.main-container {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	overflow-x: clip;
	background-color: var(--color-primary-blue-ultralight);
}

.centered-container {
	display: flex;
	/* flex */
	flex-direction: column;
	/* flex-col */
	align-items: center;
	/* items-center */
	justify-content: center;
	/* justify-center */
	position: relative;
	/* relative */
	z-index: 5;
	/* z-5 */
	height: 100dvh;
	/* h-dvh (use 100vh for full viewport height) */
	min-height: 420px;
	/* min-h-[420px] */
	max-width: 792px;
	/* !max-w-[792px] */
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1024px) {

	/* lg:min-h-[520px] */
	.centered-container {
		min-height: 520px;
	}
}

.error-title {
	font-size: 128px;
	/* !text-[128px] */
	line-height: normal !important;
	/* !leading-normal */
	letter-spacing: -6.4px !important;
	font-weight: var(--font-weight-bold) !important;
	text-align: center;
	/* text-center */
	/* margin-bottom: 16px; */
	margin: 0px 0px 16px 0px;
	/* mb-4 */
	color: #164396;
	/* text-[#164396] */
}

.title-and-desc {
	text-align: center;
	/* text-center */
	color: #3B4449;
	/* text-[#3B4449] */
}

.heading-4 {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: var(--font-weight-book);
	letter-spacing: -0.05rem;

	@media (max-width: 768px) {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
}

.heading-5 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: var(--font-weight-book);
	letter-spacing: -0.05rem;

	@media (max-width: 768px) {
		font-size: 1.125rem;
		line-height: 1.625rem;
	}
}

.button-row {
	margin-top: 32px;
	/* mt-8 */
	display: flex;
	/* flex */
	justify-content: center;
	/* justify-center */
	gap: 16px;
	/* gap-4 */
}

@media (min-width: 1024px) {

	/* lg:mt-10 */
	.button-row {
		margin-top: 40px;
	}
}

.main-btn {
	display: inline-flex;
	/* inline-flex */
	justify-content: center;
	/* justify-center */
	border-radius: 0.375rem;
	/* rounded-md */
	min-width: 100px;
	/* min-w-[100px] */
	max-width: 306px;
	/* max-w-[306px] */
	font-size: 0.875rem;
	/* text-sm */
	font-weight: var(--font-weight-bold);
	/* font-bold */
	position: relative;
	/* relative */
	overflow: hidden;
	/* overflow-hidden */
	cursor: pointer;
	/* cursor-pointer */
	padding: 8px 16px;
	/* px-4 py-2 */
	background-color: var(--color-neutral-extradark);
	/* bg-neutral-extradark */
	border: 1px solid transparent;
	/* border border-transparent */
	transition: background-color 250ms;
	transition: border-color 250ms;
	/* transition-bg duration-250 */
	min-height: 40px;
	text-decoration: none;
}

.main-btn:hover {
	background-color: var(--color-neutral-semidark);
	/* hover:bg-neutral-semidark */
	border-color: var(--color-neutral-ultralight);
	/* hover:border-neutral-ultralight */
}

.main-btn:active {
	background-color: var(--color-neutral-dark);
	/* active:bg-neutral-dark */
}

.main-btn:disabled,
.main-btn[disabled] {
	background-color: rgba(193, 198, 202, 0.15);
	/* disabled:bg-neutral-light/15 */
	border-color: transparent;
	/* disabled:border-transparent */
	pointer-events: none;
	/* disabled:pointer-events-none */
}

.main-btn-bg {
	transition-property: all;
	transition-duration: 250ms;
	/* transition duration-250 */
	position: absolute;
	/* absolute */
	opacity: 0.4;
	/* opacity-40 */
	width: 100%;
	/* w-full */
	z-index: 9;
	/* z-9 */
	display: block;
	/* block */
	height: 100%;
	/* h-full */
	top: 0;
	/* top-0 */
	color: var(--color-neutral-light);
	/* text-neutral-light */
}

.main-btn-bg-inner,
.secondary-btn-bg-inner {
	transition: opacity 250ms;
	transition-duration:  250ms;
	transition-property: all;
	/* transition duration-250 */
	position: relative;
	/* relative */
	width: 100%;
	/* w-full */
	opacity: 0;
	/* opacity-0 */
	height: 100%;
	/* h-full */
	display: flex;
	/* flex */
	align-items: center;
	/* items-center */
	transform: translateX(-100%);
	/* -translate-x-full */
}

/* Show on hover of parent with .group class */
.group:hover .main-btn-bg-inner,
.group:hover .secondary-btn-bg-inner {
	opacity: 1;
	/* group-hover:opacity-100 */
	transform: none;
	/* group-hover:translate-none */
}

.icon-right {
	position: absolute;
	/* absolute */
	right: 4px;
	/* right-1 (4px) */
}

/* skip jap untuk svg */

.main-btn-label {
	position: relative;
	/* relative */
	z-index: 10;
	/* z-10 */
	text-align: center;
	/* text-center */
	align-self: center;
	/* self-center */
	white-space: normal;
	/* whitespace-normal */
	overflow: hidden;
	display: block;
	/* for line-clamp */
	display: -webkit-box;
	/* for line-clamp */
	-webkit-line-clamp: 2;
	/* line-clamp-2 */
	-webkit-box-orient: vertical;
	/* line-clamp-2 */
	color: var(--color-neutral-ultralight);
	/* text-neutral-ultralight */
}

.main-btn:disabled .main-btn-label,
.main-btn[disabled] .main-btn-label {
	color: var(--color-neutral-light);
	/* group-disabled:text-neutral-light */
}

.secondary-btn {
	display: inline-flex;
	/* inline-flex */
	justify-content: center;
	/* justify-center */
	border-radius: 0.375rem;
	/* rounded-md */
	min-width: 100px;
	/* min-w-[100px] */
	max-width: 306px;
	/* max-w-[306px] */
	font-size: 0.875rem;
	/* text-sm */
	font-weight: var(--font-weight-bold);
	/* font-bold */
	position: relative;
	/* relative */
	overflow: hidden;
	/* overflow-hidden */
	cursor: pointer;
	/* cursor-pointer */
	padding: 8px 16px;
	/* px-4 py-2 */
	background-color: var(--color-primary-blue-ultralight);
	/* bg-neutral-ultralight */
	border: 1px solid var(--color-neutral-extradark);
	/* border-neutral-extradark */
	transition: background-color 250ms;
	transition: border-color 250ms;
	/* transition-bg duration-250 */
	min-height: 40px;
	text-decoration: none;
}

.main-btn,
.secondary-btn {}

.secondary-btn:hover {
	background-color: var(--color-secondary-silver-ultralight);
	/* hover:bg-secondary-silver-ultralight */
	border-color: var(--color-neutral-semilight);
	/* hover:border-neutral-semilight */
}

.secondary-btn:disabled,
.secondary-btn[disabled] {
	background-color: #C1C6CA26;
	/* group-disabled:bg-[#C1C6CA26] */
	border-color: #C1C6CA26;
	/* group-disabled:border-[#C1C6CA26] */
	pointer-events: none;
	/* group-disabled:pointer-events-none */
}

.secondary-btn-bg {
	transition: opacity 250ms;
	/* transition duration-250 */
	position: absolute;
	/* absolute */
	opacity: 0.4;
	/* opacity-40 */
	width: 100%;
	/* w-full */
	z-index: 9;
	/* z-9 */
	display: block;
	/* block */
	height: 100%;
	/* h-full */
	top: 0;
	/* top-0 */
	color: var(--color-secondary-silver-base);
	/* text-secondary-silver-base */
}

/* Add to your CSS file */
.secondary-btn-label {
	position: relative;
	/* relative */
	z-index: 10;
	/* z-10 */
	text-align: center;
	/* text-center */
	align-self: center;
	/* self-center */
	white-space: normal;
	/* whitespace-normal */
	overflow: hidden;
	display: block;
	/* for line-clamp */
	display: -webkit-box;
	/* for line-clamp */
	-webkit-line-clamp: 2;
	/* line-clamp-2 */
	-webkit-box-orient: vertical;
	/* line-clamp-2 */
	color: var(--color-neutral-extradark);
	/* text-neutral-extradark */
	transition: color 250ms;
}

/* Show on hover of parent with .group class */
.group:hover .secondary-btn-label {
	color: var(--color-neutral-base);
	/* group-hover:text-neutral-base */
}

.svg-small {
	position: absolute;
	/* absolute */
	top: 0;
	/* inset-0 */
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.prism-line-img {
	position: absolute;
	/* absolute */
	top: 0;
	/* top-0 */
	right: -40%;
	/* -right-2/5 */
}

.prism-square-svg {
	height: 15px;
	/* h-[15px] */
	width: 15px;
	/* w-[15px] */
	position: absolute;
	/* absolute */
	top: 84px;
	/* top-21 (21 * 4px = 84px) */
	right: 40px;
	/* right-10 (10 * 4px = 40px) */
	left: auto;
	/* left-auto */
}

.prism-ellipse-svg {
	position: absolute;
	/* absolute */
	height: 23px;
	/* h-[23px] */
	width: 23px;
	/* w-[23px] */
	left: -10px;
	/* left-[-10px] */
	right: auto;
	/* right-auto */
	top: 112px;
	/* max-lg:top-28 (28*4px=112px) */
}

.prism-triangle-svg {
	display: none;
	/* hidden */
}

.prism-3d-img {
	position: absolute;
	right: -70px;
	bottom: 30px;
}

.prism-blur-img {
	position: absolute;
	bottom: 20px;
	left: -35px;
}

.prism-left-img {
	display: none;
}

.prism-right-img {
	display: none;
}

@media (min-width: 1024px) {

	.main-btn,
	.secondary-btn {
		min-height: 48px;
		;
	}

	.prism-line-img {
		right: auto;
		/* lg:right-auto */
		left: 10%;
		/* lg:left-1/10 */
	}

	.prism-square-svg {
		left: 30%;
		/* lg:left-[30%] */
		right: auto;
		/* lg:right-auto */
		top: 140px;
		/* lg:top-35 (35 * 4px = 140px) */
	}

	.prism-ellipse-svg {
		top: 140px;
		/* lg:top-35 (35*4px=140px) */
		right: 120px;
		/* lg:right-30 (30*4px=120px) */
		left: auto;
		/* lg:left-auto */
	}

	.prism-triangle-svg {
		display: block;
		/* lg:block */
		position: absolute;
		/* absolute */
		height: 20px;
		/* h-[20px] */
		width: 20px;
		/* w-[20px] */
		left: 13.3333%;
		/* left-2/15 (2/15 = 0.13333) */
		bottom: 13.3333%;
		/* bottom-2/15 */
		transform: rotate(315deg);
		/* rotate-315 */
	}

	.prism-3d-img {
		bottom: 70px;
		right: 2%;
	}

	.prism-blur-img {
		bottom: auto;
		top: 170px;
		left: 6.6667%;
	}

	.prism-left-img {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		opacity: 0.2;
	}

	.prism-right-img {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		opacity: 0.2;
	}
}