.floor-main {
  width: 100%;
}

/* Tabs */
.floor-tabs {
  display: flex;
  justify-content: center;
  background: #333;
  padding: 5px 0;
  margin: 50px auto 20px;
  width: 60%;
}

.floor-tab {
  background: transparent;
  border: none;
  padding: 12px 25px;
  margin: 0 10px;
  color: #aaa;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.floor-tab.active {
  color: #d4af37;
}

/* Container */
.floor-container {
  text-align: center;
  color: white;
}

.floor-images {
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 400px; /* Set a minimum height to prevent layout shift */
}

/* Image container with transitions */
.floor-image {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 60%;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  pointer-events: none;
}

/* Active image */
.floor-image.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  position: relative; /* Change from absolute to relative when active */
}

/* Default hide all images */
.floor-image {
  width: 60%;
  transition: 0.5s ease-in-out;
}