.feature-slider{
  position: relative;
  width: 100%;
  padding: 24px 0;
}

.feature-slider__viewport{
  overflow: hidden;
  touch-action: pan-y;
}

.feature-slider__track{
  display: flex;
  gap: 18px;
  will-change: transform;
  transition: transform 280ms ease;
}

/* 2-up desktop */
.feature-slider__slide{
  flex: 0 0 calc((100% - 18px) / 2);
}

/* 1-up mobile */
@media (max-width: 768px){
  .feature-slider__slide{ flex: 0 0 100%; }
}

/* ✅ FIX: normal (non-grey) card styling */
.feature-slider__card{
 height: 100%;
  padding: 22px 22px;
  border-radius: 16px;
  background: #fff;

  border: 0 !important;              /* ✅ remove outline */
  outline: 0 !important;

 box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.feature-slider__icon{
  font-size: 45px;
  line-height: 1;
  margin-bottom: 25px;
  color: inherit;
}



/* Controls */
.feature-slider__controls{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.feature-slider__controls{
  margin-top: 16px;
  margin-bottom: 8px;
}

.feature-slider__btn{
  width: 46px;
  height: 36px;                 /* slightly flatter like many designs */
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  cursor: pointer;

  /* ✅ vertical centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  line-height: 1;
}

.feature-slider__btn:hover{ opacity: 0.92; }

.feature-slider__dots{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  padding: 0;
}

.feature-slider__dot{
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  outline: none;
  padding: 0 !important;
  margin: 0 !important;

  width: 26px;
  height: 4px;          /* thin */
  border-radius: 2px;   /* square-ish */
  display: block;

  background: rgba(222,170,155,0.35); /* ✅ lighter inactive */
  box-shadow: none !important;
  opacity: 1;
}

.feature-slider .feature-slider__dots .feature-slider__dot{
  -webkit-appearance:none;
  appearance:none;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  width:26px;
  height:4px;
  border-radius:2px;
  display:block;
  box-shadow:none !important;
  opacity:1 !important;

  background: rgba(222,170,155,0.30) !important; /* ✅ lighter inactive */
}

.feature-slider .feature-slider__dots .feature-slider__dot.is-active{
  background: #deaa9b !important;                /* ✅ full colour active */
}


.feature-slider__viewport,
.feature-slider__viewport * {
  cursor: grab !important;
}