.quiety-portfolio-filter {
    margin-bottom: 50px;
    border-radius: 10px;
    text-align: center;
}

.portfolio-filter {
    padding: 0;
    list-style: none;
    text-align: center;
    margin-bottom: 0;

    li {
        display: inline-block;
        margin: 0 15px;

        @media(max-width: 767px) {
            margin: 0 10px;
        }

        a {
            color: #6F7785;
            font-size: 16px;
            font-weight: 500;
            border-radius: 3px;
            display: inline-block;
            position: relative;

            &:after {
                content: '';
                position: absolute;
                left: 0;
                height: 2px;
                width: 0;
                bottom: 0;
                background-color: $color__theme;
                transition: all 0.3s ease-in-out;
            }

            &:hover {
                color: $color__theme;
            }
        }

        &.current {
            a {
                color: $color__theme;

                &:after {
                    width: 100%;
                }
            }
        }
    }
}


.column-3 {
    .quiety-portfolio-item {
        width: 33.33%;

        @media(max-height: 767px) {
            width: 50%;
        }
    }
}

.column-4 {
    .quiety-portfolio-item {
        width: 25%;

        @media(max-height: 991px) {
            width: 33.33%;
        }

        @media(max-height: 767px) {
            width: 50%;
        }
    }
}

.column-2 {
    .quiety-portfolio-item {
        width: 50%;
    }
}

.quiety-portfolio-item {
    margin-bottom: 30px;
    width: 50%;
    padding: 0 15px;

    @media(max-width: 575px) {
        width: 100%;
    }

    .quiety-portfolio-img {
        position: relative;
        border-radius: 15px;
        overflow: hidden;

        img {
            width: 100%;
            transform: scale(1.1) translateX(-7px);
            transition: all 0.3s ease-in-out;
        }

        &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,0.6);
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }

    }

    .quiety-portfolio-info {
        position: absolute;
        z-index: 2;
        bottom: 35px;
        left: 0;
        width: 100%;
        padding: 0 40px;
        opacity: 0;
        visibility: hidden;
        height: max-content;
        overflow: hidden;

        @media(max-width: 767px) {
            padding: 0 20px;
        }
    }

    .portfolio-info-item {
        text-align: center;
    }

    .quiety-portfolio-title {
        font-size: 20px;
        margin: 0;
        transition: all 0.4s ease-in-out;
        transform: translateY(-20px);
        font-weight: 600;

        a {
            color: #fff;
        }
    }

    .quiety-portfolio-categories {
        transform: translateY(20px);
        transition: all 0.3s ease-in-out;
    }

    .portfolio-categories {
        color: rgba(255, 255, 255, 0.7);
        position: relative;
        font-size: 16px;
        margin-top: 10px;
        margin-right: 8px;

        &:not(:last-child) {
            &:after {
                content: ",";
                position: absolute;
                right: -5px;
                bottom: 2px;
                line-height: 1;
                font-size: 18px;
            }
        }
    }

    &:hover {
        .quiety-portfolio-info {
            opacity: 1;
            visibility: visible;
        }

        .quiety-portfolio-img {

            img {
                transform: scale(1.1) translateX(0);
            }

            &:after {
                opacity: 1;
            }
        }

        .quiety-portfolio-title, .quiety-portfolio-categories {
            transform: translateY(0);
        }
    }

    &.portfolio-related-post {
        width: 100%;
        padding: 0;
    }
}

.portfolio_details_area {
    padding: 100px 0;
}

.portfolio-info-wrapper {

}

.portfolio-info-item {
    margin-bottom: 30px;

    .title {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .info {
        font-size: 15px;
        margin-bottom: 0;
    }
}