/** @format */

.header {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
}

#header-desktop {
	background-color: var(--color-white);
	display: block;
	box-shadow: 0 1px 5px var(--color-grey);
}

#header-mobile {
	background-color: var(--color-black-blue);
	color: var(--color-white);
	display: none;
}

@media screen and (max-width: 1150px) {
	#header-desktop,
	#header_logo_full {
		display: none;
	}

	#header-mobile {
		display: block;
	}
}

#header_logo_full {
	position: absolute;
	top: 0;
	transform: translateY(25%);
	left: var(--wrapper-padding);
	z-index: 100;
	opacity: 1;
	transition: all 300ms ease;
}

.header__fix_contents {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0;
}

.header__logo {
	width: 100%;
	max-width: 100px;
}

.header__logo svg {
	display: inline;
}

.header__fix_contents > *:first-child {
	justify-self: start;
}

.header__fix_contents > *:last-child {
	justify-self: end;
}

.header__navs {
	display: flex;
	place-items: center;
	gap: 2em;
}

body.has-sub-nav #header_logo_full {
	opacity: 0;
}

#header-mobile #header_logo_text svg .cls-1,
#header-mobile #header_logo_text svg .cls-2 {
	fill: var(--color-white) !important;
}

#header-mobile .header--inner_container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#header-mobile .header__buttons {
	display: inline-flex;
	place-items: center;
}