/* Remove as margens e o padding padrão do navegador e define a largura e altura da página */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif; /* Define a fonte padrão */
}

/* Define o container principal que ocupa toda a altura da tela e adiciona a imagem de fundo */
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('imagem/back.png'); /* Substitua pelo caminho da sua imagem */
    background-size: cover; /* Faz com que a imagem cubra toda a área do container */
    background-position: center; /* Centraliza a imagem no container */
}

/* Cria uma sobreposição semi-transparente sobre a imagem de fundo */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Escurece a imagem de fundo */
    display: flex;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
}

/* Define o estilo da caixa de informações */
.info-box {
    background-color: rgba(255, 255, 255, 0.8); /* Fundo branco meio transparente */
    padding: 20px; /* Espaço interno */
    border-radius: 10px; /* Bordas arredondadas */
    display: flex; /* Usa o modelo flexbox para o layout */
    align-items: center; /* Alinha os itens ao centro verticalmente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1); /* Adiciona uma sombra ao redor da caixa */
}

/* Adiciona margem à direita da logo */
.logo {
    margin-right: 20px;
}

/* Define o tamanho máximo da logo e mantém a proporção */
.logo img {
    max-width: 180px; /* Largura máxima de 100 pixels */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 10px; /* Bordas arredondadas na imagem da logo */
}

/* Estilo para a seção de informações */
.info {
    text-align: left; /* Alinha o texto à esquerda */
    color: #333; /* Cor do texto */
}

/* Estilo para o título */
h1 {
    font-size: 2em; /* Tamanho da fonte do título */
    margin-bottom: 10px; /* Margem inferior */
    color: #000; /* Cor do texto do título */
}

/* Estilo para os parágrafos */
p {
    font-size: 1em; /* Tamanho da fonte dos parágrafos */
    margin: 5px 0; /* Margem superior e inferior */
    color: #555; /* Cor do texto dos parágrafos */
}

/* Estilo para links */
a {
    color: #007bff; /* Cor do texto dos links */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
}

/* Estilo para links quando o mouse passa por cima */
a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}