.value-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    border-radius: 10px;
    color: white;
    min-height: 100px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
    text-decoration: none;   /* remove underline on the whole card */
    margin-bottom: 1.5rem;   /* ← spacing when used outside the grid */
}

.value-box .icon {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    color: white;
}

.value-box .title {
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.9;
}

.value-box .value {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0.2rem 0;
}

.value-box .details {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.3;
}

.bg-blue    { background-color: #3d6a9e; color: white; }
.bg-navy    { background-color: #2d4a6b; color: white; }
.bg-teal    { background-color: #2e7873; color: white; }
.bg-green   { background-color: #3d7a52; color: white; }
.bg-olive   { background-color: #5c6e3f; color: white; }
.bg-amber   { background-color: #8a6523; color: white; }
.bg-orange  { background-color: #8f4e2e; color: white; }
.bg-red     { background-color: #8a3535; color: white; }
.bg-pink    { background-color: #7d3d5e; color: white; }
.bg-purple  { background-color: #533d7a; color: white; }
.bg-slate   { background-color: #3d4f63; color: white; }
.bg-grey    { background-color: #4a4f57; color: white; }