.btn-311.btn-arrow,
.btn-311.btn-arrow svg path,
.btn-311.btn-arrow-2 svg,
.btn-311.btn-arrow-2 svg path{
    transition: 0.3s;
}

.btn-311.btn-arrow,
.btn-311.btn-arrow-2 svg{
    display: inline-block;
    transform: rotate(315deg);
}
.btn-311.btn-arrow:hover,
.btn-311.btn-arrow-2:hover svg{
    transform: rotate(360deg);
}

.btn-311.btn-arrow:hover svg path {
    fill: var(--color-3);
}

/* btn-arrow 2 */

.btn-311.btn-arrow-2 svg path {
    fill: var(--color-3);
}

.btn-311.btn-arrow-2:hover svg path {
    fill: var(--color-2);
}

/* btn-arrow 2 alternative version with inverted colors */

.btn-311.btn-arrow-2.btn-arrow-2--alt svg path {
    fill: var(--color-2);
}

.btn-311.btn-arrow-2.btn-arrow-2--alt:hover svg path {
    fill: var(--color-3);
}

/* svg fill color-3 on hover */

.btn-311.svg-color-hov-3 svg path {
    transition: 0.3s;
}

.btn-311.svg-color-hov-3:hover svg path {
    fill: var(--color-3);
}

/* focus color inherit */

.btn-311.color-focus-inherit:focus {
    color: inherit !important;
}

/*Arrow effect My Trip*/

.btn-311.disappearing-arrow {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.btn-311.disappearing-arrow::after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
    color: var(--color-3);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.btn-311.disappearing-arrow:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.btn-311.disappearing-arrow {
    padding-right: 10px;
    transition: padding-right 0.4s ease;
}

.btn-311.disappearing-arrow:hover {
    padding-right: 25px;
    background: transparent;
    font-weight: 600;
    border-width: 2px;
}

.btn-311.disappearing-arrow.disappearing-alt::after {
    color: var(--color-3);
}

.btn-311.disappearing-arrow.disappearing-alt:hover {
    color: var(--color-3);
    background: white;
}