html,
    body {
        overflow-x: hidden;
    }
    /* ====== Root scales & colors ====== */
    :root {
      --w: 30rem;
      /* card width */
      --h: 300px;
      /* card height */
      --stack-gap-x: 62px;
      /* side cards peek amount */
      --scale-step: 0.06;
      /* shrink per step from center */
      --shadow: 0 14px 40px rgba(18, 23, 35, 0.14);
      --ring: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
      --text: #13161a;
      --muted: #6d7380;
    }

    * {
      box-sizing: border-box;
    }

    /* body {
      margin: 0;
      padding: 32px 10px 64px;
      font-family: Poppins, system-ui, Segoe UI, Roboto, Helvetica, Arial,
        sans-serif;
      color: var(--text);
      background: #fff;
    } */

    /* ====== Heading / wrapper ====== */
    .client-slider {
      max-width: 1024px;
      margin: 0 auto;
      text-align: center;
    }

   .client-slider .title {
      font-size: 28px;
      font-weight: 600;
      letter-spacing: 0.2px;
      margin: 6px 0 24px;
    }

    .client-slider .title strong {
      font-weight: 700;
    }

    /* ====== Carousel ====== */
  .client-slider  .carousel {
      position: relative;
      width: min(100%, var(--w));
      height: var(--h);
      margin: 0 auto;
      user-select: none;

      /* Important so arrows can sit outside and above cards */
      overflow: visible;
      isolation: isolate;
      /* create a new stacking context */
    }

     .client-slider .carousel-wrapper {
      position: relative;
      /* anchor for .nav */
      width: 95%;
      /* or your fixed width */
      max-width: 900px;
      /* optional */
      margin: 0 auto;
      /* center carousel */
    }

    /* Cards live on the track below nav */
    .client-slider  .track {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    /* ====== Card ====== */
   .client-slider .card {
      position: absolute;
      top: 0;
      left: 50%;
      width: 100%;
      height: 100%;
      transform-origin: 50% 60%;
      border-radius: 22px;
      background: #fff;
      box-shadow: var(--shadow), var(--ring);
      transition: transform 0.5s cubic-bezier(0.2, 0.7, 0, 1),
        opacity 0.35s ease;
      overflow: hidden;
      z-index: 2;
      /* nav will sit above with a larger z-index */
      background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    }


    .background-box-1::before {
      content: "";
      position: absolute;
      /* inset: -2px; */
      bottom: 0px;
      left: 0px;
      border-radius: 24px;
      width: 50%;
      height: 46%;
      filter: blur(15px);
      /* extra softness*/
      background: radial-gradient(circle at bottom left, rgba(44, 68, 148, 0.56) 0%, rgba(182, 201, 248, 0) 90%);
      -webkit-mask-composite: destination-over, destination-over, source-over;
      mask-composite: exclude;
      z-index: 0;
    }

    .background-box-1::after {
      content: "";
      position: absolute;
      bottom: 0px;
      right: 0px;
      height: 60%;
      /* how tall the fade is */
      width: 200px;
      z-index: 0;
      border-radius: 50%;
      /* makes gradient edges circular/soft */
      filter: blur(15px);
      /* extra softness */
      /* background: radial-gradient(circle at bottom right, #fce9dc 25%, transparent 90%); */
      background: radial-gradient(circle at bottom right,
          rgba(44, 68, 148, 0.32) 0%,
          /* blue with 80% opacity */
          rgba(182, 201, 248, 0) 90%
          /* fade to fully transparent */
        );

      z-index: 0;
      /* stays behind inner content */
    }

    .background-box-2::before {
      content: "";
      position: absolute;
      /* inset: -2px; */
      bottom: 0px;
      left: 0px;
      border-radius: 24px;
      width: 50%;
      height: 46%;
      filter: blur(15px);
      /* extra softness*/
      background: radial-gradient(circle at bottom left, rgba(235, 103, 23, 0.56) 0%, rgba(182, 201, 248, 0) 90%);
      -webkit-mask-composite: destination-over, destination-over, source-over;
      mask-composite: exclude;
      z-index: 0;
    }

    .background-box-2::after {
      content: "";
      position: absolute;
      bottom: 0px;
      right: 0px;
      height: 60%;
      /* how tall the fade is */
      width: 200px;
      z-index: 0;
      border-radius: 50%;
      /* makes gradient edges circular/soft */
      filter: blur(15px);
      /* extra softness */
      /* background: radial-gradient(circle at bottom right, #fce9dc 25%, transparent 90%); */
      background: radial-gradient(circle at bottom right,
          rgba(235, 103, 23, 0.56) 0%,
          /* blue with 80% opacity */
          rgba(182, 201, 248, 0) 90%
          /* fade to fully transparent */
        );

      z-index: 0;
      /* stays behind inner content */
    }

    .background-box-3:before {
      content: "";
      position: absolute;
      /* inset: -2px; */
      bottom: 0px;
      left: 0px;
      border-radius: 24px;
      width: 50%;
      height: 46%;
      filter: blur(15px);
      /* extra softness*/
      background: radial-gradient(circle at bottom left, rgba(227, 74, 139, 0.56) 0%, rgba(182, 201, 248, 0) 90%);
      -webkit-mask-composite: destination-over, destination-over, source-over;
      mask-composite: exclude;
      z-index: 0;
    }

    .background-box-3:after {
      content: "";
      position: absolute;
      bottom: 0px;
      right: 0px;
      height: 60%;
      /* how tall the fade is */
      width: 200px;
      z-index: 0;
      border-radius: 50%;
      /* makes gradient edges circular/soft */
      filter: blur(15px);
      /* extra softness */
      /* background: radial-gradient(circle at bottom right, #fce9dc 25%, transparent 90%); */
      background: radial-gradient(circle at bottom right,
          rgba(227, 74, 139, 0.56) 0%,
          /* blue with 80% opacity */
          rgba(182, 201, 248, 0) 90%
          /* fade to fully transparent */
        );

      z-index: 0;
      /* stays behind inner content */
    }

    .client-slider .inner {
      text-align: center;
      position: relative;
      z-index: 1;
      height: 100%;
      padding: 26px 28px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .quote-head {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .quote-icon {
      width: 50px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;

      font-size: 4rem;
      font-weight: 900;
      font-family: serif;
      color: #111;
      line-height: 1;
    }

    .quote-line {
      height: 3px;
      width: 120px;
      border-radius: 3px;
      background: #000;
      opacity: 0.7;
    }

    .quote {
      margin-top: 2px;
      line-height: 1.65;
      font-size: 15px;
      color: var(--text);
    }

    .quote-box {
      max-height: 150px;
      /* 👈 adjust as needed */
      overflow-y: auto;
      /* enables vertical scroll */
      padding-right: 8px;
      /* small gap so text doesn’t hide behind scrollbar */
    }

    /* optional: style scrollbar */
    .quote-box::-webkit-scrollbar {
      width: 6px;
    }

    .quote-box::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 3px;
    }

    .quote-box::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

 

.author .hr {
  width: 180px;           /* fixed size */
  margin: 8px auto;      /* auto left/right → centers the HR */
  border: 2px solid #888;
} 

    .author {
      text-align: center;
      margin-top: auto;
      font-size: 14px;
      color: var(--muted);
    }

    .author b {
      color: #000;
    }

    /* ====== Navigation (always on top & visible) ====== */
    .client-slider .nav {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      z-index: 9999;
      pointer-events: none;
    }

    .client-slider  .nav button {
      position: absolute;
      pointer-events: auto;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: #fff;
      color: #000;
      font-size: 22px;
      font-weight: 700;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
        box-shadow 0.2s ease;
    }

    /* Position buttons manually */
    .client-slider .nav #prev {
      position: absolute;
      left: -185px;
      /* push outside left edge */
      top: 50%;
      transform: translateY(-50%);
    }

    .client-slider .nav #next {
      position: absolute;
      right: -185px;
      /* push outside right edge */
      top: 50%;
      transform: translateY(-50%);
    }


     .client-slider .nav button:hover {
      background: #000;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    /* ====== Dots (optional) ====== */
    /* .dots {
        margin: 16px 0 0;
        display: flex;
        justify-content: center;
        gap: 6px;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 10px;
        background: #c9d0da;
        transition: all 0.2s;
      }
      .dot.active {
        width: 22px;
        background: #7aa3ff;
      } */

    /* ====== Responsive ====== */
    @media (max-width: 860px) {
      :root {
        --w: 92vw;
      }

     .client-slider  .nav .prev {
        margin-left: -20px;
      }

      /* keep arrows inside on small screens */
    .client-slider   .nav .next {
        margin-right: -20px;
      }
    }

    /* ====== Responsive (Mobile tweaks) ====== */
    /* ====== Responsive ====== */
    @media (max-width: 768px) {
      :root {
        --w: 70vw;
        /* make card fit most of screen */
        --h: 400px;
        /* slightly taller for readability */
        --stack-gap-x: 36px;
        /* reduce spacing between side cards */
        --scale-step: 0.08;
        /* stronger shrink so side cards peek nicely */
      }

       .client-slider.title {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 20px;
        padding: 0 10px;
      }

      .client-slider  .quote {
        font-size: 14px;
        line-height: 1.55;
      }

      .client-slider  .author {
        font-size: 13px;
      }

      /* nav arrows inside the carousel */
      /*.nav #prev {
   left:-85px;
  }
  .nav #next {
   right: -85px;
  }*/
      /* .nav {
        top: 110% !important;
      } */

      .client-slider .nav button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);

      }

      .client-slider .nav #prev {
      .client-slider   left: -15%;


      }

      .client-slider .nav #next {
        right:-15%;


      }
    }

    /* Extra small screens */
    @media (max-width: 480px) {
      :root {
        --h: 360px;
        --stack-gap-x: 28px;
        --scale-step: 0.1;
      }
  .client-slider  .nav {
          display: none !important;
        }
	}
	
	/* Landscape phones (short height) */
@media (max-height: 450px) and (orientation: landscape) {
  :root {
    --h: 260px;             /* reduce card height */
    --stack-gap-x: 22px;    /* tighter spacing */
    --scale-step: 0.08;     /* less scaling difference */
  }

  .client-slider .nav {
    display: none !important; 
  }
}
      /* .nav {
    
        gap: 12px;
      }

      .nav #prev {
        left: 79px;
        top: 150% !important;

      }

      .nav #next {
        right: 79px;
        top: 150% !important;

      }

      .nav button {
        width: 32px;
        height: 32px;
        font-size: 16px;
      } */