.contact__inner {
  display: flex;
  gap: 20px;
  box-shadow: var(--primary-shadow);
  padding: 30px;
  border-radius: var(--secondary-borderradius);
}

.contact__heading-wrap {
  margin-bottom: 40px;
}
.contact__info-wrap {
  width: 40%;
  font-family: var(--primary-fontfamily);
  background: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 6px;
  padding: 40px;
  display: grid;
  gap: 10px;
}
.contact__form-wrap {
  width: 60%;
  font-family: var(--primary-fontfamily);
  display: grid;
  gap: 14px;
}

.contact__info {
  color: var(--secondary-color);
  font-size: 18px;
  font-weight: var(--medium-fontweight);
  padding: 10px 0;
  margin: 10px 0;
  gap: 10px;
}

.contact__info-icon {
  display: block;
  max-width: 30px;
  height: 30px;
  object-fit: contain;
}

.contact__info {
  color: var(--secondary-color);
}
.contact__form {
  font-family: var(--primary-fontfamily);
  display: grid;
  gap: 14px;
}
.contact__form-label {
  display: block;
  color: var(--primary-text-color);
  margin-bottom: 6px;
}
.contact__form-input {
  font-family: var(--primary-fontfamily);
  height: 50px;
  background: transparent;
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: var(--secondary-borderradius);
  border: 1px solid #00000030;
  outline: none;
}
.contact__form-input:focus {
  border: 1px solid var(--primary-color);
}

@media (max-width: 1100px) {
  .contact__inner {
    flex-direction: column-reverse;
  }
  .contact__info-wrap,
  .contact__form-wrap {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .contact__inner {
    padding: 16px;
  }
  .contact__info-wrap {
    padding: 20px;
  }
}