.container {
    padding: 20px;
    /* background-color: #000b17; */
}

/* --------------------------------------------------------------------------------- */
/* DIV STYLE */
/* --------------------------------------------------------------------------------- */
.maingrid {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    background-color: #222327;
}
/* -------------------------------------------- */
/* Homepage */
/* -------------------------------------------- */
.about {
    grid-column: 1 / 13;
    grid-row: 1;
    /* Sub Grid */
    display: grid;
    grid-template-columns: 30px repeat(10, 1fr) 30px;
    grid-auto-rows: minmax(min-content, max-content);
    margin-bottom: 50px;
}

.about > .top {
    grid-column: 1 / 13;
    grid-row: 1;
    text-align: left;
    background-size: cover;
    aspect-ratio: 3 / 2;
    background-image: url(../img/banner_img_01.jpg);
    display: flex;
    align-items: flex-end;
    padding-bottom: 50px;
}

.about > .top > div {
    margin-left: 30px;
}

.about > .left {
    grid-column: 2 / 5;
    grid-row: 2;
    text-align: left;
}

.about > .right {
    grid-column: 5 / 12;
    grid-row: 2;
    text-align: left;
    margin-left: 50px;
}

/* -------------------------------------------- */
/* COMPANY MISSION VISION VALUES */
/* -------------------------------------------- */
.mission {
    grid-column: 1 / 13;
    grid-row: 2;
    /* Sub Grid */
    display: grid;
    grid-template-columns: 30px repeat(10, 1fr) 30px;
    grid-auto-rows: minmax(min-content, max-content);
    margin-bottom: 50px;
}

.mission > .left {
    grid-column: 2 / 7;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
}

.mission > .left > div {
    width: 100%;
    height: auto;
    margin-right: 30px;
}

