/*----------------------------------------
	23. header css
----------------------------------------*/
@use "../abstract" as *;

// Transparent Header
.header-transparent {
	position: absolute;
	inset-inline-start: 0;
	margin: auto;
	width: 100%;
	z-index: 99;
}


// sticky menu style
.sticky {
	position: fixed !important;
	top: 0;
	background: var(--clr-common-white);
	z-index: 800;
	inset-inline-end: 0;
	inset-inline-start: 0;
	width: 100%;
	@include transition(.4s);
	@include box-shadow(0px 20px 30px rgba(3, 4, 28, 0.1));
	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	border: none;

	&.header__main {
		padding: 23px 0;

		@media #{$md,$sm,$xs} {
			padding: 10px 0;
		}
	}

	&.header-3-main {
		top: 0;
	}


	& .is-white {
		&.main-menu {
			ul {
				li {
					&.has-dropdown {
						&>.a {
							&::after {
								color: var(--clr-theme-1);
							}
						}
					}

					&.a {
						color: var(--clr-theme-1);
					}

				}
			}
		}
	}

	.meta-item-message-2 {
		.meta-item__text {
			p {
				font-size: 18px;
				font-weight: 400;
				color: var(--clr-theme-primary);
				margin-bottom: 0;
			}
		}
	}

	.header-2__logo .logo-white {
		display: none;
	}

	.header-2__logo .logo-dark {
		display: block;
	}
}

.header-2__main {
	&.sticky {
		border-bottom: 0;

		.has-black {
			svg {
				@include transition(.3s);
		
				* {
					fill: var(--clr-common-black);
					@include transition(.3s);
				}
		
				&:hover * {
					fill: var(--clr-theme-2)
				}
			}
		}
	}
}

// header style 
.header {
	&__main {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 23px 0;
		z-index: 100;

		@media #{$xxl,$xl,$lg} {
			padding: 20px 0;
		}

		@media #{$md,$sm,$xs} {
			padding: 10px 0;
		}

		&-content {
			&-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		&-right {
			display: flex;
			align-items: center;
			column-gap: 60px;

			@media #{$sm} {
				gap: 0 50px;
			}

			.main-menu {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				margin: 0 -50px;
			}

		}

		.container {
			max-width: 1790px;
		}
	}

	&__logo {
		width: 102px;

		img {
			width: 100%;
		}
	}
}

// header-2 style 
.header-2__logo .logo-dark {
	display: none;
}

.header-2 {
	&__main {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		border-bottom: 1px solid #414141;

		@media #{$xs} {
			padding: 17px 0;
		}

		.container {
			max-width: 1610px;
		}

		&-content {
			&-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		&-right {
			display: flex;
			align-items: center;
			gap: 57px;

			@media #{$xxl} {
				gap: 35px;
			}

			.message__now {
				margin-left: 10px;
			}
		}
	}

	&__logo {
		width: 102px;

		img {
			width: 100%;
		}
	}
}

// HEADER STYLE 4

.has-left-header {
	margin-left: 100px;

	@media #{$xxl,$xl,$lg,$md,$sm,$xs,$xxs} {
		margin-left: 0;
	}
}

.header-4__top {
	background: var(--clr-common-black);
	border-bottom: 1px solid #414141;
	padding: 15px 0;
	position: relative;
	z-index: 55;

	@media #{$larger,$xxl,$xl,$lg} {
		display: none;
	}

	.container {
		max-width: 1840px;
	}
}

.header-4__top-content-wrapper {
	display: flex;
	justify-content: space-between;
}

.header-4__top-right {
	display: inline-flex;
	gap: 20px 75px;
	align-items: center;
}

.header-side-innner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: 100%;
	position: relative;
	z-index: 9;

	@media #{$md,$sm,$xs} {
		flex-direction: row;
	}
}

.header-side {
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	z-index: 55;
	border-right: 1px solid #414141;
	padding: 40px 18px;
	background-color: var(--clr-theme-1);

	@media #{$xxl,$xl,$lg} {
		padding: 40px 10px;
	}

	@media #{$xs,$sm,$md} {
		height: 0;
		width: 100%;
		border-bottom: 1px solid #414141;
	}
}

