/**
         * ####################################
         *      Custom Home Stylesheet
         * ####################################
         */
/* ===================== lading page block ===================== */
    .landing-page-margin {
        margin-top: 150px;
        margin-bottom: 150px;
    }
    .landing-page, 
    .landing-page--2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .landing-page--2 { align-items: flex-end; }
    .landing-page--upper, 
    .landing-page--upper--2 {
        display: flex;
    }
    .landing-page--upper--2 { flex-direction: row-reverse; }
    .landing-page--info, 
    .landing-page--info--2 {
        padding-top: 5%;
        display: flex;
        flex: 1;
        flex-direction: column;
    }
    .landing-page--info { padding-right: 5%; }
    .landing-page--info--2 {
        padding-left: 5%;
        align-items: flex-end;
        text-align: right;
    }
    .landing-page--info > h1, 
    .landing-page--info--2 > h1 {
        margin-bottom: 15px;
    }
    .landing-page--img, 
    .landing-page--img--2 {
        width: 50%;
        position: relative;
    }
    .landing-page--img > img, 
    .landing-page--img--2 > img {
        top: 10px;
        width: 100%;
        position: relative;
    }
    .landing-page--img > img { right: 10px; }
    .landing-page--img--2 > img { left: 10px; }
    .triangle, .triangle--2 {
        top: 0px;
        width: 200px;
        height: 100px;
        position: absolute;
        z-index: -10;
        background: black;
    }
    .triangle {
        right: 0px;
        clip-path: polygon(100% 0, 0 0, 100% 100%);
    }
    .triangle--2 {
        left: 0px;
        clip-path: polygon(0 0, 0% 100%, 100% 0);
    }
    .landing-page--lower, 
    .landing-page--lower--2 {
        height: 100px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: -10;
        transform: translateY(-35%);
        color: white;
        background-color: black;
    }
    .landing-page--lower {
        max-width: 60%;
        justify-content: flex-end;
    }
    .landing-page--lower--2 {
        max-width: 100%;
        box-shadow: none;
    }
    .location, 
    .location--2 {
        display: flex;
    }
    .location { margin-right: 185px; }
    .location--2 {
        margin-left: 185px;
        flex-direction: row-reverse;
    }
    .location-extra {
        width: 40%;
        height: 105%;
        transform: translateY(-1px);
        background-color: white;
    }
    .location > img, 
    .location--2 > img {
        width: 20px;
        height: 20px;
        margin-bottom: 20px;
    }
    .location > img { margin-right: 20px; }
    .location--2 > img { margin-left: 20px; }
    .black-box { /* In mobile view, the triangle is replace with this rectangle black box */
        width: 50%;
        height: 50px;
        background-color: var(--main-dark-color);
    }

    /* ===================== our service block ===================== */
    .service--icon {
        padding: 20px;
        display: inline-block;
        border-radius: 50%;
        background-color: var(--main-color);
    }
    .service--img {
        width: 30px;
        height: 30px;
    }

    /* ===================== our project block ===================== */
    .project--img--container {
        width: 50%;
        height: 300px;
        position:relative;
        object-fit:cover;
        transition: all 0.1s;
        background-color: var(--main-dark-color);
        border: 0px solid var(--main-dark-color);
    }
    .project--img {
        opacity: 1;
        transition: all 0.1s;
        object-fit: cover;
        border: 0px solid var(--main-dark-color);
    }
    .project--img--container:hover .project--img {
        opacity: 0.5;
        border: 5px solid var(--main-dark-color);
    }
    .project--description--container {
        left: 0;
        bottom: 0;
        margin-left: 15px;
        margin-bottom: 35px;
        display: flex;
        flex-direction: column;
        position: absolute;
        opacity: 0;        
        transition: all 0.1s;
        color: white;
    }
    .project--img--container:hover .project--description--container { opacity: 1; }
    .project--eye-icon--container {
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;        
        opacity: 0;
        transition: all 0.1s;
        background-color: var(--main-dark-color);
    }
    .project--img--container:hover .project--eye-icon--container {
        opacity: 1;
        z-index: 10;
    }

    /* ===================== latest news block =====================  */
    .news-img {
        height: 600px;
        display: flex;
        justify-content: center;
    }
    .news-img--container { transition: all 0.1s; }
    .news-img--container a {
        color: black;
        text-decoration: none;
    }
    .news-img--container p{
        padding-left: 20px;
        padding-right: 20px;
    }

    /**
     * ####################
     *     Media Query
     * ####################
     */
    /* mobile screen to tablet screen [ 320px <=> 768px ]*/
        /* our project block */
        @media (max-width: 425px) {
            .project--btn {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

    /* tablet screen to laptop screen [ 768 <=> 1440px ]*/
        /* our project block */
        @media (max-width: 991px) {
            .project--btn { width: 50%; }
            .project--img--container { height: 350px; }
        }

        /* our project, latest news block */
        @media (min-width: 992px) {
            .project--img--container { width: 20%; }

            .news--container {
                display: flex;
                justify-content: space-between;
            }
            .news-img--container { width: 22%; }
            .news-img {
                height: 300px;
                object-fit: cover;
            }
        }

        /* lading page block */
        @media (min-width: 1200px) {
            .location { margin-right: 285px;}
            .location--2 { margin-left: 285px; }
        }

    /* laptop screen to desktop large screen [ 1440px <=> 1920px ]*/