/* Floating Buttons Container */
.floating-buttons-container {
    position: fixed; /* Keep it fixed on screen */
    bottom: 10px; /* 10px from the bottom */
    right: 10px; /* 10px from the right */
    z-index: 999; /* Ensure it's above most other content */
    display: flex; /* Use flexbox for vertical stacking */
    flex-direction: column; /* Stack items vertically */
    gap: 5px; /* Space between buttons */
    padding: 5px; /* Padding around the buttons */
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background for the container */
    border-radius: 18px; /* Rounded corners for the container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow */
}

/* Individual Button Styling (Base) */
.floating-button {
    display: flex; /* Use flexbox to align icon and text */
    align-items: center; /* Vertically center items */
    justify-content: flex-start; /* Align icon to the left */
    width: 30px; /* Default width for laptop (icon only) */
    height: 30px; /* Fixed height for the button */
    overflow: hidden; /* Hide text initially */
    border-radius: 50%; /* Circular by default */
    transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.3s ease;
    position: relative; /* For positioning children */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for buttons */
    background-color: transparent; /* Ensure button background is transparent */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color */
}

/* Common Hover Effect for All Buttons (Lift and Shadow) */
.floating-button:hover {
    transform: translateY(-3px); /* Slight lift effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* More pronounced shadow on hover */
}

/* Styling for the Icon Image */
.floating-button img {
    width: 30px; /* Fixed width for the icon */
    height: 30px; /* Fixed height for the icon */
    object-fit: contain; /* Ensure image fits within its bounds */
    flex-shrink: 0; /* Prevent image from shrinking */
}

/* Styling for the Text Label */
.floating-button .button-text {
    white-space: nowrap; /* Prevent text from wrapping */
    opacity: 0; /* Hidden by default */
    transform: translateX(5px); /* Slightly move text to the right initially */
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-left: 5px; /* Space between icon and text */
    font-family: Arial, sans-serif; /* Example font, adjust as needed */
    font-size: 12px; /* Example font size, adjust as needed */
    color: #333; /* Text color */
}

/* Social Button Specific Hover Effect (Expand and Reveal Text) */
.social-button:hover {
    width: 100px; /* Expanded width for laptop (adjust based on text length) */
    border-radius: 15px; /* Pill shape on hover */
    background-color: rgba(240, 240, 240, 0.9); /* Light background on hover */
}

.social-button:hover .button-text {
    opacity: 1; /* Make text visible */
    transform: translateX(0); /* Slide text into view */
}

/* Go to Top Button Specific Styling */
#goTopButton {
    background-color: #f0f0f0; /* Light background for go-top button */
    border: none; /* Remove default button border */
    padding: 0; /* Remove default padding */
    justify-content: center; /* Center the icon within the button */
}

/* Responsive adjustments for mobile screens */
@media only screen and (max-width: 580px) {
    .floating-buttons-container {
        bottom: 5px;
        right: 5px;
        gap: 4px;
        padding: 4px;
        border-radius: 6px;
    }
    .floating-button {
        width: 25px; /* Smaller default width for mobile */
        height: 25px; /* Smaller height for mobile */
    }
    .floating-button img {
        width: 25px; /* Smaller icon size for mobile */
        height: 25px; /* Smaller icon size for mobile */
    }
    .floating-button .button-text {
        font-size: 10px; /* Smaller font size for mobile */
        margin-left: 3px; /* Adjust spacing for mobile */
    }
    .social-button:hover {
        width: 85px; /* Adjusted expanded width for mobile (adjust based on text length) */
        border-radius: 12px; /* Adjusted pill shape for mobile */
    }
}