/* =========================
   BUTTON BASE
   ========================= */

[class^="image_and_text_"] .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  background-color: #d52128; /* default red */
  color: #fff;
  border: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* =========================
   SOLID BUTTONS
   ========================= */

[class^="image_and_text_"] .button.red {
  background-color: #d52128;
}

[class^="image_and_text_"] .button.red:hover {
  background-color: #b81c22;
}

[class^="image_and_text_"] .button.white {
  background-color: #ffffff;
  color: #000;
}

[class^="image_and_text_"] .button.white:hover {
  background-color: #f2f2f2;
}

/* =========================
   OUTLINE BUTTONS
   ========================= */

[class^="image_and_text_"] .button.white_outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

[class^="image_and_text_"] .button.white_outline:hover {
  background: #fff;
  color: #000;
}

[class^="image_and_text_"] .button.dark_outline {
  background: transparent;
  border: 2px solid #000;
  color: #000;
}

[class^="image_and_text_"] .button.dark_outline:hover {
  background: #000;
  color: #fff;
}

/* =========================
   GOLD (SOLID + OUTLINE)
   ========================= */

[class^="image_and_text_"] .button.gold {
  background-color: #AF8561;
  color: #fff;
  border: 1px solid #AF8561;
}

[class^="image_and_text_"] .button.gold:hover {
  background-color: transparent;
  color:#AF8561;
  border: border: 1px solid #AF8561;
}

[class^="image_and_text_"] .button.gold_outline {
  background: transparent;
  border: 1px solid #AF8561;
  color: #86654B;
}

[class^="image_and_text_"] .button.gold_outline:hover {
  background: #86654B;
  color: #fff;
  border: 1px solid #AF8561;
}

/* =========================
   TAUPE (SOLID + OUTLINE)
   ========================= */

[class^="image_and_text_"] .button.taupe {
  background-color: #D9D7CE;
  color: #3d3d3c;
}

[class^="image_and_text_"] .button.taupe:hover {
    background-color: #abaaa4;
    color: #FFF;
}

[class^="image_and_text_"] .button.taupe_outline {
  background: transparent;
  border: 2px solid #8b7e74;
  color: #8b7e74;
}

[class^="image_and_text_"] .button.taupe_outline:hover {
  background: #8b7e74;
  color: #fff;
}