/* Slider outer layout */
:root {
  --color-primary-purple: #004F87;
}
 

.bw-serv-grid-item {
    border: 1px solid var(--color-primary-purple);
    padding: 20px;
    border-radius: 20px;
}


.s_slider_outer { width: 100%; box-sizing: border-box; margin: 0 auto; padding: 10px 0; }
.service_slider { position: relative; width: 100%; overflow: hidden; }

/* viewport hides overflow */
.bw-serv-viewport { overflow: hidden; width: 100%; }

/* track is a flex row */
.bw-serv-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  transition: transform 450ms cubic-bezier(.22,.9,.31,1);
  will-change: transform;
  padding: 6px 0;
}

/* individual item - default: 3 per view */
.bw-serv-item {
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  min-width: 0;
}

 

/* image */
.bw-serv-image { width: 100%; display: block; overflow: hidden; display:flex; align-items:center; justify-content:center; background:#f4f6f8; }
.bw-serv-image img { width:100%; height:100%; object-fit:cover; display:block; }

/* placeholder style */
.bw-placeholder { font-size: 42px; font-weight:700; color:#6b7280; }

/* body */
.bw-serv-body { padding: 12px; flex: 1 1 auto; }
.bw-serv-title { margin: 0 0 6px; font-size: 16px; line-height:1.2; }
.bw-serv-excerpt { margin:0; font-size: 14px; color:#555; }

/* footer */
.bw-serv-footer { padding: 8px 12px; background:transparent; display:flex; justify-content:flex-end; }
.bw-serv-readmore { font-size:13px; text-decoration:none; }

/* dots */
.bw-serv-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  user-select: none;
}
.bw-serv-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
  color: #333;
  transition: background 160ms, transform 120ms, color 160ms;
}
.bw-serv-dot:hover { transform: translateY(-2px); }
.bw-serv-dot.active {
  background: #111827;
  color: #fff;
  border-color: rgba(0,0,0,0.15);
}

 
/* <= 600: 1 card */
@media (max-width: 600px) {
  .bw-serv-item { flex: 0 0 100%; }
  .bw-serv-image { height: 200px; }
}

 
@media (min-width: 601px) and (max-width: 1024px) {
  .bw-serv-item { flex: 0 0 50%; }
  .bw-serv-image { height: 180px; }
}
 
@media (min-width: 1025px) {
  .bw-serv-item { flex: 0 0 33.3333%; }
   
}