.work-details {
  height: 100vh;
  overflow-y: scroll;
  padding-right: 10px; /* Optional: Add padding to avoid content touching the scrollbar */
}

/* Optional: Style for scrollbar */
.work-details::-webkit-scrollbar {
  width: 8px;
}

.work-details::-webkit-scrollbar-thumb {
  background: #685555;
  border-radius: 4px;
}

.work-details::-webkit-scrollbar-thumb:hover {
  background: #432f2f;
}


.work-head {
  font-size: 4.5rem;
  font-weight: 400;
  background-color: #685556;
  color: white;
  padding: 0.5rem 1rem;
  width: 100vw;
  height: 216px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.work-star {
  margin-left: 2rem;
  margin-right: 2rem;
  width: 35px;
  height: auto;
}

.work-section {
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.work-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
  gap: 2rem;
  width: 90%;
  margin-top: 5rem;
}

.section-star {
  width: 94%;
  margin: auto;
}

.section-star img {
  float: right;
}

.work-content {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.side-bar {
  width: 20%;
}

.side-bar ul {
  list-style-type: none;
  font-family: "Quicksand", serif;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-weight: 500;
  color: #685555;
}

.side-bar ul li {
  cursor: pointer;
}

.side-bar ul li.active {
  position: relative;
  font-weight: 700;
}

.side-bar ul li.active::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 0px;
  width: 15px;
  height: 20px;
  background-image: url('./assets/pin.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.work-details {
  width: 80%;
  font-family: "Quicksand", serif;
  padding-left: 4rem;
  border-left: 0.5px solid #685555;
}

.details-section {
  margin-bottom: 4rem;
}

.work-details h1 {
  font-weight: 400;
  font-family: "Playfair Display", serif;
  color: #685555;
  font-size: 40px;
}

.work-details h2 {
  font-weight: 700;
  color: #2C2C2C;
  font-size: 28px;
}

.work-details p {
  font-size: 20px;
  font-weight: 500;
  color: #2C2C2C;
}

.work-details p b {
  font-weight: 700;
}

.work-details ol {
  list-style-type: decimal;
  padding-left: 2rem;
}

.work-details ol li {
  margin-bottom: 1.25rem;
  font-size: 20px;
}

#work {
  margin-top: 0px;
}

.shibu-imgs {
  display: flex;
  gap: 5rem;
  margin-top: 2rem;
  width: 100%;
  margin-bottom: 10rem;
}

.game-imgs {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin-top: 2rem;
  width: 100%;
  margin-bottom: 10rem;
}

.game-imgs img {
  width: 100%;
  height: auto;
}

.shibu-imgs img {
  width: 40%;
  height: auto;
}

.shibu-head {
  display: flex;
  gap: 2rem;
  width: 100%;
  align-items: center;
}

.shibu-head img {
  width: 30%;
  height: auto;
}

#insights-list {
  margin-top: 2rem;
  list-style-type: lower-alpha;
}

#insights-list b {
  font-weight: 600;
}

/* Responsive Styling for Mobile Devices */
@media (max-width: 768px) {
  .work-head {
    font-size: 2rem;
    height: auto;
    padding: 1rem;
    width: 100%;
  }

  .work-section{
    width: 100%;
    padding: 0;
  }

  .work-header {
    flex-direction: column;
    gap: 2rem;
    padding-top: 50px;
    width: 90%;
    margin-bottom: 2rem;
  }

  .section-star {
    display: none;
  }

  .work-content {
    flex-direction: column;
    gap: 2rem;
  }

  .side-bar {
    width: 100%;
    justify-content: space-around;
    border-bottom: 1px solid #685555;
    padding-bottom: 1rem;
  }

  .side-bar ul {
    flex-direction: column;
    gap: 1rem;
    justify-content: space-around;
    width: 300px;
  }

  .side-bar ul li.active::before {
    left: -23px;
    top: 0px;
  }

  .work-details {
    width: 100%;
    padding-left: 0;
    border-left: none;
  }

  .work-details h1 {
    font-size: 30px;
  }

  .work-details h2 {
    font-size: 23px;
  }

  .work-details p,
  .work-details ol li {
    font-size: 18px;
  }

  .shibu-imgs,
  .game-imgs {
    flex-direction: column;
    gap: 1.5rem;
  }

  .shibu-imgs img,
  .shibu-head img {
    width: 100%;
  }

  .shibu-head {
    flex-direction: column;
    gap: 1rem;
  }
}