.modal-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   justify-content: center;
   align-items: center;
   z-index: 9999;
 }

 .modal-box {
   background: #fff;
   padding: 20px;
   border-radius: 8px;
   width: 27%;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
@media only screen and (max-width: 600px) {
  .modal-box {    
   width: 90% !important;
  }
}
@media only screen and (max-width: 1600px) {
  .modal-box {    
   width: 30%;
  }
}
 .close-modal {
   position: absolute;
   right: 10px;
   top: 10px;
   font-size: 30px;
   cursor: pointer;
 }

 .modal-box h3 {
   margin-bottom: 15px;
 }

 .form-group {
   margin-bottom: 10px;
 }

 .form-group input, .form-group textarea {
   width: 100%;
   padding: 5px 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }

 .submit-btn {
   background: #3F5EE9;
   color: white;
   border: none;
   padding: 10px;
   width: 100%;
   cursor: pointer;
   border-radius: 4px;
 }

 .submit-btn:hover {
   background: #274fff;
 }