/* Social container */
.social {
  display: flex; /* Arrange items in a row */
  justify-content: center; /* Center the items horizontally */
  align-items: center; /* Align vertically */
  gap: 24px; /* Space between items */
  margin: 24px 0; /* Space above and below */
  flex-wrap: wrap; /* Wrap on smaller screens */
}

/* Each social item */
.social__item {
  display: flex;
  flex-direction: column; /* Stack icon and username */
  align-items: center;
  text-align: center;
  transition: transform 0.2s; /* Smooth hover effect */
}

/* Hover effect on the whole item */
.social__item:hover {
  transform: translateY(-4px); /* Slight lift */
}

/* Icon styling */
.social__item .icon img {
  object-fit: cover; /* Keep icon proportions */
  transition: filter 0.2s; /* Smooth hover brightness */
}

/* Icon hover effect */
.social__item .icon img:hover {
  filter: brightness(1.2); /* Slightly brighten on hover */
}

/* Username styling */
.social__item .username a {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-color, #ffffff); /* Fallback to white if variable not set */
  text-decoration: none;
  transition: color 0.2s;
}

/* Username hover effect */
.social__item .username a:hover {
  color: var(--accent-color, #fa5252); /* Highlight color on hover */
}