/****************************************/
/* HEADER 
/****************************************/

#page-header {
	direction: rtl;
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	padding-block: 8px; 
	background: rgba(4, 67, 73, 0.9);
	
	--text-color		: #FFFFFF;
	--link-color		: #03FF8E; 
	--hover-color		: #FFFFFF; 
}

#site-loader.on ~ #page-header:not(.on) {
	-webkit-transform: translateY(-101%);
			transform: translateY(-101%);	
}
#page-header:not(.on) {
	-webkit-transform: none;
			transform: none;
	-webkit-transition: all 0.8s ease 3s;
			transition: all 0.8s ease 3s;
}
.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding-inline: var(--gutter); 
}

@media (min-width : 1200px) {
	#page-header {
		padding-block: max(20px,1vw);
		box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
		will-change: padding;
		-webkit-transition: all 0.2s ease 0s;
				transition: all 0.2s ease 0s;
	}
	#page-header.minified {
		padding-block: 0;
		background: rgba(4, 67, 73, 1);
	}
}



/* Header toggle button */
#navbar-toggle {
	position: relative;
	z-index: 999;
	outline: 0;
	margin-right: -8px;
	border: 0;
	padding: 9px 8px;
	width: 40px;
	background: none;
	color: var(--text-color);
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.75));
	cursor: pointer;
}
#navbar-toggle span {
	display: block;
	position: relative;
	width: 100%;
	height: 2px;
	margin: 6px 0;
	background-color: currentColor;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
	animation-name: navbarToggle;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
#navbar-toggle span:nth-child(1) {
	animation-delay: 1.8s;
}
#navbar-toggle span:nth-child(2) {
	animation-delay: 2.2s;
}
@keyframes navbarToggle {
	0%   {width: 100%;}
	15%  {width: 60%;}
	30%, 
	100% {width: 100%;}
}
#page-header.nav-open #navbar-toggle span {
	animation: none;
}
#page-header.nav-open #navbar-toggle span:nth-child(1) {
	transform: translateY(4px) rotateZ(45deg);
}
#page-header.nav-open #navbar-toggle span:nth-child(2) {
	transform: translateY(-4px) rotateZ(-45deg);
}
@media (min-width: 1200px) {
	#navbar-toggle {
		display: none;
	}
}
/***/



/* Header logo */
#header-logo {
}
#header-logo img {
	display: block;
	max-height: 36px;
}
@media (min-width : 1200px) {
	#header-logo { 
	}
	#header-logo img {
		max-height: none;
	}
}
/***/



/* Header floating panel */
#header-panel {
	position: fixed;
	z-index: 99;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	min-width: 15em;
	max-width: 100%;
	padding-top: 60px;
	padding-inline: var(--gutter);
	background: var(--primary-color);
	color: var(--white-color);
	-webkit-transform: translateX(101%);
			transform: translateX(101%);
	-webkit-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
			transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
#page-header.nav-open #header-panel {
	-webkit-transform: none;
			transform: none;	
}
#header-panel-content {
	padding-inline: 2em;
}

@media (min-width: 1200px) {
	#header-panel {
		display: contents;
	}
	#header-panel-content {
		display: contents;
	}
}
/***/



/* Page cover for nav open */
#nav-open-cover {
	position: fixed;
	z-index: 90;
	inset: 0;
	width: 0;
	opacity: 0;
	-webkit-transition: all 0.2s ease, width 0s ease 0.2s;
			transition: all 0.2s ease, width 0s ease 0.2s;
}
#page-header.nav-open #nav-open-cover {
	z-index: 90;
	opacity: 1;
	width: 100%;
	-webkit-transition: all 0.2s ease, width 0s;
			transition: all 0.2s ease, width 0s;
}
@media (min-width: 1200px) {
	#nav-open-cover {
		display: none;
	}
}
/***/



/* Header side logo */
#header-panel-logo {
	margin: 2em 0;
}
@media (min-width: 1200px) {
}
/***/



/* Header navigation */
#header-nav {
	list-style: none;
	margin: 2em -1em; 
	font-size: round(up, 1.125em, 1px);
	font-weight: 600;
}
#header-nav li {
	margin: 1em 0;
}
#header-nav a {
	padding: 0.5em 0;
}
#header-nav a.active {
	color: var(--hover-color);
}
#header-nav li a:before {
	content: '\232A';
	display: inline-block;
	margin-inline-end: 0.5em;
	opacity: 0;
	-webkit-transform: translateX(1em);
			transform: translateX(1em);
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}
#header-nav li a:hover:before,
#header-nav li a.active:before {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
}
.header-sub-nav {
	margin-inline-start: 2em;
}

@media (min-width: 1200px) {
	#header-nav {
		display: flex;
		gap: max(2em,4vw);
		margin: 0; 
	}
}

@media (min-width: 1200px) {
	#header-nav li a {
		position: relative;
	}
	#header-nav li a:before {
		content: '\2022';
		position: absolute;
		top: -0.5em;
		margin-inline-start: -0.125em;
		inset-inline-start: 50%;
		-webkit-transform: none;
				transform: none;
	}
}
/***/



/* Header contact */
#header-contact-info {
	text-align: center;
	font-size: round(up, 1.166667em, 1px);
}
#header-contact-info a {
	color: var(--white-color);
}
#header-contact-info:before {
	content: "";
	display: block;
	width: 80px;
	margin-bottom: 1.5em;
	border: 2px solid;
}
#header-phone-btn {
	font-size: round(up, 2.421052em, 1px);
	font-family: "BebasNeue", sans-serif;
}
@media (min-width: 1200px) {
	#header-contact-info {
		display: none;
	}
}
/***/



/* Header extra */
#header-extra { 
}
/***/



/* Header misc. */
.dot {
	width: 0;
	height: 0;
	border: 4px solid;
	border-radius: 4px;
}
#page-header .dot {
	color: #888;
}
/***/



/****************************************/