/* Estilos gerais */
body {
    font-family: Arial, sans-serif; /* Define a fonte padrão para o corpo do documento */
    margin: 0; /* Remove margens padrão */
    padding: 0; /* Remove preenchimentos padrão */
    background-color: #4CE670; /* Define cor de fundo padrão verde para o corpo */
    color: white; /* Define cor do texto padrão para branco */
}

/* Estilo do cabeçalho */
.header {
    background-color: white; /* Fundo branco para o cabeçalho */
    padding: 10px; /* Preenchimento interno do cabeçalho */
    display: flex; /* Usa flexbox para alinhamento dos itens */
    justify-content: space-between; /* Espaça os itens igualmente */
    align-items: center; /* Alinha itens verticalmente no centro */
    position: relative; /* Posicionamento relativo para possíveis elementos absolutos dentro */
}

/* Ajuste do tamanho da logo */
.header .logo {
    max-width: 150px; /* Largura máxima da logo */
    height: auto; /* Altura automática baseada na largura */
}

/* Estilo do botão do menu */
.menu-button {
    background-color: #0056b3; /* Fundo azul para o botão */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 10px 20px; /* Preenchimento interno do botão */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor em forma de ponteiro para indicar clicabilidade */
    font-size: 16px; /* Tamanho da fonte do texto no botão */
}

/* Estilo do menu oculto */
.menu {
    display: none; /* Inicialmente oculto */
    background-color: white; /* Fundo branco */
    position: absolute; /* Posicionamento absoluto para flutuar sobre outros conteúdos */
    right: 10px; /* Posiciona à direita com espaço de 10px */
    top: 60px; /* Posiciona 60px abaixo do topo */
    border: 1px solid #ccc; /* Borda cinza clara */
    border-radius: 5px; /* Bordas arredondadas */
    padding: 10px; /* Preenchimento interno */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil para destaque */
}

/* Estilo dos links dentro do menu */
.menu a {
    display: block; /* Exibe como bloco para ocupar a largura total */
    padding: 8px; /* Preenchimento interno dos links */
    text-decoration: none; /* Sem sublinhado */
    color: black; /* Texto preto */
    margin-bottom: 5px; /* Margem abaixo de cada link */
    border-radius: 5px; /* Bordas arredondadas para os links */
}

.menu a:hover {
    background-color: #f0f0f0; /* Cor de fundo ao passar o mouse */
}

/* Estilo das seções do corpo da página */
.section {
    padding: 20px; /* Preenchimento interno das seções */
    background-color: #4CE670; /* Fundo verde */
    color: white; /* Texto branco */
}

.section h2 {
    margin-top: 0; /* Remove margem superior padrão */
    color: white; /* Texto branco para cabeçalhos H2 */
}

/* Estilo geral dos botões */
.button {
    display: inline-block; /* Exibe como bloco, mas ao lado de outros elementos */
    background-color: #0056b3; /* Fundo azul */
    color: white; /* Texto branco */
    padding: 10px 20px; /* Preenchimento interno */
    margin: 5px 0; /* Margem acima e abaixo */
    text-decoration: none; /* Sem sublinhado */
    border-radius: 5px; /* Bordas arredondadas */
    text-align: center; /* Texto centralizado */
    cursor: pointer; /* Cursor em forma de ponteiro */
    font-size: 16px; /* Tamanho da fonte */
}

.button:hover {
    background-color: #003d80; /* Fundo azul escuro ao passar o mouse */
}

/* Estilo do rodapé */
.footer {
    background-color: white; /* Fundo branco */
    color: black; /* Texto preto */
    padding: 20px; /* Preenchimento interno */
    display: flex; /* Usa flexbox para alinhamento dos itens */
    justify-content: space-between; /* Espaça os itens igualmente */
    align-items: center; /* Alinha itens verticalmente no centro */
}

/* Estilo da logo no rodapé */
.footer-logo {
    max-width: 100px; /* Largura máxima da logo */
}

/* Estilo para caixas azuis */
.blue-box {
    background-color: #00B6FA; /* Fundo azul */
    color: white; /* Texto branco */
    padding: 20px; /* Preenchimento interno */
    border-radius: 10px; /* Bordas arredondadas */
    margin-bottom: 20px; /* Margem abaixo da caixa */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Estilo para caixas brancas */
.white-box {
    background-color: white; /* Fundo branco */
    color: black; /* Texto preto */
    padding: 20px; /* Preenchimento interno */
    border-radius: 10px; /* Bordas arredondadas */
    margin-bottom: 40px; /* Margem abaixo da caixa */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Estilo para seções de alerta */
.alert-section {
    background-color: red; /* Fundo vermelho */
    color: white; /* Texto branco */
    padding: 20px; /* Preenchimento interno */
    border-radius: 10px; /* Bordas arredondadas */
    margin-bottom: 20px; /* Margem abaixo da seção */
    text-align: center; /* Texto centralizado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Estilo para a exibição dos clientes */
.clients {
    display: flex; /* Usa flexbox para disposição dos itens */
    flex-wrap: wrap; /* Permite quebra de linha dos itens */
    justify-content: space-around; /* Espaçamento igual em torno dos itens */
}

.client {
    text-align: center; /* Texto centralizado dentro do item do cliente */
    margin: 20px; /* Margem em torno de cada item do cliente */
    flex-basis: 150px; /* Largura básica de cada item do cliente */
}

.client img {
    max-width: 150px; /* Largura máxima da imagem */
    margin-bottom: 10px; /* Margem abaixo da imagem */
}

.client p {
    font-size: 1.2em; /* Tamanho da fonte para o texto abaixo da imagem */
    color: black; /* Texto preto */
}

/* Estilo para títulos das cidades */
.city-title {
    font-size: 1.5em; /* Tamanho da fonte para títulos de cidades */
    margin: 20px 0 10px; /* Margem acima, nenhuma lateral, e margem menor abaixo */
    color: white; /* Texto branco */
}


.video-container {
  width: 100%;
  max-width: 560px;    /* Largura máxima do vídeo */
  margin: 0 auto 20px; /* Centraliza horizontalmente e adiciona espaço abaixo */
  text-align: center;  /* Centraliza o iframe se precisar */
}

.video-container iframe {
  width: 100%;   /* O iframe se ajusta à largura do contêiner */
  height: 315px; /* Altura fixa, pode alterar conforme desejar */
  border: 0;
}