

//--Header Top Here--//
.header-section {
	width: 100%;
}
.menu-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	transition: all 0.9s;
	background-color: rgb(245, 244, 255);
	box-shadow: 0px -31px 32px 9px #234DD4;
	.header-wrapper{
		padding: 15px 0;
		.main-menu{
			@include breakpoint(max-lg){
				top: 55px;
			}
		}
	}
}
.header-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	transition: all 0.9s;
	width: 100%;
	position: relative;
	padding: 30px 0;
	@include breakpoint(max-lg){
		z-index: 999999;
	}
	.logo-menu {
		.logo{
			display: block;
			width: 250px;
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
			@include breakpoint(max-xl){
				display: none;
			}
		}
	}
	.small__logo{
		display: block;
		width: 60px;
		height: 45px;
		img{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.main-menu {
		display: flex;
		align-items: center;
		gap: 0 24px;
		@include breakpoint(max-lg){
			max-width: 100%;
		}
		li {
			transition: all 0.6s;
			position: relative;
			a {
				color: var(--subtitle);
				font-weight: 500;
				font-size: 16px;
				transition: all 0.3s;
				text-transform: capitalize;
				&:hover {
					color: var(--success);
				}
				i {
					margin-left: 2px;
					font-size: 14px !important;
					color: var(--base-color);
				}
			}
			.sub-menu {
				padding: 5px 5px 5px 5px;
				background-color: var(--banner);
				transition: all 4s;
				@media (min-width: 992px) {
					position: absolute;
					top: 100%;
					left: 0;
					width: 250px;
					z-index: 999;
					transition: all 0.3s;
					background: var(--white);
					box-shadow: -1px 7px 19px -14px rgb(66 106 184);
					border-radius: 10px;
					justify-content: center;
					opacity: 0;
					gap: 5px;
					transform: translateY(25px);
					visibility: hidden;
				}
				li {
					margin-right: 0;
					transition: all 0.3s !important;
					a {
						color: var(--title) !important;
						text-transform: capitalize;
						font-weight: 400;
						font-size: 16px;
						width: 100%;
						display: block;
						padding: 5px 8px;
						margin: 1px;
						border-radius: 8px;
						i{
							font-size: 14px !important;
						}
					}
					&:hover{
						a{
							margin-left: 10px;
						}
					}
				}
			}
			&:hover {
				.sub-menu {
					opacity: 1;
					visibility: visible;
					transform: translateY(5px);
				}
			}
		}
	}
	.menu__right__components{
		gap: 15px;
		@include breakpoint(max-xs){
			gap: 10px;
		}
	}
	.menu__components{
		display: flex;
		align-items: center;
		gap: 24px;
		i{
			color: var(--title);
		}
		.tolly__shop{
			a{
				display: block;
				width: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 40px;
				border-radius: 50%;
				background: var(--white);
				box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04);
				@include breakpoint(max-xs){
					width: 30px;
					height: 30px;
					i{
						font-size: 18px;
					}
				}
			}
		}
		@include breakpoint(max-xs){
			gap: 8px;
		}
		.cmn--btn{
			@include breakpoint(max-xs){
				padding: 7px 12px 9px;
				font-size: 14px;
			}
		}
	}
}
@media screen and (max-width: 991px){
	.main-menu {
		position: fixed;
		top: 85px;
		width: 100%;
		left: 0;
		display: inline !important;
		margin-top: 20px;
		z-index: 999;
		padding: 15px 15px;
		transition: all 0.4s !important;
		transform-origin: top;
		max-height: calc(100vh - 130px);
		background:#e4e6f5fc;
		overflow-y: auto;
		&:not(.active) {
			position: fixed;
			left: -100%;
			top: 85px;
		}
		li {
			width: 100%;
			border-radius: 2px;
			margin-right: 0 !important;
			margin-bottom: 7px;
			border: 1px solid rgba(170, 181, 200, 0.5);
			a{
				display: block;
				padding: 8px 10px 6px;
				font-size: 17px;
			}
			.sub-menu{
				display: none;
				margin: 0px 10px 15px 20px !important;
				li{
					a{
						color: var(--white) !important;
						padding: 8px 15px !important;
					}
					.sub-two{
						position: static !important;
						width: 100% !important;
						padding: 0 10px 20px 30px;
						li{
							a{
								display: block;
							}
						}
					}
				}
			}
		}
		.active {
			a {
				color: var(--white);
			}
		}
	}
	.header-bar {
		position: relative;
		width: 31px;
		height: 20px;
		span {
			position: absolute;
			width: 100%;
			height: 2px;
			display: inline-block;
			transition: all 0.3s;
			left: 0;
			background: var(--title);
			&:first-child {
				top: 0;
				background: var(--title);
			}
			&:nth-child(2) {
				top: 44%;
				background: var(--title);
			}
			&:last-child {
				bottom: 0;
				background: var(--title);
			}
		}
		&.active {
			span {
				&:first-child {
					transform: rotate(45deg) translate(3px, 9px);
				}
				&:nth-child(2) {
					opacity: 0;
				}
				&:last-child {
					transform: rotate(-45deg) translate(3px, -9px);
				}
			}
		}
		&:hover{
			cursor: pointer;
		}
	}
	.header-wrapper{
		.main-menu{
			li{
				.sub-menu{
					li{
						a{
							color: var(--success) !important;
						}
					}
				}
			}
		}
	}
}
//--Header Top End--//

//--Header two Here--//
.header__sectiontwo{
	.main-menu{
		@include breakpoint(max-lg){
			background: #112f75;
		}
		li{
			a{
				color: var(--white);
			}
			.sub-menu{
				li{
					a{
							color: var(--white);
					}
				}
			}
		}
	}
	.header-bar{
		span{
			background: var(--white);
		}
	}
}
.header__sectiontwo.menu-fixed{
	background: #112f75;
}
//--Header two End--//

// --search popup
.search__popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    animation: slideIn 0.3s ease-in-out;
	z-index: 999;
	.popup-content{
		input{
			width: 100%;
			height: 110px;
			border: unset;
			padding: 5px 40px;
			color: var(--pragraph);
			font-size: 18px;
			box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
		}
		::placeholder{
			color: var(--title);
		}
		button{
			@include gradient;
			height: 110px;
			padding: 0;
			width: 160px;
			border: unset;
			i{
				font-size: 48px;
				color: var(--white);
			}
		}
	}
}
#searchBtn{
	border: unset;
	padding: 0;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04);
	@include breakpoint(max-xs){
		width: 30px;
		height: 30px;
		i{
			font-size: 18px;
		}
	}
}
@keyframes slideIn {
0% {
	transform: translateY(-100%);
}
100% {
	transform: translateY(0);
}
}
.search__popup.open {
display: block;
}
.search__popup.close {
animation: slideOut 0.3s ease-in-out;
}
@keyframes slideOut {
0% {
	transform: translateY(0);
}
100% {
	transform: translateY(-100%);
}
}
// --search popup
