body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#contact {
  background: linear-gradient(
      to bottom,
      rgba(9, 13, 17, 50) 0rem,
      rgba(0, 0, 0, 0) 20rem
    ),
    url("../assets/focus_bg.png") center/cover no-repeat;

  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 8rem;
}

.section-content-flex {
  width: 100%;
  max-width: 1350px;
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  padding-top: 5rem;
}

.contact-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#contact h2 {
  line-height: 46px;
  text-align: left;
}

.contact-content p {
  text-align: left;
  max-width: 400px;
}

.email-phone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.email,
.phone {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 1rem;
}

#after-form {
  display: none;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: fit-content;
  width: fit-content;
}

.name-mail-container {
  display: flex;
  gap: 1.5rem;
}

.label-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 20rem;
}

label {
  text-align: left;
}

input {
  height: 2rem;
  background-color: #161d25;
  border: solid 1px #0a3d62;
  border-radius: 4px;
  color: #bac1c5;
  padding-left: 0.75rem;
}

input:focus {
  outline: solid 1px #1e90ff;
}

.label-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

textarea {
  height: 155px;
  background-color: #161d25;
  border: solid 1px #0a3d62;
  border-radius: 4px;
  color: #bac1c5;
  padding: 0.75rem;
  font-size: 14px;
}

textarea:focus {
  outline: solid 1px #1e90ff;
}

.btn {
  font-size: 16px;
}

.btn:hover {
  background: #004477;
}

.mobile-extra-text {
  display: none;
}