/* --- MODAL STYLES --- */
.modal-dialog { 
  margin: 0.5rem; 
}

@media (min-width: 576px) {
  .modal-dialog { 
    max-width: 450px; 
    margin: 1.75rem auto; 
  } 
}

.modal-title { 
  font-size: 1rem; 
  display: flex; 
  align-items: center; 
  margin-top: 0;
}

.modal-title i { 
  margin-right: 0.75rem; 
  font-size: 1.8rem; 
  line-height: 1; 
}

.pill-button-container { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 0.5rem; 
}

.pill-button { 
  border-radius: 50rem; 
  border: 1px solid transparent; 
  background-color: #000; color: #fff; 
  font-family: 'Jost', sans-serif; 
  text-transform: uppercase; 
  font-size: 0.9rem; 
  font-weight: 300;
  padding: 0.5rem 1.25rem; 
  transition: all 0.2s ease-in-out; 
  text-decoration: none; 
  text-align: center;
}

.pill-button:hover { 
  border-color: #fff; 
}

.pill-button:active, .pill-button.active { 
  background-color: #fff; 
  color: #000; 
  border-color: #000; 
}
 
a.pill-button {
  color: white !important;
  text-decoration: none;
}

a.pill-button:hover {
  color: white !important;
  font-weight: 400 !important;
  background-color: #4f4f4f;
  opacity: 0.8;
  transform: translateY(-3px); /* Move the button up slightly */
  box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Add a subtle shadow */
  text-decoration: none !important;
}

a.pill-button:visited{
  color: white;
  text-decoration: none;
}

a.pill-button:active {
  color: white;
  text-decoration: underline;
}