/* =========================
       CAROUSEL WRAPPER
   ========================= */

    .peek-carousel {
      /* max-width: 1200px;
      margin: 0 auto; */
      position: relative;
       padding: 30px 40px;
    }

    .peek-track {
      display: flex;
      align-items: center;
      transition: transform .5s ease;
      will-change: transform;
    }

    /* every slide is the SAME size/opacity — side slides are just visually
   cut off by the wrapper's overflow:hidden edge, nothing is scaled or faded */
    .peek-slide {
      flex: 0 0 auto;
      width: 78%;
      padding: 0 16px;
    }

    /* =========================
       SLIDE (reuses your original classes)
   ========================= */

    .new-donation-slide {
     height: 350px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 5%) 25%, transparent 25%) -10px
      0 / 40px 40px,
    linear-gradient(315deg, rgb(255 255 255 / 4%) 25%, transparent 25%) -10px
      0 / 40px 40px,
    linear-gradient(135deg, var(--themeColor), #09245f);
  box-shadow: 0px 0px 10px #c9c8c8;
    }

    .new-donation-content {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      width: 60%;
      height: 100%;
      padding: 24px 4%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: var(--whiteColor);
      background:
        linear-gradient(135deg, rgb(255 255 255 / 5%) 25%, transparent 25%) -10px 0 / 40px 40px,
        linear-gradient(315deg, rgb(255 255 255 / 4%) 25%, transparent 25%) -10px 0 / 40px 40px,
        linear-gradient(135deg, var(--themeColor), #09245f);
      clip-path: polygon(0 0, 80% 0, 68% 100%, 0 100%);
    }

    .new-donation-content h1 {
      margin: 0 0 14px;
      color: var(--whiteColor);
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.1;
      font-weight: 700;
    }

    .new-donation-content p {
      margin-bottom: 18px;
      color: var(--whiteColor);
      font-size: 13px;
      opacity: .9;
    }

    .new-donation-btn {
      width: fit-content;
      padding: 10px 24px;
      color: var(--whiteColor);
      background: var(--secondaryColor);
      border: 0;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      font-size: 13px;
    }

    .new-donation-btn:hover {
      background: #df2020;
    }

    .new-donation-images {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 65%;
      height: 100%;
      display: flex;
      overflow: hidden;
    }

    .new-donation-img {
      height: 100%;
      width: 100%;
      position: relative;
      overflow: hidden;
      border-left: 6px solid var(--whiteColor);
    }

    .new-donation-img img {
      position: absolute;
      top: 0;
      left: -10%;
      width: 125%;
      height: 100%;
      object-fit: cover;
    }

    /* =========================
       ARROWS
   ========================= */

    .peek-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50%;
      background: var(--whiteColor);
      box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      font-size: 18px;
      color: var(--secondaryColor);
      font-weight: 700;
      transition: left .5s ease, right .5s ease, background-color .2s ease, color .2s ease;
    }

    .peek-arrow:hover {
      background: var(--secondaryColor);
      color: var(--whiteColor);
    }

    /* =========================
       INDICATORS
   ========================= */

    .peek-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
    }

    .peek-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--secondaryColor);
      opacity: .4;
      cursor: pointer;
      border: 0;
      padding: 0;
      transition: all .3s ease;
    }

    .peek-dot.is-active {
      opacity: 1;
      transform: scale(1.25);
    }

    /* =========================
       MOBILE
   ========================= */

    @media (max-width:767px) {
      .peek-carousel {
        padding: 0;
      }

      .peek-slide {
        width: 100%;
        padding: 0;
      }

      .peek-track-wrap {
        border-radius: 0;
      }

      .new-donation-slide {
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 0;
      }

      /* image first, content card second — subtle diagonal cut (left corner shorter, right full height) */
      .new-donation-images {
        order: 1;
        position: relative;
        width: 100%;
        height: 230px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
      }

      .new-donation-content {
        order: 2;
        position: relative;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        z-index: 5;

        margin-top: 0;
        padding: 20px 20px 66px;

        justify-content: flex-start;

        background:
         transparent;

        clip-path: none;
      }


      .new-donation-content h1 {
        font-size: 26px;
        margin: 0 0 15px;
        line-height: 1.3;
      }


      .new-donation-content p {
        margin-bottom: 20px;
        font-size: 13px;
      }


      .new-donation-btn {
        padding: 10px 24px;
        font-size: 13px;
      }


      .new-donation-img {
        border-left: 0;
        height: 100%;
      }

      .new-donation-img img {
        transform: none;
        left: 0;
        width: 100%;
      }

      /* both arrows grouped bottom-right, side by side */
      .peek-arrow {
        top: auto !important;
        bottom: 16px !important;
        transform: none !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
      }

      .peek-prev {
        left: auto !important;
        right: 54px !important;
      }

      .peek-next {
        right: 14px !important;
      }
    }
    .peek-dots{
      display: none;
    }