/* ===================================== */
/* ========= GLOBAL FIX FOR TILDA ====== */
/* ===================================== */
body {
padding-top: 60px;
overflow-x: hidden;
}
/* ===================================== */
/* ============ HEADER ================= */
/* ===================================== */
.vg-header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #ffffff;
border-bottom: 1px solid rgba(0,0,0,0.06);
z-index: 9999;
}
.vg-container {
max-width: 1200px;
margin: auto;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
/* ===================================== */
/* ============== LEFT / RIGHT ========= */
/* ===================================== */
.vg-left,
.vg-right {
display: flex;
align-items: center;
gap: 15px;
}
/* ===================================== */
/* ============== LOGO ================= */
/* ===================================== */
.vg-logo img {
height: 24px;
width: auto;
display: block;
}
/* ===================================== */
/* ============== CENTER NAV =========== */
/* ===================================== */
.vg-nav {
display: flex;
align-items: center;
gap: 28px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.vg-link {
text-decoration: none;
font-weight: 500;
color: #333;
font-size: 14px;
transition: 0.3s ease;
}
.vg-link:hover {
color: #21A598;
}
.active-link {
color: #21A598 !important;
font-weight: 600;
}
/* ===================================== */
/* ============== CTA ================== */
/* ===================================== */
.vg-cta {
background: #FFC900;
padding: 6px 14px;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
font-size: 13px;
color: #000;
transition: 0.3s ease;
white-space: nowrap;
}
.vg-cta:hover {
background: #21A598;
color: #ffffff;
}
/* ===================================== */
/* ============== ACCOUNT ============== */
/* ===================================== */
.vg-account {
background: #21A598;
padding: 6px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s ease;
}
.vg-account svg {
width: 16px;
height: 16px;
fill: #ffffff;
}
.vg-account:hover {
background: #FFC900;
}
/* ===================================== */
/* ============== BURGER =============== */
/* ===================================== */
.vg-burger {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
.vg-burger span {
width: 22px;
height: 2px;
background: #21A598;
border-radius: 2px;
transition: 0.3s ease;
}
/* Анимация в крестик */
.vg-burger.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px);
}
.vg-burger.active span:nth-child(2) {
opacity: 0;
}
.vg-burger.active span:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
}
/* ===================================== */
/* ============== MOBILE =============== */
/* ===================================== */
@media (max-width: 980px) {
body {
padding-top: 55px;
}
.vg-nav {
position: absolute;
top: 100%;
left: 0;
transform: none;
width: 100%;
flex-direction: column;
background: #ffffff;
padding: 25px;
gap: 20px;
display: none;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.vg-nav.active {
display: flex;
}
.vg-link {
font-size: 16px;
}
.vg-cta {
width: 100%;
text-align: center;
padding: 10px;
font-size: 15px;
}
.vg-account {
display: none;
}
.vg-burger {
display: flex;
}
} 
