/* ==========================================================================
   Logo sections — "Our Prestigious Clients", "Our Strategic Partners" and
   "Certifications" all share this same paginated slider: 4 columns × 2
   rows (8 logos) per page. If there are more, extra pages are reachable
   by scrolling and auto-advance every 4s (see js/logo-slider.js).
   ========================================================================== */
.logo-section { padding: 76px 0; }
.logo-section .section-heading-row { margin-bottom: 40px; }

.logo-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
}
.logo-marquee::before,
.logo-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.logo-marquee::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.section--alt .logo-marquee::before { background: linear-gradient(to right, var(--clr-surface-dim), transparent); }
.section--alt .logo-marquee::after { background: linear-gradient(to left, var(--clr-surface-dim), transparent); }

.logo-marquee__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation-name: logoMarquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }

@keyframes logoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logo-marquee__track .logo-card { width: 190px; flex-shrink: 0; }

/* ---- Certifications still use the paginated slider (unchanged) ---- */
.logo-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.logo-slider::-webkit-scrollbar { display: none; }

.logo-slider__page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
}

.logo-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.logo-slider-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-border);
  cursor: pointer;
  transition: all .25s ease;
}
.logo-slider-dots span.is-active {
  width: 24px;
  border-radius: var(--r-pill);
  background: var(--grad-primary);
}

.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--el-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-card:hover { transform: translateY(-4px); box-shadow: var(--el-2); border-color: transparent; }

.logo-card img {
  max-width: 100%;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---- Certifications — bigger, premium badge-style cards ---- */
.cert-section { padding-top: 20px; }

.cert-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 156px;
  padding: 26px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--el-1);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cert-card:hover {
  transform: translateY(-4px);
}

.cert-card img {
  max-width: 100%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}