.pxl-service-grid {
    .pxl-post--feature {
        img {
            width: 100%;
        }
    }
}

.pxl-service-grid1 {
    --x: 17px;
    --y: 22px;
    .pxl-pagination {
        margin-top: 89px;
    }
    .pxl-post--inner {
        border-radius: 13.3px;
        border-radius: 13.297px;
        background: #FFF;
        @include box-shadow(0px 22.162px 66.486px 11.081px rgba(166, 186, 201, 0.35));
        overflow: hidden;
        &:hover {
            .pxl-post--btn {
                color: var(--color);
                svg path {
                    fill: var(--color);
                }
                &::after { 
                    top: auto;
                    height: 100%;
                    bottom: 0;
                }
            }
            .pxl-post--icon {
                svg path {
                    fill: var(--primary-color);
                }
            }
        }
    }
    .pxl-post--content {
        text-align: center;
        --size: 94px;
        position: relative;
        padding: calc((var(--size)/2) + 2px) 34px 49px;
        @media #{$max-lg} {
            padding: calc((var(--size)/2) + 2px) 30px 30px;
        }
    }
    .pxl-post--icon {
        @extend .pxl-dflex-center;
        width: var(--size);
        min-width: var(--size);
        height: var(--size);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -56%);
        background-color: #FFF;
        border-radius: 50%;
        @extend .pxl-transition-linear;
        i{
            position: relative;
            z-index: 9;
        }
        svg {
            position: relative;
            z-index: 9;
            path {
                fill: var(--dark-blue-2);
            }
        }
        &::after {
            content: '';
            @extend .pxl-pabsolute-center;
            width: calc(var(--size) + 12px);
            min-width: calc(var(--size) + 12px);
            height: calc(var(--size) + 12px);
            background-color: inherit;
            opacity: .4;
            border-radius: inherit;
        }
    }
    .pxl-post--title {
        font-family: 'Montserrat';
        font-size: 22px;
        font-weight: 600;
        line-height: 1.45455;
        color: var(--secondary-color);
        margin-bottom: 5px;
        a {
            color: inherit;
        }
        &:hover {
            color: var(--primary-color);
        }
    }
    .pxl-post--excerpt {
        line-height: 1.66667;
    }
    .pxl-post--btn {
        --border-color: #EDEDED;
        --bg-color: #FFF;
        --color: #FFF;
        width: 100%;
        height: 68px;
        @extend .h5;
        color: var(--dark-blue-2);
        gap: 10px;
        border-top: 1px solid var(--border-color);
        background-color: var(--bg-color);
        @extend .pxl-transition-linear;
        .pxl-btn--text {
            transition: none;
        }
        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: auto;
            top: 0;
            height: 0;
            width: 100%;
            background-color: var(--primary-color);
            z-index: -1;
            transition: inherit;
        }
    }
}
.pxl-service-grid2 {
    --x: 18px;
    --y: 17.5px;
    .pxl-post--inner {
        border-radius: 20px;
        background-color: #FFF;
        overflow: hidden;
        @include box-shadow(0px 30px 60px 5px rgba(#FFF, 0.46));
        @extend .pxl-transition-linear;
        &:hover {
            background-color: var(--dark-blue-1);
            .pxl-post--title, .pxl-post--excerpt {
                --border-color: #FFF;
                color: #FFF;
            }
            .pxl-post--btn {
                color: var(--primary-color);
                &::after, &::before {
                    @extend .pxl-grow-line;
                }
            }
        }
    }
    .pxl-post--content {
        position: relative;
        --size: 94px;
        padding: 41px 46px 43px 47px;
        @extend .pxl-transition-linear;
        @media #{$max-md} {
            padding: 40px 30px;
        }
    }
    .pxl-item--link {
        @extend .pxl-pabsolute-full;
        z-index: 9;
    }

    .pxl-post--title {
        --border-color: var(--boarder-grey-1);
        font-family: 'Montserrat';
        font-size: 22px;
        font-weight: 600;
        line-height: 1.45455;
        position: relative;
        z-index: 3;
        color: var(--secondary-color);
        padding-bottom: 22px;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 17.5px;
    }
    .pxl-post--excerpt {
        position: relative;
        z-index: 3;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.625;
        margin-bottom: 14px;
        @extend .pxl-transition-linear;
    }
    .pxl-post--icon {
        @extend .pxl-dflex-center;
        width: var(--size);
        min-width: var(--size);
        height: var(--size);
        position: absolute;
        bottom: 0;
        right: 41.5px;
        transform: translateY(42%);
        background-color: var(--primary-color);
        border-radius: 10px;
        @extend .pxl-transition-linear;
        z-index: 9;
        svg path {
            fill: #FFF;
        }
        @media #{$max-md} {
            right: 30px;
        }
    }
    .pxl-post--btn {
        .pxl-btn--text {
            transition: none;
        }
    }
}
.pxl-service-grid3 {
    --color: var(--secondary-color);
    --x: 28px;
    --y: 27px;
    .pxl-pagination {
        margin-top: 60px;
    }
    .pxl-post--container {
        --size: 94px;
        padding-top: 32px;
        position: relative;
    }
    .pxl-post--inner {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        @include box-shadow(0px 31.684px 105.612px rgba(170, 194, 186, 0.17));
        background-color: #FFF;
        padding: 94px 48px 50px 45px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        @extend .pxl-transition-linear;
        &::before {
            content: '';
            @extend .pxl-pabsolute-full;
            background-color: var(--secondary-color);
            opacity: .9;
            transition: inherit;
        }
        &::after {
            content: '';
            @extend .pxl-pabsolute-full;
            background-color: #FFF;
            transition: inherit;
            z-index: 1;
        }
        &:hover{
            --color: #FFF;
            background-color: transparent;
            &::after { 
                opacity: 0;
            }
            .pxl-post--featured{
                opacity: 1;
            }
            .pxl-post--excerpt {
                color: var(--color);
            }
            .pxl-post--btn {
                --color: #4AAB3D;
                --border-color: #4AAB3D;
                animation: grow-width .35s linear forwards;
            }
        }
        @media #{$max-md} {
            padding: 94px 30px 50px;
        }
    }

    .pxl-post--title {
        position: relative;
        z-index: 3;
        color: var(--color);
        font-family: 'Montserrat';
        font-size: 22px;
        font-weight: 600;
        line-height: 1.45455;
        margin-bottom: 18px;
    }

    .pxl-post--excerpt {
        position: relative;
        z-index: 3;
        font-size: 16px;
        line-height: 1.625;
        margin-bottom: 16px;
        @extend .pxl-transition-linear;
    }

    .pxl-post--btn {
        --color: #242E45;
        --border-color: #D7D7D7;
        --size: 45px;
        height: 55px;
        justify-content: space-between;
        border-radius: 100px;
        width: 100%;
        padding-inline: 28px 5px;
        color: var(--color);
        border: 1px solid var(--border-color);
        font-size: 14px;
        font-weight: 600;
        background-color: transparent;
        text-transform: uppercase;
        z-index: 3;
    }
    .pxl-post--btn {
        .pxl-btn--text {
            transition: none;
        }
    }
    .pxl-btn--icon {
        @extend .pxl-dflex-center;
        width: var(--size);
        min-width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background-color: var(--color);
    }

    .pxl-post--icon {
        z-index: 3;
        @extend .pxl-dflex-center;
        width: var(--size);
        min-width: var(--size);
        height: var(--size);
        position: absolute;
        top: 0;
        left: 40px;
        background-color: var(--primary-color);
        border-radius: 10px;
        @extend .pxl-transition-linear;
        svg path {
            fill: #FFF;
        }
    }

    .pxl-post--remark {
        z-index: 3;
        position: absolute;
        padding: 4px 12px;
        border-radius: 100px;
        border: 1px solid #DDF5DA;
        background: #DDF5DA;
        box-shadow: 0px 20px 30px 10px rgba(219, 202, 182, 0.25);
        font-family: 'Inter';
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        right: 40px;
        top: 30px;
        color: var(--primary-color);
    }

    .pxl-feature--list {
        margin-bottom: 40px;
        position: relative;
        z-index: 3;
        .pxl-feature--single {
            @extend .pxl-dflex-center-v;
            width: 100%;
            color: var(--color);
            font-family: 'Montserrat';
            font-size: 15px;
            font-weight: 600;
            line-height:1.6;
            text-transform: capitalize;
            gap: 8px;
            @extend .pxl-transition-linear;
            + .pxl-feature--single {
                margin-top: 8px;
            }
        }
    }
}
.pxl-service-grid4 {
    --x: 46px;
    .pxl-post--title {
        font-family: 'Montserrat';
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -1px;
        @media #{max-md} {
            font-size: 22px;
        }
        @media #{max-xs} {
            font-size: 20px;
        }
        a {
            color: inherit;
        }
    }
    .pxl-post--icon {
        @extend .pxl-transition-linear;
        .pxl-icon--inner, svg, i, .pxl-icon--shadow  {
            transition: inherit;
        }
    }
    &.pxl-service4-default {
        .pxl-post--inner {
            &:hover {
                .pxl-post--title {
                    color: var(--primary-color);
                }
                .pxl-post--icon {
                    span { 
                        svg {
                            transform: translateY(-10px);
                        }
                        &::before {
                            opacity: 1;
                        }
                    }
                }
            }
        }
        .pxl-post--icon {
            margin-bottom: 14px;
            svg path {
                fill: #4AAB3D;
            }
            .pxl-icon--inner {
                display: block;
                position: relative;
                width: fit-content;
                &::before {
                    content: '';
                    position: absolute;
                    bottom: -10px; 
                    left: 50%;
                    width: 100%; 
                    height: 20px; 
                    background-color: rgba($color: #000, $alpha: .25);
                    filter: blur(5px);
                    border-radius: 50%; 
                    transform: translateX(-50%); 
                    opacity: 0;
                    transition: inherit;
                }
            }
        }
        .pxl-post--title {
            color: #FFF;
            margin-bottom: 10px;
        }
    
        .pxl-post--excerpt {
            color:#FFF;
            font-size: 16px;
            letter-spacing: -0.32px;
        }
    }

    &.pxl-service4-1 {
        --x:12.5px;
        --y: 57px;
        .pxl-post--inner {
            max-width: 365px;

            &:hover {
                .pxl-post--title {
                    color: var(--primary-color);
                }
                .pxl-post--icon {
                    .pxl-icon--inner {
                        transform: translateY(-10px);
                        &::before {
                            opacity: 1;
                            transform: translateY(10px) translateX(-50%);
                        }
                    }
                }
            }
        }
        .pxl-post--icon {
            margin-bottom: 29px;
            svg {
                width: 30px;
                height: 30px;
                path {
                    fill: #FFF;
                }
            }
            .pxl-icon--inner {
                position: relative;
                --size: 56px;
                min-width: var(--size);
                width: var(--size);
                height: var(--size);
                border-radius: 50%;
                @extend .pxl-dflex-center;
                background-color: var(--primary-color);
                &::before {
                    content: '';
                    position: absolute;
                    bottom: -10px; 
                    left: 50%;
                    width: var(--size); 
                    height: 20px; 
                    background-color: rgba($color: #000, $alpha: .25);
                    filter: blur(5px);
                    border-radius: 50%; 
                    transform: translateX(-50%); 
                    opacity: 0;
                    transition: inherit;
                }
            }
        }
        .pxl-post--title {
            color: var(--dark-blue-1);
            margin-bottom: 21px;
        }

        .pxl-post--excerpt {
            @extend .pxl-text3;
            color: #6B7F95;
        }
    }
}

.pxl-service-grid5 {
    --x: 20px;
    .pxl-post--inner {
        position: relative;
        border-radius: 20px;
        border: 1px solid #143C65;
        background-color: #0D3257;
        padding: 53px 70px 71px 69px;
        @media #{$max-xl} {
            padding: 53px 40px 71px;
        }
        @media #{$max-lg} {
            padding: 53px 30px 71px;
        }
        @media #{$max-md} {
            padding: 50px 30px 50px;
        }
    }
    .pxl-post--title {
        color: #FFF;
        font-family: "Noto Sans";
        font-size: 35px;
        font-weight: 700;
        line-height: 1.57143;
        margin-bottom: 11px;
        @media #{$max-xl} {
            font-size: 32px;
        }
        @media #{$max-md} {
            font-size: 30px;
        }
    }
    .pxl-post--excerpt {
        color: #FFF;
        font-family: "Noto Sans";
        letter-spacing: -0.36px;
        margin-bottom: 40.5px;
        padding-right: 15px;
    }
    .pxl-post--index {
        position: absolute;
        bottom: -23px;
        left: -7px;
        color: rgba($color: #FFF, $alpha: 0.04);
        font-family: 'Montserrat';
        font-size: 168.617px;
        font-weight: 600;
        line-height: 1;
    }
    .pxl-item--group {
        display: inline-flex;
        align-items: end;
        justify-content: space-between;
        width: 100%;;
    }
    .pxl-post--icon {
        @extend .pxl-square-box;
        @extend .pxl-dflex-center;
        --size: 103px;
        border-radius: 10px;
        border: 1px solid rgba($color: #93C94E, $alpha: .14);
        background: var(--primary-color);
        color: #FFF;
        svg {
            width: 66px;
            height: 66px;
            path {
                fill: #FFF;
            }
        }
        @media #{$max-xs} {
            --size: 80px;
        }
    }
}

