/* Full-width base styling */
.cf-slider,
.cf-single {
  font-family: 'Nunito Sans', sans-serif;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  box-sizing: border-box;
}

.cf-slider {
  --gap: 24px;
  --peek: 60px;
  --controls-h: 56px;
  --initial-offset: 5vw;
  --slide-width: 550px;
  position: relative;
  padding-bottom: var(--controls-h);
  overflow: hidden; /* Ensure content doesn't cause horizontal scrollbars */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the viewport */
}
.cf-slider * {
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
}

/* Left alignment modifier */
.cf-wrapper.cf-align-left {
  justify-content: flex-start;
}

.cf-slider.cf-align-left,
.cf-single.cf-align-left {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.cf-slider.cf-align-left {
  align-items: flex-start;
}

.cf-white,
.cf-white * {
  color: #fff !important;
}

.cf-dark-blue,
.cf-dark-blue * {
  color: #0E1652 !important;
}

.cf-light-blue,
.cf-light-blue * {
  color: #001180 !important;
}

.cf-wrapper.cf-align-left .cf-viewport {
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.cf-wrapper.cf-align-left .cf-track {
  left: calc(-1 * var(--peek) + var(--initial-offset));
  padding-left: var(--peek);
}

.cf-single.cf-align-left .cf-feature {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.cf-single.cf-align-left .cf-feature-quote {
  margin-left: 0;
  margin-right: 0;
}

.cf-single.cf-align-left .cf-feature-person {
  align-items: flex-start;
}

.cf-single.cf-align-left .cf-feature-meta {
  text-align: left;
}

/* Wrapper to contain the slider and prevent overflow */
.cf-wrapper {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  display: flex;
  justify-content: center; /* Center the slider */
}

.cf-viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: calc(100% - 2 * var(--peek));
  margin: 0 auto;
  padding-right: var(--peek);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.cf-viewport:active {
  cursor: grabbing;
}

.cf-track {
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform 0.5s ease;
  position: relative;
  left: calc(-1 * var(--peek) + var(--initial-offset));
  padding-left: var(--peek);
}
.cf-slider.cf-slider--ids-offset .cf-viewport {
  width: calc(100% - 2 * var(--peek));
  padding-left: calc(var(--peek) + var(--initial-offset));
  padding-right: var(--peek);
}
.cf-slider.cf-slider--ids-offset .cf-track {
  left: calc(-1 * var(--peek) + var(--initial-offset));
}

.cf-offset {
  flex: 0 0 var(--initial-offset);
  max-width: var(--initial-offset);
  pointer-events: none;
}
.cf-slide {
  flex: 0 0 var(--slide-width);
  max-width: var(--slide-width);
}

.cf-card {
  border-right: 1px solid #AEB7C3;
  background: transparent;
  padding: 24px;
  border-radius: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cf-slider--pair .cf-slide .cf-card {
  border-right: none;
}
.cf-slider--pair .cf-slide:not(:last-child) .cf-card {
  border-right: 1px solid #AEB7C3;
}
.cf-card--blank {
  visibility: hidden;
}
.cf-logo {
  height: 65px;
  margin-bottom: 12px;
  filter: grayscale(1);
  max-width: 100%;
  object-fit: contain;
}
.cf-quote {
  margin: 0 0 18px 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: #0E1652;
}
.cf-slider--pair .cf-quote {
  font-size: 20px;
  font-weight: 500;
}
.cf-person {
  margin-top: 8px;
}
.cf-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #0E1652;
}
.cf-role {
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: #0E1652;
}
.cf-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center; /* Center the dots horizontally */
  position: absolute;
  left: 0;
  right: 0; /* Add right:0 to enable centering */
  bottom: 12px;
  z-index: 5;
  pointer-events: auto;
}
.cf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c7c7c7;
  border: none;
  padding: 0;
  cursor: pointer;
}
.cf-dot[aria-current="true"] {
  background: #FF592E;
}

.cf-single {
  padding: 48px 24px;
  font-family: 'Nunito Sans', sans-serif;
  box-sizing: border-box;
}
.cf-feature {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
}
.cf-feature-logo {
  height: 50px;
  margin-bottom: 16px;
  filter: grayscale(1);
  object-fit: contain;
}

.cf-feature-quote {
  margin: 0 auto 24px;
  max-width: 820px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: #111;
}

.cf-feature-person {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cf-feature-meta {
  text-align: center;
}
.cf-feature-name {
  font-weight: 700;
}
.cf-feature-role {
  font-size: 14px;
  color: #555;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .cf-feature {
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .cf-slider {
    --peek: 0px;
    width: calc(100% + 40px);
  }
  .cf-slider.cf-align-left {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .cf-track {
    left: 0;
    padding-left: 0;
  }
  .cf-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cf-offset {
    display: none;
  }
  .cf-slider--pair .cf-slide .cf-card {
    border-right: none;
  }
  
  /* Enhance mobile swipe experience */
  .cf-viewport {
    padding-right: 20px;
    padding-left: 20px; /* Standard mobile padding */
    overflow-x: hidden; /* Prevent horizontal scrollbar */
  }
  .cf-wrapper.cf-align-left .cf-viewport {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .cf-dots {
    padding: 15px 0; /* Larger touch target for dots on mobile */
  }
  
  .cf-dot {
    width: 10px; /* Larger dots for mobile */
    height: 10px;
  }
  
  .cf-single {
    padding: 30px 20px;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }
  .cf-single.cf-align-left {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

@media (min-width: 701px) {
  .cf-slider.cf-slider--pair {
    --peek: 0px;
    --initial-offset: 0px;
    --gap: 0px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
  }
  .cf-slider--pair .cf-viewport {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    cursor: default;
  }
  .cf-slider--pair .cf-track {
    left: 0;
    width: 100%;
    justify-content: center;
    transform: none !important;
    transition: none !important;
  }
  .cf-slider--pair .cf-slide {
    flex: 1 1 50%;
    max-width: 50%;
  }
  .cf-slider--pair .cf-dots {
    display: none;
  }
}