.header-support {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	display: flex;
	gap: 25px;
	align-items: center;
	filter: brightness(9);

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

	h4 {
		a {
			color: var(--clr-common-white);
			font-size: 20px;
			font-weight: 700;

			&:hover {
				color: var(--clr-theme-2);
			}
		}
	}
}

// .header-5 style
.header-area-5 {
	padding: 23px 0;
	margin: 0 auto;

	@media #{$md} {
		padding: 18px 0;
	}

	@media #{$sm,$xs} {
		padding: 13px 0;
	}
}

.header-area-5 .container {
	max-width: 1600px;
}

.humbager-menu-text {
	position: relative;
	padding-right: 13px;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;

	@media #{$xxs} {
		font-size: 18px;
	}

	&:after {
		position: absolute;
		content: "";
		height: 7px;
		width: 7px;
		background: #14CF93;
		border-radius: 50%;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
}

.humbager-menu-text {
	&.mobile-menu-btn {
		&:hover {
			color: var(--clr-theme-2);

			&::after {
				background: #fff;
			}
		}
	}
}

// header layout top

.hheader-latout-top {
	position: absolute;
	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	top: 0px;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--clr-common-white);

	.container {
		max-width: 1640px;
	}

	&-content {
		&-wrapper {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.meta-item {
				display: flex;
				gap: 20px;
				align-items: center;

				&__icon {
					width: 40px;
					height: 40px;
					border: 1px solid #D9D9D9;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					font-size: 20px;
					color: #A5A5A5;
				}

				&__text {
					p {
						font-size: 16px;
						font-family: var(--tpl-ff-heading);
						color: #4F4F4F;
						margin-bottom: 0;
						font-weight: 600;

						a {
							&:hover {
								color: var(--clr-theme-2);
							}
						}
					}
				}
			}
		}
	}
}

.ax-header-latout-top {
	position: absolute;
	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	top: 0px;
	left: 0;
	right: 0;
	padding: 0px 0;
	z-index: 100;
	background: linear-gradient(89.95deg, #FBC343 0.03%, #F2994A 99.96%);
	z-index: 99;
}

// Header style 1
.header-main-area {
	position: absolute;
	width: 100%;
	z-index: 100;
	background-color: var(--clr-common-white);
}

.header-3-main-content-wrapper {
	&.is-black {
		&.has-bb {
			border-bottom: 1px solid #414141;

			@media #{$xs,$sm,$md,$lg} {
				padding-bottom: 15px;
			}
		}
	}
}

.header-main-area.is-black.has-border {
	padding-bottom: 0;
}

.header-main-area {

	@media #{$xs,$sm,$md,$lg} {
		padding: 10px 0;
		border-bottom: 1px solid #d9d9d9;

		&.is-black {
			border-bottom: 0;
		}
	}

}

.header-main-area {
	&.is-black {
		background: var(--clr-theme-1);
	}
}

.header-3-main {
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--clr-theme-1);

	@media #{$lg,$md,$sm,$xs} {
		padding: 10px 0;
	}

	@media #{$xs,$sm,$md} {
		top: 0;
	}

	.container {
		max-width: 1640px;
	}

	&-content {
		&-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;

			@media #{$larger,$xxl,$xl} {
				border-bottom: 1px solid #d9d9d9;
			}

			@media #{$xs,$sm,$md} {
				border-bottom: 0;
			}

			&.is-bb-none {
				border-bottom: 0;
			}
		}
	}

	&-right {
		display: flex;
		align-items: center;
		gap: 105px;

		@media #{$xl} {
			gap: 80px;
		}

		@media #{$xs,$sm,$md,$lg} {
			gap: 0px;
		}
	}
}

// header-6-index-6

.header6__area {
	position: absolute;
	top: 90px;
	left: 0;
	right: 0;
	z-index: 100;

	@media #{$md,$sm,$xs} {
		top: 25px;
	}
}

.sticky.header6__area {
	top: 0;
	background-color: #000;
}

