header, footer{
    background-color:#0A2942;
}
main {
    display: flex;
    justify-content: center;
}
#home-details-container{
    width:100%;
    margin : -80px 0 15px 0;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius:15px;
    padding:2% 4% 2% 4%;
    & #img-div-1 {
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    & #img-div-2 {
        display:flex;
        flex-direction:row;
        justify-content:center;
        }
    & img {
        border-radius:15px;
        width:50%;
        margin: 0 auto 0 auto;
        display: block;
    }
    & #img-2{
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    & .col-12 #description, .col-12 .description {
        min-height:200px;
        width:100%;
        background-color: white;
        margin: 10px 0 0 0;
        resize: none;
        color: black;
        border:1px solid lightgray;
        border-radius:15px;
        padding:1%;
    }
    & .type , .address, #address{
        border:1px solid lightgray;
        border-radius:15px;
        padding:1%;
        text-align:center;
    }
    & #rental-units-table{
        width:100%;
        & thead{
            margin: 0 0 5px 0;
            & th{
                text-align:center;
                background-color:#0A2942;
                border:1px solid lightgray;
                color:white;
                padding:1%;
                margin:5px;
            }
        }
        & tbody{
            & td {
                text-align:center;
                border:1px solid lightgray;
                padding:1%;
            }
        }
    }
    & #bookBtnCol{
        display:flex;
        flex-direction:row;
        justify-content:center;
        & #book-btn{
            margin: 1% 0 1% 0;
            width:30%;
            background-color:#0A2942;
            padding:1%;
            border-radius:35px;
            color: white;
            border:none;
            &:hover {
                 background-color: #fff066;
                 color:black;
            }
        }
    }
}

/* =========================
   MOBILE RESPONSIVE (DETAILS PAGE - CENTERED)
========================= */
@media (max-width: 768px) {

    main {
        padding: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center; /* ✅ center everything */
    }

    /* MAIN CONTAINER */
    #home-details-container {
        width: 100%;
        margin: -40px 0 15px 0;
        padding: 15px;
        border-radius: 12px;

        display: flex;
        flex-direction: column;
        align-items: center; /* ✅ center content */
        justify-content: center;
        text-align: center;
    }
    .col-2 , .col-3 , .col-4, .col-6, .col-8, .col-9, .col-10, .col-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ================= IMAGES ================= */
    #home-details-container img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        display: block;
        margin: 0 auto;
    }

    #home-details-container #img-div-1,
    #home-details-container #img-div-2,
    #home-details-container #img-2 {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    /* ================= TEXTAREAS / DESCRIPTION ================= */
    #home-details-container .col-12 #description,
    #home-details-container .col-12 .description {
        min-height: 150px;
        font-size: 14px;
        padding: 10px;
        text-align: center;
    }

    /* ================= TYPE / ADDRESS BOXES ================= */
    #home-details-container .type,
    #home-details-container .address,
    #home-details-container #address {
        font-size: 14px;
        padding: 10px;
        text-align: center;
    }

    /* ================= TABLE ================= */
    #home-details-container #rental-units-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        margin: 0 auto;
    }

    #home-details-container #rental-units-table thead th,
    #home-details-container #rental-units-table tbody td {
        font-size: 13px;
        padding: 8px;
        text-align: center;
    }

    /* ================= BOOK BUTTON ================= */
    #home-details-container #bookBtnCol {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #home-details-container #bookBtnCol #book-btn {
        width: 100%;
        font-size: 14px;
        padding: 12px;
        border-radius: 20px;

        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* =========================
   SMALL PHONES
========================= */
@media (max-width: 480px) {

    #home-details-container {
        padding: 12px;
        margin: -20px 0 10px 0;
    }

    #home-details-container .col-12 #description,
    #home-details-container .col-12 .description {
        font-size: 13px;
    }

    #home-details-container #rental-units-table thead th,
    #home-details-container #rental-units-table tbody td {
        font-size: 12px;
    }

    #home-details-container #bookBtnCol #book-btn {
        font-size: 13px;
    }
}