/* Importante: Define a caixa de modelo para incluir padding e borda no tamanho total. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Fundo Degradê e Centralização
-----------------------------
- Fundo: Degradê vertical suave de Branco Gelo (#F7F9FB) para um Cinza Claro (#E0E5E9).
- vh/vw: Garante que ocupe 100% da tela.
- Flexbox: Centraliza todo o conteúdo (logo, texto e ícones) no centro da tela.
*/
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    
    /* 1. MANTÉM O DEGRADÊ E A IMAGEM DE FUNDO */
    background-image: 
        /* Overlay Branco com 40% de opacidade para clarear a imagem */
        linear-gradient(rgba(255, 255, 255, 0.971), rgba(255, 255, 255, 0.905)), 
        
        /* O seu URL da imagem de fundo */
        url('./image/background.jpg');
    
    /* 2. Mantém as propriedades de ajuste da imagem */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; /* Garantia de centralização */
    
    color: #333; /* Cor do texto principal */
}


/* Estiliza o conteúdo para ocupar 90% da largura em telas grandes e ter um padding interno. */
.container {
    padding: 20px;
    max-width: 900px; /* Limita a largura máxima para não esticar muito em telas grandes */
    width: 90%;
    
}

/* Logo (Imagem)
-------------
- max-width: Garante que o logo nunca ultrapasse o tamanho do seu container pai (responsividade).
- height: auto: Mantém a proporção correta da imagem.
- margin: Espaçamento abaixo do logo.
*/
.logo {
    max-width: 350px; /* Tamanho máximo do logo em telas grandes */
    width: 80%; /* Ocupa 80% do container em telas menores, garantindo responsividade */
    height: auto;
    margin-bottom: 40px;
    display: block; /* Garante que fique centralizado com text-align: center no body */
    margin-left: auto;
    margin-right: auto;
}

/* Estiliza o link do site abaixo do logo */
.site-link {
    font-size: 1.2em;
    color: #007BFF; /* Cor azul para destacar o link (combinando com o logo) */
    margin-bottom: 10px;
    font-weight: bold;
}

/* Estiliza a mensagem principal */
.message {
    font-size: 3em;
    color: #004D99; /* Um tom de azul forte que combine com o logo NTR */
    margin-bottom: 10px;
    font-weight: 700;
}

.subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
}


/* Ícones Sociais (Instagram, Facebook, WhatsApp)
-----------------------------------------------
*/
.social-links {
    margin-top: 30px;
}

.social-icon {
    display: inline-block;
    color: #004D99; /* Cor principal dos ícones */
    font-size: 2em; /* Tamanho dos ícones */
    margin: 0 15px;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Efeito suave de transição */
}

/* Efeito de movimento (aumento de tamanho) e mudança de cor ao passar o mouse (hover) */
.social-icon:hover {
    transform: scale(1.2); /* Aumenta 20% no tamanho */
    color: #007BFF; /* Uma cor de destaque ao passar o mouse */
}

/* Responsividade (Ajustes para Telas Menores)
-------------------------------------------
Ajusta o tamanho das fontes e do logo para que fiquem melhores em celulares.
*/
@media (max-width: 600px) {
    .message {
        font-size: 2em; /* Reduz o tamanho da mensagem principal */
    }

    .subtitle, .site-link {
        font-size: 1em; /* Reduz o tamanho dos textos auxiliares */
    }
    
    .logo {
        max-width: 250px; /* Reduz um pouco o tamanho máximo do logo */
    }

    .social-icon {
        font-size: 1.8em; /* Reduz o tamanho dos ícones */
        margin: 0 10px;
    }
}