/* --- CONTAINER (Outer Background) --- */
.deepki-static-logo {
  background-color: #00615C; /* Fallback */
  width: 100vw !important;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 60px 0;
  box-sizing: border-box;
  overflow: hidden; /* Hide the scrollbar */
}

/* --- THE WINDOW (Mask) --- */
.deepki-marquee-window {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  /* Optional: Fade out edges for a pro look */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* --- THE TRACK (Moving Part) --- */
.deepki-marquee-track {
  display: flex;
  align-items: center;
  gap: 80px; /* Space between logos */
  width: max-content; /* Force it to be as wide as all logos combined */
  
  /* The Animation */
  animation: scroll-left 40s linear infinite;
}

/* Hover pauses the animation */
.deepki-marquee-track:hover {
  animation-play-state: paused;
}

/* --- LOGO ITEMS --- */
.deepki-static-item {
  flex-shrink: 0; /* Important: Prevents logos from getting squished */
  display: flex;
  justify-content: center;
  align-items: center;
}

.deepki-static-item img {
  height: 40px; 
  {% if module.logo_height %}
    height: px;
  {% endif %}
  
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* --- THE KEYFRAMES --- */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move left by -50%. 
       Since we have 2 sets of logos, -50% is the exact point 
       where Set 2 replaces Set 1, allowing an invisible reset. */
    transform: translateX(calc(-50% - 40px)); /* -50% minus half the gap */
  }
}

/* --- COLOR MODES --- */

/* 1. BLACK MODE */
.deepki-static-logo.logo-mode-black .deepki-static-item img {
  filter: brightness(0) !important;
  -webkit-filter: brightness(0) !important;
}

/* 2. WHITE MODE */
.deepki-static-logo.logo-mode-white .deepki-static-item img,
.deepki-static-logo:not(.logo-mode-black) .deepki-static-item img {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

.deepki-static-item:hover img {
  opacity: 0.8;
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
  .deepki-marquee-track {
    gap: 40px; 
    animation-duration: 20s; /* Faster on mobile */
  }
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 20px)); }
  }
}