// Grid
//--------------------------------------------------
.pxl-grid {
    .pxl-grid-masonry {
        position: relative;
    }
    .grid-sizer {
        z-index: -1;
    }
    .pxl-load-more {
        margin-top: 60px;
        text-align: center;
        .btn {
            padding: 0 38px;
            font-size: 14px;
            font-weight: 600;
            line-height: 51px;
            text-transform: uppercase;
            color: $fourth_color;
            background: $secondary_color;
            z-index: 1;
            @extend .pxl-hover-transition;
            .pxl-load-icon {
                position: relative;
                width: 0;
                height: 10px;
                opacity: 0;
                z-index: 1;
                @include transition(inherit);
                &:before {
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-width: 1px;
                    border-style: solid;
                    border-color: transparent $fourth_color transparent $fourth_color;
                    margin: auto;
                    @extend .pxl-spill-middle;
                    @include border-radius(100%);
                    @include animation(pxl_spin .6s infinite linear);
                }
            }
            &:hover {
                .text-arrow {
                    i {
                        &:nth-child(1) {
                            transform: translate(30px, -30px);
                        }
                        &:nth-child(2) {
                            transform: translate(0px, 0px);
                        }
                    }
                }
            }
            .text-arrow {
                position: relative;
                overflow: hidden;
                margin-left: 10px;
                @include transition(all 500ms ease-in-out);  
                i {
                    color: inherit;
                    font-size: 14px;
                    &:nth-child(1) {
                        color: #fff;
                        display: inline-block;
                        transition: transform 0.5s linear;
                    }
                    &:nth-child(2) {
                        position: absolute;
                        left: 0;
                        top: 0;
                        transform: translate(-30px, 30px);
                        transition: transform 0.5s linear;
                    }
                }   
            }
        }
        &.pxl-loadmore-style1 {
            .btn {
                position: relative;
                width: 100%;
            }
        }
        &.loading {
            .btn {
                color: $fourth_color;
                .pxl-load-icon {
                    opacity: 1;
                    width: 10px;
                    margin: 0 10px;
                }
                .text-arrow {
                    display: none;
                }
            }
        }
    }
    @media #{$min-xl} {
        .col-xl-pxl5 {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
}

.pxl-grid-filter1 {
    position: relative;
    text-align: center;
    margin-bottom: 100px;
    @media #{$max-sm} {
        margin-bottom: 40px;
    }
    .pxl-filter--inner {
        display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;
        -ms-flex-wrap: wrap;flex-wrap: wrap;
        -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    }
    .filter-item {
        display: inline-block;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
        text-transform: uppercase;
        padding: 0 40px 35px 40px;
        margin: 0;
        border-bottom: 2px solid #E6E6E6;
        cursor: pointer;
        @media #{$max-md} {
            padding: 0 40px 15px 40px;
            margin-bottom: 15px;
        }
        @extend .pxl-color-pri-fou;
        &.active, &:hover {
            color: $secondary_color;
        }
    }
    .filter-marker {
        position: absolute;
        display: none;
        border-bottom: 3px solid $secondary_color;
        height: 3px;
        pointer-events: none;
        @include transform(translateY(-2px));
    }
}
.pxl-grid-filter2 {
    margin-bottom: 38px;
    font-size: 17px;
    color: #444;
    .filter-item {
        cursor: pointer;
        &:after {
            content: '-';
            margin: 0 18px;
        }
        &:last-child:after {
            display: none;
        }
    }
}
.pxl-grid-filter3 {
    @extend .swiper-filter-wrap;
    margin-bottom: 53px;
}

.pxl-grid-no-results {
    display: none;
    font-size: 18px;
    margin: 25px 0 0;
}

.filter-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: $secondary_color;
    z-index: -1;
}

.elementor-editor-active .grid-sizer {
    display: none;
}

