/*.image-container {
  position: relative;
  width: 300px;
}*/

.background-image {
    width: 100%; /* Make the background image fill the container */
    display: block;
    background-size: 100% auto;
}

.overlay-image {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
    width: 100%; /* Set the size of the overlay image */
    height: 100%;
    object-fit: contain;
}

.overlay-image-right {
    left: 50%; /* Center horizontally */
}

.overlay-image-left {
    left: 25%; /* Center horizontally */
}
@media screen and (max-width: 990px) {
  .overlay-image-left {
    left: 50%;
    top: 30%;
    height: 55%
  }
}
@media screen and (max-width: 768px) {
  .overlay-image-left {
    left: 50%;
    top: 30%;
    height: 55%
  }
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}