// CONFIG LAYOUT --------------------------------------------------
.elementor-editor-active.single-pxl-template {
    background-color: #d9d9d9 !important;
}

.pxl-section-background-overlay, .pxl-column-background-overlay {
    @extend .pxl-pabsolute-full;
}

.pxl-elementor-section-images {
    @extend .pxl-pabsolute-full; 
    span {
        --s: 8s;
        position: absolute;
    }
}
@keyframes spin_reverse {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-360deg);
    }
}
.turbine-blades {
    animation: spin_reverse var(--s) linear infinite;
    -o-animation: spin_reverse var(--s) linear infinite;
    -webkit-animation: spin_reverse var(--s) linear infinite;
    -moz-animation: spin_reverse var(--s) linear infinite;
}

.pxl-section-main-header1 {
    .pxl-links {
        .pxl-item--link {
            .pxl-item--text {
                @media #{$max-xxl} {
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}

svg, svg path, i {
    @extend .pxl-transition-linear;
}

// CONFIG TAG 
hr {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

// MIXIN
@keyframes zoom-in {
    from {
        scale: 1;
    }to {
        scale: 1.2;
    }
}

.pxl-hover-zoom-in {
    overflow: hidden;
    img {
        @extend .pxl-transition-ease;
        transition-duration: .35s;
    }
    &:hover {
        img {
            scale: 1.05;
            transform: rotate(1deg);
        }
    }
}

@keyframes grow-ltr {
    from {
        left: auto;
        right: 0;
        width: 0;
    } 
    to {
        left: 0;
        right: auto;
        width: 100%;
    }
}

.pxl-grow-ltr {
    animation: grow-ltr .25s ease forwards;
}

@keyframes grow-rtl {
    from {
        left: 0;
        right: auto;
        width: 0;
    } 
    to {
        left: auto;
        right: 0;
        width: 100%;
    }
}

.pxl-grow-rtl {
    animation: grow-rtl .25s ease forwards;
}


.search-results {
    @media #{$max-md} {
        #pxl-content-area {
            margin-bottom: 85px;
        }
    }
}

// Blog
.blog, .single-post{
    .pxl-content-wrap {
        margin-left: -23.5px;
        margin-right: -23.5px;;
        #pxl-content-area {
            max-width: 67.4%;
            flex: 0 0 67.4%;
            padding-left: 23.5px;
            padding-right: 23.5px;
        }
        #pxl-sidebar-area {
            max-width: 32.6%;
            flex: 0 0 32.6%;
            padding-left: 23.5px;
            padding-right: 23.5px;
        }
        @media #{$max-lg} {
            margin-right: -15px;
            margin-left: -15px;
            #pxl-content-area, #pxl-sidebar-area {
                padding-left: 15px;
                padding-right: 15px;
            }
        }
        @media #{$max-md} {
            #pxl-content-area {
                margin-bottom: 85px;
            }
            #pxl-content-area, #pxl-sidebar-area {
                max-width: 100%;
                flex: 0 0 100%;
            }
        }
    }
}
.single-post {
    #pxl-main {
        padding-block: 120px 213px;
    }
}

.single .pxl-breadcrumb {
    li:not(:first-child):not(:last-child) {
        display: none;
    }
}

.pxl-fied-name:before{
    content: "\f11c";
}
.pxl-fied-mail:before{
    content: "\f11b";
}
.pxl-fied-phone:before{
    content: "\f11d";
}
.pxl-select-higthlight:before {
    content: "\f129";
}

// Section Shape
.pxl-section-shapes {
    @extend .pxl-pabsolute-full;
    &.pxl-overflow-hidden {
        overflow: hidden;
    }
    .pxl-shape {
        position: absolute;
    }
}

// .pxl-section-layers {
//     @extend .pxl-pabsolute-full;
//     // background-color: red;
//     &.pxl-overflow-hidden {
//         overflow: hidden;
//     }
// }

.elementor-section {
    .pxl-item--layer {
        position: absolute;
    }

}

// Hover 
.pxl-hover-underline {
	--current-color: currentcolor;
	a {
		background-repeat: no-repeat;
		background-position-y: -1px;
		background-image: linear-gradient(transparent calc(100% - 1px), var(--current-color) 1px);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline forwards;
		&:hover {
			animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline-hover forwards;
		}
	}
}


//  404 PAGE -------------------------------------------------------
.error404 {
    #pxl-main {
        padding: 0;
    }
    #pxl-content-main {
        height: 100vh;
        min-height: 100px;
        width: 100%;
        position: relative;
    }
    .pxl-bg--overlay {
        @extend .pxl-pabsolute-full;
        background: linear-gradient(180deg, #4AAB3D 0%, #073C00 100%);
        opacity: .94;
        z-index: -1;
    }
    .pxl-bg--img {
        @extend .pxl-pabsolute-full;
        z-index: -9;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .pxl-page-container {
        width: 100%;
        max-width: 753px;
        padding-inline: 15px;
        margin: 0 auto;
        height: 100%;
    }
    .pxl-page-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .pxl-error--404 {
        position: relative;
        color: #FFF;
        text-align: center;
        font-family: 'Montserrat';
        font-size: 226.462px;
        font-weight: 700;
        line-height: 0.87668;
        margin-bottom: 14px;
        text-shadow: 6px 6px 0px var(--primary-color);
        @media #{$max-lg} {
            font-size: 220px;
        }
        @media #{$max-md} {
            font-size: 210px;
        }
        @media #{$max-sm} {
            font-size: 190px;
        }
        @media #{$max-xs} {
            font-size: 160px;
        }
        @media #{$max-3xs} {
            font-size: 140px;
        }
    }
    .pxl-error--subtitle {
        color: #FFF;
        font-family: 'Montserrat';
        font-size: 42px;
        font-weight: 600;
        line-height: 1.57143;
        text-transform: uppercase;
        margin-bottom: 14px;
        @media #{$max-md} {
            font-size: 40px;
        }
        @media #{$max-sm} {
            font-size: 36px;
        }
        @media #{$max-xs} {
            font-size:32px;
        }
        @media #{$max-3xs} {
            font-size:30px;
        }
    }
    .pxl-error--message {
        color: #FFF;
        @extend .pxl-text2;
        margin-bottom: 55px;
        text-align: center;
    }
    .pxl-form-group {
        width: 100%;
    }
    .searchform-wrap {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 37px;
        input {
            border: none;
            border-radius: inherit;
            background-color: #FFF;
            line-height: 58px;
            padding-block: 0;
            padding-inline: 25px 60px;
            @extend .pxl-text4;
        }
        .btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 58px;
            height: 58px;
            padding: 0;
        }
    }
    .btn-back-home  {
        width: fit-content;
        border-radius: 100px;
        box-shadow: 0px 15px 20px 0px rgba(7, 60, 0, 0.15);
        background-color: rgba(255, 255, 255, 0.20);
        &:hover {
            background-color: var(--secondary-color);
            color: #FFF;
        }
    }
}

// WIDGET -------------------------------------------------------
// Case Search Form
.pxl-search-form {
    .searchform-wrap {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 37px;
        input {
            border: none;
            border-radius: inherit;
            background-color: #FFF;
            line-height: 58px;
            padding-block: 0;
            padding-inline: 25px 60px;
            @extend .pxl-text4;
        }
        .btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 58px;
            height: 58px;
            padding: 0;
        }
    }
}
// Case List
.pxl-list {
    .pxl-item--single {
        --y: 6px;
        width: 100%;
        @extend .pxl-dflex-center-v;
        gap: 11px;
        + .pxl-item--single {
            margin-top: var(--y);
        }
    }
    &.pxl-list-default {        
        .pxl-item--single {
            color: var(--dark-2);
            font-family: 'Montserrat';
            @extend .h6;
            i {
                color: var(--primary-color);
            }
        }
    }
    &.pxl-list-style1 {        
        .pxl-item--single {
            --y: 7px;
            font-size: 22px;
            font-weight: 400;
            i {
                color: var(--primary-color);
                font-size: 18px;
            }
            @media #{$max-md} {
                font-size: 20px;
            }
            @media #{$max-sm} {
                font-size: 18px;
            }
        }
    }
    &.pxl-list-style2 {
        .pxl-item--single {
            --y: 14px;
            gap: 9px;
            color: var(--dark-2);
            font-family: 'Montserrat';
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.28px;
            i {
                color: var(--primary-color);
                font-size: 16px;
            }
        }
    }
    &.pxl-list-style3 {
        .pxl-item--single {
            --y: 6.5px;
            color: var(--secondary-color);
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 500;
            letter-spacing: -0.32px;
            gap: 4px;
            i {
                font-size: 20px;
                color: var(--primary-color);
            }
        }
    }
}

