button:not(.btn), .button:not(.btn), input[type="submit"]:not(.btn) {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 0 28px;
    line-height: 56px;
    @include transition(all 200ms linear 0ms);
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 56px;
    color: #fff;
    border: none;
    height: auto;
    text-align: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: $primary_color;
    &:hover, &:focus {
        background-color: $secondary_color;
        color: #fff;
    }
}

.btn {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 0 28px;
    line-height: 56px;
    border-radius: 56px;
    @include transition(all 300ms linear 0ms);
    position: relative;
    cursor: pointer;
    border: none;
    height: auto;
    display: inline-flex;
    align-items: center;
    text-align: center;
    background-color: $primary_color;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    @extend .ft-secondary;
    &:hover, &:focus {
        outline: medium none;
        text-decoration: none;
        color: #fff;
        background-color: $secondary_color;
    }
    &.btn-block {
        width: 100%;
    }
    &.pxl-icon--right {
        flex-direction: row-reverse;
    }
    &.pxl-icon-active i {
        justify-content: center;
        align-items: center;
    }
    &.btn-w-full {
        width: 100%;
    }
    .pxl--btn-icon {
        display: inline-flex;
        @include transition(all 300ms linear 0ms);
        i, svg {
            @include transition(all 300ms linear 0ms);
        }
    }
    // Button Style 
    &.btn-icon-box {
        padding-left: 30px;
        padding-right: 66px;
        line-height: 56px;
        background-color: $gradient_color_from;
        .pxl--btn-icon {
            width: 51px;
            height: 56px;
            position: absolute;
            top: 0;
            right: 0;
            background-color: $gradient_color_to;
            border-radius: 67px;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            i, svg {
                @include transition(all 300ms linear 0ms);
            }
        }
        &:hover, &:focus {
            background-color: $gradient_color_from;
        }
    }
    &.btn-icon-box2 {
        line-height: 53px;
        @include background-gradient-rotate(135deg, $gradient_color_from, $gradient_color_to);
        background-color: transparent;
        padding-left: 10px;
        padding-right: 15px;
        .pxl--btn-icon {
            width: 36px;
            height: 36px;
            background-color: #fff;
            border-radius: 36px;
            color: #000000;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            overflow: hidden;
        }
        .pxl--btn-text {
            margin: 0 17px;
        }
        &:hover {
            background-color: transparent;
            .pxl--btn-icon {
                i, svg {
                    -o-animation: toRightFromLeft 0.3s forwards;
                    -ms-animation: toRightFromLeft 0.3s forwards;
                    -webkit-animation: toRightFromLeft 0.3s forwards;
                    animation: toRightFromLeft 0.3s forwards;
                }
            }
        }
        &.btn-version-light {
            background: #fff;
            color: #000000;
            .pxl--btn-icon {
                @include background-gradient-rotate(135deg, $gradient_color_from, $gradient_color_to);
            }
            &:hover, &:focus {
                background: #fff;
            }
        }
    }
    &.btn-icon-box3 {
        @include background-horizontal($gradient_color_from, $gradient_color_to);
        line-height: 94px;
        padding: 0 22px 0 0;
        border-radius: 0 94px 94px 0;
        .pxl--btn-icon {
            margin: 0 !important;
            width: 94px;
            height: 100%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            font-size: 28px;
            @include background-gradient-rotate(45deg, $gradient_color_from2, $gradient_color_to2);
        }
        .pxl-divider-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: -1;
            transform: translate(-50%, -50%);
            height: 52px;
            width: 52px;
            border-radius: 52px;
            box-shadow: inset 0 0 0 2px rgba(#fff, 0.3);
            svg {
                height: 52px;
                width: 52px;
                fill: transparent;
                position: absolute;
                top: 0;
                left: 0;
                transform: scaleX(-1);
                path {
                    fill: none;
                    stroke: #fff;
                    stroke-width: 2;
                    box-sizing: border-box;
                    -webkit-transition: all 200ms linear;
                    transition: all 200ms linear;
                    stroke-dashoffset: 152px;
                    stroke-dasharray: 307.919px, 307.919px;
                }
            }
        }
        .pxl--btn-text {
            margin: 0 30px;
        }
        &:hover {
            @include background-horizontal($gradient_color_from, $gradient_color_to);
            .pxl-divider-circle svg path {
                stroke-dashoffset: 0px;
            }
        }
    }
    &.btn-icon-box4 {
        line-height: 50px;
        color: #dbd8d8;
        background: $primary_color;
        font-size: 18px;
        border-radius: 8px;
        border: 3px solid #fff;
        .pxl--btn-icon {
            width: 40px;
            height: 40px;
            background: #fff;
            border-radius: inherit;
            color: #07000E;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            overflow: hidden;
            box-shadow: 4px 4px 2px rgba(#000, 0.2);
            i, svg {
                display: inline-block;
                margin-top: 4px;
            }
        }
        .pxl--btn-text {
            margin: 0 17px;
        }
        &:hover {
            background: #220210;
            .pxl--btn-icon {
                i, svg {
                    -o-animation: toRightFromLeft 0.3s forwards;
                    -ms-animation: toRightFromLeft 0.3s forwards;
                    -webkit-animation: toRightFromLeft 0.3s forwards;
                    animation: toRightFromLeft 0.3s forwards;
                }
            }
        }
        &.btn-version-light {
            background: #fff;
            color: #000000;
            .pxl--btn-icon {
                @include background-gradient-rotate(135deg, $gradient_color_from, $gradient_color_to);
            }
            &:hover, &:focus {
                background: #fff;
            }
        }
    }
    &.btn-icon-box5{
        overflow: unset;
        &:hover{
            .pxl--btn-icon{
                i,svg{
                    transform: rotate(45deg);
                }
            }
        }
        .pxl--btn-icon{
            position: absolute;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            @include background-gradient-button(90deg,var(--primary-color) 0%,var(--fourth-color) 49%,var(--third-color) 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            right: -22px;
            &::before{
                position: absolute;
                content: '';
                width: calc(100% + 8px);
                height: calc(100% + 8px);
                top: 50%;
                left: 50%;
                border-radius: inherit;
                transform: translate(-50%,-50%);
                background-color: #020522;
                z-index: -1;
            }
        }
    }
    &.btn-icon-box6{
        background: transparent;
        &:hover{
            .pxl--btn-icon{
                &::before,&::after{
                    left: 0;
                }
                i{
                    &::after{
                        left: 0;
                    }
                }
            }
        }
        .pxl--btn-icon{
            width: 56px;
            height: 56px;
            border-radius: 50%;
            @include background-gradient-button(90deg,var(--primary-color) 0%,var(--fourth-color) 49%,var(--third-color) 100%);
            position: relative;
            display: flex;
            justify-content: center;
            &::before{
                content: '';
                position: absolute;
                top: 50%;
                left: -50%;
                transform: translateY(-50%);
                width: 100%;
                height: 100%;
                border-radius: inherit;
                background-image: inherit;
                mask-composite: exclude;
                padding: 1px;
                -webkit-mask: 
                    linear-gradient(#fff 0 0) content-box, 
                    linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor; 
                mask-composite: exclude;
                z-index: -1;
                opacity: 0.68;
                transition: all .3s;
            }
            &::after{
                content: '';
                position: absolute;
                top: 50%;
                left: -100%;
                transform: translateY(-50%);
                width: 100%;
                height: 100%;
                border-radius: inherit;
                background-image: inherit;
                mask-composite: exclude;
                padding: 1px;
                -webkit-mask: 
                    linear-gradient(#fff 0 0) content-box, 
                    linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor; 
                mask-composite: exclude;
                z-index: -2;
                opacity: 0.36;
                transition: all .3s;
            }
            i{
                border-radius: inherit;
                background-image: inherit;
                width: 100%;
                &::after{
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: -150%;
                    transform: translateY(-50%);
                    width: 100%;
                    height: 100%;
                    border-radius: inherit;
                    background-image: inherit;
                    mask-composite: exclude;
                    padding: 1px;
                    -webkit-mask: 
                        linear-gradient(#fff 0 0) content-box, 
                        linear-gradient(#fff 0 0);
                    -webkit-mask-composite: xor; 
                    mask-composite: exclude;
                    z-index: -2;
                    opacity: 0.16;
                    transition: all .3s;
                }
            }
        }
    }
    &.btn-icon-box7{
        background-color: transparent;
        position: relative;
        z-index: 1;
        // clip-path: polygon(12.8% 0, 100% 0, 100% 64.3%, 87.2% 100%, 0 100%, 0 35.7%);
        &:hover{
            .pxl--btn-text{
                animation: gradient-moving 1s ease;
                background-size: 200% 100%;
            }
        }
        .pxl--btn-text{
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            @include background-gradient-button(90deg,var(--primary-color)0%,var(--fourth-color) 48.53%,var(--third-color)100%);
            background-size: 100% 100%;
            background-position: -100%;
            
        }
        &::before{
            clip-path: polygon(12.8% 0, 100% 0, 100% 64.3%, 87.2% 100%, 0 100%, 0 35.7%);
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
            height: 100%;
            border-radius: inherit;
            @include background-gradient-button(90deg,var(--primary-color) 0%,var(--fourth-color) 49%,var(--third-color) 100%);
            z-index: -2;
        }
        &::after{
            clip-path: polygon(12.8% 0, 100% 0, 100% 64.3%, 87.2% 100%, 0 100%, 0 35.7%);
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            border-radius: inherit;
            background: #fff;
            z-index: -1;
        }
    }
    &.btn-icon-box8{
        @include background-gradient-button(90deg,var(--primary-color) 0%,var(--fourth-color) 49%,var(--third-color) 100%);
        position: relative;
        clip-path: polygon(12.8% 0, 100% 0, 100% 64.3%, 87.2% 100%, 0 100%, 0 35.7%);
        transition: all .3s;
        &:hover{
            background-position: 0;
        }
    }
    &.btn-icon-box9{
        position: relative;
        clip-path: polygon(50% 0%, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%, 16% 0);
        z-index: 1;
        &::before{
            clip-path: polygon(50% 0%, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%, 16% 0);
            position: absolute;
            content: '';
            inset: 1px;
            background-color: #46046c;
            z-index: -1;
        }
        &::after{
            clip-path: polygon(50% 0%, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%, 16% 0);
            position: absolute;
            content: '';
            inset: 0;
            background-color: #FE7524;
            z-index: -2;
        }
    }
    &.btn-line-gradient {
        background: transparent;
        overflow: visible;
        &:before {
            content: '';
            z-index: -1;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background-color: #191818;
            position: absolute;
            top: 0;
            left: 0;
        }
        &:after {
            content: '';
            z-index: -2;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            position: absolute;
            top: 6px;
            left: 0;
            @include background-gradient-button(90deg,var(--primary-color) 0%,var(--fourth-color) 49%,var(--third-color) 100%);
            @include transition(all 300ms linear 0ms);
            background-size: 200%, auto;
        }
        &:hover:after {
            background-position: right center;
        }
    }
    // Text Hover
    &.btn-text-nina {
        &.btn-default {
            &:hover, &:focus {
                background-color: $primary_color;
            }
        }
        .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-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-parallax {
        overflow: visible;
        &.btn-default {
            &:hover, &:focus {
                background-color: $primary_color;
            }
        }
        .pxl--btn-text {
            @include transition(all 120ms linear 0ms);
        }
        &:not(.hovered), &:not(.hovered) .pxl--btn-text {
            transform: translate3d(0px, 0px, 0px) !important;
        }
        .flaticon-up-right-arrow:before {
            @include transition(all 300ms linear 0ms);
        }
        &:hover {
            .flaticon-up-right-arrow:before {
                transform: rotate(45deg);
            }
        }
    }
    
    /* Button Style */
    &.btn-text-underline {
        padding: 0;
        line-height: 30px;
        background: none;
        font-size: 17px;
        color: #000;
        text-decoration: underline;
        .pxl--btn-icon{
            display: flex;
            justify-content: center;
            align-items: center;
            i,svg{
                animation: move-down 2s ease-in-out infinite;
            }
        }
    }
      
    &.btn-gradient-rotate {
        position: relative;
        .pxl--btn-icon{
            border-radius: inherit;
            &::before {
                content: "";
                width: 100%;
                height: 100%;
                border-radius: inherit;
                background-image: linear-gradient(var(--rotate), rgb(74, 69, 78), #ffffff 5%,rgb(74, 69, 78) 10%);
                position: absolute;
                z-index: -2;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                animation: spin 10s linear infinite;
            }
        }
        &::before{
            content: '';
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(180deg);
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            background-image: url(../img/Layer-19.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            border-radius: inherit;
            z-index: -1;
            opacity: 0;
            transform: opacity .3s;
        }
        &::after{
            content: '';
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            background-image: url(../img/Layer-19.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            border-radius: inherit;
            z-index: -1;
            opacity: 1;
            transform: opacity .3s;
        }
        &:hover {
            &::before{
                opacity: 1;
            }
            &::after{
                opacity: 0;
            }
          }
    }

    &.btn-gradient-horizontal {
        @include background-horizontal($gradient_color_from, $gradient_color_to);
        background-color: transparent;
        &:hover {
            background-color: transparent;
        }
    }

    &.btn-gradient-horizontal2 {
        @include background-gradient-3colors(45deg, $gradient_first_color, $gradient_color_to 45%, $gradient_color_from 100%);
        background-color: transparent;
        &:hover {
            background-color: transparent;
        }
    }
    &.pxl-btn-slide-style1{
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.52) inset;
        color: var(--ai-agency-ffffff, #FFF);
        font-size: 18px;
        font-weight: 600;
        padding: 0 45px 0 25px;
        svg{
            fill: #fff;
        }
    }
}
.pxl-contact-form1 .btn.btn-gradient-horizontal {
    @include background-gradient-button(to right, $gradient_color_from 0%, $gradient_color_to 51%, $gradient_color_from 100%);
    @include transition(all 300ms linear 0ms);
    background-size: 200%, auto;
    i {
        font-size: 10px;
        @include transition(all 300ms linear 0ms);
    }
    &:hover {
        background-position: right center;
        i.flaticon-up-right-arrow {
            transform: rotate(45deg);
        }
    }
}
@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;
    }
}

@media #{$min-sm} {
    .revslider-initialised {
        .btn.btn-icon-box {
            padding-left: 44px;
            padding-right: 90px;
            line-height: 67px;
            font-size: 18px;
            background-color: $gradient_color_to;
            .pxl--btn-icon {
                width: 65px;
                height: 67px;
                position: absolute;
                top: 0;
                right: 0;
                background-color: $gradient_color_from;
                border-radius: 67px;
                align-items: center;
                justify-content: center;
                font-size: 13px;
            }
            &:hover, &:focus {
                background-color: $gradient_color_to;
            }
        }
    }
}

body.rtl {
}