/*********************************
/* Header Start
*********************************/
.header {
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	background: rgba(var(--color-black), 0.8);
	transition: var(--transition);

	&__left {
		display: flex;
		align-items: center;
		gap: 40px;
	}

	&__wrapper {
		@include flexbox($a: center, $jc: space-between);
		position: relative;
		transition: all 200ms ease-in-out;

		.header {
			&__logo {
				max-width: 92px;
				img {
					width: auto;
					height: auto;
					display: block;
				}
			}
			&__menu {
				@include respond(tabland) {
					display: none;
				}
				.main__menu {
					@include flexbox($a: center, $jc: inherit);

					li {
						position: relative;
						list-style: none;

						&.has__dropdown {
							a {
								position: relative;

								&::after {
									content: "\ea4e";
									font-family: "remixicon";
									font-size: 20px;
									color: var(--color-white);
									margin-left: 8px;
									transition: var(--transition);
								}
							}
						}

						a {
							font-family: var(--font-default);
							font-size: 16px;
							font-weight: var(--font-regular);
							color: var(--color-white);
							display: inline-flex;
							align-items: center;
							margin-right: 14px;
							line-height: 75px;
							padding: 0;
							text-transform: capitalize;
							transition: var(--transition);
							position: relative;

							span {
								font-size: 10px;
								font-weight: var(--font-regular);
								line-height: 11.72px;
								color: var(--color-white);
								background: var(--color-primary);
								border-radius: 30px;
								padding: 2px 8px;
								margin-left: 4px;
							}

							&:hover,
							&.active {
								color: var(--color-primary);
							}
						}
						&:hover,
						&.active {
							a {
								color: var(--color-primary);

								&::after {
									color: var(--color-primary);
								}
							}
						}
						&:last-child a {
							margin-right: 0;
						}
						.sub__menu {
							position: absolute;
							left: 0;
							top: 110%;
							width: 220px;
							background: var(--color-white);
							box-shadow: 0 2px 29px rgba(0, 0, 0, 0.05);
							padding: 10px 0;
							border-radius: 5px;
							opacity: 0;
							z-index: 99;
							visibility: hidden;
							transition: var(--transition);

							li {
								a {
									padding: 7px 25px;
									font-size: 14px;
									line-height: 25px;
									font-family: var(--font-default);
									font-weight: var(--font-semibold);
									color: var(--color-heading);
									width: 100%;
									display: block;
									position: relative;
									z-index: 1;
									text-transform: uppercase;

									&::after {
										display: none;
									}
									&:hover,
									&.active {
										letter-spacing: 1px;
										color: var(--color-primary);
									}
								}
								&:last-child a {
									border: none;
								}
							}
						}
						&:hover {
							.sub__menu {
								opacity: 1;
								visibility: visible;
								top: 100%;
							}
						}
					}
				}
			}
		}
	}
	&__meta {
		@include flexbox($a: center, $jc: inherit);
		flex-wrap: nowrap;
		gap: 14px;


		.header__btn {
			display: flex;
			align-items: center;
			gap: 10px;
			@include respond(phone-sm) {
				display: none;
			}
		}

		.header__toggle {
			height: 50px;
			width: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2px solid var(--color-primary);
			border-radius: 4px;
			cursor: pointer;
			display: none;
			transition: var(--transition);

			@include respond(tabland) {
				display: flex;
				width: 60px;
			}
			@include respond(phone-sm) {
				height: 40px;
				width: 50px;
			}

			&:hover {
				background: var(--color-primary);

				.toggle__bar {
					background: var(--color-white);

					&::after,
					&::before {
						background: var(--color-white);
					}
				}
			}

			.toggle__bar {
				height: 2px;
				width: 25px;
				background: var(--color-primary);
				position: relative;
				transition: var(--transition);

				&::after,
				&::before {
					content: "";
					position: absolute;
					top: -8px;
					height: 2px;
					width: 100%;
					background: var(--color-primary);
					transition: var(--transition);
				}

				&::after {
					top: auto;
					bottom: -8px;
				}
			}
		}
	}
}
.nav-bg {
	background: var(--color-white);
	box-shadow: 0 22px 20px rgba(0, 0, 0, 0.05);
	// transition: var(--transition);

	.header__wrapper {
		top: 0;
	}
}

/*********************************
/* Search Form Start
*********************************/
.header__search {
	position: relative;
	max-width: 227px;
	width: 100%;	

	.form-control {
		font-family: var(--font-default);
		font-size: 16px;
		padding: 8px 4px 8px 46px;
		// padding: 8px 16px 8px 46px;
		line-height: 18.75px;
		font-weight: var(--font-regular);
		color: var(--color-white);
		background: transparent;
		border: 1px solid rgba(var(--color-white-rgb), 0.2);
		outline: none;
		border-radius: 8px;
		transition: var(--transition);
		position: relative;
		appearance: none;

		&:focus {
			box-shadow: none;
			border-color: var(--color-primary);
		}
		&::placeholder {
			color: var(--color-white);
		}
	}
	button {
		position: absolute;
		left: 0;
		top: 0;
		background: transparent;
		outline: none;
		border: none;
		color: var(--color-white);
		height: 100%;
		width: 46px;
		cursor: pointer;
		border-radius: 8px 0 0 8px;
		z-index: 0;
	}
}


