#contact {
  width: 100vw;
  height: 100vh;
  position: absolute;
  transition: 3s ease-in-out;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth!important;
  top: 2100px;
}
#contact::-webkit-scrollbar {
  display: none;
}
#contact #bgtext {
  z-index: -1;
}
#closeBtn {
  position: absolute;
  top: 25px;
  left: 92%;
  background: none;
  color: #FFFFFF;
  border: none;
  font-size: 50px;
}
.modal-wrap {
  display: flex;
  width: 100%;
  height: 100%;
}
.modal-wrap form {
  width: 50%;
  position: relative;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  padding: 3% 4%;
}
#contactHeading {
  font-size: 35px;
  position: relative;
  color: #E75555;
  margin-bottom: 5%; 
}
.modal-wrap form input {
  border: none;
  border-bottom: 1px solid #131313;
  font-size: 14px;
  -webkit-text-stroke-width: 0.3px;
  margin: 0 60px 45px 0;
  outline: none;
  color: #131313;
  padding-right: 15px;
}
.modal-wrap form div {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.modal-wrap form button {
  border: none;
  background-color: transparent;
  display: flex;
  color: #131313;
  font-size: 14px;
  -webkit-text-stroke-width: 0.3px;
}
.modal-wrap div {
  width: 50%;
  background: #212228;
}
.modal-wrap div img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
#modalText {
  position: relative;
  color: #E75555;
  -webkit-text-stroke-width: 1px;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  font-size: 16px;
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.shadow{
  z-index:2;
  position: fixed;
  top:0px;
 left:0px; 
  width:100%;
  height:100vh;
  background: rgba(0,0,0,0.6);
  display:flex;
  justify-content: center;
  align-items: center;
}
.main-modal{
  width: 80%;
  height: 77%;
  background: #fff;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}
.hideModal{
    z-index:-1;
    opacity:0;
  animation: hide .25s;
  
transform: scale(0);
}
@keyframes hide {
  from{
    z-index:2;
    transform: scale(1);
    opacity:1;
  } to{
    z-index:-1;
    transform: scale(0);
    opacity: 0;
  }
}
.showModal{
  opacity:1;
    z-index:2;
  animation: show .2s;
  
transform: scale(1);
}
@keyframes show {
  from{
    
    transform: scale(0);
    opacity:0;
    z-index:-1;
  } to{
    
    transform: scale(1);
    opacity: 1;
    z-index:2;
  }
}