/* Popup Container */
.popup {
    display: none; /* Initially hidden */
    position: fixed;
    top: 10%; /* Place the popup slightly below the top */
    right: 10px; /* Align to the right side */
    width: auto;
    height: auto;
    z-index: 9999;
    justify-content: flex-end;
    align-items: center;
  }
  
  /* Popup Content */
  .popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    max-width: 400px; /* Restrict max width */
    width: 100%; /* Ensure responsiveness */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  }
  
  /* Popup Image */
  .popup-content img {
    width: 100%; /* Ensure the image is responsive */
    height: auto;
    border-radius: 10px;
  }
  
  /* Close Button */
  .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
  }
  
  .close-popup:hover {
    color: red;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .popup {
      top: 5%; /* Adjust position for smaller screens */
      right: 5%; /* Reduce margin from the right */
    }
  
    .popup-content {
      max-width: 300px; /* Adjust width for tablets */
    }
  }
  
  @media (max-width: 480px) {
    .popup {
      top: 5%; /* Slightly adjust for smaller screens */
      right: 5%; /* Reduce margin further */
    }
  
    .popup-content {
      max-width: 90%; /* Use most of the screen width */
    }
  }