.wrap-88{max-width:1140px;margin:0 auto;padding:1rem}

/* ===========================
   Cards Section (АЖЛЫН БАЙР ...)
   =========================== */
.stats-88{
  margin:1.25rem 0;
}
.stats-grid-88{
  display:grid;
  gap:1rem;
  grid-template-columns: 1fr; /* default mobile single column */
  align-items:stretch;
}
.stat-card-88{
  background:#fff;
  border:2px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:1rem;
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:transform .22s ease, box-shadow .22s ease, border-color .18s ease, background .18s ease;
  cursor:default;
}
.stat-card-88 .label-88{font-size:.95rem;color:#444}
.stat-card-88 .value-88{font-weight:700;font-size:1.15rem;color:#0a74ff}

/* Hover effect: change bg color and border */
.stat-card-88:hover,
.stat-card-88:focus{
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(10,116,255,0.08);
  border-color: #0a74ff;
  background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
  outline:none;
}

/* Breakpoints for grid:
   ≤480.8px: 1 column x 5 rows (default) 
   481–768.8px: 2 columns x auto rows
   769–1198.8px: 3 columns
   ≥1199px: 5 columns (1 row)
*/
@media screen and (min-width:481px) and (max-width:768.8px){
  .stats-grid-88{grid-template-columns: repeat(2,1fr)}
}
@media screen and (min-width:769px) and (max-width:1198.8px){
  .stats-grid-88{grid-template-columns: repeat(3,1fr)}
}
@media screen and (min-width:1199px){
  .stats-grid-88{grid-template-columns: repeat(5,1fr)}
}

/* ===========================
   Generic Slider styles
   =========================== */
.slider-88{margin:1.5rem 0; background:transparent}
.slider-88 .slider-viewport-88{
  overflow:hidden;
  position:relative;
  width:100%;
  border-radius:10px;
  background:transparent;
  padding:1rem 0;
}
.slider-track-88{
  display:flex;
  gap:1rem;
  transition: transform .45s cubic-bezier(.2,.9,.3,1);
  will-change:transform;
  align-items:center;
}
/* Slide item */
.slide-88{
  background:#fff;
  border-radius:10px;
  min-width:220px;
  flex:0 0 auto;
  padding:0.75rem;
  box-shadow:0 8px 20px rgba(12,20,40,0.06);
  border:1px solid rgba(0,0,0,0.06);
}
/* Image inside slide */
.slide-88 img{height:250px;border-radius:8px;display:block}
.slide-88 .logos{width: 100px;}


/* Controls (prev/next) */
.slider-controls-88{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:.6rem;
  align-items:center;
}
.btn-ctrl-88{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn-ctrl-88:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(12,20,40,0.06)}
.btn-ctrl-88 svg{width:16px;height:16px;fill:#333}

/* Dots */
.dots-88{display:flex;gap:.4rem}
.dot-88{
  width:10px;height:10px;border-radius:999px;background:rgba(0,0,0,0.12);
  cursor:pointer;border:0;box-shadow:none;
}
.dot-88.active{background:#0a74ff}

/* Make track responsive: show multiple slides at larger widths.
   We'll control number of visible slides via CSS -- but JS calculates slide width. */
@media screen and (max-width:480.8px){
  .slide-88{min-width: calc(100% - 2rem)} /* one per view (account for gaps/padding) */
}
@media screen and (min-width:481px) and (max-width:768.8px){
  .slide-88{min-width: calc((100% - 1rem) / 2)} /* two per view */
}
@media screen and (min-width:769px) and (max-width:1198.8px){
  .slide-88{min-width: calc((100% - 2rem) / 3)} /* three per view */
}
@media screen and (min-width:1199px){
  .slide-88{min-width: calc((100% - 3.5rem) / 5)} /* five per view if needed */
}

/* Partner logos grid variant (many logos) */
.partners-track-88 .slide-88{min-width:140px;padding:.5rem;display:flex;align-items:center;justify-content:center}
.partners-track-88 img{max-height:56px;opacity:.95;filter:grayscale(0.0)}

/* small accessibility */
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ===========================
   Contact / Map / Form
   =========================== */
.contact-88{background:#fff;border-radius:12px;padding:1rem;margin:1.25rem 0;box-shadow:0 8px 20px rgba(12,20,40,0.04)}
.contact-grid-88{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media screen and (max-width:760px){ .contact-grid-88{grid-template-columns:1fr} }

.map-box-88{background:#e9eef8;border-radius:8px;min-height:220px;display:flex;align-items:center;justify-content:center;color:#223}
.contact-info-88{font-size:0.95rem}
.contact-info-88 p{margin:.4rem 0}

/* Form */
.form-88{display:grid;gap:.6rem}
.form-88 input,.form-88 textarea{padding:.6rem;border:1px solid rgba(0,0,0,0.08);border-radius:8px}
.form-88 textarea{min-height:100px;resize:vertical}
.btn-primary-88{
  background:#0a74ff;color:#fff;border:0;padding:.6rem .9rem;border-radius:8px;cursor:pointer;font-weight:600;
}

/* Modal */
.modal-backdrop-88{
  position:fixed;inset:0;background:rgba(10,10,20,0.45);display:none;align-items:center;justify-content:center;z-index:1200;
}
.modal-backdrop-88.active{display:flex}
.modal-88{background:#fff;padding:1.25rem;border-radius:12px;max-width:420px;width:90%;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,0.25)}
.modal-88 button{margin-top:1rem;padding:.5rem .9rem;border-radius:8px;border:0;background:#0a74ff;color:#fff}

/* small helpers */
.h2-88{font-size:1.05rem;margin-bottom:.6rem}
.small-muted{color:#666;font-size:.9rem}