/* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #f4f4f4; font-size: 20px; line-height: 1.6; color: #333; } /* Cabeçalho */ header { background: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 15px 25px; display: flex; flex-direction: column; align-items: center; } .logo { display: flex; align-items: center; margin-bottom: 10px; } .logo img { height: 80px; margin-right: 15px; } .logo h1 { font-size: 32px; color: #003366; } /* Navegação */ nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } nav ul li { background: #0055aa; color: #fff; margin: 6px; padding: 12px 20px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; transition: background 0.3s; } nav ul li:hover { background: #0077cc; } nav ul li img { height: 22px; margin-right: 8px; } /* Conteúdo */ main { padding: 30px 20px; } section { background: #fff; border-radius: 10px; padding: 25px; margin: 20px auto; max-width: 900px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } h2 { color: #003366; margin-bottom: 15px; font-size: 28px; } /* Rodapé */ footer { background: #003366; color: #fff; text-align: center; padding: 20px; margin-top: 30px; } footer a { color: #ffcc00; text-decoration: none; } footer a:hover { text-decoration: underline; } /* Responsividade */ @media (max-width: 768px) { .logo h1 { font-size: 24px; } nav ul { flex-direction: column; align-items: center; } nav ul li { width: 90%; justify-content: center; } }