:root {
  --color-primary: #1a2742;
  --color-secondary: #293754;
  --color-info: #fbe6ff;
  --color-light: #F3F4F4;

  --bs-primary-rgb: 26, 39, 66;
  --bs-secondary-rgb: 41, 55, 84;
  --bs-info-rgb: 251, 230, 238;
  --bs-light-rgb: 243, 244, 244;

  /* Map them to Bootstrap's internal variables */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-info: var(--color-info);
  --bs-light: var(--color-light);
}

.navbar-custom {
    background-color: #1a2742;
    color: #fbe6ff;
}

.events-join-card {
    position: static;
}

.profile-avatar {
    width: 144px;
    height: 144px;
    border-radius: 50%;
    background: #fbe6ff;
    color: #1a2742;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 0.75rem 1.75rem rgba(26, 39, 66, 0.18);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 992px) {
    .events-join-card {
        position: sticky;
        top: 96px;
        z-index: 1;
    }
}