.card-promise {
    background: rgba(var(--text-color), .05);
    border: none;
    border-radius: .5rem;
    height: 100%;
    padding: 0;
    text-align: center;
    max-width: 350px;
    margin: 0 auto;
}

.card-selection {
    border: 2px solid transparent;
    background-color: rgba(0, 0, 0, .05) !important;
    position: relative;
}

.card-selection:hover {
    border: 2px solid #333;
    background-color: #FFF;
}

.card-selection:hover .btn{
    color:#333 !important;
}

.card-selection.active {
    border: 2px solid rgb(var(--main-color));
    background-color: rgba(var(--main-color), .1) !important;
    color: rgb(var(--main-color));
}

.card-selection.active::after {
    content: "check_circle";
    position: absolute;
    right : .5rem;
    top: .5rem;
    font-family: 'Material Symbols Rounded', sans-serif !important;
    font-weight: normal;
    font-style: normal;
    font-size: 2rem;
    line-height: 2rem;
    font-variation-settings:
    'FILL' 1,
    'wght' 900,
    'GRAD' 0,
    'opsz' 24;
    color:  rgb(var(--support-color));
}

.card-selection .btn {
    background-color: rgba(0,0,0, .05);
    color: rgba(0,0,0, .5);
}

.card-selection .stroked svg {
    stroke-opacity: .5;
}

.card-selection.active .stroked svg, .card-selection:hover .stroked svg {
    stroke-opacity: 1;
}

.card-selection.active .stroked svg *{
    stroke: rgb(var(--main-color)) !important;
}

.nav .nav-link {
    color: rgb(var(--main-color));
    display: flex;
    align-items: center;
    background-color: #FFF;
    border: 2px solid rgb(var(--main-color));
    opacity: .75;
}

.nav .nav-link:hover{
    opacity: 1;
}

.nav .nav-link.active {
    opacity: 1;
    background-color: rgb(var(--main-color));
    color: #FFF;
}

.card-selection.active .btn {
    background-color: rgb(var(--main-color)) !important;
    color:#FFF !important;
}