html {
  --fs-global: 0.5787037037vw;
  font-size: var(--fs-global);
}

.container {
  max-width: 1728px;
  padding-inline: 8rem;
}
@media only screen and (min-width: 1728px) {
    html {
        font-size: 10px;
    }
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 3.2rem;
}
.contact-hero-form-bg {
    filter: blur(.2rem);
    width: 100%;
    height: 100%;
        background: radial-gradient(50% 50% at 50% 50%, #00A19D 40.7%, rgba(10, 10, 10, 0.00) 100%);
}
.contact_hero_form>.wpcf7 {
    width: 100%;
}
.contact_hero_form .wpcf7 form.sent .wpcf7-response-output {
        position: fixed;
    z-index: 100;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner.btn-submit-visually-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index:2;
}
.wpcf7-spinner {
    display: none;
}
.halftone.contact-hero-form-bg-dot {
    z-index: 2;
    background-color: var(--background--main);
    position: absolute;
    top: 0;
    left: 0;
    mask-image: repeating-linear-gradient(90deg, transparent 0rem .2rem, black .2rem .8rem), repeating-linear-gradient(0deg, transparent -.4rem -0.2rem, black -0.2rem .6rem);
    mask-size: .8rem .8rem;
    mask-position: center;
    mask-repeat: repeat;
}
.contact_hero {
  background-color: #0a0a0a;
  overflow: hidden;
}
.contact_hero_content {
  grid-column: 1/5;
      z-index: 2;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: max(21.6rem, 21.0938vh);
    padding-bottom: 0;
    display: flex;
    position: relative;
}
.contact_hero_form_wrap {
      grid-column: 8/-2;
      z-index: 1;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    place-items: center;
    margin-right: -3.2rem;
    display: grid;
    position: relative;
}
.contact_hero_title {
  color: white;
  font-size: 8rem;
  line-height: 1.1;
  margin-bottom: 3.2rem;
}
.span_hightlight_green {
  color: #00a19d;
}
.contact_hero_sub {
  font-size: 1.6rem;
  line-height: 1.4;
  color: #bcbcbc;
}
.contact_hero_title_wrap{
    padding-bottom: clamp(6rem, 20vh, 30.5rem);
}
.contact_hero_desc_wrap {
    z-index: 2;
    padding-bottom: max(23.2rem, 22.6563vh);
    position: relative;
}
.contact_hero_desc{
      margin-bottom: .8rem;
      color: #969696;
      font-size: 1.6rem;
      line-height: 1.4;
}
.contact_hero_desc_title {
    font-size: 2.4rem;
    position: static;
    color: #00A19D;
}
.contact_hero_form_bg_wrap{
  grid-row: 1/2;
  grid-column: 1/2;
  justify-self: center;
      z-index: 0;
    pointer-events: none;
    aspect-ratio: 1;
    height: 127vh;
    margin-top: -8.3vh;
    margin-bottom: -8.3vh;
    position: relative;
}
.contact_hero_form{
  grid-column: 1/2;
  grid-row: 1/2;
}
.contact_hero_form_bg {
  background: radial-gradient(50% 50% at 50% 50%, #00A19D 40.7%, rgba(10, 10, 10, 0.00) 100%);
    filter: blur(.2rem);
    width: 100%;
    height: 100%;
}
.contact_hero_form_bg_dot{
  z-index: 2;
    background-color: #0a0a0a;
    position: absolute;
    inset: 0;
    mask-image: repeating-linear-gradient(90deg, transparent 0rem .2rem, black .2rem .8rem), repeating-linear-gradient(0deg, transparent -.4rem -0.2rem, black -0.2rem .6rem);
    mask-size: .8rem .8rem;
    mask-position: center;
    mask-repeat: repeat;
}
.contact_hero_form{
    font-size: 1.6rem;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 63.8rem;
    height: 100%;
    margin-bottom: 0;
    display: flex;
}
input, textarea {
  font-size: 1.6rem !important;
}
.contact_hero_form_inner {
  z-index: 2;
    background-color: #0a0a0a;
    width: 100%;
    padding: 4rem;
    position: relative;
}
.contact_hero_form_input_wrap{
      flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    display: flex;
    width: 100%;
    position: relative;
}
.contact_hero_form_input{
      color: #fafafa !important;
      background-color: transparent !important;
    border: 0 solid #000 !important;
    height: 100%;
    margin-bottom: 0;
    padding: 4.8rem 0 1rem !important;
}
.contact_hero_form_input_valid_txt{
  z-index: 3;
    opacity: 0;
    pointer-events: none;
    border-radius: .2rem;
    padding: .8rem 1.2rem;
    position: absolute;
    bottom: -3rem;
}
.contact_hero_form_label {
  font-size: 2.4rem;
      pointer-events: none;
    color: #969696;
    margin-bottom: 0;
    font-weight: 400;
    transition: font-size .4s, transform .4s, color .4s;
    position: absolute;
    top: 2.8rem;
}
.contact_hero_form_input:hover + .contact_hero_form_label {
  color: white;
}
.contact_hero_form_input_wrap.active .contact_hero_form_label, .contact_hero_form_input_wrap.filled .contact_hero_form_label {
    transform: translateY(-0.8rem);
    font-size: 1.6rem;
}
.contact_hero_form_line{
      transition: background-color .4s;
    position: absolute;
    bottom: 0;
    background-color: #2b2b2b;
    pointer-events: none;
    width: 100%;
    height: max(1px, .1rem);
    position: relative;
    overflow: hidden;
}
.fs_20.contact_hero_form_label {
  font-size: 1.6rem;
    top: 1.6rem;
}
.contact_hero_form_select {
    width: 100%;
    padding-bottom: 1.2rem;
}
.contact_hero_form_input_wrap.contact_hero_form_select_wrap
 {
    padding-top: 4.8rem;
}
.contact_hero_form_option {
    z-index: 4;
    background-color: #121212;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    transition-property: opacity;
    transition-duration: .4s;
    transition-timing-function: ease;
    position: absolute;
    top: calc(100% + .8rem);
}
 .contact_hero_form_option.active {
    opacity: 1;
    pointer-events: all;
}
.contact_hero_form_option_item {
    color: #bcbcbc;
    cursor: pointer;
    padding: 1.2rem 1.6rem;
    transition: background-color .4s, color .4s;
}
.contact_hero_form_option_item {
      color: #bcbcbc;
    cursor: pointer;
    font-size: 2.4rem;
    line-height: 1.4em;
}
.contact_hero_form_input.textarea
 {
    min-height: 15rem;
 }
 .btn {
    cursor: pointer;
    transition: color .65s cubic-bezier(.785,.135,.15,.86);
    position: relative;
}
.btn-inner {
    z-index: 1;
    justify-content: center;
    align-items: center;
    padding: 1.6rem 2rem;
    display: flex;
    position: relative;
}
.btn-txt-wrap {
    position: relative;
    overflow: hidden;
}
.btn-txt {
    transition: transform .65s cubic-bezier(.785,.135,.15,.86);
}
.txt.fs-16.fw-med.btn-txt.bot
 {
    position: absolute;
    bottom: -100%;
}
.btn-border {
    z-index: 2;
    border-top-style: solid;
    border-top-color: #00a19d;
    border-right-style: solid;
    border-right-color: #00a19d;
    border-bottom-style: solid;
    border-bottom-color: #00a19d;
    border-left-style: solid;
    border-left-color: #00a19d;
    pointer-events: none;
    border-width: max(1px, .1rem);
    border-radius: max(1px, .1rem);
    justify-content: space-between;
    padding: .15rem;
    transition-property: border-color;
    transition-duration: .4s;
    transition-timing-function: ease;
    display: flex;
    position: absolute;
    inset: 0%;
}
.btn-border-ic-left, .btn-border-ic-right {
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    width: .8rem;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}
.btn-border-ic {
    color: #00a19d;
    justify-content: center;
    align-items: center;
    width: .8rem;
    height: .8rem;
    transition: color .4s, transform .65s cubic-bezier(.785,.135,.15,.86);
    display: flex;
}
.btn-border-ic-right .btn-border-ic:first-child {
    transform: translate(100%, -100%);
}
.svg {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
;
}
.btn-border-ic-left .btn-border-ic:last-child
 {
    transform: translate(-100%, 100%);
}
@media (hover: hover) {
    .btn:hover .btn-border-ic-left .btn-border-ic:last-child, .btn:hover .btn-border-ic-right .btn-border-ic:first-child {
        transform: translate(0%, 0%);
    }
       .btn:hover .btn-txt {
        transform: translateY(-100%);
    }
         .btn:hover .btn-border-ic-right .btn-border-ic:last-child {
        transform: translate(100%, 100%);
    }
        .btn:hover .btn-border-ic-left .btn-border-ic:first-child {
        transform: translate(-100%, -100%);
    }
}
.btn.contact-hero-form-submit {
  width: 100%;
  font-size: 1.6rem;
  color: white;
}
.contact-hero-form-submit-wrap {
    margin-top: 4rem;
    position: relative;
}
.contact_hero_form_select_inner {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    color: #969696;
     transition: color .4s ease;
     &.active {
      color: white;
     }
}
.contact_hero_form_select_title {
  font-size: 2.4rem;
}
.contact_hero_form_select_ic {
    opacity: .5;
    width: 2.4rem;
    transition: transform .4s, opacity .4s;
    display: flex;
}
.contact_hero_form_input.hidden {
  display: none;
}
@media only screen and (max-width: 991px) {
  html {
    --fs-global: 1.1990407674vw;
  }
  .grid {
    column-gap: 2.4rem;
  }
}

@media only screen and (max-width: 767px) {
  html {
    --fs-global: 2.6666666667vw;
  }
   .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
  }
  .container {
    padding-inline: 2rem;
  }
  .contact_hero_content {
      padding-top: 9.6rem;
  }
  .contact_hero_title{
            font-size: 4rem;
  }
  .contact_hero_content {
    grid-column: 1/-1;
  }
  .contact_hero_form_wrap{
    grid-column: 1/-1;
    grid-row: 2/3;
    margin-right: 0;
  }
    .contact_hero_form_inner {
      padding: 1.6rem;
  }
  .contact_hero_title_wrap {
    padding-bottom:3.2rem;
  }
  .contact_hero_form{
    max-width: 35rem;
  }
   .contact_hero_desc_wrap{
    padding-bottom: 0;
   }

       .contact_hero_form_bg_wrap {
        top: -3.5rem;
        bottom: -30.5rem;
        height: 105vh;
    }
        .contact_hero_form_bg {
        opacity: .6;
    }
    .halftone.contact_hero_form_bg_dot {
        mask-image: repeating-linear-gradient(90deg, transparent 0rem .15rem, black .15rem .6rem), repeating-linear-gradient(0deg, transparent -.3rem -0.15rem, black -0.15rem .45rem);
        mask-size: .6rem .6rem;
    }
}