/* Base button style */
.btn {
  padding: 10px 10px;
  border: none;
  border-radius: 8px;
  /* color: white; */
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-decoration:none;
}

/* Light text color fallback */
.light-text {
  color: #333;
}

/* Pink - #F2AEBB */
.btn-pink {
  background-color: #F2AEBB;
  color: #333;
}
.btn-pink:hover {
  background-color: #e48c9d;
  transform: scale(1.05);
}

/* Hot Pink - #F288AF */
.btn-hotpink {
  background-color: #F288AF;
  color: #333;
}
.btn-hotpink:hover {
  background-color: #dc6b95;
  transform: scale(1.05);
}

/* Light Purple - #F2D0F0 */
.btn-purple {
  background-color: #F2D0F0;
  color: #333;
}
.btn-purple:hover {
  background-color: #dfb0dd;
  transform: scale(1.05);
}

/* Blue - #048ABF */
.btn-blue {
  background-color: #048ABF;
  color: white;
}
.btn-blue:hover {
  background-color: #036f99;
  transform: scale(1.05);
}

/* Beige - #F2D2B6 */
.btn-beige {
  background-color: #F2D2B6;
  color: #333;
}
.btn-beige:hover {
  background-color: #e1bda2;
  transform: scale(1.05);
}

/* Gray - #c1cace */
.btn-gray {
  background-color: #c1cace;
  color: #333;
}
.btn-gray:hover {
  background-color: #aeb9be;
  transform: scale(1.05);
}

/* Slate Blue - #719dad */
.btn-slate {
  background-color: #719dad;
  color: white;
}
.btn-slate:hover {
  background-color: #5c8391;
  transform: scale(1.05);
}


/* Base outline button */
.btn-outline {
  padding: 5px 10px;
  border: 2px solid;
  border-radius: 8px;
  background-color: transparent;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration:none;
}

/* Pink - #F2AEBB */
.btn-outline-pink {
  border-color: #F2AEBB;
  color: #333;
}
.btn-outline-pink:hover {
  background-color: #F2AEBB;
  color: #333;
}

/* Hot Pink - #F288AF */
.btn-outline-hotpink {
  border-color: #F288AF;
  color: #F288AF;
}
.btn-outline-hotpink:hover {
  background-color: #F288AF;
  color: #333;
}

/* Light Purple - #F2D0F0 */
.btn-outline-purple {
  border-color: #F2D0F0;
  color: #F2D0F0;
}
.btn-outline-purple:hover {
  background-color: #F2D0F0;
  color: #333;
}

/* Blue - #048ABF */
.btn-outline-blue {
  border-color: #048ABF;
  color: #048ABF;
}
.btn-outline-blue:hover {
  background-color: #048ABF;
  color: white;
}

/* Beige - #F2D2B6 */
.btn-outline-beige {
  border-color: #F2D2B6;
  color: #F2D2B6;
}
.btn-outline-beige:hover {
  background-color: #F2D2B6;
  color: #333;
}

/* Gray - #c1cace */
.btn-outline-gray {
  border-color: #c1cace;
  color: #c1cace;
}
.btn-outline-gray:hover {
  background-color: #c1cace;
  color: #333;
}

/* Slate Blue - #719dad */
.btn-outline-slate {
  border-color: #719dad;
  color: #719dad;
}
.btn-outline-slate:hover {
  background-color: #719dad;
  color: white;
}

/* Slate Blue - #719dad */
.btn-outline-red {
  border-color: #c25d50;
  color: #c25d50;
}
.btn-outline-red:hover {
  background-color: #c25d50;
  color: white;
}