.header.header-new {
background: linear-gradient(270deg, #253d5f 12.48%, #2d4e79 53.83%, #1c314d 73.48%);
max-width: unset;
margin-top: 0;
}
.l-header-d {
max-width: 1200px;
margin: 0 auto;
}
.l-header-d__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
}
.l-header-d__logo-block {
display: flex;
align-items: center;
}
.l-header-d__logo {
padding-right: 20px;
margin-right: 20px;
position: relative;
}
.l-header-d__logo::before {
content: "";
position: absolute;
height: 24px;
width: 1px;
background: #ffffff33;
right: 0;
top: 10px;
}
.l-header__text {
color: var(--white);
}
.l-header__text-p {
font-weight: 500;
font-size: 12px;
margin-bottom: 5px;
}
.l-header__text-m {
font-weight: 400;
font-size: 10px;
padding-left: 25px;
position: relative;
margin-top: 7px;
}
.l-header__text-m::before {
content: url('data:image/svg+xml,');
display: block;
position: absolute;
left: 0;
top: -3px;
}
.l-soclinks {
display: flex;
gap: 6px;
}
.l-soclink {
display: block;
text-decoration: none;
width: 34px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
transition: 0.3s all ease;
border-radius: 7.2px;
overflow: hidden;
}
.l-soclink_tg {
background-image: url('data:image/svg+xml,');
}
.l-soclink_tg:hover {
background-image: url('data:image/svg+xml,');
box-shadow: 0px 0px 18px 0px #25a3e266;
}
.l-soclink_yt {
background-image: url('data:image/svg+xml,');
}
.l-soclink_yt:hover {
background-image: url('data:image/svg+xml,');
box-shadow: 0px 0px 20px 0px #ff000066;
}
.l-soclink_vk {
background-image: url('data:image/svg+xml,');
}
.l-soclink_vk:hover {
background-image: url('data:image/svg+xml,');
box-shadow: 0px 0px 20px 0px #0077ff66;
}
.l-soclink_wp {
background-image: url('data:image/svg+xml,');
}
.l-soclink_wp:hover {
background-image: url('data:image/svg+xml,');
box-shadow: 0px 0px 20px 0px #0dca5466;
}
.l-soclink_max {
background-image: url("data:image/svg+xml,%3Csvg width='34' height='30' viewBox='0 0 34 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12.96C0 8.32853 0 6.01279 0.929875 4.25656C1.68028 2.8393 2.8393 1.68028 4.25656 0.929875C6.01279 0 8.32853 0 12.96 0H21.04C25.6715 0 27.9872 0 29.7434 0.929875C31.1607 1.68028 32.3197 2.8393 33.0701 4.25656C34 6.01279 34 8.32853 34 12.96V17.04C34 21.6715 34 23.9872 33.0701 25.7434C32.3197 27.1607 31.1607 28.3197 29.7434 29.0701C27.9872 30 25.6715 30 21.04 30H12.96C8.32853 30 6.01279 30 4.25656 29.0701C2.8393 28.3197 1.68028 27.1607 0.929875 25.7434C0 23.9872 0 21.6715 0 17.04V12.96Z' fill='white' fill-opacity='0.2'/%3E%3Cpath d='M12.96 0.5H21.04C23.3642 0.5 25.0763 0.500225 26.4277 0.614258C27.7731 0.727789 28.7159 0.951756 29.5098 1.37207C30.8382 2.07551 31.9245 3.16183 32.6279 4.49023C33.0482 5.28407 33.2722 6.22691 33.3857 7.57227C33.4998 8.92373 33.5 10.6358 33.5 12.96V17.04C33.5 19.3642 33.4998 21.0763 33.3857 22.4277C33.2722 23.7731 33.0482 24.7159 32.6279 25.5098C31.9245 26.8382 30.8382 27.9245 29.5098 28.6279C28.7159 29.0482 27.7731 29.2722 26.4277 29.3857C25.0763 29.4998 23.3642 29.5 21.04 29.5H12.96C10.6358 29.5 8.92373 29.4998 7.57227 29.3857C6.22691 29.2722 5.28407 29.0482 4.49023 28.6279C3.16183 27.9245 2.07551 26.8382 1.37207 25.5098C0.951756 24.7159 0.727789 23.7731 0.614258 22.4277C0.500225 21.0763 0.5 19.3642 0.5 17.04V12.96L0.501953 11.3281C0.507413 9.80255 0.528725 8.58596 0.614258 7.57227C0.727789 6.22691 0.951756 5.28407 1.37207 4.49023C2.07551 3.16183 3.16183 2.07551 4.49023 1.37207C5.28407 0.951756 6.22691 0.727789 7.57227 0.614258C8.92373 0.500225 10.6358 0.5 12.96 0.5Z' stroke='white' stroke-opacity='0.1'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.2149 24.9429C15.2521 24.9429 14.34 24.6551 12.7545 23.504C11.7517 24.799 8.57594 25.8111 8.43743 24.0796C8.43743 22.7798 8.1509 21.6815 7.82616 20.4824C7.43935 19.0051 7 17.36 7 14.9763C7 9.28308 11.6514 5 17.1623 5C22.6781 5 26.9999 9.49411 26.9999 15.029C27.0184 20.4783 22.6406 24.9139 17.2149 24.9429ZM17.2961 9.92097C14.6122 9.78189 12.5205 11.6476 12.0573 14.5734C11.6752 16.9955 12.3534 19.9452 12.9312 20.0987C13.2082 20.1658 13.9054 19.5999 14.34 19.1634C15.0586 19.662 15.8954 19.9614 16.766 20.0315C19.5469 20.1659 21.9231 18.0396 22.1098 15.2497C22.2185 12.4538 20.0774 10.0858 17.2961 9.92578V9.92097Z' fill='white'/%3E%3C/svg%3E%0A");
}
.l-soclink_max:hover {
background-image: url("data:image/svg+xml,%3Csvg width='34' height='30' viewBox='0 0 34 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2230_92)'%3E%3Cpath d='M25.2557 0H8.40426C3.76272 0 0 3.32004 0 7.41553V22.2845C0 26.38 3.76272 29.7 8.40426 29.7H25.2557C29.8973 29.7 33.66 26.38 33.66 22.2845V7.41553C33.66 3.32004 29.8973 0 25.2557 0Z' fill='url(%23paint0_linear_2230_92)'/%3E%3Cpath d='M25.2557 0H8.40426C3.76272 0 0 3.32004 0 7.41553V22.2845C0 26.38 3.76272 29.7 8.40426 29.7H25.2557C29.8973 29.7 33.66 26.38 33.66 22.2845V7.41553C33.66 3.32004 29.8973 0 25.2557 0Z' fill='url(%23paint1_radial_2230_92)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1013 26.5237C14.7761 26.5237 13.6955 26.1842 11.8172 24.8264C10.6292 26.3539 6.86698 27.5477 6.70289 25.5053C6.70289 23.9722 6.36344 22.6766 5.97873 21.2623C5.52049 19.5197 5 17.5792 5 14.7675C5 8.0521 10.5104 3 17.0391 3C23.5734 3 28.6934 8.30103 28.6934 14.8297C28.7153 21.2574 23.529 26.4894 17.1013 26.5237ZM17.1975 8.80453C14.018 8.64048 11.54 10.8412 10.9912 14.2923C10.5386 17.1493 11.342 20.6286 12.0266 20.8097C12.3547 20.8889 13.1807 20.2213 13.6955 19.7065C14.5468 20.2946 15.5381 20.6478 16.5695 20.7305C19.864 20.8889 22.679 18.3808 22.9002 15.09C23.0289 11.7922 20.4924 8.99893 17.1975 8.81021V8.80453Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2230_92' x1='3.96673' y1='22.5879' x2='32.9975' y2='12.8707' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2344CCFF'/%3E%3Cstop offset='0.662' stop-color='%235533EE'/%3E%3Cstop offset='1' stop-color='%239933DD'/%3E%3C/linearGradient%3E%3CradialGradient id='paint1_radial_2230_92' cx='0' cy='0' r='1' gradientTransform='matrix(25.5081 28.1499 -13.1449 9.27352 -0.800798 -13.0438)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230000FF'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='clip0_2230_92'%3E%3Crect width='33.66' height='29.7' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
box-shadow: 0px 0px 20px 0px #0077ff66;
}
.l-phone {
font-size: 14px;
font-weight: 500;
color: white;
display: flex;
align-items: center;
gap: 7px;
position: relative;
transition: 0.3s all ease;
}
.l-phone::before {
content: url('data:image/svg+xml,');
}
.l-phone:hover {
text-decoration: none;
color: var(--white);
}
.l-phone::after {
content: "";
position: absolute;
display: block;
height: 150%;
width: 125%;
left: -12%;
top: -30%;
background: #38bfc433;
border: 1px solid rgb(56 191 196 / 20%);
border-radius: 111px;
transform: scale(0);
transition: 0.3s ease all;
}
.l-phone:hover::after {
transform: scale(1);
}
.l-header-d__bottom {
background: #1b304d;
border-radius: 111px;
padding: 10px 18px;
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
min-width: 1038px;
}
.l-header-d__menu {
display: flex;
justify-content: space-between;
gap: 5px;
}
.l-header-d__menu-link {
color: var(--white);
line-height: 1;
font-weight: 500;
font-size: 14px;
position: relative;
}
.l-header-d__menu-link.active {
color: var(--white);
}
.l-header-d__menu-link_service-type::before {
content: url('data:image/svg+xml,');
display: inline-block;
margin-right: 7px;
}
.l-header-d__menu-link:hover {
text-decoration: none;
color: #b4fcff;
}
.bl-decor {
position: relative;
}
.bl-decor::before,
.br-decor::before {
content: "";
position: absolute;
top: 0;
display: block;
width: 1px;
height: 17px;
background-color: rgba(255, 255, 255, 0.2);
}
.bl-decor::before {
left: -15px;
}
.br-decor:before {
right: -15px;
}
.l-header-d__menu-link_pay-type {
position: relative;
padding-left: 20px;
}
.l-header-d__menu-link_pay-type::before {
content: "₽";
font-size: 12px;
font-weight: 600;
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
padding: 5.7px 6.265px;
text-align: center;
line-height: 10px;
border-radius: 50%;
background: rgba(59, 85, 120, 1);
}
.l-header-d__menu-link_pay-type:hover:before {
color: var(--black);
}
.l-header-d__menu-link_pay-type:hover:before {
background: rgba(57, 191, 196, 1);
}
.l-header-d__menu-link:hover::after,
.l-header-d__menu-link.active::after {
content: "";
display: block;
position: absolute;
left: -10px;
top: -5px;
height: 100%;
width: 100%;
padding: 5px 10px;
box-sizing: content-box;
background: #38bfc44d;
border-radius: 111px;
}
.l-header-d__menu-link::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
/* height: 2px; */
background-color: #38bfc4;
transform: scale(0);
transition: transform 0.3s ease;
}
.l-header-d__menu-link:hover::after,
.l-header-d__menu-link.active::after {
transform: scale(1);
}
.l-header-d__menu-link_arrow::before {
content: url('data:image/svg+xml,');
font-size: 20px;
font-weight: 600;
position: absolute;
right: -13px;
top: 0.5px;
line-height: 1;
width: 10px;
}
.l-header-d__menu-link.l-header-d__menu-link_arrow:hover::after,
.l-header-d__menu-link.l-header-d__menu-link_arrow.active::after {
content: "";
display: block;
position: absolute;
left: -10px;
top: -5px;
height: 100%;
width: 135%;
padding: 5px 10px;
box-sizing: content-box;
background: #38bfc44d;
border-radius: 111px;
}
@media (min-width: 992px) {
.service-menu {
position: absolute;
top: 53px;
left: 0;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 100px 0px rgba(0, 0, 0, 0.2);
border-radius: 20px;
padding: 30px;
padding-right: 40px;
width: 100%;
overflow: visible;
display: flex;
gap: 30px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
transform: translateY(10px);
pointer-events: none;
}
.service-menu.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.service-menu.active::before {
content: "";
height: 100px;
width: 175px;
position: absolute;
left: -30px;
top: -47px;
background-color: transparent;
}
.lower-directory-wrapper {
columns: 2;
}
}
.top-directory {
max-height: 900px;
display: flex;
flex-direction: column;
gap: 6px;
}
.top-directory-wrapper {
position: relative;
overflow-y: auto;
padding: 30px;
margin: -30px;
max-width: max-content;
height: 470px;
overflow-x: visible;
min-width: 342px;
}
.top-directory-wrapper::-webkit-scrollbar {
width: 2px;
height: 2px;
cursor: pointer;
}
.top-directory-wrapper::-webkit-scrollbar-track {
background: rgba(244, 247, 252, 1);
margin-top: 30px;
margin-bottom: 30px;
}
.top-directory-wrapper::-webkit-scrollbar-thumb {
background: rgba(220, 226, 236, 1);
cursor: pointer;
height: 30px;
}
.td__item {
position: relative;
padding: 0 10px;
margin: 0 -10px;
}
.td__link {
color: var(--black);
text-decoration: none;
padding: 4px 15px;
font-size: 16px;
display: block;
font-weight: 600;
border-radius: 40px;
width: 100%;
border: 1px transparent solid;
transition: 0.3s all ease;
white-space: nowrap;
position: relative;
}
.td__link.whale::before {
content: url("images/whale.png");
position: absolute;
left: -28px;
top: 0;
transition: rotate 0.3s ease;
}
.td__link.whale.active::before {
content: url("images/whale.png");
position: absolute;
left: -28px;
top: 0;
rotate: -15deg;
}
.td__link:not([href]) {
cursor: default;
}
.td__link:hover {
text-decoration: none;
color: var(--blue);
background: rgba(58, 104, 185, 0.1);
}
.lower-directory {
display: none;
}
.lower-directory-wrapper {
padding: 0 0 0 30px;
background: #ffffff;
min-width: 250px;
/* height: 470px; */
overflow-y: auto;
}
.lower-directory-wrapper::-webkit-scrollbar {
width: 2px;
height: 2px;
cursor: pointer;
}
.lower-directory-wrapper:-webkit-scrollbar-track {
background: rgba(244, 247, 252, 0.1);
}
.lower-directory-wrapper::-webkit-scrollbar-thumb {
background: rgba(220, 226, 236, 1);
cursor: pointer;
}
.lower-directory.active {
display: block;
}
.td__link.active {
background-color: var(--blue);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0px 4px 40px 0px rgba(68, 132, 255, 0.5);
color: white;
}
.ld__item {
display: block;
break-inside: avoid;
}
.ld__link {
color: var(--black);
font-size: 14px;
font-weight: 500;
padding: 8px 10px;
border-radius: 10px;
display: block;
}
.ld__link:hover {
text-decoration: none;
color: var(--blue);
background: rgba(58, 104, 185, 0.1);
}
.ld__comment {
color: var(--secondary-2);
display: block;
margin-top: 3px;
font-weight: 500;
font-size: 12px;
}
@media (max-width: 1100px) {
.l-header-d__top {
flex-wrap: wrap;
}
}
.l-header-m {
display: none;
}
.burger-menu-alt {
display: none;
}
@media (max-width: 992px) {
.header.header-new {
width: 101%;
left: -1px;
}
.buttons.l-buttons {
justify-content: space-between;
}
.buttons.l-buttons .button {
flex-basis: 50%;
text-align: center;
}
.header.header-new {
padding: 15px 20px 20px 20px;
background: radial-gradient(106.05% 148.13% at 62.2% -15.89%, #3f608e 0%, #223959 100%);
}
.l-header-d {
display: none;
}
.l-header-m {
display: block;
}
.l-header-m__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
padding-bottom: 16px;
}
.l-header-m__menu-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 18px;
}
.l-header-m__menu-title {
color: rgba(93, 222, 226, 1);
font-size: 36px;
font-weight: 500;
}
.l-buttons .button {
white-space: nowrap;
font-size: 14px;
padding: 12px 15px;
}
.l-soclink {
width: 40px;
height: 35px;
}
.l-header-m__menu-link {
font-size: 24px;
color: var(--white);
font-weight: 500;
padding: 9px 0;
display: block;
}
.l-header-m__menu-link:hover {
text-decoration: none;
color: var(--mint);
}
.l-header-m__menu {
padding: 9px 0;
}
.l-header-d__menu-link_pay-type::before {
display: none;
}
.bb-decor {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tdm__link,
.ldm__link {
display: block;
background: rgba(0, 0, 0, 0.2);
padding: 8px 18px;
color: var(--white);
font-size: 18px;
font-weight: 500;
border-radius: 10px;
margin-bottom: 2px;
line-height: 1;
}
.tdm__link:hover,
.ldm__link:hover {
text-decoration: none;
color: rgba(255, 255, 255, 0.909);
background: rgba(0, 0, 0, 0.5);
}
.ldm__comment {
display: none;
}
.service-menu-m {
position: relative;
height: 200px;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
max-height: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.service-menu-m.active {
max-height: 200px;
opacity: 1;
visibility: visible;
padding: 8px 8px 8px 0;
}
.l-header-m__menu-w {
max-height: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
-ms-overflow-style: none;
scrollbar-width: none;
}
:root {
--sat: env(safe-area-inset-top);
--sab: env(safe-area-inset-bottom);
--sal: env(safe-area-inset-left);
--sar: env(safe-area-inset-right);
}
.l-header-m__menu-w.active {
max-height: calc(100vh - 240px);
opacity: 1;
visibility: visible;
overflow-y: auto;
}
.l-header-m__menu-w::-webkit-scrollbar {
display: none;
}
.tdm__item {
position: relative;
}
.burger-menu {
width: 26px;
height: 21px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.burger-menu::before,
.burger-menu::after,
.burger-menu span {
transition: all 0.3s ease;
}
.burger-menu::before,
.burger-menu::after {
content: "";
position: absolute;
left: 0;
height: 4px;
border-radius: 2px;
background-color: white;
}
.burger-menu::before {
top: 0;
width: 26px;
opacity: 1;
}
.burger-menu {
opacity: 0.7;
}
.burger-menu::after {
bottom: 0;
width: 18px;
opacity: 0.4;
}
.burger-menu span {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 4px;
background-color: white;
border-radius: 2px;
opacity: 0.7;
}
.burger-menu.close::before {
top: 50%;
transform: rotate(45deg);
width: 26px;
opacity: 1;
}
.burger-menu.close::after {
bottom: auto;
top: 50%;
transform: rotate(-45deg);
width: 26px;
opacity: 1;
}
.burger-menu.close span {
opacity: 0;
transform: translateX(-100%);
}
.top-directory-m .lower-directory-m {
display: none;
}
.lower-directory-wrapper {
padding: 0;
background: transparent;
min-width: unset;
transition:
transform 0.3s ease,
opacity 0.3s ease;
transform: translateX(100%);
display: none;
opacity: 0;
position: absolute;
width: 100%;
height: unset;
}
.lower-directory-wrapper.active {
transform: translateX(0);
opacity: 1;
display: block;
}
.top-directory-wrapper-m {
transition:
transform 0.3s ease,
opacity 0.3s ease;
transform: translateX(0);
opacity: 1;
position: absolute;
width: 100%;
}
.top-directory-wrapper-m.hidden {
transform: translateX(-100%);
opacity: 0;
}
.service-menu-m::-webkit-scrollbar {
width: 2px;
height: 2px;
cursor: pointer;
}
.service-menu-m::-webkit-scrollbar-track {
background: rgba(244, 247, 252, 0.1);
}
.service-menu-m::-webkit-scrollbar-thumb {
background: rgba(220, 226, 236, 1);
cursor: pointer;
}
.top-directory-m.tdm,
.lower-directory-m.ldm {
padding-right: 8px;
}
.tdm__link.has-submenu {
position: relative;
}
.tdm__link.has-submenu::before {
content: url('data:image/svg+xml,');
position: absolute;
top: 50%;
right: 10px;
display: block;
transform: translateY(-50%);
}
.ldm__link.back-button {
position: relative;
padding-left: 35px;
line-height: 1;
}
.ldm__link.back-button::before {
content: url('data:image/svg+xml,');
position: absolute;
top: 50%;
left: 10px;
display: block;
transform: translateY(-50%);
}
.l-header-m__menu-link_service-type {
position: relative;
width: max-content;
transition: 0.3s all ease;
}
.l-header-m__menu-link_service-type.active.submenu-opened {
color: rgba(255, 255, 255, 0.5);
}
.l-header-m__menu-link_service-type.active {
color: white;
}
.l-header-m__menu-link_service-type.active::before {
content: url('data:image/svg+xml,');
transform: translateY(-57%);
}
.l-header-m__menu-link_service-type::before {
content: url('data:image/svg+xml,');
display: block;
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-57%);
transition: 0.3s all ease;
}
.lower-directory-wrapper__title {
color: rgba(93, 222, 226, 1);
background: rgba(80, 249, 255, 0.3);
padding: 8px 14px;
margin: 0 0 18px 0;
border-radius: 111px;
width: max-content;
font-weight: 500;
}
}
body.menu-opened {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
.l-header-d__menu-link_service-type {
position: relative;
z-index: 2;
pointer-events: auto;
}
.service-menu {
z-index: 1;
}
.j-submenu {
display: none;
border-radius: 20px;
padding: 30px;
box-shadow: 0px 4px 100px 0px #00000033;
background: white;
}
.hz {
position: absolute;
top: -17px;
left: 25%;
width: 100px;
height: 50px;
display: block;
}
.l-header-d__menu-link:hover + .j-submenu,
.j-submenu:hover {
display: block;
position: absolute;
top: 40px;
left: -100px;
}
.j-submenu__link {
display: block;
}
.j-submenu__link:hover {
background-color: var(--blue);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0px 4px 40px 0px rgba(68, 132, 255, 0.5);
color: white;
}
.head-link {
color: white;
display: block;
text-align: center;
margin-bottom: 10px;
font-size: 14px;
}
.head-link:hover {
color: var(--mint);
text-decoration: none;
}