.contact-info > div {
  display: flex;
  width: 100%;
  margin-top: 40px;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-evenly;
}

.contact-info .value {
  color: var(--color-black);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.contact-info h4 {
  font-size: 20px;
}

.contact-info .telephone,
.contact-info .email {
    position: relative;
    padding-left: 65px;
    margin-top: 20px;
}

.contact-info .telephone::before {
  background-image: url(/img/phone.svg);
  width: 16px;
  height: 30px;
  left: 10px;
}

.contact-info .email::before {
  background-image: url(/img/email.svg);
  width: 37px;
  height: 30px;
  left: 0;
}

.contact-info .email::before,
.contact-info .telephone::before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
}

#contact {
       background: url("/img/top_10_bg.png") no-repeat center;
       background-size: cover;
}

/* ------------------------------------------------------------
   Contact Us page (scoped)
   ------------------------------------------------------------ */

#contact-us p {
  font-size: 18px;
}

section#contact-us {
  padding-bottom: 100px;
}

#contact-us textarea,
#contact-us input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-black);
  border-radius: 5px;
}

#contact-us form {
  display: grid;
  gap: 20px;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "fullname_label email_label"
    "fullname       email"
    "subject_label  subject_label"
    "subject        subject"
    "message_label  message_label"
    "message        message"
    "actions        actions";
}

/* Explicit placement so adding hidden/honeypot fields doesn't break layout */
#contact-us form label[for="fullname"] { grid-area: fullname_label; }
#contact-us form #fullname { grid-area: fullname; }

#contact-us form label[for="email"] { grid-area: email_label; }
#contact-us form #email { grid-area: email; }

#contact-us form label[for="subject"] { grid-area: subject_label; }
#contact-us form #subject { grid-area: subject; }

#contact-us form label[for="message"] { grid-area: message_label; }
#contact-us form #message { grid-area: message; }

#contact-us form button {
  grid-area: actions;
  justify-self: start;
}

#contact-us form textarea {
  height: 125px;
  resize: none;
}

/* If you wrap your honeypot in a container with class hp, keep it out of layout flow */
#contact-us form .hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  #contact-us form {
    display: flex;
    flex-direction: column;
  }
}
#contact-us .contact-subhead {
    font-size: 30px;
    font-weight: 600;
}
#contact-us .contact-subhead em {
    font-style: normal;
    color: var(--color-blue);
}