.social-media-card {
  background: var(--gray-white, #ffffff);
  border-radius: 4px;
  padding: 12px;
  display: inline-flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0px 12px 64px 0px rgba(28, 25, 25, 0.12);
  height: fit-content;
  width: fit-content;
}

.frame-337, .frame-334, .frame-336, .frame-335 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.social-media-card2 {
  background: #ffffff;
  border-radius: 4px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.social-media-card2:hover {
  background: #a53dff;
}

.social-media-card2 img {
  filter: brightness(0) saturate(100%) invert(39%) sepia(100%) saturate(7500%) hue-rotate(270deg) brightness(100%) contrast(100%);
  transition: filter 0.3s ease;
}

.social-media-card2:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.social-media-card3 {
  background: #ffffff;
  border-radius: 4px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0px 12px 64px 0px rgba(28, 25, 25, 0.12);
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.social-media-card3:hover {
  background: #a53dff;
}

.social-media-card3 img {
  filter: brightness(0) saturate(100%) invert(39%) sepia(100%) saturate(7500%) hue-rotate(270deg) brightness(100%) contrast(100%);
  transition: filter 0.3s ease;
}

.social-media-card3:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.gmail-svgrepo-com-1 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
  overflow: hidden;
}

.social, .social2 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
  overflow: hidden;
}

.whatsapp-svgrepo-com-1 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
  overflow: hidden;
}