.bg-gradient {
  background: linear-gradient(244.33deg, rgba(178, 110, 119, 0.24) 33.77%, rgba(178, 110, 119, 0) 85.27%);
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 0 100%, 0% 50%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
@media (min-width: 992px) {
  .bg-gradient {
    clip-path: polygon(0 0, 68% 0, 100% 75%, 100% 100%, 0 100%, 0% 50%);
  }
}

.bg-gradien__second {
  background: linear-gradient(244.33deg, rgba(178, 110, 119, 0.24) 33.77%, rgba(178, 110, 119, 0) 85.27%);
  clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%, 0% 50%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
@media (min-width: 992px) {
  .bg-gradien__second {
    clip-path: polygon(0 0, 50% 0, 100% 127%, 100% 100%, 0 100%, 0% 50%);
  }
}

.list-item {
  position: relative;
  padding-left: 56px;
  margin-right: 0px;
  margin-left: 0px;
  padding-right: 26px;
  line-height: 1.4;
}
@media (min-width: 992px) {
  .list-item {
    padding-left: 36px;
    padding-right: 0;
    margin-right: 0;
  }
}
@media (min-width: 1500px) {
  .list-item {
    padding-left: 50px;
  }
}
@media (min-width: 1700px) {
  .list-item {
    padding-left: 60px;
  }
}
.list-item::after {
  content: " ";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-55%);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iMjAiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8cGF0aCBkPSJNMjggMTRMMTcgMjVMMTIgMjAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
@media (min-width: 992px) {
  .list-item::after {
    left: 0px;
  }
}
@media (min-width: 1500px) {
  .list-item::after {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
  }
}

.hero-text {
  position: relative;
  white-space: nowrap;
}
.hero-text:after {
  content: " ";
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  bottom: -5px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCAxMDkgNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuMDAxMDMgMy45OTc1NkMxNC4zNjQ3IDQuMDA4MyA0My45MTg4IC0xLjE1ODYxIDEwNy40NjcgNC45NjA2NiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==");
  background-repeat: no-repeat;
}

.animation-image svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 5s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}