/* ==========================================
   TRUST BANNER (SCHOOL LOGOS)
   ========================================== */
.trust-banner {
  padding: 60px 0;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(18, 41, 57, 0.05); /* Soft divider */
  overflow: hidden; /* Prevents the scrolling from breaking the page width */
}

.trust-title {
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--secondary-gold);
  margin-bottom: 40px;
}

/* --- Infinite Marquee Setup --- */
.marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Adds a white fade effect on the left and right edges so logos smoothly appear/disappear */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content; /* Allows track to be as wide as the images need */
  padding: 10px 0;
  animation: scrollMarquee 60s linear infinite; /* 60s speed, stays constant, repeats forever */
}

/* --- The School Logos --- */
/* --- The Typographic Pill Badges --- */
/* --- The Typographic Pill Badges (Ultimate Version) --- */
.school-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  margin: 0 15px;

  border: 1px solid rgba(18, 41, 57, 0.12); /* Very delicate default border */
  border-radius: 50px;
  background-color: #ffffff;

  color: var(--primary-navy);
  font-family:
    "Plus Jakarta Sans",
    playfair display;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  white-space: nowrap;

  transition: all 0.3s ease;
  cursor: default;
}

/* The Status Dot */
.school-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(
    --school-color
  ); /* Automatically pulls the color from the HTML! */
  margin-right: 12px;
  transition: transform 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  .school-badge {
    padding: 10px 22px;
    font-size: 0.95rem;
    margin: 0 10px;
  }
  .school-badge .dot {
    margin-right: 8px;
  }
}

/* --- The Animation Keyframes --- */
@keyframes scrollMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Shifts exactly half the track width (which is why we duplicated the logos in the HTML) */
    transform: translateX(-50%);
  }
}