.projects{ background:#fff; padding:80px 0; text-align:center; }
.projects-title{ font-size:2.1rem; font-weight:800; color:#161616; margin-bottom:12px; }
.projects-lead{ font-size:15px; color:#666; max-width:680px; margin:0 auto 30px; }

.projects-tabs{ display:flex; justify-content:center; gap:14px; margin-bottom:36px; flex-wrap:wrap; }
.projects-tab{
  background:#EDEBF5; color:#6b6b78; border:none; padding:12px 22px;
  border-radius:6px; font-size:13px; font-weight:700; letter-spacing:.3px;
  cursor:pointer; transition:.25s;
}
.projects-tab.active{ background:#5CB85C; color:#fff; }
.projects-tab:not(.active):hover{ background:#e0ddec; }

.projects-panel{ display:none; }
.projects-panel.active{ display:block; }

.projects-slider{ position:relative; }

.projects-track{
  display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none;
  padding-bottom:4px; cursor:grab;
}
.projects-track::-webkit-scrollbar{ display:none; }
.projects-track.dragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }

.project-card{
  flex:0 0 calc(33.333% - 14px); scroll-snap-align:start;
  text-align:left;
}
.project-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; margin-bottom:12px; }
.project-card p{ font-size:13.5px; color:#555; font-style:italic; line-height:1.5; margin:0; }

.slider-arrow{
  position:absolute;
  top:calc(50% - 24px);
  width:38px; height:38px;
  border-radius:8px;
  border:none;
  background:rgba(255,255,255,.9);
  color:#333;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:5;
  transition:.2s;
}
.slider-arrow.prev{ left:14px; }
.slider-arrow.next{ right:14px; }
.slider-arrow:hover{ background:#F4C61C; color:#2F2454; }

.slider-dots{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px; margin-top:20px; }
.slider-dots span{ width:6px; height:6px; border-radius:50%; background:#d8d8dc; cursor:pointer; transition:.2s; flex-shrink:0; }
.slider-dots span.active{ width:8px; height:8px; background:#1a1a1a; }

@media(max-width:992px){
  .project-card{ flex:0 0 calc(50% - 10px); }
}
@media(max-width:576px){
  .project-card{ flex:0 0 85%; }
}