/* Contact button */
.btn-contact {
    display: inline-block;
    margin: 20px 0;
}

/* Button Link */
.btn-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary); /* Set a nice base color */
    color: var(--color-white);
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px; /* Rounded corners */
    text-decoration: none;
    box-shadow: 0 4px 8px var(--color-shadow); /* Soft shadow */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    text-transform: uppercase; /* Uppercase text for a modern look */
}

/* Icon styling */
.btn-contact a ion-icon {
    font-size: 1.4rem; /* Make the icon size larger */
    margin-right: 8px; /* Add some spacing between the icon and text */
    transition: transform 0.3s ease; /* Smooth icon transition */
}

/* Text styling */
.btn-contact a span {
    font-size: 1rem;
}

/* Hover and focus effects */
.btn-contact a:hover,
.btn-contact a:focus {
    background-color: var(--color-quaternary); /* Highlight color */
    color: var(--color-accent-primary); /* Text stays white */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 12px var(--color-shadow-strong); /* Stronger shadow on hover */
}

/* Icon hover effect */
.btn-contact a:hover ion-icon,
.btn-contact a:focus ion-icon {
    transform: scale(1.1); /* Slight zoom effect on hover */
}


/* Card */
.card {
    border: 1px solid var(--color-offwhite);
    border-radius: 10px;
    box-shadow: 0 4px 6px var(--color-shadow);
}

.card-body {
    padding: 20px;
}

.card-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
}

.committee-card, .admin-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--color-offwhite);
    padding: 10px;
    cursor: pointer;
}

.committee-card:hover, .admin-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px var(--color-shadow);
}

.committee-card h5, .admin-card h5 {
    font-size: 1.25rem;
}

.committee-card p, .admin-card p {
    font-size: 0.875rem;
}

/* User Dropdown */
.user-dropdown .dropdown-toggle {
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.user-dropdown .dropdown-toggle:hover {
  background-color: var(--color-shadow);
  border-radius: 5px;
}

.user-dropdown-menu {
  width: 250px;
  padding: 0.5rem 0;
  color: var(--color-white);
}

.user-dropdown-menu img {
  border: 2px solid var(--color-offwhite);
}

.user-dropdown-menu .dropdown-item:hover {
  background-color: var(--color-primary);
}

/* Image Wrapper */
.image-wrapper {
    position: relative;
    display: inline-block;
}

.extra-image-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: var(--color-shadow-strong);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 999px;
    line-height: 1;
    z-index: 10;
    pointer-events: none;
}