.inputbox{
font-size: larger;
display: flex;
align-items: center;
margin-top: 2rem;
margin-bottom: 2rem;
background: var(--black);
border: var(--border);

}
.input{
  font-size: larger;
  display: flex;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background: var(--black);
  border: var(--border);
}

.text-black{
  margin-left: 10px;
}


.contact .row {
  display: flex;
  background: var(--black);
  flex-wrap: wrap;
  gap: 1rem;
}

.contact .row .map {
  flex: 1 1 100%;
  width: 100%;
  height: 300px; /* Altura do mapa para mobile */
  object-fit: cover;
}

.contact .row form {
  flex: 1 1 100%;
  padding: 5rem 2rem;
  text-align: center;
}

.contact .row form h3 {
  text-transform: uppercase;
  font-size: 3.5rem;
  color: var(--white);
}

.contact .row form .inputbox {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: var(--black);
  border: var(--border);
}

.contact .row form .inputbox span {
  color: var(--white);
  font-size: 2rem;
  padding-left: 2rem;
}

.contact .row form .inputbox input {
  width: 100%;
  padding: 2rem;
  font-size: 1.7rem;
  color: #fff;
  text-transform: none;
  background: none;
}

.contact .row form .btn {
  padding: 1rem 3rem;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  text-transform: uppercase;
} 

/* Consulta de mídia para telas maiores (acima de 768px) */
@media (min-width: 768px) {
  .contact .row .map {
    flex: 1 1 20%; /* Mapa ocupará 50% da largura */
    height: 400px; /* Ajuste da altura do mapa para telas maiores */
  }

  .contact .row form {
    flex: 1 1 50%; /* Formulário ocupará 50% da largura */
    padding: 3rem; /* Ajuste do padding para melhorar o layout em telas grandes */
    text-align: left; /* Alinhamento do texto à esquerda */
  }
}