.karyer-invest-header-menu,
.karyer-invest-footer-menu {
font-family: "Geologica", sans-serif;
position: relative;
}
.main-menu,
.footer-menu {
display: flex;
list-style: none;
}
.main-menu>.menu-item,
.footer-menu>.menu-item {
position: relative;
}
.main-menu>.menu-item.menu-item-has-children .menu-link,
.footer-menu>.menu-item.menu-item-has-children .menu-link {
display: flex;
align-items: center;
cursor: pointer;
}
.main-menu>.menu-item.menu-item-has-children .menu-link svg,
.footer-menu>.menu-item.menu-item-has-children .menu-link svg {
fill: #A9A7A3;
transition: fill .3s linear, transform .3s linear;
padding-top: 3px;
}
.main-menu>.menu-item>a,
.footer-menu>.menu-item>a,
.main-menu>.menu-item.menu-item-has-children .menu-link {
display: flex;
align-items: center;
padding: 10px 15px;
color: var(--text-4-svetlyy-dlya-temnogo);
text-decoration: none;
font-weight: 400;
font-size: 16px;
transition: color .3s linear, border .3s linear, background-color .3s linear;
border: 1px solid transparent;
border-radius: 8px;
max-height: 40px !important;
}
.main-menu>.menu-item.contact-btn>a {
margin-left: 15px;
border: 1px solid var(--p1);
color: var(--p1);
padding: 10px 20px;
}
.main-menu>.menu-item.contact-btn>a:hover {
background-color: var(--hover);
color: var(--p4-zagolovok-1);
border: 1px solid var(--hover);
}
.contact-btn-mob a {
border: 1px solid var(--p1);
color: var(--p1) !important;
padding: 10px 20px !important;
border-radius: 8px;
max-width: 168px !important;
text-align: center;
}
.main-menu>.menu-item>a:hover,
.main-menu>.menu-item.menu-item-has-children .menu-link:hover {
color: var(--p1);
border: 1px solid var(--p1);
}
.main-menu>.menu-item.menu-item-has-children .menu-link:hover svg,
.footer-menu>.menu-item.menu-item-has-children .menu-link:hover svg {
fill: var(--p1);
}  .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--p4-zagolovok-1);
z-index: 1000;
list-style: none;
margin: 0;
padding: 20px;
border-radius: 8px;
flex-direction: column;
gap: 8px;
min-width: 219px;
margin-top: 8px !important;
} .menu-item-has-children::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 10px;
background-color: transparent;
z-index: 999;
}
.footer-menu .submenu {
padding: 12px;
min-width: 203px !important;
}
.menu-item-has-children:hover .submenu {
display: flex;
box-shadow: 0 4px 8px 0 rgba(38, 38, 38, 0.08);
}
.submenu-item {
margin: 0;
padding: 0;
}
.submenu-item a {
display: block;
color: var(--tekst-1);
text-decoration: none;
transition: color 0.3s linear;
font-weight: 400;
font-size: 16px;
}
.submenu-item a:hover {
color: var(--hover);
} .menu-item.current-menu-item>a,
.submenu-item.current-menu-item>a {
font-weight: bold;
} .karyer-invest-footer-menu .footer-menu {
flex-direction: column;
gap: 6px;
}
.footer-menu>.menu-item>a,
.footer-menu>.menu-item.menu-item-has-children .menu-link {
font-weight: 400;
padding: 0;
font-size: 16px;
line-height: 130%;
color: var(--text-4-svetlyy-dlya-temnogo);
transition: color .3s linear;
}
.footer-menu>.menu-item>a:hover,
.footer-menu>.menu-item.menu-item-has-children .menu-link:hover {
color: var(--hover);
} .dropdown-icon {
display: inline-block;
vertical-align: middle;
transition: transform 0.3s ease;
}
.menu-item-has-children.active .dropdown-icon {
transform: rotate(180deg);
padding-top: 0 !important;
}
.burger-btn {
position: relative;
width: 26px;
height: 24px;
cursor: pointer;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
font-size: 30px;
background: none;
border: none;
color: #fff;
cursor: pointer;
}
.burger-icon,
.close-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
pointer-events: none;
height: 24px !important;
}
.close-icon {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
}
.close-icon svg {
transform: translateY(-20%);
}
.burger-btn.active .burger-icon {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
}
.burger-btn.active .close-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.mobile-menu-wrapper {
position: fixed;
top: 62px;
right: -100%;
width: 100%;
min-height: 100vh;
background: var(--p2);
z-index: 9999;
overflow-y: auto;
padding: 15px;
transition: right 0.5s ease;
overflow: hidden !important;
}
.mobile-menu-wrapper.active {
right: 0;
}
.mobile-main-menu {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.mobile-menu-item {
width: auto !important;
}
.mobile-menu-link {
font-family: 'Geologica', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 130%;
color: var(--p4-zagolovok-1);
width: 100%;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
transition: color .3s linear;
}
.mobile-submenu {
flex-direction: column;
gap: 20px;
list-style: none;
padding-left: 20px !important;
height: 0; overflow: hidden; transition: height 0.3s ease-in-out; }
.mobile-submenu-item:first-child {
margin-top: 16px !important;
}
.mobile-menu-item a,
.mobile-submenu-item a {
font-family: 'Geologica', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: var(--text-4-svetlyy-dlya-temnogo);
display: block;
padding: 5px 0;
transition: color .3s linear;
}
.mobile-menu-item a:hover,
.mobile-submenu-item a:hover,
.mobile-menu-item a:active,
.mobile-submenu-item a:active {
color: var(--text-4-svetlyy-dlya-temnogo) !important;
}
.mobile-menu-item a:focus-visible,
.mobile-submenu-item a:focus-visible {
outline: none !important;
}
.mobile-menu-item-has-children {
transition: border .3s linear;
border-top: 1px solid transparent;
}
.mobile-menu-item-has-children.active {
border-top: 1px solid var(--p1);
}
.mobile-menu-item-has-children.active .mobile-menu-link {
color: var(--p1);
}
.mobile-submenu-item a:hover {
color: var(--hover);
}
.mobile-menu-link svg {
fill: var(--text-3);
transition: transform 0.3s linear, fill .3s linear;
}
.mobile-menu-item-has-children.active svg {
transform: rotate(180deg);
} @media screen and (max-width: 1100px) {
.main-menu>.menu-item>a,
.main-menu>.menu-item.menu-item-has-children .menu-link {
padding: 10px 12px;
}
} @media screen and (max-width: 1023px) {
.contact-btn {
display: none;
}
.main-menu>.menu-item>a,
.main-menu>.menu-item.menu-item-has-children .menu-link {
padding: 10px 15px;
}
.karyer-invest-header-menu .main-menu {
justify-content: space-between;
}
.karyer-invest-footer-menu .footer-menu {
gap: 16px;
}
} @media screen and (max-width: 767px) {
.karyer-invest-footer-menu .footer-menu {
gap: 12px;
}
}