.popUpArea {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.6);
     display: none;
     z-index: 9999;
}
.modal {
     position: absolute;
     top: 10px;
     left: 50%;
     transform: translateX(-50%);
     max-width: 600px;
     width: 90%;
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.modal-header {
     text-align: right;
     padding: 10px;
     background: #f5f5f5;
}
   #close {
     cursor: pointer;
     font-size: 24px;
     color: #333;
     border: none;
     background: none;
}
.modal-body img {
     width: 100%;
     height: auto;
     display: block;
}
   @media (max-width: 600px) {
.modal {
       width: 90%;
       top: 10px;
}
     #close {
       font-size: 28px;
       padding: 10px;
}
}