.button {
    overflow: hidden;
}

.button .elementor-button {
    padding: 12px 46px 12px 20px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    line-height: 1.2em;
    transition: all 0.2s ease;
    cursor: pointer;
}

.button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);

    /* Mask */
    -webkit-mask-image: url('/wp-content/uploads/2025/11/arrow-combined2.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 200% 200%;
    -webkit-mask-position: 0% 100%;

    mask-image: url('/wp-content/uploads/2025/11/arrow-combined2.svg');
    mask-repeat: no-repeat;
    mask-size: 200% 200%;
    mask-position: 100% 0%;

    background-color: black;
}

.button:hover::after {
    -webkit-animation: arrow-move .5s forwards;
    animation: arrow-move .5s forwards;
}

@-webkit-keyframes arrow-move {
    0% { -webkit-mask-position: 100% 0%; }
    100% { -webkit-mask-position: 0 100%; }
}

@keyframes arrow-move {
    0% { mask-position: 100% 0%; }
    100% { mask-position: 0 100%; }
}

.button.button-white .elementor-button {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
}

.button.button-transparent .elementor-button {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid white;
}

.button.button-header .elementor-button {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: var(--e-global-color-primary);
}

.button.button-transparent::after,
.button.button-header::after {
    background-color: white;
}

.button.button-transparent:hover .elementor-button {
  background-color: rgba(255, 255, 255, 0.15);
}

.button.button-white:hover .elementor-button {
  background-color: rgba(255, 255, 255, 0.75);
}

.button.button-header:hover .elementor-button {
  background-color: rgb(0 95 175);
}