.swiper { padding-bottom: 44px !important; }
    .swiper-button-next, .swiper-button-prev {
      color: #333;
      border: 2px solid #bbb;
      border-radius: 50%;
      width: 36px !important;
      height: 36px !important;
      content: none !important;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: 0 !important;
      top: unset !important;
      left: 50% !important;
      margin-top: 0 !important;
      z-index: 10;
      box-shadow: none;
      opacity: 1 ;
      transition: border-color 0.2s;
    }
    /* the 4 lines below over-write and delete the sticky additional swiper arrows */
    .swiper-button-prev::after {content: "0" !important; opacity: 0 !important; background: oklch(98.5% 0 0) !important;}
    .swiper-button-prev::before {content: "0" !important; opacity: 0 !important; background: oklch(98.5% 0 0) !important;}
    .swiper-button-next::after {content: "0" !important; opacity: 0 !important; background: oklch(98.5% 0 0) !important;}
    .swiper-button-next::before {content: "0" !important; opacity: 0 !important; background: oklch(98.5% 0 0) !important;}

    .swiper-button-prev { margin-left: -46px !important;}
    .swiper-button-next { margin-left: 6px !important;}
    .swiper-button-disabled {
      opacity: 0.4 !important;
      border-color: #eee !important;
      pointer-events: none;
    }
    .swiper-button-next i,
    .swiper-button-prev i {
      font-size: 1.1rem;
      margin: 0;
      color: #333;
    }
    @media (max-width: 600px) {
      .swiper { padding-bottom: 36px; }
      .swiper-button-next, .swiper-button-prev { width: 28px; height: 28px; }
      .swiper-button-prev { margin-left: -36px; }
      .swiper-button-next { margin-left: 6px; }
    }