#servicelistcarousel{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
  position:relative;
}

.frame{
  border-radius:20px;
  padding:20px 60px;
}

/* ===== VIEWPORT ===== */
.viewport{
  overflow:hidden;
}

.track{
  display:flex;
  gap:24px;
  transition:transform .5s cubic-bezier(.22,.9,.35,1);
}

/* ===== SERVICE ITEM ===== */
.servicelist{
  flex:0 0 calc(29.5% - 16px);
  background:#fff;
  border-radius:16px;
  padding:20px;
  border:1px solid #dbe4f3;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
}

/* ===== ICON ===== */
.icon-wrap{
  width:56px;
  height:56px;
  border-radius:14px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-wrap svg{width:28px;height:28px}

/* ===== TEXT ===== */
.servicelistcarouseltitle{
  font-size:1.05rem;
  font-weight:700;
  margin:8px 0 0;
  color:#0f172a;
}
.sub{
  font-size:.88rem;
  color:#475569;
  margin-top:4px;
}
.desc{
  margin-top:14px;
  font-size:.95rem;
  line-height:1.5;
  color:#475569;
}

/* ===== CTA ===== */
.btn-learn{
  margin-top:auto;
  align-self:flex-end;
  padding:10px 18px;
  border-radius:12px;
  background:#3b82f6;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(59,130,246,.25);
}

/* ===== CONTROLS ===== */
.ctrl{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ctrl-left{left:10px}
.ctrl-right{right:10px}

/* ===== RESPONSIVE ===== */
@media (max-width:920px){
  .servicelist{flex:0 0 calc(40% - 12px);}
  .frame{padding:20px 48px;}
}

@media (max-width:560px){
  .servicelist{flex:0 0 85%;}
  .frame{padding:16px;}

  .ctrl{
    display:flex;
    width:36px;
    height:36px;
    top:auto;
    bottom:-18px;
    transform:none;
    z-index:5;
  }

  .ctrl-left{left:10%;}
  .ctrl-right{right:10%;}
}
