.modal {
	 position: fixed;
   z-index: 1000;
	 width: 100vw;
	 height: 100vh;
	 opacity: 0;
	 visibility: hidden;
	 transition: all 0.3s ease;
	 top: 0;
	 left: 0;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .modal.open {
	 visibility: visible;
	 opacity: 1;
	 transition-delay: 0s;
}
 .modal-bg {
	 position: absolute;
	 background: #f01a86;
	 width: 100%;
	 height: 100%;
   opacity: 7%;
}
 .modal-container {
   width: 280px;
   height: 280px;
	 border-radius: 10px;
	 background: #fff;
	 position: relative;
	 padding: 30px;
   box-shadow: 0 7px 16px 3px rgb(28 28 28 / 20%);
}

.modal-container p {
  font-size: 13px;
  line-height: 18.2px;
}

.modal-container h3 {
  font-size: 20px;
}

 .modal-close {
	 position: absolute;
	 right: 15px;
	 top: 15px;
	 outline: none;
	 appearance: none;
	 color: #ed1d86;
	 background: none;
	 border: 0px;
	 font-weight: bold;
	 cursor: pointer;
}