.button-cta {
  display: inline-block;
  width: fit-content;
  padding-top: 9px;
  padding-bottom: 10.5px;
  padding-inline: 28px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  font-family: var(--opensans);
  border-radius: 20px;
  font-size: var(--fs-20);
}

.button-cta:visited {
  color: var(--color-primary);
}

.button-cta__decoration {
  position: relative;
  left: 16px;
  z-index: 2;
}

.button-cta__decoration::after {
  content: "";
  position: absolute;
  width: 27px;
  height: 27px;
  background: var(--color-secondary-alpha-300);
  border-radius: 50%;
  z-index: -1;
  right: 15px;
}

.button-cta:hover {
  box-shadow: 0 2px 8px 2px rgb(104 112 118 / 0.07),
    0 2px 4px -1px rgb(104 112 118 / 0.04);
}

.button-cta:hover i::after {
  background: #f0ab5d;
}

/* primary */

.button-primary {
  border-radius: 20px !important;
  border: 1px solid var(--color-secondary) !important;
  background: var(--color-secondary) !important;
  padding-block: 12px !important;
  padding-inline: 25px !important;
  font-size: var(--fs-16) !important;
  font-weight: 700 !important;
  font-family: var(--opensans) !important;
  color: var(--white) !important;
}

.button-primary:visited {
  color: white !important;
}

.button-primary:hover {
  background-color: transparent !important;
  color: var(--color-secondary) !important;
  border: 1px solid var(--color-secondary) !important;
}

.button-primary.radius-10 {
  border-radius: 10px !important;
}

.button-outline {
  border-radius: 20px;
  border: 1px solid var(--color-secondary);
  background: transparent;
  padding-block: 12px;
  padding-inline: 25px;
  font-size: var(--fs-16);
  font-weight: 700;
  font-family: var(--opensans);
  color: var(--color-secondary) !important;
  text-decoration: none;
  display: inline-block;
}

.button-outline:visited {
  color: var(--color-secondary);
}

/* hero-buttons */
.button-hero-home-white {
  font-size: var(--fs-18);
  background: var(--white);
  color: var(--color-primary);
}

.button-hero-home-white:hover {
  background: var(--color-primary);
  color: white;
}

.button-hero-home-blue {
  font-size: var(--fs-18);
  background: #f6d6b1;
  color: var(--color-primary);
}

.button-hero-home-blue:hover {
  background: var(--color-primary);
  color: #f6d6b1;
}

.button-hero-home-white,
.button-hero-home-blue {
  border-radius: 20px;
  padding-block: 12px;
  padding-inline: 22px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  min-width: 200px;
  text-align: center;
  font-weight: 700;
  font-family: var(--opensans);
}

/* DRY! */
.button-cta,
.button-primary,
.button-hero-home-white,
.button-hero-home-blue {
  text-decoration: none !important;
}


/* WhatsApp BTN */
a.absolute-btn {
  position: fixed;
  z-index: 999999;
  bottom: 72px;
  right: 1vw;
  animation-name: btn-animation;
  animation-duration: 3s;
  animation-delay: 6s;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

a.absolute-btn img {
  width: 70px;
}

@keyframes btn-animation {
  from {
    transform: translate(6vw);
    opacity: 0;
  }
  to {
    transform: translate(0vw);
    opacity: 100;
  }
}

@media only screen and (max-width: 768px){
  a.absolute-btn {
    right: 2vw;
    animation-delay: 3s;
  }

  a.absolute-btn img {
    width: 50px;
  }
}