.navbar {
    z-index: 1000;
    position: relative
}

.navbar .container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 32px;
    justify-content: space-between;
    opacity: 0;
    animation: textReveal .4s cubic-bezier(.23, .6, .64, 1) forwards
}

.navbar .container>a {
    display: flex
}

.navbar_logo {
    width: 64px;
    height: 64px;
    transform: translate(-12px);
    transition: .3s cubic-bezier(.23, .6, .64, 1)
}

.navbar_logo:hover {
    scale: 1.15
}

.navbar_logo img {
    width: 100%;
    min-width: 64px;
    height: 100%
}

@keyframes navbarReveal {
    0% {
        transform: translateY(-40px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.navbar_ul {
    display: flex;
    align-items: center;
    gap: 8px
}

.navbar_ul a {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 24px;
    font-weight: 500
}

.navbar_ul a:before {
    content: "";
    position: absolute;
    top: 0;
    opacity: 0;
    background: #fff;
    height: 100%;
    width: 100%;
    left: 0;
    border-radius: 16px;
    transition: .4s cubic-bezier(.23, .6, .64, 1)
}

.navbar_ul a li {
    position: relative;
    transition: transform .4s cubic-bezier(.38, .68, .43, .89), color .4s .4s cubic-bezier(.23, .6, .64, 1)
}

.navbar_ul a li:first-child {
    transform: translateY(0)
}

.navbar_ul a li:last-child {
    position: absolute;
    transform: translateY(48px)
}

.navbar_ul a:hover:before {
    opacity: .2;
    transition-delay: .4s
}

.navbar_ul a:hover li:first-child {
    transform: translateY(-48px)
}

.navbar_ul a:hover li:last-child {
    transform: translateY(0);
    color: #cdcdcd
}

.authorization {
    display: flex;
    gap: 32px;
    position: relative;
    align-items: center
}

.login {
    border-radius: 16px;
    border: 1px solid #dadada;
    padding: 12px 24px;
    position: relative;
    overflow: hidden;
    transition: .3s ease
}

.login:hover {
    color: #fff;
    border: 1px solid #385bb3
}

.login:hover:before {
    opacity: 1;
    transform: translate(-30px, -30px)
}

.login:active {
    scale: .9
}

.login:before {
    content: "";
    position: absolute;
    background: #385bb3;
    transform: translate(60px, 60px);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: .4s cubic-bezier(.23, .6, .64, 1)
}

.nav_mobile {
    display: flex;
    gap: 32px;
    align-items: center
}

.mobile_navbar {
    padding: 0 32px;
    top: 0;
    display: none;
    flex-direction: column;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100svh;
    left: 0;
    background: rgba(12, 44, 86, .6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.mobile_navbar_top_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0
}

.mobile_navbar_top_menu a {
    text-decoration: none
}

.mobile_navbar_close {
    cursor: pointer;
    width: 32px;
    height: 32px
}

.mobile_navbar_ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: flex-start;
    margin-top: 64px
}

.mobile_navbar_ul li {
    font-size: 32px;
    font-weight: 500
}

.burger_btn {
    position: relative;
    display: none;
    flex-direction: column;
    min-width: 32px;
    height: 32px;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer
}

.burger_btn span {
    position: absolute;
    border-radius: 8px;
    width: 32px;
    height: 3px;
    background: #fff;
    transition: .4s cubic-bezier(.68, -.6, .32, 1.6);
    transform-origin: center
}

.burger_btn span:nth-child(1) {
    transform: translateY(-8px);
    width: 50%;
    transform-origin: top
}

.burger_btn span:nth-child(3) {
    transform: translateY(8px);
    width: 75%;
    transform-origin: bottom
}

.burger_btn.non-clickable {
    pointer-events: none
}

@media screen and (max-width: 1145px) {
    .navbar_ul {
        display: none
    }

    .burger_btn, .mobile_navbar {
        display: flex
    }
}

@media screen and (max-width: 640px) {
    .login {
        padding: 8px 16px
    }
}