@font-face {
  font-family: "MR";
  src: url("../assets/fonts/Mulish-Regular.eot");
  src: url("../assets/fonts/Mulish-Regular.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/Mulish-Regular.woff2") format("woff2"), url("../assets/fonts/Mulish-Regular.woff") format("woff"), url("../assets/fonts/Mulish-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MBL";
  src: url("../assets/fonts/Mulish-Black.eot");
  src: url("../assets/fonts/Mulish-Black.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/Mulish-Black.woff2") format("woff2"), url("../assets/fonts/Mulish-Black.woff") format("woff"), url("../assets/fonts/Mulish-Black.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MB";
  src: url("../assets/fonts/Mulish-Bold.eot");
  src: url("../assets/fonts/Mulish-Bold.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/Mulish-Bold.woff2") format("woff2"), url("../assets/fonts/Mulish-Bold.woff") format("woff"), url("../assets/fonts/Mulish-Bold.ttf") format("truetype");
  font-display: swap;
}
button {
  cursor: pointer;
}

a,
a:hover {
  color: #192040;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #192040;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

p {
  margin: 0;
}

body {
  font-family: "MR", sans-serif;
  font-size: 16px;
  min-width: 320px;
  background-color: #2a52be;
  color: #384464;
  padding: 0;
  margin: 0;
}

.img__fluid {
  max-width: 100%;
  height: auto;
}

.main {
  padding: 3.125rem 2.8125rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.site__mark {
  display: inline-block;
  padding: 0.625rem 1.875rem;
  background-color: #ffffff;
  font-size: 1.25rem;
  font-family: "MB", sans-serif;
  color: #2a52be;
  border-radius: 50px;
}
.site__title {
  font-family: "MBL", sans-serif;
  font-weight: 1000;
  font-size: 3rem;
  max-width: 677px;
  margin: 3.125rem 0 1.25rem;
  color: #ffffff;
  line-height: 1;
}
.site__text {
  max-width: 802px;
  font-size: 1.5rem;
  color: #ffffff;
  line-height: 1.3;
}

.wrapper {
  max-width: 477px;
}
.wrapper__img {
  max-height: 477px;
}
.wrapper__img img {
  border-radius: 20px;
}
.wrapper__link {
  padding: 1.25rem 0 1.5rem;
  text-align: center;
}
.wrapper__link a {
  font-family: "MB", sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  transition: 0.3s ease-in-out;
}
.wrapper__link a:hover {
  color: #ededed;
}
.wrapper__form {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 1.875rem;
}
.wrapper__title {
  font-family: "MB", sans-serif;
  font-size: 1.25rem;
  color: #2a52be;
  margin-bottom: 1.25rem;
}
.wrapper .form {
  display: flex;
  flex-direction: column;
}
.wrapper .form__label {
  font-size: 1.125rem;
  margin-bottom: 0.625rem;
}
.wrapper .form__input {
  border: 1px solid #ededed;
  border-radius: 5px;
  padding: 0.9375rem;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}
.wrapper .form__submit {
  font-size: 1rem;
  font-family: "MB", sans-serif;
  color: #ffffff;
  background-color: #2a52be;
  width: 100%;
  padding: 1.25rem;
  border: 1px solid #2a52be;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.wrapper .form__submit:hover {
  background-color: transparent;
  color: #2a52be;
}
.wrapper .form__policy {
  margin-top: 0.85rem;
}

@media (max-width: 1000px) {
  .main {
    flex-direction: column;
  }
  .wrapper {
    margin-top: 3.125rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    -moz-column-gap: 3.125rem;
         column-gap: 3.125rem;
    max-width: 100%;
  }
  .wrapper__img {
    max-width: 217px;
  }
  .wrapper__link {
    padding: 0.625rem 0 0;
    text-align: left;
  }
  .wrapper__link a {
    font-size: 1.125rem;
  }
  .wrapper__form {
    padding: 1.25rem;
  }
  .wrapper .form__input {
    font-size: 0.875rem;
    padding-bottom: 0.625rem;
  }
  .wrapper .form__submit {
    padding: 0.8125rem;
  }
}
@media (max-width: 570px) {
  .main {
    padding: 3.125rem 1.25rem;
  }
  .site__mark {
    font-size: 1.125rem;
    padding: 0.625rem 1.5625rem;
  }
  .site__title {
    font-family: "MB", sans-serif;
    font-size: 1.25rem;
    max-width: 320px;
    line-height: 1.3;
  }
  .site__text {
    font-size: 1.125rem;
  }
  .wrapper {
    flex-direction: column;
  }
  .wrapper__img {
    max-width: 100%;
  }
  .wrapper__link {
    text-align: center;
    padding: 1.25rem 0 2.75rem;
  }
}