// Case Links
.pxl-links {
    --border-color: rgba(255, 255, 255, 0.20);
    .pxl-item--list { 
        width: 100%;
    }
    .pxl-item--link {
        @extend .pxl-dflex-center-v;
        gap: 15px;
        .pxl-item--text {
            transition: inherit;
        }
        .pxl-item--icon {
            @extend .pxl-dflex-center;
            transition: inherit;
        }
    }
    &.pxl-layout-vertical {
        .pxl-item--list {
            margin-block: calc(-1 * var(--spacing));
        }
        .pxl-item--single {
            display: block;
            padding-block: var(--spacing);
        }
        &.pxl-is-devider {
            --size: 1px;
            .pxl-item--single {
                + .pxl-item--single {
                    border-top: var(--size) solid var(--border-color);
                }
            }
        }
        &.pxl-layout-vertical1 {
            --spacing: 6px;
            .pxl-item--link {
                color: var(--text-2);
                font-size: 17px;
                font-weight: 400;
                line-height: 1.4;
                letter-spacing: -0.34px;
                .pxl-item--icon {
                    color: var(--primary-color);
                }
            }
        }
        &.pxl-layout-vertical2 {
            --spacing: 10px;
            .pxl-item--link {
                width: 100%;
                color: var(--dark-2);
                font-size: 28px;
                font-weight: 400;
                line-height: 1.14286;
                gap: 24px;
                &:hover {
                    .pxl-item--text {
                        .pxl-text--copy {
                            opacity: 1;
                            transform: scaleY(1);
                        }
                        .pxl-text--main { 
                            opacity: 0;
                            transform: scaleY(0)
                        }
                    }
                }
            }
            .pxl-item--text {
                position: relative;
                transition: inherit;
                width: 100%;
                display: block;
                .pxl-text--main {
                    display: block;
                    transition: inherit;
                }
                .pxl-text--copy {
                    display: block;
                    transition: inherit;
                    @extend .pxl-pabsolute-full;
                    opacity: 0;
                    transform: scaleY(0);
                    font-weight: 600;
                    color: var(--dark-2);
                }
            }
            .pxl-item--icon {
                --size: 50px;
                width: var(--size);
                min-width: var(--size);
                height: var(--size);
                border-radius: 50%;
                background-color: var(--primary-color);
                color: #FFF;
            }

        }
        &.pxl-layout-vertical3 {
            --spacing: 6px;
            .pxl-item--single {
                max-width: 347px;
            }
            .pxl-item--link {
                @extend .pxl-dflex-center-v;
                width: 100%;
                position: relative;
                @extend .h5;
                min-height: 64px;
                padding-inline: 40px 67px;
                color: #FFF;
                border-bottom: 1px solid rgba(215, 215, 215, 0.29);
                &:hover, &.active {
                    color: #FFF;
                    border-color: rgba($color: #FFF, $alpha: 0);
                    .pxl-item--btn { 
                        width: 100%;
                        opacity: 1;
                    }
                }
            }
            .pxl-item--icon {
                display: none;
            }
            .pxl-item--text {
                position: relative;
                z-index: 9;
            }
            .pxl-item--btn {
                --size: 50px;
                @extend .pxl-pabsolute-full;
                border-radius: 50px;
                background-color: var(--primary-color);
                opacity: 0;
                width: 0;
                @extend .pxl-transition-linear;
                > span {
                    width: var(--size);
                    height: var(--size);
                    border-radius: var(--size);
                    min-width: var(--size);
                    @extend .pxl-dflex-center;
                    position: absolute;
                    right: 7px;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: #FFF;
                    transition: inherit;
                }
            }
        }
    }
    &.pxl-layout-horizontal {
        .pxl-item--list {
            @extend .pxl-dflex-center-v;
            margin-inline: calc(-1 * var(--spacing));
        }
        .pxl-item--single {
            padding-inline: var(--spacing);
        }
        &.pxl-is-devider {
            --size: 1px;
            .pxl-item--single {
                + .pxl-item--single {
                    border-left: var(--size) solid var(--border-color);
                }
            }
        }
        &.pxl-layout-horizontal1 {
            --spacing: 16.5px;
            .pxl-item--link {
                --size: 32px;
                @extend .pxl-text5;
                color: #FFF;
                .pxl-item--icon {
                    font-size: 16px;
                    width: var(--size);
                    min-width: var(--size);
                    height: var(--size);
                    border-radius: 50%;
                    background-color: var(--primary-color);
                }
                &:hover {
                    color: var(--primary-color);
                    .pxl-item--icon {
                        color: #FFF;
                    }
                }
            }
        }
        &.pxl-layout-horizontal2 { 
            --spacing: 14px;
            .pxl-item--link {
                gap: 12px;
                color: #FFF;
                font-family: "Noto Sans";
                font-size: 15px;
                line-height: 1.4;
                letter-spacing: -0.3px;
            }
        }
    }
    .pxl-item--link {
        &.pxl-hover-fade {
            &:hover {
                color: var(--primary-color);
            }
        }
    }
    .pxl-item--heading {
        display: block;
        color: #FFF;
        margin-bottom: 27px;
        text-transform: uppercase;
    }
}

// Case Social Icons 
.pxl-social-icons {
    &.pxl-social-icons1 {
        --spacing: 10px;
        --color: #FFF;
        .pxl-item--list {
            width: 100%;
            @extend .pxl-dflex-center;
            gap: var(--spacing);
        }
        &.pxl-social-style1 {
            --spacing: 8px;
            --size: 28px;
            .pxl-item--link {
                width: var(--size);
                height: var(--size);
                min-width: var(--size);
                font-size: 14px;
                color: var(--text-3);
                background-color: transparent;
            }
        }
        &.pxl-social-style2 {
            .pxl-item--link {
                --size: 40px;
                width: var(--size);
                height: var(--size);
                min-width: var(--size);
                border-radius: 50%;
                background-color: rgba($color: #FFF, $alpha: .1);
                font-size: 15px;
            }
        }
        &.pxl-social-style3 {
            --spacing: 2px;
            .pxl-item--link {
                --size: 50px;
                width: var(--size);
                height: var(--size);
                min-width: var(--size);
                background-color: rgba($color: #FFF, $alpha: .1);
                font-size: 15px;
            }
        }
        .pxl-item--link {
            &:hover {
                color: var(--color);
                &.pxl-hover-fade {
                    background-color: var(--hover-bg-color);
                }
                &.pxl-hover-scale {
                    --hover-bg-color: transparent;
                    background-color: var(--hover-bg-color);
                }
            }
        }
    }
}



// Case Search Form
.pxl-search-form {
    &.pxl-search-form1 {
        .pxl-form-container {
            display: inline-flex;
            width: 100%;
        }
        .pxl-form-inner {
            width: 100%;
        }
        .pxl-form-wrap {
            position: relative;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 37px;
            input {
                border: none;
                border-radius: inherit;
                background-color: #FFF;
                line-height: 58px;
                padding-block: 0;
                padding-inline: 25px 60px;
                @extend .pxl-text4;
            }
            .btn {
                position: absolute;
                right: 0;
                top: 0;
                width: 58px;
                height: 58px;
                padding: 0;
            }
        }
    }
}

// Case Switch Language
.pxl-switch-language {
    .pxl-btn-switch {
        font-family: 'Montserrat';
        @extend .pxl-white;
        padding-inline: 15px;
        gap: 7px;
        font-size: 16px;
        font-weight: 600;
        line-height: 68px;
        text-transform: capitalize;
        background-color: transparent;
        @extend .pxl-transition-linear;
        svg, i {
            transition: inherit;
        }
        &.active, &:hover {
            svg, i {
                transform: scaleY(-1);
            }
        }
    }

    .pxl-form-select {
        position: relative;
        &:hover {
            .pxl-list--languages {
                margin-top: 0;
                visibility: visible;
                opacity: 1;
            }
        }
    }

    .pxl-list--languages {
        padding: 20px;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #FFF;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        margin-top: 50px;
        @include box-shadow(0px 4.286px 71.143px 0px rgba(13, 14, 67, 0.08));
        @extend .pxl-transition-linear;
        .pxl-item--language {
            cursor: pointer;
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 600;
            text-transform: capitalize;
            color: var(--secondary-color);
            padding: 10px 30px;
            @extend .pxl-transition-linear;
            &.current-language, &:hover {
                background-color: var(--secondary-color);
                color: #FFF;
            }
            + .pxl-item--language  {
                margin-top: 2px;
            }
        }
    }
    
}

@keyframes flip-x {
    0%, 100% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
}
.pxl-flip-x {
    animation: flip-x .25s ease-in-out forwards;
}
// Case Icon Box
.pxl-icon-box {
	position: relative;
	.pxl-item--link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}

    .pxl-item--inner {
        display: inline-flex;
        align-items: center;
        column-gap: 34px;
        row-gap: 15px;
        &:hover {
            .pxl-item--icon {
                @extend .pxl-flip-x;
            }
        }
    }
    .pxl-item--icon {
        color: var(--primary-color);
        svg {
            width: 60px;
            height: 70px;
            path {
                fill: var(--primary-color);
            }
        } 
        
    }
    .pxl-item--title {
        color: var(--dark-blue-2);
        margin-bottom: 12px;
    }
    .pxl-item--desc {
        font-family: "Noto Sans";
        font-size: 17px;
        line-height: 1.4; 
        letter-spacing: -0.34px;
    }
}

// Case Icon 
.pxl-icon-single {
    .pxl-item--icon {
        --size: auto;
        min-width: var(--size);
        width: var(--size);
        height: var(--size);
        @extend .pxl-dflex-center;
        overflow: hidden;
    }
}

// Case Button
.pxl-button {
    width: 100%;
    .pxl-item--inner {
        width: 100%;
        display: inline-flex;
    }
}

// Case Cart
.pxl-cart {
    a {
        position: relative;
        display: inline-block;
        &::after{
            --size: 12px;
            content: attr(data-product);
            position: absolute;
            bottom: -2px;
            right: -4px;
            width: var(--size);
            height: var(--size);
            border-radius: var(--size);
            font-size: 8px;
            color: #FAF7F2;
            @extend .pxl-dflex-center;
            background-color: var(--primary-color);
        }
        &:hover {
            color: var(--primary-color);
        }
    }
}

// Case Shape
.pxl-block-shape {
    position: relative;
    width: 100%;
    height: 91.5px;
    overflow: hidden;
    border-radius: 8px;
    .pxl-item--shape {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(50% 50% at 50% 50%, #4AAB3D 0%, rgba(74, 171, 61, 0.00) 100%);
        filter: blur(30px);
        --size: 398px;
        width: var(--size);
        height: var(--size);
    }
}

@keyframes move-rect {
    0%, 100% {
        transform: translateX(0) rotate(45deg);
    }
    50% {
        transform: translateX(-44px) rotate(45deg); 
    }
}

// Case Heading
.pxl-heading {
    .pxl-item--container {
        display: flex; 
        width: 100%;
    }
    .pxl-item--inner {
        display: flex;
        flex-direction: column;
    }
    .pxl-item--title {
        --width: 34px;
        --height: 3px;
        &.h1 {
            @media #{$max-xl} {
                font-size: 60px;
            }
            @media #{$max-lg} {
                font-size: 56px;
            }
            @media #{$max-md} {
                font-size: 52px;
            }
            @media #{$max-sm} {
                font-size: 48px;
            }
            @media #{$max-xs} {
                font-size: 44px;
            }
            @media #{$max-3xs} {
                font-size: 40px;
            }
        }
        &.h2 {
            @media #{$max-xl} {
                font-size: 50px;
            }
            @media #{$max-lg} {
                font-size: 46px;
            }
            @media #{$max-md} {
                font-size: 42px;
            }
            @media #{$max-sm} {
                font-size: 40px;
            }
            @media #{$max-xs} {
                font-size: 38px;
            }
        }
        &.h7 {
            @media #{$max-md} {
                font-size: 28px;
            }
            @media #{$max-sm} {
                font-size: 26px;
            }
        }
        &.h9 {
            @media #{$max-lg} {
                font-size: 46px;
            }
            @media #{$max-md} {
                font-size: 42px;
            }
            @media #{$max-sm} {
                font-size: 40px;
            }
            @media #{$max-xs} {
                font-size: 38px;
            }
        }
        &.pxl-h-underlined1 {
            position: relative;
            padding-bottom: 17px;
            @extend .h7;
            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: var(--width);
                height: var(--height);
                background-color: var(--bg-color);
                border-radius: 2px;
            }
        }
        &.pxl-h-underlined2 {
            position: relative;
            padding-bottom: 17px;
            @extend .h3;
            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: var(--width);
                height: var(--height);
                background-color: var(--bg-color);
                border-radius: 2px;
            }
        }
        &.pxl-h-case-details {
            color: var(--dark-2);
            font-family: 'Montserrat';
            font-size: 36px;
            font-weight: 600;
            line-height: 1.2;
            @media #{$max-md} {
                font-size: 34px;
            }
            @media #{$max-sm} {
                font-size: 32px;
            }
            @media #{$max-xs} {
                font-size: 29px;
            }
        }

        &.pxl-h-d1 {
            font-family: 'Montserrat';
            font-size: 80px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: -1px;
        }
    }

    .pxl-item--subtitle {
        position: relative;
        &.pxl-subtitle-default {
            font-family: 'Montserrat';
            display: inline-flex;
            svg {
                display: inline-block;
                vertical-align: middle;
                padding-right: 6px;
                path, rect{
                    fill: var(--primary-color);
                }
            }
            .pxl-item--subtext {
                display: inline-block;
                vertical-align: middle;
            }
            color: var(--primary-color);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.28px;
            text-transform: uppercase;
            margin-bottom: 26px;
        }
        &.pxl-subh-box-color {
            color: var(--white);
            font-family: 'Inter';
            font-size: 12px;
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            margin-bottom: 21px;
            .pxl-item--subtext {
                display: inline-block;
                padding: 3.5px 10px;
                border-radius: 5px;
                background: var(--primary-color);
            }
        }
        &.pxl-subh-box-border {
            color: #FFF;
            font-family: "DM Sans";
            font-size: 14px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: 0.28px;
            margin-bottom: 36px;
            .pxl-item--subtext {
                display: inline-block;
                padding: 6px 14px;
                border-radius: 8px;
                border: 1px solid #FFF;
                background-color: transparent
            }
        }

        &.pxl-subh-box-gradient {
            color: #FFF;
            text-align: center;
            font-family: 'Inter';
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.09412;
            margin-bottom: 20px;
            .pxl-item--subtext {
                --gradient-color-from: #FFCD28;
                --gradient-color-to: #27B671;
                display: inline-block;
                padding: 13px 50px;
                border-radius: 100px;
                @include background-gradient-rotate(90deg, var(--gradient-color-from) 0%, var(--gradient-color-to) 100%);
            }
        }
    }
}