.pxl-navigation-carousel {
    display: inline-flex;
    margin: 0 -10px;
    gap: 5px;
    &.style-1 {
        .pxl-navigation-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 41px;
            height: 37px;
            background-color: transparent;
            border: 1px solid $primary_color;
            i {
                color: #00143f; 
                font-size: 13px;
            }
            &:hover {
                background-color: $primary_color;
                i {
                    color: #fff;
                }
            }
        }
    }
    &.style-2 {
        gap: 12px;
        .pxl-navigation-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: #f3f5f9;                
            i {
                color: #000; 
                font-size: 13px;
            }
            &:hover {
                background-color: $primary_color;
                i {
                    color: #fff;
                }
            }
        }
    }   
}


// Start Swiper Carousel
//--------------------------------------------------
.pxl-swiper-container {
    margin: 0 -15px;
    position: relative;
    overflow: hidden;
}
.pxl-swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.swiper-container-vertical .pxl-swiper-wrapper {
    -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
}
.pxl-swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0 15px;
}

.pxl-navigation-carousel  {
    &.style1 {
        overflow: hidden;
        .pxl-navigation-arrow {
            width: 44px;
            height: 44px;
            line-height: 44px;
            font-size: 20px;
            background: $primary_color;
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            z-index: 2;
            @extend .pxl-item--flexct;
            @extend .pxl-hover-transition;
            &.swiper-button-disabled {
                background-color: rgba(255, 255, 255, 0.65);
                cursor: not-allowed;
            }
            .crossline1, .crossline2 {
                height: 1px;
                display: inline-block;
                @extend .pxl-custom-transition;
                @include transform(translateX(-50%));
                &:before, &:after {
                    content: '';
                    position: absolute;
                    width: 7px;
                    height: 1px;
                    @extend .pxl-custom-transition;
                }
                &:before {
                    @include transform(rotate(40deg));
                }
                &:after {
                    @include transform(rotate(-40deg));
                }
            }
            .crossline1 {
                width: 15px;
                background-color: $fourth_color;
                &:before, &:after {
                    background-color: $fourth_color;
                }
                &:before {
                    top: 0;
                }
                &:after {
                    bottom: 0;
                }
            }
            .crossline2 {
                width: 0px;
                background-color: $secondary_color;
                opacity: 0;
                &:before, &:after {
                    background-color: $secondary_color;
                    @include transition(all 0.7s ease-in-out);
                }
                &:before {
                    top: -10px;
                }
                &:after {
                    bottom: -10px;
                }
            }
            &.pxl-navigation-arrow-prev {
                top: 0%;
                right: 0;
                .crossline1, .crossline2 {
                    &:before, &:after {
                        left: 0;
                        -webkit-transform-origin: left;-ms-transform-origin: left;transform-origin: left;
                    }
                }
                .crossline2 {
                    &:before {
                        @include transform(rotate(315deg));
                    }
                    &:after {
                        @include transform(rotate(-315deg));
                    }
                }
            }
            &.pxl-navigation-arrow-next {
                bottom: 0%;
                right: 0;
                .crossline1, .crossline2 {
                    &:before, &:after {
                        right: 0;
                        -webkit-transform-origin: right;-ms-transform-origin: right;transform-origin: right;
                    }
                }
            }
            &:not(.swiper-button-disabled):hover {
                .crossline1 {
                    opacity: 0;
                    @include transform(scale(0));
                }
                .crossline2 {
                    width: 15px;
                    opacity: 1;
                    &:before {
                        top: 0px;
                    }
                    &:after {
                        bottom: 0px;
                    }
                }
            }
        }
    }
    &.style2 {
        display: flex;
        gap: 12px;
        .pxl-navigation-arrow {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            cursor: pointer;
            z-index: 1;            
            .circle {
                position: relative;
                width: 54px;
                height: 54px;
                border-radius: 100%;
                display: inline-block;
                border: 1px dashed #3C3C3C;
            }
            i {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                transition: 0.3s linear;
                color: $primary_color;
                font-size: 29px;
            }
            &:hover {
                .circle {
                    @include animation(full_circle 5s infinite linear);
                    border-style: dashed;
                    border-color: $secondary_color;
                }
                i {
                    color: $secondary_color;
                }
            }
            &.swiper-button-disabled {
                opacity: .35;
                cursor: not-allowed;
            }
        }
    }   
}
.wp-arrow {
    .pxl-swiper-arrow.swiper-button-disabled {
        cursor: not-allowed !important;
    }
    .pxl-swiper-arrow {
        text-transform: uppercase;
    }
    &.style1 {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 44px;
        height: 88px;
        overflow: hidden;
        .pxl-swiper-arrow {
            position: absolute;
            width: 44px;
            height: 44px;
            line-height: 44px;
            font-size: 20px;
            background: $fourth_color;
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            z-index: 2;
            @extend .pxl-item--flexct;
            @extend .pxl-hover-transition;
            &.swiper-button-disabled {
                background-color: rgba(255, 255, 255, 0.65);
                cursor: not-allowed;
            }
            .crossline1, .crossline2 {
                position: absolute;
                left: 50%;
                top: 50%;
                height: 1px;
                display: inline-block;
                @extend .pxl-custom-transition;
                @include transform(translateX(-50%));
                &:before, &:after {
                    content: '';
                    position: absolute;
                    width: 7px;
                    height: 1px;
                    @extend .pxl-custom-transition;
                }
                &:before {
                    @include transform(rotate(40deg));
                }
                &:after {
                    @include transform(rotate(-40deg));
                }
            }
            .crossline1 {
                width: 15px;
                background-color: #2e2e2e;
                &:before, &:after {
                    background-color: #2e2e2e;
                }
                &:before {
                    top: 0;
                }
                &:after {
                    bottom: 0;
                }
            }
            .crossline2 {
                width: 0px;
                background-color: $secondary_color;
                opacity: 0;
                &:before, &:after {
                    background-color: $secondary_color;
                    @include transition(all 0.7s ease-in-out);
                }
                &:before {
                    top: -10px;
                }
                &:after {
                    bottom: -10px;
                }
            }
            &.pxl-swiper-arrow-prev {
                top: 0%;
                right: 0;
                .crossline1, .crossline2 {
                    &:before, &:after {
                        left: 0;
                        -webkit-transform-origin: left;-ms-transform-origin: left;transform-origin: left;
                    }
                }
                .crossline2 {
                    &:before {
                        @include transform(rotate(315deg));
                    }
                    &:after {
                        @include transform(rotate(-315deg));
                    }
                }
            }
            &.pxl-swiper-arrow-next {
                bottom: 0%;
                right: 0;
                .crossline1, .crossline2 {
                    &:before, &:after {
                        right: 0;
                        -webkit-transform-origin: right;-ms-transform-origin: right;transform-origin: right;
                    }
                }
            }
            &:not(.swiper-button-disabled):hover {
                .crossline1 {
                    opacity: 0;
                    @include transform(scale(0));
                }
                .crossline2 {
                    width: 15px;
                    opacity: 1;
                    &:before {
                        top: 0px;
                    }
                    &:after {
                        bottom: 0px;
                    }
                }
            }
        }
    }
    &.style2 {
        position: absolute;
        bottom: 59px;
        right: 69px;
        display: flex;
        gap: 12px;
        .pxl-swiper-arrow {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: relative;
            cursor: pointer;
            z-index: 1;            
            .circle {
                position: relative;
                width: 60px;
                height: 60px;
                border-radius: 100%;
                display: inline-block;
                border: 1px dashed #585858;
            }
            i {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                transition: 0.3s linear;
                color: #fff;
                font-size: 29px;
            }
            &:hover {
                .circle {
                    @include animation(full_circle 5s infinite linear);
                    border-style: dashed;
                    border-color: $secondary_color;
                }
            }
            &.swiper-button-disabled {
                opacity: .35;
                cursor: not-allowed;
            }
        }
    }
    &.style3 {
        .pxl-swiper-arrow {
            font-size: 51px;
            cursor: pointer;
            z-index: 1;
            @extend .pxl-color-fou-pri;
        }
        @media #{$min-sm} {
            .pxl-swiper-arrow {
                position: absolute;
                top: 40%;
                bottom: auto;
            }
            .pxl-swiper-arrow-prev {
                left: 44px;
            }
            .pxl-swiper-arrow-next {
                right: 44px;
            }
        }
        @media #{$max-xs} {
            display: flex;
            margin: 0 -15px;
            .pxl-swiper-arrow {
                margin: 0 15px;
            }
        }
    }
    &.style4 {
        .pxl-swiper-arrow {
            width: 44px;
            height: 44px;
            line-height: 44px;
            font-size: 24px;
            color: $primary_color;
            background: $fourth_color;
            text-align: center;
            cursor: pointer;
            z-index: 1;
            @extend .pxl-custom-transition;
            &.swiper-button-disabled {
                background-color: rgba(255, 255, 255, 0.65);
            }
        }
        .pxl-swiper-arrow {
            position: absolute;
            top: 50%;
            bottom: auto;
            @include transform(translateY(-50%));
        }
        .pxl-swiper-arrow-prev {
            left: 0;
        }
        .pxl-swiper-arrow-next {
            right: 0;
        }
    }
}

