// 1. slider revolution
// 2. case logo widget 
// 3. case contact info widget
// 4. case text editor widget
// 5. case links widget
// 6. case icons widget
// 7. case image widget
// 8. case heading widget
// 9. case text effect widget
// 10. case file download widget
// 11. case list widget
// 12. case project info widget
// 13. case gallery grid widget
// 14. case pagination widget
// 15. case process widget
// 16. case image widget
// 17. case contact form widget
// 18. case text slip widget
// 19. case slider widget
// 20. case image box widget
// 21. case user widget
//--------------------------------------------------

// slider revolution
.revslider-initialised {
    overflow: visible !important;
}

// case logo widget
.pxl-logo {
    a {
        display: inline-block;
    }
    img {
        width: auto;
        vertical-align: middle;
    }
}

// widget particle
//--------------------------------------------------
.pxl-particle {
    .pxl-item--particle {
        position: absolute;
    }
    + .elementor-container {
        z-index: 99;
    }
}

// Navigation Carousel
.pxl-navigation-carousel {
    margin: 0 -6px;
    .pxl-navigation-arrow {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        position: relative;
        color: #194341;
        @include transition(all 300ms linear 0ms);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 15px;
        margin: 6px;
        z-index: 1;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 52px;
            border: 1px solid #194341;
            z-index: -2;
        }
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            background-color: $primary_color;
            z-index: -1;
            @include transition(opacity 300ms linear 0ms);
            opacity: 0;
        }
        &:hover {  
            &:before {
                border-color: transparent;
            }          
            &:after {
                opacity: 1;
            }
        }
    }
}

// case contact info
.pxl-contact-info2 {
    .pxl-item--icon {
        color: $four_color;
        font-size: 41px;
        background-color: #E8F8F2;
        border-radius: 25px 0 25px 0;
        min-width: 85px;
        width: 85px;
        height: 85px;
        position: absolute;
        left: -45px;
        top: 50%;
        transform: translateY(-53%);
        @include transition(all .25s cubic-bezier(.3,.3,0,.8));
        > * {
         @extend .pxl-middle;
     }
     img {
         max-height: 41px;
     }
     svg {
         height: 41px;
         fill: $four_color;
         path {
            fill: inherit;            
        }
    }
    .pxl-item--subtitle {
     position: absolute;
     width: 36px;
     height: 38px;
     z-index: 99;
 }
}
&:hover {
    .pxl-item--inner {
        border-color: transparent;
        box-shadow: 0px 10px 60px 0px rgba(137, 151, 186, 0.15);
    }    
}
li {
    list-style: none;
    .content {
        font-size: 18px;
        font-weight: 400;
        line-height: 27.88px;
        letter-spacing: -0.36px;
        color: $third_color;        
    }
}
.pxl-item--title {
    margin-bottom: 14px;
    span {
        font-family: Inter;
        font-size: 18px;
        font-weight: 600;
        margin-left: 14px;
    }
}
.pxl-item--inner {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    padding: 36px 45px 35px 68px;    
    flex-direction: column;
    border-radius: 15px;
    background-color: #fff;
    border: 1px solid #f6f6f6;    
    @include transition(all 0.3s ease);
}
@media #{$max-xxl} {
  &.pxl-hide-lg {
     .pxl-item--icon {
        margin: 0;
    }
    .pxl-item--title {
        display: none;
    }
    .pxl-item--icon:hover {
        background-color: $primary_color;
        color: $secondary_color;
    }
}
}
}  

// pxl-rating-1
.pxl-rating-1 {
    .pxl-item--inner {
        position: relative;
        background-color: $four_color;
        border-radius: 10px;    
        padding: 24px 32px 11px;
        &:after {
            content: '';
            position: absolute;
            width: 55px;
            height: 54px;
            background-image: url(../img/hand.png);
            background-repeat: no-repeat;
            bottom: -32px;
            right: 9px;
            animation: pxl_float_two 1.2s ease infinite alternate;
        }
        .pxl-item--title {
            font-family: Inter;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            line-height: 17.5px;
            text-align: center;
            margin-bottom: -3px;
        }
        .pxl-rating-bottom {
            display: flex;
            align-items: center;
            justify-content: center;
            .pxl-item--number {
                color: #FFF;
                font-family: Outfit;
                font-size: 50px;
                font-weight: 600;
                line-height: 66px;
                margin-right: 7px;
            }
        }
        .pxl-item--rating {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 57px;
            .pxl-item--star {
                color: #FFCD28;
                margin: 0 1px;
                margin-bottom: -4px;
                i {
                    font-size: 13px;                    
                }
            }
        }
    }
}

// 
.pxl-image-grid {
    .pxl-grid-item {
        padding: 0 7px;
        margin-bottom: 14px;
    }
    .pxl-item--inner {
        .pxl-item-image {
            border-radius: 20px;
            border: 1px solid #E6EEFF;
            background: #FFF;
            box-shadow: 0px 5px 83px 0px rgba(114, 115, 168, 0.08);
            min-height: 145px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                @include transition(200ms all linear 0ms);
            }
            &:hover {
                img {
                    transform: scale(0.9);
                }
            }
        }
    }
}

// case contact info
.pxl-contact-info1 {
    .pxl-item--icon {
        color: #fff;
        font-size: 41px;
        background-color: $four_color;
        border-radius: 15px;
        min-width: 90px;
        width: 90px;
        height: 90px;
        position: relative;
        @include transition(all .25s cubic-bezier(.3,.3,0,.8));
        > * {
         @extend .pxl-middle;
     }
     img {
         max-height: 41px;
     }
     svg {
         height: 41px;
         fill: #fff;
     }
     .pxl-item--subtitle {
         position: absolute;
         width: 36px;
         height: 38px;
         z-index: 99;
     }
 }
 &:hover {
    .pxl-item--inner {
        border-color: transparent;
        box-shadow: 0px 10px 60px 0px rgba(137, 151, 186, 0.15);
    }    
}
li {
    list-style: none;
    .content {
        font-size: 18px;
        font-weight: 400;
        line-height: 27.88px;
        letter-spacing: -0.36px;
        color: $third_color;        
    }
}
.pxl-item--title {
  margin-bottom: 16px;
}
.pxl-item--image {
    position: relative;
    img {
        border-radius: 10px 10px 0 0;
        width: 100%;
    }
    .pxl-item--icon {
        position: absolute;
        bottom: -43px;
        left: 50%;
        transform: translateX(-50%);
        transition: 500ms ease;
    }
}
.pxl-item--inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;  
  border-radius: 0 0 10px 10px;
  background-color: #fff; 
  border: 1px solid #E1E1E9;
  padding: 66px 70px 52px;
  @include transition(all 0.3s ease);
}
@media #{$max-xxl} {
  &.pxl-hide-lg {
     .pxl-item--icon {
        margin: 0;
    }
    .pxl-item--title {
        display: none;
    }
    .pxl-item--icon:hover {
        background-color: $primary_color;
        color: $secondary_color;
    }
}
}
}
@media #{$min-xxl2} {
    .pxl-contact-info-space {
        margin-right: 25px;
    }
    body.rtl {
        .pxl-contact-info-space {
            margin-left: 25px;
            margin-right: 0;
        }
    }
}

