portant/* =============================================
   BizCode Industries Slider — slider.css v5.0

   Desktop  (≥961px):  4 cards · no arrows · dots
   Tablet   (541-960): 2 cards · no arrows · dots
   Mobile   (<541px):  1 card  · arrows flanking · label+desc below · no dots
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=DM+Sans:wght@400;600;700;800&display=swap');

/* ── Wrapper ── */
.bci-wrapper {
  font-family: 'Poppins'!important;
  background: #111111;
  width: 100%;
  padding: 52px 48px 44px;
  box-sizing: border-box;
  position: relative;
  --bci-accent: #C8102E;
}

/* ── Heading ── */
.bci-heading {
	font-family: 'Poppins'!important;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 36px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── Grid / track container ── */
.bci-grid {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* ── Flex sliding track ── */
.bci-track-inner {
  display: flex;
  gap: 20px;
  will-change: transform;
}

/* ── Card wrap: holds card + name below ── */
.bci-card-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* ── Card itself ── */
.bci-card {
	font-family: 'Poppins'!important;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
  width: 100%;
  background: #2a2a2a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bci-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 52px rgba(0,0,0,0.55);
}

/* ── Background image ── */
.bci-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
.bci-card:hover .bci-card-bg { transform: scale(1.04); }

/* ── Gradient overlay ── */
.bci-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.42) 55%,
    rgba(0,0,0,0.70) 100%
  );
  transition: background 0.3s ease;
  z-index: 1;
}
.bci-card:hover .bci-card-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.82) 100%
  );
}

/* ── In-card description (desktop/tablet hover only) ── */
.bci-card-desc {
	font-family: 'Poppins'!important;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 0 16px;
  color: rgba(255,255,255,0.88);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 3;
}
.bci-card:hover .bci-card-desc {
  opacity: 1;
  transform: translateY(0);
}

/* ── Optional link overlay ── */
.bci-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
}

/* ── Name below card ── */
.bci-card-name {
	font-family: 'Poppins'!important;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 26px);
  text-align: center;
  margin-top: 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ── Controls row: arrows sandwich the grid (mobile) / hidden (desktop+tablet) ── */
.bci-controls {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* grid takes all remaining space between arrows */
.bci-controls .bci-grid {
  flex: 1;
  min-width: 0;
}

/* separate dot row below */
.bci-dot-controls {
  justify-content: center;
  margin-top: 28px;
}

/* ── Dots ── */
.bci-dots {
  display: none!important; /* flex */
  gap: 8px;
  align-items: center;
}

.bci-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #555;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
  flex-shrink: 0;
}
.bci-dot.bci-dot-active { background: #6A1115; transform: scale(1.35); }
.bci-dot:hover          { background: #6A1115; }

/* ── Arrows: hidden on desktop/tablet, shown on mobile by JS ── */
.bci-arrow {
  display: flex!important; /* none JS overrides to flex on mobile */
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.bci-arrow:hover {
  border-color: #C8102E;
  background-color:  #6A1115!important;
/*   background: rgba(200,16,46,0.15); */
}

/* ── Mobile info panel (label + desc below card, visible only on mobile) ── */
.bci-mobile-info {
	font-family: 'Poppins'!important;
  display: none; /* shown on mobile via CSS below */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0 8px;
  text-align: center;
}

.bci-mob-title {
	font-family: 'Poppins'!important;
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.bci-mob-desc {
  font-family: 'Poppins'!important;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 280px;
}

/* ── Empty state ── */
.bci-empty {
  color: #888;
  font-size: 15px;
  padding: 24px;
  background: #222;
  border-radius: 8px;
  text-align: center;
}

/* ════════════════════════════════
   TABLET  601–1024px: 4 cards (same as desktop, just tighter padding)
════════════════════════════════ */
@media (max-width: 1024px) {
  .bci-wrapper { padding: 36px 24px 32px; }
  .bci-card-name { font-size: clamp(13px, 1.8vw, 22px); margin-top: 10px; }
}
@media (max-width: 860px) {
	.bct-text {
		font-family: 'Poppins'!important;
		width: 100%;
		font-family: 'Poppins';
		font-weight: 300;
		font-size: 18.2px;
		line-height: 26px;
	}

}
@media (max-width: 860px) {
	 .bct-btn {
		width: 36px;
		 height: 36px;
	}
	.bct-text {
		width: 100%!important;
		font-family: 'Poppins'!important;
		font-weight: 300!important;
		font-size: 18.2px!important;
		line-height: 26px!important;
	}
	.bct-controls {
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  margin-top: 40px;
	  /* indent to align under quote column: photo(301) + gap(56) = 357px */
	  padding-left: 30%;
	}

}
/* ════════════════════════════════
   MOBILE  ≤600px: 1 card + arrows
════════════════════════════════ */
@media (max-width: 600px) {
  .bci-wrapper  { padding: 32px 0 28px; }
  .bci-heading  { font-size: 32px!important; text-align:center; align-self:center; margin: 0 16px 50px; }

  /* Hide per-card name on mobile — mobile-info panel shows it instead */
  .bci-card-name { display: none; }

  /* Hide in-card desc on mobile — mobile-info shows it */
  .bci-card-desc { display: none; }
	.bci-mob-desc {
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.6;
		max-width: 280px;
	}
  /* Controls: arrow flanks the grid */
  .bci-controls {
    margin-top: 0;
    padding: 0 12px;
  }
.bct-controls {
    padding-left: 70% !important;
}
  /* Mobile info panel visible */
  .bci-mobile-info { display: flex; }

  /* Dots hidden on mobile */
  .bci-dots { display: none !important; }

  .bci-dot { width: 9px; height: 9px; }
}