.sticky-component {
    opacity: 1;
    visibility: hidden;
    /* Hidden by default */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    padding: 10px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    /* Make the font bold */
    display: flex;
    gap: 10px;
    z-index: 9999;
}

.sticky-component.show {
    visibility: visible;
    /* Immediately visible when the class 'show' is added */
}

.sticky-component.hide {
    visibility: hidden;
    /* Immediately hidden when the class 'hide' is added */
}

.sticky-component button {
    padding: 10px 20px;
    background-color: rgba(43, 78, 119, 0.9);
    /* Dark Blue (#2B4E77) with 90% opacity */
    color: white;
    /* White text */
    font-weight: bold;
    /* Make button text bold */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.sticky-component button:hover {
    background-color: rgba(43, 78, 119, 0.7);
    /* Slightly more transparent on hover */
}