// case text editor
.pxl-text-editor {
    .pxl-item--inner {
        display: inline-block;
    }
    p {
        margin-bottom: 30px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .pxl-text--highlight {
        padding: 4px 0;        
        color: #fff;
    }
}

// case links
.pxl-link {
    list-style: none;
    margin: 0;
    padding: 0;
    a {
        display: inline-flex;
        font-size: 14px;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 24px;
        color: #fff;
        font-weight: 500;
        &:hover {
            color: $primary_color;
        }
    }
    svg {
        margin-right: 11px;
    }
    i {
        font-size: 17px;
        display: inline-flex;
        color: $primary_color;    
        margin-right: 11px;    
    }
    &.type-vertical li + li {
        margin-top: 11px;
    }
    &.type-horizontal {
        display: flex;
        flex-wrap: wrap;
    }
    &.style-line {
        li {
            &:last-child {
                a {
                    &:before {
                        content: none;
                    }
                }
            }            
        }
        a {
            position: relative;
            &:before {
                content: '';
                position: absolute;
                height: 18px;
                width: 1px;
                background-color: #fff;
                top: 50%;
                right: -30px;
                transform: translatey(-50%);
            }
        }
    }
    &.style-divider {
       a {
          position: relative;
          &:before {
             content: '';
             height: 1px;
             background-color: $primary_color;
             position: absolute;
             bottom: -4px;
             left: 0;
             width: 100%;
             opacity: 0;
         }
         &:hover:before {
             opacity: 0.6;
             bottom: 4px;
         }
     }
 }
 &.style-box {
    a {        
        font-family: 'Outfit';
        font-size: 12px;
        color: #fff;
        padding: 8px 12px;
        border: solid 2px rgba(255, 255, 255, .2);
        line-height: 1em;
        margin: 0 6px 8px 0;
        border-radius: 30px;
        position: relative;
    }
    i {
        font-size: 22px;
        margin: 0;
    }
    svg {
        height: 22px;
    }
    i, svg {
        position: absolute;
        top: 50%;
        right: 14px;
        @include transform(translate((0, -50%));
            color: $primary_color;
            fill: $primary_color;
        }
        &.type-vertical li + li {
            margin-top: 15px;
        }
    }
}

// case icons
.pxl-icon1 {
    h5 {        
        color: #fff;        
        display: block;
        margin: 0;          
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.6px;
        text-transform: uppercase;        
        @include transition(all .25s cubic-bezier(.645,.045,.355,1));        
    }
    .icon_feature {
        img {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            height: 62px;
            padding: 0.5em;
            width: 84px;
            margin: 10px 0;
            @media (max-width: 1024px) {
                width: 66px;
                height: 50px;
            }
        }
    }
    &.style-default {
        a {
            color: #000;
            &:hover {
                color: $primary_color;
            }
        }
    }
    &.style-round-box {
        display: flex;
        align-items: center;
        @media #{$max-md} {
            flex-wrap: wrap;
        }
        &.style-1 {
          a {
            width: 45px;
            height: 45px;
            line-height: 45px;    
            margin-right: 24.2px; 
            flex-shrink: 0;     
            background-color: rgba(255, 255, 255, .1);            
            color: #fff;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
            font-size: 20px;
            position: relative;
            z-index: 1;
            i {
                @extend .pxl-middle;
                display: inline-flex;
            }
            &:hover {
                color: $primary_color;              
            }
        }
    }
    &.style-2 {        
        h5 {
            text-transform: capitalize;
            font-size: 24px;
            font-weight: 600;
            line-height: 32px;
        }
        a {
            line-height: 50px;    
            margin-right: 17px; 
            flex-shrink: 0;     
            color: #fff;        
            text-align: center;        
            display: inline-block;
            font-size: 16px;
            position: relative;
            z-index: 1;
            img {
                background-color: transparent;
                border-radius: 0;
                padding: 0;
                width: 100%;
                height: auto;
            }
            i {
                @extend .pxl-middle;
                display: inline-flex;
            }
            &:hover {
                background-color: $primary_color;
            }
        }
    }
}
}

// case image
.pxl-image-single {
    @include border-radius(inherit);
    *, img {
        @include border-radius(inherit);
    }
    img {
        width: auto;
    }
    &.pxl-hover1 .pxl-item--inner {
        position: relative;
        overflow: hidden;
        img {
            @include transition(transform 1.5s cubic-bezier(.19,1,.22,1));
        }
        &:hover img {
            @include transform(scale(1.06));
        }
    }
    &.pxl-hover2 .pxl-item--inner {
        img {
            @include transition(all 0.5s);
        }
        &:hover img {
            @include transform(scale(0.95));
        }
    }
}
.pxl-image-tilt {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.pxl-image-tilt-active {
    overflow: hidden;
}

.wp-title {
    .pxl-title--highlight {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        @include background-gradient-text(to right, $gradient_color_from 0%, $gradient_color_to 100%);            
    }
}

@keyframes moveBackground {
    from { mask-position: 0 0; }
    to { mask-position: 100% 0; }
}

// case heading
.pxl-heading {
    .pxl-text--highlight {
        color: $primary_color;
    }
    .pxl-title--highlight {
        color: $primary_color;     
        display: inline-block;     
    }
    &.pxl-highlight-after {
        .pxl-title--highlight {
            position: relative;
            &:before {
                content: '';
                position: absolute;
                width: calc(100% + 20px);
                height: 100%;
                mask-image: url(../img/highlight.png);
                mask-size: cover;         
                background-color: rgba($primary_color_hex,0.3);       
                left: -10px;
                top: 0;
                animation: moveBackground 5s linear infinite;
            }
            .pxl-item--text {
                position: relative;
                z-index: 1;
            }
        }
    }
    .pxl-title--outline {
      -webkit-text-stroke-width: 0.58px;
      color: transparent;
      -webkit-text-stroke-color: #fff;
  }
  .pxl-title--line {
    position: relative;
    display: inline-flex;
    .pxl-item--after {            
        position: absolute;
        height: 15px;
        mask-image: url(../img/line-long.svg);
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: $primary_color;
        max-width: 100%;
        transition: 0.3s;
        bottom: 0;            
        left: 0;
    }
}
.pxl-heading--inner {
    display: inline-flex;
    position: relative;
    flex-direction: column;
    &.pxl-heading--left {
        flex-direction: row;
        align-items: baseline;            
    }
    .pxl-item--title {
        >.number {
            color: rgba(255, 255, 255, 0.13);
            position: absolute;
            right: 0;
            top: -20px;
            font-family: Outfit;
            font-size: 138px;
            font-weight: 700;
            line-height: 138px;
            @media (max-width: 1024px) {
                top: -50px;
                font-size: 80px;
                line-height: 1.2;
            }
        }
        &.divider-left {
            position: relative;                
            @media #{ $min-lg } {
                &:before {
                    width: 30px;
                    height: 3px;
                    border-radius: 30px;
                    background-color: $primary_color;
                    content: "";
                    display: inline-block;
                    top: -20px;
                    left: 0;
                    position: absolute;
                }
            }
        }
        &.divider-right {
            position: relative;
            @media #{ $min-lg } {
                &:after {
                    width: 30px;
                    height: 3px;
                    border-radius: 30px;
                    background-color: $primary_color;
                    content: "";
                    display: inline-block;
                    bottom: -20px;
                    left: 0;
                    position: absolute;                        
                }
            }
        }
    }
}
.pxl-text--slide {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    position: relative;
    span {
        display: inline-block;
        padding-bottom: 4px;
    }
}
.wow.letter {
    @include transform(translatey(100%));
    @include transition(.4s cubic-bezier(.24,.74,.58,1));
    &.animated {
        @include transform(translatey(0px));
    }
}
.pxl-item--title {
    position: relative;
    margin-bottom: 0;
    word-wrap: break-word;
    text-transform: capitalize;
    &.pxl-item--page-title {
        color: #fff;
    }
    &.pxl-item--gradient {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        @include background-gradient-text(0deg, #888 0%, #fff 75%);  
    }
    .icon-bottom {
        position: absolute;
        left: 0;
        bottom: -17px;
    }
}
.icon-heading {
    display: inline-flex;
    svg {
        path {
            fill: $primary_color;
        }
    }
    &.top {
        margin-bottom: 2px;
    }
    &.bottom {
        margin-top: 5px;
    }
}
.pxl-item--subtitle {
    color: #fff;
    margin-bottom: 17px;
    font-weight: 600;
    &.center {
        left: 50% !important;
        transform: translatex(-50%);
    }
    &.pxl-subtitle-dot {
        .pxl-item--subtext {                
            .dot {
                content: '';
                position: relative;
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background-color: #fff;
                &.dot-left {
                    left: -4px;                
                }
                &.dot-right {
                    right: -4px;                
                }
            }
        }
    }
    &.px-sub-title-default {
        .pxl-item--subtext {
            position: relative;
            display: inline-block;            
            color: #ffffff;
            font-size: 12px;
            line-height: 20px;
            @include background-gradient-text(to right, $gradient_color_from 0%, $gradient_color_to 100%);                        
            padding: 5px 16px;
            border-radius: 100px;
        }  
    }
    &.px-sub-title-style2 {
        margin-bottom: 0;             
        .pxl-item--subtext {
            font-family: 'Outfit';
            position: relative;
            display: inline-block;            
            color: $secondary_color;
            font-weight: 600;
            font-size: 16px;
            line-height: 1.625;   
        }  
    }
    &.px-sub-title-style4 {
        font-size: 32px;
        font-family: 'Outfit';
        font-weight: 600;
        line-height: 17.506px;
        .pxl-item--subtext {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        .pxl-heading--divider {
            display: inline-flex;
            align-items: center;
            height: 2px;
            width: 124px;
            background-color: #fff;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 20px;
                background-color: #fff;
                top: 50%;                
                transform: translateY(-50%);
                right: 0;                
            }
        }
    }
    &.px-sub-title-style3 {
        .pxl-item--subtext {
            display: inline-flex;
            gap: 5.8px;
            align-items: center;
            font-family: Inter;
            color: $secondary_color;
            font-size: 14px;
            font-weight: 500;
            line-height: 22px;
            text-transform: capitalize;
            border-radius: 200px;
            border: 1px solid rgba(122, 122, 122, 0.40);
            padding: 6px 28px 7px 33px;
            span {
                width: 43px;
                height: 43px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background-color: #fff;
                font-family: Outfit;
                font-size: 24px;
                font-weight: 600;
                color: $four_color;
                @include box-shadow(0px 7.556px 20px rgba(231, 188, 78, 0.50));
            }
        }
    }
    &.px-sub-title-stroke {            
        font-size: 36px;
        font-style: normal;
        letter-spacing: 2.16px;
        font-weight: 400;
        line-height: 57.87px;            
        color: transparent;
        &.stroke-animate {
            stroke-dasharray: 500;
            stroke-dashoffset: 500;
            animation: dash 5s linear forwards infinite, filling 5s ease-in forwards infinite;
        }
        &.absolute{
            position: absolute;
            z-index: -1;
            top: -33px;
            font-size: 70px;
            line-height: 60px;         
            -webkit-text-stroke: 0.58px #3d3d3d;
        }
    }
    &.px-sub-title-number {
        font-size: 18px;
        color: #0a1316;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin-bottom: 26px;
        @media #{$max-sm} {
            letter-spacing: 0.1em;
            font-size: 16px;
        }
        span {
            display: inline-flex;
            align-items: center;
        }
        .pxl-item--number {
            font-style: normal;
            color: $primary_color;
            position: relative;
            &:before {
                content: '';
                width: 39px;
                height: 2px;
                background-color: $primary_color;
                position: absolute;
                top: 50%;
                right: 0;
                @include transform(translate(0, -50%));
            }
        }
    }
}
}

.pxl-divider{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    &.horizontal .pxl-divider-separator{
        border-top: 1px solid $border_color;
    }
    &.vertical .pxl-divider-separator{
        border-left: 1px solid $border_color;
    }
}


//pxl-history

