/* Main image container - ensure the image is always centered */
.main-image-container {
    width: 100%;  /* Ensure responsiveness */
    max-width: 600px;  /* Set a maximum width for the image */
    height: 400px;  /* Fixed height for the image container */
    display: flex;
    justify-content: center;  /* Horizontally center the image */
    align-items: center;  /* Vertically center the image */
    overflow: hidden;  /* Hide any overflow */
    margin: 0 auto;  /* Center the container itself */
}

/* Main image - ensure it is centered and contained */
.main-image {
    max-width: 100%;  /* Ensure the image doesn't exceed the container's width */
    max-height: 100%;  /* Ensure the image doesn't exceed the container's height */
    object-fit: contain;  /* Keep the image's aspect ratio */
}



/* Thumbnail styling */
.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* Center the thumbnail container */
.room-gallery .d-flex {
    justify-content: center;  /* Center the thumbnails within the gallery */
}