/* Header Default */
#pxl-header-default {
	position: relative;
	z-index: 999;
	background-color: #fff;
	.row {
		align-items: center;
		@media #{$min-xl} {
			> div {
				padding: 0 15px;
			}
		}
	}
	.pxl-header-branding {
		display: flex;
		align-items: center;
		flex-grow: 1;
		a {
			display: inline-flex;
		}
		img {
			height: 45px;
			max-width: inherit;
		}
	}
	#pxl-nav-mobile {
		display: none;
	}
}

	/* Header Elementor */
	#pxl-header-elementor {
		#pxl-header-mobile {
			display: none;
		}
		.pxl-header-elementor-main {
			position: relative;
			z-index: 999;
		}
		.pxl-header-elementor-sticky {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			top: 0;
			@include transform(translateY(-100%));
			@include transition(.6s cubic-bezier(.24,.74,.58,1));
			visibility: hidden;
			&.pxl-header-fixed {
				@include transform(translateY(0%));
				visibility: visible;
				@include box-shadow(0 3px 18px rgba(#02154e, 0.09));
			}
		}
		.px-header--transparent {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 999;
		}
		// .elementor-section .elementor-container, .elementor-widget, .elementor-widget-wrap, .elementor-column, .elementor-column-wrap {
		// 	position: static;
		// }
	}

	/* Header Menu */
	@media #{$min-xl} {
		.pxl-menu-primary {
			list-style: none;
			margin: 0;
			padding: 0;
			ul {
				list-style: none;
				margin: 0;
			}
			li {
				position: relative;
				color: $secondary_color;
				a {
					color: $secondary_color;
					font-size: 14px;
					font-weight: 600;
					position: relative;
					display: block;
					text-transform: capitalize;
					@extend .ft-public-sans;
				}
			}
			> li {
				display: inline-block;
				vertical-align: middle;
				margin: 0 12px;

				> a {
					line-height: 115px;
					font-size: 14px;
					font-weight: 700;
					display: inline-block;
				}
				> a:hover,
				&.current_page_item > a,
				&.current-menu-item > a,
				&.current_page_ancestor > a,
				&.current-menu-ancestor > a {
					color: $primary_color;

				}
				.current-menu-item a:before{
					margin-left: 15px;
				}
			}
			.sub-menu, .children {
				position: absolute;
				top: 100%;
				left: -30px;
				background-color: #fff;
				padding: 26px 0;
				margin-top: 30px;
				margin-bottom: 0;
				min-width: 280px;
				z-index: 99;
				visibility: hidden;
				opacity: 0;
				-webkit-box-shadow: 0px 3px 7px 0px rgba(40,35,30,0.1);
				box-shadow: 0px 3px 7px 0px rgba(40,35,30,0.1);
				@include transition(all 200ms linear 0ms);
				transform-origin: 0 0 0;
				-webkit-transform-origin: 0 0 0;
				-ms-transform-origin: 0 0 0;
				-o-transform-origin: 0 0 0;
				text-align: left;
				@include border-radius(5px);
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				li {
					padding: 0 30px;
					white-space: nowrap;
					a {
						padding: 0.4em 0;
						display: block;
						margin-left: -12px;
						span {
							position: relative;
							display: inline-block;
						}
					}
					> a:hover,
					&.current_page_item > a,
					&.current-menu-item > a,
					&.current_page_ancestor > a,
					&.current-menu-ancestor > a {
						span:before {
							width: 100%;
						}
					}
				}
				.sub-menu, .children {
					top: -25px;
					left: 100%;
					&.pxl-sub-reverse {
						left: auto;
						right: 100%;
					}
				}
				.pxl-heading .pxl-item--title {
					color: inherit !important;
				}
			}
			li:hover,
			li.focus {
				> .sub-menu, > .children {
					visibility: visible;
					opacity: 1;
					margin-top: 0;
				}
			}
			.pxl-megamenu {
				position: static;
				> .sub-menu {
					padding: 20px 0;
					max-width: 100%;
					margin-left: auto;
					margin-right: auto;
					left: 0;
					right: 0;
					@include border-radius(5px);
				}
				.pxl-link li {
					padding: 0;
					margin-bottom: 0;
				}
			}
		}
		.pxl-menu-toggle {
			display: none;
		}
		#pxl-header-default {
			.pxl-header-main {
				position: relative;
				top: 0;
				left: 0;
				width: 100%;
				right: 0;
				z-index: 999;
				.container {
					max-width: 1660px;
				}
			}
			.pxl-menu-primary > li {
				> a {
					
				}
				&:hover > a,
				&.current_page_item > a,
				&.current-menu-item > a,
				&.current_page_ancestor > a,
				&.current-menu-ancestor > a {
					&:before {
						width: 100%;
					}
				}
			}
		}
	}

	/* Header Tablet/Mobile */
	@media #{$max-lg} {
		#pxl-header-elementor {
			.pxl-header-elementor-main, 
			.pxl-header-elementor-sticky {
				display: none;
			}
			#pxl-header-mobile {
				display: block;
				@include box-shadow(0 3px 18px rgba(#02154e, 0.09));
				position: relative;
				z-index: 999;
			}
		}
		#pxl-header-default, #pxl-header-elementor {
			position: relative;
			@include box-shadow(0 0px 15px rgba(0, 0, 0, 0.08));
			background-color: #fff;
			.pxl-header-main {
				position: relative;
			}
			.pxl-header-branding {
				margin: 15px;
				min-height: 50px;
				align-items: center;
				display: flex;
				img {
					height: 45px;
				}
			}
			#pxl-nav-mobile {
				display: block;
				position: absolute;
				top: 50%;
				right: 15px;
				@include transform(translate(0,-50%));
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.pxl-mobile-meta-item {
					margin-left: 10px;
				}
			}
		}
		.pxl-nav-mobile-button {
			width: 34px;
			height: 20px;
			position: relative;
			cursor: pointer;
			&:before, &:after, span {
				content: '';
				background-color: $secondary_color;
				height: 2px;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				@include transition(all .25s cubic-bezier(.645,.045,.355,1));
			}
			&:before {
				top: 0;
				width: 24px;
			}
			&:after {
				bottom: 0;
				width: 24px;
			}
			span {
				top: 9px;
				width: 100%;
			}
			&:hover {
				&:before, &:after {
					width: 100%;
				}
			}
		}
		.pxl-header-menu-backdrop {
			z-index: 998;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#222237, 0.6);
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
			opacity: 0;
			visibility: hidden;
		}
		.pxl-header-menu {
			position: fixed;
			height: 100vh;
			width: 300px;
			top: 0;
			left: 0;
			bottom: 0;
			margin: 0;
			overflow: hidden;
			z-index: 999;
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
			@include transform(translateX(-100%));
			visibility: hidden;
			@include box-shadow(0 0 15px rgba(0,0,0,0.08));
			background-color: #fff;
			overflow-y: scroll;
			&.active {
				visibility: visible;
				opacity: 1;
				@include transform(translateX(0%));
				+ .pxl-header-menu-backdrop {
					opacity: 1;
					visibility: visible;
				}
			}
		}
		.pxl-header-menu-scroll {
			padding: 40px 35px;

		}

		.pxl-menu-toggle {
			position: absolute;
			top: 10px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			right: 0px;
			width: 28px;
			cursor: pointer;
			font-size: 10px;
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
			color: $secondary_color;
			@include border-radius(3px);
			background-color: rgba(#000, 0.03);
			&:before {
				content: "\f150";
				font-family: "Caseicon";
			}
			&.active:before{
				content: "\f13d";
			}
		}

		.pxl-menu-primary {
			list-style: none;
			margin: 0;
			padding: 0;
			li {
				position: relative;
				a {
					display: block;
					line-height: 46px;
					color: $secondary_color;
					font-size: 14px;
					font-weight: 500;
					border-bottom: 1px solid rgba(#000, 0.06);

				}
				> a:hover,
				> a.current, 
				&.current_page_item > a,
				&.current-menu-item > a,
				&.current_page_ancestor > a,
				&.current-menu-ancestor > a {
					color: $primary_color;
				}

			}
			.sub-menu, .children {
				position: relative;
				display: none;
				list-style: none;
				margin: 0;
				padding: 0;
				li {
					a {
						font-weight: 500;
						padding-left: 14px;
						font-size: 13px;
					}
				}

			}
			> li > .sub-menu > li > .sub-menu > li a {
				padding-left: 28px;
			}
			.pxl-megamenu {
				.elementor-container {
					> .elementor-column {
						width: 100%;
					}
					.elementor-widget-wrap {
						padding: 0 !important;
					}
				}
				.pxl-link li {
					margin: 0;
				}
				.pxl-heading {
					padding-left: 14px;
					border-bottom: 1px solid rgba(0, 0, 0, 0.06);
					padding-top: 12px;
					padding-bottom: 12px;
					.pxl-item--title {
						margin-bottom: 0 !important;
						font-size: 15px !important;
						border-bottom: none !important;
					}
				}
				.elementor-widget-heading > .elementor-widget-container {
					margin-bottom: 0 !important;
					border-bottom: none !important;
				}
				.elementor-section .elementor-container {
					flex-wrap: wrap;
				}
			}
		}
		.pxl-logo-mobile {
			margin-bottom: 20px;
			img {
				height: 35px;
			}
		}
		.pxl-header-mobile-search {
			margin-bottom: 20px;
			form {
				position: relative;
			}
			.search-field {
				height: 40px;
				border: none;
				padding: 0;
				padding-left: 10px;
				border-bottom: 2px solid #ececec;
				&:hover, &:focus {
					border-top:none !important; 
					border-left:none !important; 
					border-right:none !important; 
					border-bottom: 2px solid $secondary_color !important;
				}
			}
			.search-submit {
				position: absolute;
				top: 0;
				right: 0;
				@include border-radius(0px);
				line-height: 36px;
				padding: 0;
				width: 30px;
				height: 40px;
				line-height: 40px;
				background: none;
				color: $primary_color;
				&:hover, &:focus {
					color: $primary_color;
				}
				border: none;
			}
		}
		.pxl-menu-close {
			background-color: rgba(0, 0, 0, 0.03);
			position: absolute;
			right: 20px;
			top: 20px;
			
			@include border-radius(0px);
			&.pxl-close{
			}
		}
	}

	/* Search Popup */
	#pxl-search-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		visibility: hidden;
		.pxl-item--close {
			width: 45px;
			height: 45px;
			position: absolute;
			background-color: $primary_color;
			top: 40px;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 99;
			border-radius: 45px;
			border-width: 11px;
			opacity: 1;
		}
		.pxl-item--conent {
			background-size: cover;
			background-position: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-height: 320px;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			padding: 0 15px 80px 15px;
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
			@include transform(translateY(-100%));
			form {
				max-width: 760px;
				margin: 0 auto;
				width: 100%;
				position: relative;
				.search-field {
					height: 80px;
					padding: 16px 0;
					color: rgba(0,0,0,0.48);
					font-size: 30px;
					border: none !important;
					background-color: transparent;
				}
				.search-submit {
					position: absolute;
					top: 50%;
					right: 0;
					@include transform(translate(0, -50%));
					width: 80px;
					height: 80px;
					line-height: 80px;
					text-align: right;
					border: none;
					background: none;
					font-size: 28px;
					padding: 0;
					z-index: 99;
					cursor: pointer;
				}
			}
		}
		.pxl--search-divider {
			height: 2px;
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: rgba(0,0,0,0.6);
		}
		.pxl-item--overlay {
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#222237, 0.6);
			opacity: 0;
			visibility: hidden;
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
		}
		&.active {
			visibility: visible;
			.pxl-item--overlay {
				opacity: 1;
				visibility: visible;
			}
			.pxl-item--conent {
				@include transform(translateY(0%));
			}
		}
	}

	.admin-bar {
		#pxl-header-elementor .pxl-header-elementor-sticky.pxl-header-fixed, .pxl-header-menu, #pxl-header-elementor .px-header--transparent, #pxl-search-popup {
			top: 32px;
			@media screen and (max-width: 782px) {
				top: 46px;
			}
			@media screen and (max-width: 600px) {
				top: 0;
			}
		}
	}

	/* Heaeder Layout */
	.elementor-editor-active .pxl-type-header-clip > .elementor-container .pxl-header-shape {
		display: none;
		&:last-child {
			display: block;
		}
	}
	.pxl-type-header-clip {
		> .elementor-container {
			position: relative !important;
			z-index: 1;
			.pxl-header-shape {
				position: absolute;
				top: 50%;
				left: 15px;
				right: 15px;
				height: 100px;
				@include transform(translate(0, -50%));
				z-index: -1;
				filter: drop-shadow(0px 10px 35px rgba(0, 0, 0, 0.08));
				margin-left: 52px;
				margin-right: 190px;
				span {
					clip-path: polygon(0% 0%, 100% 22%, 100% 78%, 0% 100%);
					-webkit-clip-path: polygon(0% 0%, 100% 22%, 100% 78%, 0% 100%);
					background-color: #fff;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100px;
				}
				svg {
					fill: $primary_color;
					position: absolute;
					top: 50%;
					left: 50%;
					@include transform(translate(-50%, -50%));
					width: 100%;
				}
				&:before, &:after {
					content: '';
					position: absolute;
					width: 100px;
					height: 100px;
					@include border-radius(100px);
					top: 0;
				}
				&:before {
					left: -45px;
					background-color: #fff;
					z-index: 99;
				}
				&:after {
					left: -52px;
					background-color: $primary_color;
					z-index: 88;
				}
			}
		}
	}
	@media (min-width: 1200px) {
		.sub-menu {
		}
		
		.pxl-menu-primary .sub-menu a{
			display: flex !important;
			align-items: center;
			margin-left: -5px;

			&:before {
				content: "\f101";
				font-family: flaticon_meddox2 !important;
				transition:.5s;
				opacity: 0;
				font-weight: 900;
				font-size: 14px;
				margin-right: 5px;
			}
			&:hover {
				border-color: $secondary_color;
				&:before {
					opacity: 1;
					margin-left: 15px;
				}
			}
		}
	}

	.menu-item-has-children{
		>a{

			>i{
				&.pxl-hide{
					display: contents !important;
					font-size: 7px;
					&:before{
						font-weight: 900 !important;
						margin-left: 5px;
						position: relative;
						top: -1px;
					}
				}
			}
		}
		.menu-item-has-children{
			position: relative;
			>a{
				>i{
					&.pxl-hide{
						display: contents !important;
						font-size: 9px;
						&:before{
							display: none;
						}
					}
				}
			}
			&:after{
				position: absolute;
				content: "\f14d";
				font-family: "Caseicon";
				right: 25px;
				top: 8px;
				font-size: 10px;
			}
		}
	}

	.sub-menu{
		.current-menu-item,
		.current-menu-parent{
			>a{
				margin-left: 10px;
				&:before{ margin-right: 10px; opacity: 1; visibility: visible; }
			}
		}
	}


	.pxl-header-main{
		.pxl-menu-primary{
			>li.page_item_has_children {
				>a{
					&:after{
						content: "\f102";
						font-family: flaticon_meddox2 !important;
						font-size: 7px;
						margin-left: 5px;
						position: relative;
						top: -1px;
					}
				}
				ul{
					
					li{
						a{
							font-size: 13px;
							margin-left: -15px;
							&:before{
								content: "\f101";
								font-family: flaticon_meddox2 !important;
								font-weight: 900;
								vertical-align: middle;
								font-size: 14px;
								opacity: 0;
								margin-left: 0;
								visibility: hidden;
								-webkit-transition: all 0.3s cubic-bezier(0.38, 0.17, 0.09, 0.99);
								-o-transition: all 0.3s cubic-bezier(0.38, 0.17, 0.09, 0.99);
								transition: all 0.3s cubic-bezier(0.38, 0.17, 0.09, 0.99);
								margin-right: 5px;

							}
							
							&:hover{
								&:before{
									margin-left: 15px;
									opacity: 1;
									visibility: visible;
								}
								
							}
						}
					}
					.page_item_has_children{
						&:after{
							position: absolute;
							content: "\f14d";
							font-family: "Caseicon";
							right: 25px;
							top: 2px;
							font-size: 10px;
							top: 8px;
							font-weight: 900;
						}

					}
					.current_page_ancestor>a{
						&:before{
							margin-left: 12px;
							opacity: 1;
							visibility: visible;
						}
					}
					.current_page_item >a{
						&:before{
							margin-left: 12px;
							opacity: 1;
							visibility: visible;
						}
						&:hover{
							&:before{
								margin-left: 12px;

							}
						}
					}
					.current_page_parent {
						.current_page_item a{
							&:before{
								margin-left: 12px;
								opacity: 1;
								visibility: visible;
							}
						}
					}
				}

			}

		}
	}