body {
    font-family: 'Roboto', sans-serif; /* Usa a fonte importada */
    background-color: #f4f4f4; /* Fundo claro */
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Garante que ocupa a altura mínima da viewport */
    text-align: center; /* Centraliza o texto */
}

.container {
    max-width: 800px; /* Largura máxima do conteúdo */
    padding: 30px;
    background-color: #fff; /* Fundo branco para o container */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.logo-container {
    margin-bottom: 20px;
}

.logo {
    max-width: 200px; /* Tamanho máximo da logo */
    height: auto;
}

h1 {
    color: #333; /* Cor escura para o slogan */
    font-size: 1.8em;
    margin-bottom: 30px;
}

.buttons {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    gap: 20px; /* Espaço entre os botões */
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
}

.button {
    display: inline-block; /* Permite aplicar padding e margin */
    padding: 12px 25px;
    background-color: #007bff; /* Azul primário (pode ajustar para o azul da logo) */
    color: #fff; /* Texto branco */
    text-decoration: none; /* Remove sublinhado */
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s ease; /* Efeito suave ao passar o mouse */
    border: none; /* Remove borda padrão */
    cursor: pointer; /* Mostra que é clicável */
}

.button:hover {
    background-color: #0056b3; /* Azul um pouco mais escuro ao passar o mouse */
}