/* Wrapper: layout only */
.box-3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base button */
.btn {
  position: relative;
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  font-family: "Open Sans Condensed", Arial, sans-serif;
  font-weight: 400;
  font-size: 16pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;

  /* Button background */
  background-color: #66A182;
  overflow: hidden;
}

/* Button Three */
.btn-three {
  position: relative;
  padding-left: 56px; /* space for icon */
  transition: all 0.5s ease;
  text-decoration: none;
  color: #ffffff;
}

/* Hover overlay (keep on ::before) */
.btn-three::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255,255,255,0.15);
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-three:hover::before {
  opacity: 0;
  transform: scale(0.5);
}

/* ICON (move to ::after) — slide IN on hover */
.btn-three::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 50px;
  height: 50px;

  background: url("https://texasagriculture.gov/Portals/0/Skins/TDA/images/star_fund_cc_icon.png")
              no-repeat center center;
  background-size: contain;
  pointer-events: none;

  /* start hidden + slightly offscreen-left */
  opacity: 0;
  transform: translate(-14px, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;

  /* above overlay, below text */
  z-index: 2;
}

/* Slide icon IN on hover */
.btn-three:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Text stays on top */
.btn-three span {
  position: relative;
  z-index: 3;

  display: inline-block;
  width: 100%;
  text-align: center;

  color: #ffffff !important;
  font-size: 16pt;
  font-weight: 700;
  line-height: 50px; /* MUST match button height */
  margin: 0;
  padding: 0;
}
/* Width modifiers */
.btn--narrow { width: 200px; }
.btn--medium { width: 250px; } /* current default */
.btn--wide   { width: 320px; }
.btn--full   { width: 100%; }