@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none !important;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	/* user-select: none; */
}

:root {
	--nav-bg: #100f0f;
	--text-color: #fcfcfc;

	--primary-90: #baa585;
	--primary-80: #a08863;
	--primary-70: #856a40;
	--primary-60: #6a4c1e;
	--primary-50: #553d18;
	--primary-40: #402e12;
	--primary-30: #2a1e0c;
	--primary-20: #201709;
	--primary-10: #150f06;
	--primary-0: #0b0803;

	--secondary-90: #94b2dd;
	--secondary-80: #6790cc;
	--secondary-70: #3b6fbc;
	--secondary-60: #0e4eab;
	--secondary-50: #0b3e89;
	--secondary-40: #082f67;
	--secondary-30: #061f44;
	--secondary-20: #041733;
	--secondary-10: #031022;
	--secondary-0: #010811;

	--tertiary-90: #99e4ee;
	--tertiary-80: #66d7e5;
	--tertiary-70: #33c9dd;
	--tertiary-60: #00bcd4;
	--tertiary-50: #0096aa;
	--tertiary-40: #00717f;
	--tertiary-30: #004b55;
	--tertiary-20: #003840;
	--tertiary-10: #00262a;
	--tertiary-0: #001315;

	--success-90: #99eb99;
	--success-80: #66e066;
	--success-70: #33d633;
	--success-60: #00cc00;
	--success-50: #00a300;
	--success-40: #007a00;
	--success-30: #005200;
	--success-20: #003d00;
	--success-10: #002900;
	--success-0: #001400;

	--warning-90: #ffeb99;
	--warning-80: #ffe066;
	--warning-70: #ffd633;
	--warning-60: #ffcc00;
	--warning-50: #cca300;
	--warning-40: #997a00;
	--warning-30: #665200;
	--warning-20: #4d3d00;
	--warning-10: #332900;
	--warning-0: #1a1400;

	--danger-90: #ff9999;
	--danger-80: #ff6666;
	--danger-70: #ff3333;
	--danger-60: #ff0000;
	--danger-50: #cc0000;
	--danger-40: #990000;
	--danger-30: #660000;
	--danger-20: #4d0000;
	--danger-10: #330000;
	--danger-0: #1a0000;

	--main-font: "Quicksand", sans-serif;

	--heading-1-size: 3.359rem;
	--heading-2-size: 2.799rem;
	--heading-3-size: 2.333rem;
	--heading-4-size: 1.944rem;
	--heading-5-size: 1.62rem;
	--heading-6-size: 1.35rem;
	--big-paragraph-size: 1.125rem;
	--small-paragraph-size: 0.938rem;

	--fw-reguler: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--marquee-width: 100vw;
	--marquee-height: 20vh;
	/* --marquee-elements: 12; */ /* defined with JavaScript */
	--marquee-elements-displayed: 5;
	--marquee-element-width: calc(
		var(--marquee-width) / var(--marquee-elements-displayed)
	);
	--marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

body {
	position: relative;
	width: 100%;
	height: auto !important;
	background-color: var(--primary-90);
	font-family: var(--main-font);
}

.navbar-expand-lg {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: var(--text-color);
}

.nav-bg-custom {
	background-color: var(--nav-bg);
}

.logo-image {
	max-width: 40%;
}

#mainContent {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#mainContent h1 {
	text-transform: uppercase;
	font-size: var(--heading-4-size);
	font-weight: var(--fw-bold);
	color: var(--primary-0);
	line-height: 2.75rem;
}

#mainContent h2 {
	text-transform: capitalize;
	font-size: var(--heading-6-size);
	font-weight: var(--fw-medium);
	color: var(--primary-0);
}

.layanan-row h5 {
	font-weight: var(--fw-bold);
	font-size: var(--big-paragraph-size);
	text-transform: uppercase;
}

.layanan-row p {
	font-weight: var(--fw-medium);
	font-size: var(--small-paragraph-size);
	text-align: justify;
}

.layanan-cards {
	width: 17.5rem;
	height: 23.125rem;
	border-radius: 0.625rem;
}

.layanan-cards img {
	width: 100%;
	height: 14.375rem;
	padding: 0.625rem;
	border-radius: 1.063rem;
}

.icons {
	max-width: 100%;
	max-height: 100%;
}

.bg-icon-1 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 5.625rem;
	left: 9.375rem;
	animation: floating-1 8s infinite linear;
}

.bg-icon-2 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 9.375rem;
	left: 21.875rem;
	animation: floating-2 8s infinite linear;
}

