/* --- Floating Action Buttons CSS --- */
.floating-action-buttons {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between buttons */
  align-items: flex-end;
}

/* Common styles for all buttons inside the container */
.floating-action-buttons .fab {
  height: 55px;
  background-color: #252525;
  color: #ffffff;
  border-radius: 27.5px;
  display: flex;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 55px;
}

.floating-action-buttons .fab-icon {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  z-index: 2;
}

.floating-action-buttons .fab-text {
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  padding-right: 20px;
  z-index: 1;
  font-size: 15px;
}

/* Hover effect expanding the button */
.floating-action-buttons .fab:hover {
  width: auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.floating-action-buttons .fab:hover .fab-text {
  opacity: 1;
  transform: translateX(0);
}

/* Specific background colors for each button */
.floating-action-buttons .fab-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E); /* WhatsApp Gradient */
}

.floating-action-buttons .fab-call {
  background: linear-gradient(135deg, #34B7F1, #0088CC); /* Call Gradient */
}

.floating-action-buttons .fab-consultation {
  background: linear-gradient(135deg, #4b5267, #212529); /* Consultation Dark Gradient */
}

/* Guide Book Button */
.floating-action-buttons .fab-guide {
  background: linear-gradient(135deg, #ff9800, #e65100); /* Distinct orange gradient */
  animation: pulse-guide 2s infinite;
}
@keyframes pulse-guide {
  0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(255, 152, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}

/* Pause animation on hover to allow expansion to be smooth */
.floating-action-buttons .fab-guide:hover {
  animation: none;
}

/* Your original scroll-up button */
.floating-action-buttons .ak-scrollup {
  width: 55px;
  height: 55px;
  background-color: #555555; /* A neutral dark grey */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.floating-action-buttons .ak-scrollup:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* SVG Icon styling */
.floating-action-buttons svg {
  fill: currentColor;
}
@media (max-width: 600px) {
  .floating-action-buttons {
    bottom: 16px;
    right: 16px;
    gap: 13px;
  }
  .floating-action-buttons .fab {
    height: 45px;
    border-radius: 22.5px;
    width: 45px;
  }
  .floating-action-buttons .fab-icon {
    width: 45px;
    height: 45px;
  }
  .floating-action-buttons .ak-scrollup {
    width: 45px;
    height: 45px;
  }
}