header {
position: fixed;
z-index: 100;
width: 100vw;
}
.header_wrapper {
position: fixed;
display: flex;
height: 84px;
width: 100vw;
z-index: 10;
top: 0;
left: 0;
right: 0;
background-color: #F2F2F2;
align-items: center;
}
.header_shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.logo {
width: 130px;
position: relative;
bottom: 2px;
}
.header_ground {
width: 65vw;
margin: 0 auto;
display: flex;
align-items: center; /* Центрируем элементы по вертикали */
justify-content: space-between; /* Выравнивание элементов по краям */
}
.header-links {
display: flex; /* Выравнивание кнопок в ряд */
gap: 25px; /* Расстояние между кнопками */
margin: 0 auto; /* Центрируем блок с кнопками */
padding-top: 5px;
}
.header-link {
text-decoration: none; /* Убираем подчеркивание */
color: black; /* Цвет текста */
font-size: 1em; /* Размер шрифта */
font-weight: 500; /* Жирность текста */
transition: color 0.3s; /* Плавный переход цвета */
}
.header-link:hover {
color: #5F9EA0; /* Цвет при наведении */
}
.header-button {
background-color: #5F9EA0; /* Цвет кнопки */
color: white; /* Цвет текста на кнопке */
border: none; /* Убираем рамку */
padding: 10px 20px; /* Отступы внутри кнопки */
font-size: 1em; /* Размер шрифта */
font-weight: 500;
border-radius: 5px; /* Скругление углов */
cursor: pointer; /* Указатель при наведении */
margin-top: 8px;
margin-right: 8px;
outline: none;
}
.burger-menu {
display: none;
flex-direction: column;
cursor: pointer;
padding: 10px;
padding-right: 25px;
}
.bar {
width: 25px;
height: 3px;
background-color: #3F3F3F;
margin: 4px 0;
border-radius: 5px;
}
.side-menu {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100vh;
background-color: #F2F2F2;
transition: left 0.3s;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.side-links {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
}
.side-link {
text-decoration: none;
color: black;
font-size: 1em;
font-weight: 500;
transition: color 0.3s;
}
.side-link:hover {
color: #5F9EA0;
}
.side-button {
background-color: #5F9EA0;
color: white;
border: none;
padding: 10px 20px;
font-size: 1em;
font-weight: 500;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
outline: none;
}
@media screen and (max-width: 1600px) {
.header_ground {
width: 93vw;
}
.header-links {
gap: 45px; /* Расстояние между кнопками */
}
}
@media screen and (max-width: 1120px) {
.header-links, .header-button {
display: none;
}
.burger-menu {
display: flex;
}
}