.pxl-swiper-dots {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    left: 50%;
    margin-top: 30px;
    width: 100%;
    z-index: 1;
    @include transform(translateX(-50%));
    &.pxl-swiper-pagination-bullets {
        margin: -11.5px 0;
    }
    .pxl-swiper-pagination-number {
        display: none;
    }
    .pxl-swiper-pagination-bullet {
        position: relative;
        margin: 11.5px;
        padding: 7px;
        text-align: center;
        cursor: pointer;
        @extend .pxl-hover-transition;
        &:before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 4px;
            height: 4px;
            background: $third_color;
            @include border-radius(50%);
            @include transform(translate(-50%, -50%));
            @include transition(inherit);
        }
        &.swiper-pagination-bullet-active-prev, &.swiper-pagination-bullet-active-next {
            &:before {
                width: 6px;
                height: 6px;
            }
        }
        &.swiper-pagination-bullet-active {
            background-color: transparent;
            &:before {
                width: 8px;
                height: 8px;
                background-color: $secondary_color;
            }
        }
    }
    &.pxl-swiper-pagination-progressbar {
        position: relative;
        width: 100%;
        height: 2px;
        background-color: $secondary_color;
        max-width: 1200px;
        .swiper-pagination-progressbar-fill {
            background: $secondary_color;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 2px;
            transform-origin: left top;
            @include transform(scale(0));
        }
    }
}

.pxl-swiper-boxshadow {
    .pxl-carousel-inner {
        margin: 0 -40px;
        .pxl-swiper-container {
            padding: 0 40px;
        }
    }
    .pxl-swiper-slide {
        @include transition(opacity .2s cubic-bezier(.645,.045,.355,1));
    }
    .pxl-swiper-slide:not(.swiper-slide-visible) {
        opacity: 0;
    }
}

.pxl-swiper-sliders {
    position: relative;
    &.pxl-swiper-arrow-show .pxl-swiper-arrow {
        opacity: 1;
        visibility: visible;
    }
    &:hover {
        .wp-arrow {
            &.style1 {
                .pxl-swiper-arrow {
                    &.pxl-swiper-arrow-prev {
                        top: 0;
                    }
                    &.pxl-swiper-arrow-next {
                        top: 45px;
                    }
                }
            }
        }
    }
}

.pxl-swiper-nogap {
    .pxl-swiper-container {
        margin: 0;
        .pxl-swiper-slide {
            padding: 0;
        }
    }
}

.pxl-swiper-thumbs {
    overflow: hidden;
    .swiper-slide {
        cursor: pointer;
    }
}
// End Swiper Carousel
//--------------------------------------------------