.pxl-history-1 {
    display: flex;
    justify-content: space-between;
    position: relative;
    @media (max-width: 880px) {
        flex-direction: column;
    }
    >svg {
        position: absolute;
        top: -200px;
        left: 60px;        
        @media (max-width: 991px) {
            opacity: 0;
        }
    }
    .wrap-content {
        @media (max-width: 880px) {
            display: flex;
            align-items: center;
        }
        &:nth-child(3) {
            margin-top: -87px;
            @media (max-width: 880px) {
                margin-top: 80px;
            }
        }
        &:nth-child(4) {
            margin-top: -320px;
            @media (max-width: 880px) {
                margin-top: 80px;
            }
        }
        .box-1 {
            padding-top: 68px;
            @media (max-width: 880px) {
                padding-top: 0;
                padding-left: 68px;
            }
        }
        .desc {
            max-width: 293px;
        }
        .image {
            position: relative;
            display: inline-block;
            left: 27px;
            z-index: 1;
            &:after {
                content: '';
                position: absolute;
                top: -37px;
                right: -41px;
                z-index: -1;
                width: 91.28px;
                height: 92px;
                background-image: url(../img/mask-process.png);
            }
            img {
                border-radius: 15px;
            }
            .number-after {
                position: absolute;
                right: -60px;
                bottom: -54px;
                color: #E6EEFF;
                font-family: Inter;
                font-size: 178px;
                font-weight: 700;
                line-height: 0.8;
                z-index: -1;
            }
            .number-icon {
                position: absolute;
                width: 54px;
                display: flex;
                bottom: -26px;
                left: -27px;
                align-items: center;
                justify-content: center;
                height: 54px;
                border-radius: 50%;
                background: linear-gradient(270deg, #00D1FF 4.67%, #05F 94.31%);
                color: #fff;
                font-family: Outfit;
                font-size: 24px;                
                font-weight: 600;
                line-height: 34px;
                @media (max-width: 991px) {
                    width: 40px;
                    height: 40px;
                    font-size: 16px;
                }
            }
        }
    }

}
.pxl-history-2 {
    .wrap-content {
        display: flex;
        column-gap: 21px;
        padding-bottom: 35px;
        position: relative;
        &:hover {
            .icon {
                background-color: $four_color;
                color: #fff;
                border-color: transparent !important;
                &:before {
                    opacity: 1;
                }
            }
        }
        &:before {
            position: absolute;
            content: '';
            width: 2px;
            border-left: 2px dashed #D9D9D9;
            top: 0;
            left: 26px;
            height: 100%;
        }
        &:last-child {
            padding-bottom: 0;
            &:before {
                display: none;
            }
        }
        .icon {
            z-index: 2;
            width: 54px;
            min-width: 54px;
            height: 54px;
            border-radius: 100px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $four_color;
            font-weight: 600;
            position: relative;
            transition: 0.5s;
            &:before {
                content: '';
                position: absolute;
                width: 62px;
                border-radius: 50%;
                height: 62px;
                top: -4px;
                left: -4px;
                background-color: rgba($four_color_hex, 0.30);
                transition: 0.5s;
                opacity: 0;                
            }
        }
        .title {
            margin-top: 6px;
            color: #fff;
        }
        .desc {
            margin-top: 17px;
            color: #fff;            
            font-size: 15px;
            line-height: 26px;
        }
    }
}

// case text effect
.pxl-text-effect1 {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    @extend .ft-theme-default;
    padding-top: 240px;
    padding-right: 30px;
    padding-bottom: 44px;
    position: relative;
    overflow: hidden;
    color: #000;
    .pxl-item--text {
        transform: translatex(40px);
        opacity: 0;
        @include transition(all 300ms cubic-bezier(.3,.3,0,.8));
    }
    .pxl-divider--box {
        height: 222px;
        width: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
    }
    .pxl-divide--group {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .pxl-item--divider {
        background-color: $primary_color;
        position: absolute;
        @include transition(all 300ms cubic-bezier(.3,.3,0,.8));
        &.pxl-divider--left1 {
            height: 222px;
            left: 0;
            top: 100%;
            width: 5px;
        }
        &.pxl-divider--left2 {
            height: 29px;
            width: 5px;
            bottom: -29px;
            left: 0;
        }
        &.pxl-divider--top {
            width: 100%;
            height: 5px;
            top: 0;
            right: 100%;
        }
        &.pxl-divider--right {
            height: 100%;
            width: 5px;
            right: 0;
            bottom: 100%;
        }
        &.pxl-divider--bottom {
            width: 100%;
            height: 5px;
            bottom: 0;
            left: 100%;
        }
    }
    .pxl-item--holder {
        visibility: visible !important;
        &.animated {
            .pxl-item--text {
                transform: translatex(0px);
                opacity: 1;
                transition-delay: 1.5s;
            }
            .pxl-item--divider {
                &.pxl-divider--left1 {
                    top: 0;
                }
                &.pxl-divider--top {
                    right: 0;
                    transition-delay: 0.3s;
                }
                &.pxl-divider--right {
                    bottom: 0;
                    transition-delay: 0.6s;
                }
                &.pxl-divider--bottom {
                    left: 0;
                    transition-delay: 0.9s;
                }
                &.pxl-divider--left2 {
                    bottom: 0;
                    transition-delay: 1.2s;
                }
            }
        }
    }
    &.pxl-image {
        padding: 0;
        .pxl-item--image, .pxl-item--image-url {
            position: relative;
            img {
                width: 100%;
            }
            &:before {
                content: '';
                @extend .pxl-spill;
                background-color: rgba(#00261f, 0.74);
                z-index: 1;
            }
        }
        .pxl-item--image-url {
            min-height: 480px;
        }
        .pxl-item--text-wrap {
            position: absolute;
            top: 60px;
            right: 60px;
            bottom: 60px;
            left: 60px;
            z-index: 100;
            display: flex;
            flex-flow: column;
            .pxl-item--text-divider {
                min-height: 80px;
                width: 100%;
                flex-grow: 1;
                position: relative;
                margin-bottom: 55px;
                overflow: hidden;
                .pxl-item--divider {
                    height: 100%;
                    left: 0;
                    top: 100%;
                    width: 5px;
                }
            }
            .pxl-item--text {
                max-width: 400px;
            }
            .pxl-item--text-height {
                height: 110px;
                width: 100%;
            }
        }
        .pxl-divide--group {
            top: 60px;
            right: 60px;
            bottom: 60px;
            left: 60px;
            width: auto;
            height: auto;
            overflow: hidden;
            .pxl-divider--box {
                display: none;
            }
        }
        .pxl-item--divider.pxl-divider--left2 {
            height: 47px;
            bottom: -47px;
        }
        .pxl-item--holder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            &.animated {
                .pxl-item--text-wrap .pxl-item--text-divider .pxl-item--divider {
                    top: 0;
                }
                .pxl-item--divider.pxl-divider--left2 {
                    bottom: 0px;
                }
            }
        }
    }
}

.pxl-image-box-fullscreen.elementor-widget-pxl_text_effect {
    height: 100%;
    > .elementor-widget-container {
        height: 100%;
    }
    .pxl-text-effect1.pxl-image {
        height: 100%;
        .pxl-item--image-url {
            height: 100%;
        }
    }
}

// case list
.pxl-list {
    .pxl-item--icon {        
        font-size: 17px;
        i {
            color: $four_color;
        }
        svg {
            fill: $four_color;
        }
    }
    .pxl-item--text {
        font-weight: 500;
        text-transform: capitalize;
        color: $secondary_color;
    }
    .pxl--item {
        display: flex;
        flex-wrap: nowrap;
        + .pxl--item {
            margin-top: 6px;
        }
    }
}

// case project info
.single-case {
    .pxl-image-single {
        .pxl-item--image {
            img {
                object-fit: cover;
            }
        }
    }  
}
.pxl-project-info1 {
    position: relative;    
    box-shadow: 0 20px 30px 20px rgba(200,208,214,.25);
    padding: 97px 34px 35px;    
    max-width: 392px;
    @media #{$max-lg} {
        padding: 108px 15px 49px;        
    }
    @media (max-width: 991px) {
        max-width: 100%;
    }
    @media #{$max-sm} {

    }
    .contact-form-custom1 {
        .pxl-group--items {
            margin-bottom: 15px;
            >div {
                .wpcf7-form-control-wrap {
                    display: flex;
                    flex-direction: column;
                    .wpcf7-not-valid-tip {
                        color: $primary_color;
                    }
                }
                + div {
                    margin-top: 10px;
                }
            }
        }
        .pxl-item--title {
            display: block;
            margin-bottom: 12px;
            color: #fff;
        }
        .pxl--item {
            p {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin: 0;
            }
        }
    }
    >.pxl-item--title {
        position: absolute;        
        left: 0;
        top: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        padding: 22px 72px 21px 68px;
        border-radius: 8.6px 8.6px 0 0;
        overflow: hidden;
        @media #{$max-lg} {
            padding: 9px 0 18px 0;            
        }
        span {
            position: relative;
            z-index: 2;
        }
        &:after {
            z-index: 1;
            content: '';
            position: absolute;
            background-color: $secondary_color;           
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;     
        }
    }
    .pxl--item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .pxl-icon {
            width: 43px;
            height: 43px;
            display: inline-flex;
            align-items: center;
            justify-content: center;            
            color: #fff;
            background-color: $four_color;
            border-radius: 50%;            
            margin-right: 17px;
            i {
                font-size: 16px;
            }
            svg {
                max-height: 16px;                
            }
        }
        .pxl--item-content {
            display: flex;
            flex-direction: column;
        }
        label {
            color: #687799;
            font-size: 15px;
            font-weight: 400;
            line-height: 26px;            
        }
        h8 {
            color: $third_color;            
            margin-bottom: 0;
            line-height: 24px;
        }
        + .pxl--item {
            margin-top: 21px;
            padding-top: 18px;
            border-top: 1px solid #EDEDED;
        }
    }
}

.pxl-case-info1 {
    position: relative;
    background: rgba(61, 61, 61, 0.30);
    border: 1px solid #3d3d3d;
    border-bottom-color: transparent;
    padding: 106px 24px 22px;
    color: #fff;
    max-width: 310px;
    @media #{$max-lg} {
        padding: 108px 15px 49px;        
    }
    @media (max-width: 991px) {
        max-width: 100%;
    }
    @media #{$max-sm} {

    }
    ~.pxl--item-weight {
        background-color: #161616;
        border: 1px solid #3d3d3d;
        border-top-color: transparent;
        padding: 23px 24px 28px;
        max-width: 310px;        
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        &:after {
            content: '';
            position: absolute;
            width: 1px;
            height: 70px;
            background-color: #3d3d3d;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }            
        >div {
            display: flex;
            flex-direction: column;
            h4 {
                display: flex;       
                align-items: baseline;         
                line-height: 36px;
                letter-spacing: 1.92px;
                margin-bottom: -5px;
                span {
                    font-family: 'Inter';
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 30px;
                }
            }
            label {
                font-family: 'Inter';
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 26px;
                text-transform: uppercase;
            }
        }
    }
    >.pxl-item--title {
        position: absolute;        
        left: 0;
        top: 0;
        width: 100%;
        text-align: center;
        font-size: 18px;        
        color: #fff;
        line-height: 30px;
        padding: 9px 72px 18px 68px;
        letter-spacing: 0.72px;
        @media #{$max-lg} {
            padding: 9px 0 18px 0;            
        }
        span {
            position: relative;
            z-index: 2;
        }
        &:after {
            z-index: 1;
            content: '';
            position: absolute;
            background-color: $primary_color;           
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;     
        }
    }
    .btn.btn-default {
        padding: 14px 44px;        
        max-width: 209px;
        margin: 36px auto 0;
        display: flex;
        &:before,&:after {
            background-color: $primary_color;
        }
        &:hover {
            span {
                color: #fff;
                position: relative;
                z-index: 1;
            }
        }
    }
    .pxl--item {
        display: flex;
        align-items: center;
        .pxl-item--star i {
            font-size: 14px;
            margin: 0 4px;
        }
        label {
            text-transform: uppercase;
            display: inline-flex;
            font-size: 14px;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: 0.28px;
        }
        span {
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 26px;
            color: $third_color;
            display: flex;
            align-items: center;
        }
        + .pxl--item {
            margin-top: 18px;
            padding-top: 15px;
            border-top: 1px solid #3d3d3d;
        }
    }
}

// case gallery grid
.pxl-gallery-grid1 {
    .pxl-grid-item {
        padding: 0 5px;
    }
    img {
        width: 100%;
    }
    a {
        height: 30px;
        width: 30px;
        display: block;
        line-height: 30px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: $primary_color;
        font-size: 13px;
        color: #fff;
        z-index: 99;
        @include transform(translatey(-50px));
        opacity: 0;
        border-radius: 3px;
        &:hover {
            color: #fff;
        }
    }
    .item--inner {
        position: relative;
        margin-bottom: 10px;        
        overflow: hidden;
        &:before {
            @extend .pxl-spill;
            background-color: rgba(#000, 0.71);
            @include transition(all .25s cubic-bezier(.645,.045,.355,1));
            opacity: 0;
        }
        &:hover {
            a {
                @include transform(translatey(0px));
                opacity: 1;
            }
            &:before {
                opacity: 1;
            }
        }
    }
}

.pxl-gallery-carousel1 {
    .pxl-swiper-slide {
        padding: 0;
        .pxl-item--inner {
            position: relative;
            &:hover {
                .pxl-media-image-overlay-container {
                    -webkit-transform: scale(1);
                    transform: scale(1);
                    opacity: 1;
                    visibility: visible;
                    .pxl-content-icon-wrapper {
                        .pxl-content-icon {
                            span {
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                    }
                }
            }
            .item--image {
                img {
                    min-height: 384px;
                    object-fit: cover;
                }
            }
            .pxl-media-image-overlay-container {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                opacity: 0;
                padding: 20px;
                visibility: hidden;
                width: 100%;
                background-color: rgba(21,23,28, 0.9);
                border: 1px solid $primary_color;
                -webkit-transform: scale(0.9);
                transform: scale(0.9);
                -webkit-transition: all .8s ease;
                transition: all .8s ease;
                .pxl-content-title {
                    a {
                        color: $primary_color;
                    }
                }
                .pxl-content-icon-wrapper {     
                    display: inline-flex;
                    justify-content: inherit;               
                    margin-bottom: 25px;
                    .pxl-content-subtitle {                        
                        letter-spacing: 0.5px;
                        text-transform: capitalize;
                        margin-bottom: 10px;
                    }
                    .pxl-content-icon {
                        display: inline-flex;
                        justify-content: inherit;
                        color: #fff;
                        span {
                            display: inline-flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 2rem;
                            height: 1em;
                            line-height: 1;
                            padding: 5px;
                            position: relative;
                            text-align: center;
                            vertical-align: top;
                            width: 1em;
                            z-index: 0;
                            font-size: 50px;
                            width: 100px;
                            height: 100px;
                            border: 3px solid #fff;
                            will-change: transform;
                            -webkit-border-radius: 50%;
                            border-radius: 50%;
                            -webkit-transform: scale(1.2);
                            transform: scale(1.2);
                            opacity: 1;
                            -webkit-transition: all .8s ease;
                            transition: all .8s ease;
                        }
                    }                    
                }
            }
        }
    }
}

// case pagination
.pxl-pagination1 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    @media #{$max-sm} {
        text-align: center;
    }
    i {
        @include transition(all .25s cubic-bezier(.3,.3,0,.8));
    }
    a {
        font-size: 24px;
        display: inline-flex;
        align-items: center;
        color: #fff;
        text-transform: capitalize;
        font-weight: 500;
        &:hover i {
            color: $primary_color;
        }
    }
    span {
        display: inline-flex;
        margin: 0 16px;
        @media #{$max-sm} {
            margin: 0 10px;
        }
    }
    .pxl--item {
        width: 50%;
        padding: 0 15px;
        @media #{$max-sm} {
            width: 100%;
            + .pxl--item {
                margin-top: 15px;
            }
        }
    }
}

