.pay {
  border-radius: 40px;
  background: #151617;
  padding: 60px;
}

.payTitle {
  margin-top: 5px;
  color: #fff;

  font-family: Manrope;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.paySubtitle {
  margin-top: 15px;
  color: #fff;

  font-family: Manrope;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  max-width: 743px;
}

.payContainer {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.payChoose {
  display: flex;
  flex-direction: column;
}

.payOr {
  display: flex;
  gap: 20px;
  align-items: center;
}

.payOrText {
  color: #fff;

  font-family: Manrope;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.paySum {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.paySumText {
  color: #fff;

  font-family: Manrope;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.paySumCount {
  color: #fff;

  font-family: Manrope;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  /* 20px */
  letter-spacing: 0.6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ff4085;
}

.paySubText {
  margin-top: 8px;
  color: #fff;

  font-family: Manrope;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.payDolyami {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.payDolyamiText {
  margin-top: 15px;
  color: #fff;
  font-family: Manrope;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.payDolyamiText span {
  font-weight: 700;
}

.payContainerInnerBlock {
  width: 592px;
}

.payOrYandex {
  max-width: 250px;
}

.payOrBank {
  max-width: 117px;
}

.payDolyamiImg {
  max-width: 252px;
}

.payTarifs {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}

.payTarif {
  padding: 16px;
  border-radius: 13.158px;
  background: #fff;
  max-width: 600px;
}

.payTarifTitle {
  border-radius: 10px;
  background: #ff4085;
  padding: 8px 10px;
  color: #fff;

  font-family: Manrope;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  /* 20px */
  letter-spacing: 0.6px;
  width: fit-content;
}

.payTarifTitle.black {
  background: #151617;
}

.payment {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}

.paymentPoint {
  color: rgba(0, 0, 0, 0.4);
  font-family: Manrope;
  font-size: 18.421px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.paymentText {
  color: rgba(0, 0, 0, 0.12);
  font-size: 18.421px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.paymentSum {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.12);
  font-family: Manrope;
  font-size: 26.316px;
  font-style: normal;
  font-weight: 600;
  line-height: 45.394px;
}

.paymentSvg {
  margin-top: 26px;
}

.tarifSbor {
  margin-top: 25px;
  color: #000;

  font-size: 18.421px;
  font-style: normal;
  font-weight: 500;
  line-height: 34.284px;
}

.payTitle2 {
  margin-top: 64px;
}

.paymentSumActive,
.paymentTextActive {
  color: #000;
}

@media (max-width: 1244px) {
  .payTarifs {
    flex-direction: column;
  }
}

@media (max-width: 960px) {
  .payContainer {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .pay {
    padding: 20px 0px;
  }
  .payTitle {
    margin-top: 25px;
    color: #fff;

    font-family: Manrope;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
  }

  .paySubtitle {
    margin-top: 8px;
    color: #fff;

    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .payContainerInnerBlock {
    width: unset;
  }

  .payOrYandex {
    max-width: 193px;
  }

  .payOrBank {
    max-width: 91px;
  }

  .payDolyamiImg {
    max-width: 252px;
  }

  .payContainer {
    margin-top: 16px;
  }

  .paySumText {
    font-size: 16px;
  }

  .paySumCount {
    padding: 8px 6px;
    font-size: 16px;
  }

  .paySubText {
    font-size: 16px;
  }

  .payOr {
    gap: 10px;
    flex-wrap: wrap;
  }

  .payOrText {
    font-size: 15.421px;
  }

  .payDolyamiText {
    font-size: 16px;
  }

  .payTitle2 {
    margin-top: 40px;
  }

  .payTarifs {
    margin-top: 16px;
  }

  .payTarif {
    padding: 15px 12px;
  }

  .payTarifTitle {
    padding: 8px 6px;
    font-size: 16px;
  }

  .payment {
    gap: 5px;
    margin-top: 10px;
    justify-content: space-between;
  }

  .paymentText {
    font-size: 12px;
  }

  .paymentSum {
    margin-top: 5px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 25.95px;
  }

  .paymentSvg {
    margin-top: 10px;
  }

  .paymentSvg svg {
    max-width: 74px;
  }

  .tarifSbor {
    margin-top: 10px;
    font-size: 12px;
    line-height: 19.599px;
  }
}