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

.popup-content {
  position: absolute;
	top:50%;
  left: 50%;
  transform: translate(-50%) translateY(-50%);
	display: flex; flex-direction: column; align-items: center; width: 90%;
  background-color: white;
	padding:30px 20px;
  border-radius:20px;
	box-shadow:0px -1px 11px -1px rgba(0,0,0,0.3);
	font-size:15px; text-align:center; font-weight:500;
}
.popup-content.close {animation: fadeOut 0.8s;}
.popup-content a {display:flex; align-items:center; justify-content:center; width:86%; height:46px; background:#222; border-radius:50px; color:#fff;}
.popup-content button {font-size:15px; color:#878787; font-weight:500; text-decoration:underline;}

.popup-content h3 {margin-bottom: 20px;   font-size: 22px;  font-weight: 900;  color: var(--black);  line-height: 1.3;  letter-spacing: -0.3px;}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-color: red;
  color: white;
  cursor: pointer;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        bottom:-200px;
    }
    to {
        opacity: 1;
        bottom:0;
    }
}

@keyframes fadeOutDwon {
    from {
        opacity: 1;
        bottom:0;
    }
    to {
        opacity: 0;
        bottom:-200px;
    }
}