//elementor-custom
.pxl-main-footer {
    @media (max-width: 767px) {
        width: 50% !important;
    }
    @media (max-width: 480px) {
        width: 100% !important;
    }
}
.pxl-main-pricing {
    @media (max-width: 767px) {
        width: 50%;
    }
    @media (max-width: 676px) {
        width: 100%;
    }
}

.pxl-main-post {
    @media (max-width: 767px) {
        width: 50% !important;
    }
    @media (max-width: 575px) {
        width: 100% !important;
    }
}

.pxl-main-tab {
    @media (max-width: 767px) {
        width: 40%;
    }
    @media (max-width: 575px) {
        width: 100%;
    }
}
.pxl-main-tab2 {
    @media (max-width: 767px) {
        width: 60%;
    }
    @media (max-width: 575px) {
        width: 100%;
    }
}

.pxl-main-home05 {
    @media (max-width: 767px) {
        width: 50%;
    }
    @media (max-width: 400px) {
        width: 100%;
    }
}

.pxl-border-layout1 {
    @include border-radius(10px);
}

.pxl-clip-layout1 {
    filter: drop-shadow(0px 30px 80px rgba(0,0,0,0.21));
}

.pxl-banner-absolute {
    left: 33px;
    @media (max-width: 1700px) {
        left: -100px;
        width: 39% !important;
        max-width: 39% !important;
    }
}

.pxl-page-title-h4 {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, 0.5);
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        z-index: 2;
        display: none;
        @media (max-width: 767px) {
            display: block;
        }
    }
}

.pxl-contact-newsletter {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: $gradient_color_to;
        clip-path: polygon(1.3% 0%, 96% 0%, 99.3% 100%, 3.6% 100%);
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        z-index: -1;
        @media (max-width: 880px) {
            clip-path: unset;
        }
    }
    &:after {
        content: '';
        position: absolute;
        width: 25px;
        height: 103%;
        left: -3px;
        top: 0;
        background-color: $primary_color;
        clip-path: polygon(0% 0%, 100% 36%, 100% 97%, 0% 100%);
        transform: rotate(12deg);
        z-index: -2;
        @media (max-width: 880px) {
            display: none;
        }
    }
}

.pxl-text-slide-left {
    transform: rotate(-90deg);
    @media (max-width: 1800px) {
        display: none;
    }
}

.pxl-footer-main {
    position: relative;
    &:before {
        content: '';
        width: 100%;
        height: 2px;
        background-color: #f3f3f3;
        top: 0;
        left: 50%;
        position: absolute;
        transform: translate(-50%,0);
    }
}

.pxl-section-clip1 {
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
    @media (max-width: 1199px) {
        clip-path: none;
    }
}

.pxl-section-clip2 {
    clip-path: polygon(100% 0, 100% 87%, 96.35% 100%, 0 100%, 0 0);
    @media (max-width: 880px) {
        clip-path: none;
    }
}

.pxl-section-clip3 {
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 0 13%);
    @media (max-width: 991px) {
        clip-path: none;
    }
}

.pxl-section-clip4 {
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
}

.pxl-section-clip5 {
    clip-path: polygon(96.3% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
    @media (max-width: 1200px) {
        clip-path: none;
    }
}

.pxl-section-clip6 {
    clip-path: polygon(85% 0, 100% 16%, 100% 100%, 0 100%, 0 0);
    @media (max-width: 767px) {
        clip-path: none;
    }
}

.pxl-factory-clip1 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 84%);
    @media (max-width: 767px) {
        clip-path: none;
    }
}

.pxl-factory-clip2 {
    clip-path: polygon(94% 0, 100% 18%, 100% 100%, 0 100%, 0 0);
    @media (max-width: 767px) {
        clip-path: none;
    }
    .elementor-container {
        clip-path: polygon(94% 0, 100% 18%, 100% 100%, 0 100%, 0 0);
        @media (max-width: 767px) {
            clip-path: none;
        }
    }
}

.pxl-factory-clip3 {
    clip-path: polygon(93% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
    @media (max-width: 767px) {
        clip-path: none;
    }
}

.pxl-machining-clip1 {
    clip-path: polygon(100% 0, 100% 86%, 96.1% 100%, 0 100%, 0 0);
    @media (max-width: 1024px) {
        clip-path: none;
    }
}

.pxl-machining-clip2 {
    clip-path: polygon(96.2% 0, 100% 14%, 100% 100%, 0 100%, 0 0);
    @media (max-width: 1024px) {
        clip-path: none;
    }
}

.pxl-landing-clip1 {
    clip-path: polygon(3.4% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
    @media (max-width: 1024px) {
        clip-path: none;
    }
}

.pxl-industry-three-clip1 {
    clip-path: polygon(74px 0, 100% 0, 100% 100%, 0 100%, 0 76px);
    @media (max-width: 1024px) {
        clip-path: none;
    }
}

.pxl-video-home-four {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #191919;
        top: 0;
        left: 0;
        clip-path: polygon(93% 0, 100% 8%, 100% 100%, 0 100%, 0 0);
    }
    @media (max-width: 1400px) {
        clip-path: none;
    }
}

.pxl-menu-oil-lv1 {
    @media (max-width: 1600px) {
        width: 67% !important;
        .pxl-list {
            .pxl--item {
                margin-right: 20px !important;
                &:last-child {
                    margin-right: 0 !important;
                }
                .pxl-item-link {
                    font-size: 14px !important;
                }
            }
        }
    }
    @media (max-width: 1366px) {
        width: 70% !important;
    }
}
.pxl-menu-oil-lv2 {
    @media (max-width: 1600px) {
        width: 33% !important;
    }
    @media (max-width: 1366px) {
        width: 30% !important;
    }
}

.pxl-header-oil-lv1 {
    @media (max-width: 1600px) {
        padding-left: 15px !important;
    }
    @media (max-width: 1366px) {
        padding-left: 0px !important;
    }
}

.pxl-item-relative {
    position: relative !important;
    .pxl-item-absolute {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
    }
}

.pxl-menu-home2 {
    .fr-style-box2 {
        .pxl-menu-primary {
            .pxl-mega-menu {
                border: 1px solid #d9d9d9;
            }
        }
    }
    .fr-styles-box5 {
        .pxl-menu-primary {
            .pxl-mega-menu {
                border: 1px solid #d9d9d9;
            }
        }
    }
}

.pxl-menu-home6 {
    >.elementor-container {
        position: relative !important;
    }
}

.pxl-sticky-machining {
    .fr-style-box2 {
        .pxl-menu-primary {
            .pxl-mega-menu {
                border: 1px solid #d9d9d9;
            }
        }
    }
    .fr-styles-box6 {
        .pxl-menu-primary {
            .pxl-mega-menu {
                max-width: unset;
            }
        }
    }
}

.pxl-footer-main2 {
    position: relative;
    &:before {
        content: '';
        width: 100%;
        height: 1px;
        background-color: #e1e1e1;
        top: 0;
        left: 50%;
        position: absolute;
        transform: translate(-50%,0);
    }
}

.pxl-section-logo-4 {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #191919;
        width: 1000%;
    }
}

.pxl-main-sticky {
    .pxl-menu-primary {
        box-shadow: none;
    }
}

.pxl-video-counter {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        top: 53%;
        left: 0;
        width: 51.5%;
        height: 62%;
        background-color: #fafafa;
        z-index: -1;
        transform: translate(0,-53%);
        clip-path: polygon(15% 0%, 100% 0%, 96% 100%, 15% 100%);
        @media (max-width: 1199px) {
            display: none;
        }
    }
    &:after {
        content: '';
        position: absolute;
        top: 53%;
        left: 0;
        width: 300%;
        height: 62%;
        background-color: #f2f3f5;
        z-index: -2;
        transform: translate(0,-53%);
        clip-path: polygon(15% 0%, 100% 0%, 96% 100%, 15% 100%);
        @media (max-width: 1199px) {
            width: 100%;
            height: 100%;
            clip-path: unset;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    }
}

.pxl-header-home02-layout1 {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 135%;
        bottom: 0;
        left: 0;
        z-index: -1;
        background-color: $primary_color;
        border-radius: 47px 47px 0 0;
    }
    &:after {
        content: '';
        position: absolute;
        width: 99.4%;
        height: 135%;
        bottom: 0;
        left: 50%;
        z-index: -1;
        background-color: #1d1b1b;
        border-radius: 47px 47px 0 0;
        transform: translate(-50%,0);
    }
}

.pxl-header-home02-layout2 {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background-color: #fff;
        clip-path: polygon(1% 0%, 100% 0%, 98% 100%, 0% 100%);
        border-radius: 18px 5px 32px 5px;
        @include transition(all 0.3s);
    }
}

.pxl-content-contact1 {
    position: absolute !important;
    bottom: -147px;
    @media (max-width: 1200px) {
        position: relative !important;
        bottom: unset;
    }
}

.pxl-content-contact2 {
    position: absolute !important;
    bottom: -92px;
    @media (max-width: 1200px) {
        position: relative !important;
        bottom: unset;
    }
}

.pxl-home04-menu1 {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 300%;
        height: 122%;
        background-color: #fff;
        border-radius: 0px 0px 50px 0;
    }
}
.pxl-home04-menu2 {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #161616;
        border-radius: 24px 24px 0px 0px;
        z-index: -1;
    }
}

.pxl-home04-menu3 {
    position: relative !important;
    &:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 150%;
        height: 100%;
        background-color: $primary_color;
        border-radius: 0px 0px 48px 0px;
        z-index: -1;
    }
}

.pxl-landing-section1 {
    position: relative !important;
    &:before {
        content: '';
        background-image: url(../img/left1.png);
        width: 240px;
        height: 100%;
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        background-position: 50%;
        background-repeat: no-repeat;
        @media (max-width: 991px) {
            width: 150px;
        }
        @media (max-width: 880px) {
            display: none;
        }
    }
    &:after {
        content: '';
        background-image: url(../img/right1.png);
        width: 240px;
        height: 100%;
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        background-position: 50%;
        background-repeat: no-repeat;
        @media (max-width: 991px) {
            width: 150px;
        }
        @media (max-width: 880px) {
            display: none;
        }
    }
}

//pxl-meta
.pxl-meta {
    &.pxl-meta1 {
        position: relative;
        &.style1 {
            &:hover {
                .pxl-item-desc {
                    top: 100%;
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
            .pxl-meta-inner {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 16px 0 20px 0;
                background-color: #191919;
                z-index: 2;
                position: relative;
                cursor: pointer;
                @media (max-width: 1600px) {
                    padding: 15px;
                }
                .pxl-item--icon {
                    padding-top: 5px;
                    svg {
                        height: 21px;
                        fill: $primary_color;
                        width: auto;
                    }
                }
                .pxl-item--title {
                    font-size: 20px;
                    font-weight: 500;
                    color: #fff;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.2;
                    @media (max-width: 1600px) {
                        font-size: 18px;
                    }
                }
            }
            .pxl-item-desc {
                position: absolute;
                font-size: 16px;
                color: #666666;
                background-color: #edefed;
                text-align: left;
                padding: 62px 53px 67px 53px;
                line-height: 1.74;
                left: 0;
                top: 0;
                opacity: 0;
                width: 100%;
                transform: scaleY(0);
                transform-origin: top;
                @include transition(all 0.3s);
                @media (max-width: 1600px) {
                    padding: 62px 30px;
                }
                @media (max-width: 1280px) {
                    padding: 40px 30px;
                }
            }
        }
        &.style2 {
            &:hover {
                .pxl-item-desc {
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
            .pxl-meta-inner {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 16px 0 20px 0;
                background-color: $link_color;
                z-index: 2;
                position: relative;
                cursor: pointer;
                @media (max-width: 1600px) {
                    padding: 15px;
                }
                .pxl-item--icon {
                    padding-top: 5px;
                    svg {
                        height: 21px;
                        fill: $primary_color;
                        width: auto;
                    }
                }
                .pxl-item--title {
                    font-size: 20px;
                    font-weight: 500;
                    color: #fff;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.2;
                    @media (max-width: 1600px) {
                        font-size: 18px;
                    }
                }
            }
            .pxl-item-desc {
                position: absolute;
                font-size: 16px;
                color: #666666;
                background-color: #edefed;
                text-align: left;
                padding: 62px 53px 67px 53px;
                line-height: 1.74;
                left: 100%;
                top: 0;
                opacity: 0;
                width: 100%;
                transform: scaleY(0);
                transform-origin: top;
                @include transition(all 0.3s);
                @media (max-width: 1600px) {
                    padding: 62px 30px;
                }
                @media (max-width: 1280px) {
                    padding: 40px 30px;
                }
                @media (max-width: 1200px) {
                    padding: 20px 30px;
                    font-size: 15px;
                }
                @media (max-width: 767px) {
                    display: none;
                }
            }
        }
        &.style3 {
            &:hover {
                .pxl-item-desc {
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
            .pxl-meta-inner {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 16px 0 20px 0;
                background-color: $link_color;
                z-index: 2;
                position: relative;
                cursor: pointer;
                @media (max-width: 1600px) {
                    padding: 15px;
                }
                .pxl-item--icon {
                    padding-top: 5px;
                    svg {
                        height: 21px;
                        fill: $primary_color;
                        width: auto;
                    }
                }
                .pxl-item--title {
                    font-size: 20px;
                    font-weight: 500;
                    color: #fff;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.2;
                    @media (max-width: 1600px) {
                        font-size: 18px;
                    }
                }
            }
            .pxl-item-desc {
                position: absolute;
                font-size: 16px;
                color: #666666;
                background-color: #edefed;
                text-align: left;
                padding: 62px 53px 67px 53px;
                line-height: 1.74;
                left: 100%;
                bottom: 0;
                opacity: 0;
                width: 100%;
                transform: scaleY(0);
                transform-origin: bottom;
                @include transition(all 0.3s);
                @media (max-width: 1600px) {
                    padding: 62px 30px;
                }
                @media (max-width: 1280px) {
                    padding: 40px 30px;
                }
                @media (max-width: 1200px) {
                    padding: 20px 30px;
                    font-size: 15px;
                }
            }
        }
        &.style4 {
            &:hover {
                .pxl-item-desc {
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
            .pxl-meta-inner {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 16px 0 20px 0;
                background-color: $link_color;
                z-index: 2;
                position: relative;
                cursor: pointer;
                @media (max-width: 1600px) {
                    padding: 15px;
                }
                .pxl-item--icon {
                    padding-top: 5px;
                    svg {
                        height: 21px;
                        fill: $primary_color;
                        width: auto;
                    }
                }
                .pxl-item--title {
                    font-size: 20px;
                    font-weight: 500;
                    color: #fff;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.2;
                    @media (max-width: 1600px) {
                        font-size: 18px;
                    }
                }
            }
            .pxl-item-desc {
                position: absolute;
                font-size: 16px;
                color: #666666;
                background-color: #fff;
                text-align: left;
                padding: 62px 53px 67px 53px;
                line-height: 1.74;
                left: 0;
                bottom: 100%;
                opacity: 0;
                width: 100%;
                transform: scaleY(0);
                transform-origin: bottom;
                @include transition(all 0.3s);
                @media (max-width: 1600px) {
                    padding: 62px 30px;
                }
                @media (max-width: 1280px) {
                    padding: 40px 30px;
                }
            }
        }
    }
    &.pxl-meta2 {
        .pxl-meta-inner {
            .pxl-item {
                display: inline-flex;
                align-items: center;
                border-right: 1px solid #313131;
                margin-right: 46px;
                padding-right: 51px;
                &:last-child {
                    border-right: none;
                    margin-right: 0 !important;
                    padding-right: 0 !important;
                }
                .pxl-item--icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 41px;
                    min-width: 41px;
                    height: 41px;
                    background-color: $primary_color;
                    svg {
                        height: 21px;
                        fill: #fff;
                        width: auto;
                    }
                    i {
                        color: #fff;
                        font-size: 21px;
                    }
                }
                .pxl-item-content {
                    .pxl-item-desc {
                        font-size: 16px;
                        color: #ffffff;
                        @include ft_theme_default($ft_theme_default);
                        line-height: 1.1;
                        margin-bottom: 10px;
                    }
                    .pxl-item--title {
                        font-size: 16px;
                        color: #c2c2c2;
                        line-height: 1.1;
                    }
                }
            }
        }
    }
    &.pxl-meta3 {
        .pxl-meta-inner {
            background-color: $primary_color;
            clip-path: polygon(94% 0, 100% 14%, 100% 100%, 0 100%, 0 0);
            padding: 47px 36px 46px 40px;
            @media (max-width: 1024px) {
                clip-path: none;
            }
            .pxl-item-desc {
                font-size: 18px;
                color: #fff;
                line-height: 1.67;
            }
        }
    }
    &.pxl-meta4 {
        .pxl-meta-inner {
            .pxl-item  {
                display: inline-flex;
                align-items: center;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                .pxl-item--icon {
                    line-height: 1;
                    svg {
                        width: auto;
                        height: 21px;
                        fill: $primary_color;
                    }
                }
                .pxl-item--title {
                    font-size: 18px;
                    color: $link_color;
                    font-weight: 500;
                }
            }
        }
    }
    &.pxl-meta5 {
        .pxl-meta-inner {
            background-color: $primary_color;
            padding: 90px 55px 100px 53px;
            clip-path: polygon(7% 0, 100% 0, 100% 100%, 0px 100%, 0 9%);
            .pxl-item--title {
                font-size: 55px;
                font-weight: 500;
                color: #fff;
                @include ft_theme_default($ft_theme_default);
                line-height: 1.1;
                position: relative;
                border-bottom: 1px solid rgba(#fff, 0.200);
                padding-bottom: 20px;
                margin-bottom: 27px;
                overflow: hidden;
                .border-animate {
                    position: absolute;
                    width: 86px;
                    height: 3px;
                    background-color: #fff;
                    bottom: 0;
                    right: 0;
                }
            }
            .pxl-item-desc {
                color: #ffffff;
                font-size: 16px;
                padding-left: 1px;
                max-width: 88%;
            }
            .pxl-banner-button {
                margin-top: 89px;
                @media (max-width: 575px) {
                    margin-top: 50px;
                }
                .pxl-button-link {
                    display: inline-flex;
                    align-items: center;
                    line-height: 55px;
                    font-size: 14px;
                    letter-spacing: 0.72px;
                    text-transform: uppercase;
                    color: #000;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    z-index: 1;
                    position: relative;
                    &:hover {
                        .pxl-btn-icon {
                            svg {
                                transform: rotate(45deg);
                            }
                        }
                    }
                    .pxl--btn-text {
                        padding: 0 41px 0 43px;
                        position: relative;
                        background-color: #fff;
                        @include transition(all 0.3s);
                        @media (max-width: 575px) {
                            padding: 0 30px 0 30px;
                        }
                    }
                    .pxl-btn-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 55px;
                        height: 55px;
                        min-width: 55px;
                        background-color: $link_color;
                        svg {
                            height: 21px;
                            width: auto;
                            line-height: 1;
                            transform: rotate(0);
                            @include transition(all 0.3s);
                            path {
                                fill: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
    &.pxl-meta6 {
        .pxl-meta-inner {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .pxl-item {
                width: 25%;
                border-width: 0 0 1px 1px;
                border-color: #d9d9d9;
                border-style: solid;
                padding: 43px 30px 42px 59px;
                @include transition(all 0.3s);
                position: relative;
                @media (max-width: 1280px) {
                    padding: 43px 20px 42px 20px;
                }
                @media (max-width: 1200px) {
                    width: 50%;
                }
                @media (max-width: 480px) {
                    width: 100%;
                }
                &:before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    bottom: -1px;
                    left: 0;
                    transform-origin: center center;
                    height: 3px;
                    background-color: $primary_color;
                    @include transition(all 0.3s);
                    transform: scaleX(0);
                    opacity: 0;
                }
                &:hover {
                    &:before {
                        opacity: 1;
                        transform: scaleX(1);
                    }
                }
                &:last-child {
                    border-right: 1px solid #d9d9d9;
                }
                .pxl-item-desc {
                    font-size: 22px;
                    font-weight: 500;
                    color: $link_color;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.1;
                    margin-bottom: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    @media (max-width: 1280px) {
                        font-size: 20px;
                    }
                }
                .pxl-item--title {
                    font-size: 16px;
                    color: #666666;
                    line-height: 1.1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
    &.pxl-meta7 {
        .pxl-meta-inner {
            background-color: $link_color;
            padding: 53px 42px 45px 52px;
            .pxl-item--title {
                font-size: 25px;
                color: #fff;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                line-height: 1.38;
                margin-bottom: 21px;
                margin-left: -3px;
            }
            .pxl-item-desc {
                font-size: 16px;
                color: #c2c2c2;
                margin-bottom: 116px;
                @media (max-width: 575px) {
                    margin-bottom: 50px;
                }
            }
            .pxl-banner-button {
                text-align: right;
                .pxl-button-link {
                    svg {
                        height: 42px;
                        width: auto;
                        @include transition(all 0.3s);
                        transform: rotate(0deg);
                        path {
                            fill: #fff;
                            @include transition(all 0.3s);
                        }
                    }
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                }
            }
        }
    }
    &.pxl-meta8 {
        .pxl-meta-inner {
            background-color: $primary_color;
            padding: 37px 65px 31px 48px;
            clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
            @media (max-width: 1199px) {
                clip-path: none;
            }
            .pxl-item-desc {
                font-size: 16px;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: #ffffff;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                margin-bottom: 100px;
            }
            .pxl-item--title {
                color: #ffffff;
                font-weight: 500;
                font-size: 75px;
                @include ft_theme_default($ft_theme_default);
                line-height: 1;
            }
        }
    }
    &.pxl-meta9 {
        .pxl-meta-inner {
            background-color: $primary_color;
            padding: 29px 29px 52px 44px;
            .pxl-banner-button {
                text-align: right;
                margin-bottom: 103px;
                a {
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                        }
                    }
                    svg {
                        height: 45px;
                        width: auto;
                        @include transition(all 0.3s);
                        path {
                            fill: #fff;
                        }
                    }
                }
            }
            .pxl-item-desc {
                font-size: 25px;
                color: #ffffff;
                font-weight: 500;
                line-height: 35px;
                max-width: 95%;
                display: inline-block;
                @include ft_theme_default($ft_theme_default);
            }
        }
    }

    &.pxl-meta10 {
        .pxl-meta-inner {
            padding: 44px 42px 35px 50px;
            position: relative;
            .pxl-inner-link {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
            &:hover {
                .pxl-banner-button {
                    .pxl-button-link {
                        .pxl-btn-icon {
                            svg {
                                animation: aniArrow01 0.3s linear 1;
                            }
                        }
                    }
                }
            }
            @include transition(all 0.3s);
            .pxl-item-desc {
                color: #FFFFFF;
                font-size: 16px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: -0.5px;
                max-width: 82%;
                @media (max-width: 1280px) {
                    max-width: 100%;
                }
            }
            .pxl-banner-button {
                text-align: right;
                margin-top: 163px;
                .pxl-button-link {
                    display: inline-flex;
                    line-height: 1;
                    z-index: 2;
                    position: relative;
                    &:hover {
                        .pxl-btn-icon {
                            svg {
                                transform: rotate(45deg);
                            }
                        }
                    }
                    .pxl-btn-icon {
                        line-height: 1;
                        overflow: hidden;
                        display: inline-block;
                        svg {
                            height: 41px;
                            width: auto;
                            @include transition(all 0.3s);
                            path {
                                fill: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

//pxl-contact-form
.pxl-contact-form1 {
    p {
        margin: 0;
    }
    span {
        margin: 0 !important;
    }
    br {
        display: none;
    }
    .wpcf7-response-output {
        margin: 0 15px !important;
        position: absolute;
        bottom: 0;
        width: 94%;
        left: 0;
        padding: 3px 15px !important;
    }
    .contact1 {
        .pxl-contact-inner {
            background-color: #191919;
            text-align: center;
            border-left: 1px solid rgba(#fff, 0.129);
            .pxl-item-title {
                font-size: 23px;
                color: #ffffff;
                font-weight: 500;
                padding: 21px 0;
                @include ft_theme_default($ft_theme_default);
                border-bottom: 1px solid rgba(#fff, 0.129);
                position: relative;
                margin-bottom: 64px;
                @media (max-width: 1366px) {
                    margin-bottom: 29px;
                }
                &:after {
                    content: '';
                    position: absolute;
                    background-color: $primary_color;
                    height: 2px;
                    width: 47%;
                    left: 50%;
                    bottom: -1px;
                    transform: translate(-50%,0);
                }
            }
            .pxl-item-desc {
                font-size: 16px;
                color: #c2c2c2;
                max-width: 76%;
                display: inline-block;
                letter-spacing: 1.1px;
                font-weight: 400;
                @media (max-width: 1850px) {
                    max-width: 90%;
                }
                @media (max-width: 1550px) {
                    font-size: 15px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    margin: 0 auto;
                }
            }
            .pxl-inner-form {
                padding: 40px 73px 70px 67px;
                @media (max-width: 1850px) {
                    padding: 40px 50px 70px 50px;
                }
                @media (max-width: 1600px) {
                    padding: 40px 30px 70px 30px;
                }
                @media (max-width: 575px) {
                    padding: 40px 15px 70px 15px;
                }
                .form {
                    margin-bottom: 11px;
                    position: relative;
                    text-align: left;
                    .wpcf7-not-valid-tip {
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        transform: translate(0,-50%);
                    }
                    &:before {
                        content: '';
                        border-style: solid;
                        border-color: transparent transparent transparent #fff;
                        border-width: 9px;
                        position: absolute;
                        top: -9px;
                        left: -9px;
                        opacity: 1;
                        transform: translateY(0) rotate(226deg);
                        @include transition(all 250ms linear 0ms);
                    }
                    &:after {
                        content: '';
                        width: 0;
                        height: 100%;
                        background-color: #fff;
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 1;
                        @include transition(all 250ms linear 0ms);
                    }
                    &:hover, &:focus {
                        &:after {
                            width: 100%;
                        }
                        input {
                            color: $link_color;
                        }
                        .pxl-select-higthlight {
                            color: $link_color;
                            &:before {
                                color: $link_color;
                            }
                        }
                    }
                    .wpcf7-form-control-wrap {
                        z-index: 2;
                    }
                    input {
                        background-color: unset;
                        @include border-radius(0);
                        border: 1px solid rgba(#fff, 0.149);
                        font-size: 14px;
                        color: #c2c2c2;
                        height: 55px;
                        padding: 0 20px;
                        &:focus {
                            color: $link_color;
                            border-color: #fff;
                            background-color: #fff !important;
                        }
                    }
                    .pxl-select {
                        text-align: left;
                    }
                    .pxl-select-higthlight {
                        background-color: unset;
                        @include border-radius(0);
                        border: 1px solid rgba(#fff, 0.149);
                        font-size: 14px;
                        color: #c2c2c2;
                        height: 55px;
                        padding: 0 23px;
                        &:before {
                            right: 12px;
                            color: #c2c2c2;
                        }
                        &.active {
                            color: $link_color;
                            border-color: #fff;
                            background-color: #fff !important;
                            &:before {
                                color: $link_color;
                            }
                        }
                    }
                    .pxl-select-options {
                        @include border-radius(0);
                        font-size: 14px;
                        color: $link_color;
                    }
                }
                .contact-submit {
                    margin-top: 30px;
                }
                .btn-contact7 {
                    border: none;
                    font-size: 14px;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    color: #ffffff;
                    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: space-between;
                    .pxl-btn-text {
                        border: 1px solid $primary_color;
                        padding: 0 30px;
                        width: inherit;
                        @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;
                        margin-left: 5px !important;
                        svg {
                            height: 20px;
                            width: auto;
                            transform: rotate(0deg);
                            @include transition(all 0.3s);
                            path {
                                fill: #fff;
                            }
                        }
                    }
                    &:hover, &:active, &:focus {
                        padding: unset;
                        background-color: unset;
                        .pxl-btn-text {
                            &:before {
                                width: 100%;
                            }
                        }
                        .pxl-btn-icon {
                            svg {
                                transform: rotate(45deg);
                            }
                        }
                    }
                }
            }
        }
    }
    .contact2 {
        .pxl-contact-inner {
            text-align: center;
            .pxl-item-title {
                font-size: 26px;
                font-weight: 500;
                color: #fff;
                @include ft_theme_default($ft_theme_default);
                background-color: $primary_color;
                padding: 24px 20px;
                clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 25%, 5% 0);
                @media (max-width: 1199px) {
                    font-size: 25px;
                }
            }
            .pxl-item-desc {
                font-size: 16px;
                color: $link_color;
                border-bottom:  1px solid #d9d9d9;
                padding: 34px;
                padding-bottom: 42px;
                @media (max-width: 1550px) {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    margin: 0 auto;
                }
            }
            .form {
                position: relative;
                .wpcf7-not-valid-tip {
                    position: absolute;
                    top: 50%;
                    right: 24px;
                    transform: translate(0,-50%);
                }
                input {
                    font-size: 16px;
                    color: #666666;
                    background-color: unset;
                    border: none;
                    border-bottom:  1px solid #d9d9d9;
                    @include border-radius(0);
                    height: 64px;
                    padding: 0 24px;
                    @media (max-width: 1280px) {
                        font-size: 14px;
                    }
                    &:focus {
                        border-color: #d9d9d9;
                        color: $link_color;
                    }
                }
            }
            .pxl-select {
                .pxl-select-higthlight {
                    font-size: 16px;
                    color: #666666;
                    background-color: unset;
                    border: none;
                    border-bottom:  1px solid #d9d9d9;
                    @include border-radius(0);
                    height: 64px;
                    padding: 0 24px;
                    &.active {
                        border-color: #d9d9d9;
                        color: $link_color;
                    }
                    @media (max-width: 1280px) {
                        font-size: 14px;
                        text-align: left;
                    }
                }
                .pxl-select-options {
                    text-align: left;
                    @include border-radius(0);
                    li {
                        font-size: 15px;
                        color: #666666;
                        @media (max-width: 1280px) {
                            font-size: 14px;
                        }
                        &:hover {
                            color: $link_color;
                        }
                    }
                }
            }
            .contact-submit {
                margin-top: 29px;
                .btn-contact7 {
                    padding: 0;
                    background-color: unset;
                    line-height: 1.3;
                    font-size: 14px;
                    letter-spacing: 0.69px;
                    text-decoration: underline;
                    text-transform: uppercase;
                    color: #000000;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    &:hover, &:active, &:focus {
                        color: $primary_color;
                    }
                }
            }
            .pxl-inner-form {
                padding-bottom: 34px;
                border:  1px solid #d9d9d9;
                background-color: #fff;
            }
        }
    }
    .contact3 {
        + .wpcf7-response-output {
            bottom: -40px;
            width: 100%;
            left: 0;
            margin: 0 !important;
        }
        .pxl-contact-inner {
            border: 1px solid #d9d9d9;
            .pxl-item-message {
                .wpcf7-form-control-wrap {
                    display: flex;
                }
            }
            .row {
                margin: 0;
                .col-lg-6 {
                    padding: 0;
                }
            }
            .form {
                position: relative;
                .wpcf7-not-valid-tip {
                    position: absolute;
                    top: 0;
                    left: 25px;
                }
                input, textarea, .pxl-select-higthlight {
                    border-radius: 0;
                    background-color: #fff;
                    font-size: 16px;
                    color: #666666;
                    border: none;
                    border-bottom: 1px solid #d9d9d9;
                    font-family: 'Satoshi', sans-serif;
                    padding: 0 25px;
                    height: 59px;
                    &:focus, &:hover {
                        color: $link_color;
                    }
                    @media (max-width: 480px) {
                        font-size: 15px;
                    }
                }
                textarea {
                    height: 175px;
                    padding: 14px 25px;
                }
                .pxl-select-higthlight {
                    padding: 0px 25px 3px 25px;
                    &:before {
                        font-size: 10px;
                        right: 24px;
                    }
                }
                &.pxl-item-name, &.pxl-item-phone {
                    input {
                        border-right: 1px solid #d9d9d9;
                        @media (max-width: 767px) {
                            border-right: none;
                        }
                    }
                }
                .pxl-select-higthlight {
                    &:before {
                        color: $link_color;
                    }
                }
            }
            .pxl-contact-check {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 25px;
                margin-top: -1px;
                @media (max-width: 1500px) {
                    padding-left: 15px;
                }
                @media (max-width: 1199px) {
                    margin-top: 0;
                    display: block;
                    padding: 15px;
                }
                .wpcf7-list-item {
                    padding-left: 32px;
                }
                .pxl-item-accept {
                    @media (max-width: 1199px) {
                        margin-bottom: 20px;
                    }
                    .wpcf7-list-item-label {
                        font-size: 15px;
                        color: $link_color;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 1;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        @media (max-width: 480px) {
                            font-size: 14px;
                        }
                        &:before {
                            border: none;
                            background-color: #d9d9d9;
                        }
                        &:after {
                            color: $link_color;
                        }
                    }
                }
            }
            .contact-submit {
                button {
                    font-size: 14px;
                    letter-spacing: 0.7px;
                    text-transform: uppercase;
                    font-weight: 500;
                    color: #fff;
                    background-color: $primary_color;
                    @include ft_theme_default($ft_theme_default);
                    display: flex;
                    align-items: center;
                    line-height: 64px;
                    padding: 0 30px 0 33px;
                    @media (max-width: 1500px) {
                        line-height: 60px;
                        padding: 0 20px 0 28px;
                    }
                    @media (max-width: 1199px) {
                        width: 100%;
                        justify-content: space-between;
                    }
                    @media (max-width: 480px) {
                        padding: 0 20px;
                    }
                    &:hover {
                        .pxl-btn-icon {
                            svg {
                                transform: rotate(45deg);
                            }
                        }
                    }
                    .pxl-btn-icon {
                        line-height: 1;
                        @include transition(all 0.3s);
                        &.pxl-pl-5 {
                            padding-left: 96px;
                            @media (max-width: 1500px) {
                                padding-left: 30px;
                            }
                            @media (max-width: 480px) {
                                padding-left: 30px;
                            }
                        }
                        svg {
                            height: 26px;
                            width: auto;
                            @include transition(all 0.3s);
                            transform: rotate(0);
                            path {
                                fill: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
    .contact4 {
        + .wpcf7-response-output {
            position: relative;
            margin: 0 !important;
            width: 100%;
        }
        .pxl-contact-inner {
            text-align: center;
            .form {
                position: relative;
                .wpcf7-not-valid-tip {
                    position: absolute;
                    top: 0;
                    right: 24px;
                }
                input {
                    font-size: 16px;
                    color: #666666;
                    background-color: unset;
                    border: 1px solid #d9d9d9;
                    border-top: none;
                    @include border-radius(0);
                    height: 64px;
                    padding: 0 24px;
                    @media (max-width: 1280px) {
                        font-size: 14px;
                    }
                    &:focus {
                        border-color: #d9d9d9;
                        color: $link_color;
                    }
                }
            }
            .pxl-select {
                .pxl-select-higthlight {
                    font-size: 16px;
                    color: #666666;
                    background-color: unset;
                    border: 1px solid #d9d9d9;
                    border-top: none;
                    @include border-radius(0);
                    height: 64px;
                    padding: 0 24px;
                    &.active {
                        border-color: #d9d9d9;
                        color: $link_color;
                    }
                    @media (max-width: 1280px) {
                        font-size: 14px;
                        text-align: left;
                    }
                }
                .pxl-select-options {
                    text-align: left;
                    @include border-radius(0);
                    li {
                        font-size: 15px;
                        color: #666666;
                        @media (max-width: 1280px) {
                            font-size: 14px;
                        }
                        &:hover {
                            color: $link_color;
                        }
                    }
                }
            }
            .contact-submit {
                margin-top: 41px;
                p {
                    display: block;
                }
                .btn-contact7 {
                    padding: 0;
                    background-color: $primary_color;
                    line-height: 1.3;
                    font-size: 14px;
                    letter-spacing: 0.69px;
                    text-transform: uppercase;
                    color: #fff;
                    height: 65px;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    width: 100%;
                    &:hover, &:active, &:focus {
                        background-color: $link_color;
                    }
                }
            }
            .pxl-inner-form {
                padding-bottom: 30px;
                border-top:  1px solid #d9d9d9;
                background-color: #fff;
            }
        }
    }
    .contact5 {
        .pxl-inner-form {
            position: relative;
            input {
                font-size: 16px;
                color: #666666;
                border: 1px solid #d9d9d9;
                height: 60px;
                letter-spacing: -0.3px;
                background-color: #fff;
                @include border-radius(0);
                padding: 0 60px 0 20px;
                &:focus {
                    border-color: $link_color;
                    color: $link_color;
                }
            }
            .contact-submit {
                position: absolute;
                top: 0;
                right: 0;
                .btn-contact7 {
                    padding: 0;
                    background-color: unset;
                    width: 60px;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    svg {
                        height: 22px;
                        width: auto;
                        @include transition(all 0.3s);
                        path {
                            fill: $link_color;
                            @include transition(all 0.3s);
                        }
                    }
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                }
            }
        }
    }
    .contact6 {
        + .wpcf7-response-output {
            bottom: -40px;
            width: 100%;
            left: 0;
            margin: 0 !important;
        }
        .pxl-contact-inner {
            .row {
                border: 1px solid #d9d9d9;
                border-bottom: 0;
                margin: 0;
                .col-lg-6 {
                    padding: 0;
                }
            }
            .form {
                position: relative;
                .wpcf7-not-valid-tip {
                    position: absolute;
                    top: 0;
                    left: 25px;
                }
                input, textarea, .pxl-select-higthlight {
                    border-radius: 0;
                    background-color: #fff;
                    font-size: 16px;
                    color: #666666;
                    border: none;
                    border-bottom: 1px solid #d9d9d9;
                    font-family: 'Satoshi', sans-serif;
                    padding: 0 25px;
                    height: 59px;
                    &:focus, &:hover {
                        color: $link_color;
                    }
                    @media (max-width: 480px) {
                        font-size: 15px;
                    }
                }
                textarea {
                    height: 163px;
                    padding: 14px 25px;
                    border: 1px solid #d9d9d9;
                }
                .pxl-select-higthlight {
                    padding: 0px 25px 3px 25px;
                    &:before {
                        font-size: 10px;
                        right: 24px;
                    }
                }
                &.pxl-item-name, &.pxl-item-phone {
                    input {
                        border-right: 1px solid #d9d9d9;
                        @media (max-width: 767px) {
                            border-right: none;
                        }
                    }
                }
                .pxl-select-higthlight {
                    &:before {
                        color: $link_color;
                    }
                }
            }
            .pxl-file1 ~ div,.pxl-file1{
                color: $link_color;
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 2px;
                text-transform: uppercase;
            }
            .pxl-upload {
                margin-top: 28px;
                margin-bottom: 32px;
                .row {
                    border: none;
                }
                .pxl-title-upload {
                    color: $link_color;
                    margin-bottom: 13px;
                }
                .pxl-file-upload-wrapper{
                    position: relative;
                    align-items: center;
                    padding-bottom: 0;
                    border-radius: 0;
                    background-color: #fff;
                    font-size: 16px;
                    color: #666666;
                    border: 1px solid #d9d9d9;
                    font-family: 'Satoshi', sans-serif;
                    padding: 0 20px;
                    height: 59px;
                    overflow: hidden;
                    width: 100%;
                    @media (max-width: 767px) {
                        display: inline-flex;
                    }
                    input {
                        &:focus {
                            border: none;
                        }
                    }
                    .pxl-file-upload-button {
                        border-radius: 2px;
                        border: 1px solid #8a8a8a;
                        background: #efefef;
                        color: var(--link-color);
                        font-size: 13px;
                        height: 22px;
                        padding: 0 23px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .pxl-file-upload-input {
                        font-size: 14px;
                        font-weight: 400;
                        height: 56px;
                        padding-left: 5px;
                        color: $link_color;
                        padding-right: 0;
                        border: none !important;
                        width: inherit;
                    }
                    .wpcf7-file {
                        visibility: unset !important;
                        width: 100%;
                        height: 100%;
                        z-index: 999;
                        left: 0;
                        @media (max-width: 767px) {
                            width: 25%;
                            height: 50%;
                            bottom: 8px;
                        }
                        @media (max-width: 676px) {
                            width: 30%;
                        }
                        @media (max-width: 575px) {
                            width: 35%;
                        }
                        @media (max-width: 480px) {
                            width: 50%;
                        }
                        @media (max-width: 360px) {
                            width: 60%;
                        }
                    }
                }
                .col-lg-6 {
                    align-content: center;
                }
                .pxl-text-upload {
                    padding-left: 28px;
                    @media (max-width: 767px) {
                        padding-left: 0;
                        padding-top: 30px;
                    }
                    p {
                        display: flex;
                        align-items: center;
                    }
                    .pxl-icon {
                        line-height: 1;
                        svg {
                            height: 17px;
                            width: auto;
                            fill: $primary_color;
                        }
                    }
                    .text-file-upload {
                        font-size: 16px;
                        color: $link_color;
                    }
                }
            }
            .pxl-contact-check {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: -3px;
                @media (max-width: 1500px) {
                    padding-left: 15px;
                }
                @media (max-width: 1199px) {
                    margin-top: 0;
                    display: block;
                    padding: 15px;
                }
                .wpcf7-list-item {
                    padding-left: 32px;
                }
                .pxl-item-accept {
                    margin-top: 10px;
                    @media (max-width: 1199px) {
                        margin-bottom: 20px;
                    }
                    .wpcf7-list-item-label {
                        font-size: 16px;
                        color: $link_color;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 1;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        @media (max-width: 480px) {
                            font-size: 14px;
                        }
                        &:before {
                            border: none;
                            background-color: #d9d9d9;
                        }
                        &:after {
                            color: $link_color;
                        }
                    }
                }
            }
            .contact-submit {
                button {
                    font-size: 14px;
                    letter-spacing: 0.7px;
                    text-transform: uppercase;
                    font-weight: 500;
                    color: #fff;
                    background-color: $primary_color;
                    @include ft_theme_default($ft_theme_default);
                    display: flex;
                    align-items: center;
                    line-height: 64px;
                    padding: 0 30px 0 33px;
                    @media (max-width: 1500px) {
                        line-height: 60px;
                        padding: 0 20px 0 28px;
                    }
                    @media (max-width: 1199px) {
                        width: 100%;
                        justify-content: space-between;
                    }
                    @media (max-width: 480px) {
                        padding: 0 20px;
                    }
                    &:hover {
                        .pxl-btn-icon {
                            svg {
                                transform: rotate(45deg);
                            }
                        }
                    }
                    .pxl-btn-icon {
                        line-height: 1;
                        @include transition(all 0.3s);
                        &.pxl-pl-5 {
                            padding-left: 96px;
                            @media (max-width: 1500px) {
                                padding-left: 30px;
                            }
                            @media (max-width: 480px) {
                                padding-left: 30px;
                            }
                        }
                        svg {
                            height: 26px;
                            width: auto;
                            @include transition(all 0.3s);
                            transform: rotate(0);
                            path {
                                fill: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

//pxl-banner 
.pxl-banner1 {
    .pxl-box-inner {
        position: relative;
        padding-left: 105px;
        padding-top: 47px;
        padding-bottom: 53px;
        padding-right: 53px;
        @media (max-width: 575px) {
            padding: 45px 10px 50px 45px;
        }
        @media (max-width: 480px) {
            padding: 45px 0px 50px 15px;
        }
        .pxl-item--img1 {
            height: 564px;
            transition: all .3s ease-in-out;
            z-index: 1;
            position: relative;
            overflow: auto;
            scrollbar-width: none;
            overflow-y: hidden;
            border: 1px solid #d9d9d9;
            img {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: auto;
                transform: translateY(0);
                @include transition(transform 4s ease-out,top 4s ease-out);
                animation: slidetopbottom 8s ease-in-out infinite alternate;
            }
        }
        .pxl-item--img2 {
            background-color: $primary_color;
            width: 451px;
            height: 375px;
            position: absolute;
            bottom: 0;
            left: 0;
            img {
                mix-blend-mode: overlay;
                filter: brightness(1) invert(0);
            }
        }
        .pxl-item--img3 {
            position: absolute;
            top: 0;
            left: 60px;
            @media (max-width: 575px) {
                display: none;
            }
        }
        .pxl-item--img4 {
            position: absolute;
            bottom: 84px;
            right: 0;
        }
        .pxl-item--img3, .pxl-item--img4 {
            background-color: #fff;
            border: 1px solid #d9d9d9;
            padding: 7px;
            z-index: 1;
        }
        .pxl-item--icon {
            width: 96px;
            height: 96px;
            background-color: #d83d5d;
            z-index: 2;
            position: absolute;
            top: 6px;
            right: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            i {
                font-size: 41px;
            }
            svg {
                height: 41px;
                width: auto;
                .pxl-elemmentor {
                    fill: #fff;
                }
            }
        }
    }
}

.pxl-image-wg {
    @include transition(all 10ms linear 0ms);
}

//pxl-team-single
.pxl-team-single {
    &.pxl-team-single1 {
        .pxl-meta-inner {
            .col-6 {
                @media (max-width: 767px) {
                    flex: 0 0 100%;
                    max-width: 100%;
                }
            }
            .pxl-item--imgprimary {
                overflow: hidden;
                @include border-radius(8px);
                @media (max-width: 767px) {
                    margin-bottom: 30px;
                }
            }
            .pxl-inner-layout2 {
                padding-left: 33px;
                margin-top: -2px;
                @media (max-width: 1199px) {
                    padding-left: 0;
                }
            }
            .pxl-inner-heading {
                .pxl-sub-title {
                    font-size: 20px;
                    color: $primary_color;
                    font-family: 'Inter', sans-serif;
                    line-height: 1;
                    margin-bottom: 16px;
                    @media (max-width: 480px) {
                        font-size: 18px;
                        margin-bottom: 13px;
                    }
                }
                .pxl-item-heading {
                    font-size: 40px;
                    color: $link_color;
                    font-weight: bold;
                    margin-bottom: 17px;
                    @media (max-width: 880px) {
                        font-size: 35px;
                        margin-bottom: 13px;
                    }
                    @media (max-width: 480px) {
                        font-size: 30px;
                    }
                }
                .pxl-item-desc {
                    font-size: 17px;
                    color: #494949;
                    padding-right: 5px;
                    line-height: 1.75;
                }
            }
            .pxl-list-inner {
                padding-top: 25px;
                @media (max-width: 880px) {
                    padding-top: 20px;
                }
                .pxl-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 17px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    .pxl-list-sub {
                        font-size: 17px;
                        color: $link_color;
                        font-weight: 500;
                        width: 21%;
                        @media (max-width: 991px) {
                            width: 25%;
                        }
                        @media (max-width: 480px) {
                            width: 35%;
                        }
                    }
                    .pxl-list-title {
                        font-size: 17px;
                        font-weight: 400;
                        color: #494949;
                    }
                }
            }
            .pxl-item-social {
                margin-top: 29px;
                @media (max-width: 880px) {
                    margin-top: 20px;
                }
                .pxl-title-social {
                    font-size: 20px;
                    color: $link_color;
                    font-weight: bold;
                    
                    margin-bottom: 16px;
                }
                .pxl-icon-list {
                    display: flex;
                    align-items: center;
                    a {
                        width: 42px;
                        min-width: 42px;
                        height: 42px;
                        border: 1px solid #494949;
                        @include border-radius(50%);
                        color: #494949;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        transform: translateY(0px);
                        @include transition(all 0.3s);
                        &:last-child {
                            margin-right: 0;
                        }
                        &:hover {
                            color: $primary_color;
                            border-color: $primary_color;
                            transform: translateY(-3px);
                        }
                    }
                }
            }
        }
    }
}

//pxl-text-animation//
.pxl-text-animation1 {
    .pxl-item-inner {
        .content-inner {
            background-image: linear-gradient(to right, $gradient_color_to, $gradient_color_from, $gradient_color_to, $gradient_color_from);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .pxl-item-text {
            font-size: 48px;
            font-weight: bold;
            display: inline-block;
            line-height: 1.3;
            @extend .ft-heading;
            span {
                position: relative;
                z-index: 1;
                i {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                }
                .pxl-svg-line {
                    position: absolute;
                    top: 50%;
                    left: -23px;
                    right: 0;
                    @include transform(translate(0, -50%));
                    width: 110%;
                    margin-top: -2px;
                    height: auto;
                    fill: none;
                    stroke-dashoffset: 0;
                    stroke-dasharray: 3000;
                    @media (max-width: 767px) {
                        display: none;
                    }
                }
            }
        }
    }
}
//end//

//pxl-client-carousel//
.pxl-client-carousel1 {
    &.style-default {
        .pxl-swiper-wrapper {
            align-items: center;
        }
        .pxl-item--inner {
            position: relative;
            &:hover {
                .pxl-item--image {
                    img {
                        filter: none;
                        opacity: 1;
                    }
                }
            }
            .pxl-item--image {
                cursor: pointer;
                text-align: center;
                @include transition(all 0.3s);
                padding: 0 18px;
                img {
                    @include transition(all 0.3s);
                    filter: grayscale(100%) brightness(0.8);
                    opacity: 0.251;
                }
            }
        }
    }
}

//pxl-text-editor//
.pxl-text-editor {
    .pxl-text-style1 {
        cite {
            font-style: inherit;
            color: #005ef9;
        }
    }
}

//pxl-video-single//
.pxl-video-single {
    &.pxl-video-single1 {
        .pxl-meta-inner {
            .pxl-item-layout1  {
                padding: 0 120px 0 100px;
                position: relative;
                @media (max-width: 1199px) {
                    padding: 0 50px;
                }
                @media (max-width: 480px) {
                    padding: 0 30px;
                }
                @media (max-width: 360px) {
                    padding: 0;
                }
                &:before {
                    content: '';
                    position: absolute;
                    top: 90px;
                    right: 30px;
                    mask-image: url(../img/mark-img1.png);
                    -webkit-mask-image: url(../img/mark-img1.png);
                    -ms-mask-image: url(../images/mark-img1.png);
                    -o-mask-image: url(../images/mark-img1.png);
                    -webkit-mask-repeat: no-repeat;
                    -ms-mask-repeat: no-repeat;
                    -o-mask-repeat: no-repeat;
                    -webkit-mask-position: center center;
                    -ms-mask-position: center center;
                    -o-mask-position: center center;
                    overflow: hidden;
                    @include transition(all 0.3s);
                    mask-size: contain;
                    width: 95px;
                    height: 110px;
                    animation: pxl_video_ani_1 10s ease infinite;
                    background-size: 400% 400%;
                    background-image: linear-gradient(to right, $gradient_color_from,  $gradient_color_to, $gradient_color_from,  $gradient_color_to);
                    z-index: 1;
                    @media (max-width: 480px) {
                        display: none;
                    }
                }
            }
            .pxl-item--imgprimary {
                mask-image: url(../img/mark-img1.png);
                -webkit-mask-image: url(../img/mark-img1.png);
                -ms-mask-image: url(../images/mark-img1.png);
                -o-mask-image: url(../images/mark-img1.png);
                -webkit-mask-repeat: no-repeat;
                -ms-mask-repeat: no-repeat;
                -o-mask-repeat: no-repeat;
                -webkit-mask-position: center center;
                -ms-mask-position: center center;
                -o-mask-position: center center;
                overflow: hidden;
                width: 100%;
                height: 100%;
                @include transition(all 0.3s);
                mask-size: contain;
                position: relative;
                &:before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    width: 85%;
                    height: 85%;
                    background-image: url(../img/shape-video1.png);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    z-index: 1;
                }
            }

            .pxl-item-content {
                @include border-radius(30px);
                overflow: hidden;
                background-color: #fff;
                box-shadow: 0px 0px 5px 5px rgba(225,225,225,0.2);
                margin-top: -170px;
                position: relative;
                z-index: 2;
                @media (max-width: 1200px) {
                    margin-top: -130px;
                }
                @media (max-width: 1024px) {
                    margin-top: 30px;
                }
                .row {
                    align-items: center;
                }
                .pxl-progressbar {
                    padding-left: 35px;
                    width: 75%;
                    padding-top: 43px;
                    padding-bottom: 40px;
                    @media (max-width: 1199px) {
                        padding: 30px 0 25px 20px;
                        width: 70%;
                    }
                    @media (max-width: 575px) {
                        width: 100%;
                    }
                    @media (max-width: 480px) {
                        padding: 20px 15px;
                    }
                    .pxl--item + .pxl--item {
                        margin-top: 15px;
                    }
                    .pxl--item {
                        .col-6 {
                            @media (max-width: 575px) {
                                max-width: 60%;
                                flex: 60%;
                            }
                            @media (max-width: 480px) {
                                max-width: 100%;
                                flex: 100%;
                            }
                        }
                        .col-4 {
                            @media (max-width: 480px) {
                                max-width: 100%;
                                flex: 100%;
                            }
                        }
                        .row {
                            align-items: center;
                        }
                        .pxl--meta {
                            @media (max-width: 480px) {
                                margin-bottom: 10px;
                            }
                            .pxl--title {
                                color: #1c1c1c;
                                font-size: 15px;
                                font-weight: bold;
                                @extend .ft-heading;
                                margin-bottom: 0;
                                @media (max-width: 1200px) {
                                    font-size: 13px;
                                }
                            }
                        }
                        .pxl-progressbar--wrap {
                            height: 10px;
                            background-color: #f4f4f4;
                            @include border-radius(10px);
                            .pxl--progressbar {
                                @include border-radius(10px);
                                height: 10px;
                                background: linear-gradient(90deg, #002aff 0%, #07ebff 80%);
                                position: relative;
                            }
                        }
                    }
                }
                .pxl-item-video {
                    position: relative;
                    @include transition(all 0.3s);
                    position: absolute;
                    top: 50%;
                    right: 0;
                    max-width: 214px;
                    transform: translateY(-50%);
                    height: 100%;
                    @media (max-width: 1199px) {
                        max-width: 200px;
                    }
                    @media (max-width: 575px) {
                        position: relative;
                        top: unset;
                        right: unset;
                        transform: unset;
                        max-width: unset;
                        display: flex;
                        justify-content: center;
                        padding-bottom: 20px;
                    }
                    img {
                        @media (max-width: 575px) {
                            @include border-radius(30px);
                        }
                    }
                    .pxl-image-video {
                        position: relative;
                        overflow: hidden;
                        height: 100%;
                        .pxl-space {
                            position: absolute;
                            right: 40px;
                            bottom: 75px;
                            width: 15px;
                            height: 15px;
                            color: #ff5337;
                            font-size: 15px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            i {
                                animation: pxl_spin 10s linear infinite;
                            }
                        }
                    }
                    .pxl-btn-video {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        font-size: 40px;
                        color: #fff;
                        z-index: 2;
                    }
                }
            }
        }
    }
}

//pxl-list-meta//
.pxl-list-meta {
    &.pxl-list-meta1 {
        .pxl-item {
            display: block;
            border-bottom: 1px solid #DEDEDE;
            padding-bottom: 20px;
            margin-bottom: 20px;
            &:last-child {
                border-bottom: 0;
                padding-bottom: 0;
                margin-bottom: 0;
            }
            .pxl-item-title {
                white-space: nowrap;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                color: $link_color;
            }
            .pxl-item-desc {
                word-wrap: break-word;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                color: $secondary_color;
            }
        }
    }
    &.pxl-list-meta2 {
        .pxl-meta-inner {
            .pxl-item {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                &:last-child {
                    margin-bottom: 0;
                }
                .pxl-item-icon {
                    width: 30px;
                    min-width: 30px;
                    height: 30px;
                    border: 1px solid #DEDEDE;
                    border-radius: 50%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    svg {
                        path {
                            fill: $link_color;
                        }
                    }
                }
                .pxl-item-desc {
                    font-family: Inter;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    color: $link_color;
                }
            }
        }
    }

    &.pxl-list-meta3 {
        .pxl-item {
            position: relative;
            border: 1px solid #DEDEDE;
            border-bottom: 0 !important;
            padding: 15px 23px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:last-child {
                border-bottom: 1px solid #DEDEDE !important;
            }
            &:hover {
                .pxl-item-arrow {
                    opacity: 1;
                }
            }
            .pxl-item-content {
                display: flex;
                align-items: center;
                .pxl-item--icon {
                    padding-top: 3px;
                    i {
                        font-size: 20px;
                        color: $primary_color;
                    }
                    svg {
                        height: 20px;
                        width: auto;
                        path {
                            fill: $primary_color;
                        }
                    }
                }
                .pxl-item--text {
                    font-family: Outfit;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    text-transform: capitalize;
                    color: $link_color;
                    @media (max-width: 1199px) {
                        font-size: 16px;
                    }
                    @media (max-width: 480px) {
                        font-size: 15px;
                    }
                }
            }
            .pxl-item-arrow {
                color: $link_color;
                opacity: 0.3;
                font-size: 14px;
                @include transition(all 0.3s);
            }
        }
    }

    &.pxl-list-meta4 {
        border: 1px solid #DEDEDE;
        padding: 39px 38px 17px 39px;
        @media (max-width: 1199px) {
            padding: 39px 20px 17px 20px;
        }
        .pxl-heading {
            font-family: Outfit;
            font-size: 24px;
            font-style: normal;
            font-weight: 500;
            letter-spacing: -0.48px;
            line-height: 1.2;
            color: $link_color;
            position: relative;
            margin-bottom: 27px;
            padding-top: 13px;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 40px;
                height: 1px;
                background-color: $primary_color;
            }
            @media (max-width: 991px) {
                font-size: 22px;
            }
        }
        .pxl-item-list {
            .pxl-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-family: Outfit;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                color: $link_color;
                border-top: 1px solid #DEDEDE;
                padding: 15px 0;
                position: relative;
                &:after {
                    content: '';
                    width: 0;
                    height: 1px;
                    left: 0;
                    bottom: 0;
                    position: absolute;
                    background-color: $primary_color;
                    opacity: 0;
                    @include transition(all 0.3s);
                }
                &:last-child {
                    &:after {
                        display: none;
                    }
                }
                .pxl-item--icon {
                    i {
                        font-size: 15px;
                        color: $primary_color;
                    }
                    svg {
                        height: 15px;
                        width: auto;
                        path {
                            fill: $primary_color;
                        }
                    }
                }
                .pxl-item-arrow {
                    color: $link_color;
                    opacity: 0.3;
                    @include transition(all 0.3s);
                }
                &:hover {
                    &:after {
                        width: 100%;
                        opacity: 1;
                    }
                    .pxl-item-arrow {
                        opacity: 1;
                    }
                }
                .pxl-item-content {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}

//pxl-list-down//
.pxl-list-down {
    &.pxl-list-down1 {
        border: 1px solid #f4f5f5;
        @include border-radius(30px);
        padding: 35px 22px 30px 22px;
        @media (max-width: 991px) {
            padding: 35px 15px 30px 15px
        }
        .pxl--item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 57px;
            background-color: #f4f8fe;
            @include border-radius(50px);
            padding: 8px 10px;
            margin-bottom: 30px;
            @include transition(all 0.3s);
            &:last-child {
                margin-bottom: 0;
            }
            &:hover {
                .pxl-item-link {
                    &:before {
                        opacity: 0;
                    }
                    &:after {
                        opacity: 1;
                    }
                }
            }
            .pxl-item--icon {
                width: 33px;
                min-width: 33px;
                height: 40px;
                font-size: 18px;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                @include border-radius(50px);
                background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
            }
            .pxl-item--content {
                line-height: 1;
                .pxl-item--text {
                    color: #080808;
                    font-family: 'Rubik', sans-serif;
                    font-size: 18px;
                    font-weight: 500;
                    margin-bottom: 0;
                    @media (max-width: 1024px) {
                        font-size: 16px;
                    }
                    @media (max-width: 991px) {
                        font-size: 14px;
                    }
                }
                .pxl-item--sub {
                    color: #666666;
                    font-family: 'Rubik', sans-serif;
                    font-size: 14px;
                }
            }
            .pxl-item-link {
                width: 35px;
                height: 35px;
                font-size: 17px;
                color: #fff;
                @include border-radius(50%);
                min-width: 35px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1;
                @include transition(all 0.3s);
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    transform-origin: center;
                    z-index: -1;
                    opacity: 1;
                    @include border-radius(50%);
                    @include transition(all 0.3s);
                    background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
                }
                &:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    transform-origin: center;
                    z-index: -1;
                    @include border-radius(50%);
                    @include transition(all 0.3s);
                    background: linear-gradient(90deg, #0031ff 0%, #8be6fc 100%);
                }
            }
        }
    }
}

//pxl-call//
.pxl-call {
    &.pxl-call1 {
        .pxl-box-inner {
            text-align: center;
            .pxl-item--image {
                position: relative;
                @include border-radius(30px);
                overflow: hidden;
                z-index: 1;
                &:before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                    height: 100%;
                    box-shadow: rgba(0, 0, 0, 1) 0px -100px 100px 0px inset;
                }
                .pxl-item-title {
                    font-weight: bold;
                    font-size: 20px;
                    color: #fff;
                    @extend .ft-heading;
                    position: absolute;
                    bottom: 20px;
                    left: 50%;
                    line-height: 1.5;
                    transform: translateX(-50%);
                    width: 70%;
                    @media (max-width: 991px) {
                        font-size: 16px;
                    }
                }
            }
            .pxl-item-content {
                background-color: #f4f8fe;
                position: relative;
                @include border-radius(0px 0px 30px 30px);
                padding: 58px 30px 35px 30px;
                margin-top: -6px;
                @media (max-width: 991px) {
                    padding: 50px 20px 35px 20px;
                }
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 8%;
                    @include border-radius(0px 0px 30px 30px);
                    background-color: #fff;
                }
                .pxl-item-phone {
                    font-weight: bold;
                    font-size: 20px;
                    @extend .ft-heading;
                    color: #080808;
                    line-height: 1.3;
                    margin-bottom: 10px;
                }
                .pxl-item-map {
                    color: #666666;
                    font-size: 14px;
                    font-family: 'Rubik', sans-serif;
                    margin-bottom: 13px;
                }
                .pxl-item-link {
                    .pxl-btn-tel {
                        display: inline-block;
                        line-height: 47px;
                        padding: 0 38px;
                        @include border-radius(50px);
                        font-size: 15px;
                        color: #fff;
                        font-weight: bold;
                        font-family: 'Rubik', sans-serif;
                        background-size: 290% 400%;
                        background-image: linear-gradient(to right, #0031ff, #8be6fc, #0031ff, #8be6fc);
                        &:hover {
                            background-position: 100% 0;
                            @include transition(all 0.4s ease-in-out);
                        }
                    }
                }
            }
        }
    }
}

//pxl-pagination//
.pxl-pagination1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    @media (max-width: 480px) {
        justify-content: center;
    }
    .pxl-item-dot {
        width: 26px;
        height: 26px;
        position: absolute;
        top: 51%;
        left: 50%;
        transform: translate(-50%,-50%);
        @include transition(all 0.3s);
        &:hover {
            .pxl-dot {
                transform: rotateY(180deg);
            }
        }
        @media (max-width: 880px) {
            display: none;
        }
        .pxl-dot-link {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
        }
        .pxl-dot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            @include transition(all 0.4s);
            &.dot-bt {
                margin-bottom: 10px;
                @include transition(all 0.3s);
            }
            span {
                width: 7px;
                height: 7px;
                min-width: 7px;
                background-color: $primary_color;
                display: inline-flex;
                @include transition(all 0.3s);
            }
        }
    }
    .pxl--item {
        display: flex;
        align-items: center;
        @include transition(all 0.3s);
        @media (max-width: 480px) {
            margin: 15px;
        }
        &:hover {
            .pxl-icon-link {
                background-color: $primary_color;
            }
            .pxl-title-inner {
                a {
                    text-decoration: underline;
                }
            }
        }
        .pxl-item-icon {
            &.pxl-mr-20 {
                @media (max-width: 480px) {
                    margin-right: 10px;
                }
            }
            &.pxl-ml-20 {
                @media (max-width: 480px) {
                    margin-right: 10px;
                }
            }
        }
        .pxl-icon-link {
            width: 61px;
            height: 61px;
            display: flex;
            align-items: center;
            justify-content: center;
            @include border-radius(0px);
            background-color: $link_color;
            @include transition(all 0.3s);
            @media (max-width: 767px) {
                width: 50px;
                height: 50px;
            }
            svg {
                height: 20px;
                width: auto;
                path {
                    stroke: #fff;
                }
            }
        }
        .pxl-icon-prev {
            svg {
                transform: rotate(180deg);
            }
        }
        .pxl-title-inner {
            a {
                font-weight: 500;
                font-size: 16px;
                letter-spacing: 0.8px;
                color: #121315;
                text-transform: uppercase;
                @include transition(all 0.3s);
                @include ft_theme_default($ft_theme_default);
                @media (max-width: 767px) {
                    font-size: 14px;
                }
            }
        }
    }
}

// Logo Marquee
.pxl-logo-marquee1 {
    position: relative;
    overflow: hidden;
    direction: ltr;
    .pxl-item--marquee {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        opacity: 0;
    }
    .pxl-logo-hidden {
        flex-wrap: nowrap;
        opacity: 0;
        visibility: hidden;
        white-space: nowrap;
    }
    .pxl-logo-hidden-wrap {
        overflow: hidden;
    }
    .pxl-logo-active {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        direction: ltr;
        .pxl-item--marquee {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
    .pxl-item--text {
        font-size: 60px;
        @extend .ft-theme-default;
        font-weight: 700;
        overflow: hidden;
        color: #000;
        width: 100%;
        position: relative;
    }
    .pxl-item--logo {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        margin: 10px 0;
        a {
            padding: 0 30px;
            box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 0.2);
            @include border-radius(15px);
            line-height: 117px;
            background-color: #fff;
        }
    }
    .pxl-item--inner {
        flex-wrap: nowrap;
        display: flex;
        width: 100%;
    }
    @media #{$min-xl} {
        .col-xl-pxl5 {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media #{$mm-lg} {
        .col-xl-pxl5 {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
}

.pxl-banner-video {
    &.pxl-banner-video1 {
        .pxl-box-inner {
            position: relative;
            margin-bottom: 40px;
            .pxl-video {
                height: 170px;
                width: 160px;
                min-width: 160px;
                z-index: 1;
                position: absolute;
                bottom: -38px;
                left: 65%;
                transform: translateX(-50%);
                .pxl-btn-video {
                    mask-image: url(../img/mark-img1.png);
                    -webkit-mask-image: url(../img/mark-img1.png);
                    -ms-mask-image: url(../images/mark-img1.png);
                    -o-mask-image: url(../images/mark-img1.png);
                    -webkit-mask-repeat: no-repeat;
                    -ms-mask-repeat: no-repeat;
                    -o-mask-repeat: no-repeat;
                    -webkit-mask-position: center center;
                    -ms-mask-position: center center;
                    -o-mask-position: center center;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    @include transition(all 200ms linear 0ms);
                    mask-size: contain;
                    position: relative;
                    display: grid;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    text-align: center;
                    align-content: center;
                    font-family: 'Great Vibes', cursive;
                    &:hover {
                        .pxl-icon-video {
                            transform: translateY(-5px);
                            i {
                                background-position: 100% 0;
                                @include transition(all 0.4s ease-in-out);
                            }
                        }
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 85%;
                        height: 85%;
                        background-image: url(../img/shape-video2.png);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        z-index: 1;
                    }
                    .pxl-icon-video {
                        font-size: 18px;
                        line-height: 1;
                        margin-bottom: 3px;
                        transform: translateY(0px);
                        @include transition(all 200ms linear 0ms);
                        i {
                            background-size: 300% 100%;
                            background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
                            background-clip: border-box;
                            background-clip: border-box;
                            background-clip: text;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }
                    .pxl-item-text-video {
                        position: relative;
                        width: 96px;
                        height: 20px;
                        &:before {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            height: 100%;
                            background-image: url(../img/text-video.png);
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: contain;
                            z-index: 1;
                        }
                    }
                }
            }
        }
    }
}

// Case Text Carousel 
.pxl-text-marquee1 {
    &.style1 {
        display: flex;
        align-items: center;
        overflow: hidden;
        width: 100%;
        position: relative;
        &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: linear-gradient(90deg, rgba(#000, 0.3) 20%, rgba(#000, 1) 100%);
        }
        .pxl-item--logo {
            width: 65px;
            min-width: 65px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .pxl-item--text {
            color: transparent;
            padding: 0 20px;
            font-size: 180px;
            font-weight: 900;
            word-spacing: -30px;
            line-height: 1;
            @extend .ft-theme-default;
            position: relative;
            &.text-outline {
                color: transparent !important;
                -webkit-text-stroke-color: #000;
                -webkit-text-stroke-width: 1px;
            }
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background-color: $primary_color;
                width: 80px;
                height: 100%;

            }
        }
        .pxl-item--inner {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            white-space: nowrap;
        }
    }
    &.style2 {
        display: flex;
        align-items: center;
        overflow: hidden;
        width: 100%;
        position: relative;
        .pxl-item--logo {
            width: 65px;
            min-width: 65px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .pxl-item--text {
            color: transparent;
            margin: 0 10px;
            font-size: 100px;
            line-height: 1;
            @extend .ft-theme-default;
            position: relative;
            &.text-outline {
                color: transparent !important;
                -webkit-text-stroke-color: #000;
                -webkit-text-stroke-width: 1px;
            }
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background-color: #DBDBDB;
                width: 450%;
                height: 100%;
                clip-path: polygon(0 0, 22% 0, 100% 100%, 75% 100%);
            }
        }
        .pxl-item--inner {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            white-space: nowrap;
        }
    }
}

//pxl-banner-box
.pxl-banner-box {
    &.pxl-banner-box1 {
        .pxl-banner-inner {
            background-color: $link_color;
            @include transition(all 0.3s);
            &:hover {
                .pxl-item--img {
                    .pxl-image {
                        img {
                            @include transform(scale(1.05));
                        }
                    }
                }
            }
            .pxl-item--img {
                position: relative;
                padding: 22px 20px 0px 22px;
                @media (max-width: 480px) {
                    padding: 20px 15px 0px 15px;
                }
                .pxl-item-categori {
                    font-size: 16px;
                    font-weight: 500;
                    letter-spacing: 0.8px;
                    text-transform: uppercase;
                    color: #fff;
                    @include ft_theme_default($ft_theme_default);
                    position: absolute;
                    top: 21px;
                    left: 21px;
                    background-color: $link_color;
                    display: flex;
                    align-items: center;
                    padding: 20px 39px;
                    z-index: 1;
                    @include transition(all 0.3s);
                    @media (max-width: 1550px) {
                        font-size: 15px;
                    }
                    @media (max-width: 480px) {
                        font-size: 14px;
                        padding: 10px 15px;
                        left: 15px;
                        top: 15px;
                    }
                    .pxl-icon {
                        width: 3px;
                        height: 11px;
                        background-color: $primary_color;
                    }
                }
                .pxl-image {
                    clip-path: polygon(84% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
                    img {
                        @include transform(scale(1));
                        @include transition(all 0.3s);
                    }
                }
            }
            .pxl-list {
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgba(#fff, 0.149);
                position: relative;
                padding: 28px 20px 21px 49px;
                overflow: hidden;
                @include transition(all 0.3s);
                @media (max-width: 1366px) {
                    padding: 28px 20px 21px 30px;
                }
                @media (max-width: 480px) {
                    padding: 28px 15px 21px 15px;
                }
                .pxl-border-bottom {
                    position: absolute;
                    right: 0;
                    bottom: -1px;
                    background-color: $primary_color;
                    height: 3px;
                    width: 86px;
                }
                .pxl--item {
                    position: relative;
                    padding-right: 21px;
                    margin-right: 18px;
                    @media (max-width: 1400px) {
                        padding-right: 15px;
                        margin-right: 10px;
                    }
                    &:after {
                        content: '';
                        width: 4px;
                        height: 4px;
                        background-color: #fff;
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translate(0,-50%);
                    }
                    &:last-child {
                        padding-right: 0;
                        margin-right: 0;
                        &:after {
                            display: none;
                        }
                    }
                    .pxl-item-title {
                        font-size: 26px;
                        font-weight: 500;
                        color: #fff;
                        @include ft_theme_default($ft_theme_default);
                        @media (max-width: 1550px) {
                            font-size: 22px;
                        }
                        @media (max-width: 1400px) {
                            font-size: 20px;
                        }
                        @media (max-width: 1100px) {
                            font-size: 17px;
                        }
                    }
                }
            }
            .pxl-content-section {
                padding: 27px 49px 50px 49px;
                @media (max-width: 1366px) {
                    padding: 27px 30px 50px 30px;
                }
                @media (max-width: 480px) {
                    padding: 25px 15px 50px 15px;
                }
                .pxl-item-desc {
                    font-size: 16px;
                    color: #c2c2c2;
                }
                .pxl-banner-button {
                    text-align: right;
                    margin-top: 54px;
                    .pxl-button-link {
                        display: inline-flex;
                        align-items: center;
                        font-size: 14px;
                        letter-spacing: 1px;
                        text-transform: uppercase;
                        font-weight: 500;
                        @include ft_theme_default($ft_theme_default);
                        line-height: 55px;
                        color: #000000;
                        position: relative;
                        z-index: 1;
                        &:hover {
                            color: #fff;
                            .pxl-btn-icon {
                                svg {
                                    transform: rotate(45deg);
                                }
                            }
                            .pxl--btn-text {
                                &:before {
                                    width: 100%;
                                }
                            }
                        }
                        .pxl--btn-text {
                            position: relative;
                            overflow: hidden;
                            width: 79.1%;
                            @include transition(all 0.3s);
                            padding: 0 39px;
                            &:before {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 0;
                                height: 100%;
                                background-color: $primary_color;
                                @include transition(all 0.3s);
                                z-index: -1;
                            }
                            &:after {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-color: #fff;
                                @include transition(all 0.3s);
                                z-index: -2;
                            }
                        }
                        .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: 25px;
                                width: auto;
                                transform: rotate(0deg);
                                @include transition(all 0.3s);
                                path {
                                    fill: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
        &.style2 {
            .pxl-banner-inner {
                background-color: #616361;
                .pxl-item--img {
                    .pxl-item-categori {
                        background-color: #616361;
                    }
                }
            }
        }
    }
    &.pxl-banner-box2 {
        .pxl-banner-inner {
            .pxl-item--img {
                position: relative;
                .pxl-image {
                    background-color: #edefed;
                    clip-path: polygon(88% 0, 100% 21%, 100% 100%, 0 100%, 0 0);
                    img {
                        mix-blend-mode: luminosity;
                        @include transition(all 0.3s ease-in-out);
                        transform-style: preserve-3d;
                    }
                }
                .pxl-image2 {
                    position: absolute;
                    bottom: 12px;
                    left: 36px;
                    z-index: 1;
                }
                &:before {
                    content: '';
                    position: absolute;
                    background-color: $link_color;
                    height: 55px;
                    width: 50%;
                    bottom: 0;
                    left: 0;
                    z-index: 1;
                    clip-path: polygon(70% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
                }
            }
            .pxl-content-section {
                background-color: $link_color;
                padding: 36px 52px 36px 52px;
                @media (max-width: 767px) {
                    padding: 36px 15px;
                }
                .pxl-item-title {
                    font-size: 35px;
                    color: #ffffff;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.1;
                    @media (max-width: 767px) {
                        font-size: 30px;
                    }
                    &:hover {
                        color: $primary_color;
                    }
                }
                .pxl-item-border {
                    padding-top: 1px;
                    background-color: #454645;
                    margin-top: 26px;
                    margin-bottom: 27px;
                    position: relative;
                    &:after {
                        content: '';
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: 22%;
                        height: 3px;
                        background-color: $primary_color;
                    }
                }
                .pxl-item-desc {
                    font-size: 16px;
                    color: #c2c2c2;
                    margin-bottom: 36px;
                }
                .pxl-banner-button {
                    text-align: right;
                    .pxl-button-link {
                        display: inline-flex;
                        &:hover {
                            svg {
                                transform: rotate(45deg);
                                path {
                                    fill: $primary_color;
                                }
                            }
                        }
                        .pxl-btn-icon {
                            margin-right: -5px;
                        }
                        svg {
                            height: 42px;
                            width: auto;
                            transform: rotate(0deg);
                            @include transition(all 0.3s);
                            path {
                                fill: #fff;
                                @include transition(all 0.3s);
                            }
                        }
                    }
                }
            }
        }
    }
    &.pxl-banner-box3 {
        .pxl-banner-inner {
            background-color: #edefed;
            position: relative;
            overflow: hidden;
            @include transition(all 0.3s);
            &:hover {
                .pxl-image {
                    img {
                        transform: scale(1.05);
                    }
                }
            }
            .pxl-image {
                position: absolute;
                bottom: -55px;
                right: -15px;
                @include transition(all 0.3s);
                img {
                    @include transition(all 0.3s);
                    transform: scale(1);
                }
            }
            .pxl-content-section {
                padding: 59px 60px 150px 44px;
                z-index: 2;
                position: relative;
                @media (max-width: 1366px) {
                    padding: 50px 30px 130px 30px;
                }
            }
            .pxl-item-title {
                font-size: 25px;
                color: $link_color;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                line-height: 1;
                margin-bottom: 18px;
                @media (max-width: 1366px) {
                    font-size: 20px;
                }
            }
            .pxl-item-desc {
                font-size: 16px;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
            .pxl-banner-button {
                z-index: 2;
                position: relative;
                .pxl-button-link {
                    width: 64px;
                    height: 64px;
                    background-color: $primary_color;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .pxl-btn-icon {
                        line-height: 1;
                    }
                    svg {
                        height: 23px;
                        width: auto;
                        transform: rotate(0);
                        @include transition(all 0.3s);
                        path {
                            fill: #fff;
                        }
                    }
                    &:hover {
                        background-color: $link_color;
                        svg {
                            transform: rotate(45deg);
                        }
                    }
                }
            }
        }
    }
    &.pxl-banner-box4 {
        .pxl-banner-inner {
            .pxl-content-section {
                position: relative;
                background-color: $primary_color;
                padding: 77px 60px 75px 63px;
                @media (max-width: 1600px) {
                    padding: 50px 30px 75px 30px;
                }
                @media (max-width: 575px) {
                    padding: 30px 15px 50px 15px;
                }
                .pxl-item-title {
                    font-size: 40px;
                    color: #fff;
                    font-weight: 500;
                    line-height: 1.12;
                    @include ft_theme_default($ft_theme_default);
                    max-width: 88%;
                    margin-bottom: 20px;
                    @media (max-width: 1600px) {
                        max-width: 100%;
                    }
                    @media (max-width: 1280px) {
                        font-size: 34px;
                    }
                }
                .pxl-item-desc {
                    font-size: 16px;
                    color: #fff;
                    max-width: 96%;
                    @media (max-width: 1280px) {
                        max-width: 100%;
                    }
                }
                .pxl-banner-button {
                    position: absolute;
                    background-color: $primary_color;
                    right: 0;
                    bottom: 0;
                    bottom: -77px;
                    padding: 28px 31px;
                    @media (max-width: 575px) {
                        padding: 15px 13px;
                    }
                    .pxl-button-link {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #fff;
                        @media (max-width: 575px) {
                            width: 70px;
                            height: 70px;
                        }
                        &:hover {
                            svg {
                                transform: rotate(45deg);
                            }
                        }
                        .pxl-btn-icon {
                            line-height: 1;
                        }
                        svg {
                            height: 35px;
                            width: auto;
                            transform: rotate(0);
                            @include transition(all 0.3s);
                            path {
                                fill: $link_color;
                            }
                        }
                    }
                }
            }
        }
    }
    &.pxl-banner-box5 {
        .pxl-banner-inner {
            .pxl-item--img {
                clip-path: polygon(93% 0, 100% 13%, 100% 100%, 0 100%, 0 0);
            }
            .pxl-content-section {
                padding: 0 19px 0 20px;
                margin-top: -86px;
                z-index: 1;
                position: relative;
                @media (max-width: 991px) {
                    padding: 0 15px;
                }
                .pxl-item-categori {
                    text-align: right;
                    .pxl-text-categori {
                        font-size: 14px;
                        text-transform: uppercase;
                        font-weight: 500;
                        color: #fff;
                        background-color: $link_color;
                        height: 41px;
                        padding: 0 42px;
                        display: inline-flex;
                        align-items: center;
                        @media (max-width: 767px) {
                            padding: 0 15px;
                        }
                    }
                }
                .pxl-item-content {
                    border: 1px solid #d9d9d9;
                    background-color: #fff;
                    padding: 32px 37px 0px 36px;
                    @media (max-width: 991px) {
                        padding: 30px 15px 0 15px;
                    }
                    .pxl-item-title {
                        color: $link_color;
                        font-size: 26px;
                        font-weight: 500;
                        @include ft_theme_default($ft_theme_default);
                        line-height: 1.31;
                        display: block;
                        max-width: 91%;
                        @media (max-width: 991px) {
                            font-size: 24px;
                            max-width: 100%;
                        }
                        &:hover {
                            color: $primary_color;
                        }
                    }
                    .pxl-item-desc {
                        font-size: 16px;
                        margin-top: 17px;
                        max-width: 84%;
                        margin-left: 1px;
                        margin-bottom: 17px;
                    }
                    .pxl-banner-button {
                        text-align: right;
                        margin-bottom: -24px;
                        .pxl-button-link {
                            width: 75px;
                            height: 75px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            background-color: $primary_color;
                            &:hover {
                                svg {
                                    transform: rotate(45deg);
                                }
                            }
                            .pxl-btn-icon {
                                margin-top: 4px;
                            }
                            svg {
                                height: 33px;
                                width: auto;
                                transform: rotate(0);
                                @include transition(all 0.3s);
                                path {
                                    fill: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &.pxl-banner-box6 {
        .pxl-banner-inner {
            background-color: #edefed;
            text-align: center;
            padding: 58px 80px 50px 80px;
            .pxl-item--img {
                margin-bottom: 49px;
            }
            .pxl-item-desc {
                font-size: 18px;
                color: $link_color;
                line-height: 1.65;
                margin-bottom: 36px;
            }
            .pxl-item-title {
                font-size: 18px;
                color: $link_color;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
            }
        }
    }
    &.pxl-banner-box7 {
        .pxl-banner-inner {
            background-color: $link_color;
            text-align: center;
            clip-path: polygon(94% 0, 100% 4%, 100% 100%, 0 100%, 0 0);
            .pxl-item-top {
                padding: 50px 15px 44px 15px;
            }
            .pxl-item--img {
                margin-bottom: 32px;
            }
            .pxl-item-title {
                font-size: 18px;
                letter-spacing: 0.9px;
                text-transform: uppercase;
                color: #ffffff;
                font-weight: 500;
                line-height: 1.2;
                @include ft_theme_default($ft_theme_default);
                margin-bottom: 16px;
                @media (max-width: 1200px) {
                    font-size: 16px;
                }
            }
            .pxl-item-text {
                font-size: 23px;
                letter-spacing: 0.25px;
                color: #ffffff;
                font-weight: 500;
                line-height: 1.2;
                @include ft_theme_default($ft_theme_default);
                margin-bottom: 26px;
                @media (max-width: 1200px) {
                    font-size: 20px;
                }
            }
            .pxl-list {
                .pxl--item {
                    margin-bottom: 7px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    .pxl-item-title-list {
                        font-size: 16px;
                        color: #c2c2c2;
                        @media (max-width: 1200px) {
                            font-size: 15px;
                        }
                    }
                }
            }
            .pxl-banner-button {
                .pxl-button-link {
                    display: block;
                    background-color: $primary_color;
                    height: 65px;
                    align-content: center;
                    font-size: 14px;
                    letter-spacing: 0.73px;
                    text-transform: uppercase;
                    color: #ffffff;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    &:hover {
                        background-color: $link_color;
                    }
                }
            }
        }
    }
    &.pxl-banner-box8 {
        .pxl-banner-inner {
            display: flex;
            @media (max-width: 1199px) {
                display: block;
            }
            .pxl-item--img {
                width: 50.1%;
                @media (max-width: 1199px) {
                    width: 100%;
                }
            }
            .pxl-content-section {
                width: 49.9%;
                border-left: 1px solid #d9d9d9;
                border-right: 1px solid #d9d9d9;
                padding: 47px 46px 30px 55px;
                @media (max-width: 1600px) {
                    padding: 25px 30px 30px 30px;
                    align-content: center;
                }
                @media (max-width: 1199px) {
                    width: 100%;
                }
                .pxl-banner-button {
                    text-align: right;
                    margin-bottom: 44%;
                    @media (max-width: 1600px) {
                        margin-bottom: 50px;
                    }
                    @media (max-width: 1280px) {
                        margin-bottom: 10px;
                    }
                }
                .pxl-button-link {
                    display: inline-block;
                    line-height: 1;
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                    .pxl-btn-icon {
                        display: inline-block;
                        line-height: 1;
                    }
                    svg {
                        height: 45px;
                        width: auto;
                        @include transition(all 0.3s);
                        path {
                            fill: $link_color;
                            @include transition(all 0.3s);
                        }
                    }
                }
                .pxl-item-title {
                    font-size: 35px;
                    text-transform: uppercase;
                    font-weight: 500;
                    color: $link_color;
                    @include ft_theme_default($ft_theme_default);
                    @media (max-width: 1366px) {
                        font-size: 32px;
                    }
                }
                .pxl-item-desc {
                    margin-top: 16px;
                }
            }
        }
    }
    &.pxl-banner-box9 {
        .pxl-banner-inner {
            position: relative;
            @include transition(all 0.3s);
            overflow: hidden;
            &:hover {
                .pxl-item-title {
                    opacity: 1;
                    transform: translateY(0);
                }
                .pxl-item--img {
                    img {
                        transform: scale(1.1);
                    }
                }
            }
            &.default {
                clip-path: polygon(55px 0, 100% 0, 100% 100%, 0 100%, 0 58px);
            }
            &.style2 {
                clip-path: polygon(100% 0, 100% 90%, 811px 100%, 0 100%, 0 0);
            }
            .pxl-item--img {
                img {
                    @include transition(all 0.3s);
                    transform: scale(1);
                }
            }
            .pxl-item-link {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 1;
            }
            .pxl-item-text {
                background-color: #fff;
                font-size: 15px;
                letter-spacing: 1.7px;
                text-transform: uppercase;
                color: #666666;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                line-height: 1.2;
                position: absolute;
                top: -3px;
                right: -1px;
                padding: 0px 46px 23px 40px;
            }
            .pxl-item-title {
                font-size: 130px;
                color: #ffffff;
                font-weight: 500;
                line-height: 1;
                @include ft_theme_default($ft_theme_default);
                position: absolute;
                bottom: 61px;
                left: 0;
                width: 100%;
                text-align: center;
                text-transform: capitalize;
                @include transition(all 0.3s);
                opacity: 0;
                transform: translateY(100%);
                @media (max-width: 1366px) {
                    font-size: 90px;
                }
                @media (max-width: 1200px) {
                    font-size: 70px;
                }
                @media (max-width: 575px) {
                    font-size: 70px;
                    bottom: 15px;
                }
            }
        }
    }
}

//pxl-mailchimp-from
.pxl-mailchimp-from1 {
    .style-default {
        input {
            @include border-radius(0);
            background-color: unset;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            border: 1px solid #313131;
            color: #c2c2c2;
            padding: 0 25px 0px 33px;
            z-index: 1;
            position: relative;
            height: 85px;
            &:focus {
                color: $link_color;
                background-color: #fff !important;
                border-color: #fff;
            }
            &:hover {
                color: $link_color;
            }
        }
        .pxl-mailchimp {
            position: relative;
            &:hover {
                &:after {
                    width: 100%;
                }
            }
            &:before {
                content: '';
                border-style: solid;
                border-color: transparent transparent transparent #fff;
                border-width: 10px;
                position: absolute;
                top: -9px;
                left: -9px;
                opacity: 1;
                transform: translateY(0) rotate(226deg);
                @include transition(all 250ms linear 0ms);
            }
            &:after {
                content: '';
                width: 0;
                height: 100%;
                background-color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 1;
                @include transition(all 250ms linear 0ms);
            }
            .mailchimp-submit {
                position: absolute;
                top: 0;
                right: 19px;
                display: flex;
                align-items: center;
                height: 100%;
            }
            svg {
                height: 18px;
                top: 16px;
                left: 0px;
                width: auto;
                line-height: 1;
                fill: #fff;
                @include transition(all 250ms linear 0ms);
            }
        }
        .pxl-mailchimp-btn {
            background-color: unset;
            padding: 0;
            font-size: 20px;
            color: $link_color;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $primary_color;
            @include transition(all 250ms linear 0ms);
            &:hover {
                background-color: $link_color;
                svg {
                    fill: #fff;
                }
            }
        }
    }
    .style2 {
        input {
            @include border-radius(0);
            background-color: rgba(#fff, 0.149);
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            color: #c2c2c2;
            padding: 0 65px 0px 27px;
            z-index: 1;
            position: relative;
            height: 60px;
            border:none;
            &:focus {
                color: $link_color;
                background-color: #fff !important;
            }
            &:hover {
                color: $link_color;
                background-color: #fff !important;
            }
        }
        .pxl-mailchimp {
            position: relative;
            .mailchimp-submit {
                position: absolute;
                top: 0;
                right: 7px;
                display: flex;
                align-items: center;
                height: 100%;
            }
            svg {
                height: 18px;
                top: 16px;
                left: 0px;
                width: auto;
                line-height: 1;
                fill: #fff;
                @include transition(all 250ms linear 0ms);
            }
        }
        .pxl-mailchimp-btn {
            background-color: unset;
            padding: 0;
            font-size: 20px;
            color: $link_color;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $primary_color;
            @include transition(all 250ms linear 0ms);
            &:hover {
                background-color: $link_color;
                svg {
                    fill: #fff;
                }
            }
        }
    }
    .style3 {
        input {
            @include border-radius(0);
            background-color: rgba(#fff, 0.149);
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            color: #d9d9d9;
            padding: 0 65px 0px 27px;
            z-index: 1;
            position: relative;
            height: 60px;
            border: 1px solid #d9d9d9;
            &:focus {
                color: $link_color;
                background-color: #fff !important;
                border-color: $link_color;
            }
            &:hover {
                color: $link_color;
                background-color: #fff !important;
                border-color: $link_color;
            }
        }
        .pxl-mailchimp {
            position: relative;
            .mailchimp-submit {
                position: absolute;
                top: 0;
                right: 7px;
                display: flex;
                align-items: center;
                height: 100%;
            }
            svg {
                height: 18px;
                top: 16px;
                left: 0px;
                width: auto;
                line-height: 1;
                fill: #fff;
                @include transition(all 250ms linear 0ms);
            }
        }
        .pxl-mailchimp-btn {
            background-color: unset;
            padding: 0;
            font-size: 20px;
            color: $link_color;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $primary_color;
            @include transition(all 250ms linear 0ms);
            &:hover {
                background-color: $link_color;
                svg {
                    fill: #fff;
                }
            }
        }
    }
}

//pxl-contact-custom
.pxl-contact-custom {
    .pxl-section-effect-images {
        .pxl-item--image {
            z-index: -1;
            @media (max-width: 1800px) {
                display: none;
            }
        }
    }
}

//pxl-icon-custom
.pxl-icon-home01 {
    @media (max-width: 1366px) {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }
}

//pxl-title-portfolio
.pxl-title-portfolio {
    .pxl-heading {
        .pxl-item--title {
            @media (max-width: 1200px) {
                color: #000 !important;
            }
        }
    }
}

//pxl-title-page01
.pxl-title-page01 {
    .pxl-text-editor {
        a {
            @media (max-width: 991px) {
                color: #000 !important;
            }
        }
    }
}
.pxl-text-custom1 {
    &.style1 {
        .pxl-text-inner {
            display: inline-block;
            background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
            background-clip: border-box;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .pxl-item-title {
            font-size: 36px;
            font-weight: bold;
            font-family: 'Inter', sans-serif;
            line-height: 1.1;
        }
    }
    &.style2 {
        .pxl-text-inner {
            display: inline-block;
            background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
            background-clip: border-box;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .pxl-item-title {
            font-size: 36px;
            font-weight: bold;
            font-family: 'Inter', sans-serif;
            line-height: 1.1;
        }
    }
}

//pxl-swiper-arrow-wrap
//style-4
.pxl-swiper-arrow-wrap {
    &.style-4 {
        .pxl-swiper-arrow {
            width: 45px;
            height: 45px;
            margin: 8px;
            border: 3px solid #ffffff;
            @include border-radius(50%);
            background-color: unset;
            box-shadow: 0px 0px 5px 5px rgba(210, 210, 210, 0.10);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 25px;
            @include transition(all 0.3s);
            &:hover {
                background-color: #fff;
                color: $link_color;
                box-shadow: 0px 0px 10px 10px rgba(13, 125, 252, 0.10);
            }
        }
    }
}

//pxl-test-carousel
.pxl-test-carousel1 {
    .pxl-swiper-container {
        padding: 0 5px;
    }
    .pxl-swiper-arrow-wrap {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        justify-content: space-between;
        transition: all .3s;
        width: 108%;
        z-index: 1;
        @media (max-width: 1250px) {
            position: relative;
            top: unset;
            left: unset;
            transform: unset;
            width: unset;
            justify-content: center;
            margin-top: 20px;
        }
        .pxl-swiper-arrow {
            @media (max-width: 1250px) {
                margin: 10px;
            }
        }
        .pxl-swiper-arrow-prev {
            position: absolute;
            left: 0;
            @media (max-width: 1250px) {
                position: relative;
            }
        }
        .pxl-swiper-arrow-next {
            position: absolute;
            right: 0;
            @media (max-width: 1250px) {
                position: relative;
            }
        }
    }
    .pxl-item--inner {
        @include transition(all 0.3s);
        &:hover {
            .pxl-item--image {
                .pxl-item-icon {
                    i {
                        background: linear-gradient(100deg, #ff762a 0.51%, #ffc712 100%);
                        background-clip: border-box;
                        background-clip: border-box;
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
            .pxl-item-content {
                &:before {
                    opacity: 0;
                    transform: scaleX(0);
                }
                &:after {
                    opacity: 1;
                    transform: scaleX(1);
                }
                .pxl-item--desc  {
                    color: #fff;
                    border-bottom: 1px solid rgba(255,255,255,0.3);
                }
                .pxl-item--holder {
                    .pxl-item--title {
                        color: #fff;
                    }
                    .pxl-sub-title {
                        color: #fff;
                    }
                }
            }
        }
        .pxl-item--image {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px 0 43px;
            margin-bottom: -45px;
            @include transition(all 0.3s);
            @media (max-width: 1024px) {
                padding: 0px 20px 0px 20px;
            }
            img {
                @include border-radius(50%);
            }
            .pxl-item-icon {
                font-size: 60px;
                @include transition(all 0.3s);
                line-height: 1;
                i {
                    display: inline-block;
                    background: linear-gradient(100deg, #d5d5d9 0.51%, #d5d5d9 100%);
                    background-clip: border-box;
                    background-clip: border-box;
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    transform: rotate(180deg);
                    @include transition(all 0.3s);
                }
            }
        }
        .pxl-item-content {
            padding: 50px 30px 20px 40px;
            position: relative;
            @include border-radius(30px);
            margin: 10px 0;
            @include transition(all 0.3s);
            @media (max-width: 1024px) {
                padding: 50px 20px 20px 20px;
            }
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background-color: #fff;
                width: 100%;
                height: 100%;
                box-shadow: 0px 0px 5px 5px rgba(210, 210, 210, 0.2);
                @include border-radius(30px);
                opacity: 1;
                transform-origin: center;
                z-index: -1;
                @include transition(all 0.3s);
                transform: scaleX(1);
            }
            &:after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                background: linear-gradient(100deg, #fb009f 0.51%, #6900fd 100%);
                width: 100%;
                height: 100%;
                @include border-radius(30px);
                opacity: 0;
                z-index: -1;
                transform-origin: center;
                @include transition(all 0.3s);
                transform: scaleX(0);
            }
            .pxl-item--desc {
                color: #0e0d0f;
                font-size: 16px;
                font-family: 'Inter', sans-serif;
                border-bottom: 1px solid #e1e0e0;
                padding-bottom: 17px;
                margin-bottom: 12px;
                @include transition(all 0.3s);
            }
            .pxl-item--holder {
                display: flex;
                align-items: center;
                justify-content: space-between;
                @include transition(all 0.3s);
                .pxl-item--title {
                    color: #0e0d0f;
                    font-size: 16px;
                    font-weight: bold;
                    font-family: 'Poppins', sans-serif;
                    margin-bottom: 0;
                    @include transition(all 0.3s);
                }
                .pxl-sub-title {
                    color: #a5a4a4;
                    font-size: 15px;
                    font-family: 'Barlow', sans-serif;
                    font-weight: 400;
                    line-height: 1.2;
                    @include transition(all 0.3s);
                }
                .pxl-item--star {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                }
            }
        }
    }
}

.pxl-test-carousel2 {
    .pxl-carousel-inner {
        margin: 0 -15px;
    }
    .pxl-swiper-arrow-wrap {
        width: 45%;
        float: right;
        justify-content: unset;
        margin-top: 0;
        position: absolute;
        bottom: 130px;    
        right: 0;
        z-index: 1;
        padding-left: 55px;
        @media (max-width: 1024px) {
            padding-left: 35px;
            bottom: 30px;
        }
        @media (max-width: 880px) {
            position: relative;
            width: 100%;
            padding-left: 0;
            bottom: 0;
        }
        .pxl-swiper-arrow {
            margin-right: 20px;
            font-size: 20px;
            color: #57acfa;
            &:last-child {
                margin-right: 0;
            }
            &:hover {
                color: #fff;
            }
            @media (max-width: 1880px) {
                &:hover {
                    color: #57acfa;
                }
            }
        }
    }
    .pxl-item--inner {
        display: flex;
        flex-wrap: wrap;
        padding-top: 40px;
        padding-bottom: 255px;
        @media (max-width: 1024px) {
            padding-bottom: 100px;
        }
        @media (max-width: 880px) {
            padding-bottom: 30px;
            padding-top: 0;
        }
        .pxl-block--left {
            width: 55%;
            position: relative;
            margin-top: -40px;
            margin-bottom: -255px;
            @media #{$max-sm} {
                width: 100%;
                height: 320px;
            }
            @media (max-width: 880px) {
                display: none;
            }
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 5px;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-size: contain;
                background-image: url(../img/bg-light1.png);
                @include transition(all 0.3s);
                z-index: 1;
                @media (max-width: 1280px) {
                    left: 0;
                }
            }
            .pxl-shape-bg {
                mask-image: url(../img/shape-test2.png);
                -webkit-mask-image: url(../img/shape-test2.png);
                -ms-mask-image: url(../images/shape-test2.png);
                -o-mask-image: url(../images/shape-test2.png);
                -webkit-mask-repeat: no-repeat;
                -ms-mask-repeat: no-repeat;
                -o-mask-repeat: no-repeat;
                width: 100%;
                height: 100%;
                -webkit-mask-position: top left;
                -ms-mask-position: top left;
                -o-mask-position: top left;
                overflow: hidden;
                @include transition(all 0.3s);
                mask-size: contain;
                position: relative;
            }
            .pxl-banner--image {
                @extend .pxl-spill;
                right: 10px;
                width: auto;
                @media #{$max-sm} {
                    right: 0;
                }
            }
            + .pxl-block--right {
                width: 45%;
                @media (max-width: 880px) {
                    width: 100%;
                }
            }
        }
        .pxl-block--right {
            .pxl-right-inner {
                padding-left: 55px;
                @media (max-width: 1024px) {
                    padding-left: 30px;
                }
                @media (max-width: 880px) {
                    padding-left: 0;
                }
            }
            .pxl-heading {
                margin-bottom: 90px;
                @media (max-width: 1200px) {
                    margin-bottom: 50px;
                }
                .pxl-widget--desc {
                    font-size: 20px;
                    font-weight: 500;
                    color: #000000;
                    position: relative;
                    font-family: 'Inter', sans-serif;
                    position: relative;
                    padding-left: 50px;
                    margin-bottom: 20px;
                    &:before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 5px;
                        width: 20px;
                        height: 20px;
                        transform: rotate(45deg);
                        background: linear-gradient(50deg, rgba(99,222,247, 1) 30%, rgba(134,159,224, 1) 100%);
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        left: 15px;
                        top: 5px;
                        width: 20px;
                        height: 20px;
                        transform: rotate(45deg);
                        background: linear-gradient(50deg, rgba(99,222,247, 0.6) 30%, rgba(134,159,224, 1) 100%);
                    }
                }
                .pxl-widget--title {
                    font-size: 60px;
                    font-weight: bold;
                    color: #000;
                    @extend .ft-heading;
                    line-height: 1;
                    margin-bottom: 0;
                    @media (max-width: 1200px) {
                        font-size: 50px;
                    }
                    @media (max-width: 1024px) {
                        font-size: 40px;
                    }
                    @media (max-width: 767px) {
                        font-size: 30px;
                    }
                }
            }
            .pxl-item--image {
                mask-image: url(../img/shape-bg1.png);
                -webkit-mask-image: url(../img/shape-bg1.png);
                -ms-mask-image: url(../images/shape-bg1.png);
                -o-mask-image: url(../images/shape-bg1.png);
                -webkit-mask-repeat: no-repeat;
                -ms-mask-repeat: no-repeat;
                -o-mask-repeat: no-repeat;
                -webkit-mask-position: top left;
                -ms-mask-position: top left;
                -o-mask-position: top left;
                overflow: hidden;
                -webkit-transition: all 0.3s;
                -khtml-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
                mask-size: auto;
                position: relative;
            }
            .pxl-item-content {
                position: relative;
                z-index: 1;
                background-color: #fff;
                @include border-radius(30px);
                .pxl-item-icon {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    font-size: 200px;
                    line-height: 0.6;
                    z-index: -1;
                    i {
                        transform: rotate(180deg);
                        display: inline-block;
                        background-size: 300% 100%;
                        background-image: linear-gradient(to right, #f0ebfb, #e5f8ff, #f0ebfb, #e5f8ff);
                        background-clip: border-box;
                        background-clip: border-box;
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        -webkit-transition: all 220ms linear 0ms;
                        -khtml-transition: all 220ms linear 0ms;
                        -moz-transition: all 220ms linear 0ms;
                        -ms-transition: all 220ms linear 0ms;
                        -o-transition: all 220ms linear 0ms;
                        transition: all 220ms linear 0ms;
                    }
                }
            }
            .pxl-item--desc {
                color: #000000;
                font-size: 20px;
                font-weight: 400;
                margin-top: 25px;
                margin-bottom: 23px;
                max-width: 58%;
                @media (max-width: 1280px) {
                    max-width: 100%;
                }
            }
            .pxl-item--title {
                margin-bottom: 0;
                font-size: 24px;
                font-weight: 700;
                @extend .ft-heading;
                color: $primary_color;
                font-style: italic;
            }
            .pxl-sub-title {
                font-size: 16px;
                font-weight: bold;
                @extend .ft-heading;
                font-style: italic;
                line-height: 1;
                color: #7d7d7d;
            }
        }
    }
}


//pxl-image-list
.pxl-image-list {
    &.pxl--image-list1 {
        &.style-default {
            display: flex;
            align-items: center;
            .pxl--item {
                display: flex;
                align-items: center;
                position: relative;
                @include transition(all 0.3s);
                .pxl-image {
                    @include border-radius(50%);
                    overflow: hidden;
                    border: 3px solid #fff;
                    z-index: 1;
                }
                &:nth-child(1) {
                    margin-left: 0px;
                }
                &:nth-child(2) {
                    z-index: 2;
                    margin-left: -30px;
                    animation-delay: 300ms !important;
                }
                &:nth-child(3) {
                    margin-left: -30px;
                    z-index: 3;
                    animation-delay: 500ms !important;
                }
            }
        }
        &.style2 {
            display: flex;
            align-items: center;
            .pxl--item {
                display: flex;
                align-items: center;
                position: relative;
                @include transition(all 0.3s);
                .pxl-image {
                    @include border-radius(50%);
                    overflow: hidden;
                    border: 3px solid $link_color;
                    z-index: 1;
                    background-color: #d9d9d9;
                    img {
                        mix-blend-mode: luminosity;
                    }
                }
                &:nth-child(1) {
                    margin-left: 0px;
                }
                &:nth-child(2) {
                    z-index: 2;
                    margin-left: -30px;
                    animation-delay: 300ms !important;
                }
                &:nth-child(3) {
                    margin-left: -30px;
                    z-index: 3;
                    animation-delay: 500ms !important;
                }
            }
        }
    }
}

//pxl-carousel-custom
.pxl-carousel-custom1 {
    .pxl-carousel-inner {
        position: relative;
        .pxl-swiper-arrow-wrap {
            margin-top: 8px;
            align-items: center;
            z-index: 1;
            justify-content: end;
            flex-wrap: unset;
            width: 40%;
            @media (max-width: 767px) {
                width: 100%;
                justify-content: left;
            }
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 31px 16px;
                display: flex;
                align-items: center;
                margin-right: 11px;
                &:last-child {
                    margin-right: 0;
                }
                svg {
                    height: 15px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    overflow: hidden;
                    display: inline-flex;
                    @include transition(all 200ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    clip-path: polygon(100% 0, 100% 84%, 79% 100%, 0 100%, 0 0);
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
    }
    .pxl-inner-top {
        max-width: 1290px;
        display: flex;
        margin-bottom: 68px;
        @media (max-width: 767px) {
            display: block;
            margin-bottom: 45px;
        }
        .pxl-heading {
            width: 60%;
            @media (max-width: 767px) {
                width: 100%;
                margin-bottom: 20px;
            }
        }
        .pxl-title-heading {
            font-size: 45px;
            font-weight: 500;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.24;
            margin-bottom: 0;
            max-width: 90%;
            @media (max-width: 1200px) {
                max-width: 100%;
            }
            @media (max-width: 1024px) {
                font-size: 40px;
            }
        }
    }
    .pxl-swiper-slide {
        height: auto;
    }
    .pxl-item--inner {
        background-color: #fff;
        padding: 35px 30px 16px 33px;
        height: 100%;
        @media (max-width: 676px) {
            padding: 30px 20px 16px 20px;
        }
        .pxl-item--holder {
            display: flex;
            @media (max-width: 1200px) {
                display: block;
            }
            .pxl-item--img {
                width: 38.5%;
                @media (max-width: 1200px) {
                    width: 100%;
                }
                img {
                    clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%, 0 17%);
                }
            }
            .pxl-item--meta {
                width: 61.5%;
                padding: 14px 30px 30px 42px;
                @media (max-width: 1280px) {
                    padding: 14px 20px 0px 20px;
                }
                @media (max-width: 1200px) {
                    width: 100%;
                    padding: 20px 0 0 0;
                }
                .pxl-item--title {
                    font-size: 26px;
                    color: $link_color;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.35;
                    margin-bottom: 23px;
                    @media (max-width: 991px) {
                        font-size: 24px;
                    }
                    @media (max-width: 676px) {
                        font-size: 20px;
                    }
                }
                .pxl-item--desc {
                    margin-bottom: 26px;
                }
                .pxl-meta-button {
                    text-align: right;
                    margin-right: -24px;
                    @media (max-width: 1200px) {
                        margin-right: 0;
                    }
                }
                .button-meta {
                    display: inline-block;
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                    svg {
                        height: 35px;
                        width: auto;
                        transform: rotate(0);
                        @include transition(all 0.3s);
                        path {
                            fill: $link_color;
                        }
                    }
                }
            }
        }
    }
}

.pxl-carousel-custom2 {
    .swiper-fade {
        .pxl-swiper-slide {
            opacity: 0 !important;
            z-index: 0;
            &.swiper-slide-active {
                opacity: 1 !important;
                z-index: 1;
            }
        }
    }
    .pxl-inner-top {
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 62px;
        @media (max-width: 991px) {
            margin-bottom: 30px;
        }
        .pxl-swiper-wrapper {
            @media (max-width: 991px) {
                display: block;
            }
        }
        .pxl-swiper-slide {
            @media (max-width: 991px) {
                width: 100% !important;
            }
        }
    }
    .pxl-swiper-arrow-wrap {
        margin: 0 auto;
        max-width: 1418px;
        justify-content: space-between;
        .pxl-swiper-wrapper {
            margin-left: -1px;
            @media (max-width: 991px) {
                margin-left: 0;
            }
        }
        .pxl-swiper-arrow {
            line-height: 1;
            @media (max-width: 1366px) {
                display: none;
            }
            svg {
                height: 20px;
                width: auto;
                path {
                    fill: $link_color;
                }
            }
            .hover {
                overflow: hidden;
                display: inline-flex;
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                clip-path: polygon(100% 0, 100% 84%, 79% 100%, 0 100%, 0 0);
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
        .pxl-swiper-thumbs {
            max-width: 1290px;
            width: 100%;
            padding: 0;
            border-left: 1px solid #d9d9d9;
            border-right: 1px solid #d9d9d9;
            @media (max-width: 1366px) {
                margin: 0 auto;
            }
            .pxl-swiper-slide {
                padding: 0;
            }
            .swiper-slide-thumb-active {
                .pxl-item--inner {
                    background-color: #191919;
                    .pxl-item-categori {
                        color: #fff;
                    }
                }
            }
            .pxl-item--inner {
                text-align: center;
                border-left: 1px solid #d9d9d9;
                padding: 21px 15px 24px 15px;
                @include transition(all 0.3s);
                @media (max-width: 991px) {
                    border-left: none;
                    border-bottom: 1px solid #d9d9d9;
                }
                &:hover {
                    background-color: #191919;
                    .pxl-item-categori {
                        color: #fff;
                    }
                }
                .pxl-item-categori {
                    font-size: 20px;
                    font-weight: 500;
                    color: $link_color;
                    @include transition(all 0.3s);
                    @include ft_theme_default($ft_theme_default);
                    @media (max-width: 1280px) {
                        font-size: 18px;
                    }
                }
            }
        }
    }
    .pxl-carousel-inner {
        max-width: 1290px;
        margin: 0 auto;
        .pxl-swiper-container {
            padding: 0;
        }
        .pxl-item-inner {
            .pxl-testtiminial-meta {
                display: flex;
                align-items: center;
                @media (max-width: 880px) {
                    display: block;
                }
                .pxl-inner-title {
                    width: 50%;
                    padding-top: 27px;
                    @media (max-width: 991px) {
                        padding-top: 0;
                    }
                    @media (max-width: 880px) {
                        width: 100%;
                    }
                    .pxl-item--title {
                        font-size: 40px;
                        color: $link_color;
                        font-weight: 500;
                        line-height: 1.25;
                        margin-bottom: 29px;
                        max-width: 84%;
                    }
                    .pxl-item--desc {
                        max-width: 81%;
                        margin-bottom: 35px;
                        @media (max-width: 1280px) {
                            max-width: 95%;
                        }
                    }
                    .pxl-list {
                        li {
                            list-style: none;
                            font-size: 16px;
                            color: #111111;
                            line-height: 1.2;
                            padding-left: 19px;
                            position: relative;
                            margin-bottom: 16px;
                            &:last-child {
                                margin-bottom: 0;
                            }
                            &:before {
                                content: '';
                                position: absolute;
                                width: 4px;
                                height: 4px;
                                left: 0;
                                top: 50%;
                                background-color: $primary_color;
                                transform: translate(0,-50%);
                            }
                        }
                    }
                    .pxl-carousel-button {
                        a {
                            display: inline-flex;
                            width: unset;
                            gap: 6px;
                            .pxl--btn-text {
                                width: 100%;
                            }
                            .pxl-btn-icon {
                                margin: 0;
                            }
                        }
                    }
                }
                .pxl-item--imgprimary {
                    width: 50%;
                    position: relative;
                    margin-left: 10px;
                    @media (max-width: 880px) {
                        width: 100%;
                        margin-left: 0;
                    }
                    img {
                        clip-path: polygon(91% 0, 100% 10.3%, 100% 100%, 0 100%, 0 0);
                    }
                    a {
                        position: absolute;
                        bottom: 14px;
                        left: 14px;
                        width: 106px;
                        height: 106px;
                        background-color: $link_color;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        &:hover {
                            background-color: #fff;
                            svg {
                                transform: rotate(45deg);
                                path {
                                    fill: $link_color;
                                }
                            }
                        }
                        svg {
                            height: 38px;
                            width: auto;
                            transform: rotate(0);
                            @include transition(all 0.3s);
                            path {
                                fill: #fff;
                                @include transition(all 0.3s);
                            }
                        }
                    }
                }
            }
        }
    }
}

.pxl-carousel-custom3 {
    .swiper-fade {
        .pxl-swiper-slide {
            opacity: 0 !important;
            z-index: 0;
            &.swiper-slide-active {
                opacity: 1 !important;
                z-index: 1;
            }
        }
    }
    .pxl-inner-top {
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 62px;
        @media (max-width: 991px) {
            margin-bottom: 30px;
        }
        .pxl-swiper-wrapper {
            @media (max-width: 991px) {
                display: block;
            }
        }
        .pxl-swiper-slide {
            @media (max-width: 991px) {
                width: 100% !important;
            }
            &.swiper-slide-active {
                .pxl-item--inner {
                    border-left: none;
                }
            }
        }
    }
    .pxl-swiper-arrow-wrap {
        margin: 0 auto;
        justify-content: center;
        .pxl-swiper-wrapper {
            @media (max-width: 991px) {
                margin-left: 0;
            }
        }
        .pxl-swiper-arrow {
            line-height: 72px;
            padding: 5px 45px 0 45px;
            position: relative;
            @include transition(all 200ms linear 0ms);
            &:before {
                content: '';
                position: absolute;
                height: 100%;
                width: 2000%;
                background-color: $primary_color;
                right: 0;
                top: 0;
                z-index: -1;
                @include transition(all 200ms linear 0ms);
                opacity: 0;
            }
            @media (max-width: 1366px) {
                display: none;
            }
            svg {
                height: 20px;
                width: auto;
                path {
                    fill: $link_color;
                    @include transition(all 200ms linear 0ms);
                }
            }
            .hover {
                overflow: hidden;
                display: inline-flex;
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                &:before {
                    right: unset;
                    left: 0;
                }
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
            &:hover {
                svg {
                    path {
                        fill: #fff;
                    }
                }
                &:before {
                    opacity: 1;
                }
            }
        }
        .pxl-swiper-thumbs {
            max-width: 1290px;
            width: 100%;
            padding: 0;
            border-left: 1px solid #d9d9d9;
            border-right: 1px solid #d9d9d9;
            @media (max-width: 1366px) {
                margin: 0 auto;
            }
            .pxl-swiper-slide {
                padding: 0;
            }
            .swiper-slide-thumb-active {
                .pxl-item--inner {
                    background-color: $link_color;
                    .pxl-item-categori {
                        color: #fff;
                    }
                }
            }
            .pxl-item--inner {
                text-align: center;
                border-left: 1px solid #d9d9d9;
                padding: 21px 15px 24px 15px;
                @include transition(all 0.3s);
                @media (max-width: 991px) {
                    border-left: none;
                    border-bottom: 1px solid #d9d9d9;
                }
                &:hover {
                    background-color: $link_color;
                    .pxl-item-categori {
                        color: #fff;
                    }
                }
                .pxl-item-categori {
                    font-size: 20px;
                    font-weight: 500;
                    color: $link_color;
                    @include transition(all 0.3s);
                    @include ft_theme_default($ft_theme_default);
                    @media (max-width: 1280px) {
                        font-size: 18px;
                    }
                }
            }
        }
    }
    .pxl-carousel-inner {
        max-width: 1290px;
        margin: 0 auto;
        .pxl-swiper-container {
            padding: 0;
        }
        .pxl-item-inner {
            .pxl-testtiminial-meta {
                display: flex;
                align-items: center;
                @media (max-width: 880px) {
                    display: block;
                }
                .pxl-inner-title {
                    width: 50%;
                    @media (max-width: 880px) {
                        width: 100%;
                        margin-bottom: 50px;
                    }
                    .pxl-item--title {
                        font-size: 40px;
                        color: $link_color;
                        font-weight: 500;
                        line-height: 1.25;
                        margin-bottom: 29px;
                        max-width: 78%;
                        @media (max-width: 880px) {
                            width: 100%;
                        }
                    }
                    .pxl-item--desc {
                        max-width: 81%;
                        margin-bottom: 26px;
                        @media (max-width: 1280px) {
                            max-width: 95%;
                        }
                    }
                    .pxl-list {
                        margin-bottom: 54px;
                        li {
                            list-style: none;
                            font-size: 16px;
                            color: #111111;
                            line-height: 1.2;
                            padding-left: 19px;
                            position: relative;
                            margin-bottom: 16px;
                            &:last-child {
                                margin-bottom: 0;
                            }
                            &:before {
                                content: '';
                                position: absolute;
                                width: 4px;
                                height: 4px;
                                left: 0;
                                top: 50%;
                                background-color: $primary_color;
                                transform: translate(0,-50%);
                            }
                        }
                    }
                    .pxl-carousel-button {
                        a {
                            display: inline-flex;
                            width: unset;
                            gap: 6px;
                            .pxl--btn-text {
                                width: 100%;
                                padding: 0 38px;
                            }
                            .pxl-btn-icon {
                                margin: 0;
                            }
                        }
                    }
                }
                .pxl-item--imgprimary {
                    width: 50%;
                    position: relative;
                    margin-left: 10px;
                    @media (max-width: 880px) {
                        width: 100%;
                        margin-left: 0;
                    }
                    img {
                        clip-path: polygon(91% 0, 100% 10.3%, 100% 100%, 0 100%, 0 0);
                    }
                    .pxl-item-icon {
                        position: absolute;
                        bottom: 48px;
                        left: -18px;
                        width: 143px;
                        height: 143px;
                        background-color: $primary_color;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        @media (max-width: 880px) {
                            left: 15px;
                        }
                        svg {
                            height: 60px;
                            width: auto;
                            transform: rotate(0);
                            @include transition(all 0.3s);
                            path {
                                fill: #fff;
                                @include transition(all 0.3s);
                            }
                            .pxl-svg-steel5 {
                                fill: none;
                                stroke: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

//pxl-box-list
.pxl-box-list {
    &.pxl-box-list1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: $primary_color;
        padding: 55px 20px 62px 20px;
        @include border-radius(50px);
        position: relative;
        overflow: hidden;
        @media (max-width: 1024px) {
            padding: 35px 15px 35px 15px;
        }
        @media (max-width: 676px) {
            display: block;
            text-align: center;
        }
        .pxl-item-shape {
            position: absolute;
            width: 150px;
            top: -20%;
            left: -10%;
            height: 150px;
            @include border-radius(50%);
            background-size: 350% 100%;
            background-image: linear-gradient(to right, $gradient_color_to, $gradient_color_from, $gradient_color_to, $gradient_color_from);
            animation: movement 10s linear infinite;
            @media (max-width: 880px) {
                display:none;
            }
        }
        .pxl-item-inner {
            display: flex;
            align-items: center;
            padding: 0 23px;
            z-index: 2;
            @media (max-width: 1024px) {
                padding: 0 15px;
            }
            @media (max-width: 991px) {
                display: unset;
            }
        }
        .pxl-image {
            &.pxl-mr-28 {
                @media (max-width: 991px) {
                    margin-right: 0;
                }
            }
            margin-bottom: 20px;
            img {
                max-width: 65px;
                filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(95deg) brightness(103%) contrast(102%);
                @media (max-width: 1024px) {
                    max-width: 55px;
                }
            }
        }
        .pxl-item-title {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 10px;
            @media (max-width: 1199px) {
                font-size: 20px;
            }
        }
        .pxl-item-desc {
            font-size: 15px;
            color: #d5cceb;
        }
    }
}

//pxl-text-video
.pxl-text-video {
    &.pxl-text-video1 {
        .pxl-meta-inner {
            display: flex;
            align-items: center;
            .pxl-inner-video {
                .pxl-btn-video {
                    width: 50px;
                    min-width: 50px;
                    height: 50px;
                    @include border-radius(50%);
                    background-color: #278eef;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 15px;
                    color: #fff;
                    padding: 1px 0 0 4px;
                    @include transition(all 0.3s);
                    &:hover {
                        background-color: #6d34d2;
                    }
                }
            }
            .pxl-item-title {
                font-size: 15px;
                font-weight: bold;
                color: #278eef;
                @extend .ft-heading;
            }
        }
    }
}

//pxl-service-custom
.pxl-service-custom {
    &.pxl-service-custom1 {
        .pxl-box-inner {
            @include transition(all 0.3s);
            &:hover {
                .pxl-item--imgprimary {
                    background-position: 100% 0;
                    @include transition(all 0.4s ease-in-out);
                }
                .pxl-img-title {
                    &:before {
                        background-position: 100% 0;
                        @include transition(all 0.4s ease-in-out);
                    }
                }
            }
            .pxl-img-title {
                display: flex;
                position: relative;
                padding-bottom: 23px;
                @include transition(all 0.3s);
                margin-bottom: 30px;
                @media (max-width: 880px) {
                    margin-bottom: 20px;
                }
                &:before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 3px;
                    left: 0;
                    bottom: 0;
                    background-size: 300% 100%;
                    background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
                }
            }
            .pxl-item--imgprimary {
                width: 53px;
                min-width: 53px;
                height: 53px;
                display: flex;
                @include transition(all 0.3s);
                align-items: center;
                justify-content: center;
                @include border-radius(15px);
                background-size: 300% 100%;
                background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
                img {
                    filter: invert(99%) sepia(2%) saturate(131%) hue-rotate(155deg) brightness(118%) contrast(100%);
                }
            }
            .pxl-item-title {
                font-size: 22px;
                font-weight: bold;
                line-height: 1.2;
                @extend .ft-heading;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                @media (max-width: 880px) {
                    font-size: 20px;
                }
                a {
                    color: #212456;
                    &:hover {
                        color: $primary_color;
                    }
                }
            }
            .pxl-item-desc {
                font-size: 18px;
                color: #474747;
                line-height: 1.6;
                @extend .ft-heading;
                @media (max-width: 880px) {
                    font-size: 16px;
                }
            }
        }
    }
}

// Showcase Grid
.pxl-mega-menu .pxl-showcase-grid1 .pxl-grid-inner {
    height: auto !important;
    .pxl-grid-item {
        position: static !important;
        @media (max-width: 1199px) {
            max-width: 100% !important;
            flex: 100% !important;
        }
    }
    .grid-sizer {
        display: none;
    }
}
.pxl-showcase-grid {
    text-align: center;
    .pxl-item--image {
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        @include box-shadow(0 10px 20px rgba(#8997BA, 0.25));
        margin-bottom: 25px;
        &:before {
            @extend .pxl-spill;
            background-color: #1C2539;
            @include transition(all 250ms linear 0ms);
            opacity: 0;
        }
    }
    .pxl-item--buttons {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        @include transform(translate(0, -50%));
        z-index: 99;
        .btn {
            color: #fff !important;
            line-height: 44px;
            padding: 0 30px;
            font-size: 15px;
            @include border-radius(30px);
            margin: 5px 0px;
            font-weight: bold;
            @extend .ft-heading;
            background-size: 300% 100%;
            background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
            &:hover {
                color: #fff !important;
                background-position: 100% 0;
                @include transition(all 0.4s ease-in-out);
            }
        }
        .pxl-item--button {
            transform: translateY(-40px);
            opacity: 0;
            @include transition(all 250ms linear 0ms);
        }
    }
    .pxl-item--title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 0;
        color: #fff;
        a {
            font-size: inherit;
            font-family: inherit;
            font-weight: inherit;
        }
    }
    .pxl-item--inner {
        @media (max-width: 1200px) {
            margin-bottom: 30px;
        }
        border-radius: 5px;
        &.style-2 {
            .pxl-item--image {
                position: relative;
                &:before {
                    display: none;
                }
                &:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background: rgba(48,49,66,.5);
                    backdrop-filter: blur(15px);
                }
            }
        }
        &:hover {
            .pxl-item--buttons .pxl-item--button {
                transform: translateY(0px);
                opacity: 1;
            }
            .pxl-item--image:before {
                opacity: 0.67;
            }
        }
    }
}

.pxl-logo-box {
    &.style1 {
        a {
            background-color: #fff;
            filter: drop-shadow(0px 30px 30px rgba(#000,0.04));
            @include border-radius(4px);
            display: block;
            z-index: 5;
            position: relative;
            padding: 45px 45px 38px 45px;
            overflow: hidden;
            &:after {
                content: '';
                position: absolute;
                height: 4px;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: $primary_color;
            }
        }
    }
    &.style2 {
        a {
           background-color: #323232;
           position: relative;
           overflow: hidden;
           display: block;
           padding: 39px 32px 22px 33px;
        }
    }
}

// Widget Search Icon
//--------------------------------------------------
.pxl-search-popup-button, .pxl-cart-sidebar-button {
    width: 30px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: $link_color;
    @include transition(color 0.3s ease, transform 0.3s ease);
    cursor: pointer;
    font-size: 25px;
    position: relative;
    svg {
        fill: $link_color;
        height: 25px;
        @include transition(all 0.3s);
        path {
            fill: $link_color;
            @include transition(all 0.3s);
        }
    }
    &:hover {
        color: $primary_color;
        svg {
            fill: $primary_color;
            path {
                fill: $primary_color;
            }
        }
    }
}

.pxl-cart-sidebar-button {
    svg {
        fill: #1b1d21;
        height: 24px;
        width: inherit;
    }
}

.pxl-search-popup-button {
    &.style-box {
        width: 47px;
        height: 47px;
        background-color: #009688;
        line-height: 47px;
        color: #fff;
        font-size: 20px;
    }
}

//pxl-couner-banner
.pxl-couner-banner1 {
    .pxl-counter--inner {
        &.default {
            background-color: #fff;
            padding: 40px 30px 42px 45px;
            @media (max-width: 575px) {
                padding: 40px 30px;
            }
            .pxl-counter--number {
                display: flex;
                align-items: center;
                font-size: 65px;
                color: $link_color;
                line-height: 1;
                @include ft_theme_default($ft_theme_default);
                margin-bottom: 5px;
                @media (max-width: 575px) {
                    font-size: 50px;
                }
            }
            .pxl-counter--title {
                font-size: 14px;
                letter-spacing: 1.4px;
                color: #666;
                font-weight: 500;
                text-transform: uppercase;
                @include ft_theme_default($ft_theme_default);
                display: inline-flex;
                align-items: center;
                position: relative;
                margin: 0 0 72px 2px;
                @media (max-width: 1024px) {
                    margin: 0 0 40px 0;
                }
                &:after {
                    content: '';
                    width: 49px;
                    height: 3px;
                    display: inline-flex;
                    background-color: $primary_color;
                    margin-left: 15px;
                }
            }
            .pxl-counter--desc {
                font-size: 16px;
                color: #666;
                margin-left: 2px;
            }
        }
        &.clip-path {
            background-color: #fff;
            padding: 40px 30px 42px 45px;
            clip-path: polygon(93% 0, 100% 10%, 100% 100%, 0 100%, 0 0);
            @media (max-width: 1024px) {
                clip-path: none;
            }
            @media (max-width: 575px) {
                padding: 40px 30px;
            }
            .pxl-counter--number {
                display: flex;
                align-items: center;
                font-size: 65px;
                color: $link_color;
                line-height: 1;
                @include ft_theme_default($ft_theme_default);
                margin-bottom: 5px;
                @media (max-width: 575px) {
                    font-size: 50px;
                }
            }
            .pxl-counter--title {
                font-size: 14px;
                letter-spacing: 1.4px;
                color: #666;
                font-weight: 500;
                text-transform: uppercase;
                @include ft_theme_default($ft_theme_default);
                display: inline-flex;
                align-items: center;
                position: relative;
                margin: 0 0 72px 2px;
                @media (max-width: 1024px) {
                    margin: 0 0 40px 0;
                }
                &:after {
                    content: '';
                    width: 49px;
                    height: 3px;
                    display: inline-flex;
                    background-color: $primary_color;
                    margin-left: 15px;
                }
            }
            .pxl-counter--desc {
                font-size: 16px;
                color: #666;
                margin-left: 2px;
            }
        }
    }
}

.pxl-couner-banner2 {
    .pxl-counter--inner {
        background-color: $link_color;
        padding: 50px 53px 54px 54px;
        display: inline-block;
        text-align: center;
        .pxl-item--icon {
            color: #fff;
            font-size: 72px;
            line-height: 1;
            margin-bottom: 46px;
            svg {
                height: 72px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
        }
        .pxl-counter--number {
            font-size: 80px;
            line-height: 1;
            color: #ffffff;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            margin-bottom: 8px;
        }
        .pxl-counter--title {
            font-size: 14px;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            color: #c2c2c2;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
        }
    }
}

//pxl-title-box
.pxl-title-box {
    &.pxl-title-box1 {
        .pxl-image-wg {
            filter: drop-shadow(0px 8px 21.5px rgba(#000,0.21));
        }
        .pxl-meta-inner {
            display: inline-flex;
            clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
            width: 196px;
            min-width: 196px;
            height: 227px;
            position: relative;
            background-color: $gradient_color_from;
            text-align: center;
            .pxl-item-clip {
                position: absolute;
                top: 3px;
                left: 3px;
                right: 3px;
                bottom: 3px;
                clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
                background-color: #fff;
                padding-top: 38px;
            }
            .pxl-item-conent {
                padding: 0 10px 17px 10px;
                margin-bottom: 5px;
                border-bottom: 3px solid $gradient_color_from;
            }
            .pxl-sub-title {
                font-size: 13px;
                color: #ffffff;
                font-weight: 500;
                font-family: 'Inter', sans-serif;
                line-height: 25px;
                background-color: $primary_color;
                @include border-radius(5px);
                padding: 0 17px;
                display: inline-block;
                margin-bottom: 10px;
            }
            .pxl-item-title {
                font-size: 22px;
                color: $link_color;
                font-weight: 700;
                
                line-height: 1.05;
            }
            .pxl-conent-number {
                display: inline-flex;
                align-items: center;
                font-size: 26px;
                color: #151f35;
                font-weight: 700;
                
            }
        }
    }
}

//pxl-gallery
.pxl-gallery-layout {
    &.pxl-gallery-1 {
        .item--inner {
            position: relative;
            @include transition(all 0.5s);
            margin-bottom: 30px;
            &:hover {
                a {
                    &:before {
                        opacity: 1;
                    }
                    &:after {
                        opacity: 1;
                    }
                    img {
                        opacity: 0.7;
                        transform: scale(1.05);
                    }
                }
            }
            a {
                width: 100%;
                display: block;
                height: 100%;
                z-index: 1;
                position: relative;
                @include border-radius(5px);
                overflow: hidden;
                @include transition(all 0.5s);
                background-color: $link_color;
                &:before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 30px;
                    height: 2px;
                    background-color: #fff;
                    transform: translate(-50%,-50%);
                    opacity: 0;
                    @include transition(all 0.3s);
                    z-index: 1;
                }
                &:after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 2px;
                    height: 30px;
                    background-color: #fff;
                    transform: translate(-50%,-50%);
                    opacity: 0;
                    @include transition(all 0.3s);
                }
                img {
                    @include transition(all 0.3s);
                }
            }
        }
    }
}

//pxl-process
.pxl-process {
    .pxl-swiper-container {
        margin: 0 -10px;
    }
    .pxl-swiper-slide {
        padding: 0 10px;
    }
    &.pxl-process-layout1 {
        .pxl-item--inner {
            .pxl-item--image {
                @include border-radius(4px);
                overflow: hidden;
                position: relative;
                .pxl-item--number {
                    font-size: 44px;
                    color: #fff;
                    font-weight: 800;
                    line-height: 1;
                    
                    position: absolute;
                    bottom: -11px;
                    left: 16px;
                }
            }
            .pxl-item--holder {
                .pxl-item--title {
                    margin-bottom: 11px;
                    margin-top: 23px;
                    font-size: 20px;
                    font-weight: 600;
                }
                .pxl-item--desc {
                    font-size: 15px;
                    color: #494949;
                }
            }
        }
    }
}

//pxl-meta-grid
.pxl-meta-grid1 {
    .pxl-item--inner {
        display: flex;
        align-items: center;
        .pxl-item--icon {
            width: 44px;
            min-width: 44px;
            height: 44px;
            @include border-radius(50%);
            background-color: $primary_color;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 15px;
            margin-top: 12px;
            @media (max-width: 1024px) {
                margin-top: 0;
                &.pxl-mr-33 {
                    margin-right: 15px;
                }
            }
            svg {
                height: 15px;
                width: auto;
                fill: #fff;
                path {
                    fill: #fff;
                }
            }
        }
        .pxl-item--holder {
            .pxl-item--title {
                margin-bottom: 15px;
                font-size: 20px;
                font-weight: 500;
                color: $link_color;
                line-height: 1.2;
            }
            .pxl-item-link {
                display: block;
                font-size: 16px;
                color: #666666;
                line-height: 1.2;
                margin-bottom: 11px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

.pxl-meta-grid2 {
    border: 1px solid #d9d9d9;
    @media (max-width: 575px) {
        border-right: none;
        border-left: none;
        border-bottom: none;
    }
    .pxl-grid-item {
        padding: 0;
    }
    .pxl-grid-inner {
        margin: 0;
        margin-left: -1px;
    }
    .pxl-item--inner {
        text-align: center;
        border-left: 1px solid #d9d9d9;
        position: relative;
        @include transition(all 0.3s);
        overflow: hidden;
        @media (max-width: 575px) {
            border-bottom: 1px solid #d9d9d9;
            border-left: none;
        }
        &:hover {
            .pxl-inner-default {
                opacity: 0;
                .pxl-item-number {
                    transform: scaleY(0);
                }
            }
            .pxl-inner-hover {
                opacity: 1;
                top: 0;
                @media (max-width: 1200px) {
                    top: 50%;
                    transform: translate(0,-50%);
                }
            }
        }
        .pxl-inner-default {
            padding-bottom: 43px;
            @include transition(all 0.3s);
            background-color: #fff;
            opacity: 1;
            .pxl-item-number {
                width: 69px;
                height: 100px;
                background-color: #edefed;
                display: inline-flex;
                align-items: end;
                justify-content: center;
                margin-top: -1px;
                padding-bottom: 15px;
                margin-bottom: 60px;
                transform-origin: top;
                @include transition(all 0.3s);
                @media (max-width: 1200px) {
                    margin-bottom: 30px;
                }
            }
            .pxl-item--icon {
                margin-bottom: 75px;
                @media (max-width: 1200px) {
                    margin-bottom: 50px;
                }
            }
        }
        .pxl-inner-hover {
            position: absolute;
            top: 100%;
            left: 0;
            padding: 45px 50px 30px 50px;
            opacity: 0;
            background-color: #fff;
            @include transition(all 0.4s);
            @media (max-width: 1366px) {
                padding: 45px 30px 30px 30px;
            }
            @media (max-width: 1200px) {
                padding: 30px 15px;
            }
            .pxl-item--holder {
                margin-bottom: 41px;
                @media (max-width: 1200px) {
                    margin-bottom: 20px;
                }
            }
            .pxl-item--desc {
                max-width: 89%;
                margin: 0 auto;
                @media (max-width: 1280px) {
                    max-width: 1280px;
                }
            }
            .pxl-item--icon {
                margin-bottom: 40px;
                @media (max-width: 1200px) {
                    margin-bottom: 20px;
                }
            }
        }
        .pxl-item--icon {
            svg {
                height: 63px;
                width: auto;
                fill: $primary_color;
                path {
                    fill: $primary_color;
                }
            }
        }
        .pxl-item--title {
            font-size: 22px;
            text-transform: uppercase;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}

.pxl-meta-grid3 {
    .pxl-grid-inner {
        margin: 0;
    }
    .pxl-grid-item {
        padding: 0;
        &:first-child {
            .pxl-item--inner {
                border-left: none;
            }
        }
    }
    .pxl-item--inner {
        border-left: 1px solid rgba(#fff, 0.149);
        position: relative;
        padding: 100px 60px 94px 60px;
        text-align: center;
        @media (max-width: 1366px) {
            padding: 50px 30px 50px 30px;
        }
        .pxl-item--icon {
            line-height: 1;
            margin-bottom: 39px;
            svg {
                height: 51px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
        }
        .pxl-item--title {
            font-size: 22px;
            color: #ffffff;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            margin-bottom: 11px;
            @media (max-width: 1280px) {
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
        .pxl-item--desc {
            font-size: 16px;
            color: #c2c2c2;
            @media (max-width: 1280px) {
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    }
}

.pxl-meta-grid4 {
    .pxl-item--inner {
        border: 1px solid #d9d9d9;
        padding: 24px 46px 40px 44px;
        margin: 15px 0;
        @include transition(all 0.3s ease-out);
        @media (max-width: 1200px) {
            padding: 24px 15px 40px 15px;
        }
        &:hover {
            border-color: $link_color;
        }
        .pxl-inner-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #d9d9d9;
            margin-bottom: 28px;
            padding-bottom: 24px;
            @include transition(all 0.3s ease-out);
            .pxl-item--icon {
                width: 90px;
                height: 90px;
                background-color: $link_color;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                @media (max-width: 1024px) {
                    width: 70px;
                    height: 70px;
                }
                svg {
                    height: 45px;
                    width: auto;
                    @media (max-width: 1024px) {
                        height: 40px;
                    }
                    path {
                        fill: #fff;
                    }
                }
            }
            .pxl-item-number {
                font-size: 17px;
                color: #68747a;
                @include ft_theme_default($ft_theme_default);
            }
        }
        .pxl-item--title {
            font-size: 22px;
            font-weight: 500;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.2;
            margin-bottom: 18px;
            @media (max-width: 1024px) {
                font-size: 20px;
            }
        }

    }
}

.pxl-meta-grid5 {
    .pxl-grid-item {
        border-left: 1px solid #d9d9d9;
        height: inherit;
        &:first-child {
            border-left: none;
        }
        @media (max-width: 767px) {
            border-left: none;
            &:first-child {
                border-bottom: none;
            }
        }
    }
    .pxl-item--inner {
        padding: 135px 50px 130px 50px;
        @media (max-width: 1280px) {
            padding: 100px 40px;
        }
        @media (max-width: 1024px) {
            padding: 50px 30px;
        }
        @media (max-width: 767px) {
             border-bottom: 1px solid #d9d9d9;
        }
        .pxl-item--icon {
            height: 95px;
            width: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $primary_color;
            clip-path: polygon(83% 0, 100% 21%, 100% 100%, 0 100%, 0 0);
            @media (max-width: 1024px) {
                height: 85px;
                width: 85px;
            }
            svg {
                height: 40px;
                width: auto;
                fill: #fff;
                @media (max-width: 1024px) {
                    height: 32px;
                }
                path {
                    fill: #fff;
                }
            }
            i {
                font-size: 40px;
                color: #fff;
                @media (max-width: 1024px) {
                    font-size: 32px;
                }
            }
        }
        .pxl-item--title {
            font-size: 22px;
            font-weight: 500;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
            margin-bottom: 26px;
            position: relative;
            border-bottom: 1px solid #d9d9d9;
            margin-top: 43px;
            line-height: 1.5;
            padding-bottom: 25px;
            &:before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 53px;
                height: 3px;
                background-color: $primary_color;
            }
        }
        .pxl-item--desc {
            font-size: 16px;
            color: #666666;
            max-width: 93%;
            @media (max-width: 1280px) {
                max-width: 100%;
            }
        }
    }
}
//search form


//pxl-image-single
.pxl-image-single {
    &.style_img2 {
        .pxl-item--inner {
            .bg-image {
                background-color: #d9d9d9;
                mix-blend-mode: luminosity;
            }
            .pxl-item--image {
                background-color: #d9d9d9;
                img {
                    mix-blend-mode: luminosity;
                }
            }
        }
    }
    .pxl-item--inner {
        overflow: hidden;
        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: -60px;
        }
    }
    &.style_img3 {
        position: relative;
        .pxl-item--inner {
            position: relative;
            clip-path: polygon(12% 0, 100% 0, 100% 92%, 89% 100%, 0 100%, 0 10%);
            will-change: clip-path;
        }
    }
    &.style_img4 {
        position: relative;
        padding: 102px 0 104px 0;
        .pxl-overlay-primary {
            position: absolute;
            width: 56%;
            height: 100%;
            background-color: $primary_color;
            top: 0;
            left: 0;
            &:before {
                content: '';
                background-repeat: no-repeat;
                background-size: cover;
                background-image: url(../img/bg-overlay.png);
                background-position: center center;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
    &.style_img5 {
        position: relative;
        .pxl-item--inner {
            position: relative;
            clip-path: polygon(85% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
            will-change: clip-path;
        }
    }
    &.style_img6 {
        position: relative;
        .pxl-item--inner {
            position: relative;
            clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 8%);
            will-change: clip-path;
        }
    }
    &.style_img7 {
        position: relative;
        .pxl-item--inner {
            position: relative;
            clip-path: polygon(92% 0, 100% 15%, 100% 100%, 0 100%, 0 0);
            will-change: clip-path;
        }
    }
}

//pxl-career-grid
.pxl-career-grid1 {
    .pxl-item--inner {
        border: 1px solid #DBDBDB;
        @include border-radius(8px);
        padding: 32px 20px 24px 28px;
        position: relative;
        overflow: hidden;
        .pxl-link-inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        &:hover {
            .pxl-item--icon {
                color: $primary_color
            }
        }
        .pxl-item--icon {
            font-size: 50px;
            line-height: 1;
            color: $link_color;
            @include transition(all .3s);
        }
        .pxl-item--holder {
            margin-top: 15px;
            .pxl-item--title {
                margin-bottom: 17px;
                font-size: 22px;
                font-weight: 600;
                @include transition(all .3s);
                position: relative;
                z-index: 1;
            }
            .pxl-item--desc {
                font-size: 16px;
                color: #494949;
            }
        }
    }
}

//pxl-apply-list
.pxl-apply-list1 {
    .pxl-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #DBDBDB;
        padding-top: 36px;
        padding-bottom: 46px;
        @media (max-width: 880px) {
            display: block;
        }
        &:last-child {
            border-bottom: 1px solid #DBDBDB;
        }
        .pxl-address-time {
            display: flex;
            align-items: end;
            @media (max-width: 1024px) {
                display: block;
            }
        }
        .pxl-item-boder {
            position: relative;
            padding-right: 65px;
            @media (max-width: 1199px) {
                padding-right: 50px;
            }
            @media (max-width: 880px) {
                padding-right: 0;
                &:after {
                    display: none;
                }
            }
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 0;
                width: 2px;
                height: 77px;
                transform: translate(0,-50%);
                background: radial-gradient(circle at 0%, #DBDBDB, #DBDBDB 0%, #fff 75%, #DBDBDB 1000%);
            }
        }
        .pxl-address-time {
            .pxl-title-address {
                font-size: 24px;
                font-weight: 600;
                
                color: $link_color;
                margin-bottom: 11px;
                @media (max-width: 880px) {
                    font-size: 20px;
                }
            }
            .pxl-sub-address {
                font-size: 16px;
                color: #494949;
                padding-left: 4px;
                @media (max-width: 880px) {
                    padding-left: 0;
                }
                i {
                    color: $link_color;
                }
            }
            .pxl-item-time {
                font-size: 16px;
                color: #494949;
                margin-left: 32px;
                margin-bottom: 3px;
                @media (max-width: 1024px) {
                    margin-left: 0;
                    margin-bottom: 0;
                    margin-top: 15px;
                }
                i {
                    color: $link_color;
                }
            }
        }
        .sub-style {
            font-size: 16px;
            color: #494949;
            margin-top: 9px;
        }
        .title-style {
            font-size: 20px;
            color: $link_color;
        }
        .pxl-item-button {
            @media (max-width: 880px) {
                margin-top: 20px;
            }
            .btn {
                background-color: unset;
                border: 2px solid #494949;
                border-radius: 6px;
                color: #494949;
                line-height: 52px;
                i {
                    background-color: #494949;
                    color: #fff;
                }
                &:hover {
                    background-color: $primary_color;
                    border-color: $primary_color;
                    color: #fff;
                    i {
                        background-color: #fff;
                        color: $link_color;
                    }
                }
            }
        }
    }
}

//pxl-career-single
.pxl-career-single {
    padding: 5px;
    .pxl-item--image {
        position: relative;
        &:before {
            content: '';
            background: linear-gradient(rgba(#000, 1), rgba(#fff,0.01));
            width: 100%;
            height: 29.76%;
            top: 0;
            left: 0;
            position: absolute;
        }
        img {
            width: 100%;
        }
    }
}

//PXL Button Video
.pxl-button-video1 {
    .pxl-item--inner  {
        display: flex;
        align-items: center;
        .pxl-btn-video {
            width: 105px;
            height: 105px;
            background-color: #fff;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 20px;
            color: $link_color;
            &:hover {
                background-color: $primary_color;
                color: #fff;
            }
        }
    }
}
//end

.pxl-instagram-grid1 {
    .pxl-item--inner {
        @include transition(all 0.3s);
        &:hover {
            .pxl-item--image {
                a {
                    i {
                        opacity: 1;
                        top: 50%;
                    }
                    img {
                        opacity: 0.6;
                    }
                }
            }
        }
        .pxl-item--image {
            background-color: $link_color;
            @include border-radius(10px);
            overflow: hidden;
            @include transition(all 0.3s);
            a {
                display: block;
                position: relative;
                i {
                    font-size: 30px;
                    color: #fff;
                    position: absolute;
                    top: 55%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    z-index: 1;
                    @include transition(all 0.3s);
                    opacity: 0;
                }
                img {
                    @include transition(all 0.3s);
                }
            }
        }
    }
}

//pxl-image-grid
.pxl-image-grid1 {
    .pxl-item--inner {
        .pxl-item--image {
            text-align: center;
        }
    }
}

//pxl-fancy-box
.pxl-fancy-box {
    &.pxl-fancy-box1 {
        .pxl-meta-inner {
            position: relative;
            text-align: center;
            width: 569px;
            min-width: 569px;
            height: 569px;
            @include border-radius(50%);
            background-color: rgba(#ff5303, 0.788);
            align-content: center;
            @media (max-width: 1199px) {
                width: 500px;
                min-width: 500px;
                height: 500px;
            }
            @media (max-width: 575px) {
                width: unset;
                min-width: unset;
                height: unset;
                background-color: unset;
            }
            .pxl-item-border {
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: rgba(#ff5303, 0.369);
                @include border-radius(50%);
                animation: pxl_pulse_radius 2000ms ease-out infinite;
                -webkit-animation: pxl_pulse_radius 2000ms ease-out infinite;
                z-index: -2;
                border-radius: inherit;
                @media (max-width: 575px) {
                    display: none;
                }
            }
            .pxl-sub-title {
                font-size: 24px;
                color: #ffffff;
                font-weight: 400;
                font-family: "Inter";
                position: relative;
                display: inline-block;
                line-height: 1.2;
                padding-left: 25px;
                @media (max-width: 1199px) {
                    font-size: 20px;
                }
                &:before {
                    content: '';
                    background-image: url(../img/img-icon-fancybox1.png);
                    width: 21px;
                    height: 21px;
                    z-index: 1;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    background-repeat: no-repeat;
                    filter: brightness(0) saturate(100%) invert(99%) sepia(39%) saturate(2%) hue-rotate(200deg) brightness(110%) contrast(100%);
                    transform: translate(0,-50%);
                }
            }
            .pxl-item-title {
                font-size: 60px;
                color: #ffffff;
                font-weight: 700;
                
                filter: drop-shadow(0px 3px 3.5px rgba(#000,0.35));
                line-height: 1;
                margin-top: 10px;
                margin-bottom: 19px;
                @media (max-width: 1199px) {
                    font-size: 50px;
                }
                @media (max-width: 480px) {
                    font-size: 40px;
                }
            }
            .pxl-item-desc {
                opacity: 0.851;
                font-size: 19px;
                color: #ffffff;
                font-weight: 400;
                font-family: "Inter";
                max-width: 89%;
                margin: 0 auto;
                line-height: 1.77;
                margin-bottom: 41px;
                @media (max-width: 575px) {
                    margin-bottom: 30px;
                }
                @media (max-width: 480px) {
                    max-width: 100%;
                }
            }
            .pxl-btn-link {
                display: inline-flex;
                a {
                    font-size: 16px;
                    color: #ffffff;
                    font-weight: 700;
                    
                    @include border-radius(26px);
                    background-color: $link_color;
                    padding: 8px 10px 8px 27px;
                    display: inline-flex;
                    align-items: center;
                    &:hover {
                        span {
                            transform: rotate(0deg);
                        }
                    }
                    span {
                        filter: drop-shadow(0px 3px 3.5px rgba(#000,0.35));
                        background-color: #fff;
                        width: 34px;
                        height: 34px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        min-width: 34px;
                        border-radius: 50%;
                        color: #000;
                        transform: rotate(-44deg);
                        margin-left: 17px;
                        @include transition(all 0.3s);
                    }
                }
            }
        }
    }
    &.pxl-fancy-box2 {
        &.style1 {
            .pxl-meta-inner {
                background-color: #f6f6f6;
                padding: 35px 40px 40px 40px;
                @media (max-width: 880px) {
                    padding: 30px 20px 30px 20px;
                }
                .pxl-image-wg {
                    display: flex;
                    @media (max-width: 1200px) {
                        display: block;
                    }
                }
                .pxl-item--icon {
                    width: 60px;
                    min-width: 60px;
                    height: 60px;
                    margin-right: 4px;
                    padding-top: 8px;
                    @media (max-width: 1200px) {
                        margin-bottom: 15px;
                        margin-right: 0;
                        padding-top: 0;
                    }
                }
                .pxl-item-content {
                    .pxl-item-title {
                        font-size: 24px;
                        color: #262626;
                        font-weight: 700;
                        
                        line-height: 1.2;
                        margin-bottom: 16px;
                    }
                    .pxl-item-desc {
                        font-size: 16px;
                        color: #555555;
                        font-weight: 400;
                        font-family: "Inter";
                    }
                }
            }
        }
        &.style2 {
            .pxl-meta-inner {
                background-color: $primary_color;
                padding: 35px 40px 40px 40px;
                @media (max-width: 880px) {
                    padding: 30px 20px 30px 20px;
                }
                .pxl-image-wg {
                    display: flex;
                    @media (max-width: 1200px) {
                        display: block;
                    }
                }
                .pxl-item--icon {
                    width: 60px;
                    min-width: 60px;
                    height: 60px;
                    margin-right: 4px;
                    padding-top: 8px;
                    @media (max-width: 1200px) {
                        margin-bottom: 15px !important;
                        margin-right: 0 !important;
                        padding-top: 0 !important;
                    }
                    img {
                        filter: brightness(0) saturate(100%) invert(99%) sepia(39%) saturate(2%) hue-rotate(200deg) brightness(110%) contrast(100%);
                    }
                }
                .pxl-item-content {
                    .pxl-item-title {
                        font-size: 24px;
                        color: #fff;
                        font-weight: 700;
                        
                        line-height: 1.2;
                        margin-bottom: 16px;
                    }
                    .pxl-item-desc {
                        font-size: 16px;
                        color: #fff;
                        font-weight: 400;
                        font-family: "Inter";
                        opacity: 0.851;
                    }
                }
            }
        }
    }
    &.pxl-fancy-box3 {
        .pxl-meta-inner {
            margin-left: 33px;
            border-radius: 8px;
            filter: drop-shadow(-1.035px 3.864px 21.5px rgba(0,9,37,0.2));
            transform: translateX(0px);
            @include transition(all 0.3s);
            padding: 31px 20px 27px 0;
            position: relative;
            background-color: #fff;
            @media (max-width: 1024px) {
                margin-left: 0;
                padding: 25px 15px 25px 15px;
            }
            .pxl-shape-img {
                position: absolute;
                top: 0;
                left: 0px;
                width: 100%;
                height: 100%;
                border-radius: 8px;
                overflow: hidden;
                &:before {
                    content: '';
                    position: absolute;
                    top: -4px;
                    left: 140px;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-image: url(../img/shape-img1.png);
                    background-position: 50%;
                    width: 100%;
                    height: 105%;
                    z-index: -1;
                    opacity: 0;
                    border-radius: 8px;
                    @include transition(all 0.3s);
                }
            }
            .pxl-image-wg {
                display: flex;
                @include transition(all 0.3s);
                @media (max-width: 1024px) {
                    display: block;
                }
                .pxl-item--icon {
                    width: 64px;
                    min-width: 64px;
                    height: 64px;
                    border-radius: 50%;
                    filter: drop-shadow(-3.914px 5.803px 0px $primary_color);
                    background-color: $gradient_color_to;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: -33px;
                    margin-right: 25px;
                    font-size: 30px;
                    @include transition(all 0.3s);
                    position: relative;
                    @media (max-width: 1024px) {
                        margin-left: 0;
                        margin-bottom: 15px;
                    }
                    .pxl-icon1 {
                        img {
                            filter: invert(100%) sepia(5%) saturate(0%) hue-rotate(319deg) brightness(104%) contrast(106%);
                            @include transition(all 0.3s);
                            opacity: 1;
                        }
                    }
                    .pxl-icon2 {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        img {
                            filter: invert(18%) sepia(18%) saturate(6381%) hue-rotate(207deg) brightness(93%) contrast(112%);
                            @include transition(all 0.3s);
                            opacity: 0;
                        }
                    }
                }
                .pxl-item-content {
                    .pxl-item-title {
                        font-size: 22px;
                        color: $gradient_color_to;
                        font-weight: 700;
                        
                        line-height: 1.2;
                        margin-bottom: 12px;
                        @include transition(all 0.3s);
                    }
                    .pxl-item-desc {
                        font-size: 16px;
                        color: #666666;
                        font-weight: 400;
                        
                        @include transition(all 0.3s);
                    }
                }
            }
            &:hover {
                transform: translateX(8px);
                background-color: $gradient_color_to;
                .pxl-shape-img {
                    &:before {
                        opacity: 1;
                    }
                }
                .pxl-image-wg {
                    .pxl-item--icon {
                        background-color: #fff;
                        color: $gradient_color_to;
                        .pxl-icon1 {
                            img {
                                opacity: 0;
                            }
                        }
                        .pxl-icon2 {
                            img {
                                opacity: 1;
                            }
                        }
                    }
                    .pxl-item-content {
                        .pxl-item-title {
                            color: #fff;
                        }
                        .pxl-item-desc {
                            color: #f2f2f2;
                        }
                    }
                }
            }
        }
        &.style2 {
            .pxl-meta-inner {
                &:hover {
                    transform: translateX(-8px);
                }
            }
        }
    }
}

//PXL Banner Video
.pxl-banner-video {
    &.pxl-banner-video1 {
        .pxl-meta-inner {
            position: relative;
            padding-bottom: 58px;
            @media (max-width: 360px) {
                padding-bottom: 15px;
            }
            .pxl-item-layout1 {
                text-align: right;
                padding-right: 40px;
                @media (max-width: 1024px) {
                    padding-right: 0;
                }
                .pxl-item--img {
                    display: inline-block;
                    img {
                        @include border-radius(4px);
                    }
                }
            }
            .pxl-transform-left {
                @media (max-width: 767px) {
                    transform: none !important;
                }
                img {
                    @media (max-width: 767px) {
                        transform: none !important;
                    }
                }
            }
            .pxl-item-layout2 {
                position: absolute;
                bottom: 0;
                left: 63px;
                perspective: 70px;
                perspective-origin: 50% 50%;
                @media (max-width: 1280px) {
                    left: 0;
                }
                @media (max-width: 360px) {
                    position: unset;
                    display: inline-block;
                    margin-top: 30px;
                    width: 100%;
                }
                .pxl-item--image {
                    img {
                        @media (max-width: 360px) {
                            width: 100%;
                        }
                    }
                }
                &:hover {
                    .pxl-inner-content {
                        transform: scaleX(1) scaleY(1) scaleZ(0.1) rotateX(8deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
                    }
                }
                .pxl-image-wg {
                    @media (max-width: 767px) {
                        transform: none !important;
                        -webkit-transform: none !important;
                    }
                }
                .pxl-inner-content {
                    position: relative;
                    @include border-radius(4px);
                    overflow: hidden;
                    border: 16px solid #fff;
                    @include transition(all 1s);
                    @media (max-width: 767px) {
                        filter: drop-shadow(0px 7px 13.5px rgba(0,0,0,0.05));
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        background-color: rgba(#0c0e12, 0.420);
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                    .pxl-inner-video {
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        margin-top: 7px;
                        z-index: 2;
                        width: 100%;
                        .pxl-button-video {
                            margin-bottom: 15px;
                        }
                        .pxl-btn-video {
                            width: 75px;
                            height: 75px;
                            @include border-radius(50%);
                            filter: drop-shadow(0px 1px 27px rgba(#2f54ee,0.46));
                            background-color: $primary_color;
                            color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin: 0 auto;
                            @include transition(0.5s cubic-bezier(.23,1,.32,1));
                            &:hover {
                                background-color: #fff;
                                color: $primary_color;
                                animation: jello 1s;
                            }
                        }
                        .pxl-item-title {
                            font-size: 12px;
                            letter-spacing: 1px;
                            line-height: 1.2;
                            text-transform: uppercase;
                            color: #fefeff;
                            font-weight: 700;
                            
                        }
                    }
                }
            }
        }
    }
    &.pxl-banner-video2 {
        .pxl-meta-inner {
            display: flex;
            @media (max-width: 767px) {
                display: block;
            }
            .pxl-item-layout-img {
                width: 50%;
                @media (max-width: 767px) {
                    width: 100%;
                }
            }
            .pxl-item-layout-video {
                margin-left: -181px;
                padding-top: 3px;
                @media (max-width: 1280px) {
                    margin-left: -250px;
                }
                @media (max-width: 1199px) {
                    display: none;
                }
                @media (max-width: 1024px) {
                    margin-left: 0;
                }
                &.layout-left {
                    margin-left: 0px;
                    padding-top: 35px;
                    display: inline-block;
                    display: none;
                    @media (max-width: 1199px) {
                        display: inline-block;
                    }
                    @media (max-width: 767px) {
                        display: block;
                    }
                    img {
                        @media (max-width: 767px) {
                            width: 100%;
                        }
                    }
                }
                .pxl-image-wg {
                    @media (max-width: 1024px) {
                        transform: unset !important;
                        -webkit-transform: unset !important;
                    }
                }
            }
            .pxl-inner-content {
                position: relative;
                @media (max-width: 676px) {
                    display: inline-block;
                }
                .pxl-item--image {
                    position: relative;
                    @include border-radius(10px);
                    @include transition(all 1s);
                    background-color: #000;
                    img {
                        @include border-radius(10px);
                        opacity: 0.7;
                    }
                }
                .pxl-inner-video {
                    text-align: center;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    margin-top: 7px;
                    z-index: 2;
                    width: 100%;
                    .pxl-button-video {
                        margin-bottom: 15px;
                    }
                    .pxl-btn-video {
                        width: 64px;
                        height: 64px;
                        @include border-radius(50%);
                        background-color: #fff;
                        color: #4f4f4f;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 0 auto;
                        @include transition(0.5s cubic-bezier(.23,1,.32,1));
                        font-size: 13px;
                        line-height: 1;
                        &:hover {
                            background-color: #fff;
                            color: $primary_color;
                            animation: jello 1s;
                        }
                    }
                    .pxl-item-title {
                        font-size: 12px;
                        letter-spacing: 1px;
                        line-height: 1.2;
                        text-transform: uppercase;
                        color: #fefeff;
                        font-weight: 700;
                        
                    }
                }
            }
            .pxl-item-content {
                width: 50%;
                padding-left: 51px;
                @media (max-width: 1280px) {
                    padding-left: 30px;
                }
                @media (max-width: 767px) {
                    width: 100%;
                    padding-left: 0;
                }
                .pxl-item-heading {
                    padding-top: 20px;
                    margin-bottom: 26px;
                    padding-left: 2px;
                    @media (max-width: 767px) {
                        padding-left: 0;
                        padding-top: 50px;
                    }
                    .pxl-sub-title {
                        font-size: 19px;
                        text-transform: uppercase;
                        color: $primary_color;
                        font-weight: 700;
                        font-family: "Barlow Semi Condensed";
                        margin-bottom: 8px;
                    }
                    .pxl-item-title {
                        font-size: 60px;
                        letter-spacing: 0.5px;
                        color: #090909;
                        font-weight: 800;
                        font-family: "Barlow Semi Condensed";
                        line-height: 1.1;
                        max-width: 75%;
                        @media (max-width: 1280px) {
                            max-width: 100%;
                        }
                        @media (max-width: 1024px) {
                            font-size: 55px;
                        }
                        @media (max-width: 880px) {
                            font-size: 45px;
                        }
                        @media (max-width: 767px) {
                            font-size: 35px;
                        }
                    }
                }
                .pxl-item-desc {
                    font-size: 18px;
                    letter-spacing: 0.15px;
                    color: #626262;
                    font-weight: 400;
                    font-family: "Barlow Semi Condensed";
                    max-width: 73%;
                    @media (max-width: 991px) {
                        max-width: 100%;
                    }
                }
                .pxl-video-list {
                    display: flex;
                    padding-top: 37px;
                    @media (max-width: 1024px) {
                        display: block;
                        padding-top: 25px;
                    }
                    .pxl-list {
                        margin-left: 74px;
                        @media (max-width: 1199px) {
                            margin-left: 0;
                            width: 100%;
                        }
                        .pxl-item {
                            border-bottom: 1px solid #d7d7d7;
                            padding-bottom: 13px;
                            margin-bottom: 11px;
                            &:last-child {
                                border-bottom: none;
                                padding-bottom: 0;
                                margin-bottom: 0;
                            }
                            .pxl-item--title-list {
                                font-size: 20px;
                                color: #222222;
                                font-weight: 700;
                                font-family: "Barlow Semi Condensed";
                                display: flex;
                                align-items: center;
                                .pxl-icon-list {
                                    width: 15px;
                                    min-width: 15px;
                                    height: 15px;
                                    display: flex;
                                    background-color: $primary_color;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    color: #fff;
                                    border-radius: 50%;
                                    font-size: 10px;
                                    margin-right: 27px;
                                    svg {
                                        height: 8px;
                                        width: auto;
                                        path {
                                            fill: #fff;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .pxl-item-bottom {
                    display: flex;
                    align-items: center;
                    margin-top: 52px;
                    margin-left: -3px;
                    @media (max-width: 991px) {
                        display: block;
                        margin-left: 0;
                        margin-top: 30px;
                    }
                    .pxl-item-btn {
                        margin-right: 29px;
                        @media (max-width: 991px) {
                            margin-right: 0;
                            margin-bottom: 20px;
                        }
                        .btn {
                            position: relative;
                            padding-right: 43px;
                            i {
                                margin: 0;
                                position: absolute;
                                top: 0;
                                right: 0; 
                            }
                            &:hover {
                                i {
                                    right: 10px;
                                }
                            }
                            span {
                                padding: 0 30px 0 20px;
                            }
                        }
                    }
                    .pxl-inner-phone {
                        font-size: 24px;
                        letter-spacing: 0px;
                        color: #090909;
                        font-weight: 700;
                        font-family: "Barlow Semi Condensed";
                        .pxl-icon-phone {
                            margin-left: 14px;
                            margin-right: 8px;
                        }
                    }
                }
            }
            .pxl-item--img {
                img {
                    border-radius: 10px;
                    border-left: 7px solid $primary_color;
                }
            }
        }
    }
}

.pxl-left-image {
    overflow: hidden;
    display: inline-block;
    img {
        object-fit: cover;
        transform-origin: left;
    }
}

.pxl-right-image {
    overflow: hidden;
    display: inline-block;
    img {
        object-fit: cover;
        transform-origin: right;
    }
}

.pxl-dow-image {
    overflow: hidden;
    display: inline-block;
    img {
        object-fit: cover;
        transform-origin: top;
    }
}

.pxl-up-image {
    overflow: hidden;
    display: inline-block;
    img {
        object-fit: cover;
        transform-origin: bottom;
    }
}

.pxl-transform-left, .pxl-transform-right {
    perspective: 700px;
    transform-style: preserve-3d;
    img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

.pxl-clip-left {
    @include transition(all 500ms linear 0ms);
    img {
        @include transition(all 500ms linear 0ms);
    }
}

//pxl-cart-sidebar-button
.pxl-cart-sidebar-button {
    &.style1 {
        font-size: 23px;
        color: #1b1d21;
        position: relative;
        .pxl_cart_counter {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: $primary_color;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-family: "Urbanist";
            font-size: 12px;
            position: absolute;
            bottom: -11px;
            left: -10px;
            padding-top: 2px;
            padding-left: 1px;
        }
    }
    &.style2 {
        font-size: 17px;
        color: #fff;
        position: relative;
        .pxl_cart_counter {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: $link_color;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-family: "Urbanist";
            font-size: 12px;
            position: absolute;
            bottom: 0px;
            right: -5px;
        }
    }
}
//PXL SLIDE
body:not(.elementor-editor-active) .pxl-element-slider {
    opacity: 0;
}
.pxl-element-slider {
    position: relative;
    @include transition(all 250ms linear 0ms);
    border-radius: inherit;
    .pxl-swiper-slide {
         z-index: 0;
         height: auto;
    }
    .swiper-slide-active {
        @include transition(all 250ms linear 0ms);
        opacity: 1 !important;
        z-index: 1;
    }
    .pxl-slider-progressbar {
        position: absolute;
        left: 0;
        top: 0;
        background-color: $link_color;
        height: 2px;
        z-index: 100;
        width: 0;
        @include transition(all 100ms linear 0ms);
    }
    .pxl-slider--image {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        @include transition(all 300ms linear 0ms);
    }
    .pxl-slider--mainimage {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        @include transition(all 600ms linear 0ms);
        overflow: hidden;
        &.wow {
            visibility: visible;
        }
        &.pxl-image--kenburns.animated {
            animation-name: pxl_kenburns;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 40s;
            transform: scale(1.2);
        }
    }
    .pxl-slider--overlay {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
    }
    .pxl-slider--inner {
        position: relative;
        z-index: 1;
        overflow: hidden;
        @media #{$max-lg} {
            height: 100% !important;
        }
    }
    .pxl-slider--mainimage, .pxl-slider--image, .pxl-slider--inner, .pxl-swiper-slide, .pxl-swiper-wrapper, .pxl-swiper-container, .pxl-carousel-inner {
        border-radius: inherit;
    }

    &.style1 {
        .pxl-slider--overlay {
            
        }
        .pxl-swiper-dots {
            &.style-1 {
                &.pxl-swiper-pagination-bullets {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    z-index: 2;
                    background-color: #fff;
                    padding: 24px 46px 23px 47px;
                    .pxl-swiper-pagination-bullet {
                        width: 7px;
                        height: 7px;
                        @include border-radius(0);
                        margin: 0 16px;
                        background-color: rgba(0, 0, 0, 0.251);
                        &.swiper-pagination-bullet-active {
                            background-color: #000;
                        }
                    }
                }
                &.pxl-swiper-pagination-fraction {
                    margin-top: 0;
                    font-size: 18px;
                    color: #fefefe;
                    font-weight: 700;
                    font-family: "Barlow Semi Condensed";
                    position: absolute;
                    bottom: 23px;
                    right: 95px;
                    &:before {
                        display: none;
                    }
                    @media (max-width: 767px) {
                        right: unset;
                        left: 50%;
                        transform: translate(-50%,0);
                        bottom: 35px;
                    }
                    span {
                        margin: 0px;
                        font-size: 18px;
                        font-weight: 700;
                        font-family: "Barlow Semi Condensed";
                        position: relative;
                        &:before {
                            content: '0';
                            position: relative;
                            top: 0;
                            left: 0;
                        }
                    }
                }
            }
        }
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            position: absolute;
            bottom: 42px;
            z-index: 1;
            right: 70px;
            @media (max-width: 1199px) {
                display: none;
            }
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 31px 16px;
                display: flex;
                align-items: center;
                margin: 5px;
                svg {
                    height: 15px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    overflow: hidden;
                    display: inline-flex;
                    @include transition(all 200ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    clip-path: polygon(100% 0, 100% 84%, 79% 100%, 0 100%, 0 0);
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
        .pxl-swiper-pagination {
            margin-top: 0;
            margin-top: 0;
            position: absolute;
            top: 50%;
            left: 72px;
            z-index: 999;
            transform: translateY(-50%);
            .pxl-swiper-dots {
                margin-top: 0;
                display: grid;
                background: unset;
                &.style-1 {
                    span {
                        width: 54px;
                        height: 54px;
                        @include border-radius(50%);
                        background-color: unset;
                        border: 1px solid #8d9b9d;
                        @include transition(all 0.3s);
                        margin: 10px 0px;
                        &:hover {
                            border-color: $primary_color;
                            &:before {
                                color: $primary_color;
                            }
                        }
                        &:before {
                            content: '01';
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            font-size: 14px;
                            color: #8d9b9d;
                            line-height: 1;
                            @include transition(all 0.3s);
                        }
                        &:nth-child(2) {
                            &:before {
                                content: '02';
                            }
                        }
                        &:nth-child(3) {
                            &:before {
                                content: '03';
                            }
                        }
                        &:nth-child(4) {
                            &:before {
                                content: '04';
                            }
                        }
                        &:nth-child(5) {
                            &:before {
                                content: '05';
                            }
                        }
                        &:nth-child(6) {
                            &:before {
                                content: '06';
                            }
                        }
                        &:nth-child(7) {
                            &:before {
                                content: '07';
                            }
                        }
                        &:nth-child(8) {
                            &:before {
                                content: '08';
                            }
                        }
                        &:nth-child(9) {
                            &:before {
                                content: '09';
                            }
                        }
                        &:nth-child(10) {
                            &:before {
                                content: '10';
                            }
                        }
                    }
                    .swiper-pagination-bullet-active {
                        border-color: $primary_color;
                        &:before {
                            color: $primary_color;
                        }
                    }
                }
            }
        }
    }

    &.style2 {
        .pxl-swiper-dots {
            &.style-1 {
                position: absolute;
                top: 50%;
                left: 74px;
                transform: translate(0,-50%);
                z-index: 2;
                padding: 0;
                @media (max-width: 1700px) {
                    display: none;
                }
                span {
                   display: block;
                    position: relative;
                    width: 100%;
                    margin: 10px;
                    padding: 10px 8px;
                    background-color: unset;
                    &:after {
                        content: '';
                        position: absolute;
                        width: 53px;
                        height: 3px;
                        background-color: #fff;
                        bottom: 0;
                        right: 0;
                        @include transition(all 0.3s);
                    }
                    &:before {
                        content: '01';
                        position: absolute;
                        top: 25%;
                        right: 0%;
                        transform: translate(0%,-25%);
                        font-size: 24px;
                        letter-spacing: 2px;
                        text-transform: uppercase;
                        color: #ffffff;
                        font-weight: 700;
                        
                        line-height: 1;
                        @include transition(all 0.3s);
                        opacity: 0;
                    }
                    &:nth-child(2) {
                        &:before {
                            content: '02';
                        }
                    }
                    &:nth-child(3) {
                        &:before {
                            content: '03';
                        }
                    }
                    &:nth-child(4) {
                        &:before {
                            content: '04';
                        }
                    }
                    &:nth-child(5) {
                        &:before {
                            content: '05';
                        }
                    }
                    &:nth-child(6) {
                        &:before {
                            content: '06';
                        }
                    }
                    &:nth-child(7) {
                        &:before {
                            content: '07';
                        }
                    }
                    &:nth-child(8) {
                        &:before {
                            content: '08';
                        }
                    }
                    &:nth-child(9) {
                        &:before {
                            content: '09';
                        }
                    }
                    &:nth-child(10) {
                        &:before {
                            content: '10';
                        }
                    }
                }
                .swiper-pagination-bullet-active {
                    background-color: unset !important;
                    padding: 22px 24px;
                    &:after {
                        width: 114px;
                        background-color: $primary_color;
                    }
                    &:before {
                        opacity: 1;
                    }
                }
            }
        }
    }

    &.style-1 {
        .pxl-swiper-arrow-wrap {
            margin: 0;
            .pxl-swiper-arrow {
                margin: 0;
                position: absolute;
                top: 50%;
                @include transform(translate(0, -50%));
                color: $link_color;
                background-color: #fff;
                @include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
                opacity: 0;
                @media #{$max-lg} {
                    font-size: 14px;
                    width: 56px;
                    height: 56px;
                    line-height: 56px;
                }
                &:hover {
                    background-color: $link_color;
                    color: #fff;
                    @include box-shadow(none);
                }
            }
            .pxl-swiper-arrow-prev {
                left: 60px;
                @media #{$max-lg} {
                    left: 30px;
                }
            }
            .pxl-swiper-arrow-next {
                right: 60px;
                @media #{$max-lg} {
                    right: 30px;
                }
            }
        }
        &:hover .pxl-swiper-arrow-wrap { 
           .pxl-swiper-arrow {
                opacity: 1;
           }
        }
    }
}

//pxl-image-carousel
.pxl-image-carousel1 {
    .pxl-carousel-inner {
        position: relative;
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            position: absolute;
            bottom: 42px;
            z-index: 1;
            left: 50%;
            transform: translate(-50%,0);
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 31px 16px;
                display: flex;
                align-items: center;
                margin: 5px;
                svg {
                    height: 15px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    overflow: hidden;
                    display: inline-flex;
                    @include transition(all 200ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    clip-path: polygon(100% 0, 100% 84%, 79% 100%, 0 100%, 0 0);
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
        .pxl-item--inner {
            background-repeat: no-repeat;
            background-size: cover;
            height: 100vh;
        }
    }
}

.pxl-landing-bg1 {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        background-color: $link_color;
        height: 92%;
        max-width: 1820px;
        width: 100%;
        z-index: -1;
    }
}
.pxl-image-carousel2 {
    position: relative;
    .pxl-swiper-slide {
        padding: 15px;
    }
    .pxl-carousel-inner {
        position: relative;
        .pxl-swiper-arrow-wrap {
            align-items: inherit;
            position: relative;
            z-index: 1;
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 31px 16px;
                display: flex;
                align-items: center;
                margin: 5px;
                svg {
                    height: 15px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    overflow: hidden;
                    display: inline-flex;
                    @include transition(all 200ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    clip-path: polygon(100% 0, 100% 84%, 79% 100%, 0 100%, 0 0);
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
    }
    .pxl-item-inner {
        position: relative;
        @include transition(all .3s ease-out);
        box-shadow: 0px 0px 5px 5px rgba(225,225,255,0.05);
        overflow: hidden;
        &:hover {
            .pxl-img-button {
                opacity: 1;
            }
            .pxl-item--img {
                img {
                    filter: blur(2px);
                }
            }
        }
        .pxl-item--img {
            img {
                @include transition(all .3s ease-out);
            }
        }
        .pxl-img-button {
            font-size: 16px;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            @include ft_theme_default($ft_theme_default);
            width: 100px;
            height: 100px;
            @include border-radius(50%);
            background-color: $primary_color;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            @include transition(all .3s ease-out);
            opacity: 0;
        }
    }
}

//text-slide
.pxl-text-slide-opacity1 {
    opacity: 0.659;
}
.pxl-text-carousel1 {
    position: relative;
    &.style1 {
        .pxl-inner-content {
            position: relative;
        }
        .pxl-item--text {
            white-space: nowrap;
            line-height: 1;
            font-size: 18px;
            color: $link_color;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
            @include ft_theme_default($ft_theme_default);
        }
        .pxl--item {
            padding: 0px 40px;
            width: auto;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                width: 5px;
                height: 5px;
                right: 0;
                top: 50%;
                transform: translate(0,-50%);
                background-color: $primary_color;
            }
        }
        .pxl-text-fixed {
            visibility: hidden;
            opacity: 0;
            display: flex;
            flex-wrap: nowrap;
        }
        .pxl-text-slide {
            margin: 0 -30px;
            display: flex;
            flex-wrap: nowrap;
            position: absolute;
            top: 0;
            &.text-slide-to-left {
                left: 50%;
            }
            &.text-slide-to-right {
                right: 50%;
            }
            @media #{$max-lg} {
                margin: 0 -15px;
            }
        }
    }
    &.style2 {
        position: relative;
        background-color: $primary_color;
        padding: 20px;
        overflow: hidden;
        filter: drop-shadow(0px 3px 10.5px rgba(#000,0.46));
        .pxl-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: scale(1.2);
            svg {
                height: 100%;
                width: 100%;
            }
        }
        .pxl-inner-content {
            position: relative;
        }
        .pxl-item--text {
            white-space: nowrap;
            line-height: 1;
            font-size: 22px;
            color: #fff;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            @include ft_theme_default($ft_theme_default);
        }
        .pxl--item {
            padding: 0px 20px;
            width: auto;
            position: relative;
            &:after {
                content: '-';
                position: absolute;
                right: -5px;
                top: 50%;
                transform: translate(0,-50%);
                font-size: 20px;
                color: #fff;
                font-weight: bold;
                text-transform: uppercase;
                @include ft_theme_default($ft_theme_default);
                background-color: unset !important;
            }
        }
        .pxl-text-fixed {
            visibility: hidden;
            opacity: 0;
            display: flex;
            flex-wrap: nowrap;
        }
        .pxl-text-slide {
            margin: 0 -30px;
            display: flex;
            flex-wrap: nowrap;
            position: absolute;
            top: 20px;
            &.text-slide-to-left {
                left: 50%;
            }
            &.text-slide-to-right {
                right: 50%;
            }
            @media #{$max-lg} {
                margin: 0 -15px;
            }
        }
    }
    &.style3 {
        position: relative;
        overflow: hidden;
        .pxl-inner-content {
            position: relative;
        }
        .pxl-item--text {
            white-space: nowrap;
            line-height: 0.91;
            font-size: 150px;
            color: rgba(#e9e9e9, 0.549);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 15px;
            @include ft_theme_default($ft_theme_default);
        }
        .pxl--item {
            padding: 0px 75px;
            width: auto;
            position: relative;
            &:after {
                content: '-';
                position: absolute;
                right: -25px;
                top: 50%;
                transform: translate(0,-50%);
                font-size: 150px;
                color: rgba(#e9e9e9, 0.549);
                font-weight: 500;
                text-transform: uppercase;
                @include ft_theme_default($ft_theme_default);
                background-color: unset !important;
            }
        }
        .pxl-text-fixed {
            visibility: hidden;
            opacity: 0;
            display: flex;
            flex-wrap: nowrap;
        }
        .pxl-text-slide {
            margin: 0 -30px;
            display: flex;
            flex-wrap: nowrap;
            position: absolute;
            top: 20px;
            &.text-slide-to-left {
                left: 50%;
            }
            &.text-slide-to-right {
                right: 50%;
            }
            @media #{$max-lg} {
                margin: 0 -15px;
            }
        }
    }
}

//image-slide
.pxl-image-marquee1 {
    position: relative;
    &.style1 {
        .pxl-item--text {
            white-space: nowrap;
            line-height: 1;
            font-size: 0;
            color: #0d0d0d;
            font-weight: 700;
        }
        .pxl--item {
            padding: 0 15px;
            width: auto;
            position: relative;
            .pxl-image {
                overflow: hidden;
                box-shadow: 0px 0px 5px 5px rgba(225, 225, 255, 0.05);
            }
        }
        .pxl-text-fixed {
            visibility: hidden;
            opacity: 0;
            display: flex;
            flex-wrap: nowrap;
            width: max-content;
        }
        .pxl-text-slide {
            margin: 0 -30px;
            display: flex;
            flex-wrap: nowrap;
            position: absolute;
            top: 0;
            width: max-content;
            height: 100%;
            &.text-slide-to-left {
                left: 90%;
            }
            &.text-slide-to-right {
                right: 90%;
            }
            @media #{$max-lg} {
                margin: 0 -15px;
            }
        }
    }
}

//testimonial-slide
.pxl-pxl_testimonial_marquee1 {
    position: relative;
    overflow: hidden;
    margin: 0 -15px;
    height: 830px;
    &.style1 {
        .pxl--item {
            padding: 28px 15px 28px 21px;
            margin: 15px 0;
            width: auto;
            position: relative;
            box-shadow: 0px 5px 30px rgba(#00071A, 0.08);
            border-radius: 10px;
            .pxl-item--text {
                white-space: nowrap;
                line-height: 1;
                font-size: 18px;
                color: #00071A;
                font-weight: bold;
                font-family: "Urbanist", Sans-serif;
                margin-right: 4px;
            }
            .pxl-sub-title {
                line-height: 1;
                font-size: 18px;
                color: #4D515F;
                font-weight: 400;
                font-family: "Urbanist", Sans-serif;
            }
            .pxl-item-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
            }
            .pxl-item-desc {
                font-size: 18px;
                color: #00071A;
                font-weight: 400;
                font-family: "Urbanist", Sans-serif;
                max-width: 99%;
                line-height: 1.55;
                margin-bottom: 38px;
            }
            .pxl-item-right {
                display: flex;
                align-items: center;
            }
            .pxl-item--star {
                display: flex;
                align-items: center;
                font-size: 15px;
            }
        }
        .pxl-text-fixed {
            visibility: hidden;
            opacity: 0;
        }
        .pxl-text-slide {
            position: absolute;
            top: 0;
            padding: 0 15px;
            height: inherit;
            &.text-slide-to-top {
                top: -50%;
            }
            &.text-slide-to-bottom {
                bottom: 50%;
            }
        }
    }
}

//Post-list
.hover {
    img {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.pxl-blog-list {
    &.layout1 {
        .pxl-grid-item {
            display: flex;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            &:hover {
                .pxl-item--image {
                    .bg-image {
                        img {
                            -webkit-transform: translateX(55px);
                            transform: translateX(55px);
                        }
                    }
                }
                .pxl-item--meta {
                    .pxl-item--title {
                        a {
                            .char {
                                color: $primary_color;
                                @include transform(translateY(-10px));
                            }
                        }
                    }
                }
            }
            .pxl-item--image {
                margin-right: 21px;
                padding-right: 3px;
                position: relative;
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    @include border-radius(10px);
                    background-color: $primary_color;
                }
                .bg-image {
                    min-width: 85px;
                    min-height: 75px;
                    overflow: hidden;
                    display: block;
                    position: relative;
                    @include border-radius(10px);
                    img {
                        height: 100%;
                        position: absolute;
                        right: 0;
                        width: auto;
                        max-width: unset;
                        -webkit-transition: all 1s ease-out;
                        transition: all 1s ease-out;
                        
                    }
                }
            }
            .pxl-item--meta {
                .pxl-item--date {
                    font-size: 12px;
                    letter-spacing: 0px;
                    color: #fb5900;
                    font-weight: 400;
                    font-family: "Barlow Semi Condensed";
                    margin-bottom: 0;
                }
                .pxl-item--title {
                    font-size: 24px;
                    font-weight: 700;
                    font-family: "Barlow Semi Condensed";
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    margin-bottom: 0;
                    a {
                        color: #dddddd;
                        .char {
                            transition: transform 0.2s ease, color 0.2s ease;
                            transition-delay: calc(var(--char-index) * 0.02s);
                        }
                    }
                }
            }
        }
    }
}

//pxl-meta-carousel
.pxl-meta-carousel1 {
    .pxl-swiper-container{
        &.swiper-fade {
            .pxl-swiper-slide {
                opacity: 0 !important;
                z-index: 0;
                &.swiper-slide-active {
                    opacity: 1 !important;
                    z-index: 1;
                }
            }
        }
    }
    .pxl-carousel-inner {
        display: flex;
        @media (max-width: 1200px) {
            display: block;
        }
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 50px 27px;
                align-content: center;
                @media (max-width: 1366px) {
                    padding: 50px 22px;
                }
                @media (max-width: 1200px) {
                    padding: 50px 22px;
                }
                @media (max-width: 1200px) {
                    padding: 28px 20px 22px 20px;
                    width: 50%;
                    text-align: center;
                    align-content: center;
                }
                svg {
                    height: 20px;
                    width: auto;
                    @include transition(all 200ms linear 0ms);
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    overflow: hidden;
                    display: inline-flex;
                    @include transition(all 200ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    margin-bottom: 3px;
                    @media (max-width: 1200px) {
                        order: 2;
                        margin-bottom: 0;
                        border-left: 1px solid #000;
                    }
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
    }
    .pxl-swiper-slide {
        align-content: end;
    }
    .pxl-item--inner {
        @include transition(all 0.3s);
        padding-left: 238px;
        padding: 91px 200px 178px 238px;
        position: relative;
        display: flex;
        @media (max-width: 1850px) {
            padding: 90px 160px 178px 213px;
        }
        @media (max-width: 1800px) {
            padding: 90px 160px 178px 187px;
        }
        @media (max-width: 1750px) {
            padding: 90px 130px 178px 148px;
        }
        @media (max-width: 1600px) {
            padding: 90px 50px 178px 110px;
        }
        @media (max-width: 1500px) {
            padding: 90px 50px 178px 50px;
        }
        @media (max-width: 1366px) {
            padding: 75px 50px 170px 50px;
        }
        @media (max-width: 1280px) {
            padding: 75px 30px 170px 50px;
        }
        @media (max-width: 1200px) {
            padding: 50px 30px 138px 50px;
        }
        @media (max-width: 1024px) {
            padding: 50px 15px 50px 15px;
        }
        
        .pxl-item--title {
            font-size: 65px;
            color: #ffffff;
            font-weight: 500;
            max-width: 95%;
            line-height: 1.15;
            @include ft_theme_default($ft_theme_default);
            margin-bottom: 18px;
            @media (max-width: 1550px) {
                font-size: 64px;
            }
            @media (max-width: 1366px) {
                font-size: 60px;
                max-width: 100%;
            }
            @media (max-width: 1200px) {
                font-size: 50px;
            }
            @media (max-width: 767px) {
                width: 100%;
            }
        }
        .pxl-item--desc {
            font-size: 18px;
            color: #c2c2c2;
            max-width: 80%;
            padding-left: 4px;
            line-height: 1.7;
            @media (max-width: 1750px) {
                max-width: 90%;
            }
            @media (max-width: 1600px) {
                max-width: 100%;
            }
            @media (max-width: 1024px) {
                font-size: 17px;
            }
        }
        .pxl-meta-button {
            margin-top: 93px;
            padding-left: 3px;
            display: none;
            @media (max-width: 880px) {
                margin-top: 25px;
                padding-left: 0;
            }
            .button-meta {
                font-size: 15px;
                letter-spacing: 0.8px;
                line-height: 85px;
                text-transform: uppercase;
                color: $link_color;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                background-color: #fff;
                display: inline-flex;
                align-items: center;
                padding: 0 33px 0 43px;
                @media (max-width: 1366px) {
                    line-height: 70px;
                }
                .pxl-btn-icon {
                    line-height: 1;
                    padding-top: 3px;
                    @include transition(all 0.3s);
                    svg {
                        height: 28px;
                        width: auto;
                        @include transition(all 0.3s);
                        transform: rotate(0deg);
                    }
                    &.pxl-ml-155 {
                        @media (max-width: 1500px) {
                            margin-left: 120px;
                        }
                        @media (max-width: 1366px) {
                            margin-left: 87px;
                        }
                        @media (max-width: 1024px) {
                            margin-left: 40px;
                        }
                        @media (max-width: 767px) {
                            margin-left: 20px;
                        }
                    }
                }
                &:hover {
                    .pxl-btn-icon {
                        svg {
                            transform: rotate(45deg);
                        }
                    }
                }
            }
        }
    }
}

.pxl-meta-carousel2 {
    .pxl-carousel-inner {
        display: flex;
        width: 100%;
        margin: 0;
        @media (max-width: 1280px) {
            display: block;
        }
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            margin-bottom: 2px;
            @media (max-width: 1280px) {
                margin-top: 30px;
            }
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 50px 27px 50px 27px;
                display: flex;
                align-items: center;
                @media (max-width: 1280px) {
                    padding: 0;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 50px;
                    height: 50px;
                }
                svg {
                    height: 20px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    overflow: hidden;
                    display: inline-flex;
                    @include transition(all 200ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    margin-bottom: 3px;
                    @media (max-width: 1280px) {
                        order: 2;
                        margin-bottom: 0;
                        border-left: 1px solid rgba(#fff, 0.3);
                    }
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
    }
    .pxl-swiper-slide {
        padding: 0;
    }
    .pxl-swiper-container {
        margin: 0;
        padding-bottom: 1px;
        border-left: 1px solid #d9d9d9;
    }
    .pxl-item--inner {
        border: 1px solid #d9d9d9;
        border-left: none;
        padding: 33px 30px 34px 29px;
        @media (max-width: 767px) {
            padding: 30px 15px 30px 15px;
        }
        @include transition(all 0.3s);
        &:hover {
            .pxl-item--holder {
                .pxl-item--meta {
                    top: 0;
                    opacity: 1;
                }
            }
        }
        .pxl-item--holder {
            position: relative;
            clip-path: polygon(93% 0, 100% 9%, 100% 100%, 0 100%, 0 0);
            will-change: clip-path;
            margin-bottom: 35px;
            .pxl-item--meta {
                background-color: $link_color;
                position: absolute;
                top: 100%;
                left: 0;
                opacity: 0;
                width: 100%;
                height: 100%;
                padding: 62px 32px 28px 43px;
                @include transition(all 0.3s);
                justify-content: space-between;
                flex-direction: column;
                display: flex;
                @media (max-width: 1500px) {
                    padding: 30px 30px 28px 30px;
                }
                @media (max-width: 1024px) {
                    padding: 20px 15px;
                }
                .pxl-item--desc {
                    font-size: 18px;
                    color: #c2c2c2;
                    max-width: 95%;
                    @media (max-width: 1500px) {
                        max-width: 100%;
                        font-size: 16px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 4;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                    }
                }
                .pxl-meta-button {
                    text-align: right;
                    .button-meta {
                        letter-spacing: 1px;
                        text-transform: uppercase;
                        display: inline-flex;
                        align-items: center;
                        font-weight: 500;
                        color: #000;
                        font-size: 14px;
                        @include ft_theme_default($ft_theme_default);
                        line-height: 55px;
                        @media (max-width: 1500px) {
                            line-height: 45px;
                        }
                        .pxl--btn-text {
                            position: relative;
                            background-color: #fff;
                            @include transition(all 0.3s);
                            padding: 0 39px;
                        }
                        .pxl-btn-icon {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 55px;
                            min-width: 55px;
                            height: 55px;
                            position: relative;
                            overflow: hidden;
                            background-color: $primary_color;
                            @media (max-width: 1500px) {
                                width: 45px;
                                min-width: 45px;
                                height: 45px;
                            }
                            svg {
                                height: 21px;
                                width: auto;
                                transform: rotate(0deg);
                                @include transition(all 0.3s);
                                path {
                                    fill: #fff;
                                }
                            }
                        }
                        &:hover {
                            .pxl--btn-text {
                                background-color: $primary_color;
                                color: #fff;
                            }
                            .pxl-btn-icon {
                                svg {
                                    transform: rotate(45deg);
                                }
                            }
                        }
                    }
                }
            }
        }
        .pxl-item--title {
            font-size: 26px;
            font-weight: 500;
            color: $link_color;
            position: relative;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.1;
            padding-left: 20px;
            @media (max-width: 1280px) {
                font-size: 22px;
            }
            &:hover {
                color: $primary_color;
            }
            &:before {
                content: '';
                position: absolute;
                width: 6px;
                height: 6px;
                background-color: $primary_color;
                left: 0;
                top: 50%;
                transform: translate(0,-50%);
            }
        }
    }
}

.pxl-meta-carousel3 {
    .pxl-swiper-container{
        &.swiper-fade {
            .pxl-swiper-slide {
                opacity: 0 !important;
                z-index: 0;
                &.swiper-slide-active {
                    opacity: 1 !important;
                    z-index: 1;
                }
            }
        }
    }
    .pxl-carousel-inner {
        position: relative;
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            position: absolute;
            bottom: 42px;
            z-index: 1;
            right: 70px;
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 31px 16px;
                display: flex;
                align-items: center;
                margin: 5px;
                svg {
                    height: 15px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    overflow: hidden;
                    display: inline-flex;
                    @include transition(all 200ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    clip-path: polygon(100% 0, 100% 84%, 79% 100%, 0 100%, 0 0);
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
    }
    .pxl-item--inner {
        position: relative;
        .pxl-item--img {
            background-color: #000;
            img {
                opacity: 0.9;
            }
        }
        .pxl-item--title {
            position: absolute;
            bottom: 58px;
            left: 73px;
            font-size: 16px;
            color: #fff;
            font-weight: 500;
            text-transform: uppercase;
            @include ft_theme_default($ft_theme_default);
            max-width: 36%;
            line-height: 1.8;
            letter-spacing: 1.56px;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}

.pxl-meta-carousel4 {
    .pxl-swiper-arrow-wrap {
        margin-top: 0;
        position: absolute;
        top: 54%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
        width: 100%;
        justify-content: space-between;
        min-width: 1486px;
        @media (max-width: 1550px) {
            min-width: 1440px;
        }
        @media (max-width: 1470px) {
            display: none;
        }
        .pxl-swiper-arrow {
            background-color: $primary_color;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 129px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%,-50%);
            svg {
                fill: #fff;
                height: 14px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
            .hover {
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                right: 0;
                left: unset;
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
    }
    .pxl-item--inner {
        margin-bottom: 1px;
        padding: 57px 36px 25px 36px;
        position: relative;
        background-color: #d9d9d9;
        clip-path: polygon(100% 0, 100% 93%, 90% 100%, 0 100%, 0 0);
        @include transition(all 0.3s);
        &:hover {
            .pxl-inner-icon {
                .pxl-item--icon {
                    background-color: $primary_color;
                }
            }
            .pxl-meta-button {
                .button-meta {
                    svg {
                        path {
                            fill: $primary_color;
                        }
                    }
                }
            }
            &:after {
                opacity: 1;
            }
        }
        &:before {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            background-color: #fff;
            clip-path: polygon(100% 0, 100% 93%, 90% 100%, 0 100%, 0 0);
            z-index: -1;
            @include transition(all 0.3s);
        }
        &:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            background-color: $link_color;
            clip-path: polygon(100% 0, 100% 93%, 90% 100%, 0 100%, 0 0);
            z-index: -2;
            @include transition(all 0.3s);
        }
        .pxl-item--title {
            font-size: 26px;
            color: $link_color;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.1;
            margin-bottom: 22px;
            padding-bottom: 23px;
            border-bottom: 1px solid #d9d9d9;
            position: relative;
            &:before {
                content: '';
                position: absolute;
                width: 53px;
                height: 3px;
                background-color: $primary_color;
                left: 0;
                bottom: -1px;
            }
        }
        .pxl-item--content {
            font-size: 18px;
            color: #000000;
            padding-left: 3px;
            @include ft_theme_default($ft_theme_default);
        }
        .pxl-inner-icon {
            margin: 40px 0 40px 3px;
            @media (max-width: 1024px) {
                margin: 25px 0;
            }
            .pxl-item--icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 96px;
                height: 96px;
                background-color: $link_color;
                clip-path: polygon(84% 0, 100% 16%, 100% 100%, 0 100%, 0 0);
                @include transition(all 0.3s);
                @media (max-width: 1024px) {
                    width: 80px;
                    height: 80px;
                }
                svg {
                    height: 36px;
                    width: auto;
                    fill: #fff;
                }
                i {
                    font-size: 30px;
                    color: #fff;
                }
            }
        }
        .pxl-item--desc {
            font-size: 16px;
            color: #666666;
            margin-left: 3px;
            @media (max-width: 575px) {
                font-size: 15px;
            }
        }
        .pxl-meta-button {
            text-align: right;
            margin-top: 44px;
            @include transition(all 0.3s);
            @media (max-width: 676px) {
                margin-top: 20px;
            }
            .button-meta {
                svg {
                    height: 44px;
                    width: auto;
                    transform: rotate(0deg);
                    @include transition(all 0.3s);
                    path {
                        fill: #cdcdcd;
                        @include transition(all 0.3s);
                    }
                }
                &:hover {
                    svg {
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
}

.pxl-meta-carousel5 {
    .pxl-swiper-arrow-wrap {
        margin-top: 0;
        position: absolute;
        top: 54%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
        width: 100%;
        justify-content: space-between;
        min-width: 1486px;
        @media (max-width: 1550px) {
            min-width: 1440px;
        }
        @media (max-width: 1470px) {
            display: none;
        }
        .pxl-swiper-arrow {
            background-color: $primary_color;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 129px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%,-50%);
            svg {
                fill: #fff;
                height: 14px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
            .hover {
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                right: 0;
                left: unset;
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
    }
    .pxl-swiper-slide {
        padding: 0;
        height: unset;
    }
    .pxl-swiper-container {
        margin: 0;
        margin-right: -1px;
    }
    .pxl-carousel-inner {
        border: 1px solid #d9d9d9;
    }
    .pxl-item--inner {
        text-align: center;
        border-right: 1px solid #d9d9d9;
        padding: 49px 52px 47px 52px;
        @include transition(all 0.3s);
        height: 100%;
        &:hover {
            .pxl-inner-icon {
                .pxl-item--icon {
                    transform: scale(1.1);
                }
            }
        }
        .pxl-item--title {
            font-size: 25px;
            font-weight: 500;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
            margin-bottom: 47px;
        }
        .pxl-inner-icon {
            margin-bottom: 39px;
            .pxl-item--icon {
                @include transition(all 0.3s);
                transform: scale(1);
                svg {
                    height: 63px;
                    width: auto;
                    fill: $primary_color;
                    path {
                        fill: $primary_color;
                    }
                }
                i {
                    font-size: 63px;
                    line-height: 1;
                    color: $primary_color;
                }
            }
        }
        .pxl-item--desc {
            font-size: 16px;
            color: #666666;
        }
    }
}

.pxl-meta-carousel6 {
    &.style1 {
        .pxl-swiper-arrow-wrap {
            margin-top: 33px;
            padding-left: 80px;
            @media (max-width: 767px) {
                padding-left: 0;
                margin-top: 0;
            }
            .pxl-swiper-arrow {
                padding: 15px;
                svg {
                    height: 24px;
                    width: auto;
                    path {
                        fill: #6d6d6d;
                        @include transition(all 200ms linear 0ms);
                    }
                }
                .hover {
                    @include transition(all 200ms linear 0ms);
                }
                &:hover {
                    svg {
                        path {
                            fill: #fff;
                        }
                    }
                }
                &.pxl-swiper-arrow-next {
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
        .pxl-item--inner {
            padding: 82px 65px 50px 65px;
            .pxl-item--title {
                font-size: 15px;
                letter-spacing: 0.8px;
                text-transform: uppercase;
                color: #c2c2c2;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                position: relative;
                padding-left: 16px;
                margin-bottom: 34px;
                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0,-50%);
                    width: 4px;
                    height: 14px;
                    background-color: $primary_color;
                }
            }
            .pxl-item--desc {
                font-size: 20px;
                color: #ffffff;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                margin-left: -2px;
                max-width: 61%;
                line-height: 1.5;
                @media (max-width: 1280px) {
                    max-width: 100%;
                }
            }
        }
    }
    &.style2 {
        .pxl-swiper-arrow-wrap {
            margin-top: 33px;
            @media (max-width: 767px) {
                margin-top: 0;
            }
            .pxl-swiper-arrow {
                padding: 15px;
                svg {
                    height: 24px;
                    width: auto;
                    path {
                        fill: #6d6d6d;
                        @include transition(all 200ms linear 0ms);
                    }
                }
                .hover {
                    @include transition(all 200ms linear 0ms);
                }
                &:hover {
                    svg {
                        path {
                            fill: #fff;
                        }
                    }
                }
                &.pxl-swiper-arrow-next {
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
        .pxl-swiper-dots {
            &.style-1 {
                &.pxl-swiper-pagination-bullets {
                    justify-content: end;
                    padding-top: 43px;
                    .pxl-swiper-pagination-bullet {
                        background-color: #edefed;
                        opacity: 0.251;
                        width: 7px;
                        height: 7px;
                        margin: 0 8px;
                        @include border-radius(0);
                        &.swiper-pagination-bullet-active {
                            opacity: 1;
                        }
                    }
                }
            }
        }
        .pxl-item--inner {
            .pxl-item--title {
                font-size: 18px;
                letter-spacing: 0.8px;
                @include ft_theme_default($ft_theme_default);
                position: relative;
                margin-bottom: 150px;
                text-transform: uppercase;
                color: #ffffff;
                font-weight: 500;
                @media (max-width: 1280px) {
                    margin-bottom: 60px;
                }
            }
            .pxl-item--desc {
                font-size: 18px;
                color: #ffffff;
            }
        }
    }
}

.pxl-meta-carousel7 {
    .pxl-swiper-arrow-wrap {
        margin-top: 154px;
        align-items: inherit;
        justify-content: end;
        @media (max-width: 1024px) {
            margin-top: 100px;
        }
        .pxl-swiper-arrow {
            background-color: $primary_color;
            padding: 31px 16px;
            display: flex;
            align-items: center;
            margin: 5px;
            svg {
                height: 15px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
            .hover {
                overflow: hidden;
                display: inline-flex;
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                clip-path: polygon(100% 0, 100% 84%, 79% 100%, 0 100%, 0 0);
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
    }
    .pxl-item--inner {
        display: flex;
        @media (max-width: 1024px) {
            display: block;
        }
        .pxl-item--holder {
            width: 25%;
            .pxl-item--img {
                width: 105px;
            }
        }
        .pxl-item--meta {
            width: 75%;
            padding-left: 11px;
            padding-right: 50px;
            @media (max-width: 1024px) {
                width: 100%;
                padding-left: 0;
                padding-right: 0;
                padding-top: 30px;
            }
            .pxl-item--title {
                font-size: 20px;
                font-weight: 500;
                color: $link_color;
                line-height: 1.2;
                margin-bottom: 17px;
            }
            .pxl-item--desc {
                font-size: 16px;
                color: #666666;
            }
        }
    }
}

.pxl-meta-carousel8 {
    .pxl-swiper-arrow-wrap {
        margin-top: 0;
        position: absolute;
        top: 52%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
        width: 100%;
        justify-content: space-between;
        min-width: 1486px;
        @media (max-width: 1550px) {
            min-width: 1440px;
        }
        @media (max-width: 1470px) {
            display: none;
        }
        .pxl-swiper-arrow {
            background-color: $primary_color;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 129px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%,-50%);
            svg {
                fill: #fff;
                height: 14px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
            .hover {
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                right: 0;
                left: unset;
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
    }
    .pxl-item--inner {
        padding-top: 15px;
        @include transition(all 0.3s);
        &:hover {
            .pxl-item--holder {
                .pxl-item--img {
                    .pxl-img {
                        img {
                            transform: scale(1.05);
                        }
                    }
                }
            }
        }
        .pxl-item--holder {
            position: relative;
            padding: 0 18px;
            &:before {
                content: '';
                position: absolute;
                top: 1px;
                left: 1px;
                right: 1px;
                bottom: 1px;
                background-color: #fff;
                clip-path: polygon(100% 0, 100% 93%, 90% 100%, 0 100%, 0 0);
                z-index: -1;
                @include transition(all 0.3s);
            }
            &:after {
                content: '';
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                background-color: #D9D9D9;
                clip-path: polygon(100% 0, 100% 93%, 90% 100%, 0 100%, 0 0);
                z-index: -2;
                @include transition(all 0.3s);
            }
            .pxl-item--img {
                position: relative;
                transform: translateY(-15px);
                @include transition(all 0.3s);
                .pxl-img {
                    overflow: hidden;
                    @include transition(all 0.3s);
                    position: relative;
                    img {
                        @include transition(all 0.3s);
                        transform: scale(1);
                    }
                }
                .pxl-inner-icon {
                    position: absolute;
                    bottom: -18px;
                    right: 16px;
                    .pxl-item--icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 89px;
                        height: 88px;
                        clip-path: polygon(84% 0, 100% 16%, 100% 100%, 0 100%, 0 0);
                        @include transition(all 0.3s);
                        background-color: $primary_color;
                        @media (max-width: 1200px) {
                            width: 60px;
                            height: 60px;
                        }
                        svg {
                            height: 41px;
                            width: auto;
                            @media (max-width: 1200px) {
                                height: 35px;
                            }
                            path {
                                fill: #fff;
                            }
                            .s0 {
                                fill: none;
                                stroke: #fff;
                                stroke-linecap: round;
                                stroke-linejoin: round;
                                stroke-width: 2;
                            }
                        }
                        .pxl-svg-steel5 {
                            fill: none;
                            stroke: #fff;
                        }
                        i {
                            font-size: 35px;
                            color: #fff;
                        }
                    }
                }
            }
            .pxl-inner-content {
                padding: 29px 18px 30px 17px;
                @media (max-width: 1024px) {
                    padding: 25px 0;
                }
                .pxl-item--title {
                    font-size: 23px;
                    font-weight: 500;
                    color: $link_color;
                    @include ft_theme_default($ft_theme_default);
                    border-bottom: 1px solid #d9d9d9;
                    position: relative;
                    padding-bottom: 22px;
                    margin-bottom: 18px;
                    display: block;
                    line-height: 1.2;
                    &:hover {
                        color: $primary_color;
                    }
                    .pxl-item-boder {
                        position: absolute;
                        bottom: -1px;
                        left: 0;
                        background-color: $primary_color;
                        width: 53px;
                        height: 3px;
                    }
                }
                .pxl-item--desc {
                    margin-bottom: 25px;
                }
            }
            .pxl-meta-button {
                text-align: right;
                .button-meta {
                    &:hover {
                        svg {
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                    svg {
                        height: 45px;
                        width: auto;
                        @include transition(all 0.3s);
                        path {
                            fill: $link_color;
                            @include transition(all 0.3s);
                        }
                    }
                }
            }
        }
    }
}

.pxl-meta-carousel9 {
    background-color: #edefed;
    .pxl-swiper-arrow-wrap {
        margin-top: 33px;
        .pxl-swiper-arrow {
            padding: 15px;
            svg {
                height: 24px;
                width: auto;
                path {
                    fill: $link_color;
                    @include transition(all 200ms linear 0ms);
                }
            }
            .hover {
                @include transition(all 200ms linear 0ms);
            }
            &:hover {
                svg {
                    path {
                        fill: $primary_color;
                    }
                }
            }
            &.pxl-swiper-arrow-next {
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
    }
    .pxl-swiper-wrapper {
        align-items: inherit;
    }
    .pxl-swiper-slide {
        padding: 0;
    }
    .pxl-swiper-container {
        margin: 0;
        margin-left: -1px;
    }
    .pxl-item--inner {
        background-color: #edefed;
        padding: 52px 41px 48px 41px;
        border-left: 1px solid #d9d9d9;
        .pxl-inner-icon {
            margin-bottom: 58px;
            @media (max-width: 1024px) {
                margin-bottom: 35px;
            }
            svg {
                height: 54px;
                width: auto;
                path {
                    fill: $primary_color;
                }
            }
            i {
                font-size: 54px;
                color: $primary_color;
            }
        }
        .pxl-item--title {
            font-size: 25px;
            font-weight: 500;
            line-height: 1.2;
            border-bottom: 1px solid #d9d9d9;
            margin-bottom: 26px;
            padding-bottom: 28px;
            @media (max-width: 1600px) {
                font-size: 20px;
            }
        }
        .pxl-item--desc {
            @media (max-width: 1600px) {
                font-size: 15px;
            }
        }
    }
}

// image before after
.pxl-image-before-after1 {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    filter: drop-shadow(0px 10px 10.5px rgba(0,0,0,0.07));
    img {
        width: 100%;
    }
    .before-after-text {
        &.style-2 {
            position: absolute;
            display: flex;
            width: 100%;
            justify-content: space-between;
            bottom: -30px;
            left: 0;
            .before-text, .after-text {
                display: inline-block;
                font-size: 14px;
                color: $secondary_color;
                font-family: "Inter";
                font-weight: 700;
                line-height: 24px;
            }
        }
        &.df {
            position: absolute;
            display: flex;
            top: 40px;
            width: 100%;
            justify-content: space-between;
            padding: 0 40px;
            .before-text, .after-text {
                font-size: 18px;
                display: inline-block;
                color: $primary_color;
                background-color: #fff;
                border-radius: 5px;
                padding: 6px 20px;
                font-weight: 600;
                line-height: 53px;
            }
        }
    }
    .twentytwenty-before-label, .twentytwenty-after-label {
        &:before {
            display: none;
        }
    }
}

.twentytwenty-handle {
    height: 53px;
    width: 53px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    border: none;
    margin-left: -25px;
    margin-top: -28px;
    span {
        &:before {
            color: #232323;
        }
    }
    .twentytwenty-left-arrow {
        margin-left: 11px;
        &:before {
            content: '\f13f';
            font-family: Caseicon;
            font-size: 10px;
        }
    }
    .twentytwenty-right-arrow {
        margin-right: 0;
        &:before {
            content: "\f137";
            font-family: Caseicon;
            font-size: 10px;
        }
    }
}

//pxl-blog-single
.pxl-blog-single1 {
    .pxl-meta-inner {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        @include transition(all 0.3s);
        &:hover {
            .pxl-item--img {
                img {
                    @include transform(scale(1.1));
                }
            }
        }
        .pxl-item--img {
            a {
                display: block;
                background-size: cover;
                background-position: center center;
            }
            img {
                @include transition(all 0.3s);
                display: none;
            }
        }
        .pxl-item-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(0deg, #011c3b 60%, rgba(1, 28, 59, 0.01) 100%);
            padding: 50px 40px 16px 36px;
            .pxl-content-link {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .pxl-item-new {
                font-size: 15px;
                color: #000b18;
                font-weight: 400;
                
                background-color: $gradient_color_from;
                display: inline-block;
                border-radius: 5px;
                padding: 2px 17px;
                z-index: 1;
                position: relative;
                @media (max-width: 880px) {
                    font-size: 13px;
                    padding: 0px 10px;
                }
            }
            .pxl-item-title {
                margin-bottom: 22px;
                margin-top: 8px;
                z-index: 1;
                position: relative;
                @media (max-width: 880px) {
                    margin-bottom: 10px;
                }
                a {
                    font-size: 30px;
                    color: #ffffff;
                    font-weight: 700;
                    
                    line-height: 1.2;
                    max-width: 90%;
                    display: block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 3;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .pxl-item-list {
                display: flex;
                align-items: center;
                z-index: 1;
                position: relative;
                display: inline-flex;
                .pxl-item-categori {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #ffffff;
                    font-weight: 500;
                    
                    @media (max-width: 767px) {
                        font-size: 12px;
                    }
                    &:hover {
                        color: $primary_color;
                    }
                    .pxl-icon-categori {
                        width: 38px;
                        min-width: 38px;
                        height: 38px;
                        border-radius: 50%;
                        background-color: $primary_color;
                        position: relative;
                        @media (max-width: 767px) {
                            width: 30px;
                            min-width: 30px;
                            height: 30px;
                        }
                        &:before {
                            content: '';
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-image: url(../img/img-author1.png);
                            background-position: 50%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            width: 22px;
                            height: 18px;
                            @media (max-width: 767px) {
                                width: 17px;
                                height: 11px;
                            }
                        }
                    }
                }
                .pxl-item-date {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #ffffff;
                    font-weight: 500;
                    
                    border-left: 1px solid #fff;
                    margin-left: 22px;
                    padding-left: 23px;
                    @media (max-width: 767px) {
                        font-size: 12px;
                        margin-left: 15px;
                        padding-left: 15px;
                    }
                    i {
                        color: $gradient_color_from;
                    }
                }
            }
        }
    }
}

// Showcase Grid
.pxl-mega-menu .pxl-showcase1 .pxl-grid-inner {
    height: auto !important;
    .pxl-grid-item {
        position: static !important;
        @media (max-width: 1199px) {
            max-width: 100% !important;
            flex: 100% !important;
        }
    }
    .grid-sizer {
        display: none;
    }
}
.pxl-showcase {
    .pxl-item--inner {
        &.style-1 {
            @include transition(all 0.3s ease-out);
            .pxl-item--image {
                position: relative;
                img {
                    @include transition(all 0.3s ease-out);
                }
            }
            .pxl-image-bg {
                background-color: #edefed;
                padding: 24px;
                margin-bottom: 11px;
                position: relative;
                @media (max-width: 575px) {
                    padding: 15px;
                }
                .pxl-item-new {
                    position: absolute;
                    top: -10px;
                    right: 24px;
                    padding: 6px 20px;
                    font-size: 14px;
                    letter-spacing: 0px;
                    color: #fff;
                    font-weight: 500;
                    text-transform: uppercase;
                    @include ft_theme_default($ft_theme_default);
                    background-color: $primary_color;
                    z-index: 1;
                    line-height: 1;
                    @media (max-width: 575px) {
                        font-size: 13px;
                    }
                    &:after {
                        position: absolute;
                        content: '';
                        top: 0;
                        right: -10px;
                        width: 10px;
                        height: 10px;
                        clip-path: polygon(0 0, 0% 100%, 100% 100%);
                        background-color: #b13f11;
                    }
                }
            }
            .pxl-inner-meta {
                border: 1px solid #d9d9d9;
                padding: 19px 24px 21px 31px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 10px;
                @media (max-width: 1280px) {
                    padding: 19px 15px;
                }
                @media (max-width: 991px) {
                    display: block;
                    text-align: center;
                }
                .pxl-item--title {
                    font-size: 18px;
                    font-weight: 500;
                    color: $link_color;
                    line-height: 1.3;
                    @include ft_theme_default($ft_theme_default);
                    position: relative;
                    padding-left: 13px;
                    margin-bottom: 0;
                    @media (max-width: 1024px) {
                        font-size: 16px;
                    }
                    @media (max-width: 991px) {
                        display: inline-block;
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        width: 5px;
                        height: 5px;
                        top: 50%;
                        left: 0;
                        transform: translate(0,-50%);
                        background-color: $primary_color;
                    }
                }
                .pxl-item--buttons {
                    display: inline-flex;
                    align-items: center;
                    margin-top: -1px;
                    @media (max-width: 991px) {
                        margin-top: 10px;
                    }
                    .pxl-item--button {
                        border-right: 1px solid #d9d9d9;
                        &:last-child {
                            border: none;
                            padding-right: 0 !important;
                            margin-right: 0 !important;
                            .btn-showcase {
                                color: #999999;
                            }
                        }
                        @media (max-width: 1280px) {
                            padding-right: 10px;
                            margin-right: 10px;
                        }
                        .btn-showcase {
                            font-size: 14px;
                            letter-spacing: 0.7px;
                            text-transform: uppercase;
                            font-weight: 500;
                            color: #999;
                            @include ft_theme_default($ft_theme_default);
                            display: inline-flex;
                            align-items: center;
                            @media (max-width: 1280px) {
                                font-size: 13px;
                            }
                            &:hover {
                                color: $link_color;
                                .pxl-btn-icon {
                                    svg {
                                        transform: rotate(45deg);
                                    }
                                }
                            }
                            .pxl-btn-icon {
                                line-height: 0;
                                padding-right: 0;
                                &:after {
                                    display: none;
                                }
                                svg {
                                    height: 20px;
                                    width: auto;
                                    @include transition(all 0.3s);
                                    path {
                                        fill: $primary_color;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.pxl-button-single1 {
    .pxl-item-inner {
        position: relative;
        border: 2px solid #F1F1F1;
        @include border-radius(100px);
        @include transition(all .3s);
        padding: 20px 10px 20px 20px;
        &:hover {
            border-color: $primary_color;
            .pxl-item--icon {
                background-color: $primary_color;
                color: #fff;
                svg {
                    fill: #fff;
                    path {
                        fill: #fff;
                    }
                }
            }
        }
        a {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .pxl-meta-content {
            display: flex;
            align-items: center;
            .pxl-item-title {
                margin-bottom: 0;
                font-size: 18px;
                font-weight: 600;
                color: #191917;
            }
        }
        .pxl-item--icon {
            background-color: #F1F1F1;
            width: 66px;
            height: 66px;
            min-width: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: #191917;
            @include border-radius(50%);
            @include transition(all .3s);
            margin-right: 13px;
            svg {
                height: 36px;
                fill: #191917;
                @include transition(all .3s);
                path {
                    fill: #191917;
                    @include transition(all .3s);
                }
            }
        }
    }
}

//pxl-service-list//
.pxl-service-list1 {
    .pxl-item-inner {
        padding: 14px 13px 15px 12px;
        position: relative;
        &:before {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            background-color: #fff;
            clip-path: polygon(95% 0, 100% 4%, 100% 100%, 0 100%, 0 0);
            z-index: -1;
            @include transition(all 0.3s);
        }
        &:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: #d9d9d9;
            clip-path: polygon(95% 0, 100% 4%, 100% 100%, 0 100%, 0 0);
            z-index: -2;
            @include transition(all 0.3s);
        }
        .pxl-item-title {
            font-size: 23px;
            color: #ffffff;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.2;
            background-color: $primary_color;
            padding: 19px 20px 22px 27px;
            margin-bottom: 14px;
            clip-path: polygon(96% 0, 100% 22%, 100% 100%, 0 100%, 0 0);
            @media (max-width: 1200px) {
                font-size: 20px;
            }
        }
        .pxl-list-link {
            padding: 0 26px;
            @media (max-width: 1200px) {
                padding: 0 10px;
            }
            .pxl--item {
                .pxl-item-link {
                    font-size: 18px;
                    font-weight: 500;
                    color: $link_color;
                    position: relative;
                    line-height: 1.2;
                    border-bottom: 1px solid #d9d9d9;
                    display: block;
                    padding: 20.9px 0;
                    display: flex;
                    align-items: center;
                    @include transition(all 0.3s);
                    @media (max-width: 1200px) {
                        font-size: 16px;
                    }
                    &:hover {
                        .pxl-item-dot {
                            opacity: 1;
                        }
                        .pxl-item-text {
                            transform: translateX(0);
                        }
                    }
                    .pxl-item-dot {
                        width: 5px;
                        height: 5px;
                        background-color: $primary_color;
                        display: inline-flex;
                        @include transition(all 0.3s);
                        opacity: 0;
                    }
                    .pxl-item-text {
                        transform: translateX(-30px);
                        @include transition(all 0.3s);
                    }
                }
                &:last-child {
                    .pxl-item-link {
                        border-bottom: none;
                    }
                }
            }
        }
    }
}

//end

//pxl-down-list//
.pxl-down-list1 {
    .pxl-item-inner {
        padding: 14px 13px 40px 12px;
        position: relative;
        &:before {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            background-color: #fff;
            clip-path: polygon(95% 0, 100% 6%, 100% 100%, 0 100%, 0 0);
            z-index: -1;
            @include transition(all 0.3s);
        }
        &:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: #d9d9d9;
            clip-path: polygon(95% 0, 100% 6%, 100% 100%, 0 100%, 0 0);
            z-index: -2;
            @include transition(all 0.3s);
        }
        .pxl-item-title {
            font-size: 23px;
            color: #ffffff;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.2;
            background-color: $primary_color;
            padding: 19px 20px 22px 27px;
            margin-bottom: 32px;
            clip-path: polygon(96% 0, 100% 22%, 100% 100%, 0 100%, 0 0);
            @media (max-width: 1200px) {
                font-size: 20px;
            }
        }
        .pxl-item-content {
            padding: 0 26px;
            @media (max-width: 1280px) {
                padding: 0 15px;
            }
            @media (max-width: 1200px) {
                padding: 0 10px;
            }
            .pxl-item-desc {
                font-size: 16px;
                margin-bottom: 28px;
            }
        }
        .pxl-list-link {
            .pxl--item {
                margin-bottom: 12px;
                &:last-child {
                    margin-bottom: 0;
                }
                .pxl-item-link {
                    font-size: 14px;
                    letter-spacing: 0.7px;
                    text-transform: uppercase;
                    color: #ffffff;
                    font-weight: 500;
                    background-color: $link_color;
                    @include ft_theme_default($ft_theme_default);
                    padding: 19px 21px 18px 23px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    @media (max-width: 1200px) {
                        font-size: 12px;
                    }
                    .pxl-icon-down {
                        display: flex;
                        line-height: 1;
                        svg {
                            height: 18px;
                            width: auto;
                            path {
                                stroke: #fff;
                            }
                        }
                    }
                    &:hover {
                        background-color: $primary_color;
                    }
                }
            }
        }
    }
}

//end

//pxl-number-box//
.pxl-number-box1 {
    .pxl-number-inner {
        text-align: center;
        padding: 0 30px;
        .pxl-item-number {
            width: 140px;
            height: 140px;
            border: 2px solid #ededed;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            @include border-radius(50%);
            font-size: 41px;
            color: #ffffff;
            font-weight: 800;
            font-family: "Barlow Semi Condensed";
            &:before {
                content: '';
                position: absolute;
                width: 63%;
                height: 63%;
                top: 50%;
                left: 50%;
                background-image: linear-gradient(86deg, $gradient_color_from 0%, $gradient_color_to 100%);
                @include border-radius(50%);
                z-index: -1;
                transform: translate(-50%,-50%);
            }
            &:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                display: block;
                border-radius: inherit;
                animation: pxl_pulse_radius 2000ms ease-out infinite;
                -webkit-animation: pxl_pulse_radius 2000ms ease-out infinite;
                z-index: -2;
                border: 2px solid #ededed;
            }
        }
        .pxl-item-content {
            .pxl-item-title {
                font-size: 25px;
                letter-spacing: 0px;
                color: $link_color;
                font-weight: 800;
                font-family: "Barlow Semi Condensed";
                line-height: 1.2;
                margin-top: 26px;
                margin-bottom: 9px;
                @media (max-width: 1280px) {
                    font-size: 22px;
                }
            }
            .pxl-item-desc {
                font-size: 18px;
                letter-spacing: 0px;
                color: #323232;
                font-weight: 400;
                font-family: "Barlow Semi Condensed";
                line-height: 1.48;
            }
        }
    }
}

//pxl-absolute
.pxl-absolute1 {
    &.style1 {
        .pxl-item {
            margin-bottom: 10px;
            &:last-child {
                margin-bottom: 0;
            }
            a {
                background-image: linear-gradient(86deg, $gradient_color_from 0%, $gradient_color_to 100%);
                clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 5% 100%);
                font-size: 19px;
                color: #ffffff;
                font-weight: 500;
                font-family: "Catamaran", sans-serif;
                padding: 3px 44px;
                border-radius: 5px 30px 0px 0px;
            }
        }
    }
    &.style2 {
        .pxl-absolute-inner {
            display: inline-flex;
            align-items: center;
            .pxl-item {
                margin-right: 45px;
                &:last-child {
                    margin-right: 0;
                }
                a {
                    font-size: 19px;
                    letter-spacing: 0.2px;
                    color: #ffffff;
                    font-weight: 700;
                    font-family: "Barlow Semi Condensed";
                    &:hover {
                        color: $primary_color;
                    }
                }
            }
        }
    }
}
.pxl-absolute-layout1 {
    position: absolute;
    left: -105px;
    top: 34%;
    transform: rotate(90deg) translate(0,-50%);
    @media (max-width: 1400px) {
        display: none;
    }
}
.pxl-absolute-layout2 {
    position: absolute;
    right: -124px;
    top: 35%;
    transform: rotate(90deg) translate(0,-50%);
    @media (max-width: 1400px) {
        display: none;
    }
}

//pxl-language//
.pxl-language {
    &.pxl-language1 {
        @include border-radius(0);
        line-height: 84px;
        padding: 0 14px;
        transition: all 0.3s;
        cursor: pointer;
        .pxl-meta-inner {
            position: relative;
            transition: all 0.3s;
            .pxl-language-on {
                display: inline-flex;
                align-items: center;
                .pxl-item--icon {
                    width: 29px;
                    min-width: 29px;
                    height: 29px;
                    @include border-radius(50%);
                    background-color: rgba(#fff, 0.349);
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    svg {
                        height: 26px;
                    }
                    i {
                        font-size: 26px;
                        color: $primary_color;
                    }
                }
                .pxl-language-title {
                    font-size: 15px;
                    line-height: 35px;
                    color: #ffffff;
                    font-weight: 500;
                    margin: 0 8px 0 9px;
                }
                .pxl-arrow {
                    font-size: 10px;
                    color: #fff;
                    margin-top: 3px;
                    line-height: 1;
                }
            }
            .pxl-language-list {
                position: absolute;
                top: 100%;
                right: -14px;
                min-width: 200px;
                transition: all 0.3s ease-in-out;
                text-align: left;
                padding: 0;
                z-index: 99;
                visibility: hidden;
                transform: translateY(30px);
                opacity: 0;
                background-color: #fff;
                border: 1px solid #d9d9d9;
                .pxl-item {
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid rgba(#000000, 0.149);
                    padding: 15px 20px;
                    position: relative;
                    @include transition(all 200ms linear 0ms);
                    &:last-child{
                        border-bottom: 0;
                    }
                    .pxl-link {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                    }
                    .pxl-image {
                        width: 27px;
                        min-width: 27px;
                        height: 27px;
                        @include border-radius(50%);
                        border: 1.5px solid rgba(#fff, 0.349);
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .pxl-item--title {
                        font-size: 14px;
                        font-weight: 500;
                        color: $link_color;
                        display: block;
                        transition: all 0.3s;
                        position: relative;
                        overflow: clip;
                        line-height: 1.6;
                        @include transition(all 200ms linear 0ms);
                        span {
                            position: relative;
                            z-index: 1;
                        }
                        .char {
                            transition: transform 0.2s ease, color 0.2s ease;
                            transition-delay: calc(var(--char-index) * 0.02s);
                        }
                    }
                    &:hover {
                        .pxl-item--title {
                            .char {
                                color: $primary_color;
                                @include transform(translateY(-10px));
                            }
                        }
                    }
                }
            }
            &.left {
                .pxl-language-list {
                    left: -14px;
                }
            }
            &.right {
                .pxl-language-list {
                    right: -14px;
                }
            }
        }
        &:hover {
            .pxl-meta-inner {
                .pxl-language-list {
                    visibility: visible;
                    opacity: 1;
                    transform: translateY(0px);
                }
            }
        }
    }
    &.pxl-language2 {
        @include border-radius(0);
        padding: 0 14px;
        transition: all 0.3s;
        cursor: pointer;
        @media (max-width: 1600px) {
            padding: 0;
        }
        @media (max-width: 1366px) {
            padding: 0 14px;
        }
        .pxl-meta-inner {
            position: relative;
            transition: all 0.3s;
            height: 107px;
            align-items: center;
            display: flex;
            @media (max-width: 1600px) {
                height: 90px;
            }
            .pxl-language-on {
                display: inline-flex;
                align-items: center;
                border: 1px solid rgba(#000, 0.149);
                @include border-radius(50%);
                @include transition(all 0.3s);
                .pxl-item--icon {
                    width: 48px;
                    min-width: 48px;
                    height: 48px;
                    @include border-radius(50%);
                    background-color: rgba(#fff, 0.349);
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    @media (max-width: 1600px) {
                        width: 40px;
                        min-width: 40px;
                        height: 40px;
                    }
                    svg {
                        height: 32px;
                        width: auto;
                        @media (max-width: 1600px) {
                            height: 30px;
                        }
                    }
                    i {
                        font-size: 32px;
                        color: $primary_color;
                        @media (max-width: 1600px) {
                            font-size: 30px;
                        }
                    }
                }
                .pxl-language-title {
                    font-size: 15px;
                    line-height: 35px;
                    color: #ffffff;
                    font-weight: 500;
                    margin: 0 8px 0 9px;
                }
                .pxl-arrow {
                    font-size: 10px;
                    color: #fff;
                    margin-top: 3px;
                    line-height: 1;
                }
            }
            .pxl-language-list {
                position: absolute;
                top: 100%;
                right: -14px;
                min-width: 200px;
                border: 1px solid #d9d9d9;
                transition: all 0.3s ease-in-out;
                text-align: left;
                padding: 0;
                z-index: 99;
                visibility: hidden;
                transform: translateY(30px);
                opacity: 0;
                background-color: #fff;
                .pxl-item {
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid rgba(#000000, 0.149);
                    padding: 15px 20px;
                    position: relative;
                    @include transition(all 200ms linear 0ms);
                    &:last-child{
                        border-bottom: 0;
                    }
                    .pxl-link {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                    }
                    .pxl-image {
                        width: 27px;
                        min-width: 27px;
                        height: 27px;
                        @include border-radius(50%);
                        border: 1.5px solid rgba(#fff, 0.349);
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .pxl-item--title {
                        font-size: 14px;
                        font-weight: 500;
                        color: $link_color;
                        display: block;
                        transition: all 0.3s;
                        position: relative;
                        overflow: clip;
                        line-height: 1.6;
                        @include transition(all 200ms linear 0ms);
                        span {
                            position: relative;
                            z-index: 1;
                        }
                        .char {
                            transition: transform 0.2s ease, color 0.2s ease;
                            transition-delay: calc(var(--char-index) * 0.02s);
                        }
                    }
                    &:hover {
                        .pxl-item--title {
                            .char {
                                color: $primary_color;
                                @include transform(translateY(-10px));
                            }
                        }
                    }
                }
            }
            &.left {
                .pxl-language-list {
                    left: -14px;
                }
            }
            &.right {
                .pxl-language-list {
                    right: -14px;
                }
            }
        }
        &:hover {
            .pxl-meta-inner {
                .pxl-language-on {
                    border-color: $primary_color;
                }
                .pxl-language-list {
                    visibility: visible;
                    opacity: 1;
                    transform: translateY(0px);
                }
            }
        }
    }
}

//pxl-menu-list
.pxl-menu-list1 {
    @include border-radius(0);
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    .pxl-meta-inner {
        position: relative;
        transition: all 0.3s;
        height: 107px;
        display: flex;
        align-items: center;
        @media (max-width: 1600px) {
            height: 90px;
        }
        .pxl-menu-list-on {
            display: flex;
            align-items: center;
            .pxl-menu-list-title {
                font-size: 16px;
                line-height: 35px;
                color: $link_color;
                margin: 0 8px 0 0px;
            }
            .pxl-arrow {
                font-size: 7px;
                color: $link_color;
                margin-top: 5px;
                line-height: 1;
            }
        }
        .pxl-menu-list-list {
            position: absolute;
            top: 100%;
            min-width: 220px;
            border: 1px solid #d9d9d9;
            transition: all 0.3s ease-in-out;
            text-align: left;
            padding: 0;
            z-index: 99;
            visibility: hidden;
            transform: translateY(30px);
            opacity: 0;
            background-color: #fff;
            .pxl-item {
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgba(#000000, 0.149);
                padding: 15px 20px;
                position: relative;
                @include transition(all 200ms linear 0ms);
                &:last-child{
                    border-bottom: 0;
                }
                .pxl-link {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: 2;
                }
                .pxl-image {
                    width: 27px;
                    min-width: 27px;
                    height: 27px;
                    @include border-radius(50%);
                    border: 1.5px solid rgba(#fff, 0.349);
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .pxl-item--title {
                    font-size: 14px;
                    color: $link_color;
                    display: block;
                    transition: all 0.3s;
                    position: relative;
                    overflow: clip;
                    line-height: 1.6;
                    @include transition(all 200ms linear 0ms);
                    span {
                        position: relative;
                        z-index: 1;
                    }
                    .char {
                        transition: transform 0.2s ease, color 0.2s ease;
                        transition-delay: calc(var(--char-index) * 0.02s);
                    }
                }
                &:hover {
                    .pxl-item--title {
                        .char {
                            color: $primary_color;
                            @include transform(translateY(-10px));
                        }
                    }
                }
            }
        }
        &.left {
            .pxl-menu-list-list {
                left: 0px;
            }
        }
        &.right {
            .pxl-menu-list-list {
                right: 0px;
            }
        }
    }
    &:hover {
        .pxl-meta-inner {
            .pxl-menu-list-list {
                visibility: visible;
                opacity: 1;
                transform: translateY(0px);
            }
        }
    }
}

//pxl-button-meta//
.pxl-button-meta1 {
    .pxl-item-inner {
        .pxl-item-title {
            font-size: 16px;
            font-weight: 600;
            line-height: 48px;
            border: 1px solid #dedede;
            @include border-radius(100px);
            display: inline-block;
            padding: 0 28px;
            &:hover {
                color: $primary_color;
                border-color: $primary_color;
            }
        }
    }
}

//pxl-badge-meta
.pxl-badge-meta1 {
    .pxl-item-inner {
        background-color: $primary_color;
        position: relative;
        @include border-radius(50%);
        width: 200px;
        min-width: 200px;
        height: 200px;
        display: inline-flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        &:before {
            content: '';
            border: dashed 2px #fff;
            position: absolute;
            width: 90%;
            height: 90%;
            @include border-radius(50%);
            animation: pxl_spin_right 10s linear infinite;
        }
        .pxl-rotate {
            position: relative;
            width: 100%;
            height: 100%;
            animation: pxl_spin 10s linear infinite;
        }
        .pxl-title-center {
            color: #fff;
            font-size: 66px;
            font-weight: 600;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .pxl-meta-content {
            position: absolute;
            top: 52%;
            left: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%,-50%);
        }
        .pxl-title-path {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            fill: #fff;
            background-repeat: no-repeat;
            background-size: auto;
            background-image: url(../img/badge.png);
            background-position: center center;
        }
    }
}

.pxl-badge-meta2 {
    .pxl-item-inner {
        background-color: #fff;
        position: relative;
        @include border-radius(50%);
        width: 200px;
        min-width: 200px;
        height: 200px;
        display: inline-flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        border: 1px solid #DEDEDE;
        &:before {
            content: '';
            border: dashed 2px $link_color;
            position: absolute;
            width: 90%;
            height: 90%;
            @include border-radius(50%);
            animation: pxl_spin_right 10s linear infinite;
        }
        .pxl-rotate {
            position: relative;
            width: 100%;
            height: 100%;
            animation: pxl_spin 10s linear infinite;
        }
        .pxl-title-center {
            color: $link_color;
            font-size: 66px;
            font-weight: 600;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .pxl-meta-content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%,-50%);
        }
        .pxl-title-path {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            fill: #fff;
            background-repeat: no-repeat;
            background-size: auto;
            background-image: url(../img/badge2.png);
            background-position: center center;
        }
    }
}

//pxl-text-scroll
.pxl-text-scroll1 {
    .pxl-item-title {
        font-size: 500px;
        font-weight: 600;
        font-family: "Outfit", sans-serif;
        line-height: 1;
        color: #2c2c2c;
        letter-spacing: -1px;
    }
}

.pxl-text-scroll2 {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    .pxl-meta-inner {
        display: flex;
        flex-grow: 1;
        overflow: hidden;
        @media (max-width: 880px) {
            display: block;
        }
        .pxl-item-left {
            width: 42.7%;
            @media (max-width: 1366px) {
                width: 46%;
            }
            @media (max-width: 880px) {
                width: 100%;
                margin-bottom: 30px;
            }
            .pxl-item-heading {
                margin-bottom: 266px;
                @media (max-width: 880px) {
                    margin-bottom: 30px;
                }
                .pxl-sub-title {
                    font-family: Outfit;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    text-decoration: underline;
                    text-transform: uppercase;
                    color: $primary_color;
                    margin-bottom: 17px;
                }
                .pxl-item-title {
                    font-family: Outfit;
                    font-size: 80px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 1.1;
                    color: #fff;
                    letter-spacing: -3.2px;
                    max-width: 68%;
                    @media (max-width: 1200px) {
                        max-width: 100%;
                    }
                    @media (max-width: 1024px) {
                        font-size: 70px;
                    }
                    @media (max-width: 757px) {
                        font-size: 45px;
                    }
                }
            }
            .pxl-load-title {
                display: flex;
                align-items: center;
                padding-left: 8px;
                .load {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    position: relative;
                    display: flex;
                    z-index: 1;
                    .pxl-scroll-progress-circle {
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: -1;
                        transform: rotate(90deg);
                        -webkit-transition: all 200ms linear;
                        transition: all 200ms linear;
                        path {
                            fill: none;
                            stroke: rgba(#fff, 0.5);
                            stroke-width: 4;
                            box-sizing: border-box;
                            -webkit-transition: all 200ms linear;
                            transition: all 200ms linear;
                        }
                    }
                }
                .pxl-title-load {
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    letter-spacing: -0.32px;
                    color: rgba(#fff, 0.5);
                }
            }
        }
        .pxl-item-right {
            width: 57.3%;
            position: relative;
            margin-top: 7px;
            @media (max-width: 1366px) {
                width: 54%;
            }
            @media (max-width: 880px) {
                width: 100%;
            }
            &:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 98%;
                height: 100%;
                background: linear-gradient(180deg, rgba(255,255,255,0) 36%, #232323 100%);
                pointer-events: none;
                z-index: 1;
            }
            .barContainer {
                position: absolute;
                top: 43%;
                z-index: 5; 
                width: 4px;
                height: 300px;
                right: 14px;
                border-radius: 10px;
                background-color: rgba(#fff, 0.2);
                transform: translate(0, -50%);
                @media (max-width: 880px) {
                    right: 0;
                }
                .bar {
                    background-color: $primary_color;
                    width: 4px;
                    height: 8px;
                    border-radius: 10px;
                    position: absolute;
                    cursor: pointer;
                    transform-origin: 0 0;
                    top: 0;
                    left: 0;
                }
            }
        }
        .pxl-list {
            position: relative;
            overflow-y: auto;
            max-height: 643px;
            transition: all 0.3s ease;
            scrollbar-width: auto;
            padding-right: 90px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            @media (max-width: 1280px) {
                padding-right: 30px;
            }
            @media (max-width: 1024px) {
                max-height: 550px;
            }
            &::-webkit-scrollbar {
                width: 4px;
                height: 8px;
                display: none;
            }

            &::-webkit-scrollbar-track {
                background-color: rgba(#fff, 0.2);
                border-radius: 10px;
                height: 300px;
            }

            &::-webkit-scrollbar-thumb {
                background: $primary_color;
                border-radius: 10px;
                width: 4px;
            }

            &::-webkit-scrollbar-button:vertical {
                
            }
            .pxl-item {
                margin-bottom: 54px;
                @media (max-width: 880px) {
                    margin-bottom: 35px;
                }
                &:last-child {
                    margin-bottom: 0 !important;
                }
                .pxl-item-desc {
                    font-family: Outfit;
                    font-size: 40px;
                    font-style: normal;
                    font-weight: 400;
                    color: #fff;
                    -webkit-text-stroke-color: #fff;
                    line-height: 1.22;
                    @media (max-width: 1024px) {
                        font-size: 35px;
                    }
                    @media (max-width: 880px) {
                        font-size: 30px;
                    }
                }
            }
        }

    }
}

.pxl-text-scroll3 {
    .pxl-meta-inner {
        text-align: center;
        .pxl-item-title {
            font-size: 200px;
            letter-spacing: -8px;
            font-family: Outfit;
            font-style: normal;
            font-weight: 500;
            white-space: nowrap;
            color: transparent;
            -webkit-text-stroke: 1px $link_color;
            position: relative;
            line-height: 1;
            &:after {
                content: '';
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(#000,0) 0%, #fff 79%);
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }
}

.pxl-text-scroll4 {
    .pxl-meta-inner {
        .pxl-item-title {
            font-family: Outfit;
            font-size: 600px;
            white-space: nowrap;
            line-height: 1.3;
            color: transparent;
            -webkit-text-stroke: 2px #dedede;
            font-weight: 700;
            letter-spacing: -24px;
        }
    }
}
//end//
//pxl-client-grid
.pxl-client-grid1 {
    .pxl-item--inner {
        margin: 15px 0;
        a {
            height: 100px;
            position: relative;
            text-align: center;
            background-color: #fff;
            box-shadow: 0px 30px 120px 0px rgba(#000, 0.06);
            border: 1px solid #EAEAEA;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            img {
                height: min-content;
                filter: none;
                @include transition(all .3s);
            }
            &:hover {
                img {
                    filter: invert(67%) sepia(1%) saturate(0%) hue-rotate(200deg) brightness(92%) contrast(88%);
                }
            }
        }
    }
}

//PXL Number
.pxl-number1 {
    .pxl-item {
        display: flex;
        padding-bottom: 46px;
        position: relative;
        z-index: 1;
        @include transition(all .3s);
        &:before {
            content: '';
            position: absolute;
            height: 75%;
            width: 1px;
            background-color: #DEDEDE;
            bottom: -13px;
            left: 30px;
            z-index: -2;
            @include transition(all .3s);
        }
        &:after {
            content: '';
            position: absolute;
            height: 75%;
            width: 1px;
            background-color: $link_color;
            bottom: -13px;
            left: 30px;
            z-index: -1;
            opacity: 0;
            transform: scaleY(0);
            @include transition(all .3s);
            transform-origin: top;
        }
        &:last-child {
            padding-bottom: 0;
            &:before {
                display: none;
            }
            &:after {
                display: none;
            }
        }
        .pxl-item-number {
            width: 60px;
            height: 60px;
            font-family: Outfit;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            text-transform: capitalize;
            color: $link_color;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 60px;
            padding-top: 5px;
            background-color: #fff;
            position: relative;
            z-index: 1;
            overflow: hidden;
            @include transition(all .3s);
            .pxl-bg-number {
                position: absolute;
                width: 98%;
                height: 98%;
                top: 50%;
                left: 50%;
                background-color: #fff;
                border-radius: 50%;
                z-index: -1;
                transform: translate(-50%,-50%);
            }
            &:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #DEDEDE;
                border-radius: 50%;
                top: 0;
                left: 0;
                z-index: -2;
                @include transition(all .3s);
            }
            &:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: $link_color;
                border-radius: 50%;
                top: 0;
                left: 0;
                z-index: -2;
                opacity: 0;
                transform: scaleY(0);
                @include transition(all .3s);
                transform-origin: top;
            }
            &.pxl-mr-30 {
                @media (max-width: 1024px) {
                    margin-right: 20px;
                }
            }
        }
        .pxl-item-title {
            font-family: Outfit;
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            color: $link_color;
            line-height: 1.2;
            margin-bottom: 14px;
        }
        .pxl-item-desc {
            font-family: Inter;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            color: #666;
            @media (max-width: 1024px) {
                font-size: 16px;
            }
        }
        &.active {
            &:after {
                opacity: 1;
                transform: scaleY(1);
                transition-delay: 0.2s;
            }
            .pxl-item-number {
                &:after {
                    opacity: 1;
                    transform: scaleY(1);
                    transition-delay: 0s;
                }
            }
        }
    }
}

.pxl-title-slide1 {
    .pxl-inner-slide {
        text-align: center;
        overflow: hidden;
        position: relative;
        .pxl-item--inner {
            display: flex;
            align-items: center;
            justify-content: center;
            @include transition(all 0.3s);
            cursor: pointer;
            .pxl-item--title {
                font-family: Outfit;
                font-size: 80px;
                font-style: normal;
                font-weight: 500;
                @include transition(all 0.3s);
                color: $link_color;
                position: relative;
                cursor: pointer;
                letter-spacing: -3.2px;
                line-height: 1.23;
                a {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: none;
                }
                @media (max-width: 1024px) {
                    font-size: 70px;
                }
                @media (max-width: 880px) {
                    font-size: 50px;
                }
                @media (max-width: 575px) {
                    font-size: 35px;
                }
            }
            .pxl-bg-slider {
                transform: scale(1);
                @include transition(all 0.3s);
            }
            &.active {
                background-color: $primary_color;
                padding: 21px 0px;
                @media (max-width: 575px) {
                    padding: 15px 0px;
                }
                .pxl-item--title {
                    color: #fff;
                    a {
                        display: block;
                    }
                }
            }
        }
    }
}

//Button Video
.pxl-button-custom {
    &.pxl-button-custom1 {
        &.style-default {
            .pxl-btn {
                min-width: 200px;
                width: 200px;
                height: 200px;
                @include border-radius(50%);
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                color: $link_color;
                border: 1px solid $primary_color;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                @media (max-width: 1200px) {
                    min-width: 200px;
                    width: 200px;
                    height: 200px;
                    line-height: 200px;
                }
                span {
                    max-width: 50%;
                    line-height: 1.3;
                }
                
            }
        }
    }
}

//pxl-list-box

.pxl-list-box1 {
    .pxl-item--content {
        list-style: none;
        margin: 0;
    }
    .list--item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #DEDEDE;
        padding: 56px 0 55px 0;
        @include transition(all 300ms linear 0ms);
        &.pxl-hover-transition {
            @include transition(all 0.4s ease-in-out);
        }
        .pxl-content {
            position: relative;
            display: block;
            &.pxl-hover-transition {
                @include transition(all 0.4s ease-in-out);
            }
        }
        &:hover {
            border-color: $link_color;
            .pxl-sub--title {
                color: $primary_color;
                text-decoration: underline;
            }
            .pxl-item--title {
                .no-hover {
                    opacity: 0;
                }
                .hover {
                    opacity: 1;
                    z-index: 6;
                }
                &:before {
                    opacity: 0;
                }
            }
        }
    }
    .pxl-sub--title {
        font-family: Outfit;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        text-transform: uppercase;
        color: #666;
        margin-bottom: 11px;
        @include transition(all 300ms linear 0ms);
    }
    .pxl-item--title {
        margin-bottom: 0;
        font-family: 'Outfit', sans-serif;
        font-size: 80px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -3.2px;
        white-space: nowrap;
        color: transparent;
        -webkit-text-stroke: 1.4px #9a9a9a;
        @include transition(all 300ms linear 0ms);
        position: relative;
        @media (max-width: 1024px) {
            font-size: 60px;
        }
        @media (max-width: 767px) {
            font-size: 40px;
        }
        .no-hover {
            opacity: 1;
            @include transition(all 300ms linear 0ms);
        }
        .hover {
            color: $link_color;
            -webkit-text-stroke: $link_color;
            @include transition(all 300ms linear 0ms);
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        &:before {
            content: '';
            position: absolute;
            height: 100%;
            width: 103%;
            top: 0;
            left: 0;
            background: linear-gradient(100deg,rgba(#9a9a9a, 0) 0%,#fff 100%);
            opacity: 1;
            @include transition(all 500ms linear 0ms);
        }
    }
    .pxl-item--image {
        position: absolute;
        top: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        opacity: 0;
        z-index: 0;
        @media #{$min-md} {
            left: 0;
            transform: translate(calc(var(--pxl-mouse-x) - 50%), calc(var(--pxl-mouse-y) - 50%));
        }
        @media #{$max-sm} {
            right: 0;
            transform: translate(0, calc(var(--pxl-mouse-y) - 50%));
        }
        @media (max-width: 575px) {
            display: none;
        }
    }
    .image--item {
        transition: z-index 0.11s 0.17s;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        &.active {
            z-index: 4;
            .image--inner {
                animation: pxlInnerIn 0.55s ease-in-out both;
            }
            img {
                animation: pxlImgIn 0.55s ease-in-out both;
            }
        }
        &.deactive {
            .image--inner {
                animation: pxlInnerOut 0.55s ease-in-out both;
            }
            img {
                animation: pxlImgOut 0.55s ease-in-out both;
            }
        }
    }
    .image--inner {
        transform: translateX(-100%);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        background-color: #d9d9d9;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: translateX(100%) scale(1.4);
            mix-blend-mode: luminosity;
        }
    }
    .pxl-item--inner {
        position: relative;
        &:hover {
            .list--item {
                &:before {
                    z-index: 5;
                }
                a {
                    z-index: 5;
                }
            }
            .pxl-item--image {
                opacity: 1;
                z-index: 3;
            }
        }
    }
}

//PXL Author
.pxl-author1 {
    .pxl-meta-inner {
        display: flex;
        align-items: center;
        .pxl-item--imgprimary {
            @include border-radius(50%);
            overflow: hidden;
            background-color: #d9d9d9;
            img {
                mix-blend-mode: luminosity;
            }
        }
        .pxl-item-title {
            font-family: Outfit;
            font-size: 24px;
            font-style: normal;
            font-weight: 500;
            color: $link_color;
            line-height: 1.2;
            margin-bottom: 10px;
        }
        .pxl-sub-title {
            font-family: Inter;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            color: $primary_color;
            line-height: 1.2;
        }
    }
}

//PXL History Carousel
.pxl-history-carousel {
    &.pxl-history-carousel1 {
        .pxl-swiper-container {
            margin: 0;
            @media (max-width: 991px) {
                margin: 0 -15px;
            }
        }
        .pxl-item--inner {
            .pxl-item-top {
                padding-right: 151px;
                @media (max-width: 1280px) {
                    padding-right: 100px;
                }
                @media (max-width: 1200px) {
                    padding-right: 30px;
                }
                @media (max-width: 991px) {
                    padding-right: 0;
                }
                .pxl-item--image {
                    background-color: #d9d9d9;
                    img {
                        mix-blend-mode: luminosity;
                    }
                }
            }
            .pxl-item--holder {
                display: flex;
                align-items: center;
                padding-top: 38px;
                @include transition(all 300ms linear 0ms);
                .pxl-item--title {
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    text-transform: capitalize;
                    color: $primary_color;
                    line-height: 1.2;
                    margin-bottom: 15px;
                }
                .pxl-item--year {
                    font-family: Outfit;
                    font-size: 48px;
                    font-style: normal;
                    font-weight: 600;
                    text-transform: uppercase;
                    line-height: 1;
                    white-space: nowrap;
                    color: transparent;
                    -webkit-text-stroke: 1px $link_color;
                    @include transition(all 300ms linear 0ms);
                    position: relative;
                    .no-hover {
                        opacity: 1;
                        @include transition(all 300ms linear 0ms);
                    }
                    .hover {
                        color: $link_color;
                        position: absolute;
                        left: 0;
                        top: 0;
                        opacity: 0;
                        @include transition(all 300ms linear 0ms);
                    }
                }
                .pxl-item--number {
                    width: 50px;
                    min-width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 700;
                    text-transform: capitalize;
                    color: $link_color;
                    @include transition(all 300ms linear 0ms);
                }
            }
            .pxl-item--desc {
                border-top: 1px solid #DCDCDC;
                font-family: Inter;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                color: #666;
                margin-top: 40px;
                padding: 30px 100px 0 0;
                position: relative;
                @include transition(all 300ms linear 0ms);
                @media (max-width: 1280px) {
                    padding-right: 70px;
                }
                @media (max-width: 991px) {
                    padding-right: 0;
                    font-size: 16px;
                }
                &:before {
                    content: '';
                    position: absolute;
                    top: -1px;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background-color: $link_color;
                    transform-origin: left;
                    transform: scaleX(0);
                    @include transition(all 300ms linear 0ms);
                }
            }
            &:hover {
                .pxl-item--holder {
                    .pxl-item--year {
                        .no-hover {
                            opacity: 0;
                        }
                        .hover {
                            opacity: 1;
                        }
                    }
                    .pxl-item--number {
                        color: $primary_color;
                    }
                }
                .pxl-item--desc {
                    &:before {
                        transform: scaleX(1);
                    }
                }
            }
        }
        .pxl-swiper-slide {
            padding: 0;
            @include transition(all 0.3s);
            @media (max-width: 991px) {
                padding: 0 15px;
            }
        }
    }
}

.pxl-image-author1 {
    .pxl-meta-inner {
        @include transition(all 0.3s);
        &:hover {
            .pxl-item--imgprimary {
                opacity: 1;
            }
        }
        .pxl-item--imgprimary {
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            opacity: 0.6;
            @include transition(all 0.3s);
        }
    }
}

//pxl-awardes
.pxl-awardes1 {
    .pxl-item-inner {
        &.style1 {
            border-bottom: 1px solid #DEDEDE;
            position: relative;
            padding: 31px 0 31px 30px;
            overflow: hidden;
            @include transition(all 0.3s);
            @media (max-width: 991px) {
                padding: 30px 0;
            }
            &:hover {
                border-color: $primary_color;
                .pxl-content-hover {
                    top: 0;
                    opacity: 1;
                }
            }
            .pxl-item-content {
                display: flex;
                align-items: center;
                justify-content: space-between;
                @media (max-width: 991px) {
                    display: block;
                    text-align: center;
                }
                .pxl-content-title {
                    font-family: Outfit;
                    font-size: 48px;
                    font-style: normal;
                    font-weight: 500;
                    letter-spacing: -1.92px;
                    color: $link_color;
                    line-height: 1.2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    @media (max-width: 1280px) {
                        font-size: 40px;
                    }
                    @media (max-width: 1024px) {
                        font-size: 30px;
                    }
                    @media (max-width: 991px) {
                        margin-bottom: 20px;
                    }
                }
                .pxl-item-btn {
                    font-family: Outfit;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    text-transform: uppercase;
                    color: #666;
                    display: inline-flex;
                    align-items: center;
                    svg {
                        path {
                            fill: rgba(#232323, 0.2);
                        }
                    }
                }
            }
            .pxl-content-hover {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                top: 100%;
                left: 0;
                background-color: $primary_color;
                padding: 0 30px 0 30px;
                @include transition(all 0.3s);
                @media (max-width: 991px) {
                    display: block;
                    text-align: center;
                    align-content: center;
                }
                .pxl-item-title {
                    font-family: Outfit;
                    font-size: 48px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 1.2;
                    letter-spacing: -1.92px;
                    color: #fff;
                    text-decoration: underline transparent;
                    @include transition(all 0.3s);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    @media (max-width: 1280px) {
                        font-size: 40px;
                    }
                    @media (max-width: 1024px) {
                        font-size: 30px;
                    }
                    @media (max-width: 991px) {
                        margin-bottom: 20px;
                    }
                    &:hover {
                        text-decoration: underline #fff;
                    }
                }
                .pxl-title-hover {
                    width: 50.3%;
                    padding-right: 30px;
                    position: relative;
                    @media (max-width: 1200px) {
                        width: 45%;
                    }
                    @media (max-width: 991px) {
                        width: 100%;
                        padding: 0;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        width: 1px;
                        height: 40px;
                        top: 50%;
                        right: -1px;
                        transform: translate(0,-50%);
                        background-color: rgba(#fff, 0.2);
                        @media (max-width: 991px) {
                            display: none;
                        }
                    }
                }
                .pxl-list {
                    display: inline-flex;
                    align-items: center;
                    width: 49.7%;
                    padding-left: 59px;
                    @media (max-width: 1200px) {
                        width: 55%;
                        padding-left: 38px;
                    }
                    @media (max-width: 991px) {
                        width: 100%;
                        padding: 0;
                        justify-content: center;
                        flex-wrap: wrap;
                    }
                    .pxl--item {
                        position: relative;
                        padding-right: 25px;
                        margin-right: 16px;
                        @media (max-width: 575px) {
                            padding-right: 0;
                        }
                        &:after {
                            content: '';
                            position: absolute;
                            width: 10px;
                            height: 2px;
                            top: 50%;
                            right: 0;
                            transform: translate(0,-50%);
                            background-color: rgba(#fff, 0.20);
                            @media (max-width: 575px) {
                                display: none;
                            }
                        }
                        &:last-child {
                            padding-right: 0;
                            margin-right: 0;
                            &:after {
                                display: none;
                            }
                        }
                        .pxl-item-link {
                            font-family: Outfit;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 500;
                            text-transform: uppercase;
                            color: #fff;
                            text-decoration: underline transparent;
                            @include transition(all 0.3s);
                            @media (max-width: 1200px) {
                                font-size: 14px;
                            }
                            &:hover {
                                text-decoration: underline #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

.pxl-portfolio-click1 {
    .pxl-swiper-container {
        margin: 0;
    }
    .pxl-swiper-wrapper {
        display: flex;
        min-height: 600px;
        height: 60vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style-type: none;
        width: 100%;
        min-width: 100%;
        transform: translate3d(0px, 0px, 0px) !important;
        @media (max-width: 1199px) {
            min-height: 540px;
        }
        @media (max-width: 991px) {
            min-height: 490px;
        }
        @media (max-width: 767px) {
            display: grid;
            min-height: 1500px;
        }
    }
    .pxl-swiper-single {
        padding: 0;
        flex: 1.12;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        @include transition(all .35s ease);
        cursor: pointer;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 0;
        overflow: hidden;
        width: 100% !important;
        @media (max-width: 1199px) {
            flex: 1.20;
        }
        @media (max-width: 767px) {
            flex: 100%;
        }
        &.swiper-slide-active {
            flex: 4.42;
            cursor: default;
            @media (max-width: 1199px) {
                flex: 4.5;
            }
            @media (max-width: 767px) {
                flex: 100%;
            }
            .pxl-item--holder {
                background: linear-gradient(180deg, rgba(228, 79, 57, 0.00) 48%, $primary_color 100%);
                .pxl-item--number {
                    color: #fff;
                    -webkit-text-stroke: unset;
                }
                .pxl-content {
                    opacity: 1;
                    @media (max-width: 991px) {
                        width: 100%;
                    }
                }
                .pxl-item--title {
                    a {
                        display: block;
                        opacity: 2;
                    }
                }
            }
        }
    }
    .pxl-item--inner {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: unset;
    }
    .pxl-item--image {
        position: absolute;
        width: 100%;
        height: 100%;
        @include transition(all .35s ease);
        transform: scaleX(1);
        transform-origin: right;
        position: relative;
        overflow: hidden;
        img {
            height: 100%;
            position: absolute;
            right: 0;
            width: revert-layer !important;
            max-width: unset;
            @include transition(all .35s ease);
            @media (max-width: 767px) {
                height: unset;
                max-width: unset;
                width: unset !important;
            }
        }
        a {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
    }
    .pxl-item--holder {
        width: inherit;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 100%;
        margin: 0;
        color: #fff;
        z-index: 2;
        padding-bottom: 49px;
        padding-left: 48px;
        @include transition(all .35s ease);
        align-content: end;
        background: unset;
        @media (max-width: 1280px) {
            padding-left: 15px;
        }
        @media (max-width: 767px) {
            padding-bottom: 15px;
        }
        a {
            display: flex;
            align-items: baseline;
        }
        .pxl-item--number {
            font-family: Outfit;
            font-size: 120px;
            font-style: normal;
            font-weight: 500;
            letter-spacing: -4.8px;
            color: transparent;
            -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.3);
            white-space: nowrap;
            position: absolute;
            bottom: 42px;
            right: -23px;
            transform: rotate(-90deg);
            line-height: 1;
            @include transition(all 0.3s);
            @media (max-width: 1280px) {
                font-size: 80px;
                right: -15px;
            }
            @media (max-width: 991px) {
                right: 0;
                bottom: -20px;
                transform: unset;
            }
            @media (max-width: 480px) {
                margin: 0;
                bottom: unset;
                top: 0;
                right: 15px;
            }
        }
        .pxl-content {
            opacity: 0;
            @include transition(all .35s ease);
            width: 750px;
            @media (max-width: 767px) {
                width: 100%;
            }
        }
        .pxl-item--title {
            font-family: Outfit;
            font-size: 40px;
            font-style: normal;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            @include transition(all .35s ease);
            line-height: 1.1;
            margin-bottom: 18px;
            position: relative;
            @media (max-width: 1199px) {
                font-size: 35px;
            }
            @media (max-width: 1024px) {
                line-height: 1.1;
            }
            a {
                color: #fff;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                display: none;
                @include transition(all .35s ease);
            }
        }
        .pxl-post--content {
            font-family: Inter;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            color: #fff;
            @include transition(all .35s ease);
            max-width: 52%;
            @media (max-width: 991px) {
                max-width: 85%;
                font-size: 16px;
            }
        }
    }
}

.pxl-icon-title1 {
    display: flex;
    align-items: center;
    .pxl-item-title {
        font-family: Outfit;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        color: $link_color;
        margin-right: 16px;
    }
    .pxl-list-icon {
        display: inline-flex;
        align-items: center;
        a {
            color: #C0C0C0;
            font-size: 14px;
            margin-right: 15px;
            &:last-child {
                margin-right: 0;
            }
            &:hover {
                color: $link_color;
            }
        }
    }
}

.pxl-absolute-meta1 {
    position: absolute;
    top: 50%;
    right: -44px;
    transform: rotate(-90deg) translate(0,-50%);
    @media (max-width: 1280px) {
        right: -70px;
    }
}

.pxl-about-layout1 {
    padding: 110px 350px 120px 0px;
    @media (max-width: 1800px) {
        padding: 110px 250px 120px 0px;
    }
    @media (max-width: 1700px) {
        padding: 110px 100px 120px 0px;
    }
    @media (max-width: 1500px) {
        padding: 110px 15px 120px 0px;
    }
}

//pxl--services-list
.pxl--services-list1 {
    display: flex;
    align-items: center;
    padding-bottom: 35px;
    position: relative;
    @media (max-width: 1280px) {
        justify-content: center;
    }
    @media (max-width: 676px) {
        display: block;
    }
    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid #DEDEDE;
        z-index: -1;
    }
    .pxl--item {
        position: relative;
        margin-right: 74px;
        padding-left: 4px;
        display: flex;
        align-items: center;
        @include transition(all 0.3s);
        @media (max-width: 676px) {
            display: block;
            text-align: center;
            padding: 0 0 20px 0;
            margin: 0 !important;
        }
        &:last-child {
            margin-right: 0 !important;
        }
        &:after {
            content: '/';
            position: relative;
            font-family: Outfit;
            font-size: 80px;
            font-style: normal;
            font-weight: 500;
            letter-spacing: -3.2px;
            color: #DEDEDE;
            line-height: 1;
            margin-left: 75px;
        }
        @media (max-width: 767px) {
            &:after {
                display: none;
            }
        }
        .pxl-item-title {
            font-family: Outfit;
            font-size: 80px;
            font-style: normal;
            font-weight: 500;
            letter-spacing: -3.2px;
            line-height: 1.2;
            position: relative;
            @media (max-width: 1280px) {
                font-size: 60px;
            }
            @media (max-width: 991px) {
                font-size: 50px;
            }
            @media (max-width: 767px) {
                font-size: 43px;
            }
            a {
                color: $link_color;
                z-index: 1;
                position: relative;
            }
            .pxl-image {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(0,-50%);
                opacity: 0;
                @include transition(all 0.1s);
                transform: translate(-50%, -50%);
                transform-origin: left;
                width: max-content;
                z-index: -1;
                @media (max-width: 767px) {
                    display: none;
                }
            }
            &:hover {
                a {
                    -webkit-text-stroke: 1.2px $link_color;
                    color: transparent;
                }
                .pxl-image {
                    opacity: 1;
                }
            }
        }
    }
    &.style2 {
        .pxl--item {
            &:last-child {
                &:after {
                    display: none;
                }
            }
        }
    }
}

//pxl-portfolio-modern
.pxl-portfolio-modern1 {
    margin: 0 -22px;
    @media #{$max-lg} {
        margin: 0 -15px;
    }
    > div {
        padding: 0 22px;
        @media #{$max-lg} {
            padding: 0 15px;
        }
    }
    .pxl-portfolio--featuredRight {
        display: none;
        @media (max-width: 767px) {
            display: block;
            margin-bottom: 30px
        }
        a {
            position: relative !important;
        }
    }
    .pxl-portfolio--images {
        width: 66%;
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        @media (max-width: 767px) {
            display: none;
        }
        .pxl-images--inner {
            height: 100%;
            position: relative;
        }
    }
    .pxl-portfolio--content {
        display: flex;
        width: 100%;
        .pxl-portfolio--items {
            width: 60%;
            padding-right: 15px;
            z-index: 5;
            @media (max-width: 767px) {
                width: 100%;
                padding-right: 0;
            }
        }
    }
    .pxl-portfolio--item {
        margin-bottom: 86px;
        &:last-child {
            margin-bottom: 0;
        }
        &:active {
            .pxl-portfolio-min--inner {
                .pxl-portfolio--title {
                    color: #fff;
                    -webkit-text-stroke: unset;
                }
            }
        }
        &.active {
            .pxl-portfolio-min--inner {
                .pxl-portfolio--title {
                    color: #fff;
                    -webkit-text-stroke: unset;
                }
            }
        }
    }
    .pxl-content--inner {
        cursor: pointer;
        position: relative;
        a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
    .pxl-portfolio-min--inner {
        display: flex;
        align-items: end;
        @media (max-width: 880px) {
            display: inline-block;
        }
        .pxl-portfolio--title {
            font-family: Outfit;
            font-size: 80px;
            font-style: normal;
            font-weight: 500;
            letter-spacing: -3.2px;
            @include transition(all 0.35s ease);
            line-height: 1.01;
            -webkit-text-stroke: 1px #fff;
            color: transparent;
            @media (max-width: 1280px) {
                font-size: 70px;
            }
            @media (max-width: 1200px) {
                font-size: 60px;
            }
            @media (max-width: 880px) {
                font-size: 50px;
            }
            @media (max-width: 767px) {
                font-size: 45px;
            }
        }
    }
    .pxl-portfolio--featured {
        height: 100%;
        position: relative;
        z-index: 1;
        transform: scaleX(1);
        a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        &:not(.pxl-portfolio--first) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        &.non-active {
            z-index: 2;
        }
        &.active {
            z-index: 3;
            -webkit-animation-name: pxlSkewInDivider;
            animation-name:pxlSkewInDivider;
            -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
            -webkit-animation-duration:.4s;
            animation-duration:.4s;
            -webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);
            animation-timing-function:cubic-bezier(.4,0,.2,1);
            will-change:transform;
            -webkit-backface-visibility:hidden;
            backface-visibility:hidden;
        }
    }
    .pxl-portfolio--meta {
        flex-grow: 1;
        font-size: 14px;
        font-weight: 500;
        color: #444;
        overflow: hidden;
        .pxl-meta--inner {
            flex-wrap: nowrap;
            white-space: nowrap;
        }
    }
    .pxl-portfolio--holder {
        padding-right: 40px;
        position: relative;
        margin-bottom: 3px;
    }
}

.BlogBodyRow {
    height: 100vh;
    background-color: $link_color;
    overflow: hidden;
    #myCanvas {
        position: absolute;
        top: 0px;
        left: 0;
    }
}

//pxl-border-animate
.pxl-border-animate1 {
    &.default {
        .pxl-border-inner {
            border-top: 1px solid rgba(#000000, 0.149);
        }
    }
}

//pxl-process-box
.pxl-process-box1 {
    &.default {
        @include transition(all 0.3s);
        .pxl-process-inner {
            text-align: center;
            padding-bottom: 65px;
            @include transition(all 0.3s);
            .pxl-item-number {
                font-size: 18px;
                color: #fff;
                background-color: $link_color;
                padding: 13px 0;
                border-right: 1px solid rgba(#d9d9d9, 0.251);
                margin-right: -1px;
                @include transition(all 0.3s);
            }
            .pxl-item-content {
                padding: 42px 40px;
            }
            .pxl-item-title {
                font-size: 24px;
                color: $link_color;
                font-weight: 500;
                line-height: 1.4;
                @include ft_theme_default($ft_theme_default);
                margin-bottom: 22px;
                display: inline-block;
            }
            .pxl-item-desc {
                font-size: 16px;
                color: #666666;
                @media (max-width: 1400px) {
                    font-size: 15px;
                }
            }
            .pxl-item--img {
                padding: 0 14px;
                margin-top: 18px;
                .pxl-image {
                    background-color: #edefed;
                    clip-path: polygon(8% 0, 100% 0, 100% 89%, 92% 100%, 0 100%, 0 11%);
                    img {
                        mix-blend-mode: luminosity;
                        @include transition(all 0.3s ease-in-out);
                        transform-style: preserve-3d;
                    }
                }
            }
        }
        &.is-popular {
            .pxl-process-inner {
                .pxl-item-number {
                    background-color: $primary_color;
                }
                .pxl-item--img {
                    .pxl-image {
                        img {
                            mix-blend-mode: unset;
                            transform: scale(1.1);
                        }
                    }
                }
            }
        }
    }
}

//PXL Quote Custom
.pxl-quote-custom1 {
    &.default {
        .pxl-item-inner {
            display: inline-flex;
            align-items: center;
            .pxl-item-quote {
                background-color: $primary_color;
                padding: 88px 43px;
                clip-path: polygon(0% 0, 100% 0, 100% 73%, 45% 100%, 0 100%, 0 0%);
            }
        }
    }
    &.style2 {
        .pxl-item-inner {
            display: flex;
            align-items: start;
            .pxl-item-quote {
                background-color: #707070;
                padding: 67px 24.7px;
                margin-right: 20px;
                &:nth-child(2) {
                    padding: 40px 24.7px;
                    margin-right: 28px;
                }
                &:nth-child(3) {
                    padding: 25px 24.7px;
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}

.pxl-inner-click1 {
    .pxl-click-inner {
        display: flex;
        min-height: 597px;
        height: 60vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style-type: none;
        width: 100%;
        min-width: 100%;
        @media (max-width: 1550px) {
            min-height: 570px;
        }
        @media (max-width: 1400px) {
            min-height: 530px;
        }
        @media (max-width: 1024px) {
            display: block;
            min-height: unset;
            height: unset;
        }
        .pxl-item {
            cursor: pointer;
            flex: 0.163;
            position: relative;
            overflow: hidden;
            width: 100% !important;
            @include transition(all .35s ease);
            display: flex;
            border-left: 1px solid #edefed;
            @media (max-width: 1550px) {
                flex: 0.19;
            }
            @media (max-width: 1400px) {
                flex: 0.21;
            }
            @media (max-width: 1280px) {
                flex: 0.23;
            }
            @media (max-width: 1024px) {
                border-left: none;
                border-bottom: 1px solid #edefed;
                &:last-child {
                    border-bottom: none;
                }
            }
            @media (max-width: 676px) {
                display: block;
            }
            &:hover {
                .pxl-item-setion {
                    .pxl-item-default {
                        .pxl-item--img {
                            img {
                                transform: scale(1.1);
                            }
                        }
                    }
                }
            }
            .pxl-item-setion {
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                width: 100%;
                min-width: max-content;
                @include transition(all .35s ease);
                border-right: 1px solid #d9d9d9;
                opacity: 0;
                padding-left: 70px;
                @media (max-width: 1700px) {
                    min-width: unset;
                }
                @media (max-width: 1024px) {
                    position: relative;
                    opacity: 1;
                    padding-left: 0;
                }
                .pxl-item-default {
                    position: relative;
                    height: 100%;
                    @include transition(all .35s ease);
                    padding: 56px 30px 30px 55px;
                    display: flex;
                    align-items: center;
                    @media (max-width: 1650px) {
                        padding: 56px 30px 30px 30px;
                    }
                    @media (max-width: 1280px) {
                        display: block;
                        padding: 30px 15px;
                    }
                    .pxl-item--img {
                        max-width: 268px;
                        overflow: hidden;
                        height: max-content;
                        clip-path: polygon(13% 0, 100% 0, 100% 100%, 0% 100%, 0 100%, 0 7%);
                        @media (max-width: 1550px) {
                            max-width: 250px;
                        }
                        @media (max-width: 1400px) {
                            max-width: 220px;
                        }
                        @media (max-width: 1300px) {
                            max-width: 160px;
                        }
                        @media (max-width: 1280px) {
                            clip-path: unset;
                            height: 200px;
                            max-width: 100%;
                        }
                        img {
                            @include transition(all .35s ease);
                            transform: scale(1);
                        }
                    }
                    .pxl-item-content {
                        padding: 42px 30px 30px 56px;
                        max-width: 444px;
                        @media (max-width: 1650px) {
                            padding: 42px 30px 30px 30px;
                        }
                        @media (max-width: 1650px) {
                            padding: 42px 30px 30px 15px;
                        }
                        @media (max-width: 1400px) {
                            padding: 5px 30px 30px 15px;
                        }
                        @media (max-width: 1300px) {
                            padding: 5px 0px 0px 15px;
                        }
                        @media (max-width: 1280px) {
                            padding: 15px 0px 0px 0px;
                        }
                        .pxl-item--title {
                            font-size: 25px;
                            color: #000000;
                            font-weight: 500;
                            @include ft_theme_default($ft_theme_default);
                            line-height: 1.4;
                            max-width: 90%;
                            margin-bottom: 19px;
                            @media (max-width: 1280px) {
                                margin-bottom: 6px;
                            }
                            @media (max-width: 1199px) {
                                font-size: 20px;
                            }
                        }
                        .pxl-item--desc {
                            font-size: 16px;
                            color: #666666;
                            margin-bottom: 73px;
                            @media (max-width: 1650px) {
                                margin-bottom: 50px;
                            }
                            @media (max-width: 1550px) {
                                font-size: 15px;
                            }
                            @media (max-width: 1400px) {
                                margin-bottom: 25px;
                            }
                            @media (max-width: 1280px) {
                                margin-bottom: 15px;
                            }
                        }
                        .pxl-list-text {
                            .pxl-item--text {
                                font-size: 16px;
                                color: #000000;
                                position: relative;
                                margin-bottom: 7px;
                                @media (max-width: 1500px) {
                                    font-size: 15px;
                                }
                                &:last-child {
                                    margin-bottom: 0;
                                }
                                &:before {
                                    content: '';
                                    width: 4px;
                                    height: 4px;
                                    background-color: $primary_color;
                                    position: absolute;
                                    top: 50%;
                                    left: 0;
                                    transform: translate(0,-50%);
                                }
                            }
                        }
                    }
                }
            }
            .pxl-item-field {
                z-index: 1;
                position: relative;
                height: 100%;
                background-color: #191919;
                width: 71px;
                min-width: 71px;
                text-align: center;
                padding: 31px 0;
                z-index: 10;
                @include transition(all 0.3s);
                @media (max-width: 1199px) {
                    height: unset;
                }
                @media (max-width: 676px) {
                    width: 100%;
                    min-width: unset;
                    height: 71px;
                    padding: 0 15px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .pxl-item--number {
                    font-size: 20px;
                    color: #ffffff;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                }
                .pxl-title-field {
                    position: absolute;
                    bottom: 43px;
                    left: 0;
                    transform: rotate(-90deg);
                    font-size: 22px;
                    color: #ffffff;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    z-index: 1;
                    line-height: 64px;
                    width: 100%;
                    @media (max-width: 676px) {
                        position: relative;
                        transform: unset;
                        bottom: unset;
                        left: unset;
                        line-height: unset;
                        width: unset;
                    }
                }
            }
            &.active {
                flex: 2;
                .pxl-item-setion {
                    opacity: 1;
                    border-right: none;
                    .pxl-item-default {
                        z-index: 2;
                        min-width: min-content;
                    }
                }
                .pxl-item-field {
                    background-color: $primary_color;
                }
            }
        }
    }
}

.pxl-button-clip1 {
    &.style1 {
        .pxl-item-inner {
            a {
                .pxl-icon {
                    display: flex;
                    width: 145px;
                    height: 145px;
                    background-color: #dcdedc;
                    position: relative;
                    @include transition(all 0.3s);
                    clip-path: polygon(100% 0, 100% 92%, 82% 92%, 83% 28%, 12% 100%, 0 89%, 72% 15%, 8% 15%, 8% 0);
                    @media (max-width: 767px) {
                        width: 90px;
                        height: 90px;
                    }
                    &:before {
                        content: '';
                        width: 100%;
                        height: 0%;
                        position: absolute;
                        background-color: $primary_color;
                        bottom: 0;
                        left: 0;
                        @include transition(all 0.3s);
                    }
                }
                &:hover {
                    .pxl-icon {
                        &:before {
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
    &.style2 {
        .pxl-item-inner {
            a {
                .pxl-icon {
                    display: flex;
                    width: 180px;
                    height: 180px;
                    background-color: #fff;
                    position: relative;
                    @include transition(all 0.3s);
                    transform: rotate(-45deg);
                    clip-path: polygon(100% 0%, 100% 96%, 84% 96%, 84% 28%, 13% 100%, 0 88%, 72% 16%, 4% 17%, 4% 0%);
                    @media (max-width: 767px) {
                        width: 90px;
                        height: 90px;
                    }
                }
                &:hover {
                    .pxl-icon {
                        background-color: $primary_color;
                    }
                }
            }
        }
    }
}

//pxl-box-grid//
.pxl-box-grid1 {
    border-top: 1px solid rgba(#fff, 0.149);
    position: relative;
    overflow: hidden;
    .container {
        border-left: 1px solid rgba(#fff, 0.149);
        max-width: 1770px !important;
        @media (max-width: 1770px) {
            border-left: none;
        }
    }
    .pxl-grid-inner {
        overflow: hidden;
        position: relative;
    }
    .pxl-inner-change {
        position: absolute;
        overflow: hidden;
        bottom: -1px;
        width: 100%;
        @media (max-width: 767px) {
            bottom: unset;
            position: relative;
        }
        .pxl-item--content {
            display: none;
        }
        .bgr-change-wrapper {
            height: 438px;
            overflow: hidden;
            position: relative;
            @media (max-width: 480px) {
                height: 400px;
            }
            .bgr-change, .bgr-change.next {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                transition: 1s ease;
                transition: transform 0.6s ease, opacity 0.6s ease;
            }
            .bgr-change.next {
              transform: translateX(-100%);
              z-index: 1;
            }
            .bgr-change.slide-out {
              transform: translateX(100%);
              opacity: 0;
             
            }
        }
    }
    .pxl-grid-item {
        z-index: 2;
        background-size: 0%;
        position: relative;
        border-radius: 0;
        overflow: hidden;
        padding: 0;
        @include transition(all 0.3s);
        cursor: pointer;
        &:last-child {
            .pxl-item-box {
                border-right: none;
            }
        }
        &.active {
            .pxl-item-box {
                .pxl-inner-content {
                    background-color: #fff;
                    .pxl-item--title {
                        color: $link_color;
                    }
                    .pxl-item--number {
                        color: #666666;
                    }
                }
                .pxl-item--inner {
                    .pxl-item--content {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            }
        }
        .wrap-inner-content {
            width: 100%;
        }
        .pxl-item-box {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .pxl-inner-content {
                transition: .5s ease;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 20px;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                padding: 22px 48px 21px 49px;
                border-right: 1px solid rgba(#fff, 0.149);
                @include transition(all 0.3s);
                background-color: #191919;
                @media (max-width: 1280px) {
                    font-size: 18px;
                }
                .pxl-item--title {
                    color: #c2c2c2;
                    line-height: 1.1;
                    position: relative;
                    padding-left: 15px;
                    @include transition(all 0.3s);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    margin-right: 5px;
                    &:before {
                        content: '';
                        position: absolute;
                        width: 3px;
                        height: 14px;
                        background-color: $primary_color;
                        top: 50%;
                        left: 0;
                        transform: translate(0,-50%);
                    }
                }
                .pxl-item--number {
                    color: $primary_color;
                    font-weight: 400;
                    @include transition(all 0.3s);
                }
            }
            .pxl-item--inner {
                height: 512px;
                position: relative;
                @media (max-width: 1280px) {
                    height: 500px;
                }
                @media (max-width: 767px) {
                    height: unset;
                }
                .pxl-item--content {
                    color: #666666;
                    font-size: 16px;
                    background-color: #fff;
                    padding: 71px 55px 74px 40px;
                    clip-path: polygon(94% 0, 100% 15%, 100% 100%, 0 100%, 0 0);
                    transition: 0.3s ease;
                    opacity: 0;
                    transform: translateY(100%);
                    position: absolute;
                    bottom: 0;
                    @media (max-width: 1366px) {
                        padding: 30px;
                    }
                    @media (max-width: 1024px) {
                        clip-path: none;
                    }
                    @media (max-width: 767px) {
                        display: none;
                    }
                }
            }
        }
    }
}

.pxl-box-grid2 {
    .pxl-grid-inner {
        margin: 0;
    }
    .pxl-grid-item {
        padding: 0;
        border: 1px solid #d9d9d9;
        border-right: none;
        height: inherit;
        @media (max-width: 991px) {
            border: none;
        }
        &:first-child {
            border-left: none;
            .pxl-item--inner {
                padding: 49px 35px 73px 0;
                @media (max-width: 991px) {
                    padding: 50px 15px;
                }
            }
        }
        &:nth-child(4) {
            .pxl-item--inner {
                padding-right: 0;
            }
        }
    }
    .pxl-item--inner {
        padding: 49px 20px 73px 30px;
        @media (max-width: 991px) {
            border-bottom: 1px solid #d9d9d9;
            padding: 50px 15px;
        }
        &:hover {
            .pxl-item--icon {
                i {
                    animation: pxl_bounce 1s ease;
                }
                svg {
                    animation: pxl_bounce 1s ease;
                }
            }
        }
        .pxl-item--icon {
            text-align: right;
            color: $primary_color;
            i {
                font-size: 51px;
                @include transition(all 0.3s);
            }
            svg {
                height: 51px;
                width: auto;
                fill: $primary_color;
                @include transition(all 0.3s);
            }
        }
        .pxl-item--title {
            font-size: 22px;
            color: $link_color;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.2;
            margin-top: 50px;
            margin-bottom: 27px;
        }
        .pxl-item--content {
            font-size: 16px;
            color: #666666;
        }
    }
}

.pxl-box-grid3 {
    .pxl-grid-inner {
        overflow: hidden;
        position: relative;
        margin: 0;
        background-color: $link_color;
    }
    .pxl-inner-change {
        position: relative;
        padding-top: 25px;
        overflow: hidden;
        @media (max-width: 880px) {
            padding-top: 0;
        }
        .pxl-item-bg {
            height: 519px;
            overflow: hidden;
            position: relative;
            background-color: #fff;
            .bgr-change {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                transition: 1s ease;
            }
        }
        .pxl-item--content {
            position: absolute;
            top: 0;
            right: 85px;
            z-index: 2;
            background-color: #fff;
            max-width: 52.95%;
            padding: 75px 74px 0px 80px;
            border: 1px solid #d9d9d9;
            transition: 1s ease;
            transform-style: preserve-3d;
            @media (max-width: 1366px) {
                padding: 70px 50px 0px 50px;
            }
            @media (max-width: 1280px) {
                max-width: 70%;
                right: 45px;
            }
            @media (max-width: 880px) {
                top: 30px;
                max-width: 95%;
                right: 15px;
            }
            @media (max-width: 575px) {
                padding: 30px 15px 0px 15px;
            }
            @media (max-width: 480px) {
                max-width: 92%;
                right: 13px;
            }
            .pxl-box-top {
                display: flex;
                @media (max-width: 991px) {
                    display: block;
                }
                .pxl-content-title {
                    width: 32.6%;
                    @media (max-width: 991px) {
                        width: 100%;
                        margin-bottom: 10px;
                    }
                    .pxl-title-content {
                        font-size: 15px;
                        text-transform: uppercase;
                        color: #666666;
                        font-weight: 500;
                        letter-spacing: 0.7px;
                        @include ft_theme_default($ft_theme_default);
                        position: relative;
                        padding-left: 17px;
                        &:before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translate(0,-50%);
                            width: 4px;
                            height: 14px;
                            background-color: $primary_color;
                        }
                    }
                }
                .pxl-desc-btn {
                    width: 67.4%;
                    @media (max-width: 991px) {
                        width: 100%;
                    }
                    .pxl-item-desc {
                        font-size: 23px;
                        color: #000000;
                        line-height: 35px;
                        @include ft_theme_default($ft_theme_default);
                        max-width: 96%;
                        margin-bottom: 40px;
                        @media (max-width: 1366px) {
                            max-width: 100%;
                            font-size: 20px;
                        }
                        @media (max-width: 575px) {
                            margin-bottom: 20px;
                        }
                    }

                }
            }
            .pxl-item-btn {
                text-align: right;
                a {
                    font-size: 14px;
                    text-transform: uppercase;
                    color: $link_color;
                    font-weight: 500;
                    letter-spacing: 0.7px;
                    @include ft_theme_default($ft_theme_default);
                    display: inline-flex;
                    align-items: center;
                    border-bottom: 1px solid $link_color;
                    padding-bottom: 4px;
                    .pxl-btn-icon {
                        line-height: 1;
                    }
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                        }
                    }
                    svg {
                        height: 25px;
                        width: auto;
                        @include transition(all 0.3s);
                        path {
                            fill: $primary_color;
                        }
                    }
                }
            }
            .pxl-button-video {
                margin-top: -12px;
                margin-bottom: -22px;
                .pxl-btn-video {
                    width: 97px;
                    height: 97px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: $link_color;
                    color: #fff;
                    &:hover {
                        background-color: $primary_color;
                    }
                }
            }
        }
    }
    .pxl-grid-item {
        z-index: 2;
        background-size: 0%;
        position: relative;
        border-radius: 0;
        overflow: hidden;
        padding: 0;
        @include transition(all 0.3s);
        &:last-child {
            .pxl-item-box {
                border-right: none;
            }
        }
        &.active {
            .pxl-item-box {
                .pxl-inner-content {
                    
                }
            }
        }
        .wrap-inner-content {
            width: 100%;
        }
        .pxl-item-box {
            position: relative;
            border-right: 1px solid rgba(#edefed, 0.200);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            @media (max-width: 991px) {
                border-bottom: 1px solid rgba(#edefed, 0.200);
                border-right: none;
            }
            .pxl-inner-content {
                transition: .5s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                font-weight: 500;
                padding: 30px 20px 36px 20px;
                @include transition(all 0.3s);
                background-color: #191919;
                @media (max-width: 1200px) {
                    padding: 20px;
                    font-size: 16px;
                }
                .pxl-item--title {
                    color: #fff;
                    line-height: 1.1;
                    position: relative;
                    @include transition(all 0.3s);
                    display: flex;
                    align-items: center;
                    .pxl-item--icon {
                        line-height: 1;
                    }
                    svg {
                        height: 20px;
                        width: auto;
                        path {
                            fill: $primary_color;
                        }
                    }
                }
            }
            .pxl-item--content {
                display: none;
            }
        }
    }
}

//pxl-list-active
.pxl-list-active1 {
    .pxl-item-inner {
        display: flex;
        align-items: center;
        @media (max-width: 767px) {
            display: block;
        }
        .pxl-inner-change {
            position: relative;
            width: 50%;
            padding-right: 125px;
            @media (max-width: 1199px) {
                padding-right: 30px;
            }
            @media (max-width: 767px) {
                width: 100%;
            }
            @media (max-width: 480px) {
                padding-right: 0;
            }
            .bgr-change-wrapper {
                height: 669px;
                overflow: hidden;
                position: relative;
                clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 7%);
                @media (max-width: 480px) {
                    height: 500px;
                    clip-path: none;
                }
                .bgr-change, .bgr-change.next {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    transition: 1s ease;
                    transition: transform 0.6s ease, opacity 0.6s ease;
                }
                .bgr-change.next {
                  transform: translateX(-100%);
                  z-index: 1;
                }
                .bgr-change.slide-out {
                  transform: translateX(100%);
                  opacity: 0;
                 
                }
            }
            .pxl-item-img-content {
                position: absolute;
                bottom: 38px;
                right: 0;
                max-width: 382px;
                transition: transform 0.4s ease, opacity 0.4s ease;
                @media (max-width: 480px) {
                    max-width: 300px;
                    bottom: 5px;
                }
                .pxl-item-meta {
                    padding: 53px 42px 45px 52px;
                    background-color: $link_color;
                    @media (max-width: 1280px) {
                        padding: 30px;
                    }
                    .pxl-meta--title {
                        font-size: 25px;
                        color: #fff;
                        font-weight: 500;
                        @include ft_theme_default($ft_theme_default);
                        line-height: 1.38;
                        margin-bottom: 21px;
                        margin-left: -3px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 3;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        @media (max-width: 480px) {
                            font-size: 22px;
                        }
                    }
                    .pxl-meta--desc {
                        font-size: 16px;
                        color: #c2c2c2;
                        margin-bottom: 116px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 4;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        @media (max-width: 1199px) {
                            margin-bottom: 70px;
                        }
                    }
                    .pxl-meta-link {
                        text-align: right;
                        a {
                            &:hover {
                                svg {
                                    transform: rotate(45deg);
                                }
                            }
                            svg {
                                height: 42px;
                                width: auto;
                                transition: all 0.3s;
                                transform: rotate(0deg);
                                path {
                                    fill: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .pxl-content-meta {
        width: 50%;
        padding-left: 94px;
        @media (max-width: 1280px) {
            padding-left: 30px;
        }
        @media (max-width: 767px) {
            width: 100%;
            padding-left: 0;
            padding-top: 40px;
        }
        .pxl-item-heading {
            font-size: 40px;
            font-weight: 500;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.25;
            max-width: 87%;
            margin-bottom: 25px;
            @media (max-width: 1200px) {
                max-width: 100%;
            }
            @media (max-width: 880px) {
                font-size: 35px;
            }
            @media (max-width: 767px) {
                margin-bottom: 20px;
            }
        }
        .pxl-item-desc {
            margin-bottom: 54px;
            @media (max-width: 767px) {
                margin-bottom: 30px;
            }
        }
    }
    .pxl-list-inner {
        border-bottom: 1px solid #d9d9d9;
        .pxl-item {
            border: 1px solid #d9d9d9;
            border-bottom: none;
            padding: 16px 38px 16px 27px;
            @include transition(all 300ms linear 0ms);
            position: relative;
            z-index: 2;
            background-size: 0%;
            cursor: pointer;
            @media (max-width: 767px) {
                padding: 15px 10px;
            }
            &.active {
                border-color: $primary_color;
                &:before {
                    opacity: 1;
                }
                .pxl-item-content {
                    &:before {
                        opacity: 1;
                    }
                    .pxl-item--title {
                        transform: translateX(-100%);
                        left: 100%;
                        color: #fff;
                    }
                }
            }
            &:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: $primary_color;
                z-index: -1;
                top: 0;
                left: 0;
                opacity: 0;
                @include transition(all 300ms linear 0ms);
            }
            a {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
            .pxl-item-img-content {
                display: none;
            }
            .pxl-item-content {
                position: relative;
                @include transition(all 300ms linear 0ms);
                &:before {
                    content: '';
                    position: absolute;
                    width: 5px;
                    height: 5px;
                    background-color: #fff;
                    top: 50%;
                    left: 0;
                    transform: translate(0,-50%);
                    @include transition(all 300ms linear 0ms);
                    opacity: 0;
                }
                .pxl-item--title {
                    font-size: 20px;
                    font-weight: 500;
                    @include ft_theme_default($ft_theme_default);
                    color: $link_color;
                    line-height: 1.2;
                    display: inline-block;
                    @include transition(all 300ms linear 0ms);
                    position: relative;
                    left: 0;
                    transform: translateX(0);
                    @media (max-width: 1280px) {
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

//oxl chart
.pxl-chart-2 {
    display: inline-block;
    .chart-bar {
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    .lengend {
        margin-top: 28px;
        .list-content {
            display: flex;
            align-items: center;
            column-gap: 13px;
            .color {
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 1000px;
            }
            .title {
                font-size: 15px;
                @extend .ft-theme-default;
                line-height: 28px;
                color: #fff;
            }
            + .list-content {
                margin-top: 4px;
            }
        }
    }
}
//pxl-award
.pxl-award1 {
    .pxl-award-inner {
        background-color: $link_color;
        padding: 32px 0 27px 27px;
        max-width: 261px;
        .pxl-item-title {
            font-size: 16px;
            text-transform: uppercase;
            color: #ffffff;
            font-weight: 500;
            max-width: 90%;
            margin-bottom: 62px;
        }
        .pxl-content-section {
            text-align: right;
            .pxl-item-content {
                display: inline-block;
                text-align: center;
                width: 123px;
            }
            .pxl-image {
                margin-bottom: 11px;
                img {
                    animation: pxl_spin_right 10s linear infinite;
                }
            }
            .pxl-item-text {
                text-transform: uppercase;
                color: #ffffff;
                font-weight: 600;
                line-height: 1;
                max-width: 50%;
                margin: 0 auto;
                @include ft_theme_default($ft_theme_default);
                font-size: 13px;
                letter-spacing: 0.9px;
                border-bottom: 1px solid #fff;
                padding-bottom: 2px;
                margin-bottom: 3px;
            }
            .pxl-item-sub {
                text-transform: uppercase;
                color: #ffffff;
                line-height: 1;
                @include ft_theme_default($ft_theme_default);
                font-size: 10px;
                letter-spacing: 0.2px;
                font-weight: 500;
            }
        }
    }
}

//pxl-gallery-carousel
.pxl-gallery-carousel1 {
    .pxl-carousel-inner {
        border-top: 1px solid #d9d9d9;
    }
    .pxl-swiper-container {
        padding: 0 74px !important;
        margin: 0;
        @media (max-width: 991px) {
            padding: 0 !important;
        }
    }
    .pxl-swiper-slide {
        padding: 0;
        height: auto;
        background-color: #edefed;
        border-right: 1px solid #d9d9d9;
    }
    .pxl-swiper-arrow-wrap {
        margin-top: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        justify-content: space-between;
        align-items: inherit;
        height: 99.9%;
        @media (max-width: 991px) {
            display: none;
        }
        .pxl-swiper-arrow {
            background-color: $primary_color;
            padding: 50px 27px;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            svg {
                height: 20px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
            .hover {
                overflow: hidden;
                display: inline-flex;
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                left: unset;
                right: 0;
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
    }
    .pxl-item--inner {
        padding: 41px 39px 67px 62px;
        @include transition(all 0.3s);
        @media (max-width: 991px) {
            padding: 30px;
        }
        @media (max-width: 767px) {
            padding: 30px 15px;
        }
        &:hover {
            .pxl-item--holder {
                .pxl-item--img {
                    a {
                        &:before {
                            opacity: 0.329;
                        }
                        img {
                            mix-blend-mode: luminosity;
                        }
                        .pxl-gallery-icon {
                            opacity: 1;
                            transform: scaleX(1);
                        }
                    }
                }
            }
        }
        .pxl-item--holder {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 58px;
            .pxl-item--number {
                font-size: 35px;
                color: #0d0d0d;
                font-weight: 500;
                line-height: 1;
                @include ft_theme_default($ft_theme_default);
            }
            .pxl-item--img {
                a {
                    position: relative;
                    display: inline-block;
                    background-color: #edefed;
                    @include transition(all 0.3s);
                    overflow: hidden;
                    &:before {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background-color: #000;
                        top: 0;
                        left: 0;
                        @include transition(all 0.3s);
                        z-index: 1;
                        opacity: 0;
                    }
                    &:after {
                        content: '';
                        border-style: solid;
                        border-color: transparent transparent transparent $link_color;
                        border-width: 19px;
                        position: absolute;
                        top: -19px;
                        left: -19px;
                        opacity: 1;
                        transform: translateY(0) rotate(226deg);
                        @include transition(all 250ms linear 0ms);
                    }
                    .pxl-gallery-icon {
                        width: 51px;
                        height: 51px;
                        background-color: $primary_color;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 2;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        transform: scale(0);
                        transform-style: preserve-3d;
                        @include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
                        opacity: 0;
                        transform-origin: center;
                        svg {
                            height: 19px;
                            width: auto;
                            fill: #fff;
                        }
                    }
                    img {
                        @include transition(all 0.3s);
                    }
                }
            }
        }
        .pxl-item--desc {
            font-size: 16px;
            color: #666666;
            max-width: 88%;
        }
    }
}

//pxl-box-link
.pxl-box-link1 {
    border-left: 1px solid #d9d9d9;
    .pxl-grid-inner {
        margin: 0;
    }
    .pxl-grid-item {
        padding: 0;
        border-top: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
    }
    .pxl-item--inner {
        text-align: center;
        .pxl-item--title {
            font-size: 16px;
            letter-spacing: 0.9px;
            font-weight: 500;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
            text-transform: uppercase;
            padding: 31px 0;
        }
        .pxl-item--meta {
            border-top: 1px solid #d9d9d9;
            padding: 41px 43px 50px 43px;
            .pxl-item--desc {
                font-size: 16px;
                color: #666666;
                margin-bottom: 44px;
            }
            .pxl-item-btn {
                .pxl-btn-dow {
                    display: inline-flex;
                    width: 69px;
                    height: 69px;
                    align-items: center;
                    justify-content: center;
                    background-color: $primary_color;
                    &:hover {
                        background-color: $link_color;
                    }
                    svg {
                        height: 23px;
                        width: auto;
                        path {
                            stroke: #fff;
                        }
                    }
                }
            }
        }
    }
}

//pxl-location
.pxl-location1 {
    .pxl-location-inner {
        .pxl-item-location {
            width: 100%;
            overflow: hidden;
            .pxl-list {
                padding-right: 30px;
                @media (max-width: 880px) {
                    padding-right: 0;
                }
            }
            .pxl-section-one {
                padding-right: 30px;
                @media (max-width: 880px) {
                    padding-right: 0;
                }
            }
            .pxl-item--img {
                clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%, 0 12%);
                @media (max-width: 767px) {
                    clip-path: none;
                }
            }
            .pxl-item-title {
                font-size: 20px;
                text-transform: uppercase;
                color: $link_color;
                font-weight: 500;
                margin-top: 32px;
                margin-bottom: 5px;
                line-height: 1.2;
                @include ft_theme_default($ft_theme_default);
                @media (max-width: 1024px) {
                    font-size: 18px;
                }
            }
            .pxl-item-text {
                @media (max-width: 1199px) {
                    font-size: 15px;
                }
            }
            .pxl-list {
                position: relative;
                border-top: 1px solid #d9d9d9;
                margin-top: 24px;
                padding-top: 22px;
                .pxl-item-boder {
                    position: absolute;
                    width: 86px;
                    height: 3px;
                    background-color: $primary_color;
                    top: -3px;
                    right: 0;
                }
                .pxl--item {
                    margin-bottom: 10px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    .pxl-item-list {
                        font-size: 16px;
                        color: #666666;
                        position: relative;
                        padding-left: 20px;
                        @media (max-width: 1199px) {
                            font-size: 15px;
                        }
                        &:before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translate(0,-50%);
                            background-color: $primary_color;
                            width: 5px;
                            height: 5px;
                        }
                    }
                }
            }
        }
    }
    &.style2 {
        .pxl-location-inner {
            .pxl-item-location {
                order: 2;
                .pxl-item--img {
                    clip-path: polygon(90% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
                    @media (max-width: 767px) {
                        clip-path: none;
                    }
                }
                .pxl-list {
                    padding-left: 30px;
                    padding-right: 0;
                    @media (max-width: 880px) {
                        padding-left: 0;
                    }
                }
                .pxl-section-one {
                    padding-left: 30px;
                    padding-right: 0;
                    @media (max-width: 880px) {
                        padding-left: 0;
                    }
                }
            }
        }
    }
}

//pxl-number-carousel
.pxl-number-carousel1 {
    .pxl-swiper-slide {
        height: auto;
        padding: 0 17.5px;
    }
    .pxl-swiper-container {
        margin: 0 -17.5px;
    }
    .pxl-item--inner {
        background-color: #fff;
        position: relative;
        height: 100%;
        align-content: end;
        clip-path: polygon(8.8% 0, 100% 0, 100% 100%, 0 100%, 0 16%);
        @media (max-width: 767px) {
            clip-path: none;
        }
        &:before {
            content: '';
            position: absolute;
            width: 1px;
            height: 100%;
            right: 103px;
            top: 0;
            background-color: #d9d9d9;
        }
        .pxl--title-number {
            font-size: 55px;
            color: #fff;
            @include ft_theme_default($ft_theme_default);
            line-height: 0.6;
            border-bottom: 1px solid #d9d9d9;
            text-align: right;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            span {
                width: 104px;
                display: inline-flex;
                padding-top: 44px;
                background-color: $primary_color;
            }
        }
        .pxl-item--desc {
            font-size: 20px;
            color: $link_color;
            padding: 143px 85px 54px 44px;
            max-width: 82%;
            line-height: 1.51;
            @media (max-width: 880px) {
                padding: 100px 50px 54px 20px;
                font-size: 18px;
            }
        }
    }
}
.pxl-number-carousel2 {
    .pxl-swiper-slide {
        padding: 0;
        border-left: 1px solid #d9d9d9;
        &.swiper-slide-active {
            border-left: none;
        }
    }
    .pxl-swiper-container {
        margin: 0;
    }
    .pxl-carousel-inner {
        border: 1px solid #d9d9d9;
    }
    .pxl-item--inner {
        padding: 59px 44px 52px 44px;
        background-color: #fff;
        @media (max-width: 1366px) {
            padding: 45px 30px;
        }
        @media (max-width: 676px) {
            padding: 45px 15px;
        }
        .pxl-inner-icon {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row;
            gap: 20px;
            margin-bottom: 62px;
            .pxl-item--icon {
                background-color: $primary_color;
                width: 84px;
                height: 84px;
                display: flex;
                align-items: center;
                justify-content: center;
                clip-path: polygon(67px 0, 100% 18px, 100% 100%, 0 100%, 0 0);
                svg {
                    height: 42px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
            }
            .pxl--title-number {
                font-size: 16px;
                color: #666;
            }
        }
        .pxl-item--title {
            font-size: 25px;
            font-weight: 500;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
            border-bottom: 1px solid #d9d9d9;
            position: relative;
            padding-bottom: 22px;
            margin-bottom: 27px;
            @media (max-width: 1366px) {
                font-size: 20px;
                line-height: 1.2;
            }
            &:before {
                content: '';
                position: absolute;
                bottom: -1px;
                right: 0;
                width: 70px;
                height: 3px;
                background-color: $primary_color;
            }
        }
        .pxl-item--desc {
            font-size: 16px;
            color: #666;
            max-width: 97%;
            @media (max-width: 1366px) {
                max-width: 100%;
            }
        }
    }
}

.pxl-number-carousel3 {
    .pxl-swiper-slide {
        padding: 0;
        border-left: 1px solid #3b3b3b;
        &.swiper-slide-active {
            border-left: none;
        }
    }
    .pxl-swiper-container {
        margin: 0;
    }
    .pxl-item--inner {
        background-color: #191919;
        @include transition(all 0.3s);
        position: relative;
        &:hover {
            .pxl-meta-button {
                .button-meta {
                    background-color: $primary_color;
                    border-color: $primary_color;
                    .pxl-btn-icon {
                        inset-inline-start: calc(100% - 4.75em);
                    }
                }
            }
            &:before {
                background-color: #fff;
            }
        }
        &:before {
            content: '';
            width: 141px;
            height: 154px;
            position: absolute;
            width: 141px;
            height: 154px;
            top: 0;
            left: 0;
            background-color: #303030;
            @include transition(all 0.3s);
        }
        .pxl-item-content {
            padding: 71px 49px 44px 49px;
            @media (max-width: 767px) {
                padding: 50px 30px 40px 30px;
            }
            .pxl-inner-icon {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: row;
                gap: 20px;
                margin-bottom: 74px;
                .pxl-item--icon {
                    background-color: $primary_color;
                    width: 114px;
                    height: 114px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    clip-path: polygon(89px 0, 100% 24px, 100% 100%, 0 100%, 0 0);
                    svg {
                        height: 48px;
                        width: auto;
                        path {
                            fill: #fff;
                        }
                    }
                    .pxl-svg-steel5 {
                        fill: none;
                        stroke: #fff;
                    }
                }
                .pxl--title-number {
                    font-size: 16px;
                    color: #c2c2c2;
                }
            }
            .pxl-item--title {
                font-size: 25px;
                color: #ffffff;
                font-weight: 500;
                line-height: 1.3;
                @include ft_theme_default($ft_theme_default);
            }
            .pxl-item--desc {
                font-size: 16px;
                color: #c2c2c2;
                margin-top: 17px;
            }
        }
        .pxl-meta-button {
            .button-meta {
                color: #fff;
                font-size: 14px;
                letter-spacing: 0.7px;
                text-transform: uppercase;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                display: flex;
                align-items: center;
                line-height: 75px;
                padding: 0 49px;
                border-top: 1px solid #3b3b3b;
                gap: 15px;
                flex-direction: row;
                position: relative;
                @media (max-width: 767px) {
                    padding: 0 30px;
                }
                .pxl-btn-icon {
                    line-height: 1;
                    @include transition(all 0.3s);
                    inset-block-start: 50%;
                    inset-inline-start: 10.4em;
                    transform: translateY(-50%);
                    position: absolute;
                    svg {
                        height: 17px;
                        width: auto;
                        path {
                            fill: #fff;
                        }
                    }
                }
            }
        }
    }
}

.pxl-social1 {
    &.icon-style1 {
        display: inline-flex;
        align-items: center;
        position: relative;
        @include transition(all 0.3s ease-in-out);
        &:hover {
            .pxl-social-inner {
                transform: scaleX(1);
                a {
                    opacity: 1;
                    transform: translateX(0px);
                    transition-delay: 0s;
                    &:nth-child(2) {
                        transition-delay: .1s;
                    }
                    &:nth-child(3) {
                        transition-delay: .18s;
                    }
                    &:nth-child(4) {
                        transition-delay: .26s;
                    }
                }
            }
        }
        .pxl-social--button {
            font-size: 16px;
            color: #fff;
            cursor: pointer;
            position: relative;
            z-index: 2;
            width: 53px;
            height: 53px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $link_color;
            min-width: 53px;
            @media (max-width: 1199px) {
                width: 45px;
                min-width: 45px;
                height: 45px;
            }
        }
        .pxl-social-inner {
            display: flex;
            align-items: center;
            @include transition(all 0.3s);
            position: absolute;
            left: 100%;
            top: 0;
            padding-left: 10px;
            transform: scaleX(0);
            transform-origin: left;
            a {
                opacity: 0;
                margin-right: 10px;
                font-size: 16px;
                transform: translateX(-5px);
                @include transition(all 0.3s);
                width: 53px;
                min-width: 53px;
                height: 53px;
                background-color: $link_color;
                color: #3d3d3d;
                display: flex;
                align-items: center;
                justify-content: center;
                @media (max-width: 1199px) {
                    width: 45px;
                    min-width: 45px;
                    height: 45px;
                }
                i {
                    @include transition(all 0.3s);
                }
                &:hover {
                    color: #fff;
                }
            }
        }
    }
    &.icon-style2 {
        display: inline-flex;
        align-items: center;
        position: relative;
        @include transition(all 0.3s ease-in-out);
        &:hover {
            .pxl-social-inner {
                transform: scaleX(1);
                a {
                    opacity: 1;
                    transform: translateX(0px);
                }
            }
        }
        .pxl-social--button {
            font-size: 16px;
            color: #fff;
            cursor: pointer;
            position: relative;
            z-index: 2;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $primary_color;
            min-width: 38px;
            &:before {
                content: '';
                position: absolute;
                width: 1px;
                height: 13px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                background-color: #fff;
            }
            &:after {
                content: '';
                position: absolute;
                width: 13px;
                height: 1px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                background-color: #fff;
            }
        }
        .pxl-social-inner {
            display: flex;
            align-items: center;
            @include transition(all 0.3s);
            position: absolute;
            left: 100%;
            top: 0;
            padding-left: 10px;
            transform: scaleX(0);
            transform-origin: left;
            a {
                opacity: 0;
                margin-right: 10px;
                font-size: 16px;
                transform: translateX(-5px);
                @include transition(all 0.3s);
                width: 38px;
                min-width: 38px;
                height: 38px;
                background-color: $link_color;
                color: #3d3d3d;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                    @include transition(all 0.3s);
                }
                &:hover {
                    background-color: $primary_color;
                    color: #fff;
                }
            }
        }
    }
}

//pxl-meta-box
.pxl-meta-box1 {
    .pxl-meta-inner {
        background-color: #fff;
        .pxl-item-desc {
            font-size: 22px;
            font-weight: 500;
            color: $link_color;
            border-bottom: 1px solid #d9d9d9;
            padding: 64px 70px 66px 71px;
            line-height: 1.7;
            margin-bottom: 34px;
            @media (max-width: 575px) {
                padding: 50px;
                font-size: 20px;
            }
            @media (max-width: 480px) {
                padding: 50px 20px;
                font-size: 18px;
            }
            span {
                max-width: 93%;
                display: block;
                @media (max-width: 575px) {
                    width: 100%;
                }
            }
        }
        .pxl-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 72px 42px 78px;
            @media (max-width: 575px) {
                padding: 0 50px 40px 50px;
            }
            @media (max-width: 480px) {
                padding: 0 20px 40px 20px;
                display: block;
            }
            .pxl-content-section {
                display: flex;
                align-items: center;
                .pxl-item-text {
                    font-size: 20px;
                    font-weight: 500;
                    color: $link_color;
                    @include ft_theme_default($ft_theme_default);
                }
                .pxl-icon {
                    display: flex;
                    align-items: center;
                    padding-top: 5px;
                    span {
                        background-color: $primary_color;
                        padding: 24px 12px;
                        clip-path: polygon(100% 0, 100% 74%, 46% 100%, 0 100%, 0 0);
                    }
                }
            }
            .pxl-meta-button {
                @media (max-width: 480px) {
                    margin-top: 20px;
                }
                .pxl-button-link {
                    line-height: 1;
                    display: flex;
                    align-items: center;
                    padding-top: 10px;
                    @media (max-width: 480px) {
                        display: inline-flex;
                    }
                    &:hover {
                        svg {
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                    svg {
                        height: 30px;
                        width: auto;
                        path {
                            @include transition(all 0.3s);
                        }
                    }
                }
            }
        }
    }
}

.pxl-meta-box2 {
    .pxl-meta-inner {
        padding: 35px;
        padding-bottom: 27px;
        border: 1px solid #d9d9d9;
        @include transition(all 0.3s);
        &:hover {
            .pxl-item--img {
                img {
                    @include transform(scale(1.1));
                }
            }
        }
        .pxl-item--img {
            position: relative;
            clip-path: polygon(94% 0, 100% 6%, 100% 100%, 0 100%, 0 0);
            img {
                @include transform(scale(1.01));
                @include transition(all 0.3s);
            }
            .pxl-social {
                display: inline-flex;
                align-items: center;
                @include transition(all 0.3s ease-in-out);
                position: absolute;
                bottom: 15px;
                right: 18px;
                &:hover {
                    .pxl-social-inner {
                        transform: scaleY(1);
                        a {
                            opacity: 1;
                            transform: translateY(0px);
                            transition-delay: .26s;
                            &:nth-child(2) {
                                transition-delay: .18s;
                            }
                            &:nth-child(3) {
                                transition-delay: .1s;
                            }
                            &:nth-child(4) {
                                transition-delay: 0s;
                            }
                        }
                    }
                }
                .pxl-social--button {
                    font-size: 14px;
                    color: #fff;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                    width: 53px;
                    height: 53px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: $primary_color;
                    min-width: 53px;
                    @media (max-width: 1199px) {
                        width: 45px;
                        min-width: 45px;
                        height: 45px;
                    }
                }
                .pxl-social-inner {
                    display: inline-block;
                    @include transition(all 0.3s);
                    position: absolute;
                    left: 0;
                    bottom: 100%;
                    transform: scaleY(0);
                    transform-origin: bottom;
                    a {
                        opacity: 0;
                        margin-bottom: 3px;
                        font-size: 16px;
                        transform: translateY(5px);
                        @include transition(all 0.3s);
                        width: 53px;
                        min-width: 53px;
                        height: 53px;
                        background-color: $link_color;
                        color: #3d3d3d;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        @media (max-width: 1199px) {
                            width: 45px;
                            min-width: 45px;
                            height: 45px;
                        }
                        i {
                            @include transition(all 0.3s);
                        }
                        &:hover {
                            i {
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
        .pxl-content-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 29px;
            margin-left: -6px;
            margin-right: -2px;
            .pxl-item-content {
                .pxl-item-text {
                    font-size: 20px;
                    font-weight: 500;
                    color: $link_color;
                    @include ft_theme_default($ft_theme_default);
                    line-height: 1.2;
                    margin-bottom: 3px;
                }
            }
            .pxl-meta-button {
                .pxl-button-link {
                    padding-top: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &:hover {
                        svg {
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                    svg {
                        height: 22px;
                        width: auto;
                        path {
                            @include transition(all 0.3s);
                        }
                    }
                }
            }
        }
    }
}

.pxl-meta-box3 {
    .pxl-meta-inner {
        position: relative;
        @include transition(all 0.3s);
        overflow: hidden;
        &:hover {
            .pxl-item--img {
                img {
                    transform: scale(1.1);
                }
            }
        }
        .pxl-item--img {
            img {
                transform: scale(1);
                @include transition(all 0.3s);
            }
        }
        .pxl-sub-title {
            font-size: 14px;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            color: #ffffff;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            display: flex;
            align-items: center;
            position: absolute;
            top: 25px;
            left: 36px;
            z-index: 2;
            .pxl-border {
                width: 3px;
                height: 11px;
                background-color: $primary_color;
                display: flex;
            }
        }
        .pxl-content-section {
            background-color: $link_color;
            position: absolute;
            bottom: 0;
            left: 0;
            max-width: 80%;
            @media (max-width: 1280px) {
                max-width: 90%;
            }
            @media (max-width: 1024px) {
                max-width: 98%;
            }
            .pxl-meta-button {
                text-align: right;
                margin-top: -40px;
                .pxl-button-link {
                    width: 92px;
                    height: 80px;
                    background-color: $link_color;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding-top: 6px;
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                            path {
                                fill: $primary_color;
                            }
                        }
                    }
                    svg {
                        height: 35px;
                        width: auto;
                        @include transition(all 0.3s);
                        path {
                            fill: #fff;
                            @include transition(all 0.3s);
                        }
                    }
                }
            }
            .pxl-item-content {
                border-bottom: 1px solid rgba(#fff, 0.149);
                padding: 2px 30px 0px 47px;
                @media (max-width: 1024px) {
                    padding: 0px 30px;
                }
            }
            .pxl-item-text {
                font-size: 26px;
                color: #ffffff;
                font-weight: 500;
                line-height: 1.3;
                @include ft_theme_default($ft_theme_default);
                position: relative;
                padding-bottom: 21px;
                display: inline-block;
                @media (max-width: 880px) {
                    font-size: 22px;
                }
                &:hover {
                    color: $primary_color;
                }
                .pxl-border-bottom {
                    position: absolute;
                    bottom:-1px;
                    left: 0;
                    width: 86px;
                    height: 3px;
                    background-color: $primary_color;
                    @media (max-width: 359px) {
                        display: none;
                    }
                }
            }
            .pxl-item-desc {
                padding: 71px 30px 44px 46px;
                color: #c2c2c2;
                @media (max-width: 1024px) {
                    padding: 50px 30px 44px 30px;
                }
                @media (max-width: 880px) {
                    padding: 20px;
                }
                @media (max-width: 359px) {
                    display: none;
                }
            }
        }
    }
}

//pxl-fillter-grid
.pxl-fillter-grid1 {
    &.default {
        .pxl-grid-filter {
            &.style-3 {
                font-size: 16px;
                letter-spacing: 0.8px;
                text-transform: uppercase;
                font-weight: 500;
                color: $link_color;
                @include ft_theme_default($ft_theme_default);
                margin-bottom: 71px;
                @media (max-width: 1199px) {
                    margin-bottom: 50px;
                }
                @media (max-width: 880px) {
                    font-size: 14px;
                }
                @media (max-width: 767px) {
                    display: block;
                }
                .pxl--filter-inner {
                    @media (max-width: 767px) {
                        display: block;
                    }
                }
                .filter-item {
                    position: relative;
                    padding: 0 14px;
                    margin: 0 11px;
                    @media (max-width: 991px) {
                        margin: 0;
                    }
                    @media (max-width: 767px) {
                        display: inline-block;
                        padding: 10px;
                        width: 100%;
                        &:before {
                            display: none;
                        }
                    }
                    &:before {
                        content: '';
                        width: 3px;
                        height: 11px;
                        position: absolute;
                        top: 50%;
                        left: 0;
                        background-color: $primary_color;
                        transform: translate(0,-50%);
                        @include transition(all 0.3s);
                        opacity: 0;
                    }
                    &:hover {
                        &:before {
                            opacity: 1;
                        }
                    }
                    &.active {
                        color: $link_color;
                        @media (max-width: 767px) {
                            color: #fff;
                        }
                        &:before {
                            opacity: 1;
                        }
                    }
                }
            }
        }
        .pxl-item--inner {
            @include transition(all 0.3s);
            &:hover {
                .pxl-item--image {
                    &:before {
                        opacity: 0.769;
                    }
                    .lightbox {
                        opacity: 1;
                    }
                }
            }
            .pxl-item--image {
                position: relative;
                &:before {
                    content: '';
                    position: absolute;
                    opacity: 0;
                    background-color: $link_color;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    @include transition(all 0.3s);
                }
                img {
                    @include transition(all 0.3s);
                }
                .lightbox {
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: $primary_color;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    opacity: 0;
                    @media (max-width: 767px) {
                        width: 50px;
                        height: 50px;
                    }
                }
            }
        }
    }
}

//pxl-number-grid
.pxl-number-grid1 {
    .pxl-grid-inner {
        margin: 0;
    }
    .pxl-grid-item {
        border-left: 1px solid #d9d9d9;
        padding: 0;
        &:first-child {
            border-left: none;
            
            .pxl-item--inner {
                .pxl-item-icon {
                    display: none;
                }
            }
        }
        &:nth-child(2n+1) {
            @media (max-width: 991px) {
                border-left: none;
                .pxl-item--inner {
                    .pxl-item-icon {
                        display: none;
                    }
                }   
            }
        }
        @media (max-width: 575px) {
            border-left: none;
            border-bottom: 1px solid #d9d9d9;
            .pxl-item--inner {
                .pxl-item-icon {
                    display: none;
                }
            }   
        }
        @for $i from 0 through 10 {
          &:nth-child(#{$i + 1}) {
            .pxl-item--inner {
                .pxl-item-icon {
                    animation-delay: (#{$i/5})+s;
                }
            }
          }
        }
    }
    .pxl-item--inner {
        text-align: center;
        position: relative;
        padding: 46px 40px 48px 40px;
        @media (max-width: 1280px) {
            padding: 40px 20px;
        }
        @media (max-width: 1024px) {
            padding: 40px 15px;
        }
        .pxl-item-icon {
            position: absolute;
            left: -12px;
            top: 69px;
            svg {
                height: 22px;
                width: auto;
                path {
                    fill: $link_color;
                }
            }
        }
        .pxl-item--number {
            font-size: 75px;
            color: $primary_color;
            @include ft_theme_default($ft_theme_default);
            line-height: 1;
            margin-bottom: 24px;
            @media (max-width: 1024px) {
                margin-bottom: 15px;
                font-size: 65px;
            }
        }
        .pxl-item--title {
            font-size: 26px;
            color: #111111;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.2;
            margin-bottom: 31px;
            @media (max-width: 1024px) {
                margin-bottom: 15px;
                font-size: 22px;
            }
        }
        .pxl-item--content {

        }
    }
}

.pxl-number-grid2 {
    .pxl-grid-inner {
        margin: 0 -27.5px;
    }
    .pxl-grid-item {
        padding: 0 27.5px;
        &:first-child {
            border-left: none;
            
            .pxl-item--inner {
                .pxl-item-icon {
                    display: none;
                }
            }
        }
        &:nth-child(2n+1) {
            @media (max-width: 575px) {
                border-left: none;
                .pxl-item--inner {
                    .pxl-item-icon {
                        display: none;
                    }
                }   
            }
        }
        @media (max-width: 767px) {
            border-left: none;
            .pxl-item--inner {
                border-bottom: 1px solid #d9d9d9;
                .pxl-item-icon {
                    display: none;
                }
            }   
        }
        @for $i from 0 through 10 {
          &:nth-child(#{$i + 1}) {
            .pxl-item--inner {
                .pxl-item-icon {
                    animation-delay: (#{$i/5})+s;
                }
            }
          }
        }
    }
    .pxl-item--inner {
        text-align: center;
        position: relative;
        padding: 15px;
        background-color: $link_color;
        .pxl-item-icon {
            position: absolute;
            left: -35px;
            top: 12px;
            svg {
                height: 14px;
                width: auto;
                path {
                    fill: $link_color;
                }
            }
        }
        .pxl-item--title {
            font-size: 16px;
            color: #ffffff;
            font-weight: 500;
            line-height: 1.2;
        }
        .pxl-item--content {

        }
    }
}


.pxl-number-grid3 {
    .pxl-grid-inner {
        margin: 0;
    }
    .pxl-grid-item {
        border-left: 1px solid #d9d9d9;
        padding: 0;
        &:first-child {
            border-left: none;
            
            .pxl-item--inner {
                .pxl-item-icon {
                    display: none;
                }
            }
        }
        &:nth-child(2n+1) {
            @media (max-width: 991px) {
                border-left: none;
                .pxl-item--inner {
                    .pxl-item-icon {
                        display: none;
                    }
                }   
            }
        }
        @media (max-width: 575px) {
            border-left: none;
            border-bottom: 1px solid #d9d9d9;
            .pxl-item--inner {
                .pxl-item-icon {
                    display: none;
                }
            }   
        }
        @for $i from 0 through 10 {
          &:nth-child(#{$i + 1}) {
            .pxl-item--inner {
                .pxl-item-icon {
                    animation-delay: (#{$i/5})+s;
                }
            }
          }
        }
    }
    .pxl-item--inner {
        text-align: center;
        position: relative;
        padding: 131px 40px 126px 40px;
        @include transition(all 0.3s ease-in-out);
        &:hover {
            .pxl-inner-hover {
                .pxl-item-default {
                    opacity: 0;
                }
                .pxl-item-hover {
                    opacity: 1;
                    bottom: 0;
                }
            }
        }
        @media (max-width: 1280px) {
            padding: 40px 20px;
        }
        @media (max-width: 1024px) {
            padding: 40px 15px;
        }
        .pxl-item-icon {
            position: absolute;
            left: -12px;
            top: 48%;
            svg {
                height: 20px;
                width: auto;
                path {
                    fill: $link_color;
                }
            }
        }
        .pxl-item--number {
            font-size: 16px;
            color: #666666;
            font-weight: 500;
            line-height: 1;
            margin-bottom: 59px;
            @media (max-width: 1024px) {
                margin-bottom: 15px;
            }
        }
        .pxl-inner-hover {
            position: relative;
            overflow: hidden;
            @include transition(all 0.3s ease-in-out);
            .pxl-item-default {
                opacity: 1;
                @include transition(all 0.3s ease-in-out);
                .pxl-item--title {
                    margin-bottom: 0;
                }
            }
            .pxl-item-hover {
                position: absolute;
                bottom: -100%;
                left: 50%;
                transform: translate(-50%,0);
                width: 100%;
                opacity: 0;
                @include transition(all 0.3s ease-in-out);
            }
        }
        .pxl-icon {
            width: 75px;
            height: 74px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: $primary_color;
            margin-bottom: 55px;
            clip-path: polygon(82% 0, 100% 19%, 100% 100%, 0 100%, 0 0);
            svg {
                height: 30px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
        }
        .pxl-item--title {
            font-size: 22px;
            color: $link_color;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.2;
            margin-bottom: 31px;
            @media (max-width: 1024px) {
                margin-bottom: 15px;
                font-size: 20px;
            }
        }
        .pxl-item--content {

        }
    }
}
//end//

//pxl-categories//
.pxl-categories1 {
    .pxl-item-inner {
        padding: 14px 13px 40px 12px;
        position: relative;
        &:before {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            background-color: #fff;
            clip-path: polygon(95% 0, 100% 4%, 100% 100%, 0 100%, 0 0);
            z-index: -1;
            @include transition(all 0.3s);
        }
        &:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: #d9d9d9;
            clip-path: polygon(95% 0, 100% 4%, 100% 100%, 0 100%, 0 0);
            z-index: -2;
            @include transition(all 0.3s);
        }
        .pxl-item-title {
            font-size: 23px;
            color: #ffffff;
            font-weight: 500;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.2;
            background-color: $primary_color;
            padding: 19px 20px 22px 27px;
            margin-bottom: 12px;
            clip-path: polygon(96% 0, 100% 22%, 100% 100%, 0 100%, 0 0);
            @media (max-width: 1200px) {
                font-size: 20px;
            }
        }
        .pxl-list-categories {
            padding: 0 26px;
            @media (max-width: 1200px) {
                padding: 0 10px;
            }
            .pxl--item {
                padding: 20.9px 0 17px 0;
                border-bottom: 1px solid #d9d9d9;
                display: flex;
                align-items: center;
                .pxl-icon {
                    color: $link_color;
                    font-size: 16px;
                    svg {
                        height: 16px;
                        width: auto;
                    }
                }
                .pxl-item-text {
                    font-size: 16px;
                    color: $link_color;
                    position: relative;
                    line-height: 1.2;
                    display: block;
                    display: flex;
                    align-items: center;
                    @include transition(all 0.3s);
                    @media (max-width: 1200px) {
                        font-size: 15px;
                    }
                }
                
            }
        }
        .pxl-share {
            padding: 0 27px 0 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 24px;
            @media (max-width: 1200px) {
                padding: 0 10px;
                display: block;
            }
            .pxl-title-share {
                font-size: 16px;
                color: $link_color;
                line-height: 1.2;
                @media (max-width: 1200px) {
                    font-size: 15px;
                    margin-bottom: 20px;
                }
            }
            .pxl-social--icon {
                display: flex;
                align-items: center;
                a {
                    width: 44px;
                    min-width: 44px;
                    height: 44px;
                    background-color: #fff;
                    color: $link_color;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #d9d9d9;
                    margin-right: 5px;
                    &:last-child {
                        margin-right: 0;
                    }
                    &:hover {
                        color: #fff;
                        background-color: $primary_color;
                        border-color: $primary_color;
                    }
                }
            }
        }
    }
}

//pxl-quote-box//
.pxl-quote-box1 {
    .pxl-item-inner {
        background-color: $link_color;
        padding: 44px 52px 42px 50px;
        @media (max-width: 676px) {
            padding: 40px 35px;
        }
        .pxl-quote-content {
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(#fff, 0.149);
            padding-bottom: 30px;
            margin-bottom: 23px;
            @media (max-width: 676px) {
                display: block;
            }
            .pxl-item--icon {
                width: 55px;
                min-width: 55px;
                height: 55px;
                background-color: $primary_color;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 12px;
                @media (max-width: 676px) {
                    margin: 0;
                    margin-bottom: 20px;
                }
                span {
                    background-color: #fff;
                    padding: 9px 4px;
                    clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 100%, 0 0);
                }
            }
            .pxl-item-desc {
                color: #fff;
                line-height: 1.69;
            }
        }
        .pxl-item-title {
            text-align: right;
            font-size: 16px;
            color: #ffffff;
            @include ft_theme_default($ft_theme_default);
            span {
                position: relative;
                padding-left: 23px;
                &:before {
                    content: '';
                    position: absolute;
                    width: 13px;
                    height: 2px;
                    background-color: $primary_color;
                    top: 50%;
                    left: 0;
                    transform: translate(0,-50%);
                }
            }
        }
    }
}

//PXL Button Radius//
.pxl-button-radius1 {
    &.style1 {
        .pxl-item-inner {
            a {
                width: 177px;
                height: 177px;
                background-color: $primary_color;
                font-size: 15px;
                letter-spacing: 0.7px;
                text-transform: uppercase;
                color: #ffffff;
                font-weight: 500;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                @include border-radius(50%);
                overflow: hidden;
                @include ft_theme_default($ft_theme_default);
                svg {
                    height: 32px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
                .pxl--btn-text {
                    line-height: 25px;
                    max-width: 60%;
                    display: inline-block;
                }
                .pxl-btn-icon {
                    display: block;
                    line-height: 1;
                    margin-bottom: 13px;
                }
                .pxl-btn-content {
                    text-align: center;
                    z-index: 2;
                }
                .button-spotlight {
                  position: absolute;
                  z-index: 1;
                  height: 10px;
                  width: 10px;
                  opacity: 1;
                  border-radius: 50%;
                  background-color: $link_color;
                  inset: 0;
                  top: 50%;
                  transform: scale(0);
                }
            }
        }
    }
}
//end

//PXL Table//
.pxl-table1 {
    .pxl-table-inner {
        background-color: #191919;
        padding: 25px 0 38px 0;
        text-align: center;
        border-left: 1px solid rgba(#edefed, 0.149);
        @media (max-width: 880px) {
            border-left: none;
        }
        .pxl-table-title {
            font-size: 16px;
            color: #fff;
            text-align: center;
            margin-bottom: 15px;
            max-width: 95%;
            display: inline-block;
            min-height: 60px;
        }
        .pxl-songs-table {
            border-left: none;
            tr {
                display: none;
                &.active {
                    display: table-row;
                    @media (max-width: 800px) {
                        display: block !important;
                    }
                }
            }
        }
        
        @media (max-width: 880px) {
            .pxl-list {
                .pxl--item {
                    margin-bottom: 30px;
                    border-bottom: 1px solid rgba(237, 239, 237, 0.149);
                    display: none;
                }
            }
            table {
                border: 0;
                white-space: unset;
            }

            table thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }

            table tr {
                display: block;
                margin-bottom: .625em;
            }

            table td {
                display: block;
                text-align: right;
                padding: 10px;
                font-size: 14px;
            }

            table td::before {
                /*
                * aria-label has no advantage, it won't be read inside a table
                content: attr(aria-label);
                */
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
                color: #fff;
                font-size: 15px;
                margin-right: 15px;
            }

            table td:last-child {
                border-bottom: 0;
            }
        }
        .pxl-table-btn {
            text-align: center;
            @media (max-width: 880px) {
                display: none;
            }
            .pxl-load-more {
                font-size: 18px;
                text-decoration: underline;
                color: #ffffff;
                &:hover {
                    color: $primary_color;
                }
            }
        }
    }
}
//End//

//pxl-icon-text//
.pxl-icon-text1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .pxl-item {
        text-align: center;
        margin-right: 47px;
        @media (max-width: ) {
            
        }
        &:last-child {
            margin-right: 0 !important;
        }
        @for $i from 0 through 10 {
          &:nth-child(#{$i + 1}) {
            animation-delay: (#{$i/5})+s;
          }
        }
        .pxl-item-icon {
            margin-bottom: 16px;
            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 75px;
                height: 75px;
                background-color: $link_color;
                color: #fff;
                i {
                    font-size: 30px;
                }
                svg {
                    height: 30px;
                    width: auto;
                    path {
                        fill: #fff;
                    }
                }
            }
        }
        .pxl-item-title {
            text-align: center;
            font-size: 17px;
            color: $link_color;
            @include ft_theme_default($ft_theme_default);
        }
    }
}
//End//

//pxl-grid-custom//
.pxl-grid-custom1 {
    .pxl-grid-inner {
        margin: 0;
    }
    .pxl-grid-item {
        padding: 0;
        &:first-child {
            .pxl-item--inner {
                border-left: none;
                .pxl-item--image {
                    padding-left: 24px;
                }
                .pxl-item--holder {
                    border-left: 1px solid #d9d9d9;
                }
            }
        }
        &:nth-last-child(2) {
            .pxl-item--inner {
                .pxl-item--holder {
                    border-right: 1px solid #d9d9d9;
                }
            }
        }
        @media (max-width: 991px) {
            &:nth-child(2) {
                .pxl-item--inner {
                    .pxl-item--holder {
                        border-right: 1px solid #d9d9d9;
                    }
                }
            }
        }
        @media (max-width: 575px) {
            .pxl-item--inner {
                .pxl-item--holder {
                    border-right: 1px solid #d9d9d9;
                    border-left: 1px solid #d9d9d9;
                }
            }
        }
    }
    .pxl-item--inner {
        border-left: 1px solid #d9d9d9;
        @include transition(all 0.3s ease-out);
        @media (max-width: 575px) {
            border: none;
        }
        .pxl-item--image {
            padding: 24px 23px;
            background-color: #edefed;
            .pxl-img-relative {
                position: relative;
                overflow: hidden;
                @include transition(all 0.3s ease-out);
                &:hover {
                    img {
                        filter: blur(4px);
                    }
                    .pxl-img-button {
                        opacity: 1;
                    }
                }
                img {
                    @include transition(all 0.3s ease-out);
                }
                .pxl-img-button {
                    font-size: 14px;
                    letter-spacing: 0.7px;
                    text-transform: uppercase;
                    font-weight: 500;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    @include ft_theme_default($ft_theme_default);
                    width: 90px;
                    height: 90px;
                    @include border-radius(50%);
                    background-color: $primary_color;
                    color: #fff;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    @include transition(all 0.3s ease-out);
                    opacity: 0;
                    
                }
            }
        }
        .pxl-item--holder {
            border: 1px solid #d9d9d9;
            border-left: none;
            border-right: none;
            padding: 20px 30px;
            .pxl-item--title {
                font-size: 18px;
                font-weight: 500;
                color: $link_color;
                @include ft_theme_default($ft_theme_default);
                line-height: 1.2;
                position: relative;
                padding-left: 14px;
                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0,-50%);
                    width: 5px;
                    height: 5px;
                    background-color: $primary_color;
                }
            }
        }
    }
}
//End//

//pxl-button-popup//
.pxl-button-popup {
    .btn {
        &.btn-default {
            @include ft_theme_default($ft_theme_default);
            font-size: 14px;
            font-weight: 500;
            line-height: 55px;
            border: 1px solid $primary_color;
            padding: 0px 60px;
            background-color: $link_color;
            color: #fff;
            @media (max-width: 1024px) {
                padding: 0 40px;
            }
            &:hover {
                background-color: $primary_color;
            }
        }
    }
}
//end//

//pxl-box--list1//
.pxl-box--list1 {
    .pxl-box-inner {
        display: flex;
        flex-direction: row;
        gap: 60px;
        align-items: center;
        @media (max-width: 1280px) {
            gap: 30px;
        }
        @media (max-width: 676px) {
            flex-direction: column;
            align-items: start;
        }
        .pxl-item {
            position: relative;
            padding-right: 50px;
            @include transition(all 0.3s);
            padding-bottom: 18px;
            &:before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                opacity: 1;
                background-color: #3b3b3b;
                @include transition(all 0.8s);
            }
            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 1px;
                opacity: 0;
                background-color: $primary_color;
                @include transition(all 0.8s);
            }
            &:hover {
                &:before {
                    width: 0;
                    opacity: 0;
                }
                &:after {
                    width: 100%;
                    opacity: 1;
                }
            }
            .pxl-item-icon {
                position: absolute;
                top: 0;
                right: -5px;
                svg {
                    height: 24px;
                    width: auto;
                    @include transition(all 0.3s);
                    path {
                        fill: #fff;
                    }
                }
                .pxl-icon-link {
                    &:hover {
                        svg {
                            transform: rotate(45deg);
                        }
                    }
                }
            }
            .pxl-content-title {
                margin-bottom: 2px;
            }
            .pxl-item--title {
                font-size: 20px;
                color: #ffffff;
                font-weight: 500;
                @include ft_theme_default($ft_theme_default);
                line-height: 1.2;
            }
            .pxl-sub-title {
                font-size: 16px;
                color: #c2c2c2;
            }
        }
    }
}

.pxl-box--list2 {
    .pxl-box-inner {
        position: relative;
        padding-bottom: 55px;
        padding-right: 59px;
        @media (max-width: 480px) {
            padding-bottom: 0;
            padding-right: 0;
        }
        .pxl-image {
            display: inline-block;
            @media (max-width: 480px) {
                margin-bottom: 30px;
            }
        }
        .pxl-item-box-list {
            background-color: $primary_color;
            padding: 70px 26px 29px 26px;
            position: absolute;
            bottom: 0;
            right: 0;
            max-width: 382px;
            .pxl-list-item {
                padding: 0 4px;
            }
            @media (max-width: 880px) {
                padding: 40px 20px 25px 20px;
            }
            @media (max-width: 480px) {
                position: relative;
                bottom: unset;
                right: unset;
            }
            .pxl-item {
                display: inline-flex;
                flex-direction: row;
                gap: 14px;
                margin-bottom: 18px;
                &:last-child {
                    margin-bottom: 0;
                }
                .pxl-item-icon {
                    line-height: 1;
                    padding-top: 3px;
                    svg {
                        width: auto;
                        height: 21px;
                        fill: #fff;
                    }
                }
                .pxl-item--title {
                    font-size: 16px;
                    color: #fff;
                }
            }
            .pxl-box-button {
                margin-top: 138px;
                @media (max-width: 1024px) {
                    margin-top: 70px;
                }
                @media (max-width: 880px) {
                    margin-top: 40px;
                }
                .pxl-button-link {
                    background-color: $link_color;
                    font-size: 14px;
                    text-transform: uppercase;
                    color: #ffffff;
                    font-weight: 500;
                    letter-spacing: 0.7px;
                    @include ft_theme_default($ft_theme_default);
                    height: 63px;
                    padding: 0 30px;
                    display: block;
                    align-content: center;
                    text-align: center;
                    &:hover {
                        color: $link_color;
                        background-color: #fff;
                    }
                }
            }
        }
    }
}


//dialog-lightbox-message//
.dialog-lightbox-message {
    .elementor-swiper-button {
        position: absolute;
        display: inline-flex;
        z-index: 1;
        cursor: pointer;
        font-size: 25px;
        color: hsla(0,0%,93.3%,.9);
        top: 50%;
        transform: translateY(-50%);
    }
}
//Scroll
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: inherit;
  }
}

// RTL Support
body.rtl {
    .pxl-text-marquee1 {
        direction: ltr;
    }
    .pxl-meta.pxl-meta1.style2 .pxl-meta-inner .pxl-item .pxl-item--icon.pxl-mr-9 {
        margin-right: 0px;
        margin-left: 18px;
    }
    .pxl-contact-form1 .contact5 .pxl-item-costing .f5 {
        padding-left: 0px;
        padding-right: 97px;
        @media (max-width: 1024px) {
            padding-right: 40px;
        }
        .pxl-item-price {
            direction: rtl;
        }
    }
}