.header-site {
	padding-top: clamp(24px, 20.24px + 1.00vw, 39.5px);
	padding-bottom: clamp(24px, 20.24px + 1.00vw, 39.5px);
	position: sticky;
	top: 0;
	z-index: 999; /* чтобы шапка была поверх */
	transition: background-color 0.3s ease;
	background-color: transparent;
	border-bottom: 1px solid #322e39;
}

.site-logo img {
    width: clamp(120px, 15vw, 209px);
    height: auto;
}


.header-site.scrolled {
	background-color: rgba(25, 24, 29, 0.92); /* #19181d с 75% прозрачностью */
}

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

.logo-site {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: clamp(15px, -12.99px + 2.55vw, 36px);
	text-transform: uppercase;
	color: var(--d430a7);	
}

.logo-site-mobile {
	display:none;
	width:45px;
	height:45px;
	background:var(--d430a7);
	border-radius:50%;
	justify-content:center;
	align-items:center;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 40px;
	text-transform: uppercase;
	color: #fff;
}

.header-button-style {
	width:clamp(118px, 106.35px + 3.11vw, 166px);
	height:clamp(50px, 47.57px + 0.65vw, 60px);
	border: 1px solid #ff81dc;
	border-radius: 6px;
	padding: 18px 26px;
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow: 0 4px 17px 0 rgba(178, 108, 177, 0.69);
	background: var(--d430a7);
	font-family: var(--second-family);
	font-weight: 400;
	font-size: clamp(16px, 15.51px + 0.13vw, 18px);
	color: #fff;
}

@media (max-width: 767px) {
	.header-site {
		padding-left:10px;
		padding-right:10px;
	}
	
	.logo-site {
		display:none;
	}
	
	.logo-site-mobile {
		display:flex;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.logo-site {
		display:none;
	}
	
	.logo-site-mobile {
		display:flex;
	}
}