// Case Divider
.pxl-divider-wrap {
    position: relative;
    .pxl-divider {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

@keyframes wpcf7-loader {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
   
// Case Contact Form
.pxl-contact-form{
    .pxl-wpcf7-wrap {
        position: relative;
        &.loading {
            .pxl-wpcf7-bg-loader {
                --size: 3px;
                content: '';
                position: absolute;
                inset: -15px;
                // background: rgba($color: #FFF, $alpha: 0.05);
                background-clip: border-box;
                border-radius: 0px;
                backdrop-filter: blur(var(--size));
                -webkit-backdrop-filter: blur(var(--size));
                background-clip: padding-box;
                z-index: 999;
            }
            .pxl-wpcf7-loader {
                position: absolute;
                left: 50%;
                top: 50%;
                height: 0;
                width: 0;
                transform: translate(-50%, -50%);
                padding: 15px;
                border: 4px solid var(--primary-color);
                border-right-color: #FFF;
                border-radius: 22px;
                animation: wpcf7-loader 1s infinite linear;
                -webkit-animation: wpcf7-loader 1s infinite linear;
                z-index: 1000;
            }
        }
    }
    .wpcf7-form { 
        display: flex;
        flex-wrap: wrap;
        --x: 15px;
        --y: 15px;
        --width: 100%;
        column-gap: calc(2 * var(--x));
        row-gap: var(--y);
        @media #{$max-lg} {
            --x: 15px;
        }
        > p {
            flex-basis: calc(var(--width) - var(--x));
            max-width: calc(var(--width) - var(--x));
        }
    }
    br {
        display: none;
    }
    .wpcf7-form-control-wrap {
        display: block;
    }
    .wpcf7 form {
        .wpcf7-not-valid-tip {
            font-size: 12px;
            margin-top: 5px;
        }
        .wpcf7-response-output {
            width: 100%;
            margin: 30px 0 15px;
            background-color: var(--secondary-color);
            color: #FFF;
            padding: 12px 20px;
            font-size: 16px;
            border: none;
        }
    }

    &.pxl-wpcf7-style1 {
        .wpcf7 form.invalid {
            .wpcf7-response-output { 
                background-color: #FFF;
                color: var(--secondary-color);
                border-radius: 10px
            }
        }
        .pxl-item--heading {
            @extend .h6;
            color: #FFF;
            text-transform: uppercase;
            margin-bottom: 32px;
        }
        .pxl-item--desc {
            color: var(--boarder-grey-1);
            font-family: "Noto Sans";
            font-size: 17px;
            line-height: 1.4;
            letter-spacing: -0.34px;
            margin-bottom: 31px;
            max-width: 302px;
        }
        .pxl-item--inner {
            max-width: 350px;
            width: 100%;
        }
        .wpcf7 form { 
            --width: 100%;
            > p {
                position: relative;
                svg, i {
                    display: none;
                }
                input {
                    padding-inline: 21px 50px;
                    line-height: 48px;
                    border-radius: 30px;
                    border: 1px solid #5C6972;
                    color: #B0B6BC;
                    font-size: 12px;
                    background-color: transparent;
                    &:focus {
                        border-color: var(--primary-color);
                    }
                }
                .pxl-btn-submit {
                    --size: 42px;
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    padding: 0;
                    width: var(--size);
                    min-width: var(--size);
                    height: var(--size);
                    border-radius: 50%;
                    font-size: 14px;
                    background-color: var(--primary-color);
                    @include transition(transform .25s ease);
                    svg, i {
                        display: inline-block;
                        transition: inherit;
                    }
                    &:hover {
                        background-color: #FFF;
                        color: var(--primary-color);
                        i {
                            transform: rotate(45deg);
                        }
                    }
                }
            }
        }
    }

    &.pxl-wpcf7-style2 {
        .wpcf7 form.invalid {
            .wpcf7-response-output { 
                background-color: #FFF;
                color: var(--secondary-color);
            }
        }
        .pxl-item--inner {
            background-color: var(--secondary-color);
            border-radius: 8px;
            padding: 44px 52px 51px;
        }
        .pxl-item--heading {
            @extend .h7;
            color: #FFF;
            margin-bottom: 7px;
            text-align: center;
            @media #{$max-md} {
                font-size: 28px;
            }
            @media #{$max-sm} {
                font-size: 26px;
            }
        }
        .pxl-item--desc {
            width: 100%;
            @extend .pxl-text2;
            color: rgba($color: #FFF, $alpha: .9785);
            margin-bottom: 37px;
            text-align: center;
            display: flex;
            justify-content: center;
            .pxl-desc--text {
                display: block;
                max-width: 303px;
                text-align: center;
            }
        }
         .wpcf7-form {
            --x: 0px;
            --y: 24px;
            p {
                --height: 60px;
                 position: relative;
                 i {
                    font-family: 'Flaticon';
                    position: absolute;
                    right: 32.5px;
                    top: calc(var(--height) / 2);
                    transform: translateY(-50%);
                    color: rgba($color: #5C6972, $alpha: .9785);
                    font-size: 17.5px;
                    z-index: 99;
                }
                // + p {
                //     margin-top: 24px;
                // }
            }
        }

        input, select, .pxl-select-higthlight {
            color: #5C6972;
            @extend .pxl-text6;
            line-height: var(--height);
            border-radius: 6px;
            border: 1px solid var(--light-blue-grey-1);
            opacity: 0.9785;
            background: var(--white);
            padding-block: 0;
            padding-inline: 29px 50px;
            position: relative;
        }
        ul.pxl-select-options > li {
            @extend .pxl-text6;
            color: #5C6972;
            opacity: 0.9785;
            &:hover {
                color: #FFF;
            }
        }
        .btn-submit {
            --hover-bg-color: #FFF;
            --bg-color: var(--primary-color);
            width: 100%;
            @extend .h6;
            border-radius: 6px;
            opacity: 0.9785;
            line-height: 68px;
            margin-top: 20px;
            color: var(--white);
            text-transform: capitalize;
            &:hover {
                color: var(--secondary-color);
            }
        }
    }

    &.pxl-wpcf7-style3 {
        br {
            display: none;
        }
        label {
            @extend .h6;
            color: var(--secondary-color);
            margin-bottom: 7px;
        }
        .wpcf7-form {
            --x: 17px;
            --y: 18px;
            --width: 50%;
            display: flex;
            flex-wrap: wrap;
            > p {
                i, svg {
                    display: none;
                }
                &:nth-last-of-type(1) {
                    --width: 100%;
                    --x: 0px;
                    margin-top: 28px;
                }
                &:nth-last-of-type(2) {
                    --width: 100%;
                    --x: 0px;
                }
                button {
                    svg, i {
                        display: inline-block;
                        transition: inherit;
                    }
                }
            }
            @media #{$max-md} {
                --width: 100%;
                --x: 0px;
            }
            @media #{$max-sm} {
                --width: 50%;
                --x: 15px;
            }
            @media #{$max-xs} {
                --width: 100%;
                --x: 0px;
            }
        }
        input, select, .pxl-select-higthlight, textarea {
            border-radius: 6px;
            border: 1px solid #D4E5D2;
            background-color: #FFF;
            @extend .pxl-text6;
            line-height: 53px;
            color: #5C6972;
            padding-inline: 22px 15px;
            padding-block: 0;
            margin-top: 4px;
            &:hover, &:focus {
                border-color: var(--primary-color);
            }
        }
        .pxl-select-options > li {
            @extend .pxl-text6;
            color: #5C6972;
        }
        textarea {
            padding: 18px 22px;
            height: 153px;
            line-height: 1.4;
        }
        .btn {
            --bg-color: var(--primary-color);
            --bg-hover-color: var(--secondary-color);
            width: fit-content;
            text-transform: capitalize;
            font-size: 16px;
            padding: 22px 42px;
            color: var(--white, #FFF);
            text-align: center;
            font-family: 'Montserrat';
            font-weight: 700;
            line-height: 16px; 
        }
    }

    &.pxl-wpcf7-style4 {
        .pxl-item--inner {
            width: 100%;
            padding: 52px 50px 48px;
            background-color: #FFF;
            border-top: 5px solid #4AAB3D;
            @media #{$max-lg} {
                padding: 50px 30px;
            }
        }
        .wpcf7-form {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: space-between;
            --x: 10px;
            --y: 20px;
            --width: 50%;
            > p {
                svg, i {
                    display: none;
                }
                &:nth-of-type(5) {
                    --x: 0px;
                    --width: 100%;
                    margin-bottom: 4px
                }
                // Checkbox
                &:nth-of-type(6) { 
                    --width: auto;
                }
                // Button
                &:nth-of-type(7) {
                    padding-right: 38px;
                    --width: auto;
                }
                .wpcf7-list-item {
                    margin: 0;
                }
                button {
                    svg, i {
                        display: inline-block;
                        transition: inherit;
                    }
                }
            }
            @media #{$max-md} {
                --x: 0;
                --width: 100%;
            }
            @media #{$max-sm} {
                --width: 50%;
            }
            @media #{$max-xs} {
                --width: 100%;
                --x: 0px;
            }
        }
        .wpcf7-acceptance {
            label {
                display: inline-flex;
                align-items: center;
                gap: 12px;
            }
        }
        .wpcf7-list-item-label {
            @extend .pxl-text6;
            color: #2C4151;
            &:after, &:before {
                content: '';
                display: none;
            }
        }
        input, textarea {
            border: 1px solid var(--boarder-grey-1);
            background-color: #FFF;
            padding: 16px 18px 16px 23px;
            border-radius: 0;
            color: var(--Text-1, #5C6972);
            font-family: "DM Sans";
            font-size: 16px;
            line-height: normal;
            @extend .pxl-transition-linear;
            &:focus {
                border-color: var(--primary-color);
            }
            &[type="checkbox"] {
                @extend .pxl-square-box;
                --size: 35px;
                appearance: none; 
                background-color: var(--boarder-grey-1);
                border: none; /* Tắt border */
                cursor: pointer;
                margin: 0;
                padding: 0;
                @extend .pxl-transition-linear;
                &:checked {
                    background-color: var(--primary-color);
                    &::before {
                        content: "✓"; 
                        display: block;
                        color: white;
                        text-align: center;
                        line-height: var(--size);
                        font-weight: 700;
                        font-size: 18px;
                        transition: inherit;
                    }
                }
            }
        }
        textarea {
            height: 182px
        }
        .wpcf7-link {
            color: var(--Text-1, #5C6972);
            font-family: "DM Sans";
            font-size: 16px;
            line-height: normal;
            &:hover {
                color: var(--primary-color);
            }
        }
        button {
            @extend .h6;
            color: #FFF;;
            line-height: 58px;
            padding-inline: 33px;
            border-radius: 100px;
            background-color: #86BB46;
            --hover-bg-color : var(--secondary-color);
        }
    }

    &.pxl-wpcf7-style5 {
        .pxl-item--inner {
            border-radius: 8px;
            background-color: var(--primary-color);
            padding: 44px 52px 70px ;
            width: 100%;
            max-width: 486px;
            @media #{$max-md} {
                padding: 40px 30px 50px;
            }

        }
        .pxl-item--heading {
            text-align: center;
            color:  #FFF;
            font-family: 'Montserrat';
            font-size: 30px;
            font-weight: 700;
            letter-spacing: -0.6px;
            margin-bottom: 7px;
            @media #{$max-md} {
                font-size: 28px;
            }
        }
        .pxl-item--desc {
            display: flex;
            justify-content: center;
            color: #FFF;
            font-family: "DM Sans";
            line-height: 140%; 
            letter-spacing: -0.36px;
            margin-bottom: 38px;
            span {
                text-align: center;
                max-width: 309px;
            }
        }
        .wpcf7-form {
            --x: 0px;
            --y: 25px;
            > p {
                --height: 60px;
                position: relative;
                width: 100%;
                display: flex;
                justify-content: center;
                + p {
                }
                &:nth-of-type(4) {
                  display: block;
                }
                &:last-of-type {
                }
            }
            input:not([type="range"]) {
                width: 100%;
                line-height: var(--height);
                padding: 0;
                padding-inline: 22px 30px;
                border-radius: 6px;
                border: 1px solid #F5F7FA;
                opacity: 0.9785;
                background-color: #FFF;
                color: #6B7F95;
                font-family: "DM Sans";
                font-size: 15px;
                letter-spacing: -0.3px;
            }
            label {
                width: 100%;
                display: flex;
                justify-content: space-between;
                gap: 15px;
                @extend .h6;
                color: #FFF;
                margin-bottom: 3px;
            }


            input[type="range"] {
                --gradient-color-from: #FEC51B;
                --gradient-color-to: rgba(255, 255, 255, 0.19);
                -webkit-appearance: none;
                appearance: none; 
                width: 100%; 
                height: 7px; 
                border-radius: 7px;
                outline: none; 
                cursor: pointer;
                background-color: rgba($color: #FFF, $alpha: .19);
              }
              
              input[type="range"]::-webkit-slider-runnable-track {
                height: 7px;
                background-color: rgba($color: #FFF, $alpha: .19);
                border-radius: 7px;
              }
              
              input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none; 
                appearance: none;
                width: 20px; 
                height: 20px;
                background: #FEC51B; 
                border-radius: 50%;
                cursor: pointer;
                border: none;
                margin-top: -7px;
              }
              
              
              input[type="range"]::-moz-range-thumb {
                width: 20px; 
                height: 20px;
                background: #FEC51B; 
                border-radius: 50%;
                border: none;
                cursor: pointer;
              }
            
              
              input[type="range"]::-ms-thumb {
                width: 20px;
                height: 20px;
                background: #FEC51B; 
                border-radius: 50%;
                cursor: pointer;
                border: none;
              }
              


            i {
                position: absolute;
                top: calc(var(--height) / 2);
                right: 33px;
                transform: translateY(-50%);
                font-size: 18px;
            }
            .pxl-item--btn {
                --bg-color: var(--dark-blue-1);
                --bg-hover-color: var(--secondary-color);
                width: 100%;
                max-width: 366px;
                border-radius: 6px;
                opacity: 0.9785;
                padding-block: 22px;
                @extend .h6;
                color: #FFF;
            }
        }
    }

    &.pxl-wpcf7-style6 {

        p {
            svg, i {
                display: none;
            }
            display: inline-flex;
            width: 100%;
            .wpcf7-form-control-wrap {
                width: 100%;
            }
        }
        
        input {
            line-height: 58px;
            border-radius: 6px 0 0 6px;
            background-color: #FFF;
            padding: 0;
            padding-inline: 25px 15px;
            @extend .pxl-text4;
            border: none;
            
            &:focus {
                color: var(--secondary-color);
            }
        }
        .pxl-btn-submit {
            svg, i {
                display: inline-block;
                transition: inherit;
            }
            border-radius: 0 6px 6px 0;
            --size: 58px;
            line-height: var(--size);
            width: var(--size);
            min-width: var(--size);
            height: var(--size);
        }
    }
}

// Case Countdown
.pxl-countdown-layout1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 21px;
    .countdown-amount, .countdown-colon {
        color: #FFF;
        font-family: 'Montserrat';
        font-size: 48px;
        font-weight: 600;
        line-height: 0.9;
    }
    .countdown-period {
        color:#FFF;
        font-family: 'Montserrat';
        font-size: 18px;
        font-weight: 400;
        line-height: 1.55556;
    }
    .countdown-item-inner {
        display: inline-flex;
        justify-content: space-between;
        gap: 21px;
    }
    .countdown-item-holder {
        text-align: center;
    }
    .countdown-item {
        display: flex;
        justify-content: center;
        min-width: 60px;
    }
}

// Case Breadcrumb

.pxl-breadcrumb {
    @extend .pxl-dflex-center-v;
    gap: 26px;
    li {
        @extend .pxl-dflex-center-v;
        position: relative;
        gap: 26px;
        + li {
            color: #FFF;
            &::before {
                content: "\f104";
                display: inline-block;
                font-family: 'Flaticon';
                font-size: 15px;
                @media #{$max-sm}{
                    font-size: 12px;
                }
            }
        }
        a, span{
            color: #FFF;
            font-size: 20px;
            font-weight: 400;
            line-height: 1.1;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            &:hover {
                color: var(--primary-color);
            }
        }
        span {
            color: var(--primary-color);
        }
        @media #{$max-md}{
            gap: 20px;
            a, span{
                font-size: 18px;
            }
        }
        @media #{$max-sm}{
            gap: 15px;
            a, span{
                font-size: 16px;
            }
        }
    }
    @media #{$max-md}{ 
        gap: 20px;
    }
    @media #{$max-sm}{ 
        gap: 15px;
    }
}