// Case Process
.pxl-process1 {
    .pxl-item--step {
        font-size: 16px;
        font-weight: 700;
        display: inline-flex;
        font-family: Inter;
        color: $four_color;
        width: 35px;
        min-width: 35px;
        align-items: center;
        justify-content: center;
        height: 35px;
        line-height: 35px;
        @include border-radius(500px);
        background-color: #EEFCF4;
        border: 1px solid #C1E9D2;
    }
    .pxl-item--title {           
        margin-bottom: 19px;
    }
    .pxl-item--description {
        font-size: 15px;
        line-height: 26px;
    }
    .pxl-item--inner {
        display: flex;
        column-gap: 23px;
    }
    &.style-2 {
        .pxl-item--step {
            background-color:  #FFF;
            box-shadow: 0px 10.60421px 21.20842px 0px rgba(137, 151, 186, 0.25);
            width: 41px;
            min-width: 41px;
            text-align: center;
            height: 41px;
            line-height: 41px;
            font-size: 21px;
            color:$primary_color;
        }
        .pxl-item--title {
            margin-top: 4px;
        }   
    }   
}

// case image
.pxl-image-single {
    position: relative;
    .pxl-item--bg {
        height: 320px;
    }
    .pxl-divider--box {
        height: 60%;
        width: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
    }
    .pxl-divide--group {
        position: absolute;
        top: 30px;
        left: -30px;
        right: 30px;
        bottom: -30px;
        overflow: hidden;
        z-index: -1;
        @media #{$max-lg} {
            top: 20px;
            left: -20px;
            right: 20px;
            bottom: -20px;
        }
    }
    .pxl-item--divider {
        background-color: $primary_color;
        position: absolute;
        @include transition(all 300ms cubic-bezier(.3,.3,0,.8));
        &.pxl-divider--left1 {
            height: 100%;
            left: 0;
            top: 100%;
            width: 1px;
        }
        &.pxl-divider--left2 {
            height: 100%;
            width: 1px;
            bottom: -29px;
            left: 0;
        }
        &.pxl-divider--top {
            width: 100%;
            height: 1px;
            top: 0;
            right: 100%;
        }
        &.pxl-divider--right {
            height: 100%;
            width: 1px;
            right: 0;
            bottom: 100%;
        }
        &.pxl-divider--bottom {
            width: 100%;
            height: 1px;
            bottom: 0;
            left: 100%;
        }
    }
    .pxl-item--inner {
        visibility: visible !important;
        &.animated {
            .pxl-item--divider {
                &.pxl-divider--left1 {
                    top: 0;
                }
                &.pxl-divider--top {
                    right: 0;
                    transition-delay: 0.5s;
                }
                &.pxl-divider--right {
                    bottom: 0;
                    transition-delay: 0.9s;
                }
                &.pxl-divider--bottom {
                    left: 0;
                    transition-delay: 1.2s;
                }
                &.pxl-divider--left2 {
                    bottom: 0;
                    transition-delay: 1.5s;
                }
            }
        }
    }
}

// case contact form
.pxl-contact-form {
    .pxl--form-heading {
        font-size: 24px;
        margin-bottom: 30px;
        margin-top: -6px;
    }
    &.btn-w-full {
        p {
            width: 100%;
        }
        button, .wpcf7-submit {
            width: 100%;
        }
    }
    .contact-form-custom3 {
        position: relative;
        .your-emaill {
            p,span {
                margin-bottom: 0;
            }
            input {
                height: 79px;
                border: 1px solid #E6EEFF;            
                border-radius: 400px;
                background-color: #fff;
                font-size: 16px;
                width: 100%;
                padding: 0 37px;
                &:not(.wpcf7-submit) {
                    color: $third_color;
                }
            }
        }
        button {            
            position: absolute;
            background-color: $secondary_color;
            top: 50%;
            border-radius: 100px;
            font-size: 18px;
            font-weight: 600;
            line-height: 17.5px;
            color: #fff;
            padding: 21px 42px;
            transform: translateY(-50%);
            right: 37px;
            @media (max-width: 575px) {
                position: relative;
                right: 0;
                top: 10px;
                transform: none;
            }
        }
    }
    .wpcf7-form-control-wrap {
        display: inline-flex;
        flex-wrap: wrap;
        width: 100%;
        position: relative;
        margin-bottom: 28px;
        .wpcf7-not-valid-tip {
            font-size: 12px;
            background-color: #dc3232;
            color: rgba(255,255,255,0.87);
            padding: 0 6px;
            border-radius: 0px;
            line-height: 22px;
            z-index: 99;
            position: absolute;
            top: -30px;
            left: 26px;
            &:before {
                content: '';
                position: absolute;
                top: 100%;
                border-width: 5px;
                border-color: #dc3232 transparent transparent;
                border-style: solid;
                left: 10px;
            }
        }
    }
    .pxl-group--items {
        display: flex;
        @media #{$max-sm} {
            display: block;
        }
        .pxl--item {
            @media #{$max-sm} {
                margin: 0 0 10px;
                .wpcf7-submit {
                    width: 100%;
                }
            }
            &:first-child {
                flex-grow: 1;
            }
            + .pxl--item {
                margin-left: 16px;
                @media #{$max-sm} {
                    margin: 0;
                }
            }
        }
    }
    form {
        position: relative;
        .wpcf7-acceptance {
            width: 100% !important;
            height: auto !important;
            border: none !important;
            padding: 0 !important;
            .wpcf7-list-item-label {
                font-size: 15px;
                color: #687799;
                font-weight: 400;
                line-height: 26px;
                display: block;
                a {
                    color: inherit;
                    text-decoration: underline;
                    text-decoration-color: #cfcfcf;
                    &:hover {
                        color: $primary_color;
                        text-decoration: none;
                    }
                }
            }
            .wpcf7-list-item {
                display: flex;
                align-items: center;
                margin: 0;
                position: relative;
                padding-left: 28px;
                label {
                    margin-bottom: 0;
                }
                input, .wpcf7-list-item-label:before {
                    content: '';
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    @include transform(translate(0, -50%));
                    margin: 0;
                    cursor: pointer;
                    @include transition(all .25s cubic-bezier(.645,.045,.355,1));
                    border-radius: 3px;
                }
                .wpcf7-list-item-label:before {
                    border: 2px solid #B8B9DA;
                    @include border-radius(3px);
                    z-index: 1;
                    background-color: transparent;
                }
                .wpcf7-list-item-label:after {
                    content: "\f112";
                    font-family: "caseicon";
                    position: absolute;
                    left: 4px;
                    font-size: 10px;
                    top: 50%;
                    @include transform(translate(0, -50%));
                    color: #B8B9DA;
                    z-index: 2;
                    opacity: 0;
                    @include transition(all .25s cubic-bezier(.645,.045,.355,1));
                }
                input {
                    opacity: 0;
                    z-index: 3;
                    &:checked + .wpcf7-list-item-label:before {
                        background-color: transparent;   
                        border-color: #B8B9DA;   
                    }
                    &:checked + .wpcf7-list-item-label:after {
                        opacity: 1;
                    }
                }
            }
        }
        .wpcf7-response-output {
            margin: 30px 0 10px;
            border: none;
            background-color: rgba(#fff, 0.67);
            border-radius: 5px;
            font-size: 14px;
            padding: 12px 20px;
            @include box-shadow(0 0 13px rgba(#9a9a9a, 0.13));
        }
        .wpcf7-spinner {
            display: none;
        }
        &:before {
            content: '';
            width: 30px;
            height: 30px;
            @include border-radius(100%);
            border-color: transparent $primary_color transparent $primary_color;
            border-width: 2px;
            border-style: solid;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            animation: pxl_spin .6s infinite linear;
            -webkit-animation: pxl_spin .6s infinite linear;
            box-sizing: border-box;
            z-index: 2;
            @include transition(all .25s cubic-bezier(.645,.045,.355,1));
            visibility: hidden;
        }
        &.submitting {
            * {
                opacity: 0.66;
            }
            &:before {
                opacity: 1;
                visibility: visible;
            }
        }
    }
    &.box-style-white {
        background-color: #fff;
        padding: 74px 58px;
        @include border-radius(10px);
        @include box-shadow(0 0 43px rgba(#071755, 0.1));
        @media #{$max-lg} {
            padding: 40px 24px;
        }
        .pxl-contact-meta {
            text-align: center; 
            color: #fff;           
            h4 {
                color: #fff;
                margin-bottom: 17px;
                @media #{$max-lg} {
                    font-size: 26px;
                }
            }
            p {
                max-width: 315px;
                margin: 0 auto 32px;                
                font-size: 18px;                
                font-weight: 400;
                line-height: 27.88px;
                letter-spacing: -0.36px;
                @media #{$max-lg} {
                    font-size: 15px;
                }
            }
        }
    }
    &.notice-style2 {
        .wpcf7-response-output {
            position: absolute;
            top: 100%;
            margin-top: 10px;
            margin-bottom: 0px;
            border-radius: 0px;
        }
    }

}
.pxl-contact-form1 {
    .contact-form-about {
        .wpcf7-acceptance-wrap {
            margin-top: -6px;
            margin-bottom: 8px;
            label {
                margin-bottom: 0;
            }
        }
        .wpcf7-acceptance .wpcf7-list-item-label {
            color: #ACC0BF;
        }
        .pxl--item {
            input[type="text"],input[type="email"],.pxl-select-higthlight {
                height: 62px;
            }
            button {
                font-size: 18px;
                line-height: 17.506px;    
                padding: 22px 55px;
            }
            .btn,p {
                width: 100%;
            }
            &.your-name {
                .wpcf7-form-control-wrap {
                    position: relative;
                    &:after {
                        content: "\f108";
                        font-family: Flaticon;
                        position: absolute;
                        font-size: 18px;
                        color: $third_color;   
                        right: 33px;
                        top: 50%;
                        transform: translateY(-50%);             
                    }
                }
            }
            &.your-emaill {
                .wpcf7-form-control-wrap {
                    position: relative;
                    &:after {
                        content: "\f10a";
                        font-family: Flaticon;
                        position: absolute;
                        font-size: 18px;
                        color: $third_color;   
                        right: 33px;
                        top: 50%;
                        transform: translateY(-50%);             
                    }
                }
            }
        }
    }
}
.pxl-contact-form1 {
    .wpcf7-form-control:not(.wpcf7-submit), .pxl-select-higthlight {        
        color: #5F6973;                
    }
    textarea {
        height: 138px;
    }
    .pxl--form-icon {
        position: absolute;
        top: 50%;
        z-index: 1;
        right: 0;
        margin: 12px 22px;
        @include transform(translate(0, -50%));
        &.icon-align-left {
            left: 0;
            right: auto;
            margin: 0 18px;
        }
        &.icon-align-top {
            top: 0;
            @include transform(translate(0, 0%));
        }
        + .wpcf7-form-control {
            padding-left: 44px;
            padding-right: 44px;
        }
        &.style2 {
            color: #3c3c3c;
            right: auto;
            left: 0;
            margin: 0;
            + .wpcf7-form-control {
                padding-left: 26px;
                padding-right: 26px;
            }
        }
    }
    .pxl--item {
        label {
            display: block;
            color: #fff;
            font-weight: 500;                                    
            margin-bottom: 10px;
        }
        > p {
            margin-bottom: 0;
        }
        .btn {          
            padding: 21px 55px;  
            i {
                padding-left: 10px;
            }
            span,i {
                position: relative;
                z-index: 1;
            }
            &:hover {
                span {
                    color: #fff;
                }
            }
            &:before,&:after {
                background-color: $primary_color;
            }
        }
    }
    .pxl-select .pxl-select-higthlight::before {
        background-color: transparent;
        color: inherit;
        width: auto;
    }
}

// case text slip
@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translatex(0%);
        transform: translatex(0%);
    }

    100% {
        -webkit-transform: translatex(-100%);
        transform: translatex(-100%);
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translatex(0%);
        transform: translatex(0%);
    }

    100% {
        -webkit-transform: translatex(-100%);
        transform: translatex(-100%);
    }
}
@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translatex(-100%);
        transform: translatex(-100%);
    }

    100% {
        -webkit-transform: translatex(0%);
        transform: translatex(0%);
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translatex(-100%);
        transform: translatex(-100%);
    }

    100% {
        -webkit-transform: translatex(0%);
        transform: translatex(0%);
    }
}

