.contactPage {
  background: #181818;
}



.contactIntro {
  position: relative;
  height: 6.11rem;
  background: #181818 url('../images/contact-bg-design.jpg') center / cover no-repeat;
}

.contactIntroInner {
  position: relative;
  height: 100%;
  padding-top: 0.44rem;
}


.contactIntroHeading {
  width: 11.13rem;
  color: #fff;
  text-align: center;
  margin: 0.32rem auto 0;
}

.contactIntroHeading h1 {
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  line-height: .7rem;
  text-transform: uppercase;
}

.contactIntroHeading p {
  margin-top: .03rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.5;
  font-size: clamp(14px, .18rem, 18px);
}

.contactEmailCard {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 5.07rem;
  height: 1.95rem;
  color: #fff;
  margin: 0.8rem auto 0;
}

.contactEmailIcon {
  display: grid;
  width: .6rem;
  height: .6rem;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
}

.contactEmailIcon img {
  width: .3rem;
  height: .3rem;
}

.contactEmailLabel {
  margin-top: .15rem;
  color: var(--yellow);
  line-height: 1.5;
  font-size: clamp(14px, .2rem, 20px);
}

.contactEmailAddress {
  margin-top: .15rem;
  color: #cdcdcd;
  line-height: .3rem;
  font-size: clamp(14px, .24rem, 24px);
}

.contactFormSection {
  height: 8.18rem;
  background: #181818;
}

.contactFormInner {
  display: grid;
  grid-template-columns: 7.9rem 8.05rem;
  column-gap: 0;
  height: 100%;
}

.contactFormIntro {
  padding-top: 1.17rem;
  color: #fff;
}

.contactMessageIcon {
  display: block;
  width: .6rem;
  height: .6rem;
}

.contactFormIntro p:first-of-type {
  margin-top: .21rem;
  color: #fff;
  line-height: .29rem;
  font-size: clamp(14px, .24rem, 24px);
}

.contactFormIntro h2 {
  margin-top: .21rem;
  color: #fff;
  font-size: .5rem;
  font-weight: 700;
  line-height: .58rem;
}

.contactFormIntro p:last-of-type {
  width: 6rem;
  margin-top: .3rem;
  color: #fff;
  line-height: 1.5625;
  font-size: clamp(14px, .16rem, 16px);
}

.contactForm {
  display: grid;
  grid-template-columns: repeat(2, 3.944rem);
  column-gap: .166rem;
  align-content: start;
  padding-top: 1.17rem;
  row-gap: 0.32rem;
}

.contactField {
  min-width: 0;
  border-bottom: .01rem solid #a7a7a7;
}

.contactField label,
.contactFieldLabel {
  display: block;
  color: #fff;
  line-height: 1.333;
  font-size: clamp(14px, .18rem, 18px);
}

.contactField b {
  color: #f83606;
  font-weight: 400;
}

.contactField input,
.contactField textarea {
  display: block;
  width: 100%;
  height: .5rem;
  padding: .15rem 0 .08rem;
  color: #fff;
  line-height: 1.5;
  font-size: clamp(14px, .16rem, 16px);
}

.contactField input::placeholder,
.contactField textarea::placeholder {
  color: #7b7b7b;
  opacity: 1;
}

.contactFieldFull {
  grid-column: 1 / -1;
  width: 8.05rem;
}

.contactPositionInputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: .5rem;
}

.contactPositionInputs input {
  width: 100%;
}

.contactSubmit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .09rem;
  width: max-content;
  min-width: 1.8rem;
  height: .5rem;
  margin-top: .26rem;
  padding: 0 .27rem;
  border: .01rem solid var(--yellow);
  border-radius: .5rem;
  background: var(--yellow);
  color: #111;
  font-size: .18rem;
  font-weight: 500;
  white-space: nowrap;
}

.contactSubmit span {
  position: relative;
  width: .24rem;
  height: .24rem;
}

.contactSubmit span::before {
  position: absolute;
  top: .11rem;
  left: .05rem;
  width: .12rem;
  height: .02rem;
  background: #111;
  content: '';
}

.contactSubmit span::after {
  position: absolute;
  top: .07rem;
  right: .04rem;
  width: .08rem;
  height: .08rem;
  border-top: .02rem solid #111;
  border-right: .02rem solid #111;
  content: '';
  transform: rotate(45deg);
}

.contactSubmit:hover {
  background: #fff;
}

.contactFormStatus {
  display: none;
  grid-column: 1 / -1;
  margin-top: .14rem;
  color: var(--yellow);
  font-size: .14rem;
}

@media (max-width: 1200px) {
  .contactFormInner {
    width: 94%;
    grid-template-columns: 45% 55%;
  }

  .contactForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contactFieldFull {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .contactHero {
    height: 4.7rem;
  }

  .contactHeroArrow {
    width: .4rem;
    height: .4rem;
  }

  .contactHeroPrev {
    left: .16rem;
  }

  .contactHeroNext {
    right: .16rem;
  }

  .contactIntro {
    height: 7.2rem;
  }

  .contactBreadcrumb {
    left: 3%;
  }

  .contactIntroHeading {
    top: 1rem;
    width: 94%;
  }

  .contactIntroHeading h1 {
    font-size: .42rem;
    line-height: .52rem;
  }

  .contactIntroHeading p {
  }

  .contactEmailCard {
    top: 3.15rem;
  }

  .contactFormSection {
    height: auto;
    padding: .55rem 0 .7rem;
  }

  .contactFormInner {
    display: block;
    width: 94%;
    height: auto;
  }

  .contactFormIntro {
    padding-top: 0;
  }

  .contactFormIntro h2 {
    font-size: .4rem;
    line-height: .5rem;
  }

  .contactFormIntro p:last-of-type {
    width: 100%;
    margin-bottom: .45rem;
  }

  .contactForm {
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .contactField,
  .contactFieldFull {
    grid-column: 1;
    width: 100%;
  }

  .contactSubmit {
    margin-top: .25rem;
  }
}

@media (max-width: 480px) {
  .contactIntroHeading h1 {
    font-size: .36rem;
  }

  .contactPositionInputs {
    grid-template-columns: 1fr 1fr;
  }
}