/* =========================================================
   Bytonic — Logo & Company Title Page-Scroll Driven Slider CSS
   Version 1.1.0
========================================================= */

.blts-scope {
  --blts-bg: #F4F2EC;
  --blts-label: #888888;
  --blts-card-bg: #F4F2EC;
  --blts-card-border: #000000;
  --blts-text: #000000;
  --blts-card-w: 240px;
  --blts-card-h: 145px;
  --blts-gap: 16px;
  --blts-radius: 4px;

  width: 100%;
  background-color: var(--blts-bg);
  padding: 80px 0;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  color: var(--blts-text);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.blts-scope, .blts-scope * {
  box-sizing: border-box;
}

/* =========================================================
   ULTIMATE HIGH-SPECIFICITY OVERRIDES
   Prevents theme or Elementor from adding blue text, blue borders,
   underlines, focus rings, or hover states.
========================================================= */
html body .blts-scope,
html body .blts-scope *,
html body .blts-scope div,
html body .blts-scope span,
html body .blts-scope a,
html body .blts-scope p,
html body .blts-scope .blts-card,
html body .blts-scope .blts-logo-text,
html body .blts-scope .blts-logo-img,
html body .blts-scope *:hover,
html body .blts-scope *:focus,
html body .blts-scope *:active,
html body .blts-scope *:visited,
html body .blts-scope .elementor-element-editable,
html body .blts-scope .elementor-widget-container {
  color: var(--blts-text, #000000) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: default !important;
  background-image: none !important;
  transition: none !important;
  animation: none !important;
}

html body .blts-scope .blts-card,
html body .blts-scope .blts-card:hover,
html body .blts-scope .blts-card:focus,
html body .blts-scope .blts-card:active,
html body .blts-scope .blts-card.elementor-element-editable {
  background-color: var(--blts-card-bg, #F4F2EC) !important;
  border: 1px solid var(--blts-card-border, #000000) !important;
  border-radius: var(--blts-radius, 4px) !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------------- HEADER BAR ---------------- */
.blts-header-bar {
  max-width: 1350px;
  margin: 0 auto 30px auto;
  padding: 0 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.blts-label-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--blts-label) !important;
  text-transform: uppercase;
}

/* ---------------- CARDS ---------------- */
.blts-card {
  width: var(--blts-card-w);
  height: var(--blts-card-h);
  background-color: var(--blts-card-bg) !important;
  border: 1px solid var(--blts-card-border) !important;
  border-radius: var(--blts-radius) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  flex-shrink: 0;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: none !important;
  animation: none !important;
  cursor: default !important;
  outline: none !important;
}

.blts-logo-img {
  max-width: 140px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
}

.blts-logo-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--blts-text) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: none !important;
  transform: none !important;
}

/* ---------------- DUAL OPPOSITE SCROLL TRACKS ---------------- */
.blts-marquee-container {
  display: flex;
  flex-direction: column;
  gap: var(--blts-gap);
  width: 100%;
  overflow: hidden;
}

.blts-track {
  display: flex;
  gap: var(--blts-gap);
  width: max-content;
  will-change: transform;
  animation: none !important;
}

.blts-track-group {
  display: flex;
  gap: var(--blts-gap);
}

/* ---------------- GRID MODE ---------------- */
.blts-grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--blts-gap);
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 5vw;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1100px) {
  .blts-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .blts-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: center;
  }

  .blts-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .blts-card {
    width: 180px;
    height: 115px;
    padding: 14px;
  }

  .blts-logo-text {
    font-size: 1.1rem;
  }
}