.contact-link {
	display: flex;
	align-items: center;
	gap: 15px;

	&.is-black {
		.contact-link__text {
			p {
				color: var(--clr-theme-1);
			}
		}

		.contact-link__icon {
			span {
				svg {
					* {
						fill: var(--clr-theme-1);
					}
				}
			}
		}
	}

	&__text {
		p {
			font-size: 20px;
			font-weight: 600;
			font-family: var(--tpl-ff-heading);
			margin-bottom: 0;
			color: var(--clr-common-white);

			a {
				&:hover {
					color: var(--clr-theme-2);
				}
			}
		}
	}
}

.header-3-main-content-wrapper {
	&.is-black {
		border-bottom: 0;
	}
}

.meta-item-message {
	&:hover {
		.meta-item__icon {
			animation: wobble .7s;
		}
	}

	.meta-item__text {
		p {
			font-size: 18px;
			font-weight: 400;
			color: var(--clr-theme-primary);
			margin-bottom: 0;
		}
	}

	.meta-item2__text {
		p {
			font-size: 18px;
			font-weight: 400;
			color: #f9f9f9;
			margin-bottom: 0;
		}
	}

	display: flex;
	gap: 0 10px;
	align-items: center;
}

.meta-item-message-2 {

	.meta-item__icon {
		color: var(--clr-theme-2);
	}

	.meta-item__text {
		&.is-black {
			p {
				color: var(--clr-theme-1);
			}
		}

		p {
			font-size: 18px;
			font-weight: 400;
			color: var(--clr-common-white);
			margin-bottom: 0;
		}
	}

	display: flex;
	gap: 0 15px;
	align-items: center;
	padding: 12px 20px;
	border-radius: 2px;
}


.menu__bar-2 {
	position: absolute;
	transform: translate(-50%, -50%);
	right: 0;
	top: 50%;
}

.bar-icon-2 {

	@media #{$xl,$lg,$md,$sm} {
		margin-right: -10px;
		;
	}
}

.menu-separator-line-2 {
	width: 1px;
	background: #414141;
	position: relative;
	height: 90px;
	margin-left: 55px;
	right: 85px;

	@media #{$xl} {
		margin-left: 60px;
		right: 72px;
	}

	@media #{$lg,$md} {
		margin-left: 60px;
		right: 72px;
		height: 65px;
	}

	@media #{$xs,$sm} {
		margin-left: 60px;
		right: 72px;
		height: 50px;
	}

}

.bar-icon-2 {
	margin-right: -12px;

	img {
		filter: invert(25%) sepia(12%) saturate(5%) hue-rotate(319deg) brightness(113%) contrast(92%);
	}
}

.bar-3-pl {
	padding-left: 35px;

	@media #{$lg,$md,$sm,$xs} {
		padding-left: 0;
	}
}

.bar-icon-3 {
	img {
		filter: invert(100%) sepia(0%) saturate(7458%) hue-rotate(117deg) brightness(100%) contrast(101%);
	}
}

// Offcanvas style

.sidebar-button {
	display: flex;
	flex-direction: column;
	gap: 7px;
	cursor: pointer;
	align-items: flex-end;
	text-align: right
}

.sidebar-button span {
	display: inline-block;
	width: 40px;
	height: 2px;
	border-radius: 3px;
	background-color: var(--clr-theme-2);
	transition: all 0.5s ease;
}

.sidebar-button span:nth-child(2) {
	width: 25px
}

.sidebar-button span:last-child {
	width: 30px
}

.sidebar-button:hover span:nth-child(2) {
	width: 40px
}

.sidebar-button:hover span:nth-child(3) {
	width: 40px
}

// Offcanvas style

