.centered-content {
    text-align: center; /* For inline content */
    margin: 0 auto; /* For block-level elements */
    
  /* Or specific width */
    height: inherit;
  }
  /* Or for full vertical/horizontal centering */
  .full-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* 1. The Default State (Not selected) */
.btn-custom {
  color: #555;
  border-color: #555;
  background-color: transparent;
}

/* 2. The Hover State */
.btn-custom:hover {
  background-color: #074e94 !important;
  color: #ffffff !important; /* Changed to white for better contrast with dark blue */
  border-color: #074e94 !important;
}

/* Add this to prevent the "white border" or "ghost" effect when clicking */
.btn-custom:active, 
.btn-custom:focus {
  background-color: #053a6f !important;
  border-color: #053a6f !important;
  color: white !important;
  box-shadow: none !important; /* Removes the blue Bootstrap glow */
}

/* 3. The Checked (Active) State */
/* We target the label that comes immediately after a checked input */
.btn-check:checked + .btn-custom {
  background-color: #d4af37 !important; /* Gold color */
  border-color: #d4af37 !important;
  color: white !important;
}

/* 4. The Focus (Outline) State */
.btn-check:focus + .btn-custom {
  box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}