.control-nav {
  position: absolute;
  width: 100%;
  max-width: 100%;
  z-index: 3;
  flex-wrap: wrap;
  background: transparent;
  bottom: 0;
  height: 90px;


  .swiper-slide:not(.swiper-slide-active) svg{
    opacity: 0;
  }

  .btn-all {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    padding: 10px 30px;
    border-radius: 50px;
  }

  .dsn-paginate-arrow {
    max-width: calc(45% - 30px);
  }


  @include media_768(min) {
    .dsn-section-padding & {
      padding: 0;
      width: calc(100% - (var(--dsn-gap-container) * 2));
    }
  }


  .swiper-notification {
    display: none;
  }

  .box-title {
    @include media_575 {
      display: none;
    }

    h6.sm-title-block {
      font-size: 20px;
      text-transform: uppercase;
    }

  }

  .dsn-pagination {
    .h2 {
      font-size: 45px;
      position: relative;
      transform: scaleX(1.5);
      clip-path: inset(0 0 0 20%);
      bottom: auto;
      line-height: 45px;
      margin-right: 15px;
    }

    span.sm-title-block:not(.total) {
      transform: scaleY(1.5) translateY(-4px) rotate(12deg);
      margin-right: 5px;
      margin-left: 5px;
    }

    span.sm-title-block {
      font-family: $heading-font;
    }
  }
}

.dsn-paginate-arrow {
  .next-arrow, .prev-arrow {
    position: relative;
    cursor: pointer;


    svg {
      transition: 0.5s;

      &:not(.arrow) {
        width: 50px;
      }

      &.arrow {
        width: 17px;
      }

      stroke: $heading-color;

      circle {
        stroke-width: 1;
        opacity: 0.25;
      }
    }

    &:hover svg {
      stroke-dashoffset: 20px;
    }

  }

  .next-arrow .container-inner {
    clip-path: inset(0 0 0 35%);
  }

  .prev-arrow .container-inner {
    clip-path: inset(0 35% 0 0);
  }


  .prev-arrow svg.arrow {
    transform: translate(-50%, -50%) rotate(180deg);
  }

  .next-arrow, &.prev-paginate .box-title {
    margin-left: 0;
  }


}


@include media_768 {
  .dsn-pagination, .dsn-swiper-paginate {
    display: none;
  }

}


.dsn-swiper-paginate > .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  transform: rotate(90deg);
  left: auto;
  right: -20px;
  bottom: 50%;
  @include media_1400() {
    right: -45px;
  }

  @include media_991() {
    right: -36px;
  }

  .swiper-pagination-bullet {

    @include media_991(min) {
      --swiper-pagination-bullet-width: 20px;
      --swiper-pagination-bullet-height: 20px;
    }
    @include media_991 {
      --swiper-pagination-bullet-width: 15px;
      --swiper-pagination-bullet-height: 15px;
    }

    &:before {
      background-color: $heading-color;
    }

    &:after {
      border-color: $heading-color;
    }
  }
}

.dsn-swiper-paginate > .swiper-pagination-vertical.swiper-pagination-bullets {
  width: 20px;
  right: 40px;

  .swiper-pagination-bullet:before, .swiper-pagination-bullet:after {
    left: 0;
  }
}