.hero {
  text-align: center;
  max-width: 1600px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(
      rgba(47, 48, 58, 0.8),
      rgba(47, 48, 58, 0.8)
    ),
    url('../images/hero-img.jpg');

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero h1 {
  width: 646px;
  margin-top: 0px;
  margin-bottom: 38px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 200px;

  color: var(--primary-background-color);
  font-weight: 900;
  font-size: 44px;
  line-height: 1.36;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.benefits-list {
  display: flex;
}
.benefits-list .item + .item {
  margin-left: 30px;
}
.benefits-list .item {
  min-width: 270px;
}
.benefit-icon {
  display: block;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-bottom: 30px;
  min-width: 270px;
  height: 120px;

  background-color: #f5f4fa;
  border-radius: 4px;
}
.benefits > .container {
  border-bottom: 1px solid #ececec;
}
.benefits h3 {
  margin: 0 0 10px 0;

  color: var(--secondary-text-color);
}

.benefits p {
  margin: 0px;
  color: var(--primary-text-color);
  line-height: 1.71;
}

.services-list {
  display: flex;
}
.services-list .item {
  position: relative;
  width: 370px;
}
.services-list .item + .item {
  margin-left: 30px;
}

.services-list h3 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: rgba(47, 48, 58, 0.8);

  padding-top: 27px;
  padding-bottom: 27px;

  text-align: center;
}

.team {
  background: var(--secondary-background-color);
}
.team-list {
  display: flex;
}
.team-list .member + .member {
  margin-left: 30px;
}

.member {
  width: 270px;
  background: #ffffff;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 1px 3px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.member h3 {
  margin-bottom: 10px;

  color: var(--secondary-text-color);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.18;
  text-transform: none;
  text-align: center;
}
.member p {
  margin: 0;
  margin-bottom: 16px;

  color: var(--primary-text-color);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.18;
  text-align: center;
}
.team-photo {
  display: block;
  margin-bottom: 30px;

  border-radius: 4px 4px 0px 0px;
}
.member > .socials-list {
  margin-bottom: 24px;
  min-width: 270px;
  justify-content: center;
}
.member .socials-link {
  display: block;
  color: #afb1b8;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.member .socials-icon {
  fill: currentColor;
}
.member .socials-link:hover,
.member .socials-link:focus {
  color: var(--primary-background-color);
}

.customers-list {
  display: flex;
  justify-content: space-between;
}
.customers-list .client-tittle {
  margin-left: 30px;
}
.client-link {
  display: flex;
  justify-content: center;

  color: #afb1b8;
  border: 1px solid #afb1b8;
  box-sizing: border-box;
  border-radius: 4px;

  min-width: 170px;
  height: 90px;

  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.client-icon {
  margin: auto;
  fill: currentColor;
}
.client-link:hover,
.client-link:focus {
  border-color: var(--primary-hover-color);
  color: var(--primary-hover-color);
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  z-index: 1;
  background: rgba(0, 0, 0, 0.2);

  visibility: visible;
  opacity: 1;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.backdrop.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.backdrop.is-hidden .modal {
  transform: translate(-50%, -50%) scale(0.8) rotateY(45deg) rotateX(90deg)
    rotateZ(180deg);
}
.backdrop.is-hidden .modal .icon-md-close {
  transform: scale(1);
}

.modal-title {
  display: block;
  margin-bottom: 30px;

  font-size: 20px;
  line-height: 1.15;
  text-align: center;

  color: var(--secondary-text-color);
}
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 528px;
  max-width: 100%;

  max-height: 100%;

  padding: 40px;

  background: var(--primary-background-color);
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 1px 3px rgba(0, 0, 0, 0.12);
  border-radius: 4px;

  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-list-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  margin-bottom: 20px;
}
.modal-list-form .modal-field-item:not(:last-child) {
  margin-bottom: 28px;
}

.modal-field-item {
  position: relative;
}

.form-label {
  position: absolute;
  display: block;
  top: 12px;
  left: 42px;

  letter-spacing: 0.01em;
  color: var(--primary-text-color);

  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.textfield {
  padding: 12px 18px 12px 42px;
  width: 448px;
  height: 40px;

  border: 1px solid rgba(33, 33, 33, 0.2);
  border-radius: 4px;
  outline: none;

  letter-spacing: 0.01em;
  color: var(--primary-text-color);
}

.comment-field {
  position: relative;
}
.comment-label {
  position: absolute;
  top: 12px;
  left: 16px;

  letter-spacing: 0.01em;
  color: var(--primary-text-color);

  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.comment {
  padding: 12px 16px;
  width: 448px;
  height: 120px;
  resize: none;

  border: 1px solid rgba(33, 33, 33, 0.2);
  border-radius: 4px;
  outline: none;

  letter-spacing: 0.01em;
  color: var(--primary-text-color);

  transform: scale(1);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.comment:focus + .comment-label,
.comment:not(:placeholder-shown) + .comment-label {
  transform: translate(-8px, -30px) scale(0.86);
  color: var(--primary-hover-color);
  /* font-size: 12px;
  line-height: 1.17; */
}

.textfield:focus + .form-label,
.textfield:not(:placeholder-shown) + .form-label {
  transform: translate(-26px, -30px) scale(0.86);

  color: var(--primary-hover-color);
  /* font-size: 12px;
  line-height: 1.17; */
}
.textfield:focus,
.comment:focus {
  border: 1px solid var(--primary-hover-color);
  outline: none;
}

.form-icon {
  display: block;
  position: absolute;
  top: 11px;
  left: 16px;
  fill: var(--secondary-text-color);
}

.textfield:focus ~ .form-icon,
.textfield:not(:placeholder-shown) ~ .form-icon,
.comment:focus ~ .form-icon,
.comment:not(:placeholder-shown) ~ .form-icon {
  fill: var(--primary-hover-color);
}

.modal-consent {
  display: flex;
  align-items: center;
  max-width: 425px;

  margin-bottom: 30px;
  margin-right: auto;
  margin-left: auto;

  line-height: 1.71;

  color: var(--primary-text-color);
}

.modal-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.checkbox-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;

  border: 2px solid;
  border-color: var(--secondary-text-color);
  border-radius: 4px;
  cursor: pointer;

  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-checkbox:checked + .checkbox-icon {
  border-color: transparent;
  background-color: var(--primary-hover-color);
  background-image: url(../images/check-icon.svg);
  background-size: contain;
  background-origin: border-box;
}

.modal-link-consent {
  color: var(--primary-hover-color);
  text-decoration: underline;
}

.modal-close {
  position: absolute;

  top: -9px;
  right: -9px;
  width: 30px;
  height: 30px;

  cursor: pointer;

  color: #000000;
  background-color: var(--primary-background-color);

  border-radius: 50%;
  border: none;
  outline: none;

  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 1px 3px rgba(0, 0, 0, 0.12);
  transform: scale(1);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-md-close {
  display: block;
  fill: currentColor;
  margin: auto;
}


.modal-close:hover .icon-md-close,
.modal-close:focus .icon-md-close,
.modal-close:hover,
.modal-close:focus {
  transform: scale(1.3);
  background-color: var(--primary-hover-color);
  color: var(--secondary-background-color);
}
.modal-close:hover,
.modal-close:focus,
.modal-close:active {
  border: 0.5px groove var(--secondary-background-color);
}