.mob__textContainer,
.mob__iconsContainer {
	display: none;
}

.hide {
	visibility: hidden;
}

.header {
	z-index: 100;
	position: relative;
}
.header * {
	color: var(--c3);
	font-size: clamp(
		0.625rem,
		calc(8px + (14 - 8) * ((100vw - 320px) / (1440 - 320))),
		0.875rem
	);
	font-weight: 600;
}
.header__icon {
	height: auto;
	width: clamp(
		20px,
		calc(20px + (35 - 20) * ((100vw - 320px) / (1440 - 320))),
		35px
	);
}

.header__inner {
	background: url("../../media/header/bg.webp");
	background-size: cover;
	background-position: center;
	border-radius: 0 0 30px 30px;
	width: 100%;
	padding: clamp(
			6px,
			calc(6px + (88 - 6) * ((100vw - 320px) / (1440 - 320))),
			88px
		)
		clamp(
			6px,
			calc(6px + (43 - 6) * ((100vw - 320px) / (1440 - 320))),
			43px
		)
		clamp(
			6px,
			calc(6px + (24 - 6) * ((100vw - 320px) / (1440 - 320))),
			24px
		);
	top: 0;
}

.header__contentWrapper {
	background: var(--c1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 60px;
	position: relative;
	border-radius: 30px;
	max-width: 1270px;
	width: 100%;
	margin: 0 auto;
}

.nav {
	display: flex;
	align-items: center;
	gap: clamp(
		10px,
		calc(10px + (30 - 10) * ((100vw - 320px) / (1440 - 320))),
		30px
	);
}

.phoneNumber {
	white-space: nowrap;
}

.returnBack__btn {
	white-space: nowrap;
}

.logo {
	margin-top: -55%;
	width: clamp(
		130px,
		calc(130px + (189 - 130) * ((100vw - 320px) / (1440 - 320))),
		189px
	);
	height: auto;
}

.header__text-wrapper {
	display: flex;
	align-items: center;
	gap: clamp(
		30px,
		calc(30px + (81 - 30) * ((100vw - 320px) / (1440 - 320))),
		81px
	);
}

.header__text {
	font-weight: 400;
	line-height: 2;
}

.socials_wrapper {
	display: flex;
	align-items: center;
	gap: clamp(
		6px,
		calc(6px + (12 - 6) * ((100vw - 320px) / (1440 - 320))),
		12px
	);
}
.social_link {
	cursor: pointer;
}

/* Menus */
.menuBtns__wrapper {
	display: flex;
	align-items: center;
	gap: clamp(
		10px,
		calc(10px + (30 - 10) * ((100vw - 320px) / (1440 - 320))),
		30px
	);
	position: relative;
	width: 100%;
	justify-content: space-between;
	max-width: 450px;
}

.menu_btn {
	position: relative;
	cursor: default;
	text-transform: uppercase;
	transition: all 0.2s;
	white-space: nowrap;
}
.menu_btn::after {
	content: "";
	position: absolute;
	right: -15%;
	height: 100%;
	bottom: 5%;
	width: 12px;
	background: url("../../media/header/menu-arrow.svg") no-repeat;
	background-size: contain;
	background-position: center;
	transition: all 0.2s;
}

.btnWrapper:hover .menu_btn {
	transition: all 0.2s;
	color: var(--c4);
}
.btnWrapper:hover .menu_btn::after {
	content: "";
	transition: all 0.2s;
	background: url("../../media/header/arrow-active.webp") no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	height: 100%;
	bottom: 5%;
	width: 12px;
}

.headerMenu {
	position: absolute;
	top: 100%;

	z-index: 100;
	border-radius: 10px;
	box-shadow: 0 0 20px #000;

	display: none;
	flex-direction: column;
	align-items: flex-start;
}

.menuItem {
	background: var(--c3);
	transition: all 0.2s;
	color: var(--c1);
	padding: 5px 30px;
	border-bottom: 1px solid var(--c1);
	border-radius: 5px;
	width: 100%;
	font-size: 0.875rem;
	text-align: left;

	position: relative;
}
.menuItem:hover {
	transition: all 0.2s;
	color: var(--c3);
	background: var(--c1);
}
.menuItem::before {
	content: "";

	background: url("../../media/point_icon.png") no-repeat;
	background-position: center;
	background-size: contain;

	width: 20px;
	aspect-ratio: 1;

	position: absolute;
	left: 5px;
	top: 50%;
	transform: translate(0, -50%);
}
.menuItem:hover::before {
	background: url("../../media/btn-arrow.png") no-repeat;
	background-position: center;
	background-size: contain;
}

/* Hover effects */
.btnWrapper:hover .headerMenu {
	display: flex !important;
}

/* Back btn */
.header__back-btn{
	font-size: 1rem;
}

/* Adaptability */
@media (max-width: 992px) {
	.header {
		background: var(--c4);
		border-radius: 0 0 30px 30px;
	}
	.header__contentWrapper .call_btn,
	.header__contentWrapper .call_icon,
	.header__contentWrapper .header__phone-number,
	.header__contentWrapper .header__text-wrapper {
		display: none;
	}
	.header__inner {
		border-radius: 30px;
		padding: 0 45px;
	}
	.header__contentWrapper {
		flex-direction: column-reverse;
		gap: 10px;
		width: 100%;
	}
	.menuBtns__wrapper {
		gap: 20px;
	}
	.menu_btn::after {
		right: -20%;
	}

	.logo {
		margin-top: -30%;
		width: 130px;
	}
	.mob__textContainer {
		display: flex;
		width: 100%;
		align-items: flex-start;
		justify-content: space-between;
		padding: 15px 15px 30px;
		gap: 20px;
	}
	.mob__iconsContainer * {
		color: var(--text);
	}
	.phoneNumber {
		color: var(--c1);
	}
	.header__text {
		color: var(--text);
	}

	.header__innerWrapper {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		top: -10px;
	}
	.mob__iconsContainer {
		display: flex;
		align-items: center;
		gap: 5px;

		padding: 10px 20px;
		background: var(--c1);
		border-radius: 30px;
		z-index: -1;

		position: relative;
		top: -10px;


	}
	.header__icon {
		width: 40px;
	}

	/* Menus */
	.infoBtn__wrapper:hover .info__menu {
		display: flex !important;
		left: 0;
	}
}