.modal {
       display: none;
       position: fixed;
       z-index: 999;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
   }

   .modal-content {
       background-color: white;
       margin: 15% auto;
       padding: 20px;
       border-radius: 10px;
       width: 80%;
       max-width: 500px;
   }

   .close {
       color: #aaa;
       float: right;
       font-size: 28px;
       font-weight: bold;
   }

   .close:hover,
   .close:focus {
       color: black;
       text-decoration: none;
       cursor: pointer;
   }

   /* Product Marker Style */
   .product-marker {
       width: 40px;
       height: 40px;
       background-color: blue;
       border-radius: 50%;
       position: absolute;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 24px;
       color: white;
       font-weight: bold;
       text-align: center;
   }

   /* Hover effect for marker */
   .product-marker:hover {
       background-color: red;
   }

   /* Style for the plus sign */
   .product-marker::before {
       content: "+";
       font-size: 28px;
       color: white;
   }