.pxl-text-slip1 {
    .pxl-item--container {
        white-space: nowrap;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        position: relative;
    }
    .pxl-item--text {     
        margin-bottom: 0;
        position: relative;
        color: #110e10;
        letter-spacing: 1.92px;
        display: flex;        
        white-space: nowrap;
        svg {
            margin: 4px 29px 4px 29px;
            animation: pxl_spin_rv 8s ease-out infinite;
            -webkit-animation: pxl_spin_rv 8s ease-out infinite;
        }
        @media #{$max-lg} {

        }
        @media #{$max-sm} {

        }
    }
    .pxl-item--inner,.pxl-item--inner-font {
        display: flex;
        align-items: center;
    }
    &.pxl-slide-to-left, &.pxl-slide-to-right {
        overflow: hidden;
        .pxl-item--inner {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    &.pxl-slide-to-left {
        .pxl-item--inner {            
            -webkit-animation: slide-left 30s linear infinite;
            animation: slide-left 30s linear infinite;
        }
    }
    &.pxl-slide-to-right {
        .pxl-item--inner {            
            -webkit-animation: slide-right 30s linear infinite;
            animation: slide-right 30s linear infinite;
        }
    }
    &.pxl-text-white-shadow {
        .pxl-item--container {
            background-color: $primary_color;
            position: relative;
            padding: 11px 0;
            &:after, &:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 2px;
                background-color: #110e10;
                left: 0;
            }
            &:after {
                top: 6px;
            }
            &:before {
                bottom: 6px;
            }
        }
    }
}

// case slider widget
.pxl-element-slider {
    .pxl-slider--image {
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100%;
        @include transition(all 300ms linear 0ms);
    }
    .pxl-slider--overlay {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        @include transition(all 300ms linear 0ms);
        overflow: hidden;
    }
    .pxl-slider--inner {
        position: relative;
        z-index: 1;
    }
}

// case image box
.pxl-image-box1 {
    .pxl-item--image {
        border-radius: 90px 0px;
        border: 7px solid #FFF;
        overflow: hidden;
        img {
            width: 100%;
            object-fit: cover;
        }
    }
    .pxl-item--holder {
        position: absolute;
        bottom: 7px;
        right: 7px;        
        background-color:$four_color;
        border-radius: 0 50px;
        padding: 21px 75px;
        max-width: 139px;
        max-height: 139px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        @media (max-width: 767px) {
            padding: 15px 23px;            
        }
        .pxl-item--title {            
            margin-bottom: 0;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            line-height: 18px;
            text-transform: capitalize;            
        }
        .pxl-item--sub-title {
            font-family: Outfit;
            color: #fff;
            font-size: 50px;
            font-weight: 600;
            line-height: 66px;
            text-transform: capitalize;
        }
    }
}
.pxl-image-box4 {
    .pxl-item--inner {
        .pxl-item--holder {
            position: absolute;
            top: 0;
            left: -110px;
            background-color: $primary_color;
            width: 198px;
            height: 198px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            @media (max-width: 1024px) {
                left: 0;
            }
            .pxl-item--title {
                color: #FFF;                
                font-family: "Pacifico", Sans-serif;
                max-width: 150px;
                text-align: center;
                font-size: 29.636px;                
                font-weight: 400;
                transform: rotateZ(-35deg);
                line-height: 32.599px;
            }
            &:after,&:before {
                content: '';
                position: absolute;
                width: 173px;
                height: 173px;
                border-radius: 50%;
                background-color: transparent;
                border:  1.66px solid #fff;                
            }
            &:after {
                top: 17px;
                left: 15px;
                animation: pxl_rotate3d 5s linear infinite;
            }
            &:before {
                top: 14px;
                left: 11px;
                animation: pxl_rotate3d_v2 5s linear infinite;
            }
        }
    }
}
.pxl-image-box3 {
    .pxl-item--inner {
        .pxl-item--bg {
            mask-repeat: no-repeat;
            img {
                height: 721px;
                object-fit: cover;
            }
        }
        .pxl-item--bg-after {
            position: absolute;
            top: 0;
            z-index: -1;
            left: -36px;
            height: 100%;
            img {
                height: 100%;
            }
        }
    }
}
.pxl-image-box2 {
    .pxl-item--inner {
        max-width: 392px;
        overflow: hidden;
        position: relative;        
        .mask {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translatex(-50%);
        }
        .pxl-item--holder{
            position: absolute;
            bottom: 0;
            z-index: 2;
            text-align: center;
            left: 50%;
            transform: translatex(-50%);
            bottom: 42px;
            min-width: 264px;
            width: 264px;
            @media (max-width: 480px) {
                min-width: 210px;
                width: 230px;
            }
            .pxl-item--title {
                display: block;
                color: #FFF;
                text-align: center;   
                margin-bottom: 30px;                             
            }
            .holder-inner {
                background-color: #fff;
                border-radius: 9px; 
                position: relative;
                padding: 19px 19px 17px 19px;                
                &:before {
                    width: 100%;
                    height: 100%;
                    right: -5px;
                    position: absolute;
                    content: '';
                    top:0;
                    border-radius: 9px;
                    background-color: $four_color;
                    z-index: -1;
                }
                .icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: 50%;
                    transform: translatey(-50%);
                    left: -23px;
                    width: 50px;
                    border-radius: 1000px;
                    height: 50px;
                    padding: 6px;
                    @include background-gradient-rotate(to right, $primary_color, $four_color);                        
                    box-shadow: 0 0 0px 4px #{'rgba(var(--primary-color-rgb),0.3)'};
                    svg {
                        animation: pxl_phone_ring 1.8s ease-out infinite;
                    }
                    @media (max-width: 480px) {
                        height: 40px;
                        width: 40px;
                        padding: 12px;
                    }
                }
                .pxl-item--sub-title {
                  -webkit-background-clip: text;
                  @include background-gradient-rotate(to right, $primary_color, $four_color);                                          
                  -webkit-text-fill-color: transparent;               
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 24px;
              }
              .pxl-item--link {
                font-family: 'Outfit';
                display: block;                
                color:  #111E21;                    
                font-size: 30px;
                font-weight: 600;
                line-height: 36px;
            }
        }
    }
}
&.style-2 {
    max-width: 310px;
    .pxl-item--inner {
        padding-bottom: 0;
        .pxl-item--holder {
            bottom: 33px;
            min-width: 207px;
            width: 207px;
            .holder-inner {
                padding: 9px 19px 7px 19px;
            }
            .icon {
                left: -23px;
                width: 38px;
                border-radius: 1000px;
                height: 38px;
                svg {
                    width: 17px;
                }
            }
            .pxl-item--title {
                font-size: 14px;
                line-height: 24px;
                margin-bottom: 9px;
            }
            .pxl-item--sub-title {
                font-size: 12px;
            }
            .pxl-item--link {
                font-size: 22px;
            }
        }
    }
}
}

body.rtl {
    .pxl-text-effect1 .pxl-divide--group, .pxl-image-single .pxl-divide--group {
        transform: scalex(-1);
    }
    .pxl-link.style-box a {
        padding-left: 42px;
        padding-right: 22px;
        i {
            right: auto;
            left: 14px;
        }
    }
    .pxl-heading .pxl-item--subtitle.px-sub-title-number .pxl-item--number::before {
        right: auto;
        left: 0;
    }
}

.pxl--author-info-e {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    .entry-author-avatar {
        width: 100%;
        max-height: 257px;
        overflow: hidden;
        img {
        }
    }
    .entry-author-meta {
        width: 100%;
        .author-name {
            >p {                
                font-style: normal;
                font-weight: 500;
                font-size: 12px;
                line-height: 20px;
                text-transform: uppercase;
                color: #839297;
                margin-bottom: 10px;
            }
            font-size: 22px;
            font-weight: 400;
            line-height: 30px;            
            color: $secondary_color;
            margin-bottom: 16px;
        }
        .author-description {
            margin-top: 21px;            
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 26px;
            margin-bottom: 26px;
        }
        .user-social {
            display: flex;
            align-items: center;
            margin-bottom: 0;
            flex-wrap: wrap;
            li {
                list-style: none;
                margin-right: 12px;
                a {
                    display: flex;
                    align-items: center;
                    text-align: center;
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    background-color: rgba(255, 255, 255, 0.20);
                    border-radius: 50%;
                    color: #fff;
                    font-size: 14px;
                    font-weight: 400;
                    transition: .3s linear;
                    &:hover {
                        background-color: $primary_color;               
                    }
                    i {
                        display: flex;
                        transition: .3s linear;
                        align-items: center;
                        justify-content: center;
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                    }
                }
            }
        }
    }
}

// pxl-time-table
.pxl-time-table {
    &.mptt-shortcode-table {
        tbody {
            .mptt-event-container {
                outline: #272727 solid 1px;
                &:hover {
                    .event-title {
                        text-decoration: none;
                    }
                    .event-user {
                        color: #fff;
                    }
                }
                .event-title {
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 15.96px;
                    letter-spacing: 0.21px;
                    text-transform: uppercase;
                }
                .event-user {
                    color: $third_color;
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 18.667px;
                    .avatar {
                        display: none;
                    }
                }
            }
            td {
                border: 1px solid #272727;                    
            }
            tr {
                &:nth-child(2n+2) {
                    background-color: transparent;                
                }
            }
        }
        tr {
            &:nth-child(2n+2) {
                background-color: transparent;                
            }
            td {
                &.event {
                    min-width: 150px;
                }
                &.mptt-shortcode-hours {
                    width: 130px;
                    text-align: center;
                }
            }
            &.mptt-shortcode-row {
                th {
                    background-color: transparent;
                    border: 1px solid #272727;
                    color: $third_color;
                    font-size: 12px;
                    text-transform: uppercase;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 14px;
                    letter-spacing: 0.6px;
                    padding: 25px 0 21px;
                }
            }
        }
    }
}
#pxl-time-table-v2 {
    .mptt-shortcode-table tbody td.event {
        background: rgba(255, 255, 255, 0.05);                
    }
    .mptt-shortcode-event.mptt-event-vertical-middle .mptt-event-container {
        background-color: transparent !important;
        &:hover {
            background-color: $primary_color !important;
        }
    }
    .mptt-shortcode-table tbody td.mptt-shortcode-hours {
        background: rgba(255, 255, 255, 0.05);
    }
}
.mptt-shortcode-wrapper.mptt-table-fixed {
    overflow-x: hidden;
    @media (max-width: 1366px) {
        overflow-x: scroll;        
    }
    .mptt-menu.mptt-navigation-tabs {
        display: none;        
    }
}

