.tariff-table {
  max-width: 1784px;
  margin: 0 auto;
  padding: 0 32px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tariff-headers {
  position: sticky;
  top: 12px;
  z-index: 111;
  display: flex;
  justify-content: center;
  border: 1px solid rgba(75, 64, 246, 0.6);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(75, 64, 246, 0.1) 0%, rgba(75, 64, 246, 0.2) 47.5%, rgba(75, 64, 246, 0.1) 100%);
  background-color: #151620;
}

.tariff-header {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 24px;
  border-right: 1px solid rgba(75, 64, 246, 0.6);
}
.tariff-header:last-child {
  border-right: unset;
}

.tariff-name {
  line-height: 1;
  text-transform: uppercase;
}

.tariff-desc {
  color: #8B8A8F;
}

.tariff h3 {
  margin: 56px auto 24px;
  text-align: center;
  font-size: 30px;
  font-family: Bold;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.tariff .table {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.tariff .table::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  padding: 1.5px;
  background: linear-gradient(-66deg, rgba(75, 64, 246, 0.3), rgba(75, 64, 246, 0.6), rgba(75, 64, 246, 0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.tariff .table table {
  width: 100%;
}
.tariff thead {
  background: linear-gradient(90deg, rgba(75, 64, 246, 0.1) 0%, rgba(75, 64, 246, 0.2) 47.5%, rgba(75, 64, 246, 0.1) 100%);
  color: #8B8A8F;
}
.tariff thead tr th {
  padding: 18px;
}
.tariff tbody {
  color: #EDE9EB;
}
.tariff tbody tr {
  display: flex;
}
.tariff tbody tr td {
  border: 1px solid rgba(75, 64, 246, 0.1);
  padding: 24px 16px 24px 42px;
  width: 100%;
}
.tariff tbody tr td.table-header {
  background: linear-gradient(90deg, rgba(75, 64, 246, 0.1) 0%, rgba(75, 64, 246, 0.2) 47.5%, rgba(75, 64, 246, 0.1) 100%);
  color: #8B8A8F;
  padding: 18px;
  text-align: center;
}
.tariff tbody tr td p {
  margin-bottom: 6px;
}
.tariff tbody tr td p:last-child {
  margin: 0;
}
.tariff .image {
  margin: 0 auto;
  width: fit-content;
}
.tariff .grey-text {
  color: #8B8A8F;
  font-family: Light;
  font-size: 16px;
  letter-spacing: 0.05em;
}
.tariff .blue-yes {
  position: relative;
}
.tariff .blue-yes::before {
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path fill='%234b40f6' d='M13.795.2a.714.714 0 0 0-.99 0L4.419 8.355 1.195 5.221a.714.714 0 0 0-.99 0 .67.67 0 0 0 0 .963L3.924 9.8a.714.714 0 0 0 .99 0l8.881-8.639a.67.67 0 0 0 0-.963'/></svg>");
  display: inline-block;
  width: 14px;
  height: 10px;
  position: absolute;
  left: -22px;
  top: -1px;
}
.tariff .red-no {
  position: relative;
}
.tariff .red-no::before {
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='%23f64d41' d='M5.916 5 9.81 1.106A.647.647 0 1 0 8.894.19L5 4.084 1.106.19a.647.647 0 1 0-.916.916L4.084 5 .19 8.894a.647.647 0 1 0 .916.916L5 5.916 8.894 9.81a.646.646 0 0 0 .916 0 .647.647 0 0 0 0-.916z'/></svg>");
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  left: -18px;
  top: -1px;
}

@media (max-width: 768px) {
  .tariff-table {
    padding: 0 0 56px;
    overflow-y: scroll;
    scrollbar-width: none;
    ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .tariff-table::-webkit-scrollbar {
    display: none;
  }
  .tariff-headers {
    width: fit-content;
    margin: 0 auto;
    border-radius: 0;
    border: unset;
  }
  .tariff-header {
    padding: 16px 14px;
    border-right: 3px solid rgba(75, 64, 246, 0.1);
    gap: 12px;
  }
  .tariff-header, .tariff tbody tr td {
    min-width: 200px;
  }
  .tariff h3 {
    margin: 40px auto 22px;
    font-size: 22px;
  }
  .tariff .table {
    border-radius: 0;
    overflow: unset;
    font-size: 16px;
  }
  .tariff .table::before {
    border-radius: 0;
    background: unset;
  }
  .tariff .grey-text {
    font-size: 14px;
  }
  .tariff tbody tr td {
    padding: 12px;
  }
  .tariff tbody tr td.table-header {
    padding: 12px;
  }
  .tariff .blue-yes::before {
    position: unset;
    margin-right: 6px;
  }
  .tariff .red-no::before {
    position: unset;
    margin-right: 6px;
  }
}