.arrow,
.rarr {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.btn:hover .arrow {
    transform: translateY(0.5rem);
}

.btn:hover .rarr {
    transform: translateX(0.5rem);
}

.btn-transparent {
    background-color: #ffffff44
}

.btn-transparent:hover {
    background-color: #ffffff55
}


.list-icon {
    background-color: #1e3a5f;
    transform: scale(1.1);
}

.icon:hover .list-icon::after {
    background-color: #f8fafc;
}

.icon-serviciu {
    height: 1.3rem;
    width: 1.3rem;
    display: inline-block;
    margin-bottom: -0.3rem;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    position: relative;
}

.icon-serviciu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: #7dd3fc;
    transition: background-color 0.2s ease-in-out;
}

.list-icon {
    height: 1.8rem;
    width: 1.8rem;
    background-color: #f4f5f7;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    position: relative;
}

.list-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: #1e3a5f;
    transition: background-color 0.2s ease-in-out;
}

.card:hover .list-icon {
    background-color: #1e3a5f;
    transform: scale(1.1);
}

.card:hover .list-icon::after {
    background-color: #f8fafc;
}

.benef-card {
    width: 90%;
    padding: 0.5rem;
    border-radius: 5%;
    border-width: 3px;
    transition: box-shadow 0.2s ease-in-out;
}

.pas {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card {
    transition: box-shadow 0.2s ease-in-out;
}


.card:hover {
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4) !important;
}

.card:hover .pas {
    transform: scale(1.3);
}

.benef-card i {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    border-radius: 50%;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.benef-card:hover i {
    color: #ffffff !important;
    background-color: #1e3a5f;
}