/* css\main.css */

/* Define a fonte principal para todo o site */
body {
    font-family: 'Poppins', sans-serif;    
    background-color: var(--cor-navbar-bg);
    padding-top: 70px;
}

/* Criamos "variáveis" de cor para usar em todo o site. 
    Se o cliente quiser mudar o tom de verde, mudamos só aqui. 
*/
:root {
    --cor-principal-teal: #00c0b7; /* Tom de verde-água/teal principal do design */
    --cor-dark: #212529; /* Escuro padrão (quase preto) */
    --cor-navbar-bg: #00948B;      /* Para o fundo do menu e ícones */
    --cor-gradiente-start: #051937;
    --cor-gradiente-end: #008793;
}

/* --- Estilos de Classes Auxiliares (Helpers) --- */

/* Criamos uma classe de botão personalizada com a cor do design */
.btn-custom {
    background-color: var(--cor-principal-teal);
    border-color: var(--cor-principal-teal);
    color: white;
    padding: 8px 30px; /* Mais preenchimento */
    font-weight: 600;
    border-radius: 50px; /* Botões arredondados */
    transition: all 0.3s ease; /* Efeito suave no hover */
}
.btn-custom:hover {
    background-color: #00a0a8; /* Um tom mais escuro no hover */
    border-color: #00a0a8;
    color: white;
    transform: translateY(-2px); /* Efeito sutil de "levantar" */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.cor-principal {
  color: var(--cor-principal-teal);
}

/* ==================================================
 AJUSTE DE LARGURA (ÁREA ÚTIL) DO SITE
 ==================================================
 Por padrão, o Bootstrap usa larguras bem amplas em telas grandes.
 Vamos "trazer" o conteúdo mais para o centro em telas XL e XXL,
 deixando-o mais estreito, como solicitado.
*/

/* Em telas 'Extra-Grandes' (XL - 1200px de largura ou mais) 
  - O padrão do Bootstrap seria 1140px. 
  - Vamos reduzir para 960px.
*/
@media (min-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

/* Em telas 'Extra-Extra-Grandes' (XXL - 1400px de largura ou mais) 
  - O padrão do Bootstrap seria 1320px. 
  - Vamos reduzir para 1140px. 
*/
@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}

/* COMENTÁRIO DE ESPECIALISTA: 
  Sinta-se livre para "brincar" com os valores 960px e 1140px. 
  Se você quiser AINDA MAIS estreito, pode tentar 960px para ambos. 
  Se quiser um pouco mais largo, pode tentar 1140px para ambos. 
  Este é o seu principal controle sobre a largura do site.
*/