* slider styles (scope to avoid clashes) */
.kj-slider-wrap { font-family: "Poppins",sans-serif; width:100%; }
.kj-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 20px 0;
}
.kj-slider-track {
  display: flex;
  align-items: stretch;
  transition: transform 700ms ease;
  will-change: transform;
}

/* each card size — we'll compute exact pixel movement in JS */
.kj-school-box {
  box-sizing: border-box;
  flex: 0 0 calc(33.3333% - 20px); /* 3 visible with internal gaps on desktop */
  margin: 0 10px;
  background: #0C3574;
  color: #fff;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.kj-school-box img { width: 100%; height: 270px; object-fit: cover; display:block; }
.kj-school-box .body { padding: 12px; flex:1; }
.kj-school-box h3 { font-size: 16px; margin: 6px 0; }
.kj-school-box p { font-size: 13px; margin: 6px 0 10px; color: #eee; }

/* arrows (unique classes) */
.kj-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:1200;
}
.kj-prev { left: 5px; }
.kj-next { right: 5px; }
.kj-arrow svg { width:20px; height:20px; color:#fff; }

/* responsive sizes */
@media (max-width: 992px) {
  .kj-school-box { flex: 0 0 calc(50% - 20px); } /* 2 visible */
}
@media (max-width: 600px) {
  .kj-school-box { flex: 0 0 calc(100% - 0px); margin: 0 0 16px 0; } /* 1 visible */
  .kj-slider-container { padding-bottom: 10px; }
  .kj-arrow { display: none; } /* hide arrows on small screens if desired */
}

/* === Hover effects for school boxes === */
.kj-school-box {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.kj-school-box:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Slight zoom effect for image */
.kj-school-box img {
  transition: transform 0.5s ease;
}
.kj-school-box:hover img {
  transform: scale(1.05);
}

/* Optional: highlight title on hover */
.kj-school-box:hover h3 {
  color: #ffd700;
  transition: color 0.3s ease;
}