.wa-icon {

    position: fixed;

    display: flex;

    z-index: 98;

    bottom: 120px;

    left: 30px;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    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: 40px;

    left: 30px;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background-color: #01B1DA; !important;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}



.phone-container svg {

    fill: #fff;

    width: 27px;

    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: rgba(227 181 118) !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 rgba(227 181 118);

    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(227 181 118);

    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;

}











.btn-special {

    background: linear-gradient(to bottom, #e3b576 0, #ddb54a 100%);

    color: #fff !important;

    text-align: center;

    padding: 25px 0px !important;

    border-radius: 7px;

    font-weight: 600;

    position: relative;

    overflow: hidden;

}



.btn-success2 {

    background: linear-gradient(to bottom, #3fd720 0, #156920 100%);

    color: #fff !important;

    text-align: center;

    padding: 25px 0px !important;

    border-radius: 7px;

    font-weight: 600;

    position: relative;

    overflow: hidden;

}



.btn-light2 {

    background: linear-gradient(to bottom, #e3e3e3 0, #9d9e9f 100%);

    color: #fff !important;

    text-align: center;

    padding: 25px 0px !important;

    border-radius: 7px;

    font-weight: 600;

    position: relative;

    overflow: hidden;

}



.btn-dark2 {

    background: linear-gradient(to bottom, #333, black);

    color: #fff !important;

    text-align: center;

    padding: 25px 0px !important;

    border-radius: 7px;

    font-weight: 600;

    position: relative;

    overflow: hidden;



}



.lang-a ::after {

    content: "\f107";

    right: -4px;

    color: var(--tp-grey-2);

}

@media screen and (max-width: 576px) {

  .logo-area{

    margin-left: -100px;

  }

  .side-menu-icon{

    margin-left:9rem;

  }

}