button, .button {
    color: #fff;
    @extend .ft-theme-default;
    padding: 0 30px;
    line-height: 60px;
    border-radius: 0;
    @include transition(all .25s cubic-bezier(.645,.045,.355,1));
    position: relative;
    cursor: pointer;
    border: none;
    height: auto;
    display: inline-flex;
    align-items: center;
    text-align: center;
    background-color: $link_color;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-decoration: unset;
    text-transform: unset;
    .pxl-icon {
        width: 20px;
        height: 2px;
        background-color: #fff;
        margin-left: 9px;
        @include transition(all .25s cubic-bezier(.645,.045,.355,1));
        transform-origin: left;
        transform: scaleX(1);
    }
    &:hover, &:focus, &:active {
        outline: medium none;
        text-decoration: none;
        color: #fff;
        background-color: $primary_color;
        padding: 0 44px 0 45px;
        .pxl-icon {
            transform: scaleX(0);
            width: 0;
            margin-left: 0;
        }
    }
}
.btn-submit {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    padding: 0 28px;
    line-height: 54px;
    @include transition(all 300ms linear 0ms);
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 60px;
    @include background-gradient-button(to right, $gradient_color_from 0%, $gradient_color_to 51%, $gradient_color_from 100%);
    background-size: 200%, auto;
    color: #fff;
    border: none;
    height: auto;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    overflow: hidden;
    @extend .ft-theme-default;
    &:before {
        content: '';
        z-index: -1;
        top: 2px;
        right: 2px;
        bottom: 2px;
        left: 2px;
        border-radius: 54px;
        background-color: #000;
        position: absolute;
    }
    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: -200%;
        width: 200%;
        height: 100%;
        @include transform(skewX(-20deg));
        background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,0.35)),to(transparent));
        background-image: linear-gradient(to right,transparent,rgba(255,255,255,0.35),transparent);
        z-index: -1;
    }
    &:hover {
        outline: medium none;
        text-decoration: none;
        color: #fff;
        background-position: right center;
        &:after {
            -webkit-animation: pxl_btn_shine 1.2s ease;
            animation: pxl_btn_shine 1.2s ease;
            -webkit-animation-delay: .1s;
            animation-delay: .1s;
        }
    }
}

.search-submit {
    &:hover, &:focus, &:active {
        i {
            color: $primary_color;
            &:before {
                transform: unset;
            }
        }
    }
    i {
        width: unset;
        height: unset;
        line-height: 40px;
        margin-left: 0;
        background-color: unset;
        &:before {
            position: unset;
            transform: unset;
        }
        &:after {
            display: none;
        }
    }
}

@-webkit-keyframes pxl_btn_shine{
    100%{
        left:200%
    }
}
@keyframes pxl_btn_shine{
    100%{
        left:200%
    }
}
input[type="submit"] {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    padding: 0 28px;
    line-height: 54px;
    @include transition(all 300ms linear 0ms);
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 7px;
    background-color: $primary_color;
    color: #fff;
    height: auto;
    text-align: center;
    justify-content: center;
    @extend .ft-theme-default;
    border: none;
    &:hover {
        outline: medium none;
        text-decoration: none;
        color: #fff;
    }
}

