.cred-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
  font-family: inherit;
}

.cred-row-block {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* --- WINGED HEADLINE --- */
.cred-headline-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cred-headline {
  color: var(--cred-h-color);
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 2px !important;
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 0;
}

.cred-headline::before,
.cred-headline::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--cred-l-color);
}

/* --- SLIDER MECHANICS --- */
.cred-slider {
  display: flex;
  width: 100%;
}

.cred-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--cred-gap);
  padding-right: var(--cred-gap);
  
  /* Forces hardware acceleration */
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
}

/* --- THE LOGO CONTAINERS (Formerly White Cards) --- */
.cred-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cred-height);
  width: 260px; /* Matched to the Client Logo Slider width */
  flex-shrink: 0;
}

.cred-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.cred-card img {
  max-height: 100% !important; 
  max-width: 100% !important; 
  width: auto !important;      
  height: auto !important;     
  margin: 0 !important; 
  object-fit: contain !important; 
  display: block !important;   
  /* Added filter to the transition so it fades smoothly */
  transition: transform 0.3s ease, filter 0.3s ease !important;
  /* Makes them black-and-white and slightly muted */
  filter: grayscale(100%) opacity(60%) !important;
}

.cred-card a:hover img,
.cred-card:hover img {
  transform: scale(1.05) !important;
  /* Brings back full color and full brightness on hover */
  filter: grayscale(0%) opacity(100%) !important;
}

/* --- ANIMATIONS --- */
.cred-dir-left .cred-track {
  animation: cred-scroll-left linear infinite;
}

.cred-dir-right .cred-track {
  animation: cred-scroll-right linear infinite;
}

.cred-slider:hover .cred-track {
  animation-play-state: paused;
}

@keyframes cred-scroll-left {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes cred-scroll-right {
  0% { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- MOBILE --- */
@media (max-width: 900px) {
  .cred-wrapper {
    padding: 40px 0;
    gap: 50px;
  }
  .cred-card {
    height: calc(var(--cred-height) * 0.7); /* Matched to Client Logo Slider scale */
    width: 160px; /* Shrinks the bounding box down for phones */
  }
  .cred-headline {
    font-size: 15px !important; 
    gap: 15px;
  }
  .cred-headline::before,
  .cred-headline::after {
    width: 30px;
  }
}