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

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

	&__wrapper {
		@include flexbox($a: center, $jc: space-between);
		height: 100%;

		@include respond (medium) {
			padding: 10px 0;
		}

		.header {
			&__logo {
				img {
					width: auto;
					height: 32px;
					display: block;

					@include respond (xl) {
						height: 28px;
					}
				}
			}
			&__menu {
				@include respond(medium) {
					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: rgba(var(--color-white-rgb), 0.3);
								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: 130%;
							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);
							pointer-events: none;

							&::after {
								content: "";
								position: absolute;
								top: -5px;
								left: 17px;
								height: 14px;
								width: 14px;
								border-radius: 2px;
								background: var(--color-white);
								transform: rotate(45deg);
							}

							li {
								a {
									padding: 7px 25px;
									font-size: 16px;
									line-height: 18.75px;
									font-family: var(--font-default);
									font-weight: var(--font-regular);
									color: var(--color-content2);
									width: 100%;
									display: block;
									position: relative;
									z-index: 1;
									text-transform: capitalize;
									margin-right: 0;padding: 0;
									margin-bottom: 16px;

									&::after {
										display: none;
									}
									&:hover,
									&.active {
										// letter-spacing: 1px;
										color: var(--color-primary);
									}
								}
								&:last-child a {
									border: none;
									margin-bottom: 0;
								}
							}
							&.mega__menu {
								max-width: 880px;
								min-width: 880px;
								width: 100% !important;
								// left: 50% !important;
								// transform: translateX(-50%);
								// border: 1px solid var(--color-primary);
								padding: 0px;

								a {
									margin-right: 0;
								}

								.mega__menu-wrapper {
									display: flex;
									align-items: flex-start;
									.inner__wrapper {
										flex: 1;
										border-right: 1px solid var(--color-border);
										padding: 24px 24px 30px;

										&:first-of-type {
											max-width: 272px;
											min-width: 272px;
										}

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

										.inner__grid {
											display: grid;
											grid-template-columns: repeat(2, 1fr);
											gap: 20px;

											ul {
												border-right: 1px dashed var(--color-border);

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

								.title {
									font-weight: var(--font-semibold);
									margin-right: 0;
									color: var(--color-black);
									position: relative;
									line-height: 18px;
									padding-bottom: 16px;
									margin-bottom: 12px;
									display: inline-block;

									&::before {
										content: "";
										position: absolute;
										left: 0;
										bottom: 0;
										width: 100%;
										border: 1px solid var(--color-border);
									}
								}
								
								a {
									padding-left: 0;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
									&::after {
										display: none;
									}
								}
								.btn {
									font-size: 12px;
									line-height: 14px;
									color: #a4a4a4;
									background: var(--color-border);
									border-color: var(--color-border);
									padding: 5px 16px;
									border-radius: 4px;
									width: 73px;

									&:hover {
										background: var(--color-primary);
										border-color: var(--color-primary);
										color: var(--color-white);
									}
								}
								
								.slider__width {
									width: calc(100% - 272px);

									.video__card .video__thumb img {
										aspect-ratio: 1.64/1.77;
										object-fit: cover;
										object-position: top;
									}
								}
								
							}
						}
						&:hover {
							.sub__menu {
								opacity: 1;
								visibility: visible;
								top: 100%;
								pointer-events: auto;
							}
						}
					}
				}
			}
		}
	}
	&__meta {
		@include flexbox($a: center, $jc: inherit);
		flex-wrap: nowrap;
		gap: 15px;

		.flex__wrap {
			display: flex;
			align-items: center;
			gap: 30px;

			@include respond (xl) {
				gap: 20px;
			}
		}
		.header__btn {
			.btn {
				white-space: nowrap;
				background: var(--color-white);
				border-color: var(--color-white);
				color: var(--color-content2);

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




.mega__slider {
	background:#F1F1F1;
	padding: 24px;
	// width: 100%;

	.swiper__navigation {
		.swiper-button-next,
		.swiper-button-prev {
			font-size: 20px;
			height: 36px;
			width: 36px;
			background: var(--color-white);
			color: var(--color-content);

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

}
/**************************************/
/* language Dropdown list Start */
/**************************************/
.dropdown__btn {
	position: relative;
}
.language__dropdown {
	position: relative;
	width: 72px;

	&::after {
		content: "";
		position: absolute;
		right: -15px;
		height: 100%;
		width: 1px;
		background: rgba(var(--color-white-rgb), 0.2);
		top: 50%;
		transform: translateY(-50%);

		@include respond (xl) {
			right: -10px;
		}
	}

	.selected {
		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;
		width: 100%;

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

		&::after {
			content: "\ea4e";
			font-family: "remixicon";
			font-size: 22px;
			position: absolute;
			top: 0;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			font-weight: var(--font-regular);
		}
	}
}  
/**************************************/
/* language Dropdown list End */
/**************************************/

/**************************************/
/* Profile Avatar Start */
/**************************************/
.user__profile{
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;

	.profile__content {
		display: block;
		@include respond (phone) {
			display: none;
		}
		.name {
			font-family: var(--font-default);
			font-size: 16px;
			line-height: 19px;
			margin-bottom: 0px;
			color: var(--color-white);
			white-space: nowrap;
			font-weight: var(--font-regular);
		}
		.txt {
			font-size: 12px;
			line-height: 15px;
		}
	}
	.profile__avatar {
		cursor: pointer;
		img {
			height: 35px;
			width: 35px;
			// border: 1px solid rgba(var(--color-white-rgb), 0.5);
			border: 1px solid var(--color-primary);
			border-radius: 50%;
		}
	}
}
.user__list.dropdown__list {
	width: 193px;
	max-height: 210px;
	border-bottom: 1px solid var(--color-primary);

	li a {
		padding-left: 12px;

		&:hover {
			background: var(--color-black);
			color: var(--color-white);
			border-color: var(--color-black);

			.icon {
				svg path {
					fill: var(--color-white);
				}
			}
		}
	}
}
/**************************************/
/* Profile Avatar End */
/**************************************/

/**************************************/
/* Dropdown List Start */
/**************************************/
.dropdown__list {
	position: absolute;
	list-style: none;
	position: absolute;
	right: 0;
	top: 170%;
	min-width: 110px;
	width: 100%;
	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;

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


	li {
		a {
			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;
			display: flex;
			align-items: center;
			gap: 10px;
			transition: var(--transition);

			.icon {
				svg path {
					fill: #a4a4a4;
					transition: var(--transition);
				}
			}

			
			&:hover {
				color: var(--color-primary);
			}
		}
		&:last-of-type a {
			border: none;
		}
	}
}


/**************************************/
/* Dropdown List End */
/**************************************/

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

	.form-control {
		font-family: var(--font-default);
		font-size: 14px;
		padding: 10px 6px 10px 42px;
		// padding: 8px 4px 8px 46px;
		// padding: 8px 16px 8px 46px;
		line-height: 18px;
		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: rgba(var(--color-white-rgb), 0.7);
		}
	}
	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: 1;
	}
}


// Header Toggle bar

.header__toggle {
	height: 39px;
	min-width: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(var(--color-white-rgb), 0.2);
	background: transparent;
	color: var(--color-white);
	font-size: 26px;
	border-radius: 4px;
	cursor: pointer;
	display: none;
	transition: var(--transition);

	@include respond(medium) {
		display: flex;
	}
	@include respond(phone) {
		height: 35px;
		min-width: 40px;
	}
	.bar {
		width: 25px;
		height: 2px;
		background: var(--color-primary);
		position: relative;
		// transition: var(--transition);

		@include respond(phone) {
			width: 22px;
		}

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

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

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

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

.nav-bg {
	background:var(--color-black);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	transition: var(--transition);

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




/*********************************
/* FlyOut Menu Start
*********************************/
.flyoutMenu {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	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;
			background: var(--color-heading);
			width: 360px;
			height: 100%;
			box-shadow: 0px 14px 40px 0px #73737326;
			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;
				border-bottom: 1px solid #21293d;
				// border-bottom: 1px solid #343434;

				.closest__btn {
					cursor: pointer;
					color: var(--color-white);
					font-size: 25px;
					height: 40px;
					width: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.brand__logo {
					max-width: 120px;
				}
			}
		}
		&__menu {
			padding: 0 20px;
			margin-top: 16px;

			.header__search .form-control {
				padding: 12px 4px 12px 46px;
			}
		}
		&-main__menu {
			margin-top: 5px;
			li {
				position: relative;
				list-style: none;
				padding: 10px 0px;
				border-bottom: 1px solid #21293d;
				// border-bottom: 1px solid #343434;

				a {
					font-family: var(--font-default);
					font-size: 16px;
					font-weight: var(--font-medium);
					color: var(--color-white);
					display: flex;
					align-items: center;
					gap: 4px;
					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;
						}
					}

					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;
					}
				}
				&:last-child a {
					margin-right: 0;
				}
				&.has__dropdown {
					.nav__link {
						&::after {
							content: "\ea4e";
							font-family: "remixicon";
							font-size: 20px;
							font-weight: 400;
							color: var(--color-white);
							transition: var(--transition);
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
				.sub-menu,
				.sub__menu {
					position: relative;
					background: rgba(var(--color-white-rgb), 0.1);
					z-index: 99;
					padding: 10px 0 10px 16px;
					margin-top: 14px;
					display: none;
					border-radius: 8px;

					li {
						padding: 0;
						border: none;

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

							&:hover {
								color: var(--color-primary);
							}
						}
						
					}
					&.mega__sub {
						background-color: var(--color-white);
						padding: 0;

						.inner__wrapper {
							padding: 16px;
							&:nth-of-type(even) {
								background: #f7f7f7;
								border-radius: 0 0 8px 8px;
							}
						}

						.title {
							font-weight: var(--font-semibold);
							margin-right: 0;
							color: var(--color-black);
							position: relative;
							line-height: 18px;
							padding-bottom: 16px;
							margin-bottom: 12px;
							display: inline-block;

							&::before {
								content: "";
								position: absolute;
								left: 0;
								bottom: 0;
								width: 100%;
								border: 1px solid var(--color-border);
							}

							
						}

						a {
							font-weight: var(--font-regular);
							color: var(--color-content2);
						}
						.btn {
							font-size: 12px;
							line-height: 14px;
							color: #a4a4a4;
							background: var(--color-border);
							border-color: var(--color-border);
							padding: 5px 16px !important;
							border-radius: 4px;
							width: 73px;

							&:hover {
								background: var(--color-primary);
								border-color: var(--color-primary);
								color: var(--color-white);
							}
						}
						.inner__grid {
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							gap: 20px;

							a {
								padding: 0;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								margin-bottom: 14px;

								&:last-of-type {
									// margin-bottom: 0;
								}
							}
						}
						.mega__slider {
							padding: 16px !important;
						}
					}
				}
			}
		}
		&__btn {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin: 20px 0px;

			.btn {
				padding: 10px 16px;
				border-radius: 6px;

				&-outline {
					color: var(--color-white);

					&:focus,
					&:hover {
						background: transparent;
						border-color: var(--color-primary);
						color: var(--color-white);
					}
				}
				&-primary {
					// padding: 9px 12px;
					// border-radius: 6px;
					font-weight: var(--font-medium);

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