<!-- Unique Back Arrow Button -->
<a href="javascript:history.back()" class="unique-back-arrow">
  <span></span> Back
</a>

<style>
/* Unique wrapper to avoid conflicts */
.unique-back-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgb(23,34,57);
  color: white;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-decoration: none;
  border-radius: 50px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.unique-back-arrow span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 3px solid white;
  border-left: 3px solid white;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

/* Hover effect: arrow slides left */
.unique-back-arrow:hover span {
  transform: rotate(-45deg) translateX(-4px);
}

/* Optional: subtle shadow on hover */
.unique-back-arrow:hover {
  background: rgb(245,164,37);
  color: rgb(23,34,57);
}
</style>
