.custom-cta {
    font-family: var(--heading-font);
    font-weight: 500;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 5px;
    transition: 0.5s;
    margin: 10px;
    color: #312f2f;
    background-color: #1173B8;
}


.custom-cta:hover {
    background-color: 
color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}