/*whatsapp chat icon*/

.whatsapp-icon {
    margin-top: 3px;
    font-size: 37px !important;
    color: white
  }
  /*whatsapp chat icon*/
   @keyframes pulse {
       0% {
           transform: scale(1, 1);
      }
       50% {
           opacity: 0.3;
      }
       100% {
           transform: scale(1.45);
           opacity: 0;
      }
  }
   .pulse {
       -webkit-animation-name: pulse;
       animation-name: pulse;
  }
   .wa-container {
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
       align-content: flex-end;
       width: auto;
       height: auto;
       position: fixed;
       z-index: 8;
     bottom: 40px;
     right: 4px;
       padding: 5px;
       margin: 0px;
  }
  .wa-container i{
    font-size: 20px;
    color: white;
  }
   @media (max-width: 360px) {
       .wa-container {
           width: 320px;
      }
  }
  .wa-container .whatsapp-button {
       display: flex;
       justify-content: center;
       align-content: center;
       width: 60px;
       height: 60px;
       z-index: 8;
       transition: 0.3s;
       margin: 10px;
       padding: 7px;
       border: none;
       outline: none;
       cursor: pointer;
       border-radius: 50%;
     bottom: 52px;
     right: 5px;
     background-color:#25d366;
  
  }
  .wa-container .circle-anime {
       display: flex;
       position: absolute;
       justify-content: center;
       align-content: center;
       width: 60px;
       height: 60px;
       top: 15px;
       right: 15px;
       border-radius: 50%;
       transition: 0.3s;
       background-color: #77bb4a;
       animation: pulse 1.2s 4s infinite;
  }
  .wa-container .popup-whatsapp {
     display: none;
     position: absolute;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     width: auto;
     height: auto;
     padding: 30px 10px 10px 10px;
     bottom: 85px;
     right: 6px;
     transition: 0.5s;
     border-radius: 10px;
     background-color: #fff;
     -webkit-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
     -moz-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
     box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
     animation: slideInRight 0.6s 0s both;
 }
  .wa-container .popup-whatsapp > div {
       margin: 5px;
  }
   @media (max-width: 680px) {
    .wa-container .popup-whatsapp p {
           font-size: 0.9em;
      }
  }
  .wa-container .popup-whatsapp > .content-whatsapp.-top {
       display: flex;
       flex-direction: column;
  }
  .wa-container .popup-whatsapp > .content-whatsapp.-top p {
       color: #585858;
       font-weight: 400;
       font-size: 1.1em;
  }
  .wa-container .popup-whatsapp > .content-whatsapp.-bottom {
       display: flex;
       flex-direction: row;
  }
  .wa-container .closePopup {
     /* display: flex; */
     /* justify-content: center; */
     /* align-items: center; */
     width: 28px;
     height: 28px;
     margin: 0px 0px 15px 0px;
     border-radius: 50%;
     border: none;
     outline: none;
     cursor: pointer;
     background-color: #f76060;
     -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
     -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
     box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
     float: right;
     position: absolute;
     right: 5px;
     top: 5px;
 }
  .wa-container .closePopup:hover {
       background-color: #f71d1d;
       transition: 0.3s;
  }
  .wa-container .send-msPopup {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background-color: #25d366;
       margin: 0px 0px 0px 5px;
       border: none;
       outline: none;
       cursor: pointer;
       -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
       -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
       box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
  }
  .wa-container .send-msPopup:hover {
       background-color: #07f85f;
       transition: 0.3s;
  }
  .wa-container .is-active-whatsapp-popup {
       display: flex;
       animation: slideInRight 0.6s 0s both;
  }
  .wa-container input.whats-input[type=text] {
       width: 250px;
       height: 40px;
       box-sizing: border-box;
       border: 0px solid #fff;
       border-radius: 20px;
       font-size: 1em;
       background-color: #fff;
       padding: 0px 0px 0px 10px;
       -webkit-transition: width 0.3s ease-in-out;
       transition: width 0.3s ease-in-out;
       outline: none;
       transition: 0.3s;
  }
   @media (max-width: 420px) {
    .wa-container input.whats-input[type=text] {
           width: 225px;
      }
  }
  .wa-container input.whats-input {
      /* Most modern browsers support this now. */
  }
  .wa-container input.whats-input::placeholder {
       color: rgba(68, 68, 68, 0.705);
       opacity: 1;
  }
  .wa-container input.whats-input[type=text]:focus {
       background-color: #f8f8f8;
       -webkit-transition: width 0.3s ease-in-out;
       transition: width 0.3s ease-in-out;
       transition: 0.3s;
  }
  .wa-container .icon-whatsapp-small {
       width: 24px;
       height: 24px;
  }
  .wa-container .icon-whatsapp {
       width: 45px;
       height: 45px;
  }
  .wa-container .icon-font-color {
       color: #fff;
  }
  .wa-container .icon-font-color--black {
       color: #333;
  }