// Case Accordion
.pxl-accordion {
    .pxl-item--inner{
        position: relative;
        width: 100%;
    }
    .pxl-item--single{
        position: relative;
        width: 100%;
        &.active {
            .pxl-icon--action {
                &::after {
                    transform: translate(-50%, -50%) rotate(90deg);
                }
            }
        }
    }
    &.pxl-accordion1 {
        .pxl-item--single{
            position: relative;
            width: 100%;
            .pxl-icon--action {
                --size: 38px;
            }
            &:hover, &.active   {
                .pxl-icon--action {
                    background-color: rgba($color: #FFF, $alpha: .3);
                    &:before {
                        background-color: #FFF;
                    }
                    &::after {
                        background-color: #FFF;
                    }
                }
                .pxl-item--title{
                    background: var(--primary-color);
                    color: #fff;
                    border-color: rgba(74, 171, 61, 0);
                }
            }
            + .pxl-item--single {
                margin-top: 21.5px;
            }
        }
        .pxl-item--title{
            position: relative;
            display: inline-flex;
            gap: 30px;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            line-height: 1.5;
            padding: 13.5px 17px 14.5px 34px;
            border-radius: 10px;
            background: rgba(231, 248, 240, 0.60);
            color: var(--secondary-color);
            @extend .pxl-transition-linear;
            @include box-shadow(0px 36px 120px 0px rgba(170, 194, 186, 0.17));
            border: 1px solid rgba(74, 171, 61, 0.21);
            // &::after {
            //     content: '';
            //     @extend .pxl-pabsolute-center;
            //     border-radius: inherit;
            //     transition: inherit;
            // }
            @media #{$max-lg} {
                padding: 13.5px 15px 14.5px 20px;
            }
        }
        .pxl-item--content{
            display:none;
            font-size: 18px;
            line-height: 1.5;
            letter-spacing: -0.36px;
            p {
                padding: 23px 70px 14px 35px;
                margin: 0;
            }
            @media #{$max-lg} {
                p {
                    padding: 20px 15px 14px;
                }
            }
        }
    }
    &.pxl-accordion2 {
        .pxl-item--inner {
            display: inline-flex;
            flex-wrap: wrap-reverse;
        }
        .pxl-item--list {
            list-style: none;
            &.pxl-list--content {
                flex: 0 0 31.2%;
                max-width: 31.2%;
                .pxl-item--single {
                    transition: .25s;
                    cursor: pointer;
                    position: relative;
                    border-radius: 18px;
                    background-color: #0C3258;
                    padding: 26px 15px 31px 64px;
                    + .pxl-item--single {
                        margin-top: 16px;
                    }
                }
                @media #{$max-md} {
                    flex: 0 0 45%;
                    max-width: 45%;
                }

                @media #{$max-sm} {
                    flex: 0 0 100%;
                    max-width: 100%;
                }
            }
            &.pxl-list--features {
                flex: 0 0 68.8%;
                max-width: 68.8%;
                padding-left: 71px;
                @media #{$max-lg1} {
                    padding-left: 30px;
                }
                @media #{$max-md} {
                    flex: 0 0 55%;
                    max-width: 55%;
                    padding-left: 30px;
                }

                @media #{$max-sm} {
                    flex: 0 0 100%;
                    max-width: 100%;
                    padding-left: 0;
                    margin-bottom: 30px;
                }
                .pxl-list--inner {
                    height: 100%;
                    position: relative;        
                    border-radius: 27px;
                    border: 15px solid var(--white, #FFF);  
                    overflow: hidden;    
                    min-height: 540px;  
                    @media #{$max-sm} {
                        min-height: 470px;
                    }
                }
                .pxl-item--featured {
                    @extend .pxl-pabsolute-full;
                    @extend .pxl-transition-linear;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    transition-duration: .35s;
                    opacity: 0;
                    scale: 1.15;
                    &.active {
                        scale: 1;
                        opacity: 1;
                    }
                }
            }
        }
        img {
            width: 100%;
            height: 100%;      
            scale: 1.01;      
        }
        .pxl-item--index {
            display: inline;
            @extend .h6;
            color: var(--primary-color);
            position: absolute;
            top: 27px;
            left: 29px;
        }
        .pxl-item--title {
            display: inline-flex;
            gap: 18px;
            color: #FFF;
            font-family: 'Montserrat';
            font-size: 24px;
            font-weight: 700;
            line-height: 1.333;
            letter-spacing: 0;
            padding-right: 45px;
            transition: .25s;
            @media #{$max-md} {
                font-size: 22px;
            }
            @media #{$max-xs} {
                font-size: 20px;
            }
        }
        .pxl-icon--action {
            --width: 7px;
            --height: 1px;
            position: absolute;
            right: 26px;
            top: 19px;
            background-color: transparent;
            &::before, &::after {
                background-color: #FFF;
            }
        }
        .pxl-item--content {
            padding-block: 42px 14px;
            @media #{$max-lg} {
                padding-block: 35px 14px;
            }
            p {
                color: #6B7F95;
                font-family: "DM Sans";
                font-size: 20px;
                line-height: 1.4;
                letter-spacing: -0.4px;
                @media #{$max-md} {
                    font-size: 18px;
                }
            }
        }
    }
}



// Case Contact Box
@keyframes ring {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    20%, 32%, 44%, 56%, 68%, 80% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    23%, 35%, 47%, 59%, 71% {
        transform: rotate3d(0, 0, 1, 15deg);
    }
    26%, 38%, 50%, 62%, 74% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    29%, 41%, 53%, 65%, 77% {
        transform: rotate3d(0, 0, 1, -15deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.pxl-ring-phone {
    animation: ring 3s ease infinite;
}

.pxl-contact-box {
    .pxl-item--inner {
        position: relative;
        width: 100%;
        .pxl-item--cube {
            position: absolute;
            z-index: 9;
            &.pxl-position-tl {
                top: 0;
                left: 0;
                transform: translate(-50%, -50%);
            }
            &.pxl-position-tr {
                top: 0;
                right: 0;
                transform: translate(50%, -50%);
            }
            &.pxl-position-bl {
                bottom: 0;
                left: 0;
                transform: translate(-50%, 50%);
            }
            &.pxl-position-br {
                bottom: 0;
                right: 0;
                transform: translate(50%, 50%);
            }
        }
    }
    &.pxl-contact-box1 {
        --color: #FFF;
        --gap: 15px;
        .pxl-item--inner {
            @extend .pxl-dflex-center-v;
            gap: var(--gap);
        }
        .pxl-item--icon {
            @extend .pxl-dflex-center;
            min-width: var(--size);
            width: var(--size);
            height: var(--size);
            background-color: var(--primary-color);
            color: var(--color);
        }
        .pxl-item--info {
            @extend .pxl-transition-linear;
            white-space: nowrap;
        }

        &.pxl-call-sp1 {
            .pxl-item--icon {
                --size: 50px;
                border-radius: 50%;
                font-size: 32px;
            }
            .pxl-item--message {
                display: block;
                @extend .pxl-grey1;
                @extend .pxl-text2;
            }
            .pxl-item--info {
                color: var(--dark-1);
                font-family: 'Montserrat';
                font-size: 20px;
                font-weight: 600;
                line-height: 1.3;
                &:hover {
                    color: var(--primary-color);
                }
            }
        }
        &.pxl-call-sp2 {
            .pxl-item--icon {
                --size: 50px;
                @extend .pxl-dflex-center;
                border-radius: 50%;
                font-size: 32px;
            }
            .pxl-item--message {
                display: block;
                color: var(--text-2);
                @extend .pxl-text2;
            }
            .pxl-item--info {
                color: #FFF;
                font-family: 'Montserrat';
                font-size: 20px;
                font-weight: 600;
                line-height: 1.3;
                &:hover {
                    color: var(--primary-color);
                }
            }
        }
        &.pxl-call-sp3 {
            --gap: 23px;
            .pxl-item--inner {
                padding: 45px 45px 59px 30px;
                justify-content: center;
            }
            .pxl-item--icon {
                --size: 62px;
                border-radius: 50%;
                font-size: 24px;
            }
            .pxl-item--message {
                display: block;
                color: #D7D7D7;
                @extend .pxl-text4;
            }
            .pxl-item--info {
                color: #FFF;
                @extend .h5;
                &:hover {
                    color: var(--primary-color);
                }
            }
        }
        &.pxl-call-sp4, &.pxl-call-sp5 {
            --gap: 14px;
            .pxl-item--icon {
                --size: 45px;
                background-color: transparent;
                border: 1px solid rgba(255, 255, 255, 0.13);
                color: #FFF;
                border-radius: 50%;
                font-size: 28px;
            }
            .pxl-item--content {
                display: flex;
                flex-direction: column-reverse;
            }
            .pxl-item--message {
                @extend .pxl-text6;
                color: rgba(255, 255, 255, 0.75);
            }
            .pxl-item--info {
                @extend .h6;
                color: #FFF;
                &:hover {
                    color: var(--primary-color);
                }
            }
        }

        &.pxl-call-sp5 {
            .pxl-item--inner {
                padding: 13px 28px 12px 13px;
                border-radius: 200px;
                background-color: var(--dark-blue-1);
            }
        }
    }

    &.pxl-contact-box2 {
        img, svg {
            width: 100%;
        }
        .pxl-item--inner {
            position: relative;
            border-radius: 8.571px;
            @include box-shadow(0px 4.286px 71.143px 0px rgba(13, 14, 67, 0.08));
            overflow: hidden;
        }
        .pxl-item--holder {
            @extend .pxl-pabsolute-full;
            display: flex;
            align-items: end;
        }
        .pxl-item--shape{
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            &.pxl-item--shape1 {
                bottom: 68.57px;
            }
        }
        .pxl-item--content {
            position: relative;
            width: 100%;
            padding: 50px 21px 37.5px 47px;
            z-index: 9;
        }
        .pxl-item--title {
            @extend .h7;
            color: #FFF;
            margin-bottom: 27.5px;
            text-align: center;
            @media #{$max-lg} {
                font-size: 28px;
                margin-bottom: 22px;
            }
        }
        .pxl-item--block {
            position: relative;
            padding: 21px 30px 17px 64px;
            background-color: #FFF;
            max-width: 276px;
            margin: 0 auto;
            border-radius: 10.286px;
            @include box-shadow(10.286px 10.286px 38.571px 0px rgba(42, 67, 113, 0.15));
            &::before {
                content: '';
                @extend .pxl-pabsolute-full;
                background-color: var(--primary-color);
                border-radius: inherit;
                transform: translateX(6px);
                z-index: -1;
            }
            @media #{$max-lg} {
                padding: 21px 20px 17px 45px;
            }
        }
        .pxl-item--message {
            display: block;
            @extend .pxl-text6;
            color: var(--dark-2);
        }
        .pxl-item--info {
            display: block;
            color: var(--dark-2);
            font-family: 'Montserrat';
            font-size: 26px;
            font-weight: 600;
            letter-spacing: -0.52px;
            a {
                color: inherit;
            }
            @media #{$max-lg} {
                font-size: 24px;
            }
        }
        .pxl-item--icon {
            position: absolute;
            top: 50%;
            left: 0;
            --size: 52.5px;
            width: var(--size);
            height: var(--size);
            min-width: var(--size);
            border-radius: 50%;
            @extend .pxl-dflex-center;
            background-color: var(--primary-color);
            transform: translate(-50%, -50%);
            &::before {
                content: '';
                @extend .pxl-pabsolute-center;
                width: calc(var(--size) + 9px);
                height: calc(var(--size) + 9px);
                background-color: inherit;
                opacity: .3;
                border-radius: inherit;
                z-index: -1;
            }
        }
    }

    &.pxl-contact-box3 {
        .pxl-item--inner {
            width: 100%;
            display: flex;
            border-radius: 20px 0 0 20px;
            overflow: hidden;
            max-width: 747px;
            background-color: var(--secondary-color);
            @media #{$max-md} {
                flex-direction: column;
            }
            @media #{$max-sm} {
                flex-direction: row;
                border-radius: 20px;
            }
            @media #{$max-xs} {
                min-height: auto;
                border-radius: 20px 20px 0 0;
                flex-direction: column;
            }
        }
        .pxl-image--list {
            position: relative;
            width: 100%;
            max-width: 333px;
            min-height: 680px;
            .pxl-item--image{
                position: absolute;
                height: 100%;
                top: 0;
                left: auto;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                right: 0;
                width: 0;
                opacity: 0;
                @extend .pxl-transition-ease;
                transition-duration: .35s;
                &.active {
                    width: 100%;
                    opacity: 1;
                    right: auto;
                    left: 0;
                }
            }
            
            @media #{$max-md} {
                min-height: 350px;
                max-width: 100%;
            }
            @media #{$max-sm} {
                flex-direction: row;
                max-width: 320px;
            }
            @media #{$max-xs} {
                max-width: 100%;
            }
        }
        .pxl-item--holder {
            flex-grow: 1;
        }
        .pxl-item--list {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            padding: 106px 30px 103px 30px;;
            gap: 47px;
            height: 100%;
            @media #{$max-md} {
                padding: 85px 15px;
            }
            .pxl-item--single {
                display: inline-flex;
                align-items: center;
                gap: 35.5px;
                margin-left: -80px;
                @media #{$max-md} {
                    margin-left: 0;
                    gap: 25px;
                }
                @media #{$max-xs} {
                    + .pxl-item--single {
                        margin-left: -0;
                    }
                }
            }
        }
        .pxl-item--icon {
            min-width: 103px;
            min-height: 103px;
            color: #1E2227;
            background-color: var(--primary-color);
            @extend .pxl-dflex-center;
            border-radius: 18px;
            font-size: 47px;
            font-size: 50px;
            color: #FFF;
            @media #{$max-md} {
                min-width: 85px;
                min-height: 85px;
                font-size: 42px;
            }
        }
    
        .pxl-item--message {
            color: white;
            display: block;
            text-transform: capitalize;
            margin-bottom: 7px;
            @extend .pxl-transition-linear;
            @media #{$max-md} {
                font-size: 20px;
            }
        }
        .pxl-item--info {
            @extend .pxl-text1;
            color: white;
            display: block;
            @media #{$max-md} {
                font-size: 20px;
            }
            @media #{$max-xs} {
                font-size: 18px;
            }
            &:hover {
                color: var(--primary-color);
            }
        }
    }
}