.btn:not(.btn-stroke) {
    line-height: 85px;
    background-color: $primary_color;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 500;
    color: #fff;
    padding: 0 34px 0 41px;
    @include ft_theme_default($ft_theme_default);
    @include transition(all .25s cubic-bezier(.645,.045,.355,1));
    position: relative;
    cursor: pointer;
    height: auto;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    text-decoration: unset;
    &:hover {
        outline: medium none;
        text-decoration: none;
        &.pxl-icon--right {
            svg {
                transform: rotate(45deg);
            }
        }
    }
    .pxl-btn-icon {
        line-height: 1;
        margin-left: 172px;
    }
    &.pxl-icon--right {
        flex-direction: row-reverse;
        i {
            margin-left: 173px;
        }
        svg {
            height: 26px;
            width: auto;
            transform: rotate(0deg);
            @include transition(all 0.3s);
            path {
                fill: #fff;
            }
        }
    }

    // Text Hover
    &.btn-text-nina {
        .pxl--btn-text {
            position: relative;
            &:before {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding: 0;
                -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
                transition: transform 0.2s, opacity 0.2s;
                transition-timing-function: ease, ease;
                -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
                transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
                white-space: nowrap;
            }
            > span {
                white-space: nowrap;
                display: inline-block;
                padding: 0;
                opacity: 0;
                -webkit-transform: translate3d(0, -14px, 0);
                transform: translate3d(0, -14px, 0);
                -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
                transition: transform 0.2s, opacity 0.2s;
                transition-timing-function: ease, ease;
                -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
                transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
                line-height: normal;
            }
        }
        &:hover {
            @include transform(translateY(0px));
            .pxl--btn-text {
                &:before {
                    opacity: 0;
                    -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
                }
                span {
                    opacity: 1;
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                }
            }
        }
        &:not(:hover) .pxl--btn-text > span {
            transition-delay: 0s !important;
        }
        &.btn-outline-gradient {
            &:hover {
                .pxl--btn-text {
                    &:before {
                        -webkit-transform: translate3d(0, 30px, 0);
                        transform: translate3d(0, 30px, 0);
                    }
                }
            }
        }
    }

    &.btn-text-parallax {
        .pxl--btn-text {
            @include transition(all 120ms linear 0ms);
        }
        &:not(.hovered) .pxl--btn-text {
            transform: translate3d(0px, 0px, 0px) !important;
        }
    }

    &.btn-text-nanuk {
        .pxl--btn-text {
            span {
                display: inline-block;
            }
        }
        &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
            background-color: $primary_color;
        }
        &:hover .pxl--btn-text {
            span:nth-child(2n+1), span:nth-child(2n) {
                -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
                transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1);
            }

            span:nth-child(2n+1) {
                -webkit-animation: pxl_nanuk_1 0.5s forwards;
                animation: pxl_nanuk_1 0.5s forwards;
            }

            span:nth-child(2n) {
                -webkit-animation: pxl_nanuk_2 0.5s forwards;
                animation: pxl_nanuk_2 0.5s forwards;
            }
        }
    }

    &.btn-text-smoke {
        --move: 12px;
        --move-y: -8px;
        --blur: 4px;
        .pxl-text--front {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            line-height: normal;
            + .pxl-text--back {
                opacity: 0;
            }
        }
        .pxl-text--inner {
            display: inline-flex;
            line-height: 1;
            span {
                display: block;
            }
        }
        &:hover {
            .pxl-text--inner span {
                --duration: 600ms;
                -webkit-animation: pxl_smoke var(--duration) linear var(--d);
                animation: pxl_smoke var(--duration) linear var(--d);
            }
        }
    }

    &.btn-text-reverse {
        .pxl-text--front {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            line-height: normal;
            .pxl-text--inner span {
                @include transform(translateY(-100%));
            }
        }
        .pxl-text--inner {
            display: inline-flex;
            line-height: 1;
            overflow: hidden;
            span {
                display: block;
                transition: transform .44s ease;
            }
        }
        &:hover {
            @include transform(translateY(-4px));
            .pxl-text--front {
                .pxl-text--inner span {
                    @include transform(translateY(0%));
                }
            }
            .pxl-text--back {
                .pxl-text--inner span {
                    @include transform(translateY(100%));
                }
            }
        }
    }

    // Style
    &.btn-outline {
        border: none;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: $link_color;
        line-height: 53px;
        font-weight: 500;
        @include ft_theme_default($ft_theme_default);
        display: inline-flex;
        align-items: center;
        padding: 0;
        width: 100%;
        justify-content: left;
        background-color: unset;
        .pxl--btn-text {
            border: 1px solid #d9d9d9;
            padding: 0 30px;
            width: 79.1%;
            @include transition(all 0.3s);
            position: relative;
            overflow: hidden;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 100%;
                background-color: $primary_color;
                @include transition(all 0.3s);
                z-index: -1;
            }
        }
        .pxl-btn-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 55px;
            min-width: 55px;
            height: 55px;
            @include transition(all 0.3s);
            position: relative;
            overflow: hidden;
            background-color: $primary_color;
            svg {
                height: 20px;
                width: auto;
                transform: rotate(0deg);
                @include transition(all 0.3s);
                margin-left: 0;
                path {
                    fill: #fff;
                }
            }
        }
        &:hover, &:active, &:focus {
            padding: unset;
            color: #fff;
            background-color: unset;
            .pxl--btn-text {
                border-color: $primary_color;
                &:before {
                    width: 100%;
                }
            }
            .pxl-btn-icon {
                svg {
                    transform: rotate(45deg);
                }
            }
        }
    }

    &.btn-outline-gradient {
        background-color: #000000;
        border-radius: 50px;
        line-height: 50px;
        color: #f8f8f8;
        overflow: visible;
        padding: 0 30px;
        &:before {
            @extend .bg-gradient;
            content: '';
            border-radius: inherit;
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            z-index: -2;
        }
        &:after {
            content: '';
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
            left: 1px;
            background-color: inherit;
            z-index: -1;
            border-radius: inherit;
        }
        &.btn-border-3x {
            &:after {
                top: 3px;
                right: 3px;
                bottom: 3px;
                left: 3px;
            }
        }
        &.btn-border-4x {
            &:after {
                top: 4px;
                right: 4px;
                bottom: 4px;
                left: 4px;
            }
        }
        &.btn-border-5x {
            &:after {
                top: 5px;
                right: 5px;
                bottom: 5px;
                left: 5px;
            }
        }
    }

    &.btn-round {
        padding: 0;
        width: 108px;
        height: 108px;
        border-radius: 108px;
        color: #000000;
        font-size: 18px;
        font-family: inherit;
        line-height: normal;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        .pxl--btn-text {
            text-decoration: underline;
            transform: rotate(-8deg);
            @include transition(all 300ms linear 0ms);
        }
        &:hover {
            color: #fff;
            .pxl--btn-text {
                transform: rotate(0deg);
            }
        }
    }
    &.btn-white-effect {
        line-height: 52px;
        font-size: 18px;
        color: #1e1e1e;
        padding: 0 10px;
        min-width: 142px;
        background: #fff;
        overflow: visible;
        &:before, &:after {
            content: '';
            background-color: #1e1e1e;
            border: 1px solid #fff;
            position: absolute;
            width: 100%;
            top: 50%;
            left: 0;
            @include transform(translate(0, -50%));
        }
        &:before {
            border-radius: 46px;
            min-height: 93px;
            z-index: -1;
        }
        &:after {
            border-radius: 71px;
            min-height: 142px;
            z-index: -2;
        }
        .pxl--btn-text {
            border-radius: inherit;
            &:before {
                content: '';
                border-radius: inherit;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background-color: #fff;
            }
        }
    }
    &.btn-slider1 {
        line-height: 76px;
        padding-left: 55px;
        padding-right: 43px;
        font-size: 18px;
        font-weight: 700;
        color: #020307;
        @include background-horizontal($gradient_color_from, $gradient_color_to);
        overflow: visible;
        @media #{$max-lg} {
            line-height: 70px;
        }
        @media screen and (max-width: 479px) {
            line-height: 60px;
            padding-left: 38px;
            padding-right: 38px;
            font-size: 16px;
        }
        &:before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            border: 2px solid $gradient_color_from;
            border-radius: inherit;
            width: 100%;
            height: 100%;
            z-index: -1;
            @include transition(all 200ms linear 0ms);
        }
        .flaticon-right-up {
            font-size: 20px;
        }
        &:hover {
            &:before {
                top: 0;
                left: 0;
                transform: scale(1.2);
                opacity: 0;
            }
        }
    }

    &.btn-slider2 {
        text-transform: uppercase;
        font-size: 20px;
        font-weight: 600;
        line-height: 72px;
        padding: 0 48px;
        font-family: inherit;
    }
    &.btn-slider3 {
        text-transform: uppercase;
        font-size: 20px;
        font-weight: 600;
        line-height: 72px;
        padding: 0 42px;
        font-family: inherit;
        color: #fff;
        border: 2px solid #fff;
        background: rgba(#fff, 0.1);
    }

    &.btn-style5 {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        text-transform: uppercase;
        position: relative;
        line-height: 40px;
        border-radius: 0;
        padding: 0;
        background-color: unset;
        position: relative;
        color: $primary_color;
        border: none;
        span {
            position: relative;
            z-index: 1;
        }
        &:before {
            display: none;
        }
        svg {
            width: auto;
            height: 16px !important;
            transform: rotate(0);
            @include transition(all 0.3s);
            path {
                fill: $primary_color;
            }
        }
        .pxl-btn-icon {
            margin-left: 16px;
        }
        &:hover {
            svg {
                transform: rotate(45deg);
            }
        }
    }

    &.btn-style6 {
        line-height: 85px;
        background-color: $primary_color;
        font-size: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-style: normal;
        font-weight: 500;
        color: #fff;
        padding: 0 34px 0 41px;
        @include ft_theme_default($ft_theme_default);
        @include transition(all .25s cubic-bezier(.645,.045,.355,1));
        position: relative;
        cursor: pointer;
        height: auto;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        z-index: 1;
        text-decoration: unset;
        width: 100%;
        &:hover {
            outline: medium none;
            text-decoration: none;
            &.pxl-icon--right {
                svg {
                    transform: rotate(45deg);
                }
            }
        }
        .pxl-btn-icon {
            line-height: 1;
            margin-left: 172px;
        }
        &.pxl-icon--right {
            flex-direction: row-reverse;
            i {
                margin-left: 173px;
            }
            svg {
                height: 26px;
                width: auto;
                transform: rotate(0deg);
                @include transition(all 0.3s);
                path {
                    fill: #fff;
                }
            }
        }
    }

    &.btn-style7 {
        line-height: 109px;
        background-color: $primary_color;
        font-size: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-style: normal;
        font-weight: 500;
        color: #fff;
        padding: 0 53px 0 57px;
        @include ft_theme_default($ft_theme_default);
        @include transition(all .25s cubic-bezier(.645,.045,.355,1));
        position: relative;
        cursor: pointer;
        height: auto;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        z-index: 1;
        text-decoration: unset;
        width: 100%;
        clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
        &:hover {
            outline: medium none;
            text-decoration: none;
            &.pxl-icon--right {
                svg {
                    transform: rotate(45deg);
                }
            }
        }
        .pxl-btn-icon {
            line-height: 1;
            margin-left: 172px;
            svg {
                height: 26px;
                width: auto;
                transform: rotate(0deg);
                @include transition(all 0.3s);
                path {
                    fill: #fff;
                }
            }
        }
        &.pxl-icon--right {
            flex-direction: row-reverse;
            i {
                margin-left: 173px;
            }
            svg {
                height: 26px;
                width: auto;
                transform: rotate(0deg);
                @include transition(all 0.3s);
                path {
                    fill: #fff;
                }
            }
        }
    }

    &.btn-style8 {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        text-transform: uppercase;
        position: relative;
        line-height: 40px;
        border-radius: 0;
        padding: 0;
        background-color: unset;
        position: relative;
        color: $primary_color;
        border: none;
        span {
            position: relative;
            z-index: 1;
        }
        &:before {
            display: none;
        }
        svg {
            width: auto;
            height: 16px !important;
            @include transition(all 0.3s);
            path {
                fill: $primary_color;
            }
        }
        .pxl-btn-icon {
            margin-left: 16px;
        }
        &:hover {
            svg {
                transform: rotate(0);
            }
        }
    }

    &.btn-style9 {
        min-width: 95px;
        width: 95px;
        height: 94px;
        clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 18% 100%, 0 77%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: $primary_color;
        padding: 0;
        .pxl--btn-text {
            font-size: 0;
        }
        &:hover {
            clip-path: polygon(0 0, 100% 0, 100% 0%, 100% 100%, 0% 100%, 0 100%);
            svg {
                animation: aniArrow01 .3s linear 1;
            }
        }
        .pxl-btn-icon {
            margin: 0;
            overflow: hidden;
        }
        svg {
            height: 38px;
            width: auto;
            fill: #fff;
            @include transition(all 0.3s);
            path {
                fill: #fff;
            }
        }
    }
}

