body {
      background-image: url('Inside_Center.jpg'); /* swap with your image filename */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
      margin: 0;
    }
    .dot {
      position: absolute;
      top: 55%;   
      left: 30%;     
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      display: block;
    }

    .dot:hover {
      background-color: darkred;
      cursor: pointer;
    }
    .mini-flex {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 70px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 8px;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.35);
      border-top: 2px solid rgba(255, 255, 255, 0.35);
      border-bottom: 2px solid rgba(255, 255, 255, 0.35);
      z-index: 2;
    }

    .mini-item {
      flex: 1 1 0;
      height:100px;
      background: rgba(255, 255, 255, 0.15);
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-radius: 6px;
    }