:root {
	--primary: #185fff;
	--heading: #0b2352;
	--yellow: #f3fb1d;
	--p-pendek: #5f7298;
	--p-panjang: #4f5e7c;
	--blue-soft-1: #f5f8ff;
	--blue-soft-2: #e1ebff;
	--text-element: #8899bb;
	--ambience-3: #d5dff4;
	--bg-foot: #22273c;
	--bg-white: #ffffff;
	--black: #262626;
	--ambiance-4: #f5f8ff;
	--merah: #da251c;
	--biru: #0000fe;
	--hijau: #00ff01;
}

.navbar.shadow-nav {
	box-shadow: 7px 10px 25px rgba(24, 95, 255, 0.15) !important;
}

/* Bacground */
.bg-merah {
	background-color: var(--merah);
}

.bg-blue-2 {
	background-color: var(--biru);
}

.bg-green-2 {
	background-color: var(--hijau);
}

.bg-blue-soft {
	background-color: var(--blue-soft-1);
}

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

.bg-blue {
	background-color: var(--primary);
}

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

.bg-ambiance-4 {
	background-color: var(--ambiance-4);
}

.bg-ambiance-3 {
	background-color: var(--ambience-3);
}

/* Margin */
.me-30 {
	margin-right: 30px;
}

.my-130 {
	margin: 130px 0;
}

.mt-180 {
	margin-top: 180px;
}

.mt-210 {
	margin-top: 210px;
}

.mt-350 {
	margin-top: 350px;
}

.min-t-180 {
	margin-top: -180px;
}

/* Radius */
.radius-40 {
	border-radius: 40px;
}

.radius-top-40 {
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
}

.radius-20 {
	border-radius: 20px;
}

/* Sahdow */
.shadow-1 {
	box-shadow: 7px 10px 25px 0px rgba(24, 95, 255, 0.15);
}

/* Line Button */
.navbar.bg-two .line-button,
.navbar.bg-two .line-button:hover {
	border-radius: 100px;
	border: 2px solid var(--bg-white);
	width: 100px;
	color: var(--bg-white);
	font-weight: 600;
	background: transparent;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.navbar.bg-one .line-button,
.navbar.bg-one .line-button:hover {
	border-radius: 100px;
	border: 2px solid var(--tone-1, #185fff);
	width: 100px;
	color: var(--primary);
	font-weight: 600;
	background-color: var(--bg-white);
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
/* Full Button */
.navbar.bg-two .full-button,
.navbar.bg-two .full-button:hover {
	border-radius: 100px;
	border: 2px solid white;
	width: 100px;
	height: 54px;
	color: var(--primary);
	font-weight: 600;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.navbar.bg-one .full-button,
.navbar.bg-one .full-button:hover {
	border-radius: 100px;
	border: 2px solid var(--primary);
	width: 100px;
	height: 54px;
	color: var(--bg-white);
	font-weight: 600;
	background-color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.hv-100 {
	height: 100vh !important;
}

.hv-50 {
	height: 57vh !important;
}

.tombol-light {
	display: inline-block;
	background-color: var(--bg-white);
	padding: 18px 30px;
	border-radius: 100px;
	text-decoration: none;
	font-weight: 600;
}
.tombol-primary {
	display: inline-block;
	background-color: var(--primary);
	padding: 18px 30px;
	border-radius: 100px;
	text-decoration: none;
	font-weight: 600;
	color: var(--bg-white);
}

.elipse {
	width: 117px;
	height: 117px;
	background-color: var(--ambience-3);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--primary);
}
.elipse-blue {
	width: 135px;
	height: 135px;
	background-color: var(--primary);
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--bg-white);
}

@media (max-width: 768px) {
	.line-button {
		width: 100% !important;
	}

	.full-button {
		width: 100% !important;
	}
}

/*--------------------------------------------------------------
# NAVBAR
--------------------------------------------------------------*/
.navbar {
	font-family: "Poppins", sans-serif;
}

.navbar .dropdown .dropdown-menu {
	background-color: var(--bg-white);
	box-shadow: 4px 14px 22px #c7d2d873;
	border: 0;
	width: 420px;
	padding: 20px 35px;
	box-sizing: border-box;
	border-radius: 10px 40px 10px 40px;
	margin-top: 30px;
}

.navbar .dropdown .dropdown-menu .dropdown-item {
	color: var(--heading);
	font-weight: 600;
}

.navbar .dropdown .dropdown-menu .dropdown-item:hover {
	background-color: transparent;
}

.navbar.bg-one,
.navbar.bg-one > * {
	transition: 1s all;
}

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

.navbar.bg-one .nav-link {
	color: var(--heading);
}

.navbar.bg-two {
	background: transparent;
}

.navbar.bg-two,
.navbar.bg-two > * {
	transition: 1s all;
}

.navbar.bg-two .nav-link {
	color: var(--bg-white);
}

@media (max-width: 768px) {
	.navbar.bg-two {
		background-color: var(--primary);
	}

	.navbar .dropdown .dropdown-menu {
		margin-top: 0;
		width: 100%;
	}

	.navbar .full-button,
	.navbar .line-button {
		width: 100%;
	}

	.me-30 {
		margin-right: 0;
	}
}

/*--------------------------------------------------------------
# MAIN HERO
--------------------------------------------------------------*/
#main .hero {
	background: url("../images/hero.webp") center center;
	background-size: cover;
	height: 100vh;
	border-radius: 0px 0px 0px 200px;
	margin-top: -86px;
}

@media (max-width: 768px) {
	#main .hero {
		padding-top: 160px;
	}
}

.clear::after {
	content: "";
	display: block;
	clear: both;
}

.border-blue {
	border: 2px solid var(--primary);
}