#feedbackSection {
  position: fixed;
  right: 53px;                /* Start from the right edge of the screen */
  bottom: 20%;             /* Center it vertically (adjust as needed) */
  transform: translateY(50%); /* Center adjustment */
  z-index: 1000;
}

.hover-area {
  width: 220px;            /* Width of the button */
  position: relative;      /* Position relative to the section */
}

/* Button styling */
#feedbackButton {
  display: flex;                        /* Use flexbox for alignment */
  align-items: center;                  /* Center items vertically */
  justify-content: center;              /* Center items horizontally */
  background-color: #303fa1;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, transform 0.3s;  /* Transition for transform */

  max-width: 100%;       /* Limits the button width to encourage wrapping */
  white-space: normal;    /* Allows text to wrap to the next line */
  position: relative;     /* Position for the button */
  transform: translateX(100%); /* Start fully hidden by translating 100% to the right */
}

/* Question mark styling */
.question-mark {
  font-size: 36px;           /* Make it larger */
  color: white;              /* Match button text color */
  margin-right: 12px;        /* Space between icon and text */
}

/* Slide in on hover */
#feedbackSection:hover #feedbackButton {
  transform: translateX(18%); /* Slide in to original position */
}

#feedbackButton:hover {
  background-color: #0d47a1; /* Darker blue on hover */
}