header {
    background-color: var(--color-neutral-1);
    padding: 12px 4%;
    position: sticky;
    top: 0;
    z-index: 10;

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            width: 145px;
        }

        ul {
            display: none;
            list-style: none;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
            position: absolute;
            top: 80px;
            background-color: var(--color-neutral-1);
            left: 0;
            padding: 1rem;

            &.show {
                display: flex;
            }

            li {
                text-align: center;

                a {
                    color: var(--color-neutral-8);
                    text-decoration: none;
                    font-size: 1rem;
                    font-weight: 500;
                    transition: all 0.3s ease;

                    &:hover {
                        color: var(--color-primary-1);
                        border-bottom: 1px  solid var(--color-primary-1);
                    }
                }
            }
        }

        .btn-default {
            display: none;
        }
    }
}

@media (min-width: 769px) {
    header {
        .navbar {
            .btn-mobile {
                display: none;
            }
            
            ul {
                display: flex;
                flex-direction: row;
                position: static;
                gap: 1rem;
                width:auto;
                padding: 0;
            }
            .btn-default {
                display: block;
            }
        }
    }
}