.w-100 {
  height: 100%;
  width: 25%; /* default for large screens */
  display: block;
  margin: 0 auto;
}

/* For mobile screens */
@media (max-width: 768px) {
  .w-100 {
    width: 100%;      /* full width */
    height: 40vh;     /* half of screen height */
    object-fit: cover; /* makes sure image fits without distortion */
  }
}
@media (min-width: 350px) and (max-width: 767px) {
  .w-100 {
    width: 100%;      /* full width */
    height: 40vh;     /* half of screen height */
    object-fit: cover; /* makes sure image fits without distortion */
  }
}
.watermark {
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg); /* Center and rotate */
            font-size: 6em; /* Adjust watermark size */
            color: rgba(0, 0, 0, 0.1); /* Semi-transparent */
            width: 90%; /* Stretch the watermark */
            text-align: center; /* Center watermark text */
            white-space: nowrap; /* Prevent wrapping */
            pointer-events: none; /* Make sure watermark doesn't block interactions */
            user-select: none; /* Prevents selection of watermark */
            z-index: -1; /* Place watermark behind all content */
        }