/*********************************
/* Header Start
*********************************/
.header {
    position: fixed;
    z-index: 99;
    width: 100%;
}

// Main Header
.main__header {
	position: relative;
	background-color: transparent;
	z-index: 999;
	width: 100%;
	height: 72px;
	transition: $transition;

	@include respond (tabport) {
		height: 56px;
	}

	.nav {
		background-color: transparent;
		padding: 0px;
		margin: 0 auto;
		height: 100%;
	}

	.header {
		&__wrapper {
			@include flexbox($a: center, $jc: space-between);
			border-bottom: 1px solid rgba($border, 0.8);
			height: 100%;
	
			.header {
				&__logo {
					img {
						width: auto;
						height: auto;
						display: block;
						max-width: 150px;
	
						@include respond(phone-xm) {
							width: 120px;
						}
					}
				}
				&__menu {
					// @include respond(tabland) {
					// 	display: none;
					// }
					&.mblMenu__open {
						transform: scaleY(1);
					}
					@include respond(tabland) {
						position: fixed;
						width: 100%;
						// height: 100vh;
						overflow: auto;
						padding: 100px 0;
						background: $bg;
						left: 0;
						// top: 0;
						top: 72px;
						z-index: -1;
						transform-origin: top;
						transform: scaleY(0);
						transition: $transition;
						box-shadow: 0px 10px 20px #5656560f;
					}

					@include respond (tabport) {
						top: 56px;
					}
					.main__menu {
						@include flexbox($a: center, $jc: inherit);
						gap: 48px;
	
						@include respond (medium) {
							gap: 22px;
						}
						@include respond (tabland) {
							flex-direction: column;
						}

						li {
							position: relative;
							list-style: none;
	
							a {
								font-family: $default;
								font-size: 16px;
								line-height: 72px;
								font-weight: $medium;
								letter-spacing: 0.5px;
								color: #C6CFE2;
								display: inline-block;
								padding: 0;
								text-transform: capitalize;
								transition: $transition;
								position: relative;

								@include respond (tabland) {
									line-height: 22px;
								}
	
								&:hover,
								&.active {
									color: $primary;
								}
							}
							&:hover,
							&.active {
								a {
									color: $primary;
	
									&::after {
										color: $primary;
									}
								}
							}
							&:last-child a {
								margin-right: 0;
							}
						}
					}
				}
			}
		}
		&__meta {
			@include flexbox($a: center, $jc: inherit);
			flex-wrap: nowrap;
			gap: 16px;
	
			.meta__list {
				@include flexbox($a: center, $jc: inherit);
				gap: 16px;
				list-style: none;
	
				@include respond(tabland) {
					display: none;
				}

				.btn {
					padding: 8px 24px;
				}
			}
	
		}
	}
}

// Header Toggle bar
.header__toggle {
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	display: none;
	transition: $transition;

	svg {
		path {
			fill: $white;
		}
	}

	@include respond(tabland) {
		display: flex;
	}
}

/* language Dropdown list Start */

.language__dropdown {
	font-family: $default;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0.16px;
	color: $heading;
	font-weight: $semibold;
	background-color: transparent;
	border: none;
	display: block;
	width: 100px;
	cursor: pointer;
	position: relative;
	// filter: brightness(0) invert(1);

	.selected {
		position: relative;
		width: 100%;

		&::after {
			content: "\f078";
			position: absolute;
			top: 0;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
			font-family: "Font Awesome 5 Free";
			font-size: 12px;
			font-weight: 900;
		  }
	  }
	  .list {
		list-style: none;
		position: absolute;
		right: 0;
		top: 30px;
		padding: 15px 0;
		min-width: 160px;
		background: #353349;
		border-radius: 8px;
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		transition: all 100ms ease-in-out;
		box-shadow: 0px 10px 10px #4949493b;
		max-height: 280px;
		overflow: auto;

		&.active {
			opacity: 1;
			visibility: visible;
		  }

		li a {
			font-size: 16px;
			line-height: 22px;
			letter-spacing: 0.16px;
			color: $heading;
			font-weight: 500;
			padding: 5px 20px;
			transition: all 300ms ease-in-out;
			display: block;

			&:hover {
				color: $primary;
			  }
		  }
	  }
}

  
/* language Dropdown list Start */


.nav-bg {
	background: $bg;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: $transition;

}
/*********************************
/* Header End
*********************************/

