.header-area {
	border-bottom: 1px solid #eee;
	.navigation {
		height: 90px;
		position: relative;
		z-index: 9;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.header-inner-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo {
			height: 90px;
			display: flex;
			align-items: center;
			padding-right: 30px;
			font-family: $outfit;
			font-size: 30px;
			font-weight: 500;
			letter-spacing: 1px;
			color: $primary_color;
			border-right: 1px solid #eee;
			@media #{$md} {        
				border-right: none;			
			} 
			@media #{$xs} {        
				font-size: 30px;	
				border-right: none;			
			} 
		}


	}

}

.logo a {
	font-family: $outfit;
	font-size: 30px;
	font-weight: 500;
	color: rgb(255, 255, 255);	
	letter-spacing: 1px;
}

// Main Menu 

.main-menu {
	ul {
		line-height: 1;

		>li {
			display: inline-block;
			line-height: 1;
			margin: 0 25px;
			position: relative;

			>a {
				display: inline-block;
				font-size: 17px;
				text-transform: capitalize;
				line-height: 1;
				padding: 35px 0;
				overflow: hidden;	
				color: #777;			
			}

			&:hover {				

				>ul {
					opacity: 1;
					visibility: visible;
					transform: translateY(0);
				}
			}

			>ul {
				position: absolute;
				top: 100%;
				width: 235px;
				background-color: #171717;
				left: 0;
				z-index: 999;
				box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
				visibility: hidden;
				opacity: 0;
				transform: translateY(40px);
				transition: all .5s ease-in-out;
				padding: 10px 0px;

				li {
					display: block;
					margin-right: 0;
					margin-left: 0;

					a {
						display: block;
						color: rgba(255,255,255,.7) !important;
						padding: 12px 25px;
						font-size: 12px;
						text-transform: uppercase;
						letter-spacing: 2px;
						
						&:hover {
							color: #fff !important;
						}

						i {
							transform: rotate(-45deg);
							font-size: 15px;
							position: absolute;
							right: 20px;
							bottom: 11px;
							transition: .3s;							
						}
						&:hover i {
							transform: rotate(0);
						}
					}
				}

				ul {
					left: 100%;
					top: 0;
				}
			}
		}
	}
}

.main-menu ul li {
	position: relative;
	a.navlink{
		&:before {
			position: absolute;
			content: "";
			bottom: 30px;
			left: 0;
			width: 0%;
			height: 1px;
			background: #171717;
			visibility: hidden;
			opacity: 0;
			transition: all 0.5s ease 0s;
		}
		&:hover:before {
			visibility: visible;
			opacity: 1;
			width: 100%;
		}		
	}
}

.main-menu ul li.active {
    position: relative;
}

.main-menu ul li.active a {
    color: #171717;;
}

.main-menu ul li.active:before {
    position: absolute;
    content: "";
    bottom: 30px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #171717;
}



// Mobile Nav

.mobile-nav {
	position: fixed;
	right: -380px;
	top: 0;
	width: 320px;
	height: 100vh;
	scroll-behavior: smooth;
	overflow-y: scroll;
	transition: right .5s ease-in;
	background-color: $primary_color;
	padding: 20px;
	z-index: 9999;
	box-shadow: 0 13px 35px -12px rgba(35, 35, 35, .15);

	&.show {
		right: 0px;
	}

	.close-nav {
		border: 0;
		background: transparent;
		color: #fff;
		border-radius: 30px;
		font-size: 30px;
		position: absolute;
		left: 20px;
		top: 10px;
	}

	/* Vertical Menu Style */
	.sidebar-nav {
		margin-top: 60px;
	}

	.sidebar-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		background-color: transparent
	}

	.sidebar-nav .metismenu {
		display: flex;
		flex-direction: column;
	}

	.sidebar-nav .metismenu>li {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.sidebar-nav .metismenu a {
		position: relative;
		display: block;
		padding: 10px 15px;
		transition: all .3s ease-out;
		text-decoration: none;
		color: rgba(255,255,255,.7);
		outline-width: 0;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 2px;
		border-bottom: 1px solid #333;
	}

	.sidebar-nav .metismenu ul li {
		display: block;
	}

	.sidebar-nav .metismenu ul a {
		padding: 10px 15px 10px 35px;
		position: relative;

		&:hover {
			padding-left: 40px;

			&::before {
				background-color: #fff;
			}
		}

		&::before {
			position: absolute;
			left: 15px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			border: 2px solid #fff;
			content: "";
			top: 50%;
			transition: all .3s ease-in-out;
			transform: translateY(-50%);
		}
	}

	.sidebar-nav .metismenu ul ul {
		list-style-type: circle !important;
	}

	.sidebar-nav .metismenu ul ul a {
		padding: 10px 15px 10px 45px;
	}

	.sidebar-nav .metismenu a:hover,
	.sidebar-nav .metismenu a:focus,
	.sidebar-nav .metismenu a:active {
		text-decoration: none;
		color: #f8f9fa;
		background: $primary_color;
	}

}

.header-area .container {
	background: #fff;
}

.header-area.absolute-header .container {
	background: transparent;
}

#hamburger {
	color: #171717;
	font-size: 32px;
	line-height: 1;
	text-align: right;
	display: none;

	i {
		cursor: pointer;
	}

	@media (max-width: 1199px) {
		display: block;
	}
}

.header-area.absolute-header #hamburger{
	color: #fff;
}


.action-bar {
	margin-top: 60px;
	padding-left: 20px;
  }
  .action-bar a {
	color: #fff;
	display: block;
	margin-top: 12px;
	font-size: 15px;
  }
  .action-bar a i {
	margin-right: 10px;
  }

  .action-bar .theme-btn {
    margin-top: 30px;
    display: inline-block;
}

// Header Right 

.header-right {
    display: flex;
    align-items: center;
	border-left: 1px solid #eee;
	height: 90px;
	padding-left: 30px;
	@media #{$md}{		
		border-left: none;
	}
	@media #{$xs}{
		padding-left: 0;
		border-left: none;
	}
}

.header-right .search-trigger i {
    font-size: 18px;
    margin-right: 40px;
	position: relative;
	top: 2px;
	&:hover{
		cursor: pointer;
	}

	@media #{$xs}, #{$md} {        
        display: none;
    } 

}

.absolute-header .header-right .search-trigger i{
	color: #fff;
}


// Header # 03


.header-area.absolute-header {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99;
	-webkit-transition: .3s;
	transition: .3s;
}

.header-area.absolute-header {
	.navigation {
		background: inherit;
	}
}

.header-area.absolute-header .logo {
	color: #fff;
}

.header-area.absolute-header .main-menu ul > li > a{
	color: #fff;
}

.header-area.absolute-header .main-menu ul li a:before{
	background: #fff;
}

.header-area.absolute-header .main-menu ul li.active:before{
	background: #fff;
}


// Header # 03

.header-area.absolute-header {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99;
	-webkit-transition: .3s;
	transition: .3s;
}

.header-area.absolute-header .logo {
	color: #fff;
}

// Header # 04

.header-area.header-four.absolute-header {
    top: 45px;
	@media #{$md} {        
		top: 0;
	}
	@media #{$xs} {        
		top: 0;
	}
}

