/* Reset Básico e Definição da Fonte */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; /* Fonte opcional (se linkada no HTML) */
    background-color: #f4f4f9; /* Cor de fundo suave */
    color: #333;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Ocupa a altura total da viewport */
    text-align: center;
}

/* Estilo do Container Principal */
.container {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 90%; /* Limite máximo de largura (para desktop) */
    width: 500px; /* Largura padrão */
    box-sizing: border-box; /* Inclui padding e borda na largura/altura total */
}

/* logo */
.logo {
    /* 1. Especifique o caminho para o arquivo PNG */
    background-image: url('botao-whatsapp.png'); 
    
    /* 2. Defina as dimensões do elemento para que a imagem seja visível */
    width: 100px; /* Largura do PNG */
    height: 100px; /* Altura do PNG */
    
    /* 3. Ajuste a exibição (opcional, mas importante) */
    background-repeat: no-repeat; /* Garante que a imagem não se repita */
    background-size: contain; /* Ajusta o tamanho da imagem para caber dentro do elemento */
    
    /* 4. Centraliza a imagem no elemento */
    background-position: center; 
}

/* Títulos */
h1 {
    font-size: 2em;
    color: #007bff; /* Cor de destaque */
    margin-bottom: 0.5em;
    font-weight: 700;
}

/* Parágrafos */
p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 1em;
}

/* Ícone */
.icon {
    font-size: 4em;
    display: block;
    margin-bottom: 15px;
}

/* Barra de Progresso Simples */
.progress-bar {
    background-color: #e9ecef;
    border-radius: 5px;
    height: 15px;
    margin: 20px 0;
    overflow: hidden;
}

.progress {
    width: 65%; /* Exemplo: 65% completo. Você pode mudar este valor. */
    height: 100%;
    background-color: #28a745; /* Cor verde de sucesso */
    border-radius: 5px;
    transition: width 0.6s ease;
}

/* Estilo para a mensagem de contato */
.contact {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 25px;
}

/* Media Query para Responsividade em Telas Menores (Aprimoramento) */
@media (max-width: 600px) {
    .container {
        padding: 30px 20px; /* Reduz o padding em telas pequenas */
    }

    h1 {
        font-size: 1.5em; /* Reduz o tamanho da fonte do título */
    }

    p {
        font-size: 1em; /* Reduz o tamanho da fonte do parágrafo */
    }

    .icon {
        font-size: 3em; /* Reduz o tamanho do ícone */
    }
}