.mission > .right {
    grid-column: 7 / 12;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    height: min-content;
    background-image: url(../img/vision-vertical-divider.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}
.mission > .right > .vision_icon {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding-left: 30px;
}
.mission > .right > .vision_icon > div {
    flex-basis: 50%;
    text-align: center;
    align-self: last baseline;
    padding-bottom: 50px;
}

/* -------------------------------------------- */
/* WHY OWNER CHOOSE US */
/* -------------------------------------------- */
.whyowner {
    grid-column: 1 / 13;
    grid-row: 3;
    /* Sub Grid */
    display: grid;
    grid-template-columns: 30px repeat(10, 1fr) 30px;
    grid-auto-rows: minmax(min-content, max-content);
    margin-bottom: 50px;
}

.whyowner > .top {
    grid-column: 4 / 10;
    grid-row: 1;
    text-align: center;
    padding-bottom: 50px;
}

.whyowner > .left {
    grid-column: 1 / 7;
    grid-row: 2;
    text-align: left;
    margin-right: 15px;
}

.whyowner > .right {
    grid-column: 7 / 12;
    grid-row: 2;
    text-align: left;
    margin-left: 15px;
}

/* -------------------------------------------- */
/* TESTIMONIAL */
/* -------------------------------------------- */
.testimonial_client {
    grid-column: 1 / 13;
    grid-row: 4;
    /* Sub Grid */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    margin-bottom: 50px;
}

.testimonial_client > .top {
    grid-column: 1 / 13;
    grid-row: 1;
    text-align: center;
}
.testimonial_client > .bottom {
    grid-column: 1 / 13;
    grid-row: 2;
    text-align: center;
}

/* -------------------------------------------- */
/* WHY TENANT CHOOSE US */
/* -------------------------------------------- */
.whytenant {
    grid-column: 1 / 13;
    grid-row: 5;
    /* Sub Grid */
    display: grid;
    grid-template-columns: 30px repeat(10, 1fr) 30px;
    grid-auto-rows: minmax(min-content, max-content);
    margin-bottom: 50px;
}

.whytenant > .top {
    grid-column: 2 / 12;
    grid-row: 1;
    text-align: center;
}
.whytenant > .bottom {
    grid-column: 2 / 12;
    grid-row: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    flex-basis: 50%;
    text-align: center;
    justify-content: center;
}

.whytenant > .bottom > div {
    height: auto;
}

/* .whytenant > .bottom > div:first-child {
    margin-top: 20px;
    height: auto;
} */

/* -------------------------------------------- */
/* WHY TENANT CHOOSE US */
/* -------------------------------------------- */
.listproperty {
    grid-column: 1 / 13;
    grid-row: 6;
    /* Sub Grid */
    display: grid;
    grid-template-columns: 30px repeat(10, 1fr) 30px;
    grid-auto-rows: minmax(min-content, max-content);
    margin-bottom: 50px;
    justify-content: center;
    align-items: center;
}

.listproperty > .top {
    grid-column: 2 / 12;
    grid-row: 1;
    text-align: center;
}
.listproperty > .bottom {
    grid-column: 2 / 12;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1px;
}

.listproperty > .bottom > div {
    width: 16.66%;
    min-width: 350px;
    height: auto;
}

/* -------------------------------------------- */
/* TESTIMONIAL */
/* -------------------------------------------- */
.testimonial_tenant {
    grid-column: 1 / 13;
    grid-row: 7;
    /* Sub Grid */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
    background-color: #222327;
}

.testimonial_tenant > .top {
    grid-column: 1 / 13;
    grid-row: 1;
    text-align: center;
}
.testimonial_tenant > .bottom {
    grid-column: 1 / 13;
    grid-row: 2;
    text-align: center;
    margin-bottom: 50px;
}

/* -------------------------------------------- */
/* YOUTUBE */
/* -------------------------------------------- */
.youtube {
    grid-column: 1 / 13;
    grid-row: 8;
    /* Sub Grid */
    display: grid;
    grid-template-columns: 30px repeat(10, 1fr) 30px;
    grid-auto-rows: minmax(min-content, max-content);
    background-color: #222327;
}
.youtube > .top {
    grid-column: 2 / 12;
    grid-row: 1;
    text-align: left;
}
.youtube > .bottom {
    grid-column: 2 / 12;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
}
.youtube > .bottom > div {
    width: 16.66%;
    min-width: 310px;
    aspect-ratio: 16/10;
    height: auto;
    text-align: center;
}

/* -------------------------------------------- */
/* CONTACT */
/* -------------------------------------------- */
.contact {
    grid-column: 1 / 13;
    grid-row: 9;
    /* Sub Grid */
    display: grid;
    grid-template-columns: 30px repeat(10, 1fr) 30px;
    grid-auto-rows: minmax(min-content, max-content);
    background-color: #222327;
}

.contact > .top {
    grid-column: 1 / 13;
    grid-row: 1;
    text-align: center;
    margin-bottom: 50px;
}

.contact > .left {
    grid-column: 2 / 5;
    grid-row: 2;
    text-align: left;
    margin-top: 25px;
    margin-bottom: 50px;
}

.contact > .right {
    grid-column: 5 / 12;
    grid-row: 2;
    text-align: left;
    margin-bottom: 50px;
}

/* -------------------------------------------- */
/* -------------------------------------------- */
/* -------------------------------------------- */
/* -------------------------------------------- */
.home-content2 {
    grid-column: 1 / 13;
    grid-row: 10;
    /* Sub Grid */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(min-content, max-content);
}

.subitem-1 {
    grid-column: 1 / 5;
    grid-row: 1;
    border: 1px solid red;
}
.subitem-2 {
    grid-column: 5 / 13;
    grid-row: 1;
    border: 1px solid red;
}

/* Footer */
/* -------------------------------------------- */
.footer-content {
    grid-column: 1 / 13;
    grid-row: 1;
    background-color: #222327;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1 / 4;
}

.footer-menu {
    grid-column: 2 / 12;
    grid-row: 1 / 2;
    text-align: center;
    margin-top: 50px;
}
.footer-social {
    grid-column: 2 / 12;
    grid-row: 2 / 3;
    text-align: center;
}
.footer-copyright {
    grid-column: 2 / 12;
    grid-row: 3 / 4;
    text-align: center;
    margin-bottom: 50px;
}

/* --------------------------------------------------------------------------------- */
/* DIV STYLE */
/* --------------------------------------------------------------------------------- */

@media screen and (max-width: 640px) {
    .about > .top {
        aspect-ratio: auto;
        height: 500px;
        margin-bottom: 50px;
    }
    .about > .left {
        grid-column: 2 / 12;
        grid-row: 2;
        text-align: left;
        margin-bottom: 20px;
    }

    .about > .right {
        grid-column: 2 / 12;
        grid-row: 3;
        text-align: left;
        margin-left: 0;
    }

    .mission > .left {
        grid-column: 2 / 12;
        grid-row: 1;
        display: flex;
        flex-wrap: wrap;
    }

    .mission > .left > div {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 50px;
    }

    .mission > .right {
        grid-column: 2 / 12;
        grid-row: 2;
        background-image: none;
    }
    .mission > .right > .vision_icon {
        padding-left: 0;
    }
    .mission > .right > .vision_icon > div {
        flex-basis: 50%;
        text-align: center;
        align-self: last baseline;
        padding-bottom: 50px;
    }
    .whyowner > .top {
        grid-column: 2 / 12;
        grid-row: 1;
        text-align: center;
        padding-bottom: 50px;
    }

    .whyowner > .left {
        grid-column: 1 / 12;
        grid-row: 2;
        text-align: left;
        margin-right: 15px;
        margin-bottom: 20px;
    }

    .whyowner > .right {
        grid-column: 2 / 12;
        grid-row: 3;
        text-align: left;
        margin-left: 15px;
    }
    .whytenant > .bottom > div:first-child {
        margin-top: 20px;
        height: auto;
    }
    .whytenant > .top {
        grid-column: 2 / 12;
        grid-row: 1;
        text-align: center;
    }
    .whytenant > .bottom {
        grid-column: 2 / 12;
        grid-row: 2;
        display: flex;
        flex-basis: 100%;
        flex-wrap: wrap;
        gap: 30px;
        text-align: center;
    }

    .whytenant > .bottom > div {
        flex-basis: 100%;
        height: auto;
    }
    .listproperty {
        grid-column: 1 / 13;
        grid-row: 6;
        /* Sub Grid */
        display: grid;
        grid-template-columns: 30px repeat(10, 1fr) 30px;
        grid-auto-rows: minmax(min-content, max-content);
        margin-bottom: 50px;
        justify-content: center;
        align-items: center;
    }

    .listproperty > .top {
        margin-bottom: 20px;
    }
    .listproperty > .bottom > div {
        min-width: 220px;
    }
    .youtube > .bottom > div {
        width: 16.66%;
        /* min-width: 150px; */
        aspect-ratio: 16/10;
        height: 100px;
        text-align: center;
    }
    .contact > .top {
        grid-column: 2 / 12;
        grid-row: 1;
        text-align: center;
        margin-bottom: 20px;
    }
    .contact > .left {
        grid-column: 2 / 12;
        grid-row: 2;
        text-align: center;
        margin-top: 25px;
    }

    .contact > .right {
        grid-column: 2 / 12;
        grid-row: 3;
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    .listproperty > .bottom > div {
        min-width: 150px;
    }
    .youtube > .bottom > div {
        min-width: 150px;
    }
}