.parent-menu {
	position: relative;
	z-index: 999 !important;
	> a {
		align-items: center;
		&::after {
			content: "\f107";
			font-weight: 700;
			font-family: "Font Awesome 5 Free";
			margin-left: 5px;
			@include transition($transition);
			display: inline-block;
			@include breakpoint(max-lg) {
				margin-left: auto;
			}
		}
	}
	&:hover,
	&.open {
		> a {
			&::after {
				@include transform(rotate(-180deg));
			}
		}
	}
	@include breakpoint(lg) {
		&.open {
			.submenu {
				display: block !important;
			}
		}
		.submenu {
			display: block !important;
		}
	}
}
.nav-toggle {
	position: relative;
	cursor: pointer;
	width: 25px;
	height: 20px;
	span {
		position: absolute;
		display: inline-block;
		height: 3px;
		width: 100%;
		@include transition($transition);
		background: $title;
		left: 0;
		&:first-child {
			top: 0;
		}
		&:nth-child(2) {
			top: 52%;
			transform: translateY(-65%);
		}
		&:last-child {
			bottom: 0;
		}
	}
	&.active {
		span {
			&:first-child {
				@include transform(rotate(45deg) translate(3px, 9px));
			}
			&:nth-child(2) {
				opacity: 0;
			}
			&:last-child {
				@include transform(rotate(-45deg) translate(3px, -9px));
			}
		}
	}
}
.navbar-top {
	position: relative;
	z-index: 999;
	padding-top: 5px;
	padding-bottom: 5px;
	@include breakpoint(max-md) {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
.social-icons {
	@extend %flex;
	justify-content: center;
	margin: -3px;
	li {
		padding: 3px;
		a {
			i {
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				@include border-radius(3px);
				border: 1px solid rgba($white, 0.1);
				color: $white;
				@include transition($transition);
				&:hover {
					background: $base;
					color: $white;
				}
				&[class*="facebook"] {
					&:hover {
						background: $facebook;
					}
				}
				&[class*="whatsapp"] {
					&:hover {
						background: $whatsapp;
					}
				}
				&[class*="twitter"] {
					&:hover {
						background: $twitter;
					}
				}
				&[class*="linkedin"] {
					&:hover {
						background: $linkedin;
					}
				}
				&[class*="instagram"] {
					&:hover {
						background: $instagram;
					}
				}
				&[class*="google"] {
					&:hover {
						background: $google;
					}
				}
				&[class*="youtube"] {
					&:hover {
						background: $youtube;
					}
				}
				&[class*="camera"] {
					&:hover {
						background: $camera;
					}
				}
				&[class*="pinterest"] {
					&:hover {
						background: $pinterest;
					}
				}
				&[class*="tumblr"] {
					&:hover {
						background: $tumblr;
					}
				}
				&[class*="behance"] {
					&:hover {
						background: $behance;
					}
				}
				&[class*="skype"] {
					&:hover {
						background: $skype;
					}
				}
				&[class*="vimeo"] {
					&:hover {
						background: $vimeo;
					}
				}
			}
		}
	}
}
.contact-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	@include breakpoint(max-md) {
		justify-content: center;
	}
	li {
		a {
			color: $white;
		}
		&:not(:last-child) {
			border-right: 1px solid rgba($white, 0.1);
			a {
				padding: 0 10px;
				font-size: 14px;
			}
		}
		&:nth-last-child(2) {
			border: none;
		}
	}
}
.navbar-bottom {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
	border-bottom: 1px solid transparent;
	background: $body-bg;
	&.active {
		box-shadow: 0 0 5px rgba($base, 0.2);
	}
}
.navbar-wrapper {
	padding: 15px 0;
	.logo {
		max-width: 190px;
		@include breakpoint(max-sm) {
			max-width: 130px;
		}
		a {
			display: block;
		}
		img {
			width: 100%;
		}
	}
}
.change-language {
	display: flex;
	align-items: center;
	font-size: 14px;
	span {
		color: $base;
		margin-right: 2px;
	}
	a {
		color: $white;
		&:not(:last-child) {
			&::after {
				content: "/";
				display: inline-block;
				margin: 0 5px;
				color: $white;
			}
		}
	}
	.language-bar {
		height: 32px;
		padding-left: 5px;
		border: 1px solid rgba($white, 0.1);
		border-radius: 4px;
		margin-left: 15px;
		outline: none;
		background: transparent;
		color: $white;
		option {
			color: $title;
			background: $section-bg;
		}
		&:focus {
			box-shadow: none;
		}
	}
	display: flex;
	align-items: center;
	@media screen and (max-width: 375px) {
		font-size: 12px;
		font-family: $heading;
		.language-bar {
			margin-left: 5px;
		}
	}
	&.text--title {
		.language-bar {
			color: $title;
			border-color: $border-color;
		}
	}
}
/*Nav Menu*/
.navbar-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.nav-menu {
	@include breakpoint(lg) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		li {
			a:not([class*="btn"]) {
				color: $title;
				font-family: $heading;
				text-transform: capitalize;
				padding: 5px 15px;
				font-weight: 600;
			}
			.cmn--btn {
				padding: 5px 10px;
				@include border-radius(5px);
			}
			.sub-nav {
				min-width: 220px;
				position: absolute;
				left: 0;
				top: 100%;
				border-bottom: 3px solid $base;
				@include border-radius(5px);
				background: $white;
				@include transition($transition);
				box-shadow: 0 0 5px rgba($base, 0.3);
				li {
					a {
						padding: 5px 15px;
						font-size: 14px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						&:hover {
							padding-left: 20px;
							background: $base;
							color: $white;
						}
					}
					&:not(:last-child) {
						> a {
							border-bottom: 1px solid $border-color;
						}
					}
				}
				.sub-nav {
					left: 100%;
					top: 0;
				}
			}
			&:not(:hover) {
				.sub-nav {
					@include transform(translateY(10px));
					opacity: 0;
					visibility: hidden;
				}
			}
			&:nth-last-of-type(1),
			&:nth-last-of-type(2),
			&:nth-last-of-type(3) {
				.sub-nav {
					left: unset;
					right: 0;
					.sub-nav {
						right: 100%;
					}
				}
			}
		}
	}
}
/*Nav Mobile Menu*/
@include breakpoint(max-lg) {
	.nav-menu-area {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		max-width: 320px;
		background: $title;
		padding: 30px 20px;
		overflow-y: auto;
		@include transition($transition);
		transform-origin: left;
		.menu-close {
			position: absolute;
			right: 30px;
			top: 20px;
			font-size: 20px;
		}
		&:not(.active) {
			@include transform(scaleX(0));
		}
		.nav-menu {
			li {
				a {
					color: $white;
					display: flex;
					justify-content: space-between;
					padding: 5px 0;
					border-bottom: 1px solid rgba($white, 0.1);
					&.cmn--btn {
						background: $white;
						color: $base;
						display: inline-flex;
						padding: 5px 15px;
						margin-top: 15px;
					}
				}
			}
			.sub-nav {
				padding-left: 15px;
				display: none;
				font-size: 14px;
			}
		}
	}
}