.hero-funnel {
  .funnel-title {
    background-color: var(--color-red);
    color: var(--color-white);
    padding: 160px 0 64px;
    position: relative;
    margin: 0rem;

    &::before {
      background-repeat: no-repeat;
      background-size: cover;
      content: "";
      display: block;
      height: 70%;
      left: 0px;
      position: absolute;
      top: 0px;
      transform: rotate(180deg);
      width: 100%;
      background-image: url(../../images/hero-funnel/before-funnel.svg);
    }

    .container__general {

      .alert-heading {
        color: var(--color-white);
        font-size: 3.5rem;
        font-weight: 300;
        letter-spacing: 0px;
        line-height: 64px;
        max-width: 640px;
        position: relative;
        margin: 0px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .hero-funnel {
    .funnel-title {
      &::after {
        background-repeat: no-repeat;
        background-size: cover;
        bottom: 0px;
        content: "";
        display: block;
        height: 45%;
        position: absolute;
        right: 0px;
        width: 65%;
        background-image: url(../../images/hero-funnel/before-funnel.svg);
      }
    }
  }
}


@media (max-width: 768px) {
  .hero-funnel {
    .funnel-title {
      padding: 74px 0px 24px !important;

      &::after {
        display: none;
      }

      .container__general {
        .alert-heading {
          text-align: center;
          max-width: 640px;
          font-size: 1.75rem;
          line-height: 40px;
        }
      }
    }
  }
}