.page-header-area
	padding: 120px 0
	background-color: $colorLightThree
	box-shadow: inset 0px 0px 7px 3px $shadowColor
	.page-header
		text-align: center
		h6
			font-size: 2.5rem
			font-weight: 700
			text-transform: capitalize
.header-one-area
	box-shadow: inset 0px -1px 0px var(--color-light-four)
	position: relative
	z-index: 5
	.header-one
		width: 100%
		.header-one-logo-area
			.header-one-logo    
	.header-one-menu-area
		.header-one-menu
			ul
				li
					a
						font-family: $titleFont
					&:hover,
					&:focus
						.sub-menu
							opacity: 1
							visibility: visible
							transform: translateY(0px)
					.sub-menu
						transform: translateY(30px)
						position: absolute
						top: 100%
						left: 0
						opacity: 0
						visibility: hidden
						width: 250px
						transition: .3s
						z-index: 1
						margin: 0
						padding: 20px 0px
						display: block !important
						background: $colorLightThree 
						box-shadow: inset 0px 0px 7px 3px $shadowColor
						z-index: 5
						li
							margin: 0
							padding: 0px 30px
							a
								margin: 0
								padding: 6px 0px
								color: $colorDark
								text-align: left
								font-size: 16px
							&:hover
								a
									color: $colorHighlight
								.sub-menu
									opacity: 1
									visibility: visible
									transform: translate(0px, 0)
									li
										&:hover
											a
												color: $colorHighlight
							.sub-menu
								opacity: 0
								visibility: hidden
								transform: translate(-30px, 0)
								left: -100%
								top: 0
								li
									a
										color: $colorDark
				
				.focus
					.sub-menu
						opacity: 1
						visibility: visible
						transform: translateY(0px)
						.focus
							a
								color: $colorHighlight
							.sub-menu
								opacity: 1
								visibility: visible
								transform: translate(0px, 0)
								li
									a
										color: $colorDark
								.focus
									a
										color: $colorHighlight


.header-one-area
	.echohealth-site-title
		margin: 0
		font-size: 1.75rem
		font-weight: 600
		a
			font-weight: 700
	.echohealth-site-description
		margin-bottom: 0px
		font-size: 18px
		font-weight: 400
		font-family: $titleFont
		color: $colorDark
.header-one-area
	.header-one
		.header-one-logo-area
			width: 270px
			.header-one-logo
				.kahaf-site-description
					margin-bottom: 0
					font-size: 15px
.header-one-area
    padding: 0px 30px
    .header-one
        @extend .flex-between-center
        .header-one-logo-area
            .header-one-logo    
                display: grid
                a
                    display: grid
                img
        .header-one-menu-area
            @extend .width-100-pe
            .header-one-menu
                ul
                    @extend .ul-reset
                    @extend .flex-end-center
                    li
                        margin: 0px 15px
                        position: relative
                        padding: 50px 0px
                        a
                            position: relative
                            display: block
                            text-align: center
                            font-size: 17px
                            line-height: 30px
                            font-weight: 600
                            opacity: 1
                            padding: 0px
                            z-index: 1
                            transition: all 500ms ease
                            text-transform: capitalize
                        ul
                            li
                                a
                            li
                                a
                                ul
                                    li
                                        a
        .header-one-menu-toggle-area
            display: none
            min-width: 53px
            height: 53px
            cursor: pointer
            margin-left: 10px
            border-radius: 5px
            border: 2px solid
            transition: .3s
            font-size: 18px
            font-weight: 600
            position: relative
            text-align: center
            z-index: 6
        .header-one-menu-toggle-area.mobile-menu-close
            top: 60px
            position: fixed
            right: 20px
            min-width: 45px
            width: 45px
            height: 45px
            border-radius: 50%
.header-one-menu-toggle-area
	svg
		transition: .5s
		transform: rotate(0deg)
.header-one-menu-toggle-area.mobile-menu-close
	svg
		transform: rotate(90deg)
		transition-delay: .5s
.header-one-menu					
	ul
		li
			&:first-child
				margin-left: 0  !important
			&:last-child
				margin-right: 0  !important
.header-one-area
    .container-fluid
        .row
            .header-one
                .header-one-logo-area
                .header-one-logo
                        img
                .header-one-menu-toggle-area
                    border-color: $colorDark
                    background-color: $colorWhite
                    color: $colorHighlight
                .header-one-menu-area
                    .header-one-menu
                        ul
                            li
                                a
                                ul
                                    li
                                        a
                                    li
                                        a
                                        ul
                                            li
                                                a
