body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

h2 {
  padding: 15px;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-image: linear-gradient(135deg, #eba5ff 0, #af89ff 25%, #736aee 50%, #394cb8 75%, #003187 100%);
  color: #575556;
  font-family: "Euclid Circular A", "Poppins";
}

.card {
  display: flex;
  align-items: center;
  width: 75vw;
  max-width: 650px;
  padding: 50px 30px 50px 20px;
  background: #ffffff;
  border-radius: 24px;
}

.card img {
  max-width: 260px;
  width: 32vw;
  height: 260px;
  object-fit: cover;
  margin-left: -60px;
  margin-right: 40px;
  border-radius: inherit;
}


.card h2 {
  font-size: 28px;
  font-weight: 400;
  margin: 0;
}

.card h3 {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.5;
  margin: 0 0 20px;
}

.card p {
  font-size: 18px;
  font-weight: 600;
  color: rgb(0 0 0 / 70%);
  margin-bottom: 24px;
}

.card .buttons {
  display: inline-flex;
  gap: 10px;
}

.card button {
  border: 1px solid #a7a7a7;
  background: transparent;
  color: #a7a7a7;
  font-family: inherit;
  padding: 16px 20px;
  font-size: 18px;
  border-radius: 6px;
  min-width: 120px;
}

.input-cep{
  width: 80%;
	margin: 0 auto;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 10px;

}

.card button.primary {
  background: #746AEE;
  color: #f9f9f9;
  border: 0;
  cursor: pointer;
}

  @media (width <= 720px) {
  .card {
    margin: 0 40px;
    padding-left: 50px;
    padding-right: 50px;
    width: 100%;
    text-align: center;
    flex-direction: column;
  }

  .card h2 {
    font-size: 20px;
  }

  .card img {
    margin: -100px 0 30px 0;
    width: 100%;
    max-width: 1000px;
  }

  .card button {
    min-width: 160px;
  }
}

/* Estilização dos botões  */

.alert-error {
  padding: 20px;
  background-color: #f44336;
  color: white;
  display:none;
  position: fixed;
  top: 0px;
  left: 0px;
}

.alert-attention {
  padding: 20px;
  background-color: #FFD700;
  color: white;
  display:none;
  position: fixed;
  top: 0px;
  left: 0px;
}

.alert-success {
  padding: 20px;
  background-color: #1E90FF;
  color: white;
  display: none;
}

.alert-success {
  padding: 20px;
  background-color: #04AA6D;
  color: white;
  display:none;
  position: fixed;
  top: 0px;
  left: 0px;
}

.alert-success:hover {
  color: black;
}
.alert-attention:hover {
  color: black;
}
.alert:hover {
  color: black;
}

 @media(min-width:320px) and (max-width:900px) {
  .alert-error {
    width: 90%;
}
 }

 @media(min-width:320px) and (max-width:900px) {
  .alert-attention {
    width: 90%;
}
 }
@media(min-width:320px) and (max-width:900px) {
   .alert-success{
    width: 90%;
}
}