.magic-wrap {
  display: flex;
  margin: 0 auto;
  align-items: stretch;
  min-height: 100vh;
  max-width: 1100px;
}
.super-sidebar {
   height: 100%;
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #0B0B45;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.5s;
}
.super-sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #EFBF04;
  display: block;
  transition: 0.3;
}
.super-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;

}
.super-sidebar a:hover{
color: #B2AC88;
}
.super-sidebar hr{
border: none;
border-top: 2px dotted #ccc;
margin:1em 0;
color:#EFBF04;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #a39b52;
  margin-left:160px;
  padding: 20px;
  transition: margin-left .5s;
}
.box {
  padding: 30px;
}
.small-box {
  padding: 20px;
}
.review {
  max-width: 800px;
  padding: 20px;
  margin: 20px;
  border: 2px solid white;
}

@media (max-width: 800px) {
  .magic-wrap {
    flex-direction: column;
  }
  .super-sidebar {
    width: 100%;
  }
}