@media (min-width: 1400px) {
    .container {
        max-width: 1820px;
    }
}

/* Image map hover effects */
area {
    cursor: pointer;
}

.hover-overlay.active {
    background: rgba(255, 0, 0, 0.3) !important;
    border: 2px solid red;
}

/* Modal slider text indicators */
.slider-text-indicator {
    background: none !important;
    border: none !important;
    padding: 5px 10px;
    margin: 0 5px;
    color: #631203;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease;
}

.slider-text-indicator:hover,
.slider-text-indicator.active {
    color: #ab6503 !important;
}

/* Modal background color only (no image) */
.modal-bg-color {
    background-color: #eeedd9;
}

/* Modal unit text styling */
.modal-unit-name {
    color: #631203;
    font-size: 1.1rem;
}

.modal-unit-description {
    font-size: 0.9rem;
}

/* Responsive image map styling */
#sitemapImage {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Mobile responsive styles */
@media (max-width: 767.98px) {
    /* Center sitemap buttons with spacing */
    .sitemap-section .row.justify-content-center .col-auto {
        text-align: center;
        width: 100%;
    }
    
    .sitemap-btn {
        margin: 0 5px !important;
        display: inline-block;
        margin-bottom: 10px !important;
        min-width: 120px !important;
        padding: 8px 16px !important;
        font-size: 0.9rem;
    }
    
    /* Mobile layout reorganization */
    .row.justify-content-center {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* All main columns become full width on mobile */
    .col-md-2,
    .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
        text-align: center !important;
    }
    
    /* Individual plan sections positioning */
    .plan-section {
        width: 100%;
        margin-bottom: 20px;
    }
    
    /* Default ordering: Plan 1 active */
    #plan1-section {
        order: 1;
    }
    
    .col-md-6 {
        order: 2; /* Floor plan images */
    }
    
    /*.col-md-2:last-child {
        order: 3;  Interior/exterior images 
    }*/

    #plan1_rendering.col-md-2 {
        order: 3; /* Interior/exterior images */
    }

        #plan2_rendering.col-md-2 {
            order: 3;  Interior/exterior images 
        }

        /*#plan2-section {
            order: 4;*/ /* Plan 2 info comes last */
        /*}*/
        /* Hide the first column container and let plan sections float freely */
        .col-md-2:first-child {
            display: contents !important;
        }
        /* Dynamic reordering classes */
/*        .mobile-active {
            order: 1 !important;
        }*/

/*        .mobile-inactive {
            order: 4 !important;
        }*/
        /* Center all content in mobile */
        .plan-btn {
            margin: 0 auto 15px auto !important;
            min-width: 100px !important;
            padding: 8px 16px !important;
            font-size: 0.9rem !important;
            display: block !important;
            width: fit-content !important;
        }

        .unit-info {
            text-align: center !important;
        }

            .unit-info p {
                text-align: center !important;
            }
        /* Keep legend beside sitemap on desktop, but fix mobile */
        .sitemap-section .col-md-1 {
            text-align: center;
        }

        .sitemap-section .col-md-9 {
            width: 100%;
            max-width: 100%;
        }
        /* Move legend below sitemap on mobile */
        .sitemap-section .row.mt-4 {
            flex-direction: column-reverse;
        }

        .sitemap-section .col-md-1 {
            margin-top: 20px;
        }
        /* Modal spacing adjustments */
        .modal-dialog {
            margin: 10px !important;
            width: calc(100% - 20px) !important;
            max-width: none !important;
        }

        #modalUnitImage {
            margin-bottom: 20px !important;
        }

        .modal .d-flex.flex-column.gap-2 {
            margin-top: 15px;
            padding-bottom: 20px;
        }
        /* Reduce font sizes on mobile */
        .content-section p {
            font-size: 1rem !important;
        }

        .animated-text {
            font-size: 1rem !important;
        }

    .included-feature-txt {
        text-align: left !important;
    }
    }

/* Additional responsive adjustments for very small screens */
@media (min-width: 576px) and (max-width: 767.98px) {
    .sitemap-section .row.mt-4 {
        flex-direction: row;
    }
    
    .sitemap-section .col-md-1 {
        margin-top: 0;
    }
}

/* Plan button styles - similar to sitemap-btn but smaller */
.plan-btn {
    background-color: white;
    color: black;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid #ab6503;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
    min-width: 150px;
    text-align: center;
}

.plan-btn:hover,
.plan-btn.active {
    background-color: #ab6503;
    color: white;
    text-decoration: none;
}

/* Unit information styling */
.unit-info {
    padding: 15px;
    border-radius: 5px;
}

.unit-info h5 {
    color: #631203;
    margin-bottom: 10px;
}

/* Override sitemap-btn border to make it thinner */
.sitemap-btn {
    border: 1px solid #ab6503 !important;
}

/* Content section paragraph styling */
.content-section p {
    font-size: 1.5rem;
    line-height: 1.5;
}