// Case Image
.pxl-image-single {
    .pxl-item--inner {
        position: relative;
    }
    .pxl-item--overlay {
        @extend .pxl-pabsolute-full;
        z-index: 9;
    }
    .pxl-item--bg {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .pxl-item--image {
        img {
            display: block;
            min-height: 1px;
        }
    }
}

// Case Play Video
.pxl-play-video {
    .pxl-item--inner {
        position: relative;
    }
    .pxl-item--bg {
        width: 100%;
        height: 448px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: local;
    }
    .pxl-item--btn {
        @extend .pxl-pabsolute-center;
    }
    .pxl-item--overlay {
        @extend .pxl-pabsolute-full;
    }
}

.pxl-counterslide {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-flex;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
    .pxl-counterslide-inside {
      display: inline-flex;
    }
    .pxl-counterslide-digit-spacer {
        visibility: hidden;
    }
    .pxl-counterslide-digit, .pxl-counterslide-digit-spacer {
        display: -moz-inline-box;
        -moz-box-orient: vertical;
        display: inline-flex;
        vertical-align: middle;
        *vertical-align: auto;
        position: relative;
    }
    .pxl-counterslide-digit-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .pxl-counterslide-ribbon {
        display: block;
    }
    .pxl-counterslide-ribbon-inner {
        display: block;
        -webkit-backface-visibility: hidden;
    }
    .pxl-counterslide-value {
        display: block;
        -webkit-transform: translateZ(0);
    }
    .pxl-counterslide-value.pxl-counterslide-last-value {
        position: absolute;
    }
    &.pxl-counterslide-animating-up .pxl-counterslide-ribbon-inner {
        -webkit-transition: -webkit-transform 2s;
        -moz-transition: -moz-transform 2s;
        -ms-transition: -ms-transform 2s;
        -o-transition: -o-transform 2s;
        transition: transform 2s;
    }
    &.pxl-counterslide-animating-up.pxl-counterslide-animating .pxl-counterslide-ribbon-inner {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    &.pxl-counterslide-animating-down .pxl-counterslide-ribbon-inner {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    &.pxl-counterslide-animating-down.pxl-counterslide-animating .pxl-counterslide-ribbon-inner {
        -webkit-transition: -webkit-transform 2s;
        -moz-transition: -moz-transform 2s;
        -ms-transition: -ms-transform 2s;
        -o-transition: -o-transform 2s;
        transition: transform 2s;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

// Case Counter
.pxl-counter {
    .pxl-item--number {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
    }
    .pxl-item--inner {
        position: relative;
        display: inline-flex;
        width: 100%;
        .pxl-item--cube {
            position: absolute;
            z-index: 9;
            &.pxl-position-tl {
                top: 0;
                left: 0;
                transform: translate(-50%, -50%);
            }
            &.pxl-position-tr {
                top: 0;
                right: 0;
                transform: translate(50%, -50%);
            }
            &.pxl-position-bl {
                bottom: 0;
                left: 0;
                transform: translate(-50%, 50%);
            }
            &.pxl-position-br {
                bottom: 0;
                right: 0;
                transform: translate(50%, 50%);
            }
        }
    }
    &.pxl-counter1 {
        .pxl-item--container {
            @extend .pxl-dflex-center;
        }
        .pxl-item--inner {
            @extend .pxl-dflex-center-v;
            column-gap: 33px;
            row-gap: 15px;
        }
        .pxl-item--number {
            color: var(--dark-blue-1);
            font-family: 'Montserrat';
            font-size: 48px;
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: -1px;
            @media #{$max-md} {
                font-size: 44px;
            }
        }
        .pxl-item--title {
            color: var(--dark-blue-1);
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.32px;
            white-space: nowrap;
        }
        .pxl-item--desc {
            line-height: 1.4;
            letter-spacing: -0.36px;
            max-width: 174px;
        }
    }
    &.pxl-counter2 {
        .pxl-item--inner{
            max-width: 292px;
        }
        .pxl-item--holder {
            display: inline-flex;
            align-items: center;
            width: 100%;
            border-radius: 16.5px;
            border: 1px solid #ECEDEE;
            padding: 6px 21px 6px 6px;
            gap: 14px;
            @media #{$max-md} {
                max-width: 100%;
            }
        }

        .pxl-item--group {
            @extend .pxl-dflex-center-v;
            gap: 6px;
        }

        .pxl-item--number {
            color: var(--secondary-color);
            font-family: 'Montserrat';
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.4px;
        }
        .pxl-item--title {
            @extend .pxl-dflex-center-v;
            gap: 2px;
            color: #2192D0;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: -0.28px;
            
        }

        .pxl-item--icon {
            --size: 72.25px;
            min-width: var(--size);
            width: var(--size);
            height: var(--size);
            @extend .pxl-dflex-center;
            border-radius: 13.6px;
            border: 1px solid #DFF6E8;
            background: #E5F7EC;
        }

        .pxl-item--desc {
            font-size: 16px;
            line-height: 1.4;
            letter-spacing: -0.32px;
        }
    }
    &.pxl-counter3 {
        .pxl-item--inner {
            position: relative;
            overflow: hidden;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 37px 49px 45px 30px;
            background-color: var(--primary-color);
            gap: 29px;
            &::after {
                content: '';
                position: absolute;
                @extend .pxl-round-box;
                --size: 173px;
                top: 13px;
                left: 8px;
                transform: translate(-50%, -50%);
                background-color: rgba($color: #FFF, $alpha: 0.2);
            }
        }
        .pxl-item--icon {
            position: relative;
            z-index: 9;
            @extend .pxl-dflex-center;
            --size: 62px;
            min-width: var(--size);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            color: #FFF;
            background-color: var(--dark-blue-2);
            svg {
                width: 32px;
                height: 32px;
                path {
                    fill: #FFF;
                }
            }
        }
        .pxl-item--content {
            padding-left: 10px;
        }
        .pxl-item--number {
            color:#FFF;
            font-family: 'Montserrat';
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            letter-spacing: -1px;
            margin-bottom: 4px;
        }
        .pxl-item--title {
            @extend .h6;
            color: #FFF;
        }
    }
    &.pxl-counter4, &.pxl-counter5 {
        .pxl-item--inner {
            justify-content: center;
        }
        .pxl-item--holder {
            max-width: 220px;
        }
        .pxl-item--title {
            color: var(--dark-blue-2);
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.32px;
            margin-bottom: 10px;
            .pxl-title--highlight {
                color: var(--dark-blue-1);
                font-weight: 700;
            }
        }
        .pxl-item--divider {
            display: block;
            position: relative;
            width: 100%;
            height: 1px;
            background-color: #DBE0E5;
            margin-bottom: 17px;
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 20px;
                height: 2px;
                background-color: var(--primary-color);
            }
        }
    }
    &.pxl-counter4 {
        .pxl-item--list {
            @extend .pxl-dflex-center-v;
        }
        .pxl-item--divider {
            margin-bottom: 23px;
        }
        .pxl-item--single {
            img {
                @extend .pxl-round-box;
                --size: 66px;
                border: 3px solid #FFF;
            }
            .pxl-item--number {
                @extend .pxl-round-box;
                --size: 66px;
                border: 3px solid #FFF;
                @extend .pxl-dflex-center;
                color: var(--white, #FFF);
                font-family: "PT Serif";
                font-size: 22px;
                line-height: 1.333;
                background-color: var(--primary-color);
            }
            + .pxl-item--single {
                margin-left: -24px;
            }
        }
    }
    &.pxl-counter5 {
        .pxl-item--number {
            color: var(--dark-blue-1);
            font-family: 'Montserrat';
            font-size: 60px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -1px;
            @media #{$max-xs} {
                font-size: 55px;
            }
        }
    }
    &.pxl-counter6 {
        .pxl-item--inner {
            align-items: center;
            flex-direction: column;
            gap: 9px;
        }
        .pxl-item--number {
            color: #2CB770;
            justify-content: center;
            font-family: 'Inter';
            font-size: 67.41px;
            font-weight: 700;
            line-height: 1.1111;
            @media #{$max-lg} {
                font-size: 64px;
            }
            @media #{$max-md} {
                font-size: 60px;
            }
            @media #{$max-sm} {
                font-size: 56px;
            }
        }
        .pxl-item--title {
            display: block;
            width: 100%;
            color: #303142;
            text-align: center;
            font-family: 'Inter';
            font-size: 35.952px;
            font-weight: 700;
            line-height: 1.275;
            @media #{$max-lg} {
                font-size: 32px;
            }
            @media #{$max-md} {
                font-size: 30px;
            }
            @media #{$max-sm} {
                font-size: 28px;
            }
        }
    }
    &.pxl-counter7 {
        .pxl-item--inner {
            --size: 232px;
            --gradient-color-from: #FFCD28;
            --gradient-color-to: #27B671;
            min-width: var(--size);
            width: var(--size);
            min-height: var(--size);
            border-radius: 50%;
            padding: 10px;
            @extend .pxl-dflex-center;
            flex-direction: column;
            @include background-gradient-rotate(90deg, var(--gradient-color-from) 0%, var(--gradient-color-to) 100%);
        }
        .pxl-item--number {
            color: #FFF;
            justify-content: center;
            text-shadow: 0px 10px 50px rgba(8, 40, 45, 0.55);
            font-family: 'Outfit';
            font-size: 100px;
            font-weight: 600;
            line-height: 66px;
            text-transform: capitalize;
        }
        .pxl-item--title {
            color: #FFF;
            text-align: center;
            font-family: 'Oswald';
            font-size: 28px;
            font-weight: 600;
            line-height: 2.35714;
            text-transform: capitalize;
        }
    }
}


// Case Index Box
.pxl-index-box {
    &.pxl-index-box1 {
        --gap: 26.5px;
        .pxl-item--inner {
            display: inline-flex;
            gap: var(--gap);
        }
        .pxl-index--number {
            @extend .pxl-dflex-center;
            width: var(--size);
            height: var(--size);
            border-radius: var(--size);
        }
        &.pxl-style-default {
            .pxl-item--inner {
                max-width: 365px;
            }
            .pxl-item--index {
                color: var(--primary-color);
                @extend .h5;
                --size: 41.56px;
                .pxl-index--number {
                    background-color: var(--white);
                    @include box-shadow(0px 10.604px 21.208px 0px rgba(137, 151, 186, 0.25));
                }
            }
            .pxl-item--title {
                margin-bottom: 9px;
                @media #{$max-lg} {
                    font-size: 20px;
                }
            }
            .pxl-item--desc {
                @extend .pxl-text2;
            }
        }
        &.pxl-style-1 {
            --gap: 22.5px;
            .pxl-item--index {
                --size: 35px;
                font-family: "PT Serif";
                font-size: 16px;
                color: #FFF;
                .pxl-index--number {
                    background-color: var(--primary-color);
                }
            }
            .pxl-item--title {
                @extend .h6;
                margin-bottom: 15px;
            }
            .pxl-item--desc {
                @extend .pxl-text6;
            }
        }
        &.pxl-style-2 {
            --gap: 29px;
            .pxl-item--inner {
                max-width: 500px;
            }
            .pxl-item--index {
                --size: 45px;
                color: #FFF;
                font-family: 'Inter';
                font-size: 23px;
                font-weight: 700;
                .pxl-index--number {
                    background-color: #2CB770;
                }
                @media #{$max-sm} {
                    font-size: 20px;
                }
            }
            .pxl-item--title {
                color: #303142;
                font-family: 'Outfit';
                font-size: 27.71px;
                font-weight: 600;
                line-height: 1.5;
                letter-spacing: 0;
                margin-bottom: 5px;
                @media #{$max-sm} {
                    font-size: 24px;
                }
            }
            .pxl-item--desc {
                color: #636363;
                font-family: "Open Sans";
                font-size: 18.474px;
                font-weight: 400;
                line-height: 1.625;
            }
        }
    }
    &.pxl-index-box2 {
        .pxl-item--container {
            display: inline-flex;
            width: 100%;
            justify-content: center;
        }
        .pxl-item--inner {
            position: relative;
            max-width: 426px;
            padding-block: 35px 40px;
        }
        .pxl-item--title {
            color: #FFA903;
            font-family: 'Outfit';
            font-size: 34px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.42;
            letter-spacing: 0;
            @media #{$max-md} {
                font-size: 32px;
            }
            @media #{$max-xs} {
                font-size: 30px;
            }
        }
        .pxl-item--index {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            color: rgba($color: #FFF, $alpha: .13);
            font-family: 'Outfit';
            font-size: 138px;
            font-weight: 700;
            line-height: 138px;
        }
    }
}

// Case Logo
.pxl-logo { 
    a {
        display: inline-block;
        position: relative;
    }
    img {
        width: auto;
        vertical-align: middle;
    }
}

// Case Text Editor
.pxl-text-editor {
    .pxl-item--inner {
        display: inline-block;
        &.h3 {
            @media #{$max-md} {
                font-size: 20px;
            }
            @media #{$max-md} {
                font-size: 18px;
            }
        }
        &.pxl-custom {
            letter-spacing: -0.36px;
        }
    }
}


