.center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

section.contact-us {
  --pdd: 50px;
}

.user-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.user-block .avatars {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 30px 60px;
}
.user-block > .group {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  width: 100%;
}
.user-block > .group > .group:first-of-type {
  margin-bottom: 20px;
}
.group-block {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
}
.group-block .group {
  margin-bottom: 20px;
}

.border-hr {
  border-top: 1px solid rgb(70, 64, 116);
}

input, textarea {
  display: block;
}

textarea {
  height: 10em;
  resize: vertical;
}

.mails .h3 {
  color: rgb(205, 235, 242);
  margin-top: 30px;
}
.mails lable {
  color: rgb(70, 64, 116);
}

.mails {
  max-width: 900px;
  margin-bottom: 80px;
  margin-left: auto;
  margin-right: auto;
}

.mailbody {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 20px;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  background-color: rgb(122, 203, 221);
}

.logo-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding: 40px var(--pdd) 40px 40px;
  margin-left: auto;
  width: 100%;
  gap: 20px;
  background-color: rgb(205, 235, 242);
  border-radius: 0px 0px 20px 20px;
}
.logo-block .group {
  padding: 0 0 20px 0;
}
.logo-block .group p {
  text-align: center;
}

section.contact-us .form-submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 20px;
  padding: 0 20px;
}
section.contact-us .form-submit .turn-next-btn {
  padding: 10px 40px;
}
section.contact-us input, section.contact-us textarea {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: border-color 0.5s ease;
  transition: border-color 0.5s ease;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0.3em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5em 1em;
  line-height: 20px;
  margin: 10px 0;
  outline: 3px solid transparent;
  font-size: 18px;
  -webkit-transition: color 0.3s, background-color 0.3s;
  transition: color 0.3s, background-color 0.3s;
}
section.contact-us input::-webkit-input-placeholder, section.contact-us textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
section.contact-us input::-moz-placeholder, section.contact-us textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
section.contact-us input:-ms-input-placeholder, section.contact-us textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
section.contact-us input::-ms-input-placeholder, section.contact-us textarea::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
section.contact-us input::placeholder, section.contact-us textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
section.contact-us input:focus, section.contact-us textarea:focus {
  outline: 3px solid #fcc661;
  background-color: rgba(255, 255, 255, 0.8);
}
section.contact-us input:focus::-webkit-input-placeholder, section.contact-us textarea:focus::-webkit-input-placeholder {
  color: transparent;
}
section.contact-us input:focus::-moz-placeholder, section.contact-us textarea:focus::-moz-placeholder {
  color: transparent;
}
section.contact-us input:focus:-ms-input-placeholder, section.contact-us textarea:focus:-ms-input-placeholder {
  color: transparent;
}
section.contact-us input:focus::-ms-input-placeholder, section.contact-us textarea:focus::-ms-input-placeholder {
  color: transparent;
}
section.contact-us input:focus::placeholder, section.contact-us textarea:focus::placeholder {
  color: transparent;
}
section.contact-us input:focus i, section.contact-us textarea:focus i {
  color: #fcc661;
}

@media screen and (min-width: 768px) {
  .mailbody {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .user-block {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .logo-block {
    width: 25%;
    border-radius: 0px 20px 0px 50px;
  }
  .logo-block p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}