.values-section { width:100%; margin-bottom:120px; padding-left:0; padding-right:0; }

.values-grid { display:grid; width: 100%; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .values-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .values-grid { grid-template-columns:repeat(3,1fr); gap:36px; } }

.value-card { 
    min-height:243px; 
    border-radius:3px; 
    background:#f5f6f7; 
    border:none; 
    padding:24px; 
    display:flex; 
    flex-direction:column; 
    justify-content:space-between; 
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
@media (min-width:768px){ .value-card { padding:28px; } }
@media (min-width:1024px){ .value-card { padding:30px; } }

/* Pseudo-element for gradient background transition */
.value-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0085d2 0%, #00abec 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.value-card.is-active, 
.value-card:hover { 
    color:#ffffff; 
    transform: translateY(-10px) scale(1.02);
}

.value-card.is-active::before,
.value-card:hover::before {
    opacity: 1;
}

/* Ensure content sits above pseudo-element */
.value-card > * {
    position: relative;
    z-index: 2;
}

/* Text color transitions */
.value-card .value-title, 
.value-card .value-text,
.value-card .heading-h5, 
.value-card .body-small, 
.value-card .font-heading, 
.value-card .font-body { 
    transition: color 0.3s ease; 
}

.value-card.is-active .value-title, .value-card:hover .value-title { color:#ffffff; }
.value-card.is-active .value-text, .value-card:hover .value-text { color:#ffffff; }
.value-card.is-active .heading-h5, .value-card:hover .heading-h5 { color:#ffffff; }
.value-card.is-active .body-small, .value-card:hover .body-small { color:#ffffff; }
.value-card.is-active .font-heading, .value-card:hover .font-heading { color:#ffffff; }
.value-card.is-active .font-body, .value-card:hover .font-body { color:#ffffff; }

/* SVG transitions */
.value-card svg * { 
    fill:#0085d2; 
    stroke:#0085d2; 
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.value-card.is-active svg *, .value-card:hover svg * { 
    fill:#ffffff !important; 
    stroke:#ffffff !important; 
}

.value-title { font-weight:600; font-size:24px; line-height:1.2; color: #0085d2; }
@media (min-width:768px){ .value-title { font-size:30px; } }
@media (min-width:1024px){ .value-title { font-size:30px; } }

.values-section .value-text { font-size:18px; line-height:1.6; color:#000000; font-weight:500; }
@media (min-width:768px){ .values-section .value-text { font-size:20px; } }
@media (min-width:1024px){ .values-section .value-text { font-size:22px; } }

.benefits-compact .value-card { min-height:200px; }
.benefits-compact .value-text { font-weight:600; font-size:25px; }
@media (min-width:768px){ .benefits-compact .value-text { font-size:22px; } }
@media (min-width:1024px){ .benefits-compact .value-text { font-size:27px; } }