// Case Testimonial
.pxl-testimonial-carousel {
    &.pxl-testimonial-carousel1 {
        --size: 184px;
        @media #{$max-sm} {
            --size: 170px;
        }
        @media #{$max-xs} {
            --size: 140px;
            .pxl-content--left {
                @extend .pxl-dflex-center-v;
                gap: 20px;
            }
        }
        .pxl-slide-inner {
            display: inline-flex;
            align-items: center;
            column-gap: 35px;
            row-gap: 15px;
            @media #{$max-sm} {
                column-gap: 20px;
            }
            @media #{$max-sm} {
                flex-direction: column;
                align-items: start;
            }
        }
        .pxl-item--avatar {
            overflow: hidden;
            img {
                width: var(--size);
                min-width: var(--size);
                height: var(--size);
                border-radius: var(--size);
                border: 4px solid var(--primary-color);
            }
        }
        .pxl-item--desc {
            @extend .pxl-text1;
            margin-bottom: 30px;
            @media #{$max-lg} {
                font-size: 20px;
            }
            @media #{$max-sm} {
                margin-bottom: 20px;
                font-size: 18px;
            }
        }
        .pxl-item--content {
            @media #{$max-xs} {
                width: 100%;
            }
        }
        .pxl-content-group {
            display: inline-flex;
            flex-wrap: wrap-reverse;
            justify-content: space-between;
            width: 100%;
            padding-right: 17px;
            column-gap: 30px;
            row-gap: 10px;
            &.pxl-group-copy {
                display: none;
            }
            @media #{$max-xs} {
                display: none;
                padding-right: 0;
                &.pxl-group-copy {
                    display: block;
                }
            }
        }
        .pxl-user--name {
            display: block;
            color: var(--dark-2);
            @media #{$max-lg} {
                font-size: 20px;
            }
            @media #{$max-xs} {
                font-size: 18px;
            }
        }
        .pxl-user--position {
            @extend .pxl-text4;
            color: #86BB46;
            @media #{$max-sm} {
                font-size: 16px;
            }
        }
        .pxl-list--star {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding-bottom: 14px;
            @media #{$max-lg} {
                padding-bottom: 0px;
            }
            @media #{$max-sm} {
                padding-top: 10px;
                .pxl-item--star {
                    width: 21px;
                    height: 20px;
                }
            }
        }
    }
    &.pxl-testimonial-carousel2 {
        
        .pxl-swiper-arrows {
            .pxl-swiper-arrow {
                background-color: transparent;
                svg path {
                    fill: #D7D7D7;
                }
                &:hover {
                    background-color: var(--dark-blue-1);
                    border-color: var(--dark-blue-1);
                    svg path {
                        fill: #FFF;
                    }
                }
                @media #{$max-md} { 
                    background-color: #FFF;
                    svg path {
                        fill: var(--dark-blue-1);
                    }
                    &:hover {
                        background-color: var(--primary-color);
                        border-color: var(--primary-color);
                    }
                }
            }
        }
        &.pxl-testimonial-style1 {
            .pxl-swiper-dots.pxl-swiper-pagination-bullets {
                padding-top: 60px;
            }
            .pxl-slide-inner {
                border-radius: 25px;
                background-color: #103254;
                padding: 60px 35px 83px 53px;
                @media #{$max-xs} {
                    padding: 60px 30px 70px;
                }
            }
            .pxl-user--avatar {
                position: relative;
                img {
                    --size: 72px;
                    min-width: var(--size);
                    width: var(--size);
                    height: var(--size);
                    border-radius: 50%;
                    border: 3px solid rgba($color: #FFF, $alpha: .13);
                }
                .pxl-item--icon {
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            .pxl-user-info {
                display: flex;
                align-items: center;
                margin-bottom: 36.5px;
                gap: 16px;
            }
            .pxl-user--name {
                color:#FFF;
                font-family: "Plus Jakarta Sans";
                font-size: 20px;
                font-weight: 700;
                line-height: 1.2; 
                text-transform: capitalize;
            }
            .pxl-user--address {
                color: #DDF5DA;
                font-family: 'Inter';
                font-size: 16px;
                line-height: 1.25;
            }
    
            .pxl-item--rating {
                @extend .pxl-dflex-center-v;
            }
            .pxl-item--desc {
                color: rgba($color: #FFF, $alpha: .68);
                font-family: "DM Sans";
                font-size: 20px;
                font-style: italic;
                font-weight: 400;
                line-height: 1.33;
                letter-spacing: -0.4px;
            }
            .pxl-item--content {
                display: flex;
                flex-direction: column;
                gap: 34px;
            }
    
            .pxl-list--star {
                display: inline-flex;
                align-items: center;
                gap: 3px;
            }
            .pxl-item--label {
                color: #FFF;
                font-family: 'Montserrat';
                font-size: 16px;
                font-weight: 600;
                letter-spacing: -1px;
                padding-right: 10px;
            }
        }
        &.pxl-testimonial-style2 { 
            .pxl-swiper-arrows {
                top: 48.7%;
            }
            .pxl-slide-inner {
                border-radius: 16px;
                background-color: rgba($color: #000, $alpha: .17);
                padding: 43px 35px 65px 58px;
                @media #{$max-xl} {
                    padding: 43px 35px 45px 58px
                } 
                @media #{$max-md} {
                    padding: 45px 30px;
                } 
            }
            .pxl-user--avatar {
                position: relative;
                img {
                    --size: 66px;
                    min-width: var(--size);
                    width: var(--size);
                    height: var(--size);
                    border-radius: 50%;
                    border: 3px solid rgba($color: #FFF, $alpha: .13);
                }
                .pxl-item--icon {
                    position: absolute;
                    bottom: -13px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            .pxl-user-info {
                display: flex;
                align-items: center;
                margin-bottom: 39.5px;
                gap: 16px;
            }
            .pxl-user--name {
                color: #FFF;
                font-family: "Plus Jakarta Sans";
                font-size: 20px;
                font-weight: 700;
                line-height: 1.2;
            }
            .pxl-user--address {
                color: #DDF5DA;
                font-family: 'Inter';
                font-size: 16px;
                line-height: 1.25;
            }
            .pxl-item--rating {
                @extend .pxl-dflex-center-v;
            }

            .pxl-item--content {
                display: flex;
                flex-direction: column-reverse;
                gap: 25px;
            }

            .pxl-list--star {
                @extend .pxl-dflex-center-v;
                gap: 2px;
            }
            .pxl-item--label {
                color: #FFF;
                font-family: 'Montserrat';
                font-size: 16px;
                font-weight: 600;
                letter-spacing: -1px;
                padding-right: 10px;
            }
    
            .pxl-item--desc {
                color:  #B0B6BC;
                font-family: "Noto Sans";
                font-size: 20px;
                line-height: 1.4;
                letter-spacing: -0.4px;
            }
        }
    }

    &.pxl-testimonial-carousel3 { 
        .pxl-carousel-inner {
            background-color: var(--primary-color);
            max-width: 354px;
            padding: 62px 44px 47px 50px;
            @media #{$max-lg} {
                padding: 60px 30px 47px;
            }
        }
        .pxl-content-group {
            padding-top: 32px;
            @extend .pxl-dflex-center-v;
            gap: 16px;
            border-top: 1px solid rgba($color: #FFF, $alpha: .4)
        }
        
        .pxl-item--list {
            @extend .pxl-dflex-center-v;
        }
        .pxl-item--single {
            --size: 50px;
            min-width: var(--size);
            width: var(--size);
            height: var(--size);
            border-radius: var(--size);
            overflow: hidden;
            border: 2px solid #FFF;
            +.pxl-item--single {
                margin-left: -24px;
            }
        }
        .pxl-item--number {
            width: 100%;
            height: 100%;
            @extend .pxl-dflex-center;
            background-color: #FEC51B;
            color: var(--secondary-color);
            font-family: "PT Serif";
            font-size: 16.667px;
            line-height: 1.33333;
        }

        .pxl-item--desc {
            color: #FFF;
            font-family: "DM Sans";
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 33px;
        }

        .pxl-item--label {
            @extend .h6;
            color: #FFF;
            padding-right: 5px;
        }
    }

    &.pxl-testimonial-carousel4 { 
        .pxl-carousel-inner {
            position: relative;
        }
        .pxl-swiper-dots-wrap {
            position: absolute;
            right: 165px;
            bottom: 21px;
            z-index: 99;
            .pxl-swiper-dots {
                padding: 0;
                gap: 4px;
            }
            @media #{$max-lg} {
                right: 0px;
            }
            @media #{$max-xs} {
                position: relative;
                margin-top: 50px;
            }
        }
        .pxl-slide-inner {
            padding-bottom: 10px;
            max-width: 874px;
        }
        .pxl-item--desc {
            color: #FFF;
            font-family: "DM Sans";
            font-size: 26px;
            line-height: 1.4;
            letter-spacing: -0.52px;
            margin-bottom: 38px;
            @media #{$max-md} {
                font-size: 24px;
            }
            @media #{$max-sm} {
                font-size: 22px;
            }
        }
        .pxl-user--avatar {
            position: relative;
            img {
                --size: 87px;
                min-width: var(--size);
                width: var(--size);
                height: var(--size);
                border-radius: 50%;
                border: 3.66px solid rgba(255, 255, 255, 0.13);
            }
            .pxl-item--icon {
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        .pxl-user-info {
            display: flex;
            align-items: center;
            gap: 27px;
        }
        .pxl-user--name {
            color: #FFF;
            font-family: "Plus Jakarta Sans";
            font-size: 26.838px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 5px;
        }
        .pxl-user--address {
            color: #DDF5DA;
            font-family: 'Inter';
            font-size: 21.47px;
            line-height: 1.25042;
        }
        @media #{$max-md} {
            .pxl-user--name {
                font-size: 24px;
            }
            .pxl-user--address {
                font-size: 20px;
            }
        }
    }
}

// Case Project Info
.pxl-project-info {
    &.pxl-project-info1 {
        .pxl-item--inner {
            border-radius: 8.611px;
            box-shadow: 0px 8.611px 18.083px 0px rgba(27, 18, 18, 0.05);
            background-color: #FFF;
            overflow: hidden;
        }
        .pxl-item--heading {
            width: 100%;
            text-align: center;
            line-height: 67px;
            padding-inline: 15px;
            background-color: var(--dark-2);
            color: #FFF;
        }
        .pxl-item--title {
            @extend .pxl-text2;
        }
        .pxl-list-info {
            padding: 13px 37px 23px 35px;
            margin: 0 auto;
            @media #{$max-lg} {
                padding: 13px 30px 23px;
            }
        }
        .pxl-item--single {
            display: flex;
            align-items: center;
            padding-block: 17px 20px;
            gap: 17px;
            + .pxl-item--single {
                border-top: 1px solid var(--boarder-grey-1);
            }
        }
        .pxl-item--icon {
            --size: 43px;
            width: var(--size);
            height: var(--size);
            min-width: var(--size);
            border-radius: 50%;
            @extend .pxl-dflex-center;
            background-color: var(--primary-color);
        }
        .pxl-item--info {
            a {
                color: inherit;
            }
        }
    }
}

.pxl-related-post {
    &.pxl-related-post1 {
        .pxl-item--single {
            + .pxl-item--single {
                margin-top: 6.8px;
            }
        }
        .pxl-item--link {
            position: relative;
            height: 68px;
            @extend .pxl-dflex-center-v;
            width: 100%;
            justify-content: space-between;
            padding-inline: 15px 23px;
            gap: 20px;
            border-radius: 5.676px;
            background: #FFF;
            @include box-shadow(0px 0px 34.054px 0px rgba(137, 151, 186, 0.10));
            &:hover, &.active {
                color: #FFF;
                background-color: var(--secondary-color);
                .pxl-item--arrow {
                    svg path {
                        fill: #FFF;
                    }
                }
            }
        }
        .pxl-item--arrow {
            position: relative;
            z-index: 9;
            svg path {
                @extend .pxl-transition-linear;
            }
        }
        .pxl-item--group {
            position: relative;
            z-index: 9;
            @extend .pxl-dflex-center-v;
            gap: 33px;
        }
        .pxl-item--icon {
            @extend .pxl-dflex-center;
            --size: 39px;
            width: var(--size);
            min-width: var(--size);
            height: var(--size);
            border-radius: 4px;
            background-color: var(--primary-color);
            transition: inherit;
            svg {
                width: 25.281px;
                height: 26.696px;
                transition: inherit;
                path {
                    transition: inherit;
                    fill: #FFF;
                }
            }
        }
    }    
}


.pxl-tabs {
    position: relative;
    .pxl-list--content {
        .pxl-tab--content {
            display: none;
            &.active {
                display: block;
            }
        }
    }
}

// Case Princing Tab
.pxl-pricing {
    .pxl-item--inner {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        width: 100%;
    }
    .pxl-list--content, .pxl-tab--content {
        width: 100%;
    }
    .pxl-list--btn {
        display: inline-flex;
        border-radius: 100px;
        background-color: #FFF;
        padding: 6px 8px;
        gap: 14px;
        @include box-shadow(0px 30px 100px 0px rgba(0, 0, 0, 0.17));
        button {
            background-color: transparent;
            color: var(--secondary-color);
            font-family: 'Montserrat';
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.28px;
            text-transform: capitalize;
            padding-inline: 19px;
            line-height: 35px;
            border-radius: 100px;
            &.active, &:hover {
                background-color: var(--primary-color);
                color: #FFF;
            }
        }
    }
}

