.check-area-message {
  background: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;  
padding:14px 20px 14px 20px;
  font-weight:400;
  font-size:14px!important;
  border-radius:18px;
  /* position:absolute;
  top:15%;
  z-index: 1200;
  right:34%; */
  width:325px;
  margin-bottom:20px;
}

.check-area-message-content {
    display:flex;
  flex-direction: row;
  gap:12px;

}
@media (max-width:404px) {
      .service-locator-card {
        height: auto !important;
        min-height: 380px;
    }
}
@media (max-width:320px) {
      .service-locator-card {
        height: auto !important;
        min-height: 420px;
    }
}


@media (max-width: 380px) {
    .service-locator-card {
        height: auto !important;
        min-height: 429px;
    }
          .check-area-message-content  {
flex-direction: column;    }

}
.check-area-message-deep-content span {
  font-weight:500;
  color: #ff6600;
}
.check-area-message-deep-content {
      display:flex;
  flex-direction: column;
  justify-content: center;

}
/* --- Bounce Animation for Zip Code Messages --- */

/* First, define the keyframes for the "bounce-in" animation */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* This is the class your JavaScript adds to show the message.
   We will attach the animation to it. */
.show-check-area-message {
  display: block; /* This makes the element visible */
  animation: bounce-in 0.4s ease-out forwards; /* This applies the bounce animation */
}

/* This class simply hides the message when it's not active */
.hide-check-area-message {
  display: none;
}
/* reset input */
.form__field:required, .form__field:invalid {
  box-shadow: none;
}

/* demo *//*# sourceMappingURL=service-area.css.map */

/* CSS */
.button-59 {
  align-items: center;
  background-color: #fff;
  border: 2px solid var(--light-grey);
  box-sizing: border-box;
  color: var(--medium-grey);
  cursor: pointer;
  display: inline-flex;
  fill: var(--medium-grey);
  font-family: Inter,sans-serif;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  justify-content: center;
  letter-spacing: -.8px;
  line-height: 24px;
  min-width: 140px;
  outline: 0;
  padding: 0 17px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  }

.button-59:focus {
  color: var(--primary-color);
}

.button-59:hover,.button-59.estimate-button-bg:hover,.button-59.footer-button-bg:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  fill: var(--primary-color);
}
.button-59.footer-button-bg {
  background-color: #2d374498;
  margin-top: 20px;
  margin-bottom: 14px;
  width: fit-content;
  color: #ffffff;
  fill: #ffffff;
  }
.button-59:active,.button-59.estimate-button-bg:active,.button-59.footer-button-bg:active {
  border-color: var(--primary-color);
  color: var(--primary-color);
  fill: var(--primary-color);
}
.button-59.estimate-button-bg {
  background-color: rgba(47, 47, 47, 0.7);
  margin-top: 20px;
  margin-bottom: 14px;
  width: fit-content;
  color: #ffffff;
  fill: #ffffff;
  }
@media (min-width: 768px) {
  .button-59 {
    min-width: 170px;
  }
}