/* 🔁 Base button style for all buttons */
.learn-more-button,
.learn-more-purple,
.learn-more-teal,
.learn-more-tritanopia,
.learn-more-brown-tone,
.learn-more-dark-grayish-blue,
.learn-more-red,
.learn-more-yellow,
.learn-more-soft-yellow-beige,
.learn-more-peach,
.learn-more-pink,
.learn-more-dark-vanilla,
.learn-more-white-coffee,
.learn-more-alabaster,
.learn-more-dirty-white,
.learn-more-pale-dark-vanilla,
.learn-more-laurel-green {
  display: inline-block;
  font-size: 14px;
  padding: 10px 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-align: center;
  min-width: 120px;
}

  /* 🔵 Blue */
  .learn-more-button {
    background-color: #007BFF;
  }
  .learn-more-button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
  }

  /* 🔵 Dark Grayish Blue */
  .learn-more-dark-grayish-blue {
    background-color: #7b778c;
  }
  .learn-more-dark-grayish-blue:hover {
    background-color: #a71d2a;
    transform: translateY(-1px);
  }

  /* 🔵 Brown Tone */
  .learn-more-brown-tone {
    background-color: #804000;
  }
  .learn-more-brown-tone:hover {
    background-color: #a71d2a;
    transform: translateY(-1px);
  }

  /* 🔵 Tritanopia */
  .learn-more-tritanopia {
    background-color: #884549;
  }
  .learn-more-tritanopia:hover {
    background-color: #a71d2a;
    transform: translateY(-1px);
  }

  /* 🔵 Teal */
  .learn-more-teal {
    background-color: #008080;
  }
  .learn-more-teal:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
  }

  /* 🟣 Purple */
  .learn-more-purple {
    background-color: #5a2a83;
  }
  .learn-more-purple:hover {
    background-color: #3f1f5d;
    transform: translateY(-1px);
  }

  /* 🔴 Red */
  .learn-more-red {
    background-color: #dc3545;
  }
  .learn-more-red:hover {
    background-color: #a71d2a;
    transform: translateY(-1px);
  }

  /* 🟡 Yellow */
  .learn-more-yellow {
    background-color: #f0ad4e;
    color: black; /* better contrast on yellow */
  }
  .learn-more-yellow:hover {
    background-color: #d18d27;
    transform: translateY(-1px);
  }

  /* 🌕 Soft Yellow-Beige */
  .learn-more-soft-yellow-beige {
    background-color: #E8E3BF;
    color: black;
  }
  .learn-more-soft-yellow-beige:hover {
    background-color: #d8d3a8;
    transform: translateY(-1px);
  }

  /* 🟠 Light Peach Tone */
  .learn-more-peach {
    background-color: #edbea6;
    color: black;
  }
  .learn-more-peach:hover {
    background-color: #e0ac94;
    transform: translateY(-1px);
  }

  /* 💗 Pink */
  .learn-more-pink {
    background-color: #f4a1c1;
    color: black;
  }
  .learn-more-pink:hover {
    background-color: #e887ad;
    transform: translateY(-1px);
  }

  /* 🍦 Dark Vanilla */
  .learn-more-dark-vanilla {
    background-color: #D2B9A9;
    color: black;
  }
  .learn-more-dark-vanilla:hover {
    background-color: #bfa896;
    transform: translateY(-1px);
  }

  /* ☕ White Coffee */
  .learn-more-white-coffee {
    background-color: #E4DBD5;
    color: black;
  }
  .learn-more-white-coffee:hover {
    background-color: #d4c9c2;
    transform: translateY(-1px);
  }

  /* 🕊️ Alabaster */
  .learn-more-alabaster {
    background-color: #F3F3E9;
    color: black;
  }
  .learn-more-alabaster:hover {
    background-color: #e0e0d4;
    transform: translateY(-1px);
  }

  /* 🤍 Dirty White */
  .learn-more-dirty-white {
    background-color: #E7E4C1;
    color: black;
  }
  .learn-more-dirty-white:hover {
    background-color: #d6d2ab;
    transform: translateY(-1px);
  }

  /* 🫒 Pale Dark Vanilla */
  .learn-more-pale-dark-vanilla {
    background-color: #CBD1A6;
    color: black;
  }
  .learn-more-pale-dark-vanilla:hover {
    background-color: #b9be95;
    transform: translateY(-1px);
  }

  /* 🌿 Laurel Green */
  .learn-more-laurel-green {
    background-color: #A7BBA0;
    color: black;
  }
  .learn-more-laurel-green:hover {
    background-color: #92a488;
    transform: translateY(-1px);
  }

/* 📱 Responsive behavior for all buttons */
@media (max-width: 600px) {
  .learn-more-button,
  .learn-more-purple,
  .learn-more-teal,
  .learn-more-tritanopia,
  .learn-more-brown-tone,
  .learn-more-dark-grayish-blue,
  .learn-more-red,
  .learn-more-yellow,
  .learn-more-soft-yellow-beige,
  .learn-more-peach,
  .learn-more-pink,
  .learn-more-dark-vanilla,
  .learn-more-white-coffee,
  .learn-more-alabaster,
  .learn-more-dirty-white,
  .learn-more-pale-dark-vanilla,
  .learn-more-laurel-green {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 14px 20px;
    margin-top: 8px;
    box-sizing: border-box;
  }
}