/* Navbar */
.navbar {
	font-family: var(--secondary-font);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0 20px 0;
	background-color: transparent;
	position: fixed;
	width: 100%;
	z-index: 101;
	transition: all 0.5s;

	.container-fluid {
		padding: 0 45px;
	}

	.logo {
		width: 190px;
        height: auto;
        background-color: #fff;
        border-radius: 12px;
        padding: 10px; 

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.nav-links {
		display: flex;
		align-items: center;
		width: calc(100% - 220px);
		justify-content: space-between;

		ul {
			position: relative;
			display: flex;
			list-style: none;
			gap: 30px;
			margin-right: 0;
			margin-bottom: 0;
			justify-content: center;
			width: calc(100% - 260px);
			padding-left: 0;

			li {
				a {
					color: white;
					text-decoration: none;
					font-size: 16px;
					transition: all 0.5s;
				}

				ul {
					display: none;
					position: absolute;
					top: 100%;
					background: white;
					color: black;
					padding: 10px;
					list-style: none;
					border-radius: 5px;
					box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

					&.dropdown-menu {
						margin-right: 0;
						width: 320px;

						li {
							position: relative;

							a {
								display: block;
								position: relative;
								color: #000;
								padding: 10px 20px;

								::before {
									position: absolute;
									content: '';
									bottom: -2px;
									left: 0;
									width: 0;
									height: 1px;
									background-color: var(--color-red);
									transition: 0.4s;
								}
							}

							&:not(:last-child) {
								border-bottom: 1px solid rgb(66 66 66 / 17%);
							}

							&::before {
								/* top: 50%; */
								/* transform: translateY(-50%); */
								top: 16px;
								bottom: inherit;
								left: 0px;
								background-color: var(--color-red);
							}

							&:hover {
								a {
									position: relative;
									color: var(--color-red);

									::before {
										width: 100%;
									}
								}
							}
						}
					}
				}

				&:hover {
					&::before {
						position: absolute;
						content: '';
						top: -12px;
						width: 11px;
						height: 11px;
						background-color: #fff;
						border-radius: 50%;
					}

					a {
						color: #ff3333;
					}

					ul {
						display: block;
					}

					&.dropdown {
						.toggleBtn {
							i {
								transform: rotate(180deg);
								color: #ff3333;
							}
						}
					}
				}

				&.dropdown {
					position: relative;
					z-index: 5;

					.toggleBtn {
						i {
							color: #fff;
							font-size: 14px;
							margin-left: 4px;
							transition: .4s;
						}
					}

					.mega-menu-wrapper {
						padding-top: 25px;
						overflow: hidden;
						position: absolute;
						top: 100%;
						left: 0;
						width: auto;
						color: black;
						display: none;
						box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
						border-radius: 8px;
					}

					&:hover {
						.mega-menu-wrapper {
							display: block;
						}
					}
				}
			}
		}
	}

	.icons-header {
		display: flex;
		align-items: center;
		width: 220px;

		.icon-separator {
			position: relative;
			padding: 0 12px;

			&:not(:last-child) {
				&::after {
					position: absolute;
					content: "";
					width: 1px;
					height: 30px;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					background-color: #fff;
				}
			}

			&:nth-child(3) {
				&::after {
					content: normal !important;
				}
			}

			a {
				width: 30px;
				height: 30px;
				border: 1px solid #FFFFFF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				padding: 4px;

				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}

				i {
					color: #fff;
					font-size: 16px;
				}

				&:hover {
					background-color: #ff3333;
					border-color: transparent;
				}
			}

			&.toggle-wrap {
				display: none;
			}

		}

	}

	&.show {
		background-color: #000;
		padding: 10px 0 10px 0;

		.logo {
			width: 100px;
			height: 60px;
		}

		.icons-header {
			.icon-separator {
				padding: 0 10px;

				a {
					width: 28px;
					height: 28px;
				}
			}
		}

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

	.headerRtRes {
		display: none;
	}
}

/* megamenu */
.mega-menu {
	.heading-wrapper {
		padding: 20px 30px;
		background-color: #edeff4;
		border-radius: 8px 8px 0 0;
		border-bottom: 1px solid #ddd;

		h3 {
			font-size: 22px;
			margin-bottom: 15px;
			color: var(--color-blue) !important;
			font-weight: 700;
			font-family: var(--secondary-font);

			&::after {
				position: absolute;
				content: "";
				background-color: #00000024;
				width: 87%;
				height: 1px;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
			}
		}
	}


	.product-grid {
		background-color: #fff;
		display: flex;
		padding: 27px;
		border-radius: 0 0 8px 8px;
		gap: 15px;
		overflow-x: auto;

		.product-item {
			text-align: center;
			width: 137px;
			height: auto;
			cursor: pointer;
			transition: transform 0.3s, box-shadow 0.3s;

			.product-item-image {
				width: 100%;
				height: 220px;
				position: relative;
				overflow: hidden;
				border-radius: 8px;

				&::before {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					top: 0;
					right: -150%;
					bottom: -100%;
					transform: rotate(45deg) scale(1);
					background-color: #D5000959;
					transition: 0.4s;
				}

				&::after {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					top: 0;
					right: -150%;
					bottom: -100%;
					transform: rotate(45deg);
					background-color: #D500099E;
					transition: 0.4s;
				}

				img {
					width: 100%;
					height: 100%;
					border-radius: 8px;
					object-fit: cover;
				}
			}

			p {
				text-align: left;
				font-size: 16px;
				font-weight: 400;
				line-height: 15px;
				transition: 0.4s;
				color: #404040;
			}

			&:hover {
				p {
					font-size: 16px;
					font-weight: 700;
					line-height: 15px;

					color: var(--color-blue);
				}
			}

			&:hover {
				.product-item-image {
					&::before {
						width: 156%;
						height: 142%;
						transform: rotate(29deg) scale(1.5);
						background-color: #D5000959;
					}

					&::after {
						width: 156%;
						height: 142%;
						transform: rotate(29deg) scale(1.3);
						background-color: #D500099E;
					}
				}
			}
		}
	}

}

/* Right Icons */
.icons i {
	color: white;
	font-size: 18px;
	margin-left: 20px;
	border: 1px solid white;
	border-radius: 50%;
	padding: 8px;
	width: 36px;
	height: 36px;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
	transition: all 0.3s;
}

.icons i:hover {
	background: white;
	color: black;
}

.mob_menu_wrap {
	display: none;
}

.toggle-wrap {
	display: none;
}

/* .mobMenuBtn {
	display: none;
}

.sideMenuGrid {
	display: none;
} */

/* mobile bottom bar */
.mobBottomMenu {
	position: fixed;
	bottom: 10px;
	left: 50%;
	width: 100%;
	max-width: 95%;
	transform: translate(-50%);
	z-index: 222;
	background: #000000c4;
	padding: 15px;
	display: none;
	backdrop-filter: blur(15px);
	border-radius: 100px;
	border: 1px solid #ffffffa8;
	display: none;

	ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
		list-style-type: none;
		margin-bottom: 0;
		padding-left: 0;

		li {
			width: 20%;
			flex: 0 0 20%;
			text-align: center;
			list-style-type: none;

			a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				text-decoration: none;

				img {
					width: 22px;
					height: 22px;
					object-fit: contain;
				}

				i {
					font-size: 20px;
					color: #fff;
				}

				&.enquire-btn {
					position: static;
					width: auto;
					height: auto;
					background: transparent;
					border: none;
					margin: 0;
					padding: 0;
					transform: none;
				}
			}
		}
	}
}