.bg-icon-3 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 15.625rem;
	left: 3.125rem;
	animation: floating-3 8s infinite linear;
}

.bg-icon-4 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 53.125rem;
	left: 3.125rem;
	animation: floating-4 8s infinite linear;
}

.bg-icon-5 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 12.5rem;
	left: 73.125rem;
	animation: floating-2 8s infinite linear;
}

.bg-icon-6 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 7.5rem;
	left: 62.5rem;
	animation: floating-4 8s infinite linear;
}

.bg-icon-7 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 13.75rem;
	left: 112.5rem;
	animation: floating-1 8s infinite linear;
}

.bg-icon-8 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 26.25rem;
	left: 81.25rem;
	animation: floating-1 8s infinite linear;
}

.bg-icon-9 {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	top: 43.75rem;
	left: 6.25rem;
	animation: floating-1 8s infinite linear;
}

@keyframes floating-1 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-0.625rem);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes floating-2 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(1.25rem);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes floating-3 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(1.375rem);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes floating-4 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1.375rem);
	}
	100% {
		transform: translateY(0);
	}
}

.no-rujukan-input,
.poli-input,
.sep-input {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.biodata-nama-input,
.biodata-nama-input {
	width: 31.25rem;
}

.no-rujukan-label,
.sep-label,
.poli-label,
.biodata-label {
	font-size: var(--big-paragraph-size) !important;
	font-weight: var(--fw-semibold) !important;
}

.label-data {
	font-weight: var(--fw-semibold);
}

.preload_container {
	position: fixed;
	background-color: #baa585;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.preloaders {
	width: 20.625rem;
	height: 18.938rem;
	background: url("../img/rsup_sitanala.png");
	animation: sprite 1s steps(6, end) infinite;
}

@keyframes sprite {
	0% {
		background-position: 0rem 0rem;
	}
	100% {
		background-position: -125rem 0rem;
	}
}

.btn-kembali {
	position: relative;
	background-color: #850a0a;
	border: none;
}

.btn-kembali:hover {
	position: relative;
	background-color: #520505 !important;
	border: none;
	transition: 0.5s ease-in-out;
}

.btn-selanjutnya {
	position: relative;
	background-color: #854c0a;
	border: none;
}

.btn-selanjutnya:hover {
	position: relative;
	background-color: #5c3406 !important;
	border: none;
	transition: 0.5s ease-in-out;
}

#hiddendiv {
	display: none;
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	animation: showIn 0.5s ease forwards;
}

@keyframes showIn {
	0% {
		transform: translateY(300px);
	}
	100% {
		transform: translateY(0px);
	}
}

.button_keyboard {
	width: 100px;
	height: auto;
	background-color: var(--primary-60);
	color: var(--text-color);
	border-color: transparent;
	font-weight: var(--fw-semibold);
	margin: 5px 5px;
	padding: 2px;
	border-radius: 8px;
	transition: background-color 0.8s ease-in-out;
	box-shadow: rgba(244, 243, 240, 0.831) 0px 2px 5px -1px,
		rgba(244, 243, 241, 0.3) 0px 1px 3px -1px;
}

.button_keyboard:active {
	background-color: var(--primary-0);
	transition: 0.2s ease-in-out;
}

.button_arrow,
.button_delete,
.button_enter {
	width: 100px;
	height: 53px;
}

.maintenance-img {
	width: 400px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.maintenance-heading {
	font-size: 34px;
	line-height: 54px;
}

.maintenance-paragraph {
	font-size: 18px;
	line-height: 34px;
}

.btn-maintenance-back {
	margin-bottom: 30px;
	position: relative;
	background-color: #854c0a;
	border: none;
}

.btn-maintenance-back:hover {
	position: relative;
	background-color: #5c3406 !important;
	border: none;
	transition: 0.5s ease-in-out;
}

.bi-arrow-left {
	margin-right: 10px;
	font-size: 16px;
}

.b-section {
	display: flex;
	justify-content: center;
	align-items: center;
}

.b-section-marquee-box {
	width: 102%;
	height: 80px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--warning-70); /* same as bg */
	margin: 50px 0;
	border-radius: 10px;
}

.b-section-marquee-box h2 {
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--danger-0) !important;
	margin-top: 15px;
	font-size: 2em;
	font-weight: bold;
	transform: translateX(0);
	animation: b-text-scroll 25s linear infinite;
}
@keyframes b-text-scroll {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
body {
    background-color: #f8f9fa;
}

.card {
    border-radius: 15px;
}

h3, h4 {
    text-transform: uppercase;
}