#mainNavbar {
    transition: all 0.3s ease;
    /* background: rgba(255, 255, 255, 0.1); */
    background: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-res-rounded {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-res-link {
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 8px;
    padding: 15px;
    text-decoration: none;
    letter-spacing: 1px;
}

.nav-res-link:hover {
    background: #4477cea6;
    color: white;
    padding: 10px;
}

.navbar-scrolled {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-scrolled .nav-bg-res-wrapper {
    background: transparent;
}

@media (max-width: 767px) {
    .navbar-res-brand {
        display: flex;
        align-items: center;
        margin-left: 1rem;
    }

    .nav-bg-res-wrapper {
        border-radius: 10px;
        margin: 1rem;
    }

    .nav-res-rounded {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-nav-res {
        width: 100%;
        display: flex;
        flex-direction: column;
        list-style: none;
        gap: 1rem;
    }

    /* .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.5);
    } */

    .button-auth {
        display: flex;
        gap: 1rem;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        margin-left: 3rem;
        margin-top: 1rem;
        text-decoration: none;
    }

    .button-auth .button-log {
        padding: 0.5rem 25px 0.5rem 25px;
        border-radius: 2rem;
        font-weight: 600;
        letter-spacing: 1px;
        background: #4477ce;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.199);
    }

    .button-auth .button-regist {
        padding: 0.5rem 1rem 0.5rem 1rem;
        border-radius: 2rem;
        font-weight: 600;
        letter-spacing: 1px;
        background: #4477ce;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.199);
    }

    .button-log .login {
        text-decoration: none;
        color: white;
    }

    .button-regist .register {
        text-decoration: none;
        color: white;
    }

    /* .button-log .button-regist {
        background: linear-gradient(to right, #ffffff, #4477ce);
        color: white;
        border-radius: 20px;
        font-weight: 600;
    } */
}