.contacts-hero {
  background: url(/media/images/hero-2.png);
  height: 55vh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  padding: 3em 3em 3em 3em;
  justify-content: flex-start;
  /* align-content: center; */
}

.contacts-hero .content {
  display: flex;
  gap: 0.5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.contacts-hero .content h1 {
  font-size: 4em;
  line-height: 1em;
  color: var(--light);
}

.contacts-hero .content p {
  color: var(--accent1);
  font-size: 1.2em;
  margin-bottom: 1em;
}

.contacts-hero .content button {
  padding: 1em;
  background-color: red;
  color: var(--light);
  border: none;
  border-radius: 0.5em;
  width: 15em;
  font-size: 1.2em;
}

.contact-us-section label {
  display: block;
  font-family: var(--mont);
}

.contact-us-section input {
  padding: 0.4em;
  border-radius: 0.5em;
  border: 1px solid var(--blue);
  margin: 0.25em;
  font-family: var(--mont);
}

.contact-us-section textarea {
  padding: 0.4em;
  border-radius: 0.5em;
  border: 1px solid var(--blue);
  margin: 0.25em;
  font-family: var(--mont);
}

/* .contact-us-section input:focus {
  outline: none;
} */

.contact-us-section {
  background: whitesmoke;
  height: 30em;
  margin: 3em 7em;
  border: 1px solid var(--blue);
  border-radius: 1em;
  display: flex;
  justify-content: space-around;
  padding: 2em;
}

.contact-us-section .inputs-side {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.contact-us-section .inputs-side .section-header {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: var(--blue);
}

.contact-us-section .inputs-side .personal-details,
.contact-us-section .inputs-side .personal-contacts {
  display: flex;
  gap: 2em;
  color: var(--blue);
}

.personal-msg {
  color: var(--blue);
  /* width: 70%; */
}

/* .personal-msg button {
  width: 100%;
} */

.contact-us-section .details-side {
  width: 45%;
  border: 1px solid black;
  border-radius: 1em;
  padding: 2em;
  background: var(--blue);
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 0.3;
}

.contact-us-section .details-side h2,
.contact-us-section .details-side .connect-with-us h3 {
  color: var(--light);
}

.contact-us-section .details-side .connect-with-us {
  border-top: 1px solid var(--light);
  padding-top: 1em;
}

.contact-us-section .connect-with-us .social-icons {
  display: flex;
  margin: 0.5em;
  gap: 1em;
}

.contact-us-section .details-side .connect-with-us .icon {
  height: 1.25em;
  width: auto;
}

.contact-us-section .details-side .contact-tabs {
  background-color: var(--light);
  padding: 0.5em;
  border-radius: 0.5em;
  color: var(--blue);
}