.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    border-radius: 100px;
    height: max-content;
    cursor: pointer;
    width: max-content;
    padding: 10px 30px;
    transition: all 0.4s ease-in-out;
}

.button .text {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.button .text p {
    display: inline-block;
    position: relative;
    transition: transform 0.4s ease-in-out;
    white-space: nowrap;
}

.button .text::after {
    content: attr(data-text);
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    transition: transform 0.4s ease-in-out;
    white-space: nowrap;
    color: var(--color_white);
}

.button:hover .text p {
    transform: translateX(100%);
}

/* .button:hover .text::after {
    transform: translateX(-100%);
} */

.btnInner:hover .text p,
.btn_transform:hover .button .text p,
.process_btn:hover .button .text p,
.white-join-btn:hover .text p {
    transform: translateX(100%);
}

.btnInner:hover .text::after,
.btn_transform:hover .button .text::after,
.process_btn:hover .button .text::after,
.white-join-btn:hover .text::after {
    transform: translateX(-100%);
}

.process_btn {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

.process_btn .button a {
    display: inline-block;
    position: relative;
    transition: transform 0.4s ease-in-out;
    white-space: nowrap;
}

.process_btn .button a::after {
    content: attr(data-text);
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    transition: transform 0.4s ease-in-out;
    white-space: nowrap;
    color: var(--color_black);
}

.process_btn:hover .button a {
    transform: translateX(100%);
}

.process_btn:hover .button a::after {
    transform: translateX(100%);
}

.white-join-btn .button {
  background: #fff !important;
    color: #000 !important;
    border: none !important;
    background-image: none !important;
    margin-top: 20px !important;
}

.white-join-btn .text p,
.white-join-btn .text::after {
    color: #000 !important;
}

.btn_ani .button:hover .text p {
    transform: translateX(100%) !important;
}