@import url('_global.css');

.contact {
  padding: 30px 0;
  background-color: #1f3c88;
}

.contact__inner {
  display: flex;
  align-items: flex-start;
}

.contact__info,
.contact__form {
  flex: 0 1 50%;
}

.contact__info {
  padding-right: 20px;
}

.contact__info h2 {
  font-family: 'Gilroy-Bold';
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 30px;
  color: #fff;
}

.contact__info p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 15px;
}

.contact__form {
  background-color: #fff;
  padding: 20px;
}

.contact__form-title {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
  color: #1f3c88;
}

.contact__form-input-line {
  display: flex;
  column-gap: 20px;
  margin-bottom: 20px;
}

.contact__form input,
.contact__form textarea {
  display: block;
  font-size: 18px;
  padding: 10px 20px;
  font-family: 'Gilroy-Regular';
  border: 1px solid #1f3c88;
  border-radius: 5px;
  outline: none;
}

.contact__form-name,
.contact__form-phone {
  flex: 0 1 calc(50% - 10px);
}

.contact__form-email,
.contact__form-message {
  width: 100%;
  margin-bottom: 20px;
}

.contact__form textarea {
  height: 200px;
}

.contact__form button {
  background-color: #1f3c88;
  padding: 10px 30px;
  border-radius: 10px;
  font-size: 18px;
  font-family: 'Gilroy-Semibold';
  border: none;
  color: #fff;
  cursor: pointer;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}

.contact__map-inner {
  height: 546px;
}

@media (max-width: 1024px) {
  .contact__inner {
    display: block;
  }

  .contact__info {
    margin-bottom: 20px
  }
}

@media (max-width: 576px) {
  .contact__form-input-line {
    display: block;
  }

  .contact__form-name,
  .contact__form-phone {
    width: 100%;
    margin-bottom: 20px;
  }
}