:root{

    /* Brand Colors */
    --primary:#71e0a3;
    --primary-dark:#545c57;
    --secondary:#14B8A6;

    /* Status Colors */
    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;
    --info:#89e18c;

    /* Background */
    --bg:#F8FAFC;
    --card:#FFFFFF;

    /* Text */
    --text:#1F2937;
    --text-light:#6B7280;

    /* Border */
    --border:#E5E7EB;

    /* Shadow */
    --shadow:
        0 10px 25px rgba(0,0,0,.08);

    /* Radius */

    --radius-sm:8px;
    --radius:16px;
    --radius-lg:25px;

    /* Transition */

    --transition:.3s ease;

    /* Max Width */

    --container:1280px;

}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb, 13, 110, 253), 0.1);
    color: var(--bs-primary, #81e7ab);
    margin-bottom: 1rem;
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(25, 135, 84, 0.1);   /* light green tint */
    color: #198754;                        /* Bootstrap "success" green */
    margin-bottom: 1rem;
    transition: background 0.3s, color 0.3s;
}

.service-card:hover .service-icon {
    background: #198754;
    color: #fff;
}