/* Container for the floating social buttons */
.social-float-container {
  position: fixed;
  bottom: 104px;
  right: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* Base styles for both floating buttons */
.float-btn,
.whatsapp-float {
  width: 50px;
  height: 50px;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* WhatsApp Specific Styling */
.whatsapp-float,
.whatsapp-btn {
  background-color: #25d366;
}

.whatsapp-float:hover,
.whatsapp-btn:hover {
  background-color: #20ba5a;
}

/* Instagram Specific Styling (Instagram's signature gradient) */
.instagram-btn {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #df3456 45%, #d6249f 60%, #285AEB 90%);
}

.instagram-btn:hover {
  opacity: 0.92;
}

/* Hover effects for all buttons */
.float-btn:hover,
.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Icon Sizes */
.whatsapp-icon,
.social-icon {
  width: 28px;
  height: 28px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .social-float-container {
    bottom: 116px;
    right: 46px;
    gap: 10px;
  }
  
  .float-btn,
  .whatsapp-float {
    width: 44px;
    height: 44px;
  }
  
  .whatsapp-icon,
  .social-icon {
    width: 24px;
    height: 24px;
  }
}