.elementor-2636 .elementor-element.elementor-element-04ac7b5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for shortcode, class: .elementor-element-dd04c41 */<style>

/* =========================================================
   MRC PROPERTY — AUTOMATED FEATURED PROJECTS
   Source: MRC Property Dashboard
========================================================= */

.mrcpp-project-cards {

    --mrc-blue: #0C2281;
    --mrc-blue-dark: #07195f;
    --mrc-yellow: #ffe500;

    --mrc-text: #15171c;
    --mrc-muted: #646871;
    --mrc-line: #e1e4e9;

    width: 100%;
    max-width: 1140px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(14px, 1.25vw, 20px);

    font-family: 'Questrial', sans-serif;
}


/* =========================================================
   CARD
========================================================= */

.mrcpp-project-card {

    position: relative;

    min-width: 0;

    display: flex !important;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff !important;

    border: 1px solid var(--mrc-line) !important;

    border-radius: 10px !important;

    color: var(--mrc-text) !important;

    text-decoration: none !important;

    box-shadow: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.mrcpp-project-card:hover {

    transform: translateY(-4px);

    border-color: rgba(12,34,129,.25) !important;

    box-shadow:
        0 18px 42px
        rgba(20,30,60,.09);
}


/* =========================================================
   IMAGE
========================================================= */

.mrcpp-project-card__image {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #f1f2f4;
}


.mrcpp-project-card__image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(12,34,129,.01) 40%,
            rgba(5,12,35,.18) 100%
        );
}


.mrcpp-project-card__image img {

    width: 100% !important;

    height: 100% !important;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.mrcpp-project-card:hover
.mrcpp-project-card__image img {

    transform:
        scale(1.035);
}


/* =========================================================
   BODY
========================================================= */

.mrcpp-project-card__body {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding:
        clamp(18px, 1.45vw, 24px) !important;
}


/* =========================================================
   CATEGORY
========================================================= */

.mrcpp-project-card__body > span {

    position: relative;

    display: flex !important;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin: 0 0
        clamp(8px, .65vw, 11px);

    color: #858993 !important;

    font-family:
        'Outfit',
        sans-serif !important;

    font-size:
        clamp(11px, .75vw, 13px) !important;

    font-weight:
        600 !important;

    line-height:
        1.3;

    letter-spacing:
        .75px !important;

    text-transform:
        uppercase;
}


/* LINE AFTER CATEGORY */

.mrcpp-project-card__body > span::after {

    content: "";

    flex: 1;

    height: 1px;

    background:
        #e3e6ea;
}


/* =========================================================
   PROJECT TITLE
========================================================= */

.mrcpp-project-card__body h3 {

    margin:
        0 !important;

    color:
        var(--mrc-text) !important;

    font-family:
        'Outfit',
        sans-serif !important;

    font-size:
        clamp(27px, 1.9vw, 33px) !important;

    font-weight:
        600 !important;

    line-height:
        1.08 !important;

    letter-spacing:
        clamp(-1px, -.06vw, -.6px) !important;
}


/* =========================================================
   LOCATION / SUPPORTING TEXT
========================================================= */

.mrcpp-project-card__body p {

    margin:
        clamp(10px, .75vw, 13px)
        0
        0 !important;

    color:
        var(--mrc-muted) !important;

    font-family:
        'Questrial',
        sans-serif !important;

    font-size:
        clamp(16px, 1.05vw, 19px) !important;

    line-height:
        1.55 !important;
}


/* =========================================================
   AUTOMATIC "LIHAT PROJEK"
========================================================= */

.mrcpp-project-card__body::after {

    content: "Lihat Projek  →";

    display: flex;

    align-items: center;

    width: fit-content;

    margin-top:
        clamp(18px, 1.35vw, 23px);

    padding-top:
        clamp(14px, 1vw, 17px);

    color:
        var(--mrc-blue);

    font-family:
        'Outfit',
        sans-serif;

    font-size:
        clamp(15px, 1vw, 18px);

    font-weight:
        600;

    line-height: 1;

    border-top:
        1px solid
        transparent;
}


/* FULL DIVIDER BEFORE CTA */

.mrcpp-project-card__body {

    position: relative;
}


.mrcpp-project-card__body::before {

    content: "";

    position: absolute;

    left:
        clamp(18px, 1.45vw, 24px);

    right:
        clamp(18px, 1.45vw, 24px);

    bottom:
        clamp(56px, 4vw, 66px);

    height: 1px;

    background:
        #eceef1;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .mrcpp-project-cards {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .mrcpp-project-cards {

        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .mrcpp-project-card__body {

        padding:
            18px !important;
    }


    .mrcpp-project-card__body > span {

        font-size:
            11px !important;
    }


    .mrcpp-project-card__body h3 {

        font-size:
            clamp(25px, 7vw, 30px) !important;
    }


    .mrcpp-project-card__body p {

        font-size:
            17px !important;

        line-height:
            1.55 !important;
    }


    .mrcpp-project-card__body::after {

        margin-top:
            18px;

        padding-top:
            15px;

        font-size:
            16px;
    }


    .mrcpp-project-card__body::before {

        left:
            18px;

        right:
            18px;

        bottom:
            56px;
    }

}

</style>/* End custom CSS */