@use '../../utils/' as *;

/*============= HEADER CSS AREA ===============*/

// HOMEPAGE1 HEADER STARTS //
.homepage1-body,
html {
	overflow-x: hidden !important;
}

.commingsoon {
	height: 280px !important;
	width: 100%;
	object-fit: cover;
	filter: blur(5px);
	border-radius: 4px;
}

.homepage1-body {
	overflow-x: hidden;

	.header-area.homepage1 {
		position: absolute;
		width: 100%;
		z-index: 9999;
		padding: 16px 0;
		transition: all .4s;

		.header-elements {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			transition: all .4s;

			.main-menu {
				position: relative;

				ul {
					li {
						display: inline-block;
						position: relative;

						.tp-submenu {
							.homemenu-thumb {
								transition: all .4s;
								position: relative;
								z-index: 1;

								&:hover {
									.img1 {
										&::after {
											transform: scale(1);
											transition: all .4s;
											visibility: visible;
											opacity: 0.7;
										}
									}

									.homemenu-btn {
										top: 42%;
										visibility: visible;
										opacity: 1;
										transition: all .6s;
									}
								}

								.img1 {
									position: relative;
									z-index: 1;
									overflow: hidden;

									&::after {
										position: absolute;
										content: "";
										height: 100%;
										width: 100%;
										left: 0;
										top: 0;
										transition: all .4s;
										background: var(--ztc-text-text-2);
										opacity: 0;
										border-radius: 4px;
										transform: scale(0.8);
										z-index: 1;
										visibility: hidden;
									}

									img {
										height: 100%;
										width: 100%;
										border-radius: 4px;
										transition: all .4s;
										border: 1px solid #E5E7EB;
									}
								}

								.homemenu-btn {
									position: absolute;
									top: 30%;
									z-index: 2;
									visibility: hidden;
									opacity: 0;
									text-align: center;
									transition: all .6s;
									margin: 0 auto;
									left: 25%;
									right: 25%;

									.header-btn1 {
										color: var(--ztc-text-text-1);
										transition: all .4s;
										padding: 6px 15px;
									}
								}
							}

							.homemenu-content {
								a {
									font-family: var(--grotesk);
									font-size: var(--ztc-font-size-font-s24);
									line-height: var(--ztc-font-size-font-s24);
									font-weight: var(--ztc-weight-semibold);
									color: var(--ztc-text-text-2);
									transition: all .4s;
									margin-top: 20px;
									text-align: center;
								}
							}
						}

						&:hover {
							.tp-submenu {
								visibility: visible;
								transition: all 0.5s ease-in-out;
								opacity: 1;
								z-index: 9;
								top: 50px;
								position: absolute;
								transition: all .4s;
							}

							ul.dropdown-padding {
								visibility: visible;
								transition: all 0.5s ease-in-out;
								opacity: 1;
								z-index: 9;
								top: 50px;
								position: absolute;
								transition: all .4s;
							}
						}

						a {
							font-family: var(--grotesk);
							font-size: var(--ztc-font-size-font-s18);
							font-weight: var(--ztc-weight-medium);
							color: var(--ztc-text-text-2);
							display: inline-block;
							transition: all .4s;
							padding: 0 20px;
						}

						&:hover>a {
							transition: all .4s;
							color: var(--ztc-text-text-4) !important;
						}

						.tp-submenu {
							visibility: hidden;
							opacity: 0;
							box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px;
							position: absolute;
							background: var(--ztc-text-text-1);
							top: 100px;
							z-index: 1;
							transition: all .4s;
							border-radius: 5px;
							padding: 15px;
							left: -160px;
							width: 1100px;
							max-height: 600px;

							overflow: hidden;
							overflow-y: scroll;
						}

						ul.dropdown-padding {
							visibility: hidden;
							opacity: 0;
							box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px;
							position: absolute;
							background: var(--ztc-text-text-1);
							top: 100px;
							width: 225px;
							z-index: 1;
							transition: all .4s;
							border-radius: 5px;
							padding: 15px;

							li.main-small-menu {
								position: relative;

								&:hover>a {
									transition: all .4s;
									padding-left: 25px;
									color: var(--ztc-text-text-4);
								}

								&:hover>a::after {
									background: var(--ztc-text-text-4);
									transition: all .4s;
									visibility: visible;
									opacity: 1;
									color: var(--ztc-text-text-4);
								}
							}

							li {
								display: block;

								a {
									font-family: var(--grotesk);
									font-weight: var(--ztc-weight-medium);
									transition: all .4s;
									padding: 8px;
									display: inline-block;
									position: relative;
									z-index: 1;
									border-radius: 4px;
									color: var(--ztc-text-text-2);

									&::after {
										position: absolute;
										content: "";
										height: 25px;
										width: 3px;
										transition: all .4s;
										z-index: -1;
										left: -10px;
										top: 20%;
										border-radius: 4px;
										display: inline-block;
										visibility: hidden;
										opacity: 0;
										background: var(--ztc-text-text-4);
									}

									&:hover {
										padding-left: 25px;
										color: var(--ztc-text-text-4);

										&::after {
											border-radius: 4px;
											visibility: visible;
											transition: all .4s;
											opacity: 1;
											left: 0;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.header-area.homepage1.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transform: translate3d(0, 0, 0);
	z-index: 111;
	-webkit-animation-name: fade-in-down;
	animation-name: fade-in-down;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	background: var(--ztc-text-text-15);
	transition: all .4s;
}

/*============= HEADER CSS AREA ENDS ===============*/