/* Styling for the modal container */

    .modal-container {

      display: none;

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      background-color: #fff;

      padding: 20px;

      border-radius: 8px;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

      z-index: 2; /* Ensure the modal is above the other content */

    }



    /* Styling for the overlay */

    .overlay {

      display: none;

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: rgba(0, 0, 0, 0.5);

      z-index: 1; /* Ensure the overlay is below the modal */

    }