// Carousel
.pxl-service-carousel { 

}
.pxl-service-carousel1 {
    @extend .pxl-service-grid1;
    --x: 20px;
}

.pxl-service-carousel2 {
    @extend .pxl-service-grid2;
    &.pxl-service-style1 {
        .pxl-swiper-slide {
            // .pxl-post--inner {
            //     &:hover {
            //         background-color: #FFF;
            //         .pxl-post--title, .pxl-post--excerpt {
            //             --border-color: var(--boarder-grey-1);
            //             color: var(--secondary-color);
            //         }
            //     }
            // }
            &:nth-child(odd) {
                .pxl-post--icon {
                    svg path {
                        fill: var(--secondary-color);
                    }
                }
            }
        }
    }
    &.pxl-service-style2 {
        .pxl-swiper-slide {
            .pxl-post--inner {
                &:hover {
                    background-color: #FFF;
                    .pxl-post--title, .pxl-post--excerpt {
                        --border-color: var(--boarder-grey-1);
                        color: var(--secondary-color);
                    }
                    .pxl-post--btn {
                        color: var(--secondary-color);
                    }
                    .pxl-post--featured {
                        img {
                            scale: 1.05;
                            transform: rotate(1deg);
                        }
                    }
                }
            }
            &:nth-child(odd) {
                .pxl-post--icon {
                    background-color: var(--dark-blue-1);
                }
            }
        }
    }
    .pxl-post--container {
        overflow: hidden;
        border-radius: 20px
    }
}