@keyframes pxl_smoke {
    45%,
    55% {
        filter: blur(var(--blur));
    }
    50%,
    50.1% {
        opacity: 0;
    }
    25%,
    75% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(var(--move)) translateY(var(--move-y));
    }
    50.1% {
        transform: translateX(calc(var(--move) * -1));
    }
}

@keyframes pxl_nanuk_1 {
    0%,
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    49% {
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        color: inherit;
    }
    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        color: inherit;
    }
    100% {
        color: inherit;
    }
}

@keyframes pxl_nanuk_2 {
    0%,
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    49% {
        opacity: 1;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        color: inherit;
    }
    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        color: inherit;
    }
    100% {
        color: inherit;
    }
}

.btn-stroke {
    display: inline-flex;
    padding: 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 54px;
    position: relative;
    .pxl-svg-line {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        @include transform(translate(0, -50%));
        width: 100%;
        margin-top: -2px;
        height: auto;
        fill: none;
        stroke-dashoffset: 0;
        stroke-dasharray: 3000;
        path {
            stroke: #000;
            stroke-linecap:round;
            stroke-miterlimit:10;
            stroke-width:18px;
        }
    }
    &:hover, &:focus {
        color: #000;
    }
    &:hover .pxl-svg-line path {
        animation: pxl_btn_stroke .6s ease-in-out;
        -webkit-animation: pxl_btn_stroke .6s ease-in-out;
    }
}

@keyframes pxl_btn_stroke {
    0%{
        stroke-dashoffset: 3000;
    }
    to{
        stroke-dashoffset: 0px;
    }
}

body.rtl {
    
}