.btn {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
    font-family: outfit, sans-serif;
    font-size: 0.938rem;
    padding: 12px 24px;
    border: 1px solid transparent;
    letter-spacing: 0.75px;
    line-height: 1.6em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .3s;
}

.btn span {
    position: relative;
}

.btn:before {
    content: '';
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: inherit;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.btn:hover:before {
    transform: translateY(0%);
}

.btn-40 {
    padding: 7px 18px;
}

.btn:hover {
    text-decoration: none;
}

.btn.btn-filled {
    background-color: var(--theme-red);
    color: #fff;
}

.btn.btn-filled:hover:before {
    background-color: var(--theme-red-hover);
}

.btn.btn-filled-outline {
    background-color: #fff;
    border-color: var(--theme-red);
    color: var(--theme-slate);
}

.btn.btn-filled-outline:hover {
    color: #fff;
}

.btn.btn-filled-outline:hover:before {
    background-color: var(--theme-red-hover);
}

.btn.btn-outline {
    border-color: #fff;
    color: #fff;
}

.btn.btn-outline:before {
    background-color: #fff;
}

.btn.btn-outline:hover {
    color: var(--theme-red);
}

.btn.btn-outline:hover:before {
    background-color: #fff;
}

.btn-off-white {
    color: var(--theme-charcoal);
    background-color: var(--theme-off-white);
}

.btn-off-white:focus {
    outline: none;
}

.btn-off-white:focus-visible {
    outline: 1px solid var(--theme-red);
    outline-offset: 1px;
}

.btn-off-white:hover {
    color: #fff;
}

.btn-off-white:hover:before {
    background-color: var(--theme-red-hover);
}

.btn-arrow {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 60px;
    height: 60px;
    text-indent: 60px;
    overflow: hidden;
    white-space: nowrap;
    transition: all .3s;
    box-shadow: none;
    outline: none;
    border: none;
    cursor: pointer;
}

.btn-arrow:before,
.btn-arrow:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-arrow:before{
    background-color: inherit;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.btn-arrow:hover:before {
    transform: translateY(0%);
}

.btn-arrow:after {
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='22' viewBox='0 0 29 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5935 9.97218L19.5935 0.458845C19.0798 -0.0372381 17.9997 -0.214988 17.4138 0.353379C16.8298 0.902212 16.8298 1.96471 17.4138 2.53305L24.0234 9.49388H1.50587C0.673833 9.49388 0 10.1677 0 10.9998C0 11.8318 0.673833 12.5056 1.50587 12.5056H24.0234L17.4159 19.4685C16.8319 20.0174 16.7967 21.1345 17.4159 21.6482C17.9999 22.1267 19.0643 22.1443 19.5955 21.5252L28.5935 12.0293C28.9841 11.6387 29.2673 10.629 28.5935 9.97467V9.97218Z' fill='%23F3F3F3'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
}

.btn-arrow-filled {
    background-color: var(--theme-red);
}

.btn-arrow-red-outline {
    background-color: #fff;
}

.btn-arrow-red-outline:before,
.btn-arrow-filled:before {
    background-color: var(--theme-red-hover);
}

.btn-arrow-red-outline:after {
    border: 1px solid var(--theme-red);
    transition: all .3s;
}

.btn-arrow-red-outline.prev-mod:after {
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='22' viewBox='0 0 29 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.406051 12.0271L9.40605 21.5404C9.91972 22.0365 10.9998 22.2143 11.5857 21.6459C12.1697 21.0971 12.1697 20.0346 11.5857 19.4662L4.97613 12.5054L27.4936 12.5054C28.3257 12.5054 28.9995 11.8316 28.9995 10.9995C28.9995 10.1675 28.3257 9.49364 27.4936 9.49364L4.97613 9.49364L11.5836 2.53072C12.1676 1.98189 12.2028 0.864721 11.5836 0.351055C10.9996 -0.127446 9.93522 -0.145027 9.40397 0.474102L0.406051 9.96994C0.0154256 10.3606 -0.267783 11.3703 0.406051 12.0246L0.406051 12.0271Z' fill='%23F1385A'/%3E%3C/svg%3E%0A");
}

.btn-arrow-red-outline.next-mod:after {
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='22' viewBox='0 0 29 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5935 9.97218L19.5935 0.458845C19.0798 -0.0372381 17.9997 -0.214988 17.4138 0.353379C16.8298 0.902212 16.8298 1.96471 17.4138 2.53305L24.0234 9.49388H1.50587C0.673833 9.49388 0 10.1677 0 10.9998C0 11.8318 0.673833 12.5056 1.50587 12.5056H24.0234L17.4159 19.4685C16.8319 20.0174 16.7967 21.1345 17.4159 21.6482C17.9999 22.1267 19.0643 22.1443 19.5955 21.5252L28.5935 12.0293C28.9841 11.6387 29.2673 10.629 28.5935 9.97467V9.97218Z' fill='%23F1385A'/%3E%3C/svg%3E%0A");
}

.btn-arrow-red-outline.prev-mod:hover:after {
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='22' viewBox='0 0 29 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.406051 12.0271L9.40605 21.5404C9.91972 22.0365 10.9998 22.2143 11.5857 21.6459C12.1697 21.0971 12.1697 20.0346 11.5857 19.4662L4.97613 12.5054L27.4936 12.5054C28.3257 12.5054 28.9995 11.8316 28.9995 10.9995C28.9995 10.1675 28.3257 9.49364 27.4936 9.49364L4.97613 9.49364L11.5836 2.53072C12.1676 1.98189 12.2028 0.864721 11.5836 0.351055C10.9996 -0.127446 9.93522 -0.145027 9.40397 0.474102L0.406051 9.96994C0.0154256 10.3606 -0.267783 11.3703 0.406051 12.0246L0.406051 12.0271Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

.btn-arrow-red-outline.next-mod:hover:after {
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='22' viewBox='0 0 29 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5935 9.97218L19.5935 0.458845C19.0798 -0.0372381 17.9997 -0.214988 17.4138 0.353379C16.8298 0.902212 16.8298 1.96471 17.4138 2.53305L24.0234 9.49388H1.50587C0.673833 9.49388 0 10.1677 0 10.9998C0 11.8318 0.673833 12.5056 1.50587 12.5056H24.0234L17.4159 19.4685C16.8319 20.0174 16.7967 21.1345 17.4159 21.6482C17.9999 22.1267 19.0643 22.1443 19.5955 21.5252L28.5935 12.0293C28.9841 11.6387 29.2673 10.629 28.5935 9.97467V9.97218Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

.btn-arrow:hover {
    text-decoration: none;
}

.btn-arrow.btn-arrow-filled {
    background-color: var(--theme-red);
    color: #fff;
}

.btn-arrow.btn-arrow-filled:hover:before {
    background-color: var(--theme-red-hover);
}

.btn-arrow.down-mod:after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9898 26.1263L19.6823 17.9028C20.1356 17.4335 20.298 16.4466 19.7787 15.9112C19.2772 15.3776 18.3064 15.3776 17.7871 15.9112L11.4269 21.9505V1.37594C11.4269 0.615691 10.8112 0 10.0509 0C9.29068 0 8.67499 0.615691 8.67499 1.37594V21.9505L2.31287 15.9131C1.8114 15.3795 0.790628 15.3474 0.321283 15.9131C-0.115929 16.4467 -0.131993 17.4193 0.433713 17.9047L9.11019 26.1263C9.46711 26.4832 10.3897 26.7419 10.9876 26.1263H10.9898Z' fill='%23F1385A'/%3E%3C/svg%3E%0A");
}

.btn-arrow.down-mod:hover {
    background-color: var(--theme-red-hover);
}

.btn-arrow.down-mod:hover:after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9898 26.1263L19.6823 17.9028C20.1356 17.4335 20.298 16.4466 19.7787 15.9112C19.2772 15.3776 18.3064 15.3776 17.7871 15.9112L11.4269 21.9505V1.37594C11.4269 0.615691 10.8112 0 10.0509 0C9.29068 0 8.67499 0.615691 8.67499 1.37594V21.9505L2.31287 15.9131C1.8114 15.3795 0.790628 15.3474 0.321283 15.9131C-0.115929 16.4467 -0.131993 17.4193 0.433713 17.9047L9.11019 26.1263C9.46711 26.4832 10.3897 26.7419 10.9876 26.1263H10.9898Z' fill='%23ffffff'/%3E%3C/svg%3E%0A"); 
}

.slider-button {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    z-index: 2;
    left: 0;
}

.slider-button.next-mod {
    left: auto;
    right: 0;
}

.slider-button:focus {
    outline: none;
}
.slider-button:focus-visible {
    outline: 1px solid var(--theme-red);
    outline-offset: 2px;
}