/* Main page and boxes styles */
.contact-form-page {
  padding: 2rem 8.75rem;
  display: flex;
  background-image: url(./../assets/Images/Contact-Us/bigback.webp);
}
.contact-form-content-box {
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  align-items: flex-start;
  flex: 1;
  background-color: #f7f7f766;
}
.contact-form-form-box {
  flex: 2.5;
  background-color: #f7f7f7bd;
  padding: 2.5rem 2rem;
  background-image: url(./../assets/Images/Contact-Us/formback.webp);
}
/* Content box style */
.contact-form-content-box .form-header-p {
  font-size: 1.25rem;
  font-weight: 600;
  color: #4e4e50;
}
.contact-form-content-box h1 {
  font-size: 6rem;
  font-weight: 700;
  background: -webkit-linear-gradient(#ff2566, #a75098);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1rem 0;
}
.contact-form-content-box .form-footer-p {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0.25rem; /**/
  color: #4d4c4c;
}
.contact-form-content-box label {
  color: #606060;
  font-weight: 500;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.contact-form-content-box .form-social-media i {
  color: #606060;
  font-size: 1.5rem;
}

/* Form itself and fields styles */
.iti__selected-dial-code {
  font-size: 0.875rem;
  font-weight: 400;
}
.contact-form-form-box h2 {
  background: -webkit-linear-gradient(#ff2566, #a75098);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.contact-form-form-box div.wpcf7 {
  height: 100%;
  width: 100%;
}
.contact-form-form-box form {
  display: flex;
  flex-direction: column;
  height: 90%;
  justify-content: space-between;
}
.contact-form-form-box .contact-form-arabic {
  direction: rtl;
}

.contact-form-form-box form p {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
  height: 100%;
}

.contact-form-form-box form p span:has(> input, > textarea, > select) {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 60%;
  flex: 1;
  width: 100%;
}
.contact-form-form-box form p:nth-of-type(2) span:nth-of-type(2) {
  max-width: 48%;
}
.wpcf7-form-control-wrap:before {
  content: attr(data-label) "";
  position: absolute;
  background-color: #f7f7f7;
  z-index: 2;
  inset: -0.375rem auto auto 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #606060;
  height: 1rem;
}
.contact-form-arabic .wpcf7-form-control-wrap:before {
  inset: -0.375rem 1.5rem auto auto;
}
.contact-form-form-box form input:not([type="submit"]),
.contact-form-form-box form select {
  all: initial;
  position: absolute;
  border: solid 1px #b4b4b4;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-style: normal;
  background-color: #f7f7f7;
  box-sizing: border-box;
  min-height: 3.75rem;
  width: 100%;
  font-size: 14px;
}

.contact-form-form-box form textarea {
  all: initial;
  height: 100%;
  position: absolute;
  border: solid 1px #b4b4b4;
  border-radius: 5px;
  padding: 0.75rem 0.5rem;
  background-color: #f7f7f7;
  box-sizing: border-box;
  width: 100%;
}

.contact-form-form-box form input[type="submit"] {
  width: 25%;
  height: 2.75rem;
  margin-top: 2rem;
  border-radius: 4px;
  border: 0;
  background: var(
    --menu-cta-default,
    linear-gradient(46deg, #ff2566 0%, #a75098 100%)
  );
  box-shadow: 4px -4px 4px 0px rgba(0, 0, 0, 0.1) inset;
  align-self: flex-end;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  position: absolute;
  inset: auto 0 auto auto;
}
.contact-form-form-box .contact-form-arabic input[type="submit"] {
  inset: auto auto auto 0;
}
/* Response from WPCF7 */
.wpcf7 form .wpcf7-response-output {
  margin: 1rem;
}
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: #ff2566;
}