.tab-container {
    max-width:1600px;
    margin: 2rem auto;
    font-family: sans-serif;
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.tabs {
  display: inline-flex;          /* horizontal row */
  gap: 8px;                      /* space between tabs */
  background: transparent;
}

.tab {
  appearance: none;
  border: none;
  padding: 8px 16px;
  background: #eee;
  color: #222;
  cursor: pointer;
  border-radius: 12px;           /* roundness */
  transition: background .15s, transform .08s;
  font-size: 14px;
}

/* larger pill */
.tab.pill { border-radius: 999px; }

/* active tab style */
.tab.active {
  background: #1a73e8;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* focus/hover */
.tab:hover { background: #e6e6e6; transform: translateY(-1px); }
.tab:focus { outline: 2px solid rgba(26,115,232,.25); outline-offset: 2px; }

/* if tabs are connected (no gaps) use rounded corners only on ends */
.tabs.connected { gap: 0; }
.tabs.connected .tab { border-radius: 0; }
.tabs.connected .tab:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.tabs.connected .tab:last-child  { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

/* content panels */
.tab-content { margin-top: 12px; }
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab {
    flex: 1;
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #eee;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.tab.active {
    background: #333;
    color: #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}
.wall {
    width: 100%;
    height: 100px;
    background-color: lightyellow; /* Change color as needed */
}