.offcanvas-nav-wrapper {
	transition: all .7s ease-in;
	position: relative;
	width: 100%;
	z-index: 999;

	&::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #f00;
		z-index: 1;
	}

	.sidebar-menu-contact {
		gap: 35px;

		a {
			width: 45px;
			text-align: center;
		}
	}

	.mobile-logo-area {
		.header-logo {
			max-width: 120px;
		}
	}

	.main-nav-js {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 30px 5% !important;
		z-index: 99;
		height: 100%;
		overflow-y: auto;
		box-shadow: 4px 3px 20px rgba(16, 33, 34, .06);
		transition: all .7s;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		transform: translateY(-10vh);
		opacity: 0;
		visibility: hidden;
		background-repeat: repeat;
		background-color: #101010;
		gap: 30px;
		scrollbar-width: none;

		@media #{$xs,$sm} {
			min-width: 100%;
			max-width: 100%
		}

		&::-webkit-scrollbar {
			display: none;
			width: 5px;
		}

		&::before {
			content: "Explore Pages.";
			position: absolute;
			top: 45%;
			right: 10%;
			transform: translateY(-50%);
			display: block;
			font-size: 200px;
			font-weight: 700;
			line-height: 1;
			color: #ACACAC;
			opacity: .1;
			z-index: 1;
			width: 100%;
			max-width: 1000px;
			margin-left: auto;
			margin-right: 0;
			height: 300px;
			letter-spacing: 5px;
			text-align: right;
			z-index: -1;

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

			@media #{$xl} {
				font-size: 200px
			}
		}

		&::-webkit-scrollbar-track {
			background: #f1f1f1;
		}

		&::-webkit-scrollbar-thumb {
			background: #999;

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

		.menu-close-btn {
			opacity: 1;
			cursor: pointer;
			padding: 5px;
			opacity: 0.8;
			font-size: 40px;

			@media #{$xxs} {
				font-size: 30px;
			}

			i {
				color: #fff;
			}

			&:hover {
				i {
					color: var(--clr-theme-2);
				}
			}
		}

		.sidebar-menu-area {

			&>ul {
				float: none;
				text-align: left;
				padding: 50px 0;
				margin-bottom: 0;
				width: 100%;
				max-width: 550px;
				margin-left: 0;
				margin-right: auto;
				z-index: 3;

				@media #{$xl} {
					padding: 45px 0 35px;
				}

				@media #{$md} {
					max-width: 100%;
				}

				@media #{$sm} {
					max-width: 100%;
					padding: 40px 0 30px;
				}

				@media #{$xs} {
					padding: 40px 0 30px;
					// margin-bottom: 334px;
				}


				&>li {
					display: block;
					position: relative;
					padding: 5px;
					transition: all .2s;
					transform: translateY(50px) scaleY(0);
					opacity: 0;
					margin-bottom: 5px;

					&:last-child {
						border-bottom: 1px solid transparent;
						margin-bottom: 0;
					}

					&:hover {
						a {
							&:before {
								width: 0%;
							}
						}
					}

					&>.bi {
						position: absolute;
						right: 10px;
						top: 15px;
						font-size: 36px;
						cursor: pointer;
						color: #ACACAC;

						@media #{$sm,$xs} {
							font-size: 30px;
							top: 8px;
							right: 5px;

						}

						@media #{$xxs} {
							font-size: 22px;
						}
					}

					a {
						padding: 4px 0;
						display: inline-block;
						font-size: 3.5rem;
						font-weight: 500;
						color: var(--clr-common-white);
						transition: all 0.6s ease;
						font-style: normal;
						text-decoration: none;
						transition: all 0.55s ease;
						position: relative;
						text-transform: uppercase;
						font-family: var(--tpl-ff-heading);
						line-height: 1;
						width: 100% !important;


						@media #{$md} {
							font-size: 3rem;
						}

						@media #{$xs,$sm} {
							font-size: 2.0rem
						}


						&:hover {
							color: var(--clr-common-white);
						}

						&::before {
							overflow: hidden;
							position: absolute;
							top: 4px;
							left: 0;
							width: 0;
							color: var(--clr-common-white);
							white-space: nowrap;
							content: attr(data-hover);
							transition: all .8s cubic-bezier(.17, .67, .32, .87);
						}
					}

					ul {
						&.sub-menu {
							position: static;
							min-width: 180px;
							background: 0 0;
							border: none;
							opacity: 1;
							visibility: visible;
							box-shadow: none;
							transform: none;
							transition: none;
							display: none;
							list-style: none;
							padding-left: 20px;
							margin-top: 25px;
							margin-bottom: 25px;
							margin-right: 55px;

							@media #{$xs,$sm} {
								margin-top: 5px;
							}

							li {
								opacity: 1;

								a {
									font-size: 22px;
									font-weight: 400;
									padding: 15px 5px;
									font-style: normal;
									text-transform: capitalize;
									-webkit-text-stroke: unset;
									-webkit-text-fill-color: unset;
									color: #f2f2f2;

									@media #{$xxs} {
										font-size: 16px;
										padding: 10px 5px;
									}

									&:hover {
										color: var(--clr-theme-2);
										padding-inline-start: 15px;

										&::before {
											width: 15px;
										}
									}
								}

								.sub-menu {
									margin-top: 0px;

									li {
										a {
											font-size: 24px;
										}
									}
								}

							}
						}
					}
				}
			}
		}

		&.show-menu {
			transform: none;
			opacity: 1;
			visibility: visible;
		}

		.sub-menu {
			& li {
				position: relative;

				& .bi {
					font-size: 22px;
					cursor: pointer;
					color: #ACACAC;
					position: absolute;
					top: 15px;
				}
			}
		}
	}

	.uesr-aera {
		width: 70px;
		height: 70px;
		line-height: 72px;
		border-radius: 50%;
		text-align: center;
		background: var(--primary-color2);
		display: inline-block;
		margin-left: auto;
		margin-right: auto;

		.bi {
			font-size: 35px;
			color: var(--text-primary);
		}
	}

	.mobile-menu {
		position: relative;
		top: 2px;
		padding: 0 5px;
		border-radius: 50%;
		display: inline-block;
	}
}

