.page-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-menu-section {
  background-color: rgba(0, 0, 0, 0.9);
  position: sticky;
  top: 0;
}

.footer-section {
  position: fixed;
  bottom: 0;
  mix-blend-mode: normal;
}

h1 {
  font-family: 'rama-gothic-c';
  font-weight: bold;
  font-size: min(8em, 8vw);
  line-height: 80%;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  color: white;
  margin-top: max(1em, 1vw);
}

.page-contact .faq-title {
  font-size: min(6em, 6vw);
  margin-block: 0.5em;
  color: white;
}

.more-question {
  color: white;
  font-size: 1.8em;
}

.form-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
  min-height: 50dvh;
  width: 50vw;
  color: white;
  margin-bottom: 15em;
}

.form-wrapper .credentials {
  display: flex;
  justify-content: space-between;
  margin-block: min(7.5vw, 7.5vh) min(2.5vw, 2.5vh);
}

.input-wrapper {
  display: flex;
  align-items: center;
  flex: 1 1 100%;
}

@media (pointer: fine) {
  .form-wrapper .credentials .input-wrapper:nth-child(1) {
    margin-right: min(6vh,6vw);
  }
}

.form-wrapper input {
  flex: 1 1 60%;
  border: 1px solid rgba(255, 255, 255,0.3);
  border-radius: 2px;
  background-color: rgba(0,0,0,0);
  color: white;
}

.form-wrapper .email {
  flex: 1 1 80%;
}

.form-wrapper input::placeholder {
  color: white;
  opacity: 0.4;
}

.input-wrapper .form-label {
  flex: 1 1 auto;
}

.form-label {
  font-family: 'Helvetica Now Display';
  font-weight: bold;
  font-size: min(1.8vh,1.8vw);
}

.message-label {
  align-self: center;
  margin-bottom: min(1.5vh, 1.5vw);
  margin-top: min(2vh, 2vw);
}

.client-message {
  min-height: 25vh;
  max-height: 25vh;
  height: 25vh;
  height: 25dvh;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin-block: min(2vh, 2vw);
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0);
  color: white;
  border-radius: min(0.8vw, 0.8vh);
  padding: 1%;
}

.client-message::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.btn-send {
  align-self: center;
  margin-top: min(1vh,1vw);
  padding: 1% 2.5%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: min(0.8vw, 0.8vh);
  font-family: 'rama-gothic-c';
  /* font-family: 'Helvetica Now Display'; */
  text-transform: uppercase;
  font-weight: bold;
  font-size: min(4vh,4vw);
  line-height: 75%;
  cursor: pointer;
  z-index: 60;
}

.btn-send:hover {
  color: white;
  background-color: var(--black);
  border-color: var(--black);
}

.error-msg {
  color: orange;
  text-align: center;
  font-size: 150%;
  margin-top: min(1vw, 1vh);
}

.input-wrapper .input-error {
  background-color: rgb(255, 242, 218);
  border: 1px dashed orange;
  border-radius: 2px;
}

.input-error-textarea {
  background-color: rgb(255, 242, 218);
  border: 1px dashed orange;
  border-radius: 2px;
}

.send-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  height: 50dvh;
  width: 40vw;
  font-size: 150%;
  text-align: center;
  opacity: 0;
  transform: translateX( min(-10vw, -10vh) );
}

.success-message,
.text-separator {
  margin-bottom: min(1vw, 1vh);
  color: white;
}

.sended-message {
  height: min(35vh, 35vw);
  width: 100%;
  border: 1px solid rgb(245, 245, 245);
  border-radius: 2px;
  display: block;
  text-align: left;
  padding: 2% 3%;
  overflow-x: hidden;
  font-size: 90%;
  color: white;
}

@media (pointer: coarse) {
  .page-content {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  .main-menu-section {
    background-color: transparent;
  }
  
  h1 {
    width: 100%;
  }
  
  .form-wrapper {
    width: 100vw;
    height: auto;
    padding-inline: 7.5%;
    padding-block: min(12vw, 12vh);
  }
  
  .form-wrapper .credentials {
    margin: 0;
  }
  
  .input-wrapper {
    margin-block: min(1rem, 1vh);
    width: 100%;
  }
  
  .input-wrapper .form-label {
    flex: 0 0 40%;
    font-size: 1.5rem;
  }
  
  .input-wrapper input {
    flex: 0 0 60%;
    padding: 1.2rem;
  }

  .client-message {
    padding: 1.2rem;
  }

  .btn-send {
    font-size: 5rem;
    padding-block: 4%;
    width: 100%;
    text-align: center;
  }
  
  .send-message {
    width: 100%;
    height: auto;
    padding-inline: 7.5%;
    margin-top: 5rem;
  }

  @media (orientation: landscape) {
    h1 {
      padding-top: 20vh;
    }
    
    .btn-send {
      padding-block: 2%;
    }
    
    .send-message {
      margin-bottom: 20vh;
    }
  }
}