.wa-icon {
  position: fixed;
  display: flex;
  z-index: 98;
  bottom: 120px;
  right: 25px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4bca5a;
}

#wa-chat-widget {
  display: none;
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 1px 15px rgb(32 33 36 / 28%);
  bottom: 180px;
  right: 25px;
  overflow: hidden;
  z-index: 99;
  animation-name: wa-chat-animation;
  animation-duration: 1s;
  /* width: 20%; */
  opacity: 100;
}

#wa-chat-widget:target {
  display: block;
}

.wa-chat-widget-header {
  display: flex;
  background: rgb(7, 94, 84);
  background: linear-gradient(90deg, rgba(7, 94, 84, 1) 0%, rgba(18, 140, 126, 1) 85%);
  color: #ffffff;
  padding: 1rem;
}

.wa-chat-widget-header img {
  max-width: 60px;
}

.wa-chat-widget-header a.close {
  position: absolute;
  top: 5px;
  right: 15px;
  color: #fff;
  font-size: 30px;
  text-decoration: none;
}

.wa-chat-widget-profile {
  padding: 0 1rem 0 1rem;
}

.wa-chat-widget-body {
  padding: 20px 20px 20px 10px;
  background-color: rgb(230, 221, 212);
}

.wa-chat-widget-body {
  padding: 20px 20px 20px 10px;
  background-color: rgb(230, 221, 212);
}

.wa-chat-widget-body .message {
  padding: 0.5rem;
  background-color: rgb(255, 255, 255);
  border-radius: 0px 8px 8px;
  box-shadow: rgb(0 0 0 / 13%) 0px 1px 0.5px;
}

.wa-chat-widget-body .message .profile-name {
  color: #787878;
}

.wa-chat-widget-body .message .wcw-message {
  margin-top: 0.5rem;
}

.wa-chat-widget-send form {
  display: flex;
  margin: 0;
  background-color: rgb(230, 221, 212);
}

.wa-chat-widget-send input {
  border: none;
  padding: 0.5rem;
  width: 100%;
  border-radius: 1rem;
}

.wa-chat-widget-send button {
  background-color: #075E54;
  padding: 0.5rem;
  border-radius: 50%;
  border: none;
  fill: #ffffff;
}

@keyframes wa-chat-animation {
  from {
    opacity: 0;
  }
}



.phone-container{
    position: fixed;
    bottom: 200px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fbd739 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.phone-container svg{
    fill: #fff;
    width: 32px;
    box-sizing: border-box;
    animation: oscillate-rotation 1.5s infinite ease-in-out;
    transform-origin: 50% 50%;
}
 .p-5 {
     padding: 0.5rem;
}
}
}
 .c-white {
     color: #fff !important;
}
 .bgc-blue {
     background-color: #fbd739 !important;
}
 .circle {
     border-radius: 50%;
}
 .phone-container:after {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     content: '';
     background-color: transparent;
     border-radius: 50%;
     border: 1px solid #fbd739;
     opacity: 0.5;
     animation: ring-circle-anim 1.2s infinite ease-in-out;
     transition: all 0.5s;
     transform-origin: 50% 50%;
}
 .phone-container:before {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     content: '';
     background-color: rgba(251, 215, 57, 0.5);
     border-radius: 50%;
     border: none;
     animation: ring-circle-fill-anim 2.3s infinite ease-in-out;
     transition: all 1s;
     transform-origin: 50% 50%;
}
 .osc-rotation {
     box-sizing: border-box;
     animation: oscillate-rotation 1.5s infinite ease-in-out;
     transform-origin: 50% 50%;
}
 .icon {
     font-family: 'Material Icons';
     font-size: 3rem;
     line-height: 1;
     text-rendering: optimizeLegibility;
}
 @keyframes ring-circle-anim {
     0% {
         transform: rotate(0) scale(1.1) skew(0deg);
         opacity: 0;
    }
     30% {
         transform: rotate(0) scale(1.5) skew(0deg);
         opacity: 0.5;
    }
     100% {
         transform: rotate(0) scale(1.7) skew(0deg);
         opacity: 0.1;
    }
}
 @keyframes ring-circle-fill-anim {
     0% {
         transform: rotate(0) scale(1) skew(0deg);
         opacity: 0.2;
    }
     50% {
         transform: rotate(0) scale(1.4) skew(0deg);
         opacity: 0.2;
    }
     100% {
         transform: rotate(0) scale(1.1) skew(0deg);
         opacity: 0.2;
    }
}
 @keyframes oscillate-rotation {
     0% {
         transform: rotate(0) scale(1) skew(0deg);
    }
     10% {
         transform: rotate(-25deg) scale(1) skew(0deg);
    }
     20% {
         transform: rotate(25deg) scale(1) skew(0deg);
    }
     30% {
         transform: rotate(-25deg) scale(1) skew(0deg);
    }
     40% {
         transform: rotate(25deg) scale(1) skew(0deg);
    }
     50% {
         transform: rotate(0) scale(1) skew(0deg);
    }
     100% {
         transform: rotate(0) scale(1) skew(0deg);
    }
}

@media screen and (max-width: 576px){
    h2{
        font-size: 2rem!important;
    }
}

.notification{
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: red;
    color: white;
}

.notification span{
    font-size: 14px;
}