.cta{
    width: 100%;
    text-align: left;
    background-color: var(--bs-pink);
    color: var(--bs-white);
    padding: 10px 40px 10px 20px;
    font-weight: 600;
    font-size: 17px;
    border: 2px solid var(--bs-pink);
    position: relative;
    display: inline-block;
}
a.cta:hover, a.cta:focus {
    border: 2px solid var(--bs-pink);
    background-color: var(--bs-white);
    color: var(--bs-pink);
}

.cta-arrow{
    border: solid var(--bs-white);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    position: absolute;
    top: 17px;
    right: 20px;
}
.cta:hover .cta-arrow, .cta:focus .cta-arrow {
    border-color: var(--bs-pink);
}

.cta.cta-outlined{
    background-color: transparent;
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary);
}
.cta.cta-outlined:hover, .cta.cta-outlined:focus{
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.cta.cta-outlined .cta-arrow{
    border-color: solid var(--bs-primary);
    top: 10px;
}
.cta.cta-outlined:hover .cta-arrow, .cta.cta-outlined:focus .cta-arrow{
    border-color: solid var(--bs-white);
}
.cta:hover, .cta:focus{
    color: var(--bs-white);
}
a{
    text-decoration: none;
    color: var(--bs-primary);
}
a:hover, a:focus{
    text-decoration: none;
}