/* Social Icons Styles */
.social-links {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-black);
  transition: all var(--transition-standard);
  border-radius: 50%;
  background-color: transparent;
}

.social-link:hover {
  color: var(--color-black);
  background-color: var(--color-gray-100);
}

.social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  transition: transform var(--transition-standard);
}

.social-link:hover svg {
  transform: scale(1.1);
}

/* Add hover effect for image elements inside social links */
.social-link img {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-standard);
}

.social-link:hover img {
  transform: scale(1.1);
}

/* Adjust icons for mobile */
@media (max-width: 480px) {
  .social-links {
    gap: var(--spacing-4);
    justify-content: center;
    width: 100%;
  }

  .social-link {
    width: auto;
    height: auto;
    padding: var(--spacing-1);
  }

  .social-link svg {
    width: 18px;
    height: 18px;
  }
  
  .social-link img {
    width: 18px;
    height: 18px;
  }
}