/* 404 not found */
.notFoundSec {
	padding-top: 200px !important;
	padding-bottom: 120px !important;

	.notFoundSecInn {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;

		.notFoundSecCont {
			h1 {
				color: var(--color-red);
			}

			.notFoundImg {
				width: 100%;
				height: 350px;

				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}

			p {
				color: #838383;
				font-size: 22px;
				margin-bottom: 10px;
				font-weight: 600;
			}

			.common-btn {
				margin-top: 20px;
			}
		}
	}
}

/* thank you */
.thankYouSec {
	padding-top: 200px !important;
	padding-bottom: 120px !important;

	.thankYouSecInn {
		text-align: center;

		.thankYouTxt {
			position: relative;
			text-align: center;

			h2 {
				width: 100%;
				font-size: 100px;
				margin: 0;
				display: flex;
				justify-content: center;
				font-family: var(--secondary-font);

				&.first {
					color: transparent;
					-webkit-text-stroke: 2px #c7070e;
				}

				&.second {
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					color: #c7070e;
					-webkit-text-stroke: 2px #c7070e;
					animation: waves 4s ease-in-out infinite;
				}
			}
		}

		p {
			margin: 10px 0px 40px;
			font-size: 18px;
			line-height: 28px;
			margin-bottom: 20px;
		}

		.common-btn {
			margin-top: 20px;
		}
	}
}