// countdown
//--------------------------------------------------
.pxl-countdown-layout1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1;
    justify-content: center;
    .countdown-amount {
        font-family: Outfit;
        font-size: 48px;
        font-weight: 600;
        color: $secondary_color;
        margin-top: 2px;
        margin-bottom: 10px;
        @media #{$max-sm} {
            font-size: 30px;
        }
    }
    .countdown-period {
        font-family: Inter;        
        font-weight: 400;
        font-size: 18px;
        text-transform: uppercase;
        line-height: 28px;        
        color: $four_color;
    }

    .countdown-item {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: 0 22px;
        margin-bottom: 20px;    
        svg {
            display: none;
        }
        &:after {
            content: ':';
            position: absolute;
            right: 0;
            top: 0;                
            font-family: Inter;
            font-size: 48px;
            font-style: normal;
            font-weight: 600;
            color: $secondary_color;
            line-height: 56px;
            @include transform(translateX(50%));
        }
        &:last-child {
            &:after {
                display: none;
            }
        }
        @media #{$max-sm} {
            width: 50%;
            &:nth-child(1), &:nth-child(2) {
                margin-bottom: 30px;
            }
            &:nth-child(2) {
                &:after {
                    display: none;
                }
            }
        }
    }
}

// widget search box
//--------------------------------------------------
.pxl-search-box {
    &.layout1 {
        max-width: 723px;
        margin: 0 auto;
        .searchform-wrap {
            position: relative;
        }
        .search-form {
            display: flex;
        }
        .searchform-wrap {
            width: 100%;
            text-align: center;
            .search-submit {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
        .search-field {
            color: #687799;
            background: #fff;
            font-size: 16px;
            padding: 25px 20px 25px 25px;            
            height: 58px;
            float: left;
            display: table-cell;
            border-radius: 6px;     
            box-shadow: 0 20px 30px 10px rgba(200,208,214,.25);
            border: none;
        }
        .pxl-search-eg {
            text-align: center;
            margin-top: 19px;
        }
        .search-submit {
            background-color: $four_color;
            z-index: 1;
            cursor: pointer;            
            color: #fff;
            height: 100%;
            max-width: 58px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 21px;
            border-radius: 0 6px 6px 0;
            line-height: 58px;
            overflow: hidden;
            i {
                font-size: 18px;
            }
        }
    }
}

// widget search icon
//--------------------------------------------------
.pxl-search-popup-button, .pxl-cart-sidebar-button {
    display: flex;
    align-items:center;
    justify-content:center;
    line-height: 36px;
    text-align: center;
    @include transition(all .25s cubic-bezier(.645,.045,.355,1));
    cursor: pointer;
    font-size: 21px;
    position: relative;
    i{
        color: #8a8a8a;
    }
    .pxl_cart_counter {
        position: absolute;
        width: 20px;
        height: 20px;
        text-align: center;
        border-radius: 100px;
        background-color: $primary_color;
        color: #000;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        top: -2px;
        right: -5px;
    }
}

.pxl-search-popup-button {
    &.style-box {
        display: flex;
        align-items:center;
        justify-content:center;
        width: 35px;
        height: 35px;
        background-color: $primary_color;
        line-height: 34px;
        color: $secondary_color;
        font-size: 20px;
    }
}

// show case
.pxl-showcase1 {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    .pxl-item--image {
        img {
            @include transition(all 300ms linear 0ms);
        }
    }
    .pxl-item--overlay {
        position: absolute;
        z-index: 11;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(#0a1320, 0.2);
        @include transition(all 300ms linear 0ms);
        opacity: 0;
    }
    .pxl-item--readmore {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 120px;
        height: 120px;
        margin: auto;
        z-index: 99;
        a {
            width: 120px;
            height: 120px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 120px;
            @include background-horizontal($gradient_color_from, $gradient_color_from);
            position: relative;
            font-size: 14px;
            font-weight: 700;
            z-index: 1;
            text-transform: uppercase;
            transform: scale(0.8);
            opacity: 0;
            &:before {
                content: '';
                z-index: -1;
                background-color: #0a1320;
                position: absolute;
                top: 2px;
                right: 2px;
                bottom: 2px;
                left: 2px;
                border-radius: 100%;
            }
            span {
                color: $primary_color;
                display: inline-block;
                text-align: center;
            }
        }
    }
    .pxl-item--label {
        font-size: 32px;
        @extend .text-gradient;
        position: absolute;
        top: 50%;
        @include transform(translate(0, -50%));
        left: 0;
        right: 0;
        text-align: center;
        z-index: 99;
        @include background-horizontal(#f6d809, #f65a39);
    }
    &:hover, &.pxl-wg-active {
        .pxl-item--image img {
            filter: blur(4px);
        }
        .pxl-item--overlay {
            opacity: 1;
        }
        .pxl-item--readmore a {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.pxl-showcase2 {
    background-color: #fff;
    padding: 15px;
    border-radius: 9px;
    box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
    @include transition(all 300ms linear 0ms);
    .pxl-item--image img {
        width: 100%;
        border-radius: 6px;
    }
    .pxl-item--image {
        .notification {
            box-shadow: rgba(0,0,0,.24)0 3px 8px;
            line-height: 33px;
            font-size: 16px;
            font-weight: 700;
            color: #14287b;
            background-color: #ffd532;
            position: absolute;
            padding: 3px 40px;           
            border-radius: 5px;
            top: 15px;
            left: 15px;            
            text-align: center;
            text-transform: uppercase;
        }
    }
    .pxl-item--title {
        font-family: Outfit;
        font-size: 20px;
        color: #194341;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 4px;
    }
    .pxl-item--subtitle {
        font-family: Inter;
        font-size: 15px;
        color: #687799;
        font-weight: 400;
        max-width: 215px;
        line-height: 26px;
        @media (max-width: 1366px) {
            max-width: 100%;
        }
    }
    .pxl-item--holder {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 0 10px;
        flex-wrap: wrap;
        gap: 15px;
        .pxl-item--right {
            display: flex;
            align-items: center;
        }
    }
    .pxl-item--readmore {
        margin: auto;
        z-index: 99;
        +.pxl-item--readmore {
            margin-left: 10px;
        }
        a {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 100px;
            @include background-horizontal($gradient_color_from, $gradient_color_to);
            position: relative;
            font-size: 15px;
            line-height: 14px;
            padding: 12px 30px 11px 31px;
            font-weight: 600;
            z-index: 1;            
            color: #fff;
        }
    }
    .pxl-item--inner {
        border-radius: 14px;
        position: relative;
    }
    .pxl-item--label {
        font-family: Outfit;
        font-weight: 600;
        padding: 38px 0;
        font-size: 30px;
        color: #00194C;
        line-height: 36px;
        text-align: center;
        @media #{$max-sm} {
            font-size: 24px;
        }
    }
    &.pxl-wg-active {
        .pxl-item--holder {
            display: none;
        }
        .pxl-item--image {
            position: relative;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 10px;                
                z-index: 9;
            }            
        }
        &:hover {
            @include transform(translatey(0));            
        }
    }
    &:hover {
        @include transform(translatey(-22px));
    }
}
/* custom map */
.pxl-map {
    li {
        position: absolute;
        list-style-type: none;
        a {
            display: inline-block;
            background: none;
            color: #ffffff;
            border: solid 2px rgba(255, 255, 255, .25);
            padding: 0 10px;
            font-size: 12px;
            font-weight: bold;
            left: 30px;
            line-height: 1.8em;
            border-radius: 100px;
            @media (max-width: 575px) {
                opacity: 0;
                @include transition(300ms all linear 0ms);
            }
        }
        .de-circle-1 {
            width: 15px;
            height: 15px;
            background-color: #e615af;
            border-radius: 50%;
            position: absolute;
            margin: 5px 0 0 5px;
            left: -30px;
            top: 3px;
        }
        .de-circle-2 {
            border: 4px solid #e615af;
            -webkit-border-radius: 30px;
            height: 25px;
            width: 25px;
            position: absolute;
            -webkit-animation: pulsate 1s ease-out;
            -webkit-animation-iteration-count: infinite;
            opacity: 0.0;
            left: -30px;
            top: 3px;
        }
        &:hover {
            a {
                opacity: 1;
            }
        }
    }
}

// case text carousel 
.pxl-text-marquee1 {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    .pxl-text--marquee {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .d-item-display {
        display: inline-flex;
        .d-item-block {
            width: 80px;
            height: 2px;
            margin: 0 20px;            
            padding: 0px;            
            display: inline-block;            
            @include background-gradient-rotate(to right, $gradient_color_from, $gradient_color_to);                
        }
    }
    .pxl-item--logo {
        width: 80px;
        min-width: 80px;
        margin-top: -15px;
        margin-left: 20px;
        margin-right: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pxl-item--text {
        padding: 0 8px;
        font-size: 100px;
        line-height: 100px;        
        font-style: normal;
        font-weight: bold;        
        user-select: none;
        text-transform: uppercase;            
        font-family: 'Outfit';
        &.text-outline {
            color: transparent !important;
            -webkit-text-stroke-color: rgba(255, 255, 255, .75);
            -webkit-text-stroke-width: 1px;
        }
        &.text-gradient {
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 0;
            @include background-gradient-rotate(to top, rgba(255, 255, 255, .0), rgba(255, 255, 255, .5));                            
        }
    }
    .pxl-item--inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        white-space: nowrap;
    }
}

/* fancy box */
.pxl-fancybox-layout-1{
    .fancybox-inner{
        @include transition(all .3s linear .3s);
        @media (min-width: $xxxl_min){
            margin-left: -25px;    
        }
        >div{
            @include transition(all .3s linear);
        }
    }
    .pxl-fancybox-content{
        position: relative;                
        height: 100%;       
        &.style2 {
            padding: 41px 50px 53px 0;
            border-radius: 26px;
            @include transition(all .3s linear);     
            @media (max-width: 1024px) {
               box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
               padding-left: 50px;
               background-color: #fff; 
           }       
           &:hover {
            box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
            padding-left: 50px;
            background-color: #fff;                
            .pxl-icon {
                .pxl-item--icon {
                    @include background-gradient-rotate(to right, $gradient_color_from, $gradient_color_to);   
                    i {
                        color: #fff;
                    }
                    svg {
                        path {
                            fill: #fff;
                        }
                    }             
                }
            }
        }
    }
    .title,.desc{
        position: relative;
        z-index: 1;
        display: block;
        max-width: 292px;
    }
    .pxl-item--icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        width: 61px;
        height: 61px;
        border-radius: 61px;
        background: rgba(0, 85, 255, 0.10);
        i {
            @include transition(all .5s);                            
        }
    }
    .btn-readmore {
        display: block;
        margin-top: 11px;
        .pxl--btn-text {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 14px;
            color: $secondary_color;
            font-weight: 500;
            line-height: 22px;
        }
    }
    .title{
        margin-bottom: 16px;         
    }
}
}

.pxl-fancybox-layout-2{
    &:hover {
        .fancybox-inner {
            transform: rotateY(180deg);
            transform-origin: 50% 50%;                
        }
    }
    .fancybox-inner{
        position: relative;        
        @include transition(all .3s linear);
        transition-property: box-shadow,transform;
        transition-duration: .6s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
        transform-style: preserve-3d;            
        @media (min-width: $xxxl_min){
            margin-left: -25px;    
        }
        >div{
            @include transition(all .3s linear);
        }
    }
    .pxl-fancybox-content{
        position: relative;
        height: 100%;       
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        padding: 209px 50px 47px 53px;
        border-radius: 9px;
        background-size: cover;
        overflow: hidden;
        &.pxl-item--front {
            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(0deg, #001157 -0.04%, rgba(0, 30, 91, 0.10) 79.95%);
                box-shadow: 0px 9.394px 56.362px 0px rgba(137, 151, 186, 0.15);
            }
        }
        &.pxl-item--backdrop {
            padding: 33px 50px 47px 53px;            
            background: linear-gradient(270deg, #00D1FF 4.67%, #05F 94.31%);
            transform: rotateY(180deg) translateZ(1px);
            border-radius: 6px;             
            z-index: 98;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            .pxl-item--icon {
                margin-bottom: 94px;
            }
            .btn-readmore {
                background: #fff;
                color: $primary_color;
                max-height: 50px;
                .pxl--btn-text {
                    color: $primary_color;                    
                }
            }
        } 
        .title{
            position: relative;
            z-index: 1;
            display: block;
            color: #fff;
        }
        .pxl-item--icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            width: 81px;
            height: 81px;
            border-radius: 81px;
            background: #fff;
            i {
                @include transition(all .5s);                            
            }
        }
        .btn-readmore {            
            margin-top: 11px;
            @include background-gradient-rotate(to right, $gradient_color_from, $gradient_color_to);                            
            .pxl--btn-text {
                display: flex;
                align-items: center;
                gap: 7px;
                font-size: 15px;
                color: #fff;
                font-weight: 600;
                line-height: 14px;
            }
        }
        .title{
            margin-bottom: 16px;         
        }
    }
}

.pxl-fancybox-layout-3 {
    .pxl-icon {
        @include transition(all .5s);                                           
        width: 50px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        i {
            font-size: 50px;
        }
        svg {
            height: 50px;
        }
    }
    .pxl-item--number {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 30px;
        top: 25px;
        right: 27px;
        background-color: #fff;
        border-radius: 100px;
        color: $four_color;
        box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
    }
    .title {
        margin-bottom: 2px;
        position: relative; 
        padding-bottom: 15px;
    }
    .btn-readmore {
        font-size: 14px;
        color: #687799;
        display: flex;
        align-items: center;
        svg {
            margin-right: 7px;
        }
    }
    .desc {
        font-size: 15px;
        color: #687799;
        line-height: 26px;
        margin-bottom: 28px;
    }
    .pxl-fancybox-content  {
        position: relative;
        @include transition(all .5s);
        background-color: #EEFCF4;
        border: 1px solid #EEFCF4;
        padding: 57px 25px 27px 40px;
        border-radius: 15px;
        z-index: 1;
    }
    .fancybox-inner {
        position: relative;     
        @include transition(all .5s);                   
        overflow: hidden;           
        &:hover {
            .pxl-fancybox-content  {
                .pxl-icon {
                    @include transform(scale(-1)rotate(180deg));
                }
            }
        }
    }
}

.pxl-fancybox-layout-4 {
    .pxl-icon {
        @include transition(all .5s);                                           
        width: 142px;
        height: 142px;
        display: flex;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 15px 20px 10px rgba(207, 208, 220, 0.25);
        align-items: center;
        justify-content: center;
        margin-bottom: 33px;
        color: #4E596F;
        i {
            font-size: 50px;
        }
        svg {
            height: 50px;
            path {
                fill: #4E596F;
            }
        }
    }
    .pxl-item--number {
        position: absolute;
        top: -25px;
        right: calc(50% + 7px);
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: rgba(0, 0, 0, 0.09);
        font-family: Outfit;
        color: transparent;
        font-size: 66px;
        font-weight: 700;
        line-height: 75.556px;
        letter-spacing: 2.64px;
    }
    .title {
        margin-bottom: 2px;
        position: relative; 
        font-size: 22px;
        font-weight: 600;
        line-height: 26px;
        padding-bottom: 17px;
    }
    .btn-readmore {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        @include transition(all .5s);                            
        font-size: 16.898px;
        color: #242E45;
        display: flex;
        align-items: center;
        svg {
            margin-right: 7px;
        }
    }
    .desc {
        font-size: 16.898px;
        color: #687799;
        font-weight: 400;
        line-height: 31.684px;
        opacity: 0.9785;
        margin-bottom: 22px;
    }
    .pxl-fancybox-content  {
        position: relative;
        @include transition(all .5s);                            
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .fancybox-inner {
        position: relative;     
        @include transition(all .5s);            
        &:hover {
            .pxl-fancybox-content  {
                .btn-readmore {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0);
                }
                .pxl-icon {
                    background-color: $primary_color;
                    @include transform(scale(-1)rotate(180deg));
                    i {
                        color: #fff;
                    }
                    svg {
                        path {
                            fill: #fff;
                        }
                    }
                }
            }
        }
    }
}

// slider
.pxl-slider-carousel4 {
    .pxl-swiper-container {
        margin-bottom: -25px;
    }
    .pxl-carousel-inner {
        &:hover {
            .wp-arrow {
             opacity: 1;
         }
     }
 }
 .pxl-item--inner {
    position: relative;
    min-height: inherit;
    z-index: 1;
}
.pxl-item--content {
    max-width: 1330px;
    margin: 0 auto;
    @media #{$max-lg} {
        margin: 0 15px;
    }
}
.content--inner {
    display: -webkit-box;display: -ms-flexbox;display: flex;
    -webkit-box-align: center;-ms-flex-align: center;align-items: center;
    position: relative;
    width: 100%;
    @extend .pxl-user-select;
}
.content--wrapper {
    max-width: 46%;
    z-index: 1;
    @include transform(perspective(1400px) rotatex(0deg) rotatey(0deg) scale(1));
    @include transition(transform 0.3s ease);
    @media #{$max-lg} {
    }
    @media #{$max-sm} {
    }
}
.pxl-item--subtitle {
    margin-bottom: 42px;
    @extend .pxl-hidden;
    @extend .pxl-custom-transition;
    @include transform(translatey(20px));
}
.pxl-item--subtitle {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    margin-left: 30px;
    color: $secondary_color;
    @media #{$max-sm} {
        font-size: 16px;
    }
    &:before {
        content: '';
        position: absolute;
        top: 50%;
        @include transform( translatey(-50%));
        height: 2px;
        width: 19px;
        background-color: $secondary_color;
        border-radius: 2px;
        @include transition( all 0.5s ease);
        left: -25px;
    }
}
.item--button {
    @extend .pxl-hidden;
    @extend .pxl-custom-transition;
    @include transform(translatey(20px));
}
.pxl-item--title {
    color: $secondary_color;
    margin-bottom: 22px;
    line-height: 1.122;
    @extend .pxl-hidden;
    @include transform(skew(50deg, 0deg));
    &.pxl-hover-transition {
        @extend .pxl-custom-transition;
    }
    @media #{$max-lg} { 
        font-size: 85px;
    }
    @media #{$max-md} {
        font-size: 70px;
    }
    @media #{$max-xs} {
        font-size: 40px;
    }
}
.swiper-slide-active {
    .pxl-item--title {
        @extend .pxl-visible;
        @include transform(skew(0deg, 0deg));
        &.pxl-hover-transition {
            @include transition-delay(1s);
        }
    }
    .mask--content {
        @extend .pxl-visible;
        @include transform(scale(1));
        @include transition-delay(1s);
    }
    .item--button {
        @extend .pxl-visible;
        @include transform(translatey(0px));
        @include transition-delay(1.7s);
    }
    .pxl-item--subtitle {
        @extend .pxl-visible;
        @include transform(translatey(0px));
        @include transition-delay(1.5s);
    }
}
.wp-arrow {
    opacity: 0;
    @include transition( all 0.5s ease);            
    .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: absolute;
        cursor: pointer;
        @include transition( all 0.5s ease);            
        z-index: 1;
        height: 86px;
        border-radius: 50%;
        width: 86px;
        background-color: #fff;
        justify-content: center;
        @media #{$min-md} {
            top: 45%;
            bottom: auto;
            @include transform(translatey(-50%));
        }
        @media #{$max-sm} {
            bottom: 100px;
        }
        &:hover { 
            background-color: $primary_color;
            svg {
                path {
                    stroke: #fff;
                }
            }
        }
        &.pxl-swiper-arrow-prev {
            left: 50px;
            @media #{$max-lg} {
                left: 15px;
            }
        }
        &.pxl-swiper-arrow-next {
            right: 50px;
            @media #{$max-lg} {
                right: 15px;
            }
        }
        &.swiper-button-disabled {
            opacity: .35;
            cursor: not-allowed;
        }
    }
}
&.style2 {
    .content--inner {
        -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
    }
    .content--wrapper {
        z-index: 1;
    }
    .wp-arrow.style2 {
        @media screen and (min-width: 1600px) {
            .pxl-swiper-arrow.pxl-swiper-arrow-prev {
                left: 16%;
            }
            .pxl-swiper-arrow.pxl-swiper-arrow-next {
                right: 16%;
            }
        }
        @media #{$max-sm} {
            .pxl-swiper-arrow {
                bottom: 100px;
                &.pxl-swiper-arrow-prev {
                    left: calc(50% - 95px);
                }
                &.pxl-swiper-arrow-next {
                    left: auto;
                    right: calc(50% - 95px);
                }
            }
        }
    }
}
}

