.kpc-appointment{
    --kpc-btn-height: 140px;
    --kpc-circle-size: 140px;
    --kpc-circle-offset-x: 0px;
    --kpc-text-shift: 170px;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--kpc-btn-height);
    text-decoration: none;
}

.kpc-appointment__text{
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--kpc-btn-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 999px;
    transition: transform .55s cubic-bezier(.65,0,.35,1), color .25s ease, background-color .25s ease;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

.kpc-appointment__circle{
    position: absolute;
    right: var(--kpc-circle-offset-x);
    top: 50%;
    width: var(--kpc-circle-size);
    height: var(--kpc-circle-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-50%) scale(0);
    transform-origin: center;
    transition: transform .45s cubic-bezier(.65,0,.35,1), opacity .3s ease, background-color .25s ease;
}

.kpc-appointment__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color .25s ease, transform .25s ease;
}

.kpc-appointment__icon i,
.kpc-appointment__icon svg{
    width: 1em;
    height: 1em;
    display: block;
}

.kpc-appointment:hover .kpc-appointment__text{
    transform: translateX(calc(-1 * var(--kpc-text-shift)));
}

.kpc-appointment:hover .kpc-appointment__circle{
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.kpc-appointment:hover .kpc-appointment__icon{
    transform: translateX(2px);
}

@media (max-width: 1024px){
    .kpc-appointment{
        --kpc-btn-height: 110px;
        --kpc-circle-size: 110px;
        --kpc-text-shift: 120px;
    }
}

@media (max-width: 767px){
    .kpc-appointment{
        --kpc-btn-height: 78px;
        --kpc-circle-size: 78px;
        --kpc-text-shift: 58px;
    }
}
