.modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      /* Decreased width */
      max-width: 300px;
      /* Further decreased maximum width */
      background-color: transparent;
      /* Removed background color */
      padding: 20px;
      border-radius: 10px;
      overflow: hidden;
      /* Hide overflowing content */
    }

    .modal-content {
      background-color: #fefefe;
      border: 1px solid #888;
      padding: 10px;
      border-radius: 10px;
      max-height: 400px;
      /* Set max height for scrolling */
      overflow-y: auto;
      /* Enable vertical scrolling */
    }

    .modal-image {
      max-width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    .close {
      color: red;
      position: absolute;
      top: 10px;
      /* Adjust as needed */
      right: 10px;
      /* Adjust as needed */
      font-size: 32px;
      font-weight: bold;
      cursor: pointer;
    }


    .modal-text {
      text-align: justify;
    }