* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f4f6f7; color: #2c3e50; }

nav {
    background: #1a5276;
    padding: 14px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
nav a { color: white; text-decoration: none; font-size: 15px; }
nav .logo { font-size: 20px; font-weight: bold; }
nav .nav-links { display: flex; align-items: center; gap: 14px; }
nav .nav-links a { margin-left: 0; }
nav .nav-links a:hover { text-decoration: underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

@media (max-width: 768px) {
    nav {
        padding: 10px 16px;
        justify-content: center;
    }
    nav .logo {
        width: 100%;
        text-align: center;
        font-size: 18px;
    }
    nav .nav-links {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }
    nav .nav-links a,
    nav .nav-links button {
        font-size: 13px;
    }
    .container { padding: 12px; }
}