.header-one-area
	.container-fluid
		.row
			.header-one
				.header-one-menu-toggle-area
					svg
						fill: $colorHighlight
						height: 24px
					&:focus
						border-color: $colorHighlight
						
.mobile-header-bg
	position: fixed
	right: -100%
	top: 0
	width: 100%
	max-width: 100%
	height: 100%
	z-index: 5
	background: $colorDark
	overflow-y: auto
	opacity: .8
	transition: .4s
.mobile-header-row
	transition: .5s
	position: fixed
	right: -100%
	top: 0
	width: 300px
	max-width: 100%
	height: 100%
	opacity: 0
	visibility: hidden
	z-index: 5
	background: $colorWhite
	overflow-y: auto
	&::-webkit-scrollbar 
		width: 5px
		height: 5px
	&::-webkit-scrollbar-track
		border-radius: 0px
		background: transparent

	&::-webkit-scrollbar-thumb
		background: transparent
		border-radius: 30px
	&:hover
		&::-webkit-scrollbar-track
			background: rgba(0, 0, 0, 0.1)

		&::-webkit-scrollbar-thumb
			background: $colorWhite
	ul
		li
			padding: 0px 0px
			width: 100%
			border-top: 1px solid $colorDark
			&:last-child
				border-bottom: 1px solid $colorDark
			a
				padding: 12px 20px
				width: 100%
				line-height: 24px
				border-bottom: 0px solid !important
				font-size: 16px
				font-family: $titleFont
				font-weight: 600
				text-transform: capitalize
		.menu-item-has-children
			.menu-rounded-down.open
				transform: rotate(0deg)
				background: $colorWhite
				fill: $colorDark
			.menu-rounded-down
				fill: $colorDark
				position: absolute
				right: 25px
				top: 12px
				transform: rotate(-90deg)
				box-shadow: 0px 0px 2px 0px $colorDark
				border-radius: 2px
				width: 25px
				padding: 4px
				text-align: center
				line-height: 25px
				cursor: pointer
				transition: .3s
				border: 0
				background: transparent
				height: 25px
				&:hover
					background: $colorWhite
					svg
						fill: $colorHighlight
				&:focus
					background: $colorWhite
					svg
						fill: $colorHighlight
			&:after
				content: none
			.sub-menu
				transform: translateY(0px)
				width: 100%
				position: relative
				opacity: 1
				visibility: visible
				border-top: 0 !important
				display: none
				transition: none
				li
					&:last-child
						border-bottom: 0
						a
					a
						background: transparent
						color: $colorDark
						padding-left: 42px
					.focus-visible
						color: $colorHighlight
				.menu-item-has-children
					.menu-rounded-down
						top: 12px
						width: 25px
						fill: $colorDark
					&:after
					.sub-menu
						transform: translateY(0px)
						width: 100%
						position: relative
						opacity: 1
						visibility: visible
						border-top: 0 !important
						display: none
						transition: none
						left: 0
						top: 0
						li
							a
			&.focus
				//display: none	
			&:hover
				.sub-menu
					.menu-item-has-children
						&:hover
							.sub-menu
				
.mobile-header-open
	overflow-y: hidden
	.mobile-header-row-area
		.mobile-header-row
			opacity: 1
			visibility: visible
			right: 0
			.mobile-menu-close
				transform: scale(1)
				transition-delay: .5s
		.mobile-header-bg
			right: 0
.mobile-header-row-area
	.mobile-header-row
		.mobile-menu-close
			transition: .5s
			transform: scale(0)
			width: 35px
			height: 35px
			background: $colorWhite
			display: block
			text-align: center
			font-weight: 700
			line-height: 33px
			cursor: pointer
			border: 2px solid $colorDark
			box-shadow: 0px 0px 2px 0px $colorHighlight
			position: absolute
			right: 15px
			top: 55px
			border-radius: 50%
			fill:  $colorHighlight
			padding: 5px
			&:focus
				transition: .1s
				border-color: $colorHighlight
		.mobile-logo-area
			text-align: center
			margin-top: 80px
			margin-bottom: 20px
			a
				img
					height: 80px
		.mobile-menu
			margin-bottom: 50px
.mobile-header-row
    ul
        @extend .ul-reset
        li
            position: relative
button.header-one-focus
    display: none