/* ========================================
   SEÇÃO "QUEM SOMOS"
======================================== */
.about {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
}

.title {
  font-size: 36px;
  color: #0078d4;
  margin-bottom: 40px;
}

.about-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.about-content img {
  flex: 1;
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
}

.about-text {
  flex: 1;
  font-size: 18px;
  text-align: justify;
  color: #555;
  line-height: 1.8;
}

.about-text strong {
  font-size: 20px;
  color: #0078d4;
}

/* Linha divisória */
.decorative-divider {
  width: 60%;
  /* Largura da linha */
  margin: 20px auto;
  /* Centraliza e adiciona espaço acima e abaixo */
  height: 20px;
  /* Altura da linha */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpolyline points='0,10 10,0 20,10 30,0 40,10 50,0 60,10 70,0 80,10 90,0 100,10' fill='none' stroke='%23f4a000' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
  /* Aplica o padrão ondulado */
  background-size: contain;
  /* Ajusta o tamanho do padrão */
}

.subtitle {
  font-size: 28px;
  color: #f4a000;
  margin-bottom: 30px;
}

/* ========================================
   SEÇÃO DE EQUIPE
======================================== */
.team {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.team-member {
  text-align: center;
  flex: 1;
  max-width: 1500px;
}

.team-member img {
  width: 100%;
  max-width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.team-member h3 {
  font-size: 18px;
  color: #0078d4;
  margin-bottom: 10px;
}

.team-member p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}
  
  /* ========================================
     RESPONSIVIDADE
  ======================================== */
  @media (max-width: 1200px) {
    .about-content {
      flex-direction: column;
      text-align: center;
    }
  
    .about-content img {
      margin-bottom: 20px;
    }
  }