.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg fill='black' height='32' viewBox='0 0 24 24' width='32' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") 
              no-repeat right 0.75rem center/24px 24px;
  padding-right: 2.8rem;
  transition: background-position 0.3s ease; /* smooth movement */
}

/* On focus (click), move arrow upward */
.custom-select:focus {
  background-position: right 0.75rem top 0.6rem;
}