/* css\main.css */
/* Variáveis de Cor (Melhor prática) */
/* Definimos as cores do seu layout aqui para reutilizá-las. */
:root {
    --cor-brand: #00A99D; /* O ciano/verde-água principal do layout */
    --cor-dark: #1a1a1a; /* O preto/cinza escuro do layout */
    --cor-light: #FFFFFF;
    --cor-brand-navbar: #00DCDA;
}

/* Ajuste de Largura (Centralização)
  O Bootstrap 5.3 usa 'max-width: 1320px' em telas 'xxl' (1400px ou mais).
  Para manter o site mais centralizado, vamos forçar a largura
  máxima de '1140px' (que é o padrão para telas 'xl')
  mesmo em telas 'xxl'.
*/
@media (min-width: 1400px) { /* Este é o breakpoint 'xxl' do Bootstrap */
    
    /* Estamos selecionando o .container padrão e os containers
      específicos de breakpoints (como .container-xxl) 
      para garantir que *todos* obedeçam ao nosso novo limite.
    */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1140px; /* Reduzimos a largura máxima de 1320px para 1140px */
    }
}

/* Aplicando a fonte que importamos ao corpo do site */
body {
    font-family: 'Poppins', sans-serif;
    /* Cor de fundo padrão para as seções escuras */
    background-color: #1a1a1a; 
    color: #f0f0f0; /* Cor de texto padrão para fundos escuros */
}



/* --- Seção Contato (Formulário) --- */
/* Ajuste nos campos do formulário */
.form-control:focus {
    border-color: var(--cor-brand); /* Borda na cor da marca ao focar */
    box-shadow: 0 0 0 0.25rem rgba(0, 169, 157, 0.25); /* Sombra na cor da marca ao focar */
}