.rangeslider-wrap {
    position: relative;
    #price-display {
        font-family: Outfit;
        font-size: 16px; 
        color: $secondary_color;       
        font-weight: 600;
        line-height: 26px;
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
    }
    h7 {
        display: block;
        font-family: Outfit;
        font-size: 16px;        
        font-weight: 600;
        line-height: 26px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }
}

.pxl-wrap-configure {
    .pxl-table {
        .pxl-table-inner {
            h3 {
                margin-bottom: 8px;
            }
            .pxl-table--durations {
                margin: 0 -6.5px;
                padding-top: 112px;
                h3,>p{
                    margin: 0 6.5px;
                }
                >h3 {
                    padding-bottom: 8px;
                }
                >p {
                    padding-bottom: 10px;
                }
                .pxl-table--inner {
                    display: inline-block;
                    width: 200px;
                    padding: 10px 6.5px;                    
                    .pxl-table--durations-name {
                        font-family: 'Outfit';
                        font-size: 26px;
                        font-weight: 700;
                        line-height: 1.4;
                        letter-spacing: -0.2px;
                        color: rgba(255,255,255,0.75);
                        padding: 20px;
                        border-radius: 10px;
                        -moz-border-radius: 10px;
                        -webkit-border-radius: 10px;
                        display: block;
                        height: 100%;
                        border: solid 2px rgba(255, 255, 255, .1);
                    }
                    >input {
                        display: none;
                        &:checked {
                            + label {
                                background: var(--primary-color);
                                border-color: var(--primary-color);
                                color: #fff;                                
                            }
                        }
                    }
                }
            }
            .pxl-table--locations {
                margin-top: 72px;
                >p {
                    margin-bottom: 10px;
                }
                .pxl-table--inner {
                    display: flex;
                    flex-wrap: wrap;
                    margin: 0 -6.5px;                    
                    .locations {
                        width: 200px;                        
                        padding: 10px 6.5px;
                        .pxl-table--locations-name {
                            font-family: 'Outfit';
                            color: rgba(255,255,255,0.75);
                            padding: 20px;
                            border-radius: 10px;
                            -moz-border-radius: 10px;
                            -webkit-border-radius: 10px;
                            display: block;
                            height: 100%;
                            border: solid 2px rgba(255, 255, 255, .1);
                            h5 {
                                font-size: 12px;
                                margin-top: 10px;
                                margin-bottom: 0;
                                opacity: .75;
                            }
                        }
                        >input {
                            display: none;
                            &:checked {
                                + label {
                                    background: var(--primary-color);
                                    border-color: var(--primary-color);
                                    color: #fff; 
                                    h5 {
                                        opacity: 1;
                                    }                               
                                }
                            }
                        }
                    }
                }
            }
            .btn {
                margin-top: 53px;
                @include background-gradient-rotate(to right, $gradient_color_from, $gradient_color_to);   
                border: none;                 
            }
        }
    }
}

