.project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    font-size: 24px;
    color: #ffffff;
    background: var(--icon-bg, #333333);
    box-shadow: 0 4px 8px var(--box-shadow-color, rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
    border: var(--project-border, 1px solid rgba(255, 255, 255, 0.3));
}

.project-icon i {
    font-size: 24px;
    color: #ffffff;
    background: var(--icon-bg, #333333);
    padding: 0;
    border-radius: 50%;
    box-shadow: none;
    transition: all 0.3s ease;
}

.project-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--box-shadow-color, rgba(0, 0, 0, 0.4));
    color: #ffffff;
    background: var(--icon-hover-bg, #666666);
}

.project-icon:hover i {
    color: #ffffff;
    background: var(--icon-hover-bg, #666666);
    box-shadow: none;
}

/* Custom colors for specific icons */
.fa-church {
    color: #ffffff !important;
}

.fa-shield-alt {
    color: #ffffff !important;
}

.fa-stopwatch {
    color: #ffffff !important;
}

.fa-users {
    color: #ffffff !important;
}

.fa-keyboard {
    color: #ffffff !important;
}

.fa-folder-open {
    color: #ffffff !important;
}