<style>
.row-tight > [class*='col-'] {
    padding-left: 6px;
    padding-right: 6px;
}

.service-pill {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 30px;
    padding: 6px 12px 6px 6px;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    height: 100%;
}

.service-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.service-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-left: 10px;
    line-height: 1.2;
}

.icon-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    transition: transform 0.25s ease;
}

.service-pill:hover .icon-circle {
    transform: scale(1.1);
}

/* Vibrant Color Variants */
.bg-blue   { background: linear-gradient(135deg, #2196F3, #1E88E5); }
.bg-teal   { background: linear-gradient(135deg, #00BFA5, #00897B); }
.bg-purple { background: linear-gradient(135deg, #AB47BC, #8E24AA); }
.bg-amber  { background: linear-gradient(135deg, #FFB300, #FB8C00); }
.bg-green  { background: linear-gradient(135deg, #66BB6A, #43A047); }
.bg-rose   { background: linear-gradient(135deg, #EC407A, #D81B60); }
.bg-cyan   { background: linear-gradient(135deg, #26C6DA, #00ACC1); }
.bg-orange { background: linear-gradient(135deg, #FF7043, #F4511E); }

/* Soft Subtle Borders & Tints on Hover */
.border-blue:hover   { border-color: #2196F3; background-color: #f4f9ff; }
.border-teal:hover   { border-color: #00BFA5; background-color: #f0fdfb; }
.border-purple:hover { border-color: #AB47BC; background-color: #fbf4fc; }
.border-amber:hover  { border-color: #FFB300; background-color: #fffdf5; }
.border-green:hover  { border-color: #66BB6A; background-color: #f4fbf4; }
.border-rose:hover   { border-color: #EC407A; background-color: #fdf4f7; }
.border-cyan:hover   { border-color: #26C6DA; background-color: #f2fcfd; }
.border-orange:hover { border-color: #FF7043; background-color: #fff6f4; }
</style>