nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

    nav ul li {
        margin: 0 15px;
		flex: 1; /* Allow list items to stretch */
    }

        nav ul li a {
            text-decoration: none;
            font-size: 16px;
            color: #333;
            padding: 10px 20px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added transition for shadow */
            display: block; /* Make links block-level to fill the li */
            text-align: center; /* Center text inside the button */
            border-radius: 4px; /* Slightly rounded corners */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle depth with shadow */
        }

            nav ul li a:hover {
                background-color: #ddd;
            }

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

        nav ul li {
            margin: 10px 0;
        }
}