.navbar {
    position: absolute;
    top: 0;
    width: 99vw;
    height: 15vh;
    background-color: #10133A;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

.urls-navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.link-navbar {
    all: initial;
    margin: 0 1vw;
    font-size: 1.5vw;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
    font-family: 'Involve-Regular';
}

.link-navbar.one:hover {
    color: #1B96F3;
}

.link-navbar.two:hover {
    color: #F68741;
}

.link-navbar.three:hover {
    color: #FCDF87;
}

.link-navbar.fourth:hover {
    color: #EF0195;
}

.icons-navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 12%;
    margin-right: 2vw;
}

.icons-navbar svg {
    width: 2.5vw;
}

.logo-navbar path, .icon-navbar path{
    transition: fill 0.5s ease;
}

.navbar .logo-navbar:hover path, .icon-navbar:hover path {
    fill: url(#gradient-hover);
}

.logo-navbar {
    margin-left: 2vw;
    width: 10vw;
}


.burger-button {
    z-index: 1000;
    margin-right: 1vw;
    display: none;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    border: 0;
    background-color: #ffffff00;
    width: 4vw;
    height: 4vw;
    transition: transform 0.3s;
}

.burger-button:focus{
    outline: none;
}

.burger-button:hover{
    cursor: pointer;
}



.burger-line{
position: relative;
width: 100%;
height: 0.4vw;
background-color: #ffffff;
border-radius: 3px;
transition: transform 0.5s ease;
}

.burger-line:nth-child(1){
top: 0.4vw;
transform: translateY(1.4vw);
}

.burger-line:nth-child(3){
bottom: 0.4vw;
transform: translateY(-1.4vw);
}


/* Стили для анимации поворота полосок при разворачивании меню */
.burger-button.show .burger-line:nth-child(1) {
transform: rotate(45deg);
}

.burger-button.show .burger-line:nth-child(2) {
transform: rotate(45deg);
opacity: 0;
}

.burger-button.show .burger-line:nth-child(3) {
transform: rotate(-45deg);
}

.navbar-menu {
    display: none;
}

@media(max-width: 1150px) {
    .navbar {
        height: 10vh;

        }

}

@media(max-width: 850px) {
    .navbar {
    height: 13vh;
    width: 100%;
    }

    .urls-navbar {
    display: none;
    }

    .icons-navbar {
    display: none;
    }

    .burger-button {
        width: 10vw;
        height: 7vw;
        display: flex;

    }

    .burger-line{
    height: 1vw;
    }

    .burger-line:nth-child(1){
    top: 1vw;
    transform: translateY(3vw);
    }

    .burger-line:nth-child(3){
    bottom: 1vw;
    transform: translateY(-3vw);
    }

    .burger-button.show .burger-line{
    background-color: #EF0195;
    }

    .navbar-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 40vh;
        z-index: 5;
        bottom: -40vh;
        background-color: #10133A;
        right: -100%;
        transition: right 0.5s ease
    }

    .navbar-menu.show {
        right: 0;
    }




    .urls-navbar-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .link-navbar-mobile {
        all: initial;
        margin-top: 2vh;
        font-size: 3vh;
        text-align: center;
        color: white;
        cursor: pointer;
        transition: color 0.3s ease;
        font-family: 'Involve-Regular';
    }

    .link-navbar-mobile.one:hover {
        color: #1B96F3;
    }

    .link-navbar-mobile.two:hover {
        color: #F68741;
    }

    .link-navbar-mobile.three:hover {
        color: #FCDF87;
    }

    .link-navbar-mobile.fourth:hover {
        color: #EF0195;
    }

    .icons-navbar-mobile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 50%;
        margin-top: 5vw;
    }

    .icons-navbar-mobile svg {
        width: 5vh;
    }

    .logo-navbar {
    margin-left: 3vw;
    width: 20vw;
    }

}

@media(max-width: 500px) {

    .logo-navbar {
    margin-left: 3vw;
    width: 30vw;
    }

}