.main-page-wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	position: relative;

	.left-fixed-image {
		width: 700px;
		position: fixed;
		top: 0;
		left: 0;
		max-height: 100vh;
		height: 100%;

		@media #{$xxl} {
			width: 550px
		}

		@media #{$xl} {
			width: 400px
		}

		@media #{$lg} {
			width: 300px
		}

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

		img {
			width: 100%;
			-o-object-fit: cover;
			object-fit: cover;
			height: 100% !important;
		}
	}
}

@-webkit-keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateY(50px) scaleY(0)
	}

	to {
		opacity: 1;
		transform: translateY(0) scaleY(1)
	}
}

@keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateY(50px) scaleY(0)
	}

	to {
		opacity: 1;
		transform: translateY(0) scaleY(1)
	}
}


.offcanvas-nav-wrapper .main-nav-js .sidebar-menu-area>ul>li ul.sub-menu li a::before {
	position: absolute;
	content: "";
	width: 0px;
	height: 2px;
	background-color: var(--clr-theme-2);
	left: -17px;
	top: 50%;
	transform: translateY(-50%);

}

.mobile-menu-btn {
	svg {
		@include transition(.3s);

		* {
			fill: var(--clr-common-white);
			@include transition(.3s);
		}

		&:hover * {
			fill: var(--clr-theme-2)
		}
	}

	&.is-black {
		svg {
			@include transition(.3s);

			* {
				fill: var(--clr-common-black);
				@include transition(.3s);
			}

			&:hover * {
				fill: var(--clr-theme-2)
			}
		}
	}
}

.sidebar-social {
	margin-top: auto;
}


// index-6__marquee css

.marquee__area {
	background: #FFC444;
	position: relative;
	overflow: hidden;
}

.marquee__wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	animation: slide-left 30s linear infinite;

	&:hover {
		animation-play-state: paused;
	}
}

.sliding__text {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 9px 0;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	position: relative;
}

.marquee__item {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.marquee__text-title {
	font-size: 32px;
	color: #222222;
	line-height: 1;
	text-transform: uppercase;

	&.text-stroke {
		color: transparent;
		-webkit-text-stroke: 1px #222222;
	}
}

.marquee__text-icon {
	margin-right: -5px;
	margin-left: 20px;

	img {
		width: 60%;
		height: auto;
	}
}