@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap");
body {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
}

main {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
}
@media screen and (max-width: 576px) {
  main {
    display: flex;
    flex-direction: column;
  }
}

.card {
  background-image: url(../images/bg-main-desktop.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 35%;
}
@media screen and (max-width: 576px) {
  .card {
    width: 100%;
    min-height: 250px;
  }
}

.card__div1, .card__div2 {
  position: absolute;
  top: 15%;
  left: 10%;
  background-image: url(../images/bg-card-front.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 350px;
  height: 150px;
  border-radius: 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2em;
  color: white;
}
@media screen and (max-width: 576px) {
  .card__div1, .card__div2 {
    top: 22%;
    left: 5%;
    width: 250px;
    height: 115px;
    z-index: 1000;
    font-size: 0.8em;
  }
}

.card__span {
  margin-top: 1em;
  font-size: 1.5em;
}
@media screen and (max-width: 576px) {
  .card__span {
    margin-top: 0.5em;
  }
}

.card__div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__div2 {
  top: 45%;
  left: 15%;
  background-image: url(../images/bg-card-back.png);
  flex-direction: row;
  justify-content: flex-end;
}
@media screen and (max-width: 576px) {
  .card__div2 {
    top: 5%;
    z-index: 1;
  }
}

.p__div2 {
  margin-top: 4em;
  margin-right: 1em;
}

.form {
  align-self: center;
  width: 30%;
  margin-right: 15em;
}
@media screen and (max-width: 576px) {
  .form {
    margin-right: 0;
    width: 90%;
    padding-top: 7em;
    padding-bottom: 1em;
  }
}
.form-disabled {
  display: none;
}

.form__label {
  color: hsl(278deg, 68%, 11%);
  text-transform: uppercase;
  margin-bottom: 10px;
  cursor: pointer;
}

.form__group {
  display: flex;
  flex-direction: column;
}

.form__div {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.form__input {
  margin-bottom: 2em;
  height: 2.5em;
  border: 2px solid black;
  border-radius: 10px;
  transition: 0.5s ease all;
  padding: 0 0.5em;
}
.form__input:focus {
  border: 2px solid hsl(249deg, 99%, 64%);
  outline: none;
}
@media screen and (max-width: 576px) {
  .form__input {
    width: 90%;
  }
}

.form__error, .form__error2 {
  margin-top: 0;
  font-size: 12px;
  color: hsl(0deg, 100%, 66%);
  font-weight: bold;
  display: none;
}
.form__error-active {
  display: block;
}

.form__error2-active {
  display: block;
}

.form__input-date {
  width: 30%;
}

.form__btn, .success__btn {
  color: white;
  background-color: hsl(278deg, 68%, 11%);
  border: none;
  padding: 1em;
  border-radius: 10px;
  cursor: pointer;
}

.success {
  display: none;
}
.success-active {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 576px) {
  .success-active {
    width: 100%;
    margin-bottom: 1em;
  }
}

.success__span {
  color: hsl(279deg, 6%, 55%);
}

.success__btn {
  width: 50%;
  margin-top: 1em;
}
@media screen and (max-width: 576px) {
  .success__btn {
    width: 90%;
  }
}

.form__group-error .form__input {
  border: 3px solid hsl(0deg, 100%, 66%);
  margin-bottom: 2em;
}

/*# sourceMappingURL=styles.css.map */