/* SECTION MOCK */
.heroCustomerSupport {
  height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  z-index: 2;
}

.heroCustomerSupport-container {
  width: 100%;
  position: relative;
  height: 100%;
  padding-block: min(25rem, 25vh) min(5rem, 5vh);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-desk {
  display: block;
}

.image-mb {
  display: none;
}

.heroCustomerSupport-imageBg {
  position: absolute;
  top: min(-7rem, -7vh);
  object-fit: contain;
  width: 100%;
}

.heroCustomerSupport-imageBg-image {
  z-index: 1;
  position: relative;

  mask-image: linear-gradient(transparent, black 150%);
}

.heroCustomerSupport-imageBg-background {
  width: 100vw;
  z-index: 2;

  background: linear-gradient(black 55%, transparent);
  top: min(7rem, 7vh);

  height: 20.2rem;
  position: absolute;
}

.heroCustomerSupport-tagPage {
  display: flex;
  width: 14.4rem;
  height: 4.1rem;
  border-radius: 100px;
  border: 0.05rem solid rgba(255, 255, 255, 0.57);
  backdrop-filter: blur(14.199999809265137px);
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  margin-bottom: min(2.5rem, 2.5vh);
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem; /* 166.667% */
  text-transform: capitalize;
}

.heroCustomerSupport-tagPage-icon {
  width: 0.4rem;
  display: block;
  height: 0.4rem;
}

.heroCustomerSupport-title {
  text-align: center;
  font-size: min(10rem, 10vh);
  font-style: normal;
  font-weight: 500;
  line-height: 1; /* 100% */
  text-transform: capitalize;

  margin-bottom: min(6rem, 5vh);
  width: min(85.5rem, 85.5vh);
}

.heroCustomerSupport-button {
  border-radius: 10rem;
}

.heroCustomerSupport-bg {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14.199999809265137px);
}

.heroCustomerSupport-containerInput {
  width: min(46.6rem, 46.6vh);
  height: 5.1rem;
  flex-shrink: 0;

  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.heroCustomerSupport-containerTextarea {
  width: min(95.2rem, 95.2vh);
  height: 16.9rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;

  border-radius: 3rem;
  align-items: center;
}

.heroCustomerSupport-containerTextarea-textarea {
  width: 98%;
  height: 98%;
  border-radius: 3rem;
  background: transparent;
  padding-left: 0.75rem;
  padding-top: 1rem;
  border: none;
  font-size: 2rem;
  font-style: normal;
  resize: none;
  font-weight: 500;
  outline: none;
  line-height: 3rem; /* 150% */
}

.heroCustomerSupport-containerTextarea-textarea::placeholder {
  color: #fff;
  opacity: 0.5;
}

.heroCustomerSupport-containerInput-input::placeholder {
  color: #fff;
  opacity: 0.5;
}

.heroCustomerSupport-containerForm {
  display: flex;
  gap: 2rem;
  justify-content: start;
  align-items: start;
}

.heroCustomerSupport-containerInput-input {
  width: 92%;
  height: 92%;
  outline: none;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem; /* 150% */
}

.heroCustomerSupport-form {
  display: flex;
  align-items: start;
  justify-content: start;
  gap: min(2rem, 2vh);
  width: min(95.2rem, 95.2vh);
  flex-wrap: wrap;
  height: 38.2rem;
  flex-shrink: 0;
  margin-bottom: 2rem;
}

@media screen and (orientation: portrait) {
  .heroCustomerSupport {
    height: fit-content;
  }

  .heroCustomerSupport-containerForm {
    flex-wrap: wrap;
    width: 100%;
    gap: 1.5rem;
  }

  .heroCustomerSupport-container {
    padding: min(10.4rem, 10.4vh) min(3.8rem, 3.8vh) min(10.4rem, 10.4vh) min(5rem, 5vh);
  }

  .heroCustomerSupport-containerInput {
    width: min(34.2rem, 34.2vh);
    height: min(4.1rem, 4.1vh);
  }

  .heroCustomerSupport-containerInput-input {
    font-size: min(1.4rem, 1.4vh);
  }

  .heroCustomerSupport-title {
    font-size: min(4rem, 4vh);

    width: min(32.6rem, 32.6vh);
  }

  .heroCustomerSupport-tagPage {
    width: min(10.4rem, 10.4vh);
    height: min(3.1rem, 3.1vh);
    font-size: min(1.2rem, 1.2vh);
    gap: 0.8rem;
    flex-shrink: 0;
  }

  .heroCustomerSupport-containerTextarea {
    width: min(34.2rem, 34.2vh);
    height: min(18.6rem, 18.6vh);
    border-radius: 2rem;
    flex-shrink: 0;
  }

  .heroCustomerSupport-containerTextarea-textarea {
    font-size: min(1.4rem, 1.4vh);
  }

  .heroCustomerSupport-form {
    width: 100%;
    height: fit-content;
    align-items: center;
    flex-direction: column;
  }

  .heroCustomerSupport-imageBg-background {
    height: 10rem;
    background: linear-gradient(black 0%, transparent);
    top: min(0rem, 0vh);
  }

  .heroCustomerSupport-imageBg {
    top: min(-7rem, -7vh);
    height: 20rem;
  }

  .heroCustomerSupport-imageBg-image {
    object-fit: fill;
  }

  .heroCustomerSupport-button {
    width: min(19.7rem, 19.7vh);
    flex-shrink: 0;
  }

  .image-desk {
    display: none;
  }

  .image-mb {
    display: block;
  }

  .heroCustomerSupport__button--container {
    flex-grow: 0.8;
  }

  .heroCustomerSupport__button--blur {
    margin-left: -0.7rem;
  }
}

[data-fade-element] {
  opacity: 0;
}