.message-overlay {
  position: fixed; z-index: 10001; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(183,168,127,0.8);
}
.msg-modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #fff; 
  padding: 40px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  text-align: center;
  max-height: 95vh;
  overflow-y: auto;
}
@media (max-width: 767px){
  .msg-modal {
      width: calc(100% - 40px);
      padding: 40px 20px;
      border-top-left-radius: 40px;
      border-bottom-right-radius: 40px;
  }
}
@media (max-width: 340px) {
  .msg-modal {
    width: calc(100% - 20px);
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }
}

.msg-close {
  position: absolute;
  top: 10px;
  right: 5px;
  background: none;
  border: none;
}
.msg-title {
  font-size: var(--font-size-xxxxlarge);
  color: #8a5a2c;
}
@media (max-width: 767px) {
  .msg-title {
    font-size: var(--font-size-xxxlarge);
  }
}
.msg-desc {
  font-size: var(--font-size-large);
}

@media (max-width: 767px) {
  .btm-pad {
    padding-bottom: 70px;
  }
}