.black-btn {
  text-align: center;
  padding: 11px 26px;
  background: black;
  text-decoration: none;
  color: white;
  border-radius: 40px;
}

/* .green-btn {
  text-align: center;
  padding: 11px 26px;
  background: #0f8c78;
  text-decoration: none;
  color: rgb(255, 255, 255);
  border-radius: 10px;
  font-size: 18px;
  border: 3px solid white;
  transition: all 300ms linear;
}

.green-btn:hover {
  background: #fff;
  color: #0f8c78;
  border: 3px solid #0f8c78;
} */

.green-btn {
  position: relative; /* Necessary for absolute positioning of ::before */
  display: inline-block;
  text-align: center;
  padding: 11px 26px;
  background: #0f8c78;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  font-size: 18px;
  border: 2px solid white;
  overflow: hidden; /* Clips the internal animation */
  z-index: 1;
  transition: color 400ms ease;
}

.green-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0; /* Starts empty */
  height: 100%;
  background: #fff;
  z-index: -1; /* Slides behind the text */
  transition: width 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.green-btn:hover {
  color: #0f8c78; /* Text color changes when white background slides in */
  border-color: #0f8c78;
}

.green-btn:hover::before {
  width: 100%; /* Fills the button */
}

/* Optional: Active state for a "press" effect */
.green-btn:active {
  transform: scale(0.96);
  transition: transform 100ms ease;
}

.transparent-btn {
  text-align: center;
  padding: 11px 26px;
  background: transparent;
  text-decoration: none;
  color: #0f8c78;
  border: 1px solid #0f8c78;
  border-radius: 40px;
}