.pxl-service-carousel3 {
    @extend .pxl-service-grid3;
    --x: 23px;
    .pxl-post--container {
        overflow: hidden;
    }
}

.pxl-service-carousel5 {
    @extend .pxl-service-grid5;
    --x: 20px;
    .pxl-post--excerpt { 
        margin-bottom: 38.5px;
    }
}

.pxl-service-carousel6 {
    --x: 17.5px;
    .pxl-post--inner {
        position: relative;
        border-radius: 23px;
        border: 1px solid #C9F2DE;
        background-color: #E8FDF3;
        padding: 45px 21px 49px 47px;
        @media #{$max-md} {
            padding: 35px 20px 40px 30px;
        }
        &:hover {
            .pxl-post--featured {
                img {
                    scale: 1.07;
                }
            }
            .pxl-post--title {
                color: var(--primary-color);
            }
        }
    }
    .pxl-item--link {
        @extend .pxl-pabsolute-full;
        z-index: 9;
    }
    .pxl-post--title {
        color: var(--dark-blue-1);
        font-family: 'Montserrat';
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3333;
        letter-spacing: -1px;
        margin-bottom: 18px;
        @extend .pxl-transition-linear;
    }
    
    .pxl-post--excerpt {
        color: #6B7F95;
        font-family: "Noto Sans";
        font-size: 20px;
        line-height: 1.4;
        letter-spacing: -0.4px;
        margin-bottom: 39px;
        @media #{$max-sm} {
            margin-bottom: 30px;
        }
    }
    .pxl-item--group {
        // overflow: hidden;
        display: inline-flex;
        justify-content: center;
        padding-right: 25px;
        width: 100%;
        position: relative;
    }
    .pxl-post--featured {
        position: absolute;
        bottom: -1px;
        left: 22px;
        min-width: 230px;
        img {
            @extend .pxl-transition-linear;
        }

        @media #{$max-lg} {
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
        }
    }
    .pxl-svg--bg {
        @extend .pxl-transition-linear;
        path, rect {
            fill: #C9F2DE;
            transition: inherit;
        }
        circle {
            fill: #E8FDF3;
            transition: inherit;

        }
    }
    .pxl-swiper-slide{ 
        @extend .pxl-transition-linear;
    }
    .swiper-slide-visible + .swiper-slide-visible {
        .pxl-post--inner {
            border: 1px solid #F9D3B2;
            background-color: #FDF4E4;
            .pxl-svg--bg {
                path,  rect {
                    fill: #F9D3B2;
                }
                circle {
                    fill: #FDF4E4;
                }
            }
        }
        + .swiper-slide-visible {
            .pxl-post--inner {
                border: 1px solid #CFF3FF;
                background-color: #EDF9FD;
                .pxl-svg--bg {
                    path, rect {
                        fill: #CFF3FF;
                    }
                    circle {
                        fill: #EDF9FD;
                    }
                }
            }
        }
    }
    // }
}

@keyframes grow-width {
    from {
        width: var(--size);
    }to {
        width: 100%;
    }
}