html {
  scroll-behavior: smooth;
}

.logo {
  display: flex;
  justify-content: center;
}

  .floorplan-container-BD {
      position: relative;
      width: 1000px;
      height: 638px;
      margin: auto;
    } 

    .floorplan-container {
      position: relative;
      width: 1000px;
      height: 333px;
      margin: auto;
    }

    .floorplan-image {
      width: 100%;
      height: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .floorplan-card {
      width: 80%;
      height: 80%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      border: 2px outset rgb(232, 239, 247);
      
    }

    .overlay-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .floor-title {
      text-align: center !important;
      font-size: 24px;
      font-weight: bold;
      margin: 40px 0 20px;
      color: #333;
      font-family: 'Segoe UI', sans-serif;
      border-bottom: 1px solid #ccc;
      padding-bottom: 8px;
    }

    .floor-title2 {
      text-align: center !important;
      font-size: 18px;
      /*font-weight: bold;*/
      margin: 2px 0 0;
      font-family: 'Segoe UI', sans-serif;
      /*border-bottom: 1px solid #ccc;*/
      padding-bottom: 10px;
    }

    .floor-wrapper {
      margin-bottom: 60px; /* alebo 40px */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .floor-wrapper img,
    .floor-wrapper svg {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }

    .bd-title {
      text-align: center;
      margin-bottom: 16px; /* alebo 12px, podľa vkusu */
      font-size: 28px;
      font-weight: bold;
    }

    .room_green {
    fill: rgba(203, 218, 224, 0); /* začína ako priehľadná */
    stroke: #9cafca;
    stroke-width: 2;
    stroke-opacity: 1;
    pointer-events: all;
    cursor: pointer;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation:
      draw 2s ease forwards,
      fillIn 0.5s ease 0.5s forwards; /* výplň začne po 0.5 sekundách */
      transition: fill 0.3s ease; /* pridáme späť pre hover */
  }

    .room_red {
    fill: rgba(203, 218, 224, 0); /* začína ako priehľadná */
    stroke: #9cafca;
    stroke-width: 2;
    stroke-opacity: 1;
    pointer-events: all;
    cursor: pointer;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation:
      draw 2s ease forwards,
      fillIn 0.5s ease 0.5s forwards; /* výplň začne po 0.5 sekundách */
      transition: fill 0.3s ease; /* pridáme späť pre hover */
  }

   .room_building {
    fill: rgba(203, 218, 224, 0); /* začína ako priehľadná */
    stroke: #9cafca00;
    stroke-width: 2;
    stroke-opacity: 1;
    pointer-events: all;
    cursor: pointer;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation:
      draw 2s ease forwards,
      fillIn_building 0.5s ease 0.5s forwards; /* výplň začne po 0.5 sekundách */
      transition: fill 0.3s ease; /* pridáme späť pre hover */
  }

  .room_green:hover {
    fill: rgba(146, 238, 61, 0.6) !important; /* !important prepíše animáciu */
  }

   .room_red:hover {
    fill: rgba(223, 36, 51, 0.6) !important; /* !important prepíše animáciu */
  }

    .room_building:hover {
    fill: rgba(146, 238, 61, 0.6) !important; /* !important prepíše animáciu */
  }


  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fillIn {
    to {
      fill: rgba(131, 199, 226, 0.4);
    }
  }

    @keyframes fillIn_building {
    to {
      fill: rgba(131, 199, 226, 0);
    }
  }

  @media (max-width: 600px) {
  .floor-title {
    font-size: 20px;
    margin-top: 60px;
  }

  .floor-wrapper {
    margin-bottom: 40px;
  }

  .floor-wrapper img,
  .floor-wrapper svg {
    max-width: 100%;
    height: auto;
  }
}