.popup-template {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: 250px;
  max-width: 600px;
  height: 600px;
  border-radius: 40px;
  background-color: #badebd;
  background-image: url("./Pop up FINAL-ai.png");
  background-position: top left;
  background-size: contain;
  background-repeat: no-repeat;
}
.popup-template.show {
  display: block;
}
@media screen and (max-width: 768px) {
  .popup-template {
    max-width: 350px;
    height: auto;
    min-height: 470px;
  }
}

body.overlay::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(158, 158, 158, 0.3019607843);
  z-index: 100;
}

.popup-inner--top {
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup-inner--top::before {
  content: "";
  display: block;
  width: 112px;
  height: 112px;
  position: absolute;
  z-index: 5;
  right: 30px;
  bottom: -40px;
  background-image: url(./Organic_\ natural.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .popup-inner--top::before {
    width: 65px;
    height: 65px;
    bottom: -21px;
  }
}
.popup-inner--top::after {
  content: "";
  display: block;
  background-image: url(./Zeka.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 56px;
  height: 175px;
  position: absolute;
  z-index: 3;
  right: 50px;
  bottom: 19px;
}
@media screen and (max-width: 768px) {
  .popup-inner--top::after {
    width: 35px;
    height: 100px;
  }
}
.popup-inner--bottom {
  display: block;
  position: relative;
  color: #000000;
  text-align: center;
}
.popup-inner--bottom h3 {
  font-size: calc(20px + 18 * (100vw - 300px) / 2000);
  font-weight: 500;
  margin-top: 60px;
}
.popup-inner--bottom p {
  font-size: calc(10px + 8 * (100vw - 300px) / 2000);
}
.popup-inner--bottom::before {
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  bottom: 50%;
  width: 120px;
  height: 100px;
  background-image: url(./popup-leaf_left.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .popup-inner--bottom::before {
    top: -45px;
  }
}
.popup-inner--bottom::after {
  content: "";
  display: block;
  position: absolute;
  right: 3px;
  bottom: 10px;
  width: 177px;
  height: 70px;
  background-image: url(./popup-leaf_right.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .popup-inner--bottom::after {
    display: none;
  }
}

.envelope {
  width: 100%;
  max-width: 164px;
}
@media screen and (max-width: 768px) {
  .envelope {
    max-width: 75px;
  }
}

.popup-logo {
  width: 100%;
  max-width: 164px;
  padding-top: 20px;
}
@media screen and (max-width: 768px) {
  .popup-logo {
    max-width: 80px;
  }
}

.newsletter-input {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 460px;
  height: 42px;
  border-radius: 20px;
  border: 1px solid #9e9e9e;
  text-align: center;
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .newsletter-input {
    max-width: 270px;
  }
}

.newsletter-btn {
  font-size: 20px;
  margin: 15px 0;
  color: #565656;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #9e9e9e;
  padding: 10px 30px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.32);
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.32);
  transition: transform 0.2s;
}
.newsletter-btn:hover {
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.32);
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.32);
  transform: scale(1.1);
}

.email-validation {
  display: block;
  color: red;
  height: 16px;
}

.close-popup {
  border: none;
  background-color: transparent;
  width: 40px;
  height: 40px;
  z-index: 1000;
  position: absolute;
  right: -9px;
  top: -5px;
  cursor: pointer;
}
.close-popup img {
  width: 100%;
}

/*# sourceMappingURL=newsletter-popup.css.map */