#contact-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(/images/contact/licensed_kitchen_img.jpg);
  background-position: center;
  background-size: cover;
}

#contact-form {
  width: 50%;
  background-color: rgba(235, 233, 229, 0.8);
  border-radius: 10px;
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em;
}

.form-text {
  text-align: center;
  width: 75%;
}

iframe {
  width: 75%;
}

#cta-title {
  margin: 1em 0;
}

#contact-info {
  display: flex;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 10px 10px 0 0;
  margin-top: 5em;
  bottom: 0;
}

.info-group {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-group h4 {
  margin: 4% 0 2% 0;
  font-weight: 500;
}

.info-description {
  width: 75%;
  text-align: center;
  margin: 0 0 3% 0;
  font-weight: 300;
}

.contact-socials {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 75%;
}

.contact-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 300;
}

.contact-icon i {
  margin: 0;
}

i {
  margin-right: 2rem;
  font-size: 40px;
}

.social-link {
  height: 3em;
}

#phone-numbers {
  font-weight: 300;
}

#ig-icon {
  height: 4em;
}

@media only screen and (max-width: 1440px) {
  #contact-hero {
    padding-top: 10%;
  }

  #cta-title {
    margin: 0;
  }

  #contact-form p {
    margin: 10% 0;
  }

  .contact-icon p {
    width: 75%;
    text-align: center;
  }

  .info-description, .contact-socials {
    width: 85%;
  }
}

@media only screen and (max-width: 1200px) {
  h1 {
    font-size: 48px;
  }
  
  #contact-form {
    width: 75%;
  }

  .contact-socials {
    margin: 10%;
  }
}

@media only screen and (max-width: 1024px) {
  h1 {
    font-size: 36px;
  }

  #contact-form p {
    margin: 5% 0;
  }

  .contact-socials {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 768px) {
  #contact-hero {
    padding-top: 20%;
    background: #ebe9e5;
  }

  #contact-form {
    width: 90%;
    border: none;
    padding: 0;
  }

  iframe {
    width: 100%;
  }

}

@media only screen and (max-width: 480px) {
  #contact-info {
    flex-direction: column;
    align-items: center;
  }

  .info-group {
    margin-top: 5%;
    width: 80%;
  }

  #contact-form {
    width: 80%;
    border: none;
    padding-top: 5%;
  }

  .contact-socials {
    width: 100%;
    margin: 10% 0;
  }

  .icon-links a {
    display: flex;
    justify-content: center;
    margin: 5% 10%;
  }

  .icon-links i {
    margin: 0;
  }
}