/* Seção 1: Hero Image */
.about-hero {
  width: 100%;
  height: 400px;
  /* Altura da imagem principal */
}

.about-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Garante que a imagem cubra a área sem distorcer */
}

.about-content {
  padding: 50px 0;
  background-color: #fff;
  color: #333;
  position: relative;
  /* Necessário para os círculos decorativos */
  overflow: hidden;
  /* Garante que os círculos não "vazem" */
}

.about-content .container {
  display: flex;
  gap: 4rem;
  align-items: center;
  /* Alinha verticalmente o texto com a imagem */
  padding: 0px 60px 0px 60px;
}

.about-text {
  flex-basis: 60%;
  /* Dando um pouco mais de espaço para o texto */
}

.about-text h2 {
  font-family: 'exo 2', sans-serif;
  font-size: 1.8rem;
  /* Aumentando um pouco o título */
  font-weight: 800;
  color: #000;
}

.about-text p {
  font-family: 'lato', sans-serif;
  font-size: 1.3rem;
  margin-bottom: -10px;
  /* Aumentando o espaçamento entre parágrafos */
  color: #000000;
  /* Um cinza mais suave para o texto */
}

/* Estilo específico para a lista (Inspiramos, etc.) */
.about-text ul {
  list-style: none;
  /* Remove a bolinha padrão */
  padding-left: 0;
  margin-top: 20px;
}

.about-text ul li {
  font-family: 'lato', sans-serif;
  font-size: 1.3rem;
  color: #000000;
  margin-bottom: 5px;
  padding-left: 25px;
  /* Cria espaço para a nossa bolinha customizada */
  position: relative;
  /* Define o ponto de referência para a bolinha */
}

/* Cria a bolinha laranja customizada */
.about-text ul li::before {
  content: '';
  /* Essencial para pseudo-elementos */
  position: absolute;
  left: 0;
  top: 11px;
  /* Ajusta a posição vertical da bolinha */
  width: 7px;
  height: 7px;
  background-color: #000000;
  border-radius: 50%;
  /* Transforma o quadrado em círculo */
}

.about-text ul li strong {
  color: #000;
  font-weight: 700;
}

.about-visual {
  flex-basis: 40%;
}

.about-visual img {
  height: 35rem;
  border-radius: 20px;
}

.join-team-section {
  background: linear-gradient(to top, #cecece, #fff);
  /* Fundo cinza claro */
  padding: 0px 0px 60px;
}

.join-team-section .container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.join-team-section .mascot-right {
  width: 20rem;
  height: auto;
}

.join-team-section .mascot-left {
  width: 25rem;
  height: auto;

}

.join-team-form {
  text-align: center;
  max-width: 470px;
}

.join-team-form h3 {
  font-family: 'exo 2', sans-serif;
  font-size: 1.6rem;
  color: #000;
  margin-bottom: 10px;
}

.join-team-form p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #000000;
  font-family: 'lato', sans-serif;
  margin-top: -5px;
}

.join-team-form-campo {
  margin-top: 40px;
}

.join-team-form input {
  width: 77%;
  padding: 7px 20px;
  /* Padding interno */
  margin-bottom: 30px;
  font-family: 'lato', sans-serif;
  font-size: 1rem;

  /* Estilo do Design */
  background-color: transparent;
  /* Fundo transparente */
  border: 2px solid #fa680a;
  /* Borda laranja */
  border-radius: 30px;
  /* Bordas de "pílula" */
  color: #333;
  /* Cor do texto quando o usuário digita */
}

/* Deixa o texto do placeholder (Nome, E-mail) mais sutil */
.join-team-form input::placeholder {
  color: #aaa;
}

/* Remove a borda padrão que alguns navegadores colocam ao clicar */
.join-team-form input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(250, 104, 10, 0.5);
  /* Efeito de brilho laranja opcional */
}

.join-team-form .btn-cta {
  width: 40%;
  border: none;
  cursor: pointer;
  padding: 10px;
  /* Garante a mesma altura dos inputs */
  border-radius: 30px;
  /* Bordas de "pílula" */
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #fa680a;
  /* Sobrescreve o estilo padrão de .btn-cta */
  color: #fff;
  margin-top: 10px;
}

.join-team-form .btn-cta:hover {
  background-color: #e85a00;
}

/* O estilo dos mascotes continua o mesmo */
.mascot-left,
.mascot-right {
  height: 150px;
}