/* Add clickable styling to vendor containers */
.u-section-4 .u-group-1,
.u-section-4 .u-group-2,
.u-section-4 .u-group-3,
.u-section-4 .u-group-4,
.u-section-4 .u-group-5 {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Underline vendor names to indicate they're clickable and make them black */
.u-section-4 .u-text-3,
.u-section-4 .u-text-4,
.u-section-4 .u-text-5,
.u-section-4 .u-text-6,
.u-section-4 .u-text-7 {
  text-decoration: underline;
  color: #000000;
  text-align: center;
}

/* Add hover effect for better UX */
.u-section-4 .u-group-1:hover,
.u-section-4 .u-group-2:hover,
.u-section-4 .u-group-3:hover,
.u-section-4 .u-group-4:hover,
.u-section-4 .u-group-5:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Add a subtle indicator that these are clickable */
.u-section-4 .u-group-1::after,
.u-section-4 .u-group-2::after,
.u-section-4 .u-group-3::after,
.u-section-4 .u-group-4::after,
.u-section-4 .u-group-5::after {
  content: "";
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: #777;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.u-section-4 .u-group-1:hover::after,
.u-section-4 .u-group-2:hover::after,
.u-section-4 .u-group-3:hover::after,
.u-section-4 .u-group-4:hover::after,
.u-section-4 .u-group-5:hover::after {
  opacity: 1;
}