/* section heading css for frontend and editor */
.sp-section-heading-wrapper {
  .sp-section-heading-container {
    display: block;

    &.section-heading-fifteen,
    &.section-heading-nine,
    &.section-heading-eight,
    &.section-heading-twentyOne {
      overflow: hidden;
    }
    .section-heading-tag h2,
    .section-heading-tag h3,
    .section-heading-tag h4,
    .section-heading-tag h5,
    .sp-heading-text {
      margin: 0;
      padding: 0;
    }

    &.section-heading-two .section-heading-tag {
      display: inline-block;
      // .sp-heading-text {
      //   padding: 8px;
      // }
    }

    &.section-heading-four .section-heading-tag .sp-heading-text {
      display: inline-block;
    }
    &.section-heading-five .section-heading-tag {
      position: relative;
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
      }
      // .sp-heading-text {
      //   padding: 8px;
      // }
    }
    &.section-heading-six .section-heading-tag {
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    &.section-heading-seven .section-heading-tag {
      position: relative;
      display: inline-block;
      &::after {
        content: "";
        display: block;
        width: 40%;
        position: absolute;
        bottom: 0;
      }
    }
    &.section-heading-eight .section-heading-tag {
      position: relative;
      display: inline-block;
      &::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        left: 105%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    &.section-heading-nine {
      text-align: center;
    }
    &.section-heading-nine .section-heading-tag {
      position: relative;
      display: inline-block;
      &::before,
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      &::before {
        left: 105%;
      }
      &::after {
        right: 105%;
      }
    }
    &.section-heading-ten .section-heading-tag {
      position: relative;
      display: inline-block;
      &::after {
        content: "";
        display: block;
        width: 50%;
        position: absolute;
        left: 22%;
        bottom: 0;
      }
    }
    &.section-heading-eleven .section-heading-tag {
      position: relative;
      display: inline-block;
      line-height: 100%;
      clip-path: polygon(100% 0%, 95% 49%, 100% 100%, 0 99%, 0% 50%, 0 0);
      max-width: 100%;
      .sp-heading-text {
        padding: 5px 40px 5px 20px;
      }
    }
    &.section-heading-twelve .section-heading-tag {
      position: relative;
      display: inline-block;
      line-height: 100%;
      clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
      .sp-heading-text {
        padding: 5px 40px 5px 20px;
      }
    }
    &.section-heading-thirteen .section-heading-tag {
      position: relative;
      &::before,
      &::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
      }
      &::before {
        top: 0;
      }
      &::after {
        bottom: 0;
        opacity: 50%;
      }
    }
    &.section-heading-fourteen .section-heading-tag {
      position: relative;
      .sp-heading-text {
        clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
        max-width: 100%;
      }
      &::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
      }
      .sp-heading-text {
        padding: 5px 40px 5px 20px;
      }
    }
    &.section-heading-fifteen .section-heading-tag {
      position: relative;
      .sp-heading-text {
        margin-left: 100px;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 100px;
          position: absolute;
          left: -110px;
          bottom: 12px;
        }
      }
    }
    &.section-heading-sixteen .section-heading-tag {
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    &.section-heading-seventeen .section-heading-tag .sp-heading-text {
      position: relative;
      display: inline-block;
      &::after {
        content: "";
        display: block;
        width: 50%;
        position: absolute;
        transform: translateX(50%);
        display: inline-block;
        left: 0;
        bottom: 0;
        top: 100%;
      }
    }
    &.section-heading-eightTeen .section-heading-tag .sp-heading-text {
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 60%;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    &.section-heading-nineteen .section-heading-tag {
      display: inline-block;
      position: relative;
      svg {
        display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
      }
    }
    &.section-heading-twenty .section-heading-tag .sp-heading-text {
      position: relative;
      display: inline-block;
      &::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    &.section-heading-twentyOne {
      text-align: center !important;
    }
    &.section-heading-twentyOne .section-heading-tag {
      position: relative;
      text-align: center;
      display: inline-block;
      .sp-heading-text {
        position: relative;
        display: contents;
        &::before,
        &::after {
          content: "";
          width: 20px;
          height: 10px;
          border-radius: 6px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        &::before {
          left: -45px;
        }
        &::after {
          right: -45px;
        }
      }
      &::after,
      &::before {
        content: "";
        width: 200px;
        height: 10px;
        border-radius: 6px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      &::before {
        left: calc(100% + 55px);
      }
      &::after {
        right: calc(100% + 55px);
      }
    }
    &.section-heading-twentyTwo .section-heading-tag {
      border-style: solid;
      border-top-width: 2px;
      border-right-width: 2px;
      border-bottom-width: 2px;
      border-left-width: 4px;
      .sp-heading-text {
        padding: 8px 8px 8px 16px;
      }
    }
    &.section-heading-twentyThree .section-heading-tag {
      display: inline-block;
      text-align: right;
      max-width: 100%;
      &::after {
        content: "";
        position: absolute;
        border-width: 15px;
        border-style: solid;
        border-color: transparent;
        bottom: -28px;
        left: 15px;
      }
      .sp-heading-text {
        padding: 5px 20px;
      }
    }
    &.section-heading-twentyFour .section-heading-tag {
      position: relative;
      display: inline-block;
      clip-path: polygon(0% 0%, 94% 0, 100% 50%, 94% 100%, 0% 100%);
      text-align: right;
      .sp-heading-text {
        padding: 5px 32px 5px 20px;
      }
    }
  }
}

.sp-heading-text {
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
  font-size: 32px;
  line-height: 1.2;
}
.sp-subheading-text {
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.2;
}
.sp-section-heading-wrapper {
  .section-heading-tag {
    color: var( --smart-post-dark-text );
  }
  .section-heading-three .section-heading-tag {
    padding-left: 12px;
  }
  .section-heading-two,
  .section-heading-five,
  .section-heading-eleven,
  .section-heading-twelve,
  .section-heading-fourteen,
  .section-heading-twentyThree,
  .section-heading-twentyFour {
    .section-heading-tag {
      .sp-heading-text {
        color: #FFF;
        padding: 5px 20px;
      }
    }
  }
}