.ribbon-wrapper {
  position: relative;
  max-width: 95%; /* Match the div's max-width */
}

.ribbon {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #0ba9be; /* Choose your ribbon color */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8em;
  
  z-index: 1; /* Ensure the ribbon is above other elements */
}


.hero-img {
  /* Your existing styles for the image */
  /* For example: */

  transform-origin: 50% 50%; /* Center the origin for scaling */
  animation: infiniteVerticalTransition 5s infinite alternate; /* Apply the animation */
}

@keyframes infiniteVerticalTransition {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px); /* Adjust the distance as needed */
  }
}



@media only screen and (max-width: 767px) {
  .qr {
    display: none;
  }
}