.border-section-bottom {
  border-bottom: 2px solid $border-color;
  padding-bottom: 10px;
}
.square-after, .square-before, .circle-after, .circle-before{
  position: relative;
}
.square-after:after, .square-before:before, .circle-after:after, .circle-before:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);

}

.square-after:after, .square-before:before, .circle-after:after, .circle-before:before {
  background-color: $heading-color;

}

.circle-after:after, .circle-before:before {
  border: 3px solid var(--heading-color);
  border-radius: 50%;
}


.square-after, .circle-after {
  padding-right: 25px;

  &:after {
    right: 0;
  }
}

.square-before, .circle-before {
  padding-left: 25px;

  &:before {
    left: 0;
  }
}


/**
    END
 */

.line-under, .line-under-left {
  padding-bottom: 10px;
  margin-bottom: 10px;

  &:after, &:before {
    bottom: 0;
    width: 150px;
    max-width: 50%;
    height: 1.5px;
    background-color: $theme-color;
  }

}

.line-under {
  padding-right: 15px;

  &:after {
    right: 0;
  }
}

.line-under-left {
  padding-left: 15px;

  &:before {
    left: 0;
  }
}


.line-bg-left, .line-bg-right {
  position: relative;
  z-index: 1;

  &:before, &:after {
    top: 0;
    width: 100px;
    max-width: 50%;
    height: 100%;
    background-color: $assistant-color;
    z-index: -1;
    transform: skew(-10deg);

    .background-section & {
      background-color: $bg-color;
    }
  }

  &.sub-heading:before {
    width: 60px;
  }
}

.line-bg-left {
  padding-left: 20px;

  &:before {
    left: 0;
    transform-origin: bottom left;
  }
}

.line-bg-right {
  padding-right: 15px;

  &:after {
    right: 0;
    transform-origin: bottom right;
  }
}

.line-under:after, .line-bg-left:before, .line-bg-right:after, .line-under-left:before {
  content: '';
  position: absolute;
}

.line-shape {
  &:before,
  &:after {

    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 4vw;
    height: 1px;
    background: $border-color;

    @include media_400 {
      display: none;
    }
  }


  &:not(.line-shape-before):after {
    content: "";
    margin-left: 15px;
  }


  &:not(.line-shape-after):before {
    content: "";
    margin-right: 15px;
  }
}