.contact-component {
  background-color: var(--top-heading-text-color);
  margin-top: -158px;
  position: relative;
  padding-top: 114px;
}

.contact-wrapper {
  align-items: flex-end;
  gap: 80px;
}

.contact-form-wrapper {
  flex: 1;
  padding-top: 114px;
}

.contact-image-wrapper {
  flex: 1;
  align-items: flex-end;
  display: flex;
  margin-right: -100px;
}

.contact-title-wrapper {
  padding-bottom: 30px;
}

.contact-title-wrapper h2 {
  color: #fff;
}

.wpcf7-form .form-row {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.wpcf7-form .form-group {
  flex: 1;
  min-width: 150px;
}


.wpcf7-form input,
.wpcf7-form textarea {
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(253, 253, 253, 0.3);
  color: #c1c1c1;
  font-size: 16px;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-bottom-color: rgba(253, 253, 253, 0.3);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: white;
  transition: opacity 0.2s;
}

.wpcf7-form input:focus::placeholder,
.wpcf7-form textarea:focus::placeholder {
  opacity: 0;
}

.wpcf7-form textarea {
  resize: vertical;
  min-height: 100px;
}

.wpcf7-form input.wpcf7-submit {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 35px;
    background-color: #c2b697;
    text-transform: uppercase;
    border: 1px solid #c2b697;
    color: #2a2e31;
    cursor: pointer;
    font-size: 15px;
    transition: all .5s;
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 2.4px;
  }
  
  .wpcf7-form input.wpcf7-submit:hover {
    background-color: transparent;
    color: #c2b697;
    border-color: #c2b697;
  }

.wpcf7-form .full-width {
  flex: 1 1 100%;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
	color: #fff;
}


@media (max-width: 991px) {
  .contact-wrapper{
    flex-direction: column;
    gap: 50px;
  }

  .contact-form-wrapper{
    width: 100% !important;
  }

  .contact-image-wrapper{
    width: 100% !important;
    margin: -12px;
  }

  .contact-form-wrapper{
    padding-top: 90px;
    padding-bottom: 0;
  }
}

@media (min-width: 992px) and (max-width: 1200px){
	.contact-image-wrapper{
		margin: -12px;
	}
}