@keyframes waves {

	0%,
	100% {
		clip-path: polygon(0% 45%,
				16% 44%,
				33% 50%,
				54% 60%,
				70% 61%,
				84% 59%,
				100% 52%,
				100% 100%,
				0% 100%);
	}

	50% {
		clip-path: polygon(0% 60%,
				15% 65%,
				34% 66%,
				51% 62%,
				67% 50%,
				84% 45%,
				100% 46%,
				100% 100%,
				0% 100%);
	}
}

.page-template-404-not-found,
.page-template-thank-you,
.page-template-privacy-policy,
.page-template-terms-and-conditions,
.search-results {
	.navbar {
		background-color: #000;
	}
}

.privacyPolicyPage,
.termsConditionsPage {
	.privacySec {
		padding-top: 200px !important;

		h3 {
			margin-bottom: 8px;
			color: #D50009;
			font-weight: 600;
		}

		p {
			margin-bottom: 18px !important;
		}

		ul,
		li {
			font-family: var(--secondary-font);
			font-size: 18px;
			margin-bottom: 10px;
		}

		a {
			color: #000;
		}

		.privacySecInn {
			margin-bottom: 30px;
		}
	}
}

#translatePopup {
	top: 90px !important;
	right: 120px !important;

	select {
		min-height: 45px;
		border-radius: 10px;
	}
}

.navbar {
	&.show {
		#translatePopup {
			top: 70px !important;
		}
	}
}

/* search results */
.serPageSec {
	padding-top: 200px !important;

	.searchWrapItm {
		.search-item {
			&:not(:last-child) {
				margin-bottom: 30px;
			}

			.eachSearch {
				background-color: #EDEFF4;
				border-radius: 25px;
				padding: 20px 25px;

				a {
					display: block;
					width: 100%;
					height: 100%;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 15px;
					}
				}

				.endSerHead {
					a {
						font-size: 25px;
						color: #404040;
						text-decoration: none;
					}
				}
			}
		}
	}

	.pagination {
		.nav-links {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 10px;
			width: 100%;
			padding-top: 50px;
		}
	}
}

/* Responsive */

@media(max-width: 1768px) {
	.navbar {
		.nav-links {
			ul {
				width: calc(100% - 205px);
			}
		}

		.icons-header {
			width: 205px;
		}
	}
}

@media(max-width: 1580px) {
	.navbar {
		.logo {
			width: 190px;
		}

		.nav-links {
			width: calc(100% - 190px);

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

					&.dropdown {
						.mega-menu-wrapper {
							left: -7vw;
						}
					}
				}
			}
		}
	}

}

