.features {
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 20px;
}

.container {
  width: 100%;
  height: 100%;
  background-color: var(--ifm-color-primary);
  mix-blend-mode: normal;
  /* clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
   clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%); */
  /* clip-path: polygon(100% 82%, 100% 82%, 92% 84%, 83% 87%, 73% 92%, 64% 93%, 56% 92%, 47% 88%, 39% 86%, 31% 84%, 23% 82%, 16% 82%, 10% 83%, 4% 85%, 1% 86%, 0% 1%, 99% 1%, 100% 0%); */
  background: url('../../../static/img/bg.png') no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding-bottom: 120px;
}

.waysContainer {
  /* background: rgb(51, 51, 51, 0.8); */
  padding-top: 185px;
  padding-bottom: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  @media (max-width: 1440px) {
    padding-bottom: 200px;
  }
  @media (max-width: 1800px) {
    padding-bottom: 300px;
  }
  @media (max-width: 2000px) {
    padding-bottom: 400px;
  }
}

.waysTitle {
  text-transform: capitalize;
  color: var(--white);
  max-width: 624px;
  padding: 0px 30px;
  @media (max-width: 380px) {
    padding: 0px 10px;
    font-size: 30px;
    line-height: 48px;
  }
}
.waysGroup {
  padding: 75px 10px;
  display: flex;
  flex-direction: row;
  width: 90%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 950px;
}
.wayCard {
  width: 45%;
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  min-height: 90px;

  @media (max-width: 640px) {
    width: 100%;
    min-height: 80px;
  }
  .wayText {
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0.3px;
    color: var(--white);
    position: relative;
    padding-left: 60px;
  }
  .wayText:before {
    content: ' ';
    width: 35px;
    height: 35px;
    background: var(--yellow-second);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.simpleWaySvg {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  z-index: 2;
  width: 254px;
  height: 254px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--brown);
  border-radius: 50%;
}
