@import url("https://fonts.googleapis.com/css2?family=Jura:wght@300..700&family=Syncopate:wght@400;700&display=swap");
.workbar {
  background-color: #720e07;
  padding-top: 80px;
  /* padding-bottom: 80px; */
}
.work-info {
  font-family: "Jura";
  text-shadow: 0.1px 0 black, -0.1px 0 black, 0 0.1px black, 0 -0.1px black;
}
.work-title {
  font-family: "Syncopate";
  font-weight: bold;
}
/* .work-panel {
  background-color: rgb(247, 255, 221);
  font-family: "Audiowide";
} */
/* Parent container */
.work-panel {
  background-color: rgb(247, 255, 221);

  display: flex;
  align-items: center;
  justify-content: start;
  gap: 2rem;
  border-radius: 20px;
  overflow: hidden;
  width: 80%;
}
.work-panel:hover {
  cursor: pointer;
}

/* Image Styling */
.work-img {
  width: 450px;
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensures the image scales correctly */
  border-radius: 20px; /* Optional: maintain rounded corners */
}
/* Text Container */
.work-panel .d-flex.flex-column {
  max-width: 50%;
}

.badge {
  margin: 2;
  margin-left: 0;
}

/* Responsive layout for smaller screens */
@media (max-width: 1300px) {
  .work-panel {
    flex-direction: column; /* Stack items vertically */
    text-align: center; /* Center align text */
    gap: 1.5rem;
    padding: 1.5rem;
    width: 100%;
  }

  .work-img {
    max-width: 100%; /* Full width for image */
    height: auto;
  }

  .work-panel .d-flex.flex-column {
    max-width: 100%; /* Full width for text */
  }
}