.value-card{--card-h:250px;background-color:#00274d;border-radius:16px;box-shadow:0 0 20px rgba(0,0,0,.2);color:#fff;cursor:pointer;height:250px;margin:0 auto;max-width:300px;overflow:hidden;position:relative;transition:transform .3s ease;width:100%}.value-card-inner{height:100%;position:relative;width:100%}.value-card-top{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;padding:20px;position:absolute;z-index:2}.value-card-icon{height:64px;margin-bottom:12px;object-fit:contain;transition:transform .5s ease,opacity .5s ease;width:64px}.value-card-title{color:#fff;font-size:1.2rem;font-weight:600;hyphens:auto;line-height:1.2;margin:0;padding-inline:20px;text-align:center;transform:translateY(0);transition:transform .5s ease;width:100%;word-break:break-word}.value-card-bottom{background:#fff;border-top:3px solid #00274d;bottom:-50%;color:#00274d;height:50%;left:0;opacity:0;padding:20px;position:absolute;text-align:center;transition:bottom .5s ease,opacity .4s ease;width:100%;z-index:1}.value-card-detail{position:relative;top:10px}.value-card.active .value-card-bottom,.value-card:hover .value-card-bottom{bottom:0;opacity:1}.value-card.active .value-card-icon,.value-card:hover .value-card-icon{opacity:0;transform:translateY(calc(var(--card-h)*-.5))}.value-card.active .value-card-title,.value-card:hover .value-card-title{transform:translateY(calc(var(--card-h)*-.25))}