.header-navs {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
	z-index: var(--z-header);

	@media (width > 1000px) {
		gap: var(--spacing-10);
	}
}

.header-navs__secondary {
	background: linear-gradient(90deg, rgba(153, 153, 153, 0.00) 33.23%, rgba(255, 255, 255, 0.20) 100%);
	backdrop-filter: blur(16px);
	padding: var(--spacing-10) 0;

	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		@media (width > 1000px) {
			justify-content: flex-end;
		}
	}
}

.header-navs__nav-toggle {
	@media (width > 1000px) {
		display: none;
	}
}

.header-navs__logo-menu {
	position: relative;

	.container {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--spacing-20);

		@media (width > 1620px) {
			justify-content: space-between;
		}
	}
}

.header-navs__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 500px;
	max-width: 100%;
}

.header-navs__menu {
	max-height: 0;
	width: 100%;
	overflow: hidden;
	transition: 0.3s max-height;
	gap: var(--spacing-3);
	position: absolute;
	top: calc(var(--spacing-10) * -1);
	left: 0;
	background: var(--white);
	padding-inline: var(--spacing-10);

	.js-body-nav-toggle & {
		max-height: 9999px;
	}

	@media (width > 1000px) {
		top: auto;
		left: auto;
		position: relative;
		max-height: none;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
		border-radius: var(--btn-radius);
		width: fit-content;
		border: 1px solid rgba(255, 255, 255, 0.20);
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 100%);
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
		padding: var(--spacing-3) var(--spacing-3) 0 var(--spacing-3);
	}

	ul.menu-header__list {
		padding-block-start: var(--spacing-10);

		@media (width > 1000px) {
			padding-block-start: 0;
		}
	}
}

.header-navs__search-toggle {
	display: none;

	@media (width > 1000px) {
		display: block;
	}
}

.header-navs__search {
	width: 100%;
	padding-block: var(--spacing-10);

	@media (width > 1000px) {
		overflow: hidden;
		padding-block: 0;
		max-height: 0;
		position: absolute;
		top: 0;
		transition: 0.3s max-height;
		right: 0;
		z-index: -1;
		display: flex;
		justify-content: flex-end;
	}

	.js-body-search-toggle & {
		max-height: 9999px;
	}
}

.header-navs__search-dropdown {
	@media (width > 1000px) 	{
		display: flex;
		justify-content: flex-end;
		width: 100%;
		max-width: 600px;
		padding: var(--spacing-50) var(--spacing-10) var(--spacing-10)
			var(--spacing-10);
		border-radius: var(--border-radius);
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 60%,
			rgba(255, 255, 255, 0.2) 100%
		);
		backdrop-filter: blur(16px);
	 -webkit-backdrop-filter: blur(16px);
	}
}