.language__dropdown {
	position: relative;

	.list {
		&.active {
			opacity: 1;
			visibility: visible;
			top: 130%;
		}
	}

	.selected__item {
		font-family: var(--font-default);
		font-size: 16px;
		font-weight: var(--font-regular);
		line-height: 25px;
		text-transform: uppercase;
		color: var(--color-white);
		display: flex;
		align-items: center;
		gap: 7px;
		cursor: pointer;
		position: relative;

		i {
			font-size: 19px;
			color: rgba(var(--color-white-rgb), 0.5);
		}

		&::after {
			content: "\ea4e";
			font-family: "remixicon";
			font-size: 25px;
			color: var(--color-white);
			margin-left: 4px;
			transition: var(--transition);
		}

	}
	.list {
		position: absolute;
		list-style: none;
		position: absolute;
		right: 0;
		top: 150%;
		min-width: 110px;
		background: var(--color-white);
		border-radius: 4px;
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		transition: var(--transition);
		box-shadow: -24px 24px 72px 17px rgba(145, 158, 171, 0.24);
		max-height: 160px;
		overflow-y: auto;

		// &::after {
		// 	content: "";
		// 	position: absolute;
		// 	top: -6px;
		// 	right: 5px;
		// 	height: 14px;
		// 	width: 14px;
		// 	background: red;
		// 	border-radius: 3px;
		// 	transform: rotate(45deg);
		// }

		li {
			font-family: var(--font-default);
			font-size: 16px;
			font-weight: var(--font-regular);
			line-height: 18.75px;
			color: var(--color-content2);
			padding: 10px 20px;
			border-bottom: 1px solid var(--color-border);
			cursor: pointer;
			transition: var(--transition);

			&:last-of-type {
				border: none;
			}

			&:hover {
				color: var(--color-primary);
			}
		}
	}
}


/*********************************
/* FlyOut Menu Start
*********************************/
.flyoutMenu {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);

	&.active {
		opacity: 1;
		visibility: visible;
		right: 0;

		.flyout__flip {
			left: 0;
			opacity: 1;
			visibility: visible;
		}
	}
	.flyout {
		&__flip {
			@include flexbox($a: inherit, $jc: space-between);
			flex-direction: column;
			flex-wrap: nowrap;
			position: absolute;
			top: 0;
			left: -200px;
			// right: 0;
			background: var(--color-white);
			width: 360px;
			height: 100%;
			box-shadow: 0px 14px 40px 0px #73737326;
			padding: 0px 25px;
			z-index: 99999;
			overflow-y: auto;
			opacity: 0;
			visibility: hidden;
			transition: var(--transition);

			@include respond(phone-sm) {
				width: 370px;
			}
			@include respond(phone-xm) {
				width: 310px;
			}
		}
		&__inner {
			.menu__header-top {
				@include flexbox($a: center, $jc: space-between);
				padding: 15px 0 9px;

				.closest__btn {
					cursor: pointer;
					color: var(--color-heading);
					font-size: 25px;
					height: 40px;
					width: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.brand__logo {
					// max-width: 150px;

					a {
						font-family: var(--font-default);
						font-size: 32px;
						font-weight: var(--font-bold);
						color: var(--color-heading);
						padding-left: 5px;

						span {
							color: var(--color-primary);
						}
					}
				}
			}
		}
		&-main__menu {
			margin-top: 16px;
			li {
				position: relative;
				list-style: none;
				padding: 10px 0;
				border-bottom: 1px solid var(--color-border);

				a {
					font-family: var(--font-default);
					font-size: 16px;
					font-weight: var(--font-semibold);
					color: var(--color-heading);
					display: block;
					line-height: 24px;
					padding: 0px;
					text-transform: capitalize;
					transition: var(--transition);
					position: relative;
					&:hover,
					&.active {
						color: var(--color-primary);
						&::after {
							color: var(--color-primary) !important;
						}
					}
				}
				&:last-child a {
					margin-right: 0;
				}
				&.has__dropdown {
					.nav__link {
						&::after {
							content: "\f078";
							font-family: "Font Awesome 5 Free";
							font-weight: 900;
							font-size: 11px;
							color: var(--color-heading);
							transition: var(--transition);
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
				.sub-menu,
				.sub__menu {
					position: relative;
					background: var(--color-border);
					z-index: 99;
					padding: 10px 0 10px 16px;
					margin-top: 8px;
					display: none;

					li {
						padding: 0;
						border: none;

						a {
							font-family: var(--font-default);
							padding: 7px 0;
							font-size: 15px;
							line-height: 20px;
							font-weight: var(--font-semibold);
							color: var(--color-heading);
							width: 100%;
							display: block;
							position: relative;
							z-index: 1;

							&:hover {
								color: var(--color-primary);
							}
						}
					}
				}
			}
		}
	}
}
/*********************************
/* FlyOut Menu End
*********************************/