
.process-section {
    background: var(--bg-white);
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.section-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 30px;
    text-align: center;
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.step { text-align: center; position: relative; }
.step-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--color-service-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-icon i { font-size: 32px; color: var(--text-white); }
.step-title { font-size: 18px; font-weight: bold; color: var(--text-dark); margin-bottom: 10px; }
.step-desc { font-size: 14px; color: var(--text-medium); line-height: 1.6; }
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.service-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(74, 144, 226, 0.2);
}
.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--color-service-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); }
.service-icon i { font-size: 32px; color: var(--text-white); }
.service-icon img { 
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: contain;
}
.service-title { font-size: 18px; color: var(--text-dark); margin-bottom: 10px; font-weight: bold; }
.service-desc { font-size: 14px; color: var(--text-medium); line-height: 1.6; margin-bottom: 15px; }
.service-count { font-size: 13px; color: var(--text-light); }
.service-count span { color: var(--color-service-start); font-weight: bold; }
.service-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-white);
    border-radius: 12px;
}
.service-empty-state i { font-size: 48px; color: var(--icon-lighter); margin-bottom: 15px; }
.service-empty-state p { color: var(--text-light); font-size: 16px; }
