.breadcrumb {
  &__section {
    @extend %p-relative;
    padding-block: 130px 70px;
    overflow: hidden;
    z-index: 1;

    @include breakpoint(max-xl) {
      padding-block: 80px 60px;
    }

    .section-bg {
      @extend %p-absolute;
      inset: 0;
      z-index: -1;
    }

    .shape-1 {
      bottom: -80px;
      left: -50px;
      svg {
        width: 330px;
        height: 343px;
      }
      @include breakpoint(max-xl) {
        bottom: -30px;
        left: -30px;
      }
    }
    .shape-2 {
      top: 0;
      right: -50px;
      svg {
        width: 305px;
        height: 386px;
      }
      @include breakpoint(max-xl) {
        top: 0px;
        right: -30px;
      }

      @include breakpoint(max-md) {
        top: 0px;
        right: -65px;
      }
    }

    .shape-1,
    .shape-2 {
      @extend %p-absolute;
      z-index: -2;

      svg {
        color: $color-white;
        // -webkit-animation: rotate 50s linear infinite;
        // animation: rotate 50s linear infinite;
        // -webkit-transform-origin: center center;
        // -ms-transform-origin: center center;
        // transform-origin: center center;

        @include breakpoint(max-xxl) {
          width: 200px;
          height: 200px;
        }
        @include breakpoint(max-lg) {
          width: 130px;
          height: 130px;
        }
        @include breakpoint(max-sm) {
          display: none;
        }
      }
    }
  }
  &__title {
    @extend %text-center;

    @include breakpoint(lg) {
      font-size: 80px;
    }
    @include breakpoint(xl) {
      font-size: 90px;
    }
    @include breakpoint(xxl) {
      font-size: 100px;
    }
    span {
      @extend %d-inline-block, %p-relative;
      max-width: max-content;
      width: 100%;
      padding-block: 20px;
      padding-inline: 90px;
      z-index: 1;

      &::before,
      &::after {
        @extend %p-absolute;
        inset: 0;
        border: 1px solid rgba($color-white, 0.14);
        border-radius: 500px;
        z-index: -1;
      }

      &::after {
        @include transform(rotate(-4.5deg));
      }
      @include breakpoint(max-xl) {
        padding-block: 10px;
      }
      @include breakpoint(max-lg) {
        padding-inline: 40px;
        &::after {
          @include transform(rotate(-3.5deg));
        }
      }
      @include breakpoint(max-md) {
        padding-inline: 35px;
        &::after {
          @include transform(rotate(-3deg));
        }
      }
    }
  }
  &__nav {
    margin-top: 146px;

    @include breakpoint(max-xxxl) {
      margin-top: 130px;
    }
    @include breakpoint(max-xxl) {
      margin-top: 120px;
    }
    @include breakpoint(max-xl) {
      margin-top: 100px;
    }
    @include breakpoint(max-lg) {
      margin-top: 80px;
    }
    @include breakpoint(max-md) {
      margin-top: 60px;
    }
    .breadcrumb {
      @extend %justify-center;

      .breadcrumb-item {
        color: $color-5;
        font-weight: 400;
        line-height: 1;
        a {
          color: inherit;
          font-weight: inherit;
          line-height: inherit;
        }

        &.active {
          color: $color-white;
          font-weight: 500;
          &::before {
            color: $color-5;
          }
          a {
            color: inherit;
          }
        }
      }
    }
  }
}
