// Grid
//--------------------------------------------------
.pxl-grid {
    .pxl-grid-masonry {
        position: relative;
    }
    .grid-sizer {
        z-index: -1;
    }
    .pxl-load-more {
        text-align: center;
        padding: 0 15px;
    }
    @media #{$min-lg} {
        .col-lg-20-pxl {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
        .col-lg-40-pxl {
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
        }
    }
    @media #{$min-xl} {
        .col-xl-20-pxl {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
        .col-xl-40-pxl {
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
        }
        .col-xl-pxl5 {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
}

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

// Elementor - Column Settings
//--------------------------------------------------
.pxl-col-align-start {
    > .elementor-widget-wrap {
        justify-content: flex-start;
    }
    .elementor-inner-section > .elementor-container {
        margin-left: 0;
    }
}
.pxl-col-align-center {
    > .elementor-widget-wrap {
        justify-content: center;
    }
}
.pxl-col-align-end {
    > .elementor-widget-wrap {
        justify-content: flex-end;
    }
    .elementor-inner-section > .elementor-container {
        margin-right: 0;
    }
}

// Start Swiper Carousel
//--------------------------------------------------
.pxl-carousel-inner {
    overflow: hidden;
}
.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;
}
.pxl-swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: auto;
    height: 100%;
    position: relative;
    padding: 0 15px;
}

.pxl-swiper-arrow {
    font-size: 18px;
    color: #1C2539;
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: block;
    z-index: 2;
    text-align: center;
    cursor: pointer;  
    background-color: #F6F6F6;
    border: none;
    @include border-radius(70px);
    @include transition(all 300ms linear 0ms);
    margin: 0 7px;
    cursor: pointer;
    &:hover {
        color: $primary_color;
        background-color: #fff;
        @include box-shadow(none);
        @include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
    }
    &.swiper-button-disabled {
        cursor: not-allowed;
    }
    &.pxl-mouse-effect {
        height: 100%;
        width: 140px;
        position: absolute;
        top: 0;
        margin: 0;
        opacity: 0;
        &.pxl-swiper-arrow-next {
            right: -120px;
        }
        &.pxl-swiper-arrow-prev {
            left: -120px;
        }
    }
}

.pxl-swiper-arrow-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    &.style-2 {
        margin-bottom: 30px;
        position: relative;
        &:before, &:after {
            content: '';
            height: 1px;
            width: calc(50% - 60px);
            background-color: #E0E8F4;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
        }
        &:before {
            left: 0;
        }
        &:after {
            right: 0;
        }
        .pxl-swiper-arrow {
            width: 37px;
            height: 37px;
            line-height: 37px;
            font-size: 11px;
            background-color: #fff;
            @include box-shadow(0 0px 30px rgba(#8997BA, 0.25));
            color: #6F7F90;
            &:hover {
                color: $primary_color;
            }
        }
        .pxl-swiper-arrow-inner {
            display: inline-flex;
            flex-wrap: wrap;
        }
    }
}

.pxl-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    .pxl-swiper-current-slide, .pxl-swiper-total-slides {
        font-size: 18px;
        font-weight: 700;
        color: #cccabf;
        @extend .ft-theme-default;
        margin: 0 14px;
        &:before {
            content: '0';
        }
    }
    .pxl-swiper-current-slide {
        color: #0a1316;
    }
}

