/* components */
.btn {
  padding: 10px 16px;
  border-radius: var(--border-radius);
  text-align: center;
  font-size: 1em;
  cursor: pointer;
}
.btn-primary {
  color: var(--color-light);
  text-decoration: none;
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  transition: 0.25s;
}
.btn-primary:hover {
  background-color: var(--color-blue-hover);
  border: 1px solid var(--color-blue-hover);
  transition: 0.25s;
  cursor: pointer;
}
.color-gray {
  color: var(--color-gray);
}
.color-blue {
  color: var(--color-blue);
}
.color-light {
  color: var(--color-light);
}
.color-dark {
  color: var(--color-dark);
}
.text-underline {
  text-decoration: underline;
}
.text-center {
  text-align: center;
}
.border-radius {
  border-radius: 7px;
}
.fs-0-75 {
  font-size: 0.75em;
}
.fs-1-5 {
  font-size: 1.5em;
}
.fs-2 {
  font-size: 2em;
}
.m-20 {
  margin: 20px;
}
.w-100 {
  width: 100%;
}
.mt-10 {
  margin-top: 10px;
}
.bt-10 {
  margin-bottom: 10px;
}
.box-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Adjust these values as needed */
  border-radius: 15px;
}