//>>>>> Header Top Start <<<<<//
.header-top-section {
	position: relative;
	z-index: 9;
	.right-top-cont {
		.line {
			width: 1px;
			height: 20px;
			background: #ffffff;
			opacity: 20%;
		}
		.nice-select {
			padding-right: 16px;
			.current {
				color: #fff;
				font-weight: 400;
				font-size: 14px;
			}
			&::after {
				border-bottom: 2px solid #fff;
				border-right: 2px solid #fff;
			}
			.list {
				width: 130px;
			}
		}
	}
}

.header-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: transparent;
}

//>>>>> Header Main Area Start <<<<<//

.header-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.main-menu {
		ul {
			margin-bottom: 0;
			li {
				position: relative;
				list-style: none;
				display: inline-block;
				margin-inline-end: 26px;

				&:last-child {
					margin-inline-end: 0;
				}

				a {
					display: inline-block;
					font-size: 16px;
					font-weight: 500;
					color: $pra;
					padding: 16px 0;
					text-align: left;
					font-family: $heading-font;
					position: relative;
					text-transform: capitalize;
					@include transition;

					i {
						margin-left: 2px;
						font-size: 16px;
					}

					&:hover {
						color: $theme-color !important;
					}
				}
				.submenu {
					position: absolute;
					top: 100%;
					inset-inline-start: 0;
					// min-width: 240px;
					width: 200px;
					background: $white;
					z-index: 99999;
					visibility: hidden;
					opacity: 0;
					transform-origin: top center;
					color: $header-color;
					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
					-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
					-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
					transform: translateY(10px);
					@include transition;

					li {
						display: block;
						width: 100%;
						margin: 0;
						padding: 0;

						a {
							position: relative;
							z-index: 11;
							font-size: 16px;
							font-weight: 600;
							color: $header-color;
							padding: 0 18px;
							padding-bottom: 11px;
							padding-top: 11px;
							width: 100%;
							border-bottom: 1px solid #eeeeee;
						}
						&:last-child {
							a {
								border: none;
							}
						}
						.submenu {
							inset-inline-start: 100%;
							top: 0;
							visibility: hidden;
							opacity: 0;
						}
						&:hover {
							> a {
								background: $p1-clr;
								color: $white !important;

								&::after {
									color: $p1-clr;
								}
							}
							> .submenu {
								-webkit-transform: translateY(1);
								-moz-transform: translateY(1);
								-ms-transform: translateY(1);
								-o-transform: translateY(1);
								transform: translateY(1);
								visibility: visible;
								opacity: 1;
							}
						}
					}
					li.has-dropdown {
						> a {
							&::after {
								position: absolute;
								top: 50%;
								inset-inline-end: 25px;
								-webkit-transform: translateY(-50%);
								-moz-transform: translateY(-50%);
								-ms-transform: translateY(-50%);
								-o-transform: translateY(-50%);
								transform: translateY(-50%);
								color: $p1-clr;
							}
						}
					}
				}

				.has-homemenu {
					width: 1100px;
					padding: 30px 30px 10px 30px;
					opacity: 0;
					left: calc(100% - 300px);
					visibility: hidden;
					padding: 20px 20px 20px 20px;

					.homemenu-items {
						@include flex;
						gap: 12px;
						justify-content: space-between;
						@include breakpoint(max-lg) {
							flex-wrap: wrap;
						}
						.homemenu {
							position: relative;
							box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
							.homemenu-thumb {
								position: relative;
								width: 100%;
								.demo-button {
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
									width: 60%;
									gap: 10px;
									display: flex;
									justify-content: center;
									flex-direction: column;
									opacity: 0;
									visibility: hidden;
									@include transition;
									margin-top: 20px;
									.theme-btn {
										padding: 8px 14px 8px;
										background: $p3-clr;
										color: $white !important;
										width: initial;
										font-size: 12px !important;
										text-align: center;
										border-radius: 4px;
										span{
											font-size: 14px;
										}
										&:hover {
											color: $white !important;
										}
									}
								}
								&:hover {
									&::before {
										visibility: visible;
										opacity: 1;
									}

									.demo-button {
										opacity: 1;
										visibility: visible;
										margin-top: 0;
									}
									&.homemenu-btn {
										opacity: 1;
										visibility: visible;
										bottom: 50%;
										transform: translateY(50%);
									}
								}
								img {
									width: 100%;
								}
							}
							.homemenu-title {
								text-align: center;
								margin: 15px auto;
								display: inline-block;
								font-size: 16px;
							}
						}
					}
					@include breakpoint(max-xl){
						width: 1000px;
					}
				}

				&:hover {
					> a {
						color: $p1-clr;
						&::after {
							color: $p1-clr;
						}
					}
					> .submenu {
						visibility: visible;
						opacity: 1;
						transform: translateY(0px);
					}
				}
			}
		}
	}
	.sidebar__toggle {
		cursor: pointer;
		width: 30px;
		font-size: 20px;
		img {
			width: 30px;
		}
	}
}

