#navigation {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 4px;
    justify-content: space-between;
    border-bottom: 2px solid var(--gullys-main-orange);
    margin-bottom: 32px;
}

#navigation .navigation-wrapper {
    display: flex;
    justify-content: space-around;
    flex: 1;
    background-color: var(--gullys-main-blue);
}

#navigation .navigation-small {
    display: none;
}

#navigation .navigation-small .navigation-menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}

#navigation .navigation-small .line {
    fill: none;
    stroke: var(--gullys-main-gray);
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

#navigation .navigation-small .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

#navigation .navigation-small .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}

#navigation .navigation-small .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

#navigation .navigation-small .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

#navigation .navigation-small .opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}

#navigation .navigation-small .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

@media (max-width: 900px) {
    #navigation .navigation-wrapper {
        position: fixed;
        top: 0;
        right: -305px;
        height: 100vh;
        width: 300px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        transition: right 0.3s ease;
        z-index: 1000;
        font-size: 24px;
        border-left: 5px solid var(--gullys-main-orange);
    }

    #navigation .navigation-wrapper.open {
        right: 0;
    }

    #navigation .navigation-small {
        display: block;
        z-index: 1100;
    }
}