button {
    border: none;
    padding: 0;
    cursor: pointer;
    @include transition(all 200ms linear 0ms);
}
.button, input[type="submit"] {
    @extend .ft-theme-default;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 0 32px;
    line-height: 52px;
    @include border-radius(5px);
    @include transition(all .25s cubic-bezier(.645,.045,.355,1));
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: none;
    background-color: $primary_color;
    height: auto;
    text-align: center;
    justify-content: center;
    &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
        outline: medium none;
        text-decoration: none;
        color: #fff;
        background-color: $secondary_color;
    }
}

.pxl-icon-active {
    i.flaticon {
        display: inline-flex;
    }
}

.btn {
    @extend .ft-theme-default;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 0 32px;
    line-height: 52px;
    @include border-radius(5px);
    @include transition(all .25s cubic-bezier(.645,.045,.355,1));
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: none;
    background-color: $primary_color;
    height: auto;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
        outline: medium none;
        text-decoration: none;
        color: #fff;
        background-color: $secondary_color;
    }
    i {
        line-height: normal;
        &.flaticon {
            line-height: 1;
        }
    }
    &.pxl-icon--right {
        flex-direction: row-reverse;
    }

    /* Button Styles */
    &.btn-default {
        z-index: 1;
        overflow: hidden;
        &:before {
            position: absolute;
            width: 200%;
            height: 200%;
            content: "";
            top: -200%;
            left: 50%;
            background-color: $secondary_color;
            border-radius: 50%;
            z-index: -1;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            @include transition(all 500ms linear 0ms);
        }
        .pxl--btn-text {
            opacity: 0;
        }
        .pxl--btn-text1 {
            @include transition(all 220ms linear 0ms);
            position: relative;
            display: block;
        }
        .pxl--btn-text2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            @include transition(all 220ms linear 0ms);
            transform: translateY(110%);
        }
        .pxl--text-wrap {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            line-height: normal;
            display: block;
            overflow: hidden;
        }
        &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
            background-color: $primary_color;
            .pxl--btn-text1 {
                transform: translateY(-110%);
            }
            .pxl--btn-text2 {
                transform: translateY(0%);
            }
            &:before {
                top: -40%;
            }
        }
        &.btn-secondary {
            background-color: $secondary_color;
            &:before {
                background-color: $primary_color;
            }
            &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
                background-color: $secondary_color;
            }
        }
    }

    &.btn-outline {
        line-height: 54px;
        padding: 0 45px;
        border: 1px solid $primary_color;
        background-color: transparent;
        color: $primary_color;
        &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
            background-color: $primary_color;
            color: #fff;
        }
    }

    &.btn-slide-lr {
        z-index: 1;
        &:before {
            content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          margin: auto;
          background-color: $secondary_color;
          transform-origin: right center;
          -webkit-transform-origin: right center;
          @include transform(scale(0, 1));
          @include transition(transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85));
          z-index: -1;
          @include border-radius(inherit);
        }
        &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
            background-color: $primary_color;
            &:before {
                transform-origin: left center;
                -webkit-transform-origin: left center;
                @include transform(scale(1, 1));
            }
        }
    }

    &.btn-white {
        background-color: #fff;
        color: $primary_color;
        &:hover, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
            background-color: #fff;
            color: #fff;
        }
    }

    &.btn-nina {
        overflow: hidden;
        .pxl--btn-text {
            position: relative;
            direction: ltr;
            
            &: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));
            background-color: $primary_color;
            .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-gradient {
        font-size: 17px;
        line-height: 56px;
        padding: 0 28px;
        border-radius: 15px;
        @include background-gradient-button(to right, $gradient_color_from 0%, $gradient_color_to 51%, $gradient_color_from 100%);
        background-size: 200%, auto;
        background-color: transparent;
        &:hover, &:active {
            background-position: right center;
        }
    }

    &.btn-nanuk {
        overflow: hidden;
        .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;
            }
            span:nth-child(1) {-webkit-animation-delay: 0s;animation-delay: 0s;}
            span:nth-child(2) {-webkit-animation-delay: 0.05s;animation-delay: 0.05s;}
            span:nth-child(3) {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
            span:nth-child(4) {-webkit-animation-delay: 0.15s;animation-delay: 0.15s;}
            span:nth-child(5) {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
            span:nth-child(6) {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}
            span:nth-child(7) {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
            span:nth-child(8) {-webkit-animation-delay: 0.35s;animation-delay: 0.35s;}
            span:nth-child(9) {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
            span:nth-child(10) {-webkit-animation-delay: 0.45s;animation-delay: 0.45s;}
            span:nth-child(11) {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
            span:nth-child(12) {-webkit-animation-delay: 0.55s;animation-delay: 0.55s;}
            span:nth-child(13) {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
            span:nth-child(14) {-webkit-animation-delay: 0.65s;animation-delay: 0.65s;}
            span:nth-child(15) {-webkit-animation-delay: 0.7s;animation-delay: 0.7s;}
            span:nth-child(16) {-webkit-animation-delay: 0.75s;animation-delay: 0.75s;}
            span:nth-child(17) {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
            span:nth-child(18) {-webkit-animation-delay: 0.85s;animation-delay: 0.85s;}
            span:nth-child(19) {-webkit-animation-delay: 0.9s;animation-delay: 0.9s;}
            span:nth-child(20) {-webkit-animation-delay: 0.95s;animation-delay: 0.95s;}
            span:nth-child(21) {-webkit-animation-delay: 1s;animation-delay: 1s;}
            span:nth-child(22) {-webkit-animation-delay: 1.05s;animation-delay: 1.05s;}
            span:nth-child(23) {-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
            span:nth-child(24) {-webkit-animation-delay: 1.15s;animation-delay: 1.15s;}
            span:nth-child(25) {-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
            span:nth-child(26) {-webkit-animation-delay: 1.25s;animation-delay: 1.25s;}
            span:nth-child(27) {-webkit-animation-delay: 1.3s;animation-delay: 1.3s;}
            span:nth-child(28) {-webkit-animation-delay: 1.35s;animation-delay: 1.35s;}
            span:nth-child(29) {-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}
            span:nth-child(30) {-webkit-animation-delay: 1.45s;animation-delay: 1.45s;}
            span:nth-child(31) {-webkit-animation-delay: 1.5s;animation-delay: 1.5s;}
            span:nth-child(32) {-webkit-animation-delay: 1.55s;animation-delay: 1.55s;}
            span:nth-child(33) {-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
            span:nth-child(34) {-webkit-animation-delay: 1.65s;animation-delay: 1.65s;}
            span:nth-child(35) {-webkit-animation-delay: 1.7s;animation-delay: 1.7s;}
            span:nth-child(36) {-webkit-animation-delay: 1.75s;animation-delay: 1.75s;}
            span:nth-child(37) {-webkit-animation-delay: 1.8s;animation-delay: 1.8s;}
            span:nth-child(38) {-webkit-animation-delay: 1.85s;animation-delay: 1.85s;}
            span:nth-child(39) {-webkit-animation-delay: 1.9s;animation-delay: 1.9s;}
            span:nth-child(40) {-webkit-animation-delay: 1.95s;animation-delay: 1.95s;}
        }
    }

    &.btn-effect1 {
        background-color: $secondary_color;
        overflow: hidden;
        z-index: 1;
        &:before {
            content: '';
            width: 110%;
            height: 0;
            padding-bottom: 110%;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
            background-color: $primary_color;
            position: absolute;
            z-index: -1;
        }
        &:hover {
            background-color: $secondary_color;
            &:before {
                transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
                transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
            }
        }
    }

    &.btn-effect2 {
        background-color: $primary_color;
        overflow: hidden;
        z-index: 1;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            height: 100%;
            width: 120%;
            left: -10%;
            z-index: -1;
            background-color: $secondary_color;
            transform: skew(30deg);
            transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
        }
        &:hover {
            background-color: $primary_color;
            &:before {
                transform: translate3d(100%,0,0);
            }
        }
    }

    &.btn-skew {
        z-index: 1;
        overflow: hidden;
        &:before {
            content: "";
            position: absolute;
            height: 0;
            left: 50%;
            top: 50%;
            width: 150%;
            @include transition(all .35s ease 0s);
            background: $secondary_color;
            @include transform(translateX(-50%) translateY(-50%) rotate(-25deg));
            z-index: -1;
        }
        &:hover {
            background-color: $primary_color;
            &:before {
                height: 450%;
                @include transition(all 1s ease 0s);
                border: 0;
            }
        }
        &.btn-third {
            background-color: $third_color;
            &:before {
                background-color: $primary_color;
            }
        }
        &.btn-secondary {
            background-color: $secondary_color;
            &:before {
                background-color: $primary_color;
            }
        }
    }
    &.btn-outline-gray {
        line-height: 52px;
        border-radius: 52px;
        border: 1px solid #E8EAEE;
        background: transparent;
        padding: 0 24px;
        font-size: 18px;
        color: #677788;
        font-family: inherit;
        font-weight: 400;
        b {
            color: #075CF9;
            font-weight: 700;
        }
    }
}

.btn--readmore {
    font-size: 17px;
    font-weight: 600;
    color: #1C2539;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    .btn-readmore--icon {
        display: inline-flex;
        width: 40px;
        height: 40px;
        position: relative;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        z-index: 1;
        transform: translateX(-10px);
        @include transition(transform 250ms linear 0ms);
        &:before {
            content: '';
            @extend .pxl-spill;
            border-radius: 40px;
            @include transition(transform 250ms linear 0ms);
            @include box-shadow(0 10px 20px rgba(#8997BA, 0.25));
            transform: scale(0);
        }
    }
    .btn-readmore--text {
        @include transition(transform 250ms linear 0ms);
        transform: translateX(-24px);
    }
    &:hover, &.active {
        color: $primary_color;
        .btn-readmore--icon {
            transform: translateX(0px);
            &:before {
                transform: scale(1);
            }
        }
        .btn-readmore--text {
            transform: translateX(0px);
        }
    }
}

.btn--readmore2 {
    font-size: 17px;
    font-weight: 600;
    color: #1C2539;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    @include transition(all 250ms linear 0ms);
    .btn-readmore--icon {
        display: inline-flex;
        width: 40px;
        height: 40px;
        position: relative;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        z-index: 1;
        @include box-shadow(0 10px 20px rgba(#8997BA, 0.25));
        background-color: #fff;
        border-radius: 40px;
    }
    .btn-readmore--text {
        position: relative;
        &:before {
            content: '';
            position: absolute;
            bottom: 2px;
            height: 1px;
            background-color: $primary_color;
            opacity: 0.8;
            width: 100%;
            transform-origin: right center;
            -webkit-transform-origin: right center;
            @include transform(scale(0, 1));
            @include transition(transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85));
        }
    }
    &:hover {
        color: $primary_color;
        .btn-readmore--text:before {
            transform-origin: left center;
            -webkit-transform-origin: left center;
            @include transform(scale(1, 1));
        }
    }
}

.btn--readmore3 {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    text-transform: uppercase;
    color: #273D71;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    .pxl-icon--plus {
        width: 10px;
        height: 10px;
        display: inline-flex;
        margin: 0 12px;
        &:before {
            width: 10px;
            height: 2px;
            top: 4px;
            background-color: #273D71;
        }
        &:after {
            width: 2px;
            height: 10px;
            left: 4px;
            background-color: #273D71;
        }
    }
    &:hover {
        color: $primary_color;
        .pxl-icon--plus {
            &:before, &:after {
                background-color: $primary_color;
            }
        }
    }
}

.btn--readmore4 {
    display: inline-flex;
    align-items: center;
    i {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #1C2539;
        font-size: 19px;
        font-weight: normal;
        @include transition(all 300ms linear 0ms);
    }
    span {
        display: inline-flex;
        margin: 0 11px;
        font-size: 17px;
        font-weight: 600;
        color: #000;
        @include transition(all 300ms linear 0ms);
    }
}

@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;
    }
}

body.rtl {
    .btn--readmore {
        .btn-readmore--icon {
            transform: translateX(10px);
        }
        .btn-readmore--text {
            transform: translateX(24px);
        }
        &:hover {
            .btn-readmore--icon, .btn-readmore--text {
                transform: translateX(0px);
            }
        }
    }
}