.header-1 {
	z-index: 9;
	padding: 14px 0;
	.header-main {
		.header-left {
			@include flex;
			gap: 60px;

			@include breakpoint(max-xl4) {
				gap: 40px;
			}

			@include breakpoint(max-xxl) {
				gap: 25px;
			}

			@include breakpoint(max-xl) {
				gap: 20px;
			}

			.category-oneadjust {
				width: 160px;
				border-radius: 8px;
				border: 1px solid rgba(92, 112, 126, 0.3);
				padding: 10px 16px;
				position: relative;
				z-index: 99;

				@include breakpoint(max-md) {
					display: none;
				}

				.nice-select {
					width: unset !important;
					gap: 20px;
					font-size: 16px;

					.list {
						max-height: 15vh;
						background: $white;
						width: 160px;
						padding: 5px 8px;
						overflow-y: scroll;

						@include breakpoint(max-xl) {
							right: -60px;
						}

						li {
							color: $header-color;
							font-size: 14px;
							border: none;
						}
					}
				}
			}
		}
		.header-right {
			gap: 30px;
			@include breakpoint(max-xl) {
				gap: 20px;
			}

			@include breakpoint(max-md) {
				gap: 116px;
			}
			@include breakpoint(max-xxl) {
				gap: 16px;
			}
			.search-icon {
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 50%;
				border: 1px solid rgba(92, 112, 126, 0.3);
				color: $header-color;
				margin-left: 30px;

				@include breakpoint(max-xl) {
					margin-left: 0;
				}

				@include breakpoint(max-xl) {
					width: 40px;
					height: 40px;
					line-height: 40px;
				}
			}
			.header-button {
				@include breakpoint(max-xxl) {
					display: none;
				}
			}
		}
	}
	&.header-style2 {
		position: absolute;
		padding: 0;
		.mega-menu-wrapper {
			border-radius: 0;
			background: $white;
			padding: 13px 28px;
		}
		&.sticky {
			box-shadow: none;
			background: transparent;
			.mega-menu-wrapper {
				box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
					rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
					rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
			}
		}
	}
	&.style3 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(3, 23, 64, 0.2);
		.sidebar__toggle {
			img {
				filter: brightness(25) invert(1);
			}
		}
		.search-trigger {
			border-color: $white;
			i {
				color: $white;
			}
		}
		@include breakpoint(xl) {
			.main-menu {
				ul {
					li {
						a {
							color: $white;
						}
					}
				}
			}
		}
		&.sticky {
			background: rgba(3, 23, 64, 1);
		}
	}
	&.header-style4 {
		.main-menu {
			ul {
				li {
					a {
						color: $black;
					}
				}
			}
		}
	}
	&.header-style5{
		.mega-menu-wrapper{
			background: $bg-color;
		}
	}
}

.sidebar__toggle {
	cursor: pointer;
}
//>>>>> Sticky Start <<<<</
.sticky {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	width: 100%;
	z-index: 100;
	transition: all 0.9s;
	-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	background: $white;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

//>>>>> Offcanvas Start <<<<<//
.offcanvas__info {
	background: $cmnbg none repeat scroll 0 0;
	border-left: 2px solid $p3-clr;
	position: fixed;
	right: 0;
	top: 0;
	width: 400px;
	height: 100%;
	-webkit-transform: translateX(calc(100% + 80px));
	-moz-transform: translateX(calc(100% + 80px));
	-ms-transform: translateX(calc(100% + 80px));
	-o-transform: translateX(calc(100% + 80px));
	transform: translateX(calc(100% + 80px));
	-webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
	-moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
	transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
	z-index: 99999;
	overflow-y: scroll;
	overscroll-behavior-y: contain;
	scrollbar-width: none;
	&::-webkit-scrollbar {
		display: none;
	}
	.social-icon{
		a{
			i{
				color: $black !important;
			}
		}
	}
}
.offcanvas__info.info-open {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.offcanvas__wrapper {
	position: relative;
	height: 100%;
	padding: 30px 30px;
	.offcanvas__content {
		.text {
			color: $text-color;
		}
		.offcanvas__close {
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 4px;
			background-color: $p3-clr;
			position: relative;
			z-index: 9;
			cursor: pointer;

			i {
				color: $white;
			}
		}
		.offcanvas__contact {
			margin-top: 20px;
			ul {
				margin-top: 20px;

				li {
					font-size: 16px;
					font-weight: 500;
					text-transform: capitalize;
					line-height: 22px;

					a {
						color: $text-color;
					}

					&:not(:last-child) {
						margin-bottom: 8px;
					}

					.offcanvas__contact-icon {
						margin-right: 10px;

						i {
							color: $p1-clr;
							font-size: 18px;
						}
					}
				}
			}

			span {
				text-transform: initial;
			}

			.header-button {
				margin-top: 20px;
				.theme-btn {
					width: 100%;
					padding: 16px 40px;
					text-transform: capitalize !important;
					background: $p1-clr !important;
					border-radius: 100px;
					overflow: hidden;
					padding: 9px 16px 10px;
					span,
					i {
						color: $white !important;
					}
				}
			}

			.social-icon {
				margin-top: 30px;
				gap: 10px;

				a {
					width: 45px;
					height: 45px;
					line-height: 45px;
					text-align: center;
					font-size: 16px;
					display: block;
					background: $white;
					color: $pra;
					border-radius: 50%;
					-webkit-transition: all 0.4s ease-in-out;
					transition: all 0.4s ease-in-out;
					text-align: center;
					border: 1px solid $border-color;

					&:hover {
						border-color: $p2-clr;
						background-color: $p2-clr;
						color: $white;
					}
				}
			}
		}
	}
}

.offcanvas__overlay {
	position: fixed;
	height: 100%;
	width: 100%;
	background: #151515;
	z-index: 900;
	top: 0;
	opacity: 0;
	visibility: hidden;
	right: 0;
}

.offcanvas__overlay.overlay-open {
	opacity: 0.8;
	visibility: visible;
}

@media (max-width: 450px) {
	.offcanvas__info {
		width: 300px;
	}
}

@media (max-width: 575px) {
	.offcanvas__wrapper {
		padding: 20px;
	}
}