.bg-maroon {
    background-color: #800020;
}

.kraken-red-text {
  color: #800020;
}

.btn-maroon {
  background-color: #800020;
  border-color: #800020; /* Ensures the border matches the background */
  color: #ffffff; /* Sets text color to white for readability */
}

.btn-maroon:hover {
  background-color: #66001a; /* A slightly darker shade for the hover effect */
  border-color: #66001a;
  color: #ffffff; /* Sets text color to white for readability */
}

.btn-maroon:focus {
  box-shadow: 0 0 0 0.25rem rgba(128, 0, 32, 0.5); /* Adds a focus ring with transparency */
  color: #ffffff; /* Sets text color to white for readability */
}

/* Optional: Add active state styles */
.btn-maroon:active {
  background-color: #4d0014 !important;
  border-color: #4d0014 !important;
  color: #ffffff; /* Sets text color to white for readability */
}