#header {
	position: absolute;
	z-index: 10;
	width: 100%;
	color: var(--white);
    transition: all 0.2s;
}
#header.page-header {
	position: relative;
	z-index: 10;
	width: 100%;
	color: var(--dark-text);
	top: 0;
	background: var(--white);
}
	#header.page-header #main-menu > li > a > span{color:var(--dark-text);}
#header.fixed {
	position: fixed;
	z-index: 9999;
	width: 100%;
	color: var(--dark-text);
	top: 0;
	background: var(--white);
	width: 100vw;
}
	#header.fixed #main-menu > li > a > span{color:var(--dark-text);}
#header.alt {
	position: relative;
	z-index: 10;
	width: 100%;
	color: var(--dark-text);
	top: 0;
	background: var(--white);
}
#header > .wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
}

/*=====branding====*/
#header #branding {
	flex:1;
}
#header #branding #logo, #header #branding #alt-logo {
	max-width: 185px;
	height: auto;
}
#header.fixed #branding #logo, #header.page-header #branding #logo {display: inline-block;}
#header.fixed #branding #alt-logo, #header.page-header #branding #alt-logo {display: none;}
#header.alt #branding #logo {display: inline-block;}
#header.alt #branding #alt-logo {display: none;}
#header #branding #logo {display: none;}
#header #branding #alt-logo {display: inline-block;}

/*===main menu===*/
/*===top level===*/
#header #menu {
    flex: auto;
}
#header #menu .main_menu {
	display: none;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
#header #main-menu {
    display: flex;
	flex-direction: row;
}
#header #main-menu > li > a  {color:inherit;}
#header #main-menu > li > a > span {
	display: inline-block;
	padding: 30px 20px;
	font-weight: bold;
	text-shadow: 0 0 12px var(--text-color);
	color: var(--white);
}
    #header.alt #main-menu > li > a > span {text-shadow: none;}
    #header.fixed #main-menu > li > a > span {text-shadow: none;}
    #header.page-header #main-menu > li > a > span {text-shadow: none;}
#header #main-menu {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
#header .menu > li.menu-item-has-children > a > span::after {
	content: "";
	display: inline-block;
	border-style: solid;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	position: absolute;
	left: 90%;
	top:calc(50% - 5px);
}

#header #main-menu .sub-menu {
    display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--white);
	box-shadow: 0 1px 4px rgba(0,0,0,0.6);
	z-index: 2;
    font-weight: 600;
}
/*===level 1===*/
#header #main-menu > li > .sub-menu {
	top: 100%;
	left: 0;
}
#header #main-menu > li > .sub-menu li > a > span {
    display: inline-block;
	padding: 10px 20px;
	border-bottom: 1px solid var(--border-color);
	width: 250px;
	color: var(--text-color);
	font-size: var(--small);
    transition:color 0.1s;
}
    #header #main-menu > li > .sub-menu li > a > span:hover {color: var(--dark-text);}
    #header #main-menu > li > .sub-menu li > a > span:not(:last-child) {border-bottom:1px solid var(--border-color);}
/*===level 2===*/
#header #main-menu > li > .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}
    #header #main-menu li:hover > .sub-menu{ display: block;}
    @keyframes fromBottom{
        from{ opacity: 0; transform:translateY(20%);}
        to{ opacity: 1; transform:translateY(0%);}
    }
    #header #main-menu li:hover > .sub-menu{ animation:fromBottom 0.2s linear 0s 1 forwards;}

/*====menu toggler====*/
#header #menu .menu-toggler {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 0;
    font-size: 22px;
}
#header .menu-toggler > i {
	cursor: pointer;
	color: var(--white);
}
	#header.fixed .menu-toggler > i { color:var(--text-color); }
#header.page-header .menu-toggler * {
	color: var(--text-color);
}
/*==============================*/
/*=========mobile menu==========*/
/*==============================*/
#wrapper.mobile #mobile-navigation {
	text-align: center;
	position: fixed;
	top: 0;
	right: 0;
	width: 260px;
}
#mobile-navigation {
	text-align: center;
	width: 0;
	position: fixed;
	overflow: hidden;
	right: 0;
	top: 0;
	transition: all 0.4s;
}
#mobile-navigation .close-btn {
	font-weight: bolder;
	font-size: var(--large);
	display: block;
	text-align: right;
	padding: 5px 20px 10px 30px;
	cursor: pointer;
}
#mobile-navigation h3 {
	color: var(--text-color);
	border-bottom: 1px solid var(--border-color);
	font-weight: 900;
	line-height: 20px;
	padding: 12px 30px;
}
#mobile-menu li a {
	text-decoration: none;
}
#mobile-menu li a span {
	color: var(--dark-text);
	display: block;
	padding: 12px 30px;
	border-bottom: 1px solid var(--border-color);
	font-weight: 900;
	line-height: 20px;
	text-align: left;
	transition: all 0.4s;
}
	#mobile-menu li a span:hover {
		color: var(--main-color);
	}
#mobile-navigation .booknow-btn {
	margin: 30px auto;
	width: calc(100% - 60px);
}

/*==submenu===*/
#mobile-menu .sub-menu {
	padding-left: 15px;
	background: var(--border-color);
	overflow: hidden;
	transition: all 0.2s;
}
#mobile-menu > li > .sub-menu {
	height: 0;
}

/*===language switcher===*/
#header .pll-parent-menu-item > a {
	display: none;
}
#header .pll-parent-menu-item::before {
	content: '\f0ac';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	padding: 30px 10px;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
	text-shadow: 0 0 12px var(--text-color);
	color: var(--white);
}
	#header.page-header .pll-parent-menu-item::before,
	#header.fixed .pll-parent-menu-item::before {
		color:var(--dark-text);
		text-shadow: none;
	}

@media only screen and (min-width:1100px){
    #header #menu .main_menu {display: flex;}
    #header #menu .menu-toggler { display: none;}    
}