.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 4rem;
	color: #fff;
	z-index: 20;
	/* border: 1px solid magenta; */
	/* height: 88px; */
	background: transparent;
	transition: all 0.3s ease;
}

.nav-default {
	/* background-color: white; */
}

.header-logo {
	width: 20rem;
	/* border: 1px solid magenta; */
}

.nav-default .header-logo a:nth-last-child(1) {
	display: block;
}

.nav-default .header-logo a:nth-last-child(2) {
	display: none;
}

.header-logo a:nth-last-child(1) {
	display: none;
}

.header-logo a:nth-last-child(2) {
	display: block;
}

.header-menu-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5rem;
	/* border: 1px solid magenta; */
}

.header-menu {
	color: white;
	font-weight: bold;
	transition: all 0.3s ease;
}

.header-menu:hover {
	color: var(--merah) !important;
	transition: all 0.3s ease;
}

.nav-default .header-menu {
	color: var(--biru);
	font-weight: 700;
}

.nav-default .header-menu:hover {
	color: var(--merah) !important;
	font-weight: 700;
	transition: all 0.3s ease;
}

.header-menu--active {
	color: var(--merah) !important;
	font-weight: 700;
}

.header-menu-lang {
	color: #fff;
	border-right: 1.8px solid #fff;
	padding: 0 1rem;
}

.nav-default .header-menu-lang {
	color: var(--biru);
	border-right: 1.8px solid var(--biru);
	font-weight: 700;
}

.header-menu-lang:nth-child(2) {
	border-right: none !important;
}

.header-menu-lang--active {
	color: var(--merah) !important;
	font-weight: 700;
}

.header-menu-login p {
	background-color: white;
	color: var(--biru);
}

.scroll-header {
	background: white;
	transition: all 0.3s ease-out;
}

.scroll-header .header-logo a:nth-last-child(1) {
	display: block;
}

.scroll-header .header-logo a:nth-last-child(2) {
	display: none;
}

.scroll-header .header-menu {
	color: var(--biru);
}

.scroll-header .header-menu-login p {
	background-color: red;
	color: white;
}

.scroll-header .header-menu-lang {
	color: var(--biru);
	border-right: 1.8px solid var(--biru);
	font-weight: 700;
}

/* Header Responsive */
.header-btn-responsive {
	display: none;
}

.hamburger .line {
	width: 30px;
	height: 3px;
	background-color: white;
	display: block;
	margin: 5px auto;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border-radius: 1rem;
}

.nav-default .hamburger .line {
	background-color: var(--biru);
}

.scroll-header .hamburger .line {
	background-color: var(--biru);
}

.hamburger:hover {
	cursor: pointer;
}

#hamburger-11 {
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#hamburger-11.is-active {
	animation: smallbig 0.6s forwards;
}

@keyframes smallbig {
	0%,
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
}

#hamburger-11.is-active .line:nth-child(1),
#hamburger-11.is-active .line:nth-child(2),
#hamburger-11.is-active .line:nth-child(3) {
	-webkit-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

#hamburger-11.is-active .line:nth-child(2) {
	opacity: 0;
}

#hamburger-11.is-active .line:nth-child(1) {
	-webkit-transform: translateY(8px) rotate(45deg);
	-ms-transform: translateY(8px) rotate(45deg);
	-o-transform: translateY(8px) rotate(45deg);
	transform: translateY(8px) rotate(45deg);
}

#hamburger-11.is-active .line:nth-child(3) {
	-webkit-transform: translateY(-8px) rotate(-45deg);
	-ms-transform: translateY(-8px) rotate(-45deg);
	-o-transform: translateY(-8px) rotate(-45deg);
	transform: translateY(-8px) rotate(-45deg);
}

/* Body Responsive */
.body-responsive {
	/* border: 1px solid magenta; */
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	color: var(--biru);
	height: 100vh;
	padding: 88px 0;
	z-index: -1;
	transform: translateX(100vw);
	transition: all 0.3s ease;
}

.body-responsive.nav-responsive {
	transform: translateX(0);
	transition: all 0.3s ease;
}

.body-responsive .body-responsive-items {
	/* border: 1px solid magenta; */
	border-top: 1px solid var(--biru);
}

.body-responsive-items .item {
	/* border: 1px solid magenta; */
	padding: 1.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--biru);
	font-weight: 700;
}

.body-responsive-items .item--active {
	color: var(--merah) !important;
	font-weight: 700;
}

.body-responsive-items .item-first {
	padding: 2.5rem 2rem 1.5rem 2rem;
}

.body-responsive .item-footer {
	/* border: 1px solid magenta; */
	display: flex;
	gap: 2.5rem;
	align-items: flex-end;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
}

.color-responsive a:nth-child(1) {
	color: var(--biru);
	border-right: 1.8px solid var(--biru);
}

header.nav-responsive .header-logo a:nth-child(1) {
	display: none;
}

header.nav-responsive .header-logo a:nth-child(2) {
	display: block;
}

header.nav-responsive .hamburger .line {
	background-color: var(--biru);
}

@media only screen and (max-width: 1024px) {
	/* responsive navbar */
}

@media only screen and (max-width: 768px) {
	.header-menu-wrapper {
		display: none;
	}

	.header-btn-responsive {
		display: initial;
	}
}

@media only screen and (max-width: 425px) {
	.header {
		padding: 2rem;
	}

	.header-logo {
		width: 16rem;
		/* border: 1px solid magenta; */
	}
}

@media only screen and (max-width: 320px) {
	/* responsive navbar */
}

@media only screen and (max-width: 280px) {
	/* responsive navbar */
}