/* ==========================================================================
   CERTIFICATIONS & STATS SLIDER - ULTRA MODERN & RESPONSIVE
   ========================================================================== */

/* Layout wrapper inside .stats section */
.stats-layout {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  padding-block: clamp(2.8rem, 4.8vw, 3.8rem);
}

/* Right Column: 2 Counter Stat Cards */
.stats-counters-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 175px));
  gap: 1.1rem;
  flex-shrink: 0;
}

.stats-counters-col .stat {
  height: 100%;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 1rem 1.4rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1.5px solid color-mix(in srgb, var(--color-line, #DCE1F0) 90%, #fff);
  box-shadow: 0 4px 18px rgba(41, 43, 154, 0.04);
}

.stats-counters-col .stat:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-primary, #292B9A) 35%, transparent);
  box-shadow: 0 14px 32px rgba(41, 43, 154, 0.12);
}

/* Left Column: Certifications Slider */
.certs-slider-col {
  flex: 1;
  min-width: 0; /* Critical for flex child overflow */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* Slider Controls Header / Navigation */
.certs-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-inline: 0.35rem;
}

.certs-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary, #292B9A);
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--color-primary, #292B9A) 18%, var(--color-line, #DCE1F0));
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  box-shadow: 0 2px 10px rgba(41, 43, 154, 0.04);
}

.certs-badge-label i {
  color: #10b981;
  font-size: 0.95rem;
}

.certs-nav-btns {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.certs-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--color-line, #DCE1F0);
  color: var(--color-primary, #292B9A);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(41, 43, 154, 0.06);
  padding: 0;
}

.certs-nav-btn:hover {
  background: var(--color-primary, #292B9A);
  color: #ffffff;
  border-color: var(--color-primary, #292B9A);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 43, 154, 0.2);
}

.certs-nav-btn:active {
  transform: scale(0.94);
}

/* Slider Track & Viewport */
.certs-slider-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 16px);
  width: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding: 4px 2px 8px;
}

.certs-slider-viewport:active {
  cursor: grabbing;
}

.certs-slider-track {
  display: flex;
  gap: 1.1rem;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Certification Card - Exactly Matching Design */
.cert-card {
  flex: 0 0 calc((100% - 3.3rem) / 4);
  min-width: 155px;
  max-width: 220px;
  min-height: 210px;
  background: #ffffff;
  border: 1.5px solid color-mix(in srgb, var(--color-line, #DCE1F0) 90%, #fff);
  border-radius: 18px;
  padding: 1.25rem 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(41, 43, 154, 0.04);
  cursor: pointer;
  outline: none;
  overflow: hidden;
}

.cert-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(41, 43, 154, 0.12), 0 2px 6px rgba(0, 0, 0, 0.03);
  border-color: color-mix(in srgb, var(--color-primary, #292B9A) 35%, transparent);
}

.cert-card:hover::after {
  border-color: color-mix(in srgb, var(--color-primary, #292B9A) 25%, transparent);
}

/* Card Icon Box */
.cert-icon-box {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.cert-card:hover .cert-icon-box {
  transform: scale(1.08);
}

.cert-icon-box svg,
.cert-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Card Info */
.cert-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}

.cert-card-title {
  font-family: var(--font-heading), var(--font-body), sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-ink, #1A1B2E);
  line-height: 1.25;
  margin: 0;
  text-wrap: nowrap;
}

.cert-card-sub {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted, #5C6276);
  line-height: 1.2;
  margin: 0;
}

.cert-card-sub.highlight-orange {
  color: #FF5A1F;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--font-mono, ui-monospace, sans-serif);
}

.cert-card-sub.highlight-green {
  color: #059669;
}

.cert-card-sub.highlight-blue {
  color: #2563eb;
}

.cert-card-sub.highlight-red {
  color: #dc2626;
}

/* Card Quick Hover View Action */
.cert-card-action {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-primary, #292B9A);
  background: color-mix(in srgb, var(--color-primary, #292B9A) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #292B9A) 16%, transparent);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill, 999px);
  opacity: 0.9;
  transition: all 0.25s ease;
  width: 100%;
}

.cert-card:hover .cert-card-action {
  background: var(--color-primary, #292B9A);
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 4px 10px rgba(41, 43, 154, 0.22);
}

.cert-card-action i {
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}

.cert-card:hover .cert-card-action i {
  transform: scale(1.15);
}

/* ==========================================================================
   PURE IMAGE LIGHTBOX / OVERLAY MODAL
   ========================================================================== */
.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.cert-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cert-lightbox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 90vh;
}

.cert-lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  background: #ffffff;
}

.cert-lightbox-img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.cert-lightbox.active .cert-lightbox-img {
  transform: scale(1);
  opacity: 1;
}

/* Close Button */
.cert-lightbox-close {
  position: fixed;
  top: 24px;
  left: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.35rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000000;
}

.cert-lightbox-close:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 1);
  transform: scale(1.08) rotate(90deg);
}

/* Prev / Next Navigation Buttons */
.cert-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000000;
}

.cert-lightbox-nav:hover {
  background: #ffffff;
  color: #1A1B2E;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.cert-lightbox-prev {
  right: 28px;
}

.cert-lightbox-next {
  left: 28px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Large Tablets & Small Desktops (max-width: 1080px) */
@media (max-width: 1080px) {
  .stats-layout {
    flex-direction: column;
    gap: 2.2rem;
  }
  
  .stats-counters-col {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }
  
  .cert-card {
    flex: 0 0 calc((100% - 2.2rem) / 3);
    min-width: 150px;
  }
}

/* Mobile Devices (max-width: 767px) */
@media (max-width: 767px) {
  .stats-layout {
    padding-block: clamp(2rem, 5vw, 2.6rem);
    gap: 1.8rem;
  }
  
  .stats-counters-col {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    width: 100%;
  }

  .cert-card {
    flex: 0 0 calc((100% - 1.1rem) / 2);
    min-width: 140px;
    padding: 1.1rem 0.65rem 0.9rem;
  }

  .cert-icon-box {
    width: 62px;
    height: 62px;
    margin-bottom: 0.75rem;
  }

  .cert-card-title {
    font-size: 0.95rem;
  }

  .cert-card-sub {
    font-size: 0.78rem;
  }

  .cert-lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
  .cert-lightbox-prev {
    right: 12px;
  }
  .cert-lightbox-next {
    left: 12px;
  }
  .cert-lightbox-close {
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
  .cert-card {
    flex: 0 0 160px;
  }
}