/* ----- showcase contact ----- */
#showcase-contact .section-content {
  padding-left: 20%;
}

/* ----- contact info (separator contact) ----- */
.separator-contact {
  display: grid;
  min-height: 50vh;
  min-height: 50dvh;
  gap: 100px;
  /* padding-left: 10%;
  padding-right: 30%; */
  padding: 120px 33% 120px 10%;
}
.separator-contact-simple {
  display: grid;
  grid-template-columns: 2fr auto 1fr;
  min-height: 50vh;
  min-height: 50dvh;
  /* margin: 150px 0; */
  gap: 50px;
}
.separator-contact-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 100px;
}
.contact-methods-grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: flex-start;
  gap: 6px 18px;
  font-family: "Red Hat Display";
}

/* ----- meet us ----- */
.meet-us {
  padding: 100px 30%;
  display: grid;
  align-content: center;
}
.meet-us .meet-us-title {
  margin-bottom: 40px;
}

/* ----- media ----- */
.separator-media {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 50vh;
  min-height: 50dvh;
  margin: 150px 0;
  gap: 50px;
}
.separator-media .separator-box {
  padding: 0 15%;
}
#media .showcase-secondary {
  background-position: top;
}
#media .showcase-secondary-gradient {
  background: linear-gradient(2700deg, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}

/* contact form */
.contact-form-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  justify-items: center;

  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 15% 100px 15%;
}
.section-img {
  width: 100%;
}
.jcard {
  background-color: #0d0d0d;
  border-radius: 0 25px 25px 0;
  /* max-width: 500px; */
  width: 100%;
  padding: 60px 10%;
}
.form-grid {
  margin-top: 20px;
}

/* form btn container */
.form-btn-container {
  display: flex;
  justify-content: center;
}

/* form labels */
#contact form h6 {
  /* color: white; */
  font-size: 10px;
  margin-bottom: 10px;
}

/* vertical gap between inputs */
.form-group {
  margin-bottom: 1.2rem;
}

/* contact from title */
#contact .form-title {
  display: grid;
  justify-items: center;
}
#contact .form-title .jbtn-icon {
  margin-bottom: 20px;
  cursor: unset;
}

/* form privacy (deprecated?) */
#form-privacy {
  font-size: 14px;
}
#contact #policy {
  display: flex;
}
#contact #policy .custom-control-label,
#policy span {
  /* font-family: Metropolis; */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.5rem;
}

/* custom select color */
#contact .input-select {
  background-color: #0d0d0d;
}

/* util */
.show-m {
  display: none;
}

/* success/error message */

#error_message,
#error_message_2,
#success_message,
#success_message_2 {
  padding: 30px;
}

/* ---------- MEDIA QUERIES ---------- */

@media (max-width: 1400px) {
  /* separator contact */
  .separator-contact {
    padding: 120px 20% 120px 10%;
  }
  /* contact form */
  .contact-form-container {
    padding: 0 10% 100px 10%;
  }
}
@media (max-width: 1200px) {
  /* contact form */
  .contact-form-container {
    /* padding: 0 5% 100px 5%; */
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1150px) {
  /* separator contact */
  .separator-contact {
    padding: 120px 10% 120px 10%;
  }
}
@media (max-width: 992px) {
  /* separator-contact */
  /* .separator-contact {
    gap: 50px;
  } */
  .separator-contact-grid {
    gap: 50px;
  }
  /* contact form */
  .contact-form-container {
    padding: 0 5% 100px 5%;
  }
  /* meet us */
  .meet-us {
    padding: 100px 25%;
  }
}
@media (max-width: 768px) {
  /* showcase */
  #showcase-contact h1 {
    font-size: 2.2rem;
  }
  /* contact methods */
  .contact-methods-grid {
    grid-template-columns: auto;
  }
  /* contact form */
  .contact-form-container {
    padding: 0 0 100px 0;
  }
}
@media (max-width: 680px) {
  /* contact info (separator contact) */
  .separator-contact {
    padding: 120px 15% 120px 15%;
    gap: 50px;
  }
  .separator-contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .contact-methods-grid {
    grid-template-columns: auto auto;
  }
  /* meet us */
  .meet-us {
    padding: 100px 20%;
  }
  /* contact form */
  .contact-form-container {
    padding: 100px 10% 100px 10%;
    grid-template-columns: 1fr;
  }
  .jcard {
    border-radius: 25px;
  }
  /* util */
  .show-m {
    display: block;
  }
  .hide-m {
    display: none;
  }
}
@media (max-width: 576px) {
  /* showcase */
  #showcase-contact.section-duo {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  #showcase-contact .section-content {
    padding-left: 15%;
    padding-right: 15%;

    grid-area: 1/ 1 / span 2 / span 1;
    z-index: 1;
  }
  #showcase-contact h1 {
    font-size: 2rem;
  }
  #showcase-contact .section-img {
    grid-area: 2/1 / span 2 / span 1;
  }
  /* meet us */
  .meet-us {
    padding: 100px 15%;
  }
}
@media (max-width: 480px) {
  /* showcase */
  #showcase-contact h1 {
    font-size: 1.8rem;
  }
  /* meet us */
  .meet-us {
    padding: 100px 10%;
  }
  /* .meet-us h2{
  font-size: 1.7rem;
} */
}
@media (max-width: 400px) {
  /* showcase */
  #showcase-contact .section-content {
    padding-left: 10%;
    padding-right: 10%;
  }
  #showcase-contact h1 {
    font-size: 1.6rem;
    letter-spacing: 0.2em;
  }
  /* contact info (separator contact) */
  .separator-contact {
    padding: 120px 10% 120px 10%;
  }
  /* meet us */
  .meet-us {
    padding: 100px 30px;
  }
  /* .meet-us h2{
  font-size: 1.5rem;
} */
  /* contact form */
  .contact-form-container {
    padding: 100px 0;
  }
  .jcard {
    background-color: black;
    border-radius: 0;
    padding: 60px 30px;
  }
}
@media (max-width: 300px) {
  /* showcase */
  #showcase-contact .section-content {
    padding-left: 30px;
    padding-right: 30px;
  }
  /* contact info (separator contact) */
  .separator-contact {
    padding: 120px 30px 120px 30px;
  }
  /* contact form */
  .contact-form-container {
    padding: 100px 15px 100px 15px;
  }
}