/* =========================================
   WhatsApp Floating Button
========================================= */

a {
  text-decoration: none;
}

.floating_btn {
  position: fixed;

  right: 20px;
  bottom: 20px;

  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999;

  /* Very important: don't allow this element
     to contribute to horizontal overflow */
  max-width: 60px;
  box-sizing: border-box;
}


/* =========================================
   WhatsApp Icon
========================================= */

.contact_icon {
  background-color: #42db87;
  color: #fff;

  width: 60px;
  height: 60px;

  max-width: 60px;
  max-height: 60px;

  font-size: 30px;

  border-radius: 50%;

  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  font-weight: normal;
  font-family: sans-serif;

  text-decoration: none !important;

  transition: all 300ms ease-in-out;

  /* Keep the pulse smaller */
  box-shadow: 0 0 0 0 rgba(66, 219, 135, 0.7);

  animation: whatsapp-pulse 1.5s infinite;
}


/* =========================================
   Pulse Animation
========================================= */

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(66, 219, 135, 0.7);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(66, 219, 135, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(66, 219, 135, 0);
  }
}


/* =========================================
   Optional Text
========================================= */

.text_icon {
  display: none;
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767.98px) {

  .floating_btn {
    right: 15px;
    bottom: 15px;

    width: 56px;
    height: 56px;

    max-width: 56px;
  }

  .contact_icon {
    width: 56px;
    height: 56px;

    max-width: 56px;
    max-height: 56px;

    font-size: 28px;
  }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 380px) {

  .floating_btn {
    right: 12px;
    bottom: 12px;

    width: 52px;
    height: 52px;

    max-width: 52px;
  }

  .contact_icon {
    width: 52px;
    height: 52px;

    max-width: 52px;
    max-height: 52px;

    font-size: 26px;
  }

}