.pxl-team-info {
    &.pxl-team-info1 {
        .pxl-item--featured {
            margin-bottom: 19px;
        }
        .pxl-key--info {
            margin-bottom: 33px;
        }
        .pxl-item--title {
            color: var(--dark-blue-2);
            font-family: 'Montserrat';
            font-size: 40px;
            font-weight: 600;
            line-height: 1.4;
            letter-spacing: -1px;
            > a {
                color: inherit;
            }
            @media #{$max-lg} {
                font-size: 38px;
            }
            @media #{$max-md} {
                font-size: 36px;
            }
            @media #{$max-sm} {
                font-size: 34px;
            }
            @media #{$max-xs} {
                font-size: 30px;
            }
        }
        .pxl-item--position {
            @extend .pxl-text5;
            color: var(--primary-color);
            @media #{$max-xs} {
                font-size: 16px;
            }
        }

        .pxl-add--info {
            margin-bottom: 24px;
        }
        .pxl-item--group {
            padding-block: 23px 15px;
            border-bottom: 1px solid var(--border-color);
            &:first-child {
                border-top: 1px solid var(--border-color);
            }
        }

        .pxl-info--title {
            @extend .pxl-text6;
            color: var(--secondary-color);
        }

        .pxl-item--info {
            color: var(--dark-blue-2);
            @media #{$max-md} {
                font-size: 20px;
            }
        }

        .pxl-item--socials {
            @extend .pxl-dflex-center-v;
            gap: 11px;
        }
        .pxl-item--social {
            --size: 34px;
            width: var(--size);
            min-width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background-color: var(--primary-color);
            color: #FFF;
            font-size: 14px;
            @extend .pxl-hover-scale-bg;
            --hover-bg-color: #FFF;
            &:hover {
                color: var(--primary-color);
            }
        }
    }
}

.pxl-progress-bar {
    &.pxl-progress-bar1 {
        .pxl-item--inner {
            width: 100%;
            max-width: 382px;
        }
        .pxl-item--single {
            --width: 50%;
            + .pxl-item--single {
                margin-top: 15px;
            }
        }
        .pxl-item--info {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            width: 100%;
            max-width: var(--width);
            margin-bottom: 3px;
        }
        .pxl-item--title {
            color: var(--dark-blue-1);
            font-family: 'Montserrat';
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.28px;
        }
        .pxl-item--percent {
            color: var(--dark-blue-1);
            font-family: 'Montserrat';
            font-size: 12px;
            font-weight: 600;
            letter-spacing: -0.24px;
        }
        .pxl-item--track {
            display: flex;
            align-items: center;
            width: 100%;
            border-radius: 5.977px;
            background: #D7D7D7;
        }
        .pxl-item--fill {
            display: block;
            max-width: var(--width);
            width: var(--width);
            border-radius: inherit;
            background-color: var(--primary-color);
            height: 6px;
            animation-duration: 1.25s;
            -webkit-animation-duration: 1.25s;
        }
    }
}


// Case Text Marquee
.pxl-circular-text {
    .pxl-item--inner {
        position: relative;
        padding: 13px;
        border-radius: 50%;
        background-color: #FFF;
    }
    .pxl-item--text {
        position: relative;
        font-size: 18px;
        text-transform: uppercase;
        color: var(--primary-color);
        line-height: 1;
        letter-spacing: -0.32px;
        &.spin {
            > div {
                animation: pxl_spin 15s linear infinite;
                transform-origin: 50% 50%;
            }
            &.ccw { 
                > div {
                    animation: pxl_spin_reverse 15s linear infinite;
                }
            }
        }
    }
    img {
        @extend .pxl-pabsolute-center;
        min-width: 132px;
        width: 132px;
        height: 132px;
        border-radius: 50%;
    }
}

@keyframes slide-ltr {
    to {
        transform: translateX(calc(var(--width) ));   
    }
}
@keyframes slide-rtl {
    to {
        transform: translateX(calc(-1 * (var(--width) )));
    }
}

.pxl-slide-ltr {
    animation: slide-ltr 20s linear infinite;
}

.pxl-slide-rtl {
    animation: slide-rtl 20s linear infinite;
}


// Case Image Marquee
.pxl-marquee {
    &.pxl-overflow-hidden {
        overflow-x: clip;
    }
    &.pxl-marquee1 {
        .pxl-item--label {
            --bg-color: #B0B0B0;
            --width: 284px;
           width: 100%;
           text-align: center;
           justify-content: center;
           display: inline-flex;
           align-items: center;
           text-align: center;
           margin-bottom: 40px;
           &.pxl-show-line {
               .pxl-label--text {
                    position: relative;
                    padding-inline: 23px;
                    &::after, &::before {
                        position: absolute;
                        content: '';
                        width: 100%;
                        top: 50%;
                        max-width: var(--width);
                        height: 1px;
                        background-color: var(--bg-color);
                        left: 0;
                        transform: translate(-100%, -50%);
    
                    }
                    &::after {
                        left: auto;
                        right: 0;
                        transform: translate(100%, -50%);
                    }
                }
           }
            .pxl-title--highlight {
                color: var(--primary-color);
                font-family: 'Montserrat';
                font-size: 22px;
                font-weight: 600;
                line-height: 1.5;
                letter-spacing: -0.44px;
            }
        }
        .pxl-item--container {
            width: 100%;
            position: relative;
        }
        .pxl-item--inner {
            --x: 60px;
            --gap: 30px;
            --width: 100%;
            position: relative;
            @extend .pxl-dflex-center-v;   
            width: 100%;
            &.infinite {
                --width: calc(100% + var(--gap));
            }   
            &.ltr {
                justify-content: end;
                .pxl-item--list {
                    @extend .pxl-slide-ltr;
                }
            }
            &.rtl {
                justify-content: start;
                .pxl-item--list {
                    @extend .pxl-slide-rtl;
                }
            }
            &.pause-on-hover {
                &:hover {
                    .pxl-item--list {
                        animation-play-state: paused;
                    }
                }
            }
        }
        .pxl-item--list {
            display: inline-flex;
            flex: 0 0 var(--width);
            will-change: transform;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: space-between;
            &.main {
                padding-right: var(--gap);
            }
            &.duplicate {
                padding-left: var(--gap);
            }
        }
        .pxl-item--single {
            position: relative;
            width: 100%;
            @extend .pxl-transition-linear;
            .pxl-single--inner {
                width: 100%;
                @extend .pxl-dflex-center;
                transition: inherit;
            }
            + .pxl-item--single {
                padding-left: var(--x);
            }
        }
        .pxl-item--link {
            @extend .pxl-pabsolute-full;
        }
        .pxl-item--icon, .pxl-item--image {
            position: relative;
            transition: inherit;
            img {
                height: 100%;
            }
            &::after {
                content: '';
                position: absolute;
                bottom: -10px; 
                left: 50%;
                width: 100%; 
                height: 15px; 
                background-color: rgba($color: #000000, $alpha: 0.25);
                filter: blur(8px);
                border-radius: 50%; 
                transform: translateX(-50%); 
                opacity: 0;
                transition: inherit;
            }
        }
        .pxl-item--bg {
            width: 100%;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .pxl-item--overlay {
            --gradient-color-from: rgba(0, 28, 23, 0.00);
            --gradient-color-to: #001C17;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(180deg, var(--gradient-color-from) 4.1%, var(--gradient-color-to) 100%);
        }

        &.pxl-marquee-style1 {
            .pxl-item--single {
                &:hover {
                    .pxl-item--icon, .pxl-item--image {
                        i, img, svg {
                            transform: translateY(-10px);
                        }
                        &::after {
                            opacity: 1;
                        }
                    }
                }
            }
        }
        &.pxl-marquee-style2 {
            .pxl-item--inner {
                --x: 30px;
            }
            .pxl-item--single {
                width: 100%;
                .pxl-single--inner {
                    @extend .pxl-square-box;
                    --size: 200px;
                    background-color: #FFF;
                    @include box-shadow(0px 4px 20px 0px rgba(180, 199, 190, 0.29));
                }
            }
        }
    }
}

// Turbine
.turbine {
    g {
        animation: pxl_spin 5s linear infinite;
        transform-origin: 50.5% 25%;
    }
}


@keyframes svg-grow-width {
    from {
        width: 0;
    }to {
        width: 934px;
    }
}

.svg-grow-width {
    animation: svg-grow-width .75s ease both;
    -webkit-animation: svg-grow-width .75s ease both;
    -khtml-animation: svg-grow-width .75s ease both;
    -moz-animation: svg-grow-width .75s ease both;
    -ms-animation: svg-grow-width .75s ease both;
    -o-animation: svg-grow-width .75s ease both;
}

// Case Workflow Steps
.pxl-workflow-steps {
    .pxl-item--inner {
        position: relative;
    }
    &.pxl-workflow-steps1 {
        .pxl-martrix-dots {
            position: absolute;
            right: 30px;
            top: 0;
            z-index: -1;
        }
        .pxl-item--steps {
            --width: 327px;
            display: inline-flex;
            justify-content: space-between;
            position: relative;
            gap: 50px;
            width: 100%;
            min-height: 500px;
            @media #{$max-sm} {
                flex-wrap: wrap;
            }
        }
        .pxl-item--curve {
            position: absolute;
            left: 46px;
            top: 34.5%;
            height: 354px;
            overflow: hidden;
            .pxl-svg--curve {
                min-width: clamp(830px, calc((934 - 830) * ((100vw - 1200px) / (1400 - 1200)) + 830px), 934px);
                width: clamp(830px, calc((934 - 830) * ((100vw - 1200px) / (1400 - 1200)) + 830px), 934px);
                min-height: 354px;
            }
            @media #{$max-lg1} {
                display: none;
            }
        }
        .pxl-item--step {
            position: relative;
            width: 100%;
            max-width: var(--width);
            flex-basis: var(--width);
            @media #{$max-lg1} {
                margin-top: 0 !important;
                max-width: none;
            }
        }
        .pxl-item--group {
            max-width: var(--width);
            position: relative;
            width: 100%;
            padding-block: 37px 20px;
            &::after {
                content: attr(data-index);
                color: var(--light-green-2);
                position: absolute;
                font-family: 'Montserrat';
                font-size: 178px;
                font-weight: 700;
                line-height: 1.4067;
                right: 10px;
                bottom: -100px;
            }
        }
        .pxl-item--image {
            padding-inline: 27px 63px;
            img {
                width: 100%;
                max-width: 229px;
                border-radius: 15px;
            }
        }
        .pxl-item--content {
            position: relative;
            padding-top: 62px;
            width: 100%;
        }
        .pxl-item--index {
            --size: 54px;
            min-width: var(--size);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background-color: var(--primary-color);
            color: #FFF;
            @extend .pxl-dflex-center;
            @extend .h3;
            position: absolute;
            top: -20px;
            left: 0;
            transform: translateY(-50%);
        }
        .pxl-item--title {
            color: var(--dark-blue-1);
            margin-bottom: 16px;
        }
        .pxl-item--desc {
            @extend .pxl-text3;
            color: #6B7F95;
        }
    }

    &.pxl-workflow-steps2 { 
        .pxl-item--curve {
            position: absolute;
            top: 75px;
            left: 50%;
            transform: translateX(-50%);
            height: 98px;
            overflow: hidden;
            max-width: 934px;
            .pxl-svg--curve {
                min-width: 934px;
                height: 98px;
            }
        }
        .pxl-item--step {
            flex-basis: 288px;
            flex-grow: 1;
            min-width: 288px;
        }
        .pxl-item--image {
            margin-bottom: 35px;
            .pxl-item--group {
                display: block;
                width: fit-content;
                position: relative;
                margin: 0 auto
            }
            img {
                --size: 200px;
                min-width: var(--size);
                width: var(--size);
                height: var(--size);
                border-radius: 50%;
                border: 10px solid rgba($color: #E9E9E9, $alpha: .6);
            }
        }
        .pxl-item--index {
            position: absolute;
            top: 25px;
            left: 6px;
            --size: 51px;
            min-width: var(--size);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            @extend .pxl-dflex-center;
            background-color: var(--primary-color);
            color: var(--White, #FFF);
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 700;
        }
        .pxl-item--title {
            color: #003973;
            text-align: center;
            font-family: 'Montserrat';
            font-size: 26px;
            font-weight: 700;
            line-height: 1.15385;
            margin-bottom: 17px;
        }
        .pxl-item--desc {
            text-align: center;
            color: #6B7F95;
            font-family: "DM Sans";
            font-size: 20px;
            line-height: 1.4;
            letter-spacing: -0.4px;
        }
    }
}


.pxl-pricing {
    &.pxl-pricing1 {
        .pxl-list--cards {
            width: 100%;
            display: inline-flex;
            margin: 0;
        }
        .pxl-item--card {
            padding: 0;
        }
        .pxl-item--popular {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 52px;
            color: var(--yellow);
            font-family: "DM Sans";
            font-size: 14px;
            gap: 3px;
            font-weight: 500;
            background-color: var(--dark-blue-1);
            @extend .pxl-dflex-center;
            text-transform: uppercase;
        }
        .pxl-card--inner {
            --x: 30px;
            --border-color: #E6EEFF;
            position: relative;
            background-color: #FFF;
            border-radius: 15px;
            padding-block: 72px 63px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            &.active {
                --border-color: #C1E9D2;
                background-color: var(--light-green-2);
                .pxl-item--subtitle {
                    color: var(--dark-blue-1);
                }
                .pxl-item--btn {
                    background-color: var(--primary-color);
                    color: var(--white, #FFF);
                    border-color: rgba($color: #000000, $alpha: 0);
                    line-height: 46px;
                    &:hover {
                        border: 2px solid var(--primary-color);
                        color: var(--primary-color);
                        background-color: transparent;
                    }
                }
                .pxl-list--features {
                    padding: 38px var(--x) 46px;
                }
                .pxl-card--inner {
                    padding-block: 72px 57px;
                }
            }
        }
        .pxl-content-top {
            width: 100%;
            padding: 0 var(--x) 25px;
            border-bottom: 1px solid var(--border-color);
        }
        .pxl-item--title {
            text-align: center;
            color: #4AAB3D;
            font-family: 'Montserrat';
            font-size: 22px;
            font-weight: 600;
            line-height: 1.18182;
            margin-bottom: 13px;
        }
        .pxl-item--subtitle {
            color: #6B7F95;
            text-align: center;
            font-family: "DM Sans";
            font-size: 15px;
            font-weight: 700;
            line-height: 0.93333;
        }
        .pxl-content-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 19px var(--x) 18px;
            border-bottom: 1px solid var(--border-color);
        }
        .pxl-item--price {
            color: var(--dark-blue-1);
            text-align: center;
            font-family: 'Montserrat';
            font-size: 60px;
            font-weight: 600;
            line-height: 1.1;
            text-transform: capitalize;
            margin-bottom: 19px;
        }
        .pxl-item--billing_cycle {
            display: block;
            color: #6B7F95;
            text-align: center;
            font-family: "DM Sans";
            font-size: 14px;
            font-weight: 500;
            line-height: 1.57143;
            margin-top: -4px;
        }
        .pxl-item--desc {
            color: #6B7F95;
            text-align: center;
            font-family: "DM Sans";
            font-size: 15px;
            line-height: 1.73333;
            max-width: 261px;
        }
        .pxl-list--features {
            width: fit-content;
            padding: 38px var(--x) 51px;
        }
        .pxl-item--feature {
            color: rgba($color: #5F6973, $alpha: .5);
            font-family: "Noto Sans";
            font-size: 16px;
            font-weight: 500;
            text-transform: capitalize;
            padding-left: 27px;
            position: relative;
            svg {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
            &.active {
                color: #6B7F95;
            }
            + .pxl-item--feature {
                margin-top: 21.5px;
            }
        }
        .pxl-item--btn {
            padding-inline: 57px;
            line-height: 48px;
            border-radius: 4px;
            font-family: 'Montserrat';
            font-size: 15px;
            font-weight: 600;
            text-transform: capitalize;
            border: 2px solid var(--dark-blue-1);
            color: var(--dark-blue-1);
            background-color: transparent;
            &:hover {
                background-color: var(--dark-blue-1);
                color: #FFF;
            }
        }
    }
}

.pxl-company-features {
    .pxl-item--container {
        --x: 15px;
        margin-inline: calc(-1 * var(--x));
    }
    .pxl-item--inner {
        display: inline-flex;
        width: 100%;
        flex-wrap: wrap;
        row-gap: 60px;
        .pxl-item--col1 {
            flex-basis: 34.5%;
            max-width: 34.5%;
            padding-inline: var(--x);
            display: flex;
            padding-top: 197px;
            @media #{$max-sm} {
                padding-top: 0;
            }
            .pxl-col--inner {
                display: flex;
                width: 100%;
                height: 100%;
            }
        }
        .pxl-item--col2 {
            flex-basis: 33.405%;
            max-width: 33.405%;
            padding-inline: var(--x);
        }
        .pxl-item--col3 {
            flex-basis: 32.095%;
            max-width: 32.095%;
            padding-inline: var(--x);
            .pxl-col--inner {
                display: flex;
                align-items: end;
                height: 100%;
            }
        }
        @media #{$max-md} {
            .pxl-item--col1 ,
            .pxl-item--col2 {
                max-width: 50%;
                flex-basis: 50%;
            }
            .pxl-item--col3 { 
                max-width: 100%;
                flex-basis: 100%;
            }
        }
        @media #{$max-sm} {
            .pxl-item--col1 ,
            .pxl-item--col2 ,
            .pxl-item--col3 { 
                max-width: 100%;
                flex-basis: 100%;
            }
            .pxl-item--col1 {
                margin-bottom: 20px;
            }
            .pxl-item--col2 {
                padding-left: 20px;
            }
        }
    }


    .pxl-list--btn {
        .pxl-item--btn {
            .btn {
                display: block;
                text-align: left;
                width: 100%;
                position: relative;
                @extend .h5;
                line-height: 64px;
                padding-inline: 44px 67px;
                color: #FFF;
                max-width: 347px;
                border-bottom: 1px solid rgba(215, 215, 215, 0.29);
                background-color: transparent;
                &:hover, &.active {
                    color: #FFF;
                    border-color: rgba($color: #FFF, $alpha: 0);
                    .pxl-btn--icon { 
                        width: 100%;
                        opacity: 1;
                    }
                }
                .pxl-btn--text {
                    position: relative;
                    z-index: 9;
                }
                .pxl-btn--icon {
                    --size: 50px;
                    @extend .pxl-pabsolute-full;
                    border-radius: 50px;
                    background-color: var(--primary-color);
                    width: calc(var(--size) + 14px);
                    opacity: 0;
                    @extend .pxl-transition-linear;
                    > span {
                        width: var(--size);
                        height: var(--size);
                        border-radius: var(--size);
                        min-width: var(--size);
                        @extend .pxl-dflex-center;
                        position: absolute;
                        right: 7px;
                        top: 50%;
                        transform: translateY(-50%);
                        background-color: #FFF;
                        transition: inherit;
                    }
                }
            }
            + .pxl-item--btn {
                margin-top: 12px;
            }
        }

    }

    .pxl-list--images {
        border-radius: 222px;
        width: 100%;
        position: relative;
        min-height: 629px;
        height: 100%;
        @include box-shadow(-9px 5px 0px 0px var(--dark-blue-1));
        max-width: 404px;
        overflow: hidden;
        @extend .pxl-transition-linear;
        .pxl-item--image {
            @extend .pxl-pabsolute-full;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            transition-duration: .5s;
            opacity: 0;
            scale: 1.15;
            &.active {
                scale: 1;
                opacity: 1;
            }
        }
        @media #{$max-sm} { 
            max-width: none;
        }
    }

    .pxl-list--content {
        position: relative;
        .pxl-item--content {
            @extend .pxl-pabsolute-full;
            .pxl-feature--title, .pxl-feature--desc, .pxl-item--feature {
                @extend .pxl-transition-linear;
                opacity: 0;
            }
            &.active {
                position: relative;
                .pxl-feature--title, .pxl-feature--desc {
                    opacity: 1;
                }
                .pxl-item--feature {
                    animation: fadeInUp .35s linear forwards;
                }
            }
        }
    }
    .pxl-feature--title {
        color: #FFF;
        font-family: 'Montserrat';
        font-size: 30px;
        font-weight: 600;
        letter-spacing: -0.6px;
        margin-bottom: 25px;
    }
    .pxl-feature--desc {
        color: var(--boarder-grey-1);
        font-family: "Noto Sans";
        font-size: 18px;
        letter-spacing: -0.36px;
        margin-bottom: 32px;
    }
    .pxl-list--features {
        list-style: none;
        margin-bottom: 55.5px;
        @media #{$max-md} {
            margin-bottom: 0;
        }
        .pxl-item--feature {
            display: flex;
            @extend .pxl-dflex-center-v;
            gap: 10.5px;
            color:#FFF;
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 500;
            letter-spacing: -0.32px;
            svg {
                min-width: 20px;
            }
            + .pxl-item--feature {
                margin-top: 20px;
            }
        }
    }
}


