.social-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10000;
}

/* Each icon (round background + image inside) */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;           /* default size */
  height: 45px;
  border-radius: 50%;
  background: #02FDD2;   /* round turquoise background */
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Icon image */
.social-icon img {
  width: 60%;   /* icon size relative to circle */
  height: 60%;
  object-fit: contain;
}

/* Hover effect (desktop only) */
.social-icon:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* --- Mobile Adaptation --- */
@media screen and (max-width: 768px) {
  .social-widget {
    bottom: 15px;    /* a bit closer to edge for small screens */
    right: 15px;
    gap: 8px;
  }

  .social-icon {
    width: 38px;     /* slightly smaller on mobile */
    height: 38px;
  }

  .social-icon img {
    width: 55%;
    height: 55%;
  }
}