/* ====== Outer wrapper (white bg + padding) ====== */
.ul-ts-wrapper {
}

/* ====== Center the track to exactly visible * width + gaps ====== */
.ul-ts-viewport {
  max-width: calc(var(--ul-ts-visible, 3) * var(--ul-ts-slide-width, 330px)
              + (var(--ul-ts-visible, 3) - 1) * var(--ul-ts-gap, 24px));
  margin-left: auto;
  margin-right: auto;
}

/* ====== Swiper container/wrapper ====== */
.ul-ts-container { width: 100%; }

.ul-ts-wrapper__inner {
  display: flex;
  align-items: stretch; /* equal heights across slides */
  /* Do NOT use CSS gap here—Swiper uses spaceBetween for correct sizing */
}

/* ====== Slides ====== */
.ul-testimonial-slide {
  display: flex;
  align-items: stretch;
  height: auto; /* we respect min-height set inline via CSS var */
  /* width is computed by Swiper from containerWidth / visible */
}

/* ====== Optional link wrapper that covers the whole slide ====== */
.ul-ts-linkwrap {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ====== Card fills full slide height ====== */
.ul-ts-card {
  box-sizing: border-box;
  width: 100%;
  min-height: inherit;
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 3px 30px #00000029;
  padding: 50px;
  background: #ffffff;
}

/* ====== Rows ====== */
.ul-ts-row { width: 100%; }

.ul-ts-row--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 58px;
}

.ul-ts-row--content {
  font-family: "Raleway", Sans-serif;
  font-size: 22px;
  color: #005069;
  flex: 1 1 auto; /* grow to fill vertical space */
  text-align: center;
  font-style: italic;
}

.ul-ts-row--name  { font-weight: 700; font-size: 22px; font-family: "Raleway", Sans-serif; color:#005069; text-align: center;}
.ul-ts-row--title { color: #0084C8; font-size: 22px; font-family: "Raleway", Sans-serif; text-align: center;}

/* ====== Logo image ====== */
.ul-ts-logo {
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ====== Scoped Swiper UI ====== */
.ul-ts-pagination { margin-top: 12px; }
.ul-ts-scrollbar  { margin-top: 12px; }
.ul-ts-button-prev, .ul-ts-button-next { /* add custom arrow styles if needed */ }

/* =========================================================
   RESPONSIVE MEDIA QUERIES — scales down gracefully
   (keeps your fonts/colors; only adjusts sizes & spacing)
   ========================================================= */

/* ≤ 1440px — small desktops */
@media (max-width: 1440px) {
  .ul-ts-wrapper { --ul-ts-slide-width: 320px; --ul-ts-min-height: 460px; }
  .ul-ts-card { padding: 46px; }
  .ul-ts-row--logo { margin-bottom: 52px; }
  .ul-ts-logo { max-height: 60px; }

  .ul-ts-row--content { font-size: 21px; }
  .ul-ts-row--name,
  .ul-ts-row--title { font-size: 21px; }
}

/* ≤ 1280px — laptops */
@media (max-width: 1280px) {
  .ul-ts-wrapper { --ul-ts-slide-width: 300px; --ul-ts-min-height: 440px; }
  .ul-ts-card { padding: 42px; }
  .ul-ts-row--logo { margin-bottom: 48px; }
  .ul-ts-logo { max-height: 56px; }

  .ul-ts-row--content { font-size: 20px; }
  .ul-ts-row--name,
  .ul-ts-row--title { font-size: 20px; }
}

/* ≤ 1024px — tablets (landscape) */
@media (max-width: 1024px) {
  .ul-ts-wrapper { --ul-ts-slide-width: 280px; --ul-ts-min-height: 420px; }
  .ul-ts-card { padding: 36px; }
  .ul-ts-row--logo { margin-bottom: 44px; }
  .ul-ts-logo { max-height: 52px; }

  .ul-ts-row--content { font-size: 19px; }
  .ul-ts-row--name,
  .ul-ts-row--title { font-size: 19px; }
}

/* ≤ 768px — tablets (portrait) */
@media (max-width: 768px) {
  .ul-ts-wrapper { --ul-ts-slide-width: 260px; --ul-ts-min-height: 400px; }
  .ul-ts-card { padding: 30px; }
  .ul-ts-row--logo { margin-bottom: 40px; }
  .ul-ts-logo { max-height: 48px; }

  .ul-ts-row--content { font-size: 18px; }
  .ul-ts-row--name,
  .ul-ts-row--title { font-size: 18px; }
}

/* ≤ 600px — large phones */
@media (max-width: 600px) {
  .ul-ts-wrapper { --ul-ts-slide-width: 240px; --ul-ts-min-height: 380px; }
  .ul-ts-card { padding: 26px; }
  .ul-ts-row--logo { margin-bottom: 36px; }
  .ul-ts-logo { max-height: 44px; }

  .ul-ts-row--content { font-size: 17px; }
  .ul-ts-row--name,
  .ul-ts-row--title { font-size: 17px; }
}

/* ≤ 480px — small phones */
@media (max-width: 480px) {
  .ul-ts-wrapper { --ul-ts-slide-width: 220px; --ul-ts-min-height: 360px; }
  .ul-ts-card { padding: 22px; }
  .ul-ts-row--logo { margin-bottom: 32px; }
  .ul-ts-logo { max-height: 40px; }

  .ul-ts-row--content { font-size: 16px; }
  .ul-ts-row--name,
  .ul-ts-row--title { font-size: 16px; }
}