.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
        .service-card {
            background: var(--color-bg); border-radius: var(--radius-lg);
            overflow: hidden; transition: all 0.35s ease;
            box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-light);
        }
        .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); border-color: transparent; }

        .service-icon-area {
            height: 100px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px 8px 0 0;
        }
        .service-icon-img {
            width: 60px; height: 60px; object-fit: cover; display: block;
            border-radius: 12px;
        }
        .service-icon-img-wrapper {
            height: 100px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px 8px 0 0;
        }
        .service-icon-area svg { display: none; }

        .svc-1 .service-icon-area { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); }
        .svc-2 .service-icon-area { background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%); }
        .svc-3 .service-icon-area { background: linear-gradient(135deg, #2980b9 0%, #3498db 100%); }
        .svc-4 .service-icon-area { background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%); }
        .svc-5 .service-icon-area { background: linear-gradient(135deg, #d35400 0%, #e67e22 100%); }
        .svc-6 .service-icon-area { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); }
        .svc-7 .service-icon-area { background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%); }
        .svc-8 .service-icon-area { background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%); }

        .service-content { padding: var(--space-3); }
        .service-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text-dark); margin-bottom: 8px; }
        .service-desc { font-size: var(--font-size-sm); color: var(--color-text-light); line-height: 1.65; }

        .process-section {
            background: var(--color-bg-light); padding: var(--space-7) 0;
        }
        .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
        .process-step {
            text-align: center; padding: var(--space-3);
            background: var(--color-bg); border-radius: var(--radius);
        }
        .process-number {
            width: 48px; height: 48px;
            background: var(--color-primary);
            border-radius: 50%;
            color: white;
            font-size: var(--font-size-xl); font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto var(--space-2);
        }
        .process-step h3 {
            font-size: var(--font-size-base); font-weight: 600;
            color: var(--color-text-dark); margin-bottom: 8px;
        }
        .process-step p {
            font-size: var(--font-size-sm); color: var(--color-text-light);
        }

        
        
        
        
        
        
        
        
        
        

        @media (max-width: 1024px) {
            .services-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
        }
        
        }