// 
.pxl-showcase {
    .pxl-item--inner {
        margin: -20px;
    }
    .pxl-item--showcase {
        padding: 20px;
    }
    &.pxl-showcase1 {
        .pxl-item--inner {
            row-gap: 25px;
        }
        .pxl-item--showcase {
            --height: 300px;
            position: relative;
            width: 100%;
            min-height: var(--height);
            border: 15px solid var(--secondary-color);
            overflow: hidden;
            border-radius: 10px;
            @extend .pxl-transition-linear;
            cursor: pointer;
            &::before {
                content: '';
                @extend .pxl-pabsolute-full;
                background-color: rgba($color: #000000, $alpha: .4);
                opacity: 0;
                transition: inherit;
                z-index: 1;
            }
            &:hover {
                border-color: var(--primary-color);
                &::before {
                    opacity: 1;
                }
                .pxl-item--image {
                    transform: translateY(calc(-100% + var(--height)));
                }
                .pxl-item--btn {
                    transform: scale(1);
                    opacity: 1;
                }
            }
        }
        .pxl-item--image {
            @include transition(transform 5s linear);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            border-radius: 10px;
        }
        .pxl-btn-group {
            @extend .pxl-pabsolute-full;
            @extend .pxl-dflex-center;
            flex-direction: column;
            gap: 15px;
        }
        .pxl-item--btn {
            border-radius: 10px;
            font-size: 14px;
            transform: scale(0);
            opacity: 0;
            line-height: 46px;
            padding-inline: 28px;
            color: #FFF;
            z-index: 9;
            min-width: 140px;
            background-color: var(--primary-color);
            &.pxl-item--btn2 {
                background-color: var(--secondary-color);
                &:hover {
                    color: var(--secondary-color);
                    background-color: #FFF;
                }
            }
            &:hover {
                color: var(--primary-color);
                background-color: #FFF;
            }
        }
        .pxl-item--title {
            margin-top: 15px;
            text-align: center;
            width: 100%;
            font-weight: 600;
            @media #{$max-lg} {
                font-size: 15px;
            }
        }
    }
    &.pxl-showcase2 {
        .pxl-item--inner {
            --x: 18.5px;
            --y: 23px;
            margin-inline: var(-1 * var(--x));
            margin-block: var(-1 * var(--y));
            justify-content: center;
        }
        .pxl-item--single {
            padding-inline: var(--x);
            padding-block: var(--y);
            &.coming-soon {
                .pxl-item--bg {
                    z-index: 9;
                }
                .pxl-item--image {
                    img {
                        height: 100%;
                    }
                }
            }
            &:hover {
                .pxl-item--image {
                    img {
                        transform: translateX(-50%) translateY(calc(-100% + var(--height)));
                    }
                }
            }
        }
        .pxl-coming-soon {
            color:  #00194C;
            text-align: center;
            font-family: 'Outfit';
            font-size: 30px;
            font-weight: 600;
            line-height: 1.2;
            width: 100%;
        }
        .pxl-item--showcase {
            height: 100%;
            padding: 15px;
            background-color: #FFF;
            border-radius: 10px;
            border-radius: 9px;
            @include box-shadow(0px 20px 30px 10px rgba(200, 208, 214, 0.25));
        }
        .pxl-item--bg {
            @extend .pxl-pabsolute-full;
            border-radius: 6px;
            background: rgba(21, 107, 0, 0.26);
            backdrop-filter: blur(15px);
        }
        .pxl-item--feature {
            position: relative;
            // padding: 48.5px 72.5px 0 72.5px;
            padding: 48.5px 30px 0 30px;
            @include box-shadow(0px 0px 20px 0px rgba(0, 0, 0, 0.12) inset);
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 6px;
        }
        .pxl-item--image {
            --height: 360px;
            position: relative;
            width: 100%;
            height: var(--height);
            overflow: hidden;
            margin: 0 auto;
            img {
                width: 100%;
                max-width: 378px;
                position: absolute;
                top: 0;
                left: 50%;
                right: 0;
                transform: translateX(-50%);
                @include transition(transform 5s linear);
            }
        }
        .pxl-item--link {
            @extend .pxl-pabsolute-full;
        }
        .pxl-item--content {
            display: inline-flex;
            align-items: center;
            width: 100%;
            gap: 15px;
            justify-content: space-between;
            padding: 22px 12px 9px 21px;
            .pxl-item--title {
                color: #194341;
                font-family: 'Outfit';
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 1.2;
                margin-bottom: 4px;
                letter-spacing: 0;
                a {
                    color: inherit;
                }
                &:hover {
                    color: var(--color);
                }
            }
            .pxl-item--subtitle {
                color: var(--text-1);
                font-family: 'Inter';
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.7333; 
            }
            .pxl-item--btn {
                color: #FFF;
                font-family: 'Inter';
                font-size: 15px;
                font-style: normal;
                font-weight: 600;
                line-height: 37px; 
                padding-inline: 30px;
                border-radius: 100px;
                background-color: var(--color);
                border: 1px solid rgba($color: #fff, $alpha: 0);
                width: 135px;
                &.pxl-item--btn1 {
                    margin-bottom: 15px;
                }
                &:hover {
                    color: var(--color);
                    background-color: transparent;
                    border-color: var(--color);
                }
            }
        }
    }
}



// Case Feature Grid 
.pxl-features-grid {
    &.pxl-grid-custom {
        .pxl-grid-inner {
            --x: 0px;
            --y: 0px;
            --gap: 30px;
            --width: 270px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
            gap: var(--gap);                  
        }
    }
    .pxl-grid-inner {
        margin-inline: (-1 * var(--x));
        margin-block: (-1 * var(--y));
        .pxl-grid-item {
            padding-inline: var(--x);
            padding-block: var(--y);
        }
    }
    .pxl-item--inner {
        @extend .pxl-dflex-center;
        flex-direction: column;
        min-height: 193px;
        border-radius: 10px;
        background-color: #FFF;
        gap: 18px;
        @include box-shadow(0px 4px 40px 10px rgba(211, 211, 211, 0.25));
    }
    .pxl-item--image {
        img {
            width: auto;
            height: 60px;
        }
    }
    .pxl-item--title {
        display: block;
        color: #200960;
        text-align: center;
        font-family: "Open Sans";
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2496;
    }
}
