.button-wrapper2 {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
  border: 2px solid transparent;
  border-bottom: 3px solid #fff;
  transition: all 0.3s ease;
}

.custom-button2 {
  background-color: #fff;         /* Button background */
  color: #000;                    /* Button text color */
  padding: 12px 24px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  z-index: 1;
  transition: background-color 0.3s ease;
}

.button-wrapper2:hover {
  background-color: #000;         /* Wrapper background on hover */
  border: 2px solid #000;         /* Border becomes visible on hover */
  padding-bottom: 0;              /* Adjust padding to avoid layout shift */
  margin-bottom: 5px;             /* Compensate for padding change */
}

.button-wrapper2:hover .custom-button {
  background-color: #000;         /* Change button background on hover */
  color: #fff;                    /* Optional: Invert text for contrast */
}