/*Designs*/

#uppd .design-container,
#elevance .design-container, #prosper .design-container, #other-work .design-container {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  max-height: 75%;
  max-width: 75%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  vertical-align: middle;
  filter: grayscale(100%) contrast(105%);
}

.project-item:hover .design-container {
  max-width: 60% !important;
  max-height: 40% !important;
  top: 30% !important;
  filter: grayscale(0%) !important;
}

.project-item:hover {
  background-color: black;
  background-image: none;
}

#elevance .design-container {
  background-image: url(../images/updated-images/elevance.png);
}

#elevance {
  background: #fff !important;
}

#prosper .design-container {
  background-image: url(../images/shape-cover-image.png);
}

#prosper {
  background: #fff !important;
}

#other-work .design-container {
  background-image: url(../images/other-work.png);
}

#other-work {
  background: #fff !important;
}

#uppd .design-container {
  background-image: url(../images/updated-images/uppd.png);
}

#uppd {
  background: #fff !important;
}

@media all and (min-width: 600px) {
  #elevance, #prosper, #other-work, #uppd {
    background: #fff !important;
  }
}

@media all and (min-width: 1100px) {
  #elevance, #prosper, #other-work, #uppd {
    background: #fff !important;
  }
}

/* Special positioning for Flowster image on hover */
.project-item#flowster:hover .design-container {
  top: 28% !important;  /* Adjust this value to center the Flowster image */
}