/******************* Header Css ********************/
header {
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 15px 0;
	position: absolute;
	border-bottom: 2px solid transparent;

	.headerInner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;

		.logoWrap {
			/* width: 100%; */
			width: 250px;
			text-align: left;
			transition: 0.6s;
			padding-left: 15px;
			padding-right: 15px;

			.logo {
				/* width: 210px; */
				transition: 0.6s;
				display: inline-block;

				img {
					width: 100%;
				}
			}
		}

		.headerRight{
			width: auto;
			flex-wrap: wrap;
			position: relative;
			align-items: center;
			display: inline-flex;
			border-radius: 30px 0 0 30px;
			padding: 10px 85px 10px 40px;
			border: 1px solid #FFFFFF30;
			border-right: 0;

			&:after {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				content: "";
				position: absolute;
				backdrop-filter: blur(10px);
				border-radius: 30px 0 0 30px;
				background-color: #ffffff15;
				-webkit-backdrop-filter: blur(10px);
			}
		}

		.menuWrap {
			z-index: 1;
			text-align: end;
			transition: 0.6s;
			position: relative;
			padding-left: 15px;
			padding-right: 15px;
			/* width: calc(100% - (250px + 220px)); */

			.nav {
				display: inline-block;

				/* 1st DD Menu */
				ul {
					display: flex;
					align-items: center;
					list-style-type: none;
					justify-content: center;

					li {
						display: flex;
						position: relative;
						padding-left: 10px;
						padding-right: 10px;
						align-items: center;
						justify-content: space-between;

						.toggleBtn {
							z-index: 1;
							width: 20px;
							height: 20px;
							display: flex;
							transition: 0.6s;
							color: #ffffff;
							position: relative;
							align-items: center;
							justify-content: center;
						}

						&:before {
							left: 0;
							right: 0;
							height: 0;
							width: 100%;
							content: "";
							transition: 0.3s;
							position: absolute;
							top: calc(100% + 6px);
							background-color: #0081EB;
							border-radius: 0 0 10px 10px;
						}

						&:not(:last-child) {
							margin-right: 20px;
							margin-bottom: 0;
						}

						a {
							z-index: 1;
							color: #fff;
							line-height: 1;
							display: block;
							font-size: 18px;
							font-weight: 400;
							padding: 5px 15px;
							line-height: 28px;
							position: relative;
							text-decoration: none !important;
							font-family: "IBM Plex Sans", sans-serif;
						}

						&:hover {
							&:before {
								height: 4px;
							}

							a {
								color: #fff;
							}

							ul {
								opacity: 1;
								transform: translateY(0%);

								li {
									a {
										color: #0081EB;
									}

									&:hover {
										a {
											color: #fff;
										}

										&:before {
											top: 0;
										}
									}

									&.active {
										a {
											color: #fff;
										}

										&:before {
											top: 0;
										}
									}
								}
							}
						}

						&:nth-child(3), &:nth-child(4){
							ul{
								opacity: 0;
								visibility: visible;
								position: absolute;
							}
						}

						&.active {
							&:before {
								height: 92px;
							}

							a {
								color: #fff;
							}
						}

						&.has_sub_menu {

							/* 2nd DD Menu */
							ul {
								left: 0;
								opacity: 0;
								visibility: hidden;
								width: 250px;
								display: block;
								overflow: hidden;
								transition: 0.6s;
								padding-top: 15px;
								position: absolute;
								border-radius: 5px;
								top: calc(100% + 1px);
								transform: translateY(30%);

								li {
									height: 50px;
									width: 100%;
									display: flex;
									padding-left: 0;
									padding-right: 0;
									text-align: left;
									overflow: hidden;
									border-radius: 8px;
									align-items: center;
									background-color: #ffffff;
									border: 1px solid #0081EB;

									&:before {
										top: -67px;
										height: 70px;
										transition: 0.8s;
										content: normal;
									}

									a {
										width: 100%;
										display: block;
										font-size: 14px;
										color: #0081EB;
									}

									&:not(:last-child) {
										margin-right: 0;
										margin-bottom: 2px;
									}
								}
							}

							&:hover {
								a {
									color: #fff;
								}

								ul {
									opacity: 1;
									visibility: visible;
									transform: translateY(0%);

									li {
										a {
											transition: 0.6s;
											color: #0081EB;
											line-height: 1.2;
										}

										&:hover {
											a {
												color: #000 !important;
											}

											&:before {
												top: 0;
											}
										}

										&.active {
											a {
												color: #000 !important;
											}

											&:before {
												top: 0;
											}
										}
									}
								}
							}

							&.active {
								a {
									color: #fff;
								}
							}
						}

						.megaMenuWrap {
							opacity: 0;
							height: 0;
							transition: 0s;
							position: fixed;
							z-index: 5;
							/* top: 75px; */
							top: 90px;
							left: 15px;
							right: 15px;
							display: none;
							visibility: hidden;
							overflow: hidden;
							border-radius: 25px;
							box-shadow: 3px 3px 15px 5px #efefef;

							.megaMenuInner {
								height: 100%;
								display: flex;
								align-items: flex-start;
								/* opacity: ; */

								.megaPorductWrap {
									width: 315px;
									height: 100%;
									background-color: #fff;
									border-right: 1px solid #00000025;

									.megaBoxInner {
										height: 100%;
										position: absolute;
										top: 0;
										right: 0;
										left: 0;
										bottom: 0;

										ul {
											height: 100%;
											display: block;

											li {
												padding-left: 30px;
												padding-right: 0;
												margin-bottom: 0;
												margin-right: 0;
												transition: 0s;
												height: 33.33%;
												position: relative;

												&:not(:last-child) {
													border-bottom: 1px solid #00000025;
												}

												&:before {
													content: normal;
												}

												a {
													width: 100%;
													display: block;
													color: #000000;
													text-align: left;
													font-size: 22px;

													span {
														&.prodName {
															display: block;
															font-size: 22px;
															color: #000000;
															transition: 0s;
															line-height: 15px;
															margin-bottom: 25px;
														}

														&.prodRange {
															display: block;
															font-size: 22px;
															color: #919191;
															line-height: 15px;
														}
													}
												}

												&:hover,
												&.current {
													background-color: #0081EB;

													a {
														color: #fff;
													}
												}
											}
										}
									}
								}
							}
						}

						&.has_mega_sub_menu {
							& .megaMenuWrap {
								& .megaMenuInner {
									& .megaPorductWrap {
										top: 75px;

										& .megaBoxInner {
											&>ul {
												&>li.prodWrap {
													& ul.megaCategoryWrap {
														top: 75px !important;
														transition: ease-out 0s !important;
														/* z-index: 0; */
														opacity: 0;
														visibility: hidden;

														& li.categoryProd {
															ul.megaTypeWrap {
																top: 75px !important;
																transition: ease-out 0s !important;
																/* z-index: 0; */
																opacity: 0;
																visibility: hidden;
															}
														}
													}
												}
											}
										}
									}
								}
							}

							&:hover {
								& .megaMenuWrap {
									& .megaMenuInner {
										& .megaPorductWrap {
											top: 0;

											& .megaBoxInner {
												&>ul {
													&>li.prodWrap {
														&:hover {
															& ul.megaCategoryWrap {
																top: 0 !important;
																transition: 0s !important;
																/* z-index: 0; */
																opacity: 1;
																visibility: visible;

																& li.categoryProd {
																	ul.megaTypeWrap {
																		top: 0px !important;
																		transition: 0s !important;
																		/* z-index: 0; */
																		opacity: 1;
																		visibility: visible;
																	}
																}
															}
														}
													}
												}
											}
										}
									}
								}
							}
						}

						&.has_mega_sub_menu {
							.megaMenuWrap {
								.megaMenuInner {
									width: 100%;
									height: 100%;
									overflow: hidden;
									position: relative;

									.toggleBtn {
										display: none;
									}

									.megaPorductWrap {
										width: 100%;
										display: flex;
										flex-wrap: wrap;
										position: relative;
										overflow: hidden;

										&:before {
											width: 315px;
											height: 100%;
											left: 0;
											top: 0;
											bottom: 0;
											content: "";
											position: absolute;
											/* border-radius: 25px; */
											background-color: #fff;
											/* border-right: 1px solid #00000025; */
										}

										.megaBoxInner {
											overflow: hidden;

											&>ul {
												&>li.prodWrap {
													width: 100%;
													height: 33.33%;
													padding-left: 0;
													overflow: visible;
													position: relative;

													&>a {
														width: 315px;
														padding-left: 25px;
													}

													ul.megaCategoryWrap {
														background-color: #fff;
														left: 315px;
														height: 475px;
														padding-top: 0;
														transform: none;
														border-radius: 0;
														position: fixed;
														width: calc(100% - 315px);
														border-left: 1px solid #dadada;

														&:before {
															width: 315px;
															height: 100%;
															left: 0;
															top: 0;
															bottom: 0;
															content: "";
															position: absolute;
															/* border-radius: 25px; */
															background-color: #fff;
															/* border-right: 1px solid #00000025; */
														}

														li.categoryProd {
															border: 0;
															height: 25%;
															display: flex;
															flex-wrap: wrap;
															padding-left: 0;
															border-radius: 0;
															overflow: visible;
															position: relative;
															background-color: transparent !important;

															&:not(:last-child) {
																border-bottom: 1px solid #00000025 !important;
															}

															&:hover {
																a.catBox {
																	.prodName {
																		color: #0081EB;
																	}
																}
															}

															a.catBox {
																width: 315px;
															}

															ul.megaTypeWrap {
																background-color: #fff;
																left: calc(315px + 315px);
																gap: 0px;
																z-index: 1;
																height: 475px;
																padding-top: 0;
																transform: none;
																border-radius: 0;
																position: fixed;
																display: flex;
																flex-wrap: wrap;
																/* align-items: flex-start; */
																align-items: center;
																justify-content: flex-start;
																border-left: 1px solid #dadada;
																width: calc(100% - (315px + 315px));

																li {
																	border: 0;
																	width: calc(33.33% - 10px);
																	height: 50%;
																	margin-right: 0;
																	padding-left: 0;
																	display: flex;
																	justify-content: center;
																	background-color: transparent !important;

																	&:before {
																		content: normal;
																	}

																	&:not(:last-child) {
																		border-right: 1px solid #e0e0e0;
																		border-radius: 0;
																	}

																	&:nth-child(3) {
																		border-right: none;
																	}

																	a {
																		width: 100%;
																		display: block;

																		.figure {
																			width: 100%;
																			max-height: 100%;
																			text-align: center;
																			border-radius: 10px;
																			display: inline-block;
																			background-color: #fff;
																			box-shadow: 0 0 10px #00000030;
																			transition: all 0.5s;

																			img {
																				width: auto;
																				/* height: 180px; */
																				height: 190px;
																				padding: 5px;
																				display: inline-block;
																				max-width: inherit;
																				max-height: inherit;
																			}

																			figcaption {
																				display: block;
																				text-align: center;

																				.prodName {
																					display: block;
																					font-size: 14px;
																					color: #000000;
																					line-height: 15px;
																					margin-bottom: 10px;
																					transition: all 0.5s;
																				}

																				.prodRange {
																					display: block;
																					font-size: 16px;
																					color: #000000;
																					line-height: 15px;
																					transition: all 0.5s;
																				}
																			}

																			&:hover{
																				background-color: #0081EB;
																				figcaption{
																					*{
																						color: #fff;
																					}
																				}
																			}
																		}
																	}
																}
															}

															&:hover {
																padding-left: 0;

																ul {
																	z-index: 9;
																	opacity: 1;
																	visibility: visible;
																}
															}
														}
													}

													&:hover {
														ul {
															z-index: 9;
															opacity: 1;
															visibility: visible;
														}
													}

													&.prod_2 {
														ul.megaCategoryWrap {
															li.categoryProd {
																width: 100%;
																height: 100%;

																.catBox {
																	display: none;
																}

																ul.megaTypeWrap {
																	left: calc(315px);
																	width: calc(100% - 315px);
																}
															}
														}
													}

													&.prod_3 {
														ul.megaCategoryWrap {
															li.categoryProd {
																width: 100%;
																height: 100%;

																.catBox {
																	display: none;
																}

																ul.megaTypeWrap {
																	left: calc(315px);
																	width: calc(100% - 315px);
																}
															}
														}
													}
												}
											}
										}
									}
								}
							}
						}

						&.has_mega_sub_menu {
							&:hover {
								.megaMenuWrap {
									opacity: 1;
									height: 475px;
									display: block;
									overflow: hidden;
									visibility: visible;

									.megaMenuInner {
										visibility: visible;
										opacity: 1;

										.megaPorductWrap {
											.megaBoxInner {
												ul {
													li {
														&.prodWrap {
															&.prod_1 {
																ul.megaCategoryWrap {
																	top: 0 !important;
																	z-index: 3;
																	opacity: 1;
																	visibility: visible;

																	li.categoryProd {
																		.megaTypeWrap{
																			&:before{
																				top: 0;
																				left: 0;
																				right: 0;
																				bottom: 0;
																				content: '';
																				position: absolute;
																				background-color: #fff;
																			}
																			&:after{
																				right: 0;
																				bottom: -90px;
																				z-index: 1;
																				content: '';
																				width: 300px;
																				height: 470px;
																				opacity: 0.3;
																				position: absolute;
																				background-size: contain;
																				background-position: 0 0;
																				background-repeat: no-repeat;
																				background-image: url('../images/rockB_parts.png');
																			}
																			li{
																				z-index: 2;
																			}
																		}
																		&.cat_1 {
																			ul.megaTypeWrap {
																				top: 0 !important;
																				opacity: 1;
																				visibility: visible;
																			}
																		}
																	}
																}
															}

															&.prod_2 {
																ul.megaCategoryWrap {
																	top: 0 !important;
																	opacity: 1;
																	visibility: visible;

																	li.categoryProd {
																		.megaTypeWrap{
																			&:after{
																				right: 0;
																				bottom: -95px;
																				z-index: 1;
																				content: '';
																				width: 300px;
																				height: 470px;
																				opacity: 0.2;
																				position: absolute;
																				background-size: contain;
																				background-position: 0 0;
																				background-repeat: no-repeat;
																				background-image: url('../images/rockT_parts.png');	
																			}
																			li{
																				z-index: 2;
																			}
																		}
																		&.cat_1 {
																			ul.megaTypeWrap {
																				top: 0 !important;
																				opacity: 1;
																				visibility: visible;
																			}
																		}
																	}
																}
															}

															&.prod_3 {
																ul.megaCategoryWrap {
																	top: 0 !important;
																	opacity: 1;
																	visibility: visible;

																	li.categoryProd {
																		.megaTypeWrap{
																			&:after{
																				right: 0;
																				bottom: 0;
																				z-index: 1;
																				content: '';
																				width: 380px;
                                                                                height: 470px;
																				opacity: 0.3;
																				position: absolute;
																				background-size: contain;
																				background-position: 0 0;
																				background-repeat: no-repeat;
																				background-image: url('../images/underC_parts.png');
																			}
																			li{
																				z-index: 2;
																			}
																		}
																		&.cat_1 {
																			ul.megaTypeWrap {
																				top: 0 !important;
																				opacity: 1;
																				visibility: visible;
																			}
																		}
																	}
																}
															}
														}
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.callWrap {
			z-index: 1;
			width: 220px;
			display: flex;
			position: relative;
			align-items: center;
			padding-left: 15px;
			padding-right: 15px;
			justify-content: flex-end;

			.user-ico,
			.cart-ico {
				width: 34px;
				height: 34px;
				padding: 0 !important;
				display: flex;
				margin: 0 15px;
				transition: 0.6s;
				border-radius: 50%;
				position: relative;
				align-items: center;
				justify-content: center;
				/* border: 1px solid #ffffff30; */
				border: 1px solid #fff;
				/* background-color: #0081EB; */
				/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); */

				.numDiv {
					width: 17px;
					height: 17px;
					border-radius: 50%;
					background-color: red;
					color: #fff;
					font-size: 12px;
					position: absolute;
					top: -5px;
					right: -2px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				a {
					font-size: 12px;
					color: #ffffff;
					transition: 0.6s;
					display: flex;
					width: 100%;
					height: 100%;
					opacity: 0.7;
					justify-content: center;
					align-items: center;
					text-decoration: none !important;
				}

				&:hover,
				&.active {
					background-color: #fff;

					a {
						opacity: 1;
						color: #000000;
					}
				}
			}

			.user-ico {
				position: relative;
				/* border: 1px solid #ffffff30; */

				.adminDrop {
					position: absolute;
					left: -12px;
					top: 100%;
					visibility: hidden;
					opacity: 0;
					background-color: #f8f8f8;
					box-shadow: 0px 0px;
					color: #0081EB;
					transition: all 0.5s;
					font-size: 15px;
					padding: 4px 12px;
					border-radius: 6px;
					/* box-shadow: 0px 0px 5px 0px rgba(0,0,0, 0.3); */
				}

				&.active {
					background-color: #fff;
					border-color: #0081EB;

					a {
						color: #0081EB;
					}

					&:hover {
						.adminDrop {
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}

			.cart-ico{
				&::before,
				&::after{
					top: 5px;
					bottom: 5px;
					width: 1px;
					content: '';
					position: absolute;
					background-color: #fff;
				}
				&:before{
					left: -17px;
				}
				&:after{
					right: -17px;
				}
			}

			.callInner {
				margin-left: 15px;
				.locIcon {
					a {
						width: 34px;
						height: 34px;
						display: flex;
						transition: 0.3s;
						border-radius: 30px;
						align-items: center;
						border: 1px solid #fff;
						justify-content: center;
						outline: none !important;
						box-shadow: none !important;
						/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); */

						.icon {
							width: 34px;
							height: 34px;
							padding: 8px;
							display: flex;
							transition: 0.6s;
							border-radius: 50%;
							align-items: center;
							justify-content: center;
							border: 1px solid #ffffff30;
							/* background-color: #0081EB; */

							img {
								transition: 0.3s;
							}
						}

						span {
							color: #fff;
							font-size: 16px;
							font-weight: 500;
							transition: 0.3s;
							text-align: right;
							padding-left: 15px;
							display: inline-block;
							width: calc(100% - 30px);
							font-family: "Geologica", sans-serif;
							display: none !important;
						}
					}
				}

				&:hover {
					/* background-color: #0081EB; */

					.locIcon {
						a {
							color: #fff;

							.icon {
								background-color: #fff;

								img {
									filter: invert(1);
								}
							}

							span {
								color: #fff;
							}
						}
					}
				}
			}
		}
	}

	&.inner-header {
		/* background-color: #0091ff11; */
		/* background-color: #ffffff3d; */

		.headerInner {
			.headerRight{
				background-color: #00000060;
			}
			.menuWrap {
				.nav {
					ul {
						li {
							a{
								color: #fff;
							}
							.toggleBtn {
								color: #fff;
							}

							&:hover,
							&.active {
								.toggleBtn {
									color: #ffffff;
								}
							}
						}
					}
				}
			}
		}
	}
}

.fixHeader {
	header {
		padding: 5px 0;
		position: fixed;
		border-color: #ffffff50;
		background-color: #3b3b3be0;

		.container-fluid {
			z-index: 1;
			position: relative;
		}

		.headerInner {
			.logoWrap {
				width: 120px;

				.logo {
					width: 100%;
					display: inline-block;

					img {
						filter: brightness(0) invert(1);
					}
				}
			}

			.menuWrap {
				/* width: calc(100% - (250px + 300px)); */
				.nav {
					ul {
						li {
							&:before {
								top: -15px;
							}

							a {
								font-size: 14px;
								line-height: 1;
								color: #ffffff;
							}

							&:hover {
								&:before {
									height: 52px;
								}
							}

							&.active {
								&:before {
									height: 52px;
								}
							}

							.megaMenuWrap {
								top: 60px;
							}
						}
					}
				}
			}

			.callWrap {
				width: 220px;
				display: flex;
				justify-content: flex-end;

				.user-ico,
				.cart-ico {
					width: 30px;
					height: 30px;

					a {
						font-size: 14px;
					}
				}

				.callInner {
					/* width: 180px; */
					/* margin-left: auto;
					border-color: #fff;
					display: inline-block; */

					.locIcon {
						a {
							.icon {
								width: 30px;
								height: 30px;
								padding: 5px;
							}

							span {
								color: #fff;
								font-size: 14px;
								width: calc(100% - 30px);
							}
						}
					}
				}
			}
		}

		&.inner-header {
			.headerInner {
				.menuWrap {
					.nav {
						ul {
							li {
								.toggleBtn {
									color: #ffffff;
								}
							}
						}
					}
				}
			}
		}
	}
}

.side_menu {
	display: none;
}

/* start responsive */

@media (max-width: 1768px) {
	.fixHeader {
		header {
			.headerInner {
				.menuWrap {
					.nav {
						ul {
							li {
								.megaMenuWrap {
									top: 55px;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1600px) {
	header {
		& .headerInner {
			& .logoWrap {
				width: 190px;

				.logo {
					/* width: 160px; */
				}
			}

			& .menuWrap {
				/* width: calc(100% - (230px + 400px)); */

				& .nav {
					& ul {
						& li {
							.megaMenuWrap {
								top: 76px;
							}

							&:not(:last-child) {
								margin-right: 7px;
							}

							a {
								padding: 8px 10px;
							}
						}
					}
				}
			}

			.callWrap {

				/* width: 400px; */
				.callInner {

					/* width: 240px; */
					.locIcon {
						a {
							span {
								font-size: 18px;
							}
						}
					}
				}
			}
		}
	}

	.fixHeader {
		& header {
			& .headerInner {
				.logoWrap {
					/* width: 230px; */
				}

				.menuWrap {
					/* width: calc(100% - (230px + 300px)); */
				}

				.callWrap {

					/* width: 300px; */
					.callInner {
						/* width: 240px; */
					}
				}
			}
		}
	}
}

@media (max-width: 1440px) {
	header {
		.headerInner {
			.menuWrap {
				.nav {
					ul {
						li {
							padding-left: 6px;
							padding-right: 6px;

							&.has_mega_sub_menu {
								.megaMenuWrap {
									.megaMenuInner {
										.megaPorductWrap {
											&:before {
												width: 240px;
											}

											.megaBoxInner {
												&>ul {
													&>li.prodWrap {
														a {
															font-size: 16px;
														}

														&>a {
															width: 240px;
														}

														ul.megaCategoryWrap {
															left: 240px;
															height: 380px;
															width: calc(100% - 240px);

															& li.categoryProd {
																a.catBox {
																	width: 240px;
																}

																ul.megaTypeWrap {
																	height: 380px;
																	left: calc(240px + 240px);
																	width: calc(100% - (240px + 240px));

																	li {
																		a {
																			.figure {
																				img {
																					height: 90px;
																				}

																				figcaption {
																					.prodName {
																						font-size: 14px;
																						line-height: 14px;
																					}
																				}
																			}
																		}
																	}
																}
															}
														}

														&.prod_2,
														&.prod_3 {
															& ul.megaCategoryWrap {
																& li.categoryProd {
																	ul.megaTypeWrap {
																		left: calc(240px);
																		width: calc(100% - 240px);
																	}
																}
															}
														}
													}
												}

												ul {
													li {
														a {
															span {
																font-size: 14px;

																&.prodName {
																	font-size: 16px;
																	margin-bottom: 15px;
																}
															}
														}
													}
												}
											}
										}
									}
								}

								&:hover {
									.megaMenuWrap {
										height: 380px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

/* end 1440px */

@media (max-width: 1366px) {
	header {
		& .headerInner {
			& .logoWrap {}

			& .menuWrap {
				/* width: calc(100% - (200px + 320px)); */

				& .nav {
					& ul {
						& li {
							a {
								padding: 8px 6px;
								font-size: 16px;
							}

							.toggleBtn {
								width: 16px;
								height: 16px;
							}
						}
					}
				}
			}

			.callWrap {
				/* width: 200px; */

				.callInner {
					.locIcon {
						a {
							.icon {
								width: 34px;
								height: 34px;
								padding: 5px;
							}

							span {
								font-size: 14px;
								width: calc(100% - 34px);
								padding-left: 10px;
							}
						}
					}
				}
			}
		}
	}

	.fixHeader {
		& header {
			& .headerInner {
				.logoWrap {
					width: 140px;
				}

				.menuWrap {
					/* width: calc(100% - (140px + 200px)); */
				}

				.callWrap {
					/* width: 200px; */

					.callInner {
						/* width: 168px; */
					}
				}
			}
		}
	}
}

@media (max-width: 1280px) {
	header {
		.headerInner {
			.logoWrap {
				width: 140px;
			}

			.menuWrap {
				.nav {
					ul {
						li {
							.megaMenuWrap {
								top: 72px;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1240px) {
	header {
		& .headerInner {
			& .logoWrap {
				width: 170px;

				.logo {
					width: 120px;
				}
			}

			& .menuWrap {
				/* width: calc(100% - (170px + 300px)); */
				text-align: center;

				& .nav {
					& ul {
						& li {
							a {
								font-size: 15px;
							}
						}
					}
				}
			}

			.callWrap {
				/* width: 300px; */

				& .callInner {
					& .locIcon {
						& a {
							.icon {
								width: 30px;
								height: 30px;
							}

							span {
								width: calc(100% - 30px);
								padding-left: 6px;
							}
						}
					}
				}
			}
		}
	}

	.fixHeader {
		& header {
			& .headerInner {
				.logoWrap {
					width: 170px;
				}

				.menuWrap {
					/* width: calc(100% - (170px + 300px)); */
				}

				.callWrap {
					/* width: 300px; */

					.callInner {
						/* width: 158px; */
					}
				}
			}
		}
	}
}

@media (max-width: 1199px) {
	header {
		.headerInner {
			.menuWrap {
				.nav {
					ul {
						li {
							&.has_mega_sub_menu {
								.megaMenuWrap {
									.megaMenuInner {
										.megaPorductWrap {
											.megaBoxInner {
												&>ul {
													&>li.prodWrap {
														ul.megaCategoryWrap {
															li.categoryProd {
																ul.megaTypeWrap {
																	li {
																		a {
																			.figure {
																				width: 160px;
																			}
																		}
																	}
																}
															}
														}
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1180px) {
	header {
		& .headerInner {
			& .logoWrap {
				width: 140px;

				.logo {
					width: 100px;
				}
			}

			& .menuWrap {
				/* width: calc(100% - (140px + 300px)); */

				& .nav {
					& ul {
						& li {
							&:not(:last-child) {
								margin-right: 5px;
							}

							padding-left: 5px;
							padding-right: 5px;

							a {
								font-size: 14px;
							}
						}
					}
				}
			}

			.callWrap {
				/* width: 180px; */

				.callInner {
					padding: 4px 5px;
				}
			}
		}
	}

	.fixHeader {
		& header {
			& .headerInner {
				.logoWrap {
					width: 180px;
				}

				.menuWrap {
					/* width: calc(100% - (180px + 180px)); */
				}

				.callWrap {
					/* width: 180px; */
				}
			}
		}
	}
}

@media (max-width: 1120px) {
	.fixHeader {
		& header {
			& .headerInner {
				.logoWrap {
					width: 140px;
				}

				.menuWrap {
					/* width: calc(100% - (140px + 300px)); */
				}

				.callWrap {
					/* width: 180px; */
				}
			}
		}
	}
}

@media (max-width: 1024px) {
	header {
		.headerInner {
			.headerRight{
				padding: 10px 15px;
			}
			.menuWrap {
				display: none;
			}

			.callWrap {
				width: auto;
				padding-left: 0;
				padding-right: 0;
				/* width: calc(100% - 150px); */
				display: flex;
				justify-content: end;
				align-items: center;

				& .callInner {
					width: 150px;
				}
			}

			& .menuTrigger {
				padding: 10px;
				position: relative;
				cursor: pointer;
				float: left;
				transition: all 0.5s;

				.toggle-bar {
					width: 30px;
					margin: 7px 0;
					position: relative;
					border-top: 3px solid #fff;
					display: block;
					transition: all 0.5s;

					&::before {
						content: "";
						display: block;
						background: #fff;
						height: 3px;
						width: 30px;
						position: absolute;
						top: -12px;
						transition: all 0.5s;
					}

					&::after {
						content: "";
						display: block;
						background: #fff;
						height: 3px;
						width: 30px;
						position: absolute;
						top: 6px;
						transition: all 0.5s;
					}
				}

				&.active {
					.toggle-bar {
						border-top: unset;

						&::before {
							transform: rotate(45deg) translate(5px, 5px);
						}

						&::after {
							transform: rotate(-45deg) translate(7px, -8px);
						}
					}
				}
			}
		}
	}

	/* innar header */
	& header.inner-header {
		& .headerInner {
			.logoWrap {
				.logo {
					img {
						transition: 1.5s;
					}
				}
			}

			.callWrap {
				& .callInner {
					width: auto;
					margin-right: 20px;
				}
			}

			& .menuTrigger {
				.toggle-bar {
					border-top: 3px solid #ffffff;

					&::before {
						background: #ffffff;
					}

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

				&.active {
					.toggle-bar {
						border-top: 3px solid transparent;
					}
				}
			}
		}
	}

	.activeSideMenu {
		header.inner-header {
			.headerInner {
				.logoWrap {
					.logo {
						img {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}
	}

	/* end innar header */
	.fixHeader {
		header {
			& .headerInner {
				.callWrap {
					width: auto;

					& .callInner {
						width: auto;
						/* margin-left: 5px;
						margin-right: 15px; */
					}
				}

				& .menuTrigger {
					.toggle-bar {
						border-top: 3px solid #ffffff;

						&::before {
							background: #ffffff;
						}

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

					&.active {
						.toggle-bar {
							border-top: 3px solid transparent;
						}
					}
				}
			}
		}

		.side_menu {
			padding-top: 80px;
		}
	}

	.side_menu {
		display: block;
		clip-path: polygon(0 0, 100% 0, 74% 100%, 0% 100%);
		padding: 25px 0;
		left: -100%;
		z-index: 99;
		top: 0;
		position: fixed;
		background-color: #000000d9;
		backdrop-filter: blur(10px);
		width: 500px;
		height: 100%;
		transition: 0.5s;
		padding-top: 120px;

		&.active {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
			left: 0;
		}

		.sidebar_lst {
			width: 100%;
			overflow-y: auto;
			max-height: calc(100dvh - 110px);
			border-top: 1px solid #fff;

			ul {
				li {
					position: relative;
					margin: 10px 5px;
					border: 1px solid #ffffff;
					border-radius: 5px;

					&:not(:last-child), &:last-child {
						margin-bottom: 0;
					}

					a {
						display: inline-block;
						width: 100%;
						padding: 10px;
						color: #ffffff;
					}

					.toggleArrow {
						position: absolute;
						top: 0px;
                        z-index: 9;
                        right: 1px;
                        width: 42px;
                        height: 42px;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: 0.4s;
						background: #00519336;
					}

					&.current>.toggleArrow {
						i {
							transform: rotate(180deg);
						}
					}

					&.haschild {
						&>a {
							position: relative;

							&::after {
								content: "";
								position: absolute;
								top: 0;
								left: 0;
								width: 0;
								height: 100%;
								background-color: #0081ebc4;
								transition: 0.4s;
								z-index: -1;
							}
						}

						&.current>a {
							&::after {
								width: 100%;
							}
						}

						ul {
							padding-left: 10px;
							padding-bottom: 10px;

							a {
								position: relative;
								padding-left: 20px;
								z-index: 1;
							}

							li.haschild {
								margin: 0;
								border: unset;
								border-radius: unset;
								/* padding-right: 38px; */

								&:not(:last-child) {
									border-bottom: 1px solid #ffffff;
								}

								&>a {
									transition: 0.4s;
									
									&::after {
										width: 0px;
										height: 2px;
										background-color: #ffffff;
										top: 22px;
									}
								}

								&.current>a {
									padding-left: 25px;

									&::after {
										width: 20px;
									}
								}

								&.current {
									border-bottom: unset;

									&>ul {
										/* background-color: #0081ebc4; */
										/* background-color: #7c7c7cd4; */
										margin: 0 8px 0 0;
										padding-left: 0;

										& > li{
											a{
												padding-left: 35px;
											}

											/* ul{
												li{
													a{
														padding-left: 15px;
													}
												}
											} */

											&.current{
												a{
													padding-left: 40px;
												}
												ul{
													li{
														a{
															padding-left: 15px;
														}
													}
												}
											}
										}
									}

									.haschild {
										& > a {
											&::after {
												left: 16px;
											}
										}
									}
								}
							}

							ul {
								li {
									&.haschild {
										&.current {
											&>ul {
												background-color: transparent;
												margin: 0px;
												padding-bottom: 10px;
												padding-left: 10px;

												li {
													a {
														font-size: 14px;
														/* border: 1px solid #ffff; */
													}
												}
											}
										}
									}
								}
							}
						}
					}

					ul {
						display: none;
					}
				}
			}

			&::-webkit-scrollbar {
				width: 3px;
				background-color: #777777;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #ffffff;
				border-radius: 10px;
			}

			&::-webkit-scrollbar-track {
				background-color: #777777;
				border-radius: 10px;
			}
		}

		.li_2{
			& > ul{
				& > li{
					& > ul{
						& > li{
							background-color: #2e2e2e;
						}
					}
				}
			}
		}


		/* .li_2{
			li:nth-child(1){
				ul{
					background-color: #161615 !important;
				}
			}
			li:nth-child(2),
			li:nth-child(3){
				position: relative;
				& > ul{
					z-index: 20;
					position: relative;
					margin-top: -42px !important;
					background-color: #161615 !important;
					& > li{
						& > a{
							& + .toggleArrow{
								z-index: 10;
								right: 0 !important;
							}
						}
					}
				}
			}
		} */
	}
}

@media (max-width: 767px) {
	.side_menu {
		width: 390px;
	}
}

@media (max-width: 575px) {
	.side_menu {
		width: 100%;
	}

	.activeSideMenu {
		header.inner-header {
			.headerInner {
				& .callWrap {
					.callInner {
						/* border: 1px solid #ffffff; */

						& .locIcon {
							& a {
								span {
									color: #ffffff;
								}
							}
						}
					}
				}

				& .menuTrigger {
					.toggle-bar {
						/* border-top: 3px solid #ffffff; */

						&::before {
							background: #ffffff;
						}

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

	header {
		.headerInner {
			.callWrap {
				.user-ico, .cart-ico{
					margin-left: 0;
				}
				.callInner {
					width: auto !important;
					padding: 0;
					margin-left: 0;

					.locIcon {
						a {
							span {
								display: none;
							}
						}
					}
				}
				& .cart-ico {
					&:before {
						left: -10px;
					}
					&:after {
						right: -10px;
					}
				}
			}
		}
	}
}

@media (max-width: 480px) {
	header {
		& .headerInner {
			& .logoWrap {
				width: 120px;
			}

			.callWrap {
				/* width: calc(100% - 120px); */

				& .callInner {
					width: 150px;
				}
			}

			& .menuTrigger {
				& .toggle-bar {
					width: 24px;

					&::before {
						width: 24px;
					}

					&::after {
						width: 24px;
					}
				}
			}
		}
	}

	.fixHeader {
		header {
			& .headerInner {
				& .logoWrap {
					width: 120px;
				}

				.callWrap {
					/* width: calc(100% - 130px); */

					& .callInner {
						width: 150px;
					}
				}

				& .menuTrigger {
					& .toggle-bar {
						width: 24px;

						&::before {
							width: 24px;
						}

						&::after {
							width: 24px;
						}
					}
				}
			}
		}
	}
}

/* .cat_1 ul{
	background-color: #ffdddd !important;
}
.cat_2s ul{
	background-color: #fddfff !important;
}
.cat_3 ul{
	background-color: #fffcdd !important;
}
.cat_4 ul{
	background-color: #e9fff2 !important;
} */