@media(max-width: 1440px) {
	.navbar {
		.container-fluid {
			padding: 0 25px;
		}

		.logo {
			width: 170px;
		}

		.nav-links {
			width: calc(100% - 170px);

			ul {
				gap: 14px;

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

		.icons-header {
			justify-content: center;

			.icon-separator {
				padding: 0 9px;

				a {
					width: 26px;
					height: 26px;
					padding: 3px;
				}
			}
		}

		&.show {
			.nav-links {
				ul {
					li {
						a {
							font-size: 14px;
						}
					}
				}
			}

			.icons-header {
				& .icon-separator {
					a {
						width: 26px;
						height: 26px;
					}
				}
			}
		}
	}
}

@media(max-width: 1366px) {
	.navbar {
		padding: 14px 0 14px 0;

		.logo {
			width: 160px;
		}

		.nav-links {
			width: calc(100% - 160px);

			ul {
				li {
					&.dropdown {
						& .toggleBtn {
							i {
								font-size: 12px;
							}
						}

						.mega-menu-wrapper {
							left: -12vw;
						}
					}

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

			.icons-header {
				justify-content: center;
			}
		}
	}

	.privacyPolicyPage,
	.termsConditionsPage {
		.privacySec {
			h3 {
				font-size: 22px;
			}
		}
	}

	.serPageSec {
		padding-top: 170px !important;
	}
}

@media(max-width: 1280px) {}

@media (max-width: 1199px) {
	.notFoundSec {
		padding-top: 150px !important;
		padding-bottom: 120px !important;
	}

	.navbar {
		padding: 10px 0px;

		.nav-links {
			justify-content: flex-end;

			ul {
				display: none;
			}
		}

		.icons-header {
			width: auto;

			.icon-separator {
				&:nth-child(3) {
					&::after {
						content: '' !important;
					}
				}

				&.toggle-wrap {
					display: block;
					padding-right: 0 !important;
				}
			}
		}
	}

	.logo {
		width: 180px;
		display: block;
	}

	.mob_menu_wrap {
		display: block;

		.logo {
			width: 120px;
		}
	}

	.menuWrap {
		display: none;
	}

	.overlay {
		position: fixed;
		width: 100%;
		transform: translateX(-100%);
		transition: 0.5s;
		top: 0;
		left: 0;
		height: 100%;
		background-color: #41414167;
		z-index: 9999;
		backdrop-filter: blur(10px);
		transition: 0.5s;

		&.overlay-active {
			transform: translateX(0);
		}
	}

	.toggle-wrap {
		display: block;
		position: relative;
		cursor: pointer;
	}

	.mob_menu_wrap {
		position: fixed;
		width: 340px;
		height: 100%;
		background-color: #fff;
		backdrop-filter: blur(20px);
		left: 0;
		top: 0;
		transform: translateX(-110%);
		transition: all 0.5s;
		z-index: 99999;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
		/* border-right: 5px solid #c7070e; */

		&.active {
			transform: translateX(0%);
		}

		::-webkit-scrollbar {
			width: 4px;
			height: 4px;
		}

		::-webkit-scrollbar-thumb {
			background-color: #c7070e;
		}
	}

	.mobCloseMenu {
		top: 20px;
		right: 10px;
		width: 30px;
		height: 30px;
		display: flex;
		cursor: pointer;
		position: absolute;
		align-items: center;
		justify-content: center;
		background-color: #c7070e20;

		i {
			color: #000;
			font-size: 22px;
		}
	}

	.mob_menu_tp {
		padding: 20px 10px;
		margin-bottom: 10px;
		border-bottom: 3px solid #c7070e;

		img {
			width: 80px;
		}
	}

	.mob_menu_nav {
		height: calc(100% - 150px);
		overflow-y: auto;
		padding-right: 0px;

		.sub-menu {
			display: none;
			background-color: var(--color-blue);

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

				a {
					color: #fff;
					font-size: 14px !important;
				}
			}
		}

		.mega-menu {
			.heading-wrapper {
				display: none;
			}

			.product-grid {
				flex-direction: column;
				padding: 0;
				gap: 0;
				background-color: var(--color-blue);
				border-radius: 0;

				.product-item {
					width: 100%;
					font-weight: 400 !important;
					padding: 10px 10px 10px 25px;
					border-bottom: 1px solid #fff;
					font-family: 'CenturyGothic', sans-serif !important;

					.product-item-image {
						display: none;
					}

					a,
					p {
						color: #fff;
						font-size: 16px;
						font-weight: 400 !important;
						font-family: 'CenturyGothic', sans-serif !important;
					}
				}
			}
		}

		ul {
			padding-left: 0;

			li {
				list-style-type: none;
				position: relative;
				transition: .4s;

				&:not(:last-child) {
					&::before {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background-color: rgba(0, 0, 0, 0.2);
						border-radius: 5px;
						transition: .4s;
					}
				}

				a {
					width: calc(100% - 28px);
					color: #000;
					transition: .4s;
					display: inline-block;
					padding: 10px 10px 10px 10px;
					font-size: 18px !important;
					text-decoration: none;
					font-family: 'CenturyGothic', sans-serif !important;
				}

				&.hasSideUL {
					position: relative;

					span {
						position: absolute;
						top: 10px;
						right: 15px;
						z-index: 999;

						i {
							color: #000;
							font-size: 14px;
							transition: .4s;
						}
					}

					.sub_menu {
						display: none;
					}

					&.has-dropdown-open {
						.sub_menu {
							display: block;
						}

						span {
							i {
								transform: rotate(180deg);
							}
						}
					}
				}

				ul {
					li {
						&::before {
							content: normal;
						}

						&:not(:last-child) {
							margin-bottom: 0px;
							padding-bottom: 1px;
						}

						a {
							width: 100%;
							font-weight: 400 !important;
							padding: 10px 10px 10px 25px;
							;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 991px) {
	.notFoundSec {
		padding-bottom: 90px !important;

		.notFoundSecInn {
			.notFoundSecCont {
				h1 {
					font-size: 40px;
				}

				.notFoundImg {
					height: 280px;
				}
			}
		}
	}

	/* thank you page start */

	.thankYouSec {
		padding-top: 160px !important;
		padding-bottom: 100px !important;

		.thankYouSecInn {
			.thankYouTxt {
				h2 {
					font-size: 80px;
				}
			}
		}
	}

	/* thank you page end */

	.privacyPolicyPage,
	.termsConditionsPage {
		.privacySec {
			h3 {
				font-size: 18px;
				margin-bottom: 5px;
			}

			.privacySecInn {
				margin-bottom: 20px;
			}
		}
	}

	.navbar {
		.logo {
			width: 120px;
		}

		.nav-links {
			width: calc(100% - 120px);
		}

		.icons-header {
			.icon-separator {
				padding: 0 9px;

				a {
					width: 30px;
					height: 30px;
				}
			}
		}

		&.show {
			.icons-header {
				.icon-separator {
					padding: 0 9px;

					a {
						width: 30px;
						height: 30px;
					}
				}
			}
		}
	}

	.serPageSec {
		padding-top: 130px !important;

		.secHead {
			text-align: center;
		}

		.searchWrapItm {
			.search-item {
				.eachSearch {
					.endSerHead {
						a {
							font-size: 20px;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {

	/* thank you page start */
	.thankYouSec {
		.thankYouSecInn {
			.thankYouTxt {
				h2 {
					font-size: 60px;
				}
			}

			p {
				margin: 10px 0px 20px;
			}
		}
	}

	/* thank you page end */

	.privacyPolicyPage,
	.termsConditionsPage {
		.privacySec {
			padding-top: 160px !important;

			p {
				margin-bottom: 16px !important;
			}
		}
	}
}

@media (max-width: 575px) {

	.mobBottomMenu {
		display: block;
	}

	.notFoundSec {
		padding-bottom: 90px !important;

		.notFoundSecInn {
			.notFoundSecCont {
				h1 {
					font-size: 30px;
				}

				p {
					font-size: 20px;
				}

				.notFoundImg {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	.navbar {
		.container-fluid {
			padding: 0 12px;
		}

		.logo {
			width: 120px;
			height: auto;
		}

		.nav-links {
			width: calc(100% - 100px);
			display: none;
		}

		&.show {
			#translatePopup {
				top: 20px !important;
			}
		}
	}

	#translatePopup {
		top: 15px !important;
		right: 15px !important;
		background-color: transparent !important;
		padding: 0 !important;
		display: block !important;

		select {
			min-height: 40px;
			color: #fff;
			background-color: transparent !important;
			padding: 5px 10px !important;
			font-size: 13px !important;

			option {
				color: #000 !important;
			}
		}
	}

	.mob_menu_wrap {
		.logo {
			width: 80px;
		}
	}

	.serPageSec {
		.pagination {
			padding: 10px 0px 30px;
			.nav-links {
				padding-top: 0;
			}
		}
	}
}