/* ========================================
   Services Section
   ======================================== */
/* Reuses .home-block, .impact-grid, .impact-card from global.css */

.process-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--slate-gray);
    text-align: justify;
}

/* Services Panel - Matches Home Panel */
.services-panel {
    width: 78%;
    height: 78%;
    background: linear-gradient(145deg, var(--pure-white), var(--light-cream));
    border-radius: 16px;
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.1),
        0 4px 12px -4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(226, 232, 240, 0.6);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 44px 34px;
    gap: 32px;
}

/* Custom Scrollbar */
.services-panel::-webkit-scrollbar {
    width: 8px;
}

.services-panel::-webkit-scrollbar-track {
    background: var(--lighter-gray);
    border-radius: 4px;
}

.services-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple));
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .services-panel {
        width: 90%;
        height: 82%;
        padding: 28px 24px 24px;
        gap: 26px;
    }
}

@media (max-width: 480px) {
    .services-panel {
        width: 95%;
        height: 85%; /* Slightly taller on mobile */
        padding: 20px 16px 18px;
        gap: 22px;
    }
}