// Logo Marquee
.pxl-logo-marquee1 {
    position: relative;
    overflow: hidden;
    .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%;
        .pxl-item--marquee {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
    .pxl-item--logo {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .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-opening-hour
.pxl-opening-hour {
    position: relative;    
    border-radius: 12px;
    background-image: url(../img/oclock.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    box-shadow: 0px 15px 20px 10px rgba(215, 217, 237, 0.25);
    background-color: #fff;
    padding: 28px 37px 31px 34px;
    .pxl-opening-title {
        position: relative;
        margin-bottom: 30px;
        &:after {
            content: '';
            position: absolute;
            width: 40px;
            height: 3px;
            background-color: $four_color;
            left: 0;
            bottom: -11px;
        }
    }
    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: $four_color;
        bottom: -3px;
        left: 0;
        z-index: -1;
        border-radius: 12px;
    }
    .pxl--item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        +.pxl--item {
            margin-top: 8px;
        }
        label {            
            font-size: 16px;                
            font-weight: 400;
            line-height: 24px;
            color: $secondary_color;
        }
        span {            
            font-size: 16px;            
            font-weight: 400;
            line-height: 24px;
            color: $four_color;               
            >span {
                color: $primary_color;
            }      
        }
    }
}

// pxl-client-review1
.pxl-client-review1 {
    &.style-2 {
        .pxl-item--inner {
            .pxl-item--images {                
                .pxl-item--img {
                    width: 56px;
                    min-width: 56px;
                    margin-left: -30px;
                    @include transition(all 220ms linear 0ms);   
                    border: 4px solid #FFF;
                    border-radius: 50%;
                    box-shadow: 0px 10px 60px 0px rgba(137, 151, 186, 0.15);                         
                }
            }
        }
    }
    .pxl-item--inner {
        display: flex;
        align-items: center;        
        .pxl-item--images {
            display: flex;
            flex-wrap: nowrap;
            padding-left: 13px;
            .pxl-item--img {
                width: 56px;
                min-width: 56px;
                border-radius: 50%;
                border: 3px solid #fff;
                overflow: hidden;
                margin-left: -30px;
                @include transition(all 220ms linear 0ms);                            
            }
        }
        .pxl-item--meta {
            line-height: 48px;
            display: flex;
            flex-direction: column;
            .pxl-item--title {                
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                span {
                    color: $secondary_color;
                    font-weight: 600;
                }
            }
            .pxl-item--star {
                line-height: normal;
                margin: 0;
                i {                    
                    font-size: 16px;                    
                }
            }
        }
    }
}

// pxl-partner
.pxl-partner1 {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
    .pxl-item--inner {
        height: 156px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #EDEDED;
        border-bottom: 1px solid #EDEDED;
    }
    @media (min-width: 767px) {
        .pxl-grid-item {
            &:nth-child(5) {            
                .pxl-item--inner {
                    border-bottom-width: 0;
                    border-left-width: 0;
                }
            }
            &:nth-child(6),&:nth-child(7),&:nth-child(8) {            
                .pxl-item--inner {
                    border-bottom-width: 0;                
                }
            }
            &:nth-child(1) {            
                .pxl-item--inner {                
                    border-left-width: 0;
                }
            }
        }
    }
}

.pxl-partner2 {
    position: relative;
    .pxl-grid-inner {
        width: 551px;
        height: 533px;
        @media (max-width: 1024px) {
            width: 100%;
            height: 100%;
        }
    }
    .pxl-item--outer {
        @media (min-width: 1025px) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        @media (max-width: 1024px) {
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            gap: 10px;
        }
        width: 551px;
        height: 533px;            
        background-image: url(../img/bg-partners.webp);
        background-repeat: no-repeat;
        background-size: cover;
        .pxl-item--inner {            
            border-radius: 50%;
            background-color: #fff;
            box-shadow: -10px 20px 30px 10px rgba(212, 216, 236, 0.21);
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;       
            @media (max-width: 1024px) {
             position: unset;
             transform: none !important;
         }     
         &:nth-child(1) {                
            top: 50%;
            left: 50%;
            height: 157px;
            width: 157px;
            transform: translate(-50%, -50%);                
        }

        &:nth-child(2) {
            top: 0;
            left: 82px;
            width: 145px;
            height: 145px;
        }

        &:nth-child(3) {
            top: 30px;
            right: 111px;
            width: 115px;
            height: 115px;
        }

        &:nth-child(4) {
            left: 0;
            top: 158px;
            width: 135px;
            height: 135px;
        }

        &:nth-child(5) {
            left: 62px;
            bottom: 104px;
            width: 136px;
            height: 136px;
        }

        &:nth-child(6) {
            bottom: 0;
            right: 161px;
            width: 163px;
            height: 163px;
        }

        &:nth-child(7) {
          bottom: 133px;
          right: 0;
          width: 173px;
          height: 173px;
          @media (max-width: 1200px) {
              right: 50px;
          }
      }
  }
}
}

.pxl-partner-carousel1 {
    .pxl-swiper-arrow-wrap {
        margin-top: 0;
        .pxl-swiper-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 52px;
            height: 52px;
            border: none;
            background-color: #fff;
            box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
            &:hover {
                background-color: $primary_color;
            }
            &.pxl-swiper-arrow-prev {
                left: -70px;
            }
            &.pxl-swiper-arrow-next {
               right: -70px;
           }
       }
   }
   .pxl-swiper-slide {
    padding: 0 9px !important;
}
.pxl-item--logo {
    text-align: center;
    img {            
    }
    &:hover a {
        @include transform(translateY(-4px));
    }
}
.pxl-item--inner {
    margin: 10px 0;
}
.pxl-swiper-wrapper {
    align-items: center;
}
}

.pxl-circle-svg {
    position: absolute;
    top: 0;
    z-index: 1;
    svg {
        overflow: unset;        
    }
    svg .dot {
      box-shadow: 0 4px 30px rgba(0, 255, 255, 0.60);
  }   
}

// Case Slider Widget
.pxl-element-slider {
    position: relative;
    @include transition(all 250ms linear 0ms);
    border-radius: inherit;
    .pxl-slider-progressbar {
        position: absolute;
        left: 0;
        top: 0;
        background-color: $primary_color;
        height: 2px;
        z-index: 100;
        width: 0;
        @include transition(all 100ms linear 0ms);
    }
    .pxl-slider--image {
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        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;
    }
    .pxl-slider--mainimage, .pxl-slider--image, .pxl-slider--inner, .pxl-swiper-slide, .pxl-swiper-wrapper, .pxl-swiper-container, .pxl-carousel-inner {
        border-radius: inherit;
    }
    &.style-1 {
        .pxl-swiper-footer {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            z-index: 99;
            margin: auto;
            @media (max-width: 767px) {
                top: auto;
                bottom: 0;
            }
            @media #{$max-md} {
                padding-bottom: 10px;
                padding-top: 20px;
                > div {
                    margin-bottom: 15px !important;
                }
            }
            .pxl-swiper-wrap {
                display: flex;
                gap: 260px;
                position: absolute;
                left: -252px;
                top: -100px;
                transform: rotate(90deg);
                @media (max-width: 1280px) {
                    left: -282px;
                    @media (max-width: 1024px) {
                        top: 0;
                        @media (max-width: 767px) {
                            top: auto;
                            bottom: 0;
                            left: 15px;
                            transform: none;
                        }
                    }
                }
                .pxl-swiper-slogan {
                    a {
                        color: #fff;
                    }
                }
                .pxl-swiper-social {
                    a {
                        margin-right: 25px;
                    }
                    i {
                        color: #fff;
                        font-size: 15px;
                    }
                }
            }
            .pxl-swiper-pagination {
                margin: 0;
                flex-grow: 1;
                @media #{$max-md} {
                    justify-content: flex-start;
                }
                .pxl-swiper-dots.style-1 {
                    position: absolute;
                    display: grid;
                    border-radius: 200px;
                    border: 1px solid rgba(255, 255, 255, 0.10);
                    background: rgba(255, 255, 255, 0.05);
                    padding: 14px 15px;                    
                    bottom: 20px;
                    right: 20px;
                    @media (max-width: 575px) {
                        display: flex;
                        column-gap: 10px;
                        padding: 7px 12px;
                    }
                    .pxl-swiper-pagination-bullet {
                        margin: 15px 0;
                        cursor: pointer;
                        width: 10px;
                        height: 10px;
                        color: #fff;
                        font-size: 14px;
                        line-height: 10px;
                        &.swiper-pagination-bullet-active {
                            &:after {                                
                                background: linear-gradient(270deg, #00D1FF 4.67%, #05F 94.31%);                                
                            }
                            &:before {
                                width: 16px;
                                height: 16px;
                                border-radius: 50%;
                                background-color: rgba(82, 133, 255, 0.23);
                            }
                        }
                    }
                }
            }
            .pxl-swiper-arrow-wrap {
                margin: 0 -7px;
            }
        }
        @media #{$max-sm} {
            &.pxl-swiper-show-slogan.pxl-swiper-show-arrow {
                .pxl-slider--inner {
                    padding-bottom: 215px;
                }
            }
        }
    }
    &.style-2 {
        .pxl-swiper-pagination {
            margin: 0;
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            z-index: 9;
            .pxl-swiper-dots.style-1.pxl-swiper-pagination-fraction span {
                color: #fff;
            }
        }
        .pxl-swiper-arrow-wrap {
            margin: 0;
            position: absolute;
            left: 100px;
            z-index: 9;
            top: 50%;
            @include transform(translate(0, -50%));
            width: 88px;
            @include transition(all 300ms linear 0ms);
            @media #{$max-xl} {
                left: 40px;
                width: 60px;
            }
            @media #{$max-md} {
                opacity: 0;
                left: 30px;
            }
            @media #{$max-sm} {
                left: 20px;
            }
            .pxl-swiper-arrow {
                width: 88px;
                min-width: 88px;
                height: 88px;
                line-height: 84px;
                border: 2px solid $primary_color;
                color: #fff;
                margin: 11px 0;
                font-size: 20px;
                @media #{$max-xl} {
                    font-size: 18px;
                    width: 64px;
                    min-width: 64px;
                    height: 64px;
                    line-height: 60px;
                }
                &.pxl-swiper-arrow-prev i {
                    transform: scaleX(-1);
                }
                i:before {
                    content: "\f10f";
                }
                &:hover {
                    background-color: $secondary_color;
                    border-color: $secondary_color;
                    color: $primary_color;
                }
            }
        }
        &:hover .pxl-swiper-arrow-wrap {
            opacity: 1;
        }
    }
    &.style-3 {
        .pxl-swiper-arrow-wrap {
            @media #{$min-xxl} {
                margin: 0;      
            }
            .pxl-swiper-arrow {
                border: none;
                background-color: #fff;
                width: 60px;
                height: 65px;
                line-height: 65px;
                @include border-radius(20px);
                @include box-shadow(0 0 18px rgba(#000000, 0.12));
                color: #382c4d;
                font-size: 20px;
                position: relative;
                z-index: 1;
                &:before {
                    @include border-radius(20px);
                    z-index: -1;
                    @extend .pxl-spill;
                    @include background-horizontal($gradient_color_from, $gradient_color_to);
                    @include transition(all 250ms linear 0ms);
                    opacity: 0;
                }
                i:before {
                    content: "\f142";
                    font-family: "Caseicon";
                }
                &.pxl-swiper-arrow-prev i {
                    transform: scaleX(-1);
                }
                &:hover {
                    color: #fff;
                    box-shadow: none;
                    &:before {
                        opacity: 1;
                    }
                }
                @media #{$min-xxl} {
                    position: absolute;
                    top: 50%;
                    @include transform(translate(0, -50%));
                    &.pxl-swiper-arrow-prev {
                        left: -90px;
                    }
                    &.pxl-swiper-arrow-next {
                        right: -90px;
                    }
                }
            }
        }
    }
}