.pxl-swiper-dots {
    &.style-1 {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        &.pxl-swiper-pagination-bullets {
            span {
                cursor: pointer;
                width: 50px;
                height: 4px;
                display: inline-block;
                margin: 0 6px;
                position: relative;
                background-color: #E1E9F4;
                @include transition(all 220ms linear 0ms);
                @media #{$max-md} {
                    width: 30px;
                }
                &.swiper-pagination-bullet-active, &:hover {
                    background-color: $primary_color;
                }
            }
        }
        &.pxl-swiper-pagination-progressbar {
            height: 1px;
            width: 100%;
            background-color: #c1b9b9;
            max-width: 1170px;
            margin-bottom: 4px;
            position: relative;
            .swiper-pagination-progressbar-fill {
                background: $secondary_color;
                position: absolute;
                left: 0;
                top: -3px;
                width: 100%;
                height: 8px;
                transform: scale(0);
                transform-origin: left top;
            }
        }
        &.pxl-swiper-pagination-fraction {
            font-size: 24px;
            color: $primary_color;
            font-weight: 700;
            @extend .ft-theme-default;
            span {
                color: #0a1316;
                display: inline-flex;
                margin: 0 6px;
                &:before {
                    content: '0';
                }
            }
        }
    }
    &.style-2 {
        &.pxl-swiper-pagination-bullets {
            margin-top: 27px;
            span {
                cursor: pointer;
                width: 8px;
                height: 8px;
                display: inline-block;
                margin: 0 9px;
                position: relative;
                background-color: #e3e3e3;
                @include border-radius(8px);
                &.swiper-pagination-bullet-active, &:hover {
                    background-color: $secondary_color;
                }
            }
        }
    }
    &.style-3 {
        &.pxl-swiper-pagination-bullets {
            span {
                width: 12px;
                height: 12px;
                border-radius: 12px;
                display: inline-flex;
                background-color: #777;
                margin: 0 6px;
                cursor: pointer;
                @include transition(all 220ms linear 0ms);
                &.swiper-pagination-bullet-active {
                    background-color: transparent;
                    box-shadow: 0 0 0 4px $primary_color;
                }
            }
        }
    }
    &.style-4 {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        &.pxl-swiper-pagination-bullets {
            span {
                width: 12px;
                height: 12px;
                border-radius: 12px;
                display: inline-flex;
                background-color: #BDD6F1;
                margin: 0 6px;
                cursor: pointer;
                @include transition(all 220ms linear 0ms);
                &.swiper-pagination-bullet-active {
                    background-color: $third_color;
                    box-shadow: 0 0 0 4px #{'rgba(var(--third-color-rgb),0.5)'};
                }
            }
        }
    }
    &.style-5 {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        &.pxl-swiper-pagination-bullets {
            span {
                width: 10px;
                height: 10px;
                border-radius: 10px;
                display: inline-flex;
                background-color: #8199D4;
                margin: 0 7px;
                cursor: pointer;
                @include transition(all 220ms linear 0ms);
                &.swiper-pagination-bullet-active {
                    background-color: $primary_color;
                }
            }
        }
    }
}
.pxl-swiper-boxshadow {
    .pxl-carousel-inner {
        margin: 0 -30px;
        .pxl-swiper-container {
            padding: 0 30px;
        }
    }
    .pxl-swiper-slide {
        @include transition(opacity .25s cubic-bezier(.645,.045,.355,1));
    }
    .pxl-swiper-slide:not(.swiper-slide-visible) {
        opacity: 0;
    }
    @media #{$max-lg} {
        .pxl-swiper-dots.style-1.pxl-swiper-pagination-progressbar {
            margin-left: 45px;
            margin-right: 45px;
        }
    }
    .pxl-carousel-inner {
        overflow: visible;
    }
}

.pxl-swiper-sliders {
    position: relative;
    &.pxl-swiper-arrow-show .pxl-swiper-arrow {
        opacity: 1;
        visibility: visible;
    }
}

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

.pxl-swiper-thumbs {
    overflow: hidden;
    padding: 0 15px;
    .swiper-slide {
        cursor: pointer;
        padding: 0 15px;
    }
}
.swiper-container-vertical {
    height: 300px;
    .pxl-swiper-wrapper {
        flex-direction: column;
    }
    .pxl-swiper-slide {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

[data-slider-mode="fade"] .swiper-slide-active {
    z-index: 9;
}
// End Swiper Carousel
//--------------------------------------------------

body.rtl {
    
}