.project-area {
    padding: 470px 0 120px 0 !important;

    @include md {
        padding: 420px 0 80px !important;
    }

    @include sm {
        padding: 425px 0 80px !important;
    }

    .th-container {
        --main-container: 1540px;

        @include lg {
            max-width: 100%;
        }
    }

}

.project-area4 {

    .th-container {
        --main-container: 1720px;

        @include lg {
            max-width: 100%;
        }
    }

}

.project-slider {
    position: relative;

    .slider-pagination {
        position: relative;

        &:after,
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            width: 490px;
            height: 1px;
            background-color: #E4E4E4;
        }

        &:before {
            margin-left: -32rem;
        }

        &:after {
            margin-left: 1.5rem;
        }
    }


    .swiper-slide {
        transition: 1s all ease;

        .project-img {
            height: 440px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .swiper-slide-active {
        width: calc(576px + 24px) !important;

        .project-card {
            width: 100%;

            .project-content {
                bottom: 0px;
                opacity: 1;
                visibility: visible;
                transform: scaleY(1);
                opacity: 1;
            }

            .project-img {
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }


        @media(max-width: 480px) {
            width: 440px !important;
        }

        @include vxs {
            width: 413px !important;
        }

        @media (max-width: 320px) {
            width: 308px !important;
        }
    }

    @media (max-width: 1700px) {
        margin-left: 150px;
    }

    @include xxl {
        margin-left: 0px;
    }



    @include sm {
        .slick-list {
            margin-left: -6px;
        }
    }
}

.project-slider4 {
    position: relative;

    .slider-pagination {
        position: relative;
        left: 50%;
        bottom: -20px !important; 
        transform: translate(-50%, -50%);
        width: auto;
        max-width: none;
        display: inline-block;

        &:after {
            content: '06';
            position: absolute; 
            right: -35px;
            top: 3px;
            font-size: 18px;
            font-weight: 600;
            color: $title-color;
            //font-family: $title-font; 
        }

        &:before {
            content: "/";
            position: absolute;
            left: 0;
            top: 3px;
        }

        .swiper-pagination-bullet {
            counter-increment: li;
            position: absolute;
            background-color: $white-color;

            &:after {
                content: '0'counter(li);
                position: absolute;
                left: -100px;
                top: -15px;
                font-size: 64px;
                font-weight: 700;
                color: $title-color;
                font-family: $title-font;
                opacity: 0;
            }

            &:before {
                display: none;
            }


        }
    }

    .border-line {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);

        &:after,
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            width: 530px;
            height: 2px;
            background-color: #E4E4E4;
        }

        &:before {
            margin-left: -40.2rem;
        }

        &:after {
            margin-left: 4.2rem; 
        }
    }


    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: transparent;

        button:before {
            width: 100%;
        }

        &:after {
            opacity: 1;
        }
    }


    .swiper-slide {
        transition: 1s all ease;

        .project-item-img {
            height: 600px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .swiper-slide-active {
        width: calc(810px) !important;

        .project-item {
            width: 100%;

            .project-item-content {
                left: 10px;
                bottom: 10px;
                opacity: 1;
                visibility: visible;
                transform: scaleY(1);
                opacity: 1;
            }

            .project-item-img {
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
}

/* Project Card ---------------------------------- */
.project-card {
    position: relative;
    overflow: hidden;
    --space: 0px;
    transition: 1s all ease;

    .project-content {
        position: absolute;
        padding: 22px 0 30px 0;
        width: 100%;
        left: 0;
        bottom: -25px;
        text-align: center;
        height: 110px;
        transition: 1s all ease;
        z-index: 2;
        background-color: $smoke-color;
        clip-path: path("M475.246 300.413H475.294C588.705 307.173 700.775 320.642 810.035 340.614L915 179.971C915.015 175.968 913.05 172.062 909.38 168.797C905.709 165.532 900.515 163.07 894.523 161.756C817.407 145.041 738.59 131.63 658.611 121.614C599.939 114.262 512.842 102.551 475.246 73.1978C450.035 53.4919 421.215 23.9512 385 13.0305C348.785 2.1099 340.132 0.000413484 299.994 0C259.855 -0.000413363 248.215 2.11065 212 13.0305C175.785 23.9504 144.212 53.4924 119 73.1978C81.403 102.555 0.0383606 114.264 -58.636 121.617C-138.607 131.633 -217.416 145.043 -294.525 161.756C-300.517 163.07 -305.711 165.532 -309.381 168.797C-313.051 172.062 -315.015 175.968 -315 179.971L-210 340.614C-100.764 320.652 11.2769 307.183 124.658 300.413H124.706C182.441 296.92 240.873 295.174 300 295.174C359.175 295.193 417.591 296.94 475.246 300.413Z");
        opacity: 0;
        visibility: hidden;

        @media(max-width: 480px) {
            clip-path: none;
        }
    }

    .project-subtitle {
        color: $theme-color;
        margin-bottom: 10px;
    }

    .box-title {
        line-height: 34px;
        margin-bottom: 0;
    }


}

.project-sec {
    .th-container {
        --main-container: 1660px;
    }

    .swiper-pagination-bullets {
        line-height: 10px;
        height: 10px;
    }

    .swiper-pagination-bullet {
        --swiper-pagination-bullet-horizontal-gap: 7px;
        --swiper-pagination-bullet-size: 10px;
        border-radius: 50%;

        &:before {
            display: none;
        }

    }
}

/* Project Box ---------------------------------- */
.project-box {
    transition: 0.4s;
    position: relative;
    overflow: hidden;

    // &.style2 {
    //     .project-box {
    //         &-content {
    //             max-width: 351px;
    //             padding: 30px;
    //             left: 10px;
    //             bottom: -50px;
    //             opacity: 0;
    //             visibility: hidden;
    //             &:before {
    //                 content: "";
    //                 position: absolute;
    //                 inset: 0;
    //                 width: 100%;
    //                 max-width: 351px;
    //                 background-color: $white-color;
    //                 //clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
    //                 z-index: -1;
    //             }
    //         }
    //     }

    //     &:hover {
    //         .project-box {

    //             &-content {
    //                 left: 10px;
    //                 bottom: 10px;
    //                 opacity: 1;
    //                 visibility: visible;
    //             }

    //         }
    //     }
    // }

    &-content {
        padding: 20px 78px 20px 0;
        max-width: 278px;
        transition: 0.4s;
        display: inline-block;
        position: absolute;
        left: 0;
        bottom: -30px;
        z-index: 2;
        opacity: 0;
        overflow: hidden;

        @include xl {
            padding: 20px 58px 20px 0;
        }

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            max-width: 278px;
            background-color: $white-color;
            clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
            z-index: -1;
        }

        .gallery-btn {
            background-color: var(--theme-color);
            color: var(--white-color);
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            top: 5%;
            font-size: 18px;
            right: -8%;
            transform: translate(-50%, 50%);
            transition: 0.4s ease-in-out;
            text-align: center;
            z-index: 2;
        }
    }

    &-img {
        img {
            width: 100%;
            height: 100%;
            transition: 1.3s all ease;
        }
    }

    .project-subtitle {
        font-size: 14px;
        font-weight: 400;
        margin: -0.4rem 0 7px 0;
    }

    .box-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: -0.4rem;
    }

    &:hover {
        .project-box {
            &-img {
                img {
                    transform: scale(1.3);
                }
            }

            &-content {
                bottom: -1px;
                opacity: 1;
                visibility: visible;
            }

        }
    }
}
/* Project item ---------------------------------- */
.project-item {
    transition: 0.4s;
    position: relative;
    overflow: hidden;

    &-content {
        padding: 30px 78px 30px 30px;
        min-width: 351px;
        transition: 0.4s;
        display: inline-block;
        position: absolute;
        left: 10px;
        bottom: -30px;
        z-index: 2;
        opacity: 0;
        overflow: hidden;

        @include xl {
            padding: 20px 58px 20px 20px;  
        }

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            width: 100%;
            background-color: $white-color;
            clip-path: polygon(0% 0%, 73% 0, 100% 100%, 0% 100%);
            z-index: -1;
        }

        .gallery-btn {
            background-color: var(--theme-color);
            color: var(--white-color);
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            top: 5%;
            font-size: 18px;
            right: -8%;
            transform: translate(-50%, 50%);
            transition: 0.4s ease-in-out;
            text-align: center;
            z-index: 2;
        }
    }

    &-img {
        img {
            width: 100%;
            height: 100%;
            transition: 1.3s all ease;
        }
    }

    .project-subtitle {
        font-size: 14px;
        font-weight: 400;
        color: $theme-color;
        margin-bottom: -0.4rem;
    }

    .box-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    &:hover {
        .project-item {
            &-img {
                img {
                    transform: scale(1.3);
                }
            }

            &-content {
                bottom: 10px;
                left: 10px;
                opacity: 1;
                visibility: visible;
            }

        }
    }
}

/* Project Details ---------------------------------- */
.project-details {
    position: relative;

    &-wrap {
        background: $smoke-color;
        border-top: 3px solid $theme-color;
        position: relative;
        z-index: 3;
        padding: 40px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;

        @include lg {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 0;
        }

        @include md {
            grid-template-columns: repeat(2, 1fr);
        }

        @include xs {
            grid-template-columns: repeat(1, 1fr);
        }

        li {
            list-style: none;
        }

        .title {
            font-family: $title-font;
            font-weight: 600;
            font-size: 18px;
            line-height: 28px;
            margin-top: -0.3rem;
            margin-bottom: 0;
        }

        .text {
            margin-bottom: -0.4rem;
        }
    }
}

.page-content {
    &.style2 {
        background-color: $smoke-color;
        padding: 40px;
    }

    .page-title {
        margin-top: -0.5rem;
    }

    .sec-text {}
}

.project-inner-box {
    background-color: $smoke-color;
    border-radius: 5px;
    padding: 30px;

    @include vxs {
        padding: 20px;
    }
}