.header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
padding: 24px 0;
}
.header__wrap {
display: flex;
align-items: center;
gap: 10px;
}
.blur-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(16px);
background-color: var(--clr-green-light);
}
.header-font {
white-space: nowrap;
color: var(--clr-white);
font-size: 16px;
font-weight: normal;
line-height: 140%;
letter-spacing: -1px;
}
.header__logo {
padding: 15px 12px;
transition: .3s ease-in-out;
border-radius: var(--bor-radius-xl);
}
.header__logo:hover {
background-color: var(--clr-green);
}
.header__nav { padding: 10px 12px;
display: flex;
align-items: center;
gap: 4px;
border-radius: var(--bor-radius-xl);
}
.header__link {
padding: 6px 14px;
border-radius: 16px;
transition: .3s ease-in-out;
}
.header__link:hover {
background-color: var(--clr-green);
}
.header__social-list { padding: 7px 12px;
display: flex;
align-items: center;
gap: 4px;
border-radius: var(--bor-radius-xl);
}
.header__social-link {
padding: 8px;
border-radius: var(--bor-radius-xl);
display: inline-block;
transition: .3s ease-in-out;
}
.header__social-link:hover {
background-color: var(--clr-green);
}
.header__social-icon {
display: block;
height: 24px;
width: 24px;
object-fit: cover;
}
.header__tel {
padding: 15px 15px;
transition: .3s ease-in-out;
border-radius: var(--bor-radius-xl);
}
.header__tel:hover {
background-color: var(--clr-green);
}
.header__mail {
padding: 15px 15px;
transition: .3s ease-in-out;
border-radius: var(--bor-radius-xl);
}
.header__mail:hover {
background-color: var(--clr-green);
}
.header__burger-btn {
padding: 12px 15px;
display: none;
border-radius: var(--bor-radius-xl);
}
@media screen and (max-width:1440px) { .header__mail {
display: none;
}
}
@media screen and (max-width:1280px) {
.header__social-list {
display: none;
}
.header__tel {
display: none;
}
.header__burger-btn {
display: block;
}
.header__burger-btn {
padding: 14px 15px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-green-light);
}
}
@media screen and (max-width:1024px) {
.header__wrap {
justify-content: space-between;
} 
.blur-wrap {
width: auto;
}
.header__nav {
display: none;
}
} .mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu--active {
opacity: 1;
visibility: visible;
}
.mobile-menu__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
.mobile-menu__content {
position: relative;
width: 100%;
max-width: 400px;
height: 100%;
background-color: var(--clr-green);
padding: 80px 30px 30px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
gap: 20px;
}
.mobile-menu--active .mobile-menu__content {
transform: translateX(0);
}
.mobile-menu__close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
cursor: pointer;
border-radius: var(--bor-radius-xl);
transition: background-color 0.3s ease;
}
.mobile-menu__close:hover {
background-color: var(--clr-green-light);
}
.mobile-menu__close-icon {
font-size: 32px;
line-height: 1;
color: var(--clr-white);
font-weight: 300;
}
.mobile-menu__nav {
display: flex;
flex-direction: column;
gap: 20px;
}
.mobile-menu__link {
padding: 0 20px;
color: var(--clr-white);
text-decoration: none;
border-radius: var(--bor-radius-l);
transition: background-color 0.3s ease;
display: block;
}
.mobile-menu__link:hover {
background-color: var(--clr-green-light);
}
.mobile-menu__social {
display: flex;
align-items: center;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.mobile-menu__social-link {
padding: 10px;
border-radius: var(--bor-radius-xl);
display: inline-block;
transition: background-color 0.3s ease;
}
.mobile-menu__social-link:hover {
background-color: var(--clr-green-light);
}
.mobile-menu__social-icon {
display: block;
height: 28px;
width: 28px;
object-fit: cover;
}
.mobile-menu__contacts {
display: flex;
flex-direction: column;
}
.mobile-menu__tel,
.mobile-menu__mail {
padding: 15px 20px;
color: var(--clr-white);
text-decoration: none;
border-radius: var(--bor-radius-l);
transition: background-color 0.3s ease;
display: block;
}
.mobile-menu__tel:hover,
.mobile-menu__mail:hover {
background-color: var(--clr-green-light);
}
@media screen and (max-width: 480px) {
.mobile-menu__content {
max-width: 100%;
padding: 70px 0px 20px;
}
}