/**
         * #######################################
         *      Custom Our Project Stylesheet
         * #######################################
         */
/* ===================== main our project block ===================== */
    .project--container {
        display: flex;
        flex-direction: column;
    }
    .project--items {
        margin-bottom: 20px;
        transition: all 0.1s;
    }
    .project--img--container {
        width: 100%;
        margin-bottom: 20px;
        padding-top: 56.25%;
        position:relative;
        transition: all 0.1s;
        background-color: var(--main-dark-color);
    }
    .project--img {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 1;
        object-fit: cover;
        transition: all 0.1s;
        border: 0px var(--main-dark-color) solid;
    }
    .project--img--container:hover .project--img {
        opacity: 0.5;
        border: 5px var(--main-dark-color) solid;
    }
    .project--eye-icon--container {
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        display: flex;
        position: absolute;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: all 0.1s;
        background-color: var(--main-dark-color);
    }
    .project--img--container:hover .project--eye-icon--container { opacity: 1; }

    /**
     * ####################
     *     Media Query
     * ####################
     */
    /* tablet screen to laptop screen [ 768 <=> 1440px ]*/
        @media (min-width: 992px) {
            .project--container {
                flex-wrap: wrap;
                flex-direction: row;
            }
            .project--items {
                width: 30%;
                margin-right: 5%;
            }
            .project--container:last-child { margin-right: 0%; }
            .project--items:nth-child(3n){ margin-right: 0%; }
        }