body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: white;
}
header {
  background-color: white;
  background-image: none;
}


/* container principal com layout em coluna */
#sobre {
  display: flex;
  flex-direction: column;
  padding: 60px 80px; /* Padding padrão para desktop */
  background-color: white;
}
html, body {
  background-color: white;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* subtitulo (SOBRE NÓS) acima de tudo */
.subtitulo {
  color: #a67c00; /* dourado */
  font-weight: bold;
  font-size: 3rem;
  margin: 0;
  text-transform: uppercase;
  margin-bottom: 30px;
  align-self: flex-start;
}

/* bloco com imagem e texto lado a lado */
.sessao-conteudo {
  display: flex;
  /* Alinha os itens ao centro verticalmente para melhor equilíbrio */
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}


/* imagem à esquerda */
.imagemSobre {
  /* Adiciona flexbox para centralizar a imagem dentro do seu próprio div */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Garante que o contêiner da imagem não seja muito grande, mantendo a proporção */
  max-width: 400px;
  width: 100%; /* Permite que o div imagemSobre seja responsivo */
}

/* texto à direita da imagem */
.textoSobre {
  max-width: 900px; /* Limite de largura para o texto em desktop */
}

.titulo {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  margin: 0 0 20px;
  color: #2c2c2c;
  text-align: left; /* Título alinhado à esquerda por padrão no desktop */
}

.textoSobre p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #444;
}

/* ==========================================================================
    Media Queries - Responsividade para "Sobre Nós"
    ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  #sobre {
    padding: 40px 40px; /* Reduzir padding para tablet */
  }

  .sessao-conteudo {
    gap: 40px; /* Ajustar o gap */
  }

  .imagemSobre img {
    max-width: 300px; /* Diminuir um pouco a imagem para tablet */
  }

  .titulo {
    font-size: 7rem; /* Reduzir tamanho do título */
  }

  .textoSobre p {
    font-size: 1rem; /* Reduzir tamanho do parágrafo */
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  #sobre {
    padding: 30px 20px; /* Padding menor para mobile */
  }

  .subtitulo {
    font-size: 1.8rem; /* Diminuir o tamanho do subtítulo */
    margin-bottom: 20px;
    align-self: center; /* Centralizar o subtítulo em mobile */
  }

  .sessao-conteudo {
    flex-direction: column; /* Empilhar imagem e texto em coluna */
    align-items: center; /* Centralizar itens na coluna */
    gap: 30px; /* Espaçamento entre os itens empilhados */
  }

  .imagemSobre img {
    max-width: 80%; /* Ajustar largura da imagem para ocupar mais espaço na tela menor */
    height: auto; /* Manter proporção */
  }

  .textoSobre {
    max-width: 100%; /* Permitir que o texto ocupe toda a largura disponível */
    text-align: justify; /* Justificar o texto para melhor leitura */
  }

  .titulo {
    font-size: 2rem; /* Reduzir ainda mais o tamanho do título */
    text-align: center; /* Centralizar o título em mobile */
    margin-bottom: 15px;
  }

  .textoSobre p {
    font-size: 0.95rem; /* Ajustar o tamanho da fonte para leitura em mobile */
    margin-bottom: 12px;
  }
}