.callback {
        /* --background: #21c45d; */
        /* --background: #ffffff; */
        --icon-color: #414856;
        --shape-color-01: #b8cbee;
        --shape-color-02: #7691e8;
        --shape-color-03: #fdd053;
        --width: 65px;
        --height: 65px;
        --border-radius: var(--height);
        width: var(--width);
        height: var(--height);
        position: fixed;
        z-index: 2500;
        left: 19px;
        bottom: 70px;
        /* border-radius: var(--border-radius);
        display: flex;
        justify-content: center;
        align-items: center; */
    }

    .callback .btn {
        background: var(--background);
        width: var(--width);
        height: var(--height);
        position: relative;
        z-index: 3;
        /* border-radius: var(--border-radius); */
        box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-animation: plus-animation-reverse 0.5s ease-out forwards;
        animation: plus-animation-reverse 0.5s ease-out forwards;
    }

    .callback .btn::before,
    .callback .btn::after {
        content: "";
        display: block;
        position: absolute;
        border-radius: 4px;
        /* background: #fff; */
    }

    .callback .btn::before {
        /* width: 4px;
        height: 28px; */
        content: "";
        display: inline-block;
        width: 3.5em;
        height: 3.5em;
        /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0ibTEzLjUxMiAxNC4wNDVsMi4xNDYtMS45NjhhNCA0IDAgMCAwIDEuMDQyLTQuMzVsLS45MTctMi40NDhhMy44MyAzLjgzIDAgMCAwLTQuNzA5LTIuMzJjLTMuNDMyIDEuMDUtNi4wNyA0LjI0LTUuMjU4IDguMDI5Yy41MzQgMi40OTIgMS41NTUgNS42MiAzLjQ5MiA4Ljk0OWEzMS44IDMxLjggMCAwIDAgNi4wNTUgNy41M2MyLjg3IDIuNjEyIDYuOTcgMS45NTkgOS42MDgtLjVhMy44IDMuOCAwIDAgMCAuMzQyLTUuMTkybC0xLjY4MS0yLjA0MmE0IDQgMCAwIDAtNC4yOS0xLjI3NGwtMi43NzYuODc1cS0uMTYxLS4xNjUtLjM2Ni0uMzkyYTEyLjUgMTIuNSAwIDAgMS0xLjUwNy0yLjA1M2ExMi41IDEyLjUgMCAwIDEtMS4wMjQtMi4zMzJhMTMgMTMgMCAwIDEtLjE1Ny0uNTEyIi8+PC9zdmc+'); */
        /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTUuNTYxIDIuNTUxYS44NC44NCAwIDAgMC0xLjAzMy0uNTE0Yy0uOTczLjMtMS42NTMgMS4xMzUtMS41MDcgMi4xMDFBOC43IDguNyAwIDAgMCA0LjA5MiA3LjE4YTguOCA4LjggMCAwIDAgMi4wODMgMi40NDVjLjc1NC42MSAxLjgxMi40NDIgMi41NTgtLjI1OEEuODUuODUgMCAwIDAgOC44MSA4LjIxbC0uNTM0LS42NTNhLjg0NS44NDUgMCAwIDAtLjkxLS4yNzJsLTEuMjMyLjM5bC0uMjE1LS4yMjJhNSA1IDAgMCAxLS43MDYtLjkyOWE0LjggNC44IDAgMCAxLS40NDYtMS4wNzlsLS4wODMtLjI5NWwuOTUtLjg3NWEuODYuODYgMCAwIDAgLjIyMS0uOTM1em0tMS4zMjctMS40N2ExLjg0IDEuODQgMCAwIDEgMi4yNjQgMS4xMjFsLjI5My43ODhhMS44NiAxLjg2IDAgMCAxLS40OCAyLjAxOWwtLjQ5LjQ1MWMuMDYzLjE3NC4xNDguMzczLjI1OC41NjZjLjExLjE5LjIzOC4zNjMuMzU1LjUwNGwuNjMtLjJhMS44NDUgMS44NDUgMCAwIDEgMS45ODUuNTkzbC41MzQuNjUzYTEuODUgMS44NSAwIDAgMS0uMTY2IDIuNTJjLS45OTQuOTMzLTIuNjE3IDEuMzItMy44Ny4zMDZhOS44IDkuOCAwIDAgMS0yLjMyLTIuNzIyYTkuNyA5LjcgMCAwIDEtMS4xOTUtMy4zOTNjLS4yNC0xLjU5My45MDMtMi44MDYgMi4yMDItMy4yMDUiLz48L3N2Zz4='); */
        background-image: url('../images/icon/whatsapp.gif');
        /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTMuNjAxIDIuMzI2QTcuODUgNy44NSAwIDAgMCA3Ljk5NCAwQzMuNjI3IDAgLjA2OCAzLjU1OC4wNjQgNy45MjZjMCAxLjM5OS4zNjYgMi43NiAxLjA1NyAzLjk2NUwwIDE2bDQuMjA0LTEuMTAyYTcuOSA3LjkgMCAwIDAgMy43OS45NjVoLjAwNGM0LjM2OCAwIDcuOTI2LTMuNTU4IDcuOTMtNy45M0E3LjkgNy45IDAgMCAwIDEzLjYgMi4zMjZ6TTcuOTk0IDE0LjUyMWE2LjYgNi42IDAgMCAxLTMuMzU2LS45MmwtLjI0LS4xNDRsLTIuNDk0LjY1NGwuNjY2LTIuNDMzbC0uMTU2LS4yNTFhNi41NiA2LjU2IDAgMCAxLTEuMDA3LTMuNTA1YzAtMy42MjYgMi45NTctNi41ODQgNi41OTEtNi41ODRhNi41NiA2LjU2IDAgMCAxIDQuNjYgMS45MzFhNi41NiA2LjU2IDAgMCAxIDEuOTI4IDQuNjZjLS4wMDQgMy42MzktMi45NjEgNi41OTItNi41OTIgNi41OTJtMy42MTUtNC45MzRjLS4xOTctLjA5OS0xLjE3LS41NzgtMS4zNTMtLjY0NmMtLjE4Mi0uMDY1LS4zMTUtLjA5OS0uNDQ1LjA5OWMtLjEzMy4xOTctLjUxMy42NDYtLjYyNy43NzVjLS4xMTQuMTMzLS4yMzIuMTQ4LS40My4wNWMtLjE5Ny0uMS0uODM2LS4zMDgtMS41OTItLjk4NWMtLjU5LS41MjUtLjk4NS0xLjE3NS0xLjEwMy0xLjM3MmMtLjExNC0uMTk4LS4wMTEtLjMwNC4wODgtLjQwM2MuMDg3LS4wODguMTk3LS4yMzIuMjk2LS4zNDZjLjEtLjExNC4xMzMtLjE5OC4xOTgtLjMzYy4wNjUtLjEzNC4wMzQtLjI0OC0uMDE1LS4zNDdjLS4wNS0uMDk5LS40NDUtMS4wNzYtLjYxMi0xLjQ3Yy0uMTYtLjM4OS0uMzIzLS4zMzUtLjQ0NS0uMzRjLS4xMTQtLjAwNy0uMjQ3LS4wMDctLjM4LS4wMDdhLjczLjczIDAgMCAwLS41MjkuMjQ3Yy0uMTgyLjE5OC0uNjkxLjY3Ny0uNjkxIDEuNjU0cy43MSAxLjkxNi44MSAyLjA0OWMuMDk4LjEzMyAxLjM5NCAyLjEzMiAzLjM4MyAyLjk5MmMuNDcuMjA1Ljg0LjMyNiAxLjEyOS40MThjLjQ3NS4xNTIuOTA0LjEyOSAxLjI0Ni4wOGMuMzgtLjA1OCAxLjE3MS0uNDggMS4zMzgtLjk0M2MuMTY0LS40NjQuMTY0LS44Ni4xMTQtLjk0M2MtLjA0OS0uMDg0LS4xODItLjEzMy0uMzgtLjIzMiIvPjwvc3ZnPg=='); */
        background-size: cover;
        background-repeat: no-repeat;
        vertical-align: center;
    }

    /* .callback .btn::after {
        width: 28px;
        height: 4px;
    } */

    .callback .tooltip {
        width: 90px;
        height: 75px;
        border-radius: 6px;
        position: absolute;
        background: #ebecec;
        z-index: 2;
        padding: 0 15px;
        box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
        opacity: 0;
        top: 0;
        /* display: flex; */
        justify-content: space-around;
        align-items: center;
        transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in;
    }

    .callback .tooltip>svg {
        width: 100%;
        height: 26px;
        /* display: flex; */
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
    }

    .callback .tooltip>svg .icon {
        fill: none;
        stroke: var(--icon-color);
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.4;
        transition: opacity 0.3s ease;
    }

    .callback .tooltip>svg:hover .icon {
        opacity: 1;
    }

    .callback .tooltip::after {
        content: "";
        width: 20px;
        height: 20px;
        background: #ebecec;
        border-radius: 3px;
        position: absolute;
        left: 10%;
        margin-left: -10px;
        bottom: -8px;
        transform: rotate(45deg);
        z-index: 0;
    }

    .callback>svg {
        width: 300px;
        height: 300px;
        position: absolute;
        z-index: 1;
        transform: scale(0);
    }

    .callback>svg .shape {
        fill: none;
        stroke: none;
        stroke-width: 3px;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform-origin: 50% 20%;
    }

    .callback input {
        height: 100%;
        width: 100%;
        border-radius: var(--border-radius);
        cursor: pointer;
        position: absolute;
        z-index: 5;
        opacity: 0;
    }

    .callback input:checked~svg {
        -webkit-animation: pang-animation 1.2s ease-out forwards;
        animation: pang-animation 1.2s ease-out forwards;
    }

    .callback input:checked~svg .shape:nth-of-type(1) {
        transform: translate(25px, 30%) rotate(40deg);
    }

    .callback input:checked~svg .shape:nth-of-type(2) {
        transform: translate(-4px, 30%) rotate(80deg);
    }

    .callback input:checked~svg .shape:nth-of-type(3) {
        transform: translate(12px, 30%) rotate(120deg);
    }

    .callback input:checked~svg .shape:nth-of-type(4) {
        transform: translate(8px, 30%) rotate(160deg);
    }

    .callback input:checked~svg .shape:nth-of-type(5) {
        transform: translate(21px, 30%) rotate(200deg);
    }

    .callback input:checked~svg .shape:nth-of-type(6) {
        transform: translate(0px, 30%) rotate(240deg);
    }

    .callback input:checked~svg .shape:nth-of-type(7) {
        transform: translate(17px, 30%) rotate(280deg);
    }

    .callback input:checked~svg .shape:nth-of-type(8) {
        transform: translate(-3px, 30%) rotate(320deg);
    }

    .callback input:checked~svg .shape:nth-of-type(9) {
        transform: translate(25px, 30%) rotate(360deg);
    }

    /* .callback input:checked~.btn {
        -webkit-animation: plus-animation 0.5s ease-out forwards;
        animation: plus-animation 0.5s ease-out forwards;
    } */

    .callback input:checked~.tooltip {
        width: 16.2em;
        height: auto;
        -webkit-animation: stretch-animation 1s ease-out forwards 0.15s;
        animation: stretch-animation 1s ease-out forwards 0.15s;
        top: -74px;
        left: 35px;
        opacity: 1;
    }

    @-webkit-keyframes pang-animation {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        40% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(1.1);
            opacity: 0;
        }
    }

    @keyframes pang-animation {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        40% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(1.1);
            opacity: 0;
        }
    }

    @-webkit-keyframes plus-animation {
        0% {
            transform: rotate(0) scale(1);
        }

        20% {
            transform: rotate(60deg) scale(0.93);
        }

        55% {
            transform: rotate(35deg) scale(0.97);
        }

        80% {
            transform: rotate(48deg) scale(0.94);
        }

        100% {
            transform: rotate(45deg) scale(0.95);
        }
    }

    @keyframes plus-animation {
        0% {
            transform: rotate(0) scale(1);
        }

        20% {
            transform: rotate(60deg) scale(0.93);
        }

        55% {
            transform: rotate(35deg) scale(0.97);
        }

        80% {
            transform: rotate(48deg) scale(0.94);
        }

        100% {
            transform: rotate(45deg) scale(0.95);
        }
    }

    @-webkit-keyframes plus-animation-reverse {
        0% {
            transform: rotate(45deg) scale(0.95);
        }

        20% {
            transform: rotate(-15deg);
        }

        55% {
            transform: rotate(10deg);
        }

        80% {
            transform: rotate(-3deg);
        }

        100% {
            transform: rotate(0) scale(1);
        }
    }

    @keyframes plus-animation-reverse {
        0% {
            transform: rotate(45deg) scale(0.95);
        }

        20% {
            transform: rotate(-15deg);
        }

        55% {
            transform: rotate(10deg);
        }

        80% {
            transform: rotate(-3deg);
        }

        100% {
            transform: rotate(0) scale(1);
        }
    }

    @-webkit-keyframes stretch-animation {
        0% {
            transform: scale(1, 1);
        }

        10% {
            transform: scale(1.1, 0.9);
        }

        30% {
            transform: scale(0.9, 1.1);
        }

        50% {
            transform: scale(1.05, 0.95);
        }

        100% {
            transform: scale(1, 1);
        }
    }

    @keyframes stretch-animation {
        0% {
            transform: scale(1, 1);
        }

        10% {
            transform: scale(1.1, 0.9);
        }

        30% {
            transform: scale(0.9, 1.1);
        }

        50% {
            transform: scale(1.05, 0.95);
        }

        100% {
            transform: scale(1, 1);
        }
    }

    .socials {
        /* position: fixed; */
        display: block;
        left: 20px;
        bottom: 20px;
    }

    .socials>a {
        display: block;
        width: 30px;
        opacity: 0.2;
        transform: scale(var(--scale, 0.8));
        transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
    }

    .socials>a:hover {
        --scale: 1;
    }

    .cus-icon-call:before {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTUuNTYxIDIuNTUxYS44NC44NCAwIDAgMC0xLjAzMy0uNTE0Yy0uOTczLjMtMS42NTMgMS4xMzUtMS41MDcgMi4xMDFBOC43IDguNyAwIDAgMCA0LjA5MiA3LjE4YTguOCA4LjggMCAwIDAgMi4wODMgMi40NDVjLjc1NC42MSAxLjgxMi40NDIgMi41NTgtLjI1OEEuODUuODUgMCAwIDAgOC44MSA4LjIxbC0uNTM0LS42NTNhLjg0NS44NDUgMCAwIDAtLjkxLS4yNzJsLTEuMjMyLjM5bC0uMjE1LS4yMjJhNSA1IDAgMCAxLS43MDYtLjkyOWE0LjggNC44IDAgMCAxLS40NDYtMS4wNzlsLS4wODMtLjI5NWwuOTUtLjg3NWEuODYuODYgMCAwIDAgLjIyMS0uOTM1em0tMS4zMjctMS40N2ExLjg0IDEuODQgMCAwIDEgMi4yNjQgMS4xMjFsLjI5My43ODhhMS44NiAxLjg2IDAgMCAxLS40OCAyLjAxOWwtLjQ5LjQ1MWMuMDYzLjE3NC4xNDguMzczLjI1OC41NjZjLjExLjE5LjIzOC4zNjMuMzU1LjUwNGwuNjMtLjJhMS44NDUgMS44NDUgMCAwIDEgMS45ODUuNTkzbC41MzQuNjUzYTEuODUgMS44NSAwIDAgMS0uMTY2IDIuNTJjLS45OTQuOTMzLTIuNjE3IDEuMzItMy44Ny4zMDZhOS44IDkuOCAwIDAgMS0yLjMyLTIuNzIyYTkuNyA5LjcgMCAwIDEtMS4xOTUtMy4zOTNjLS4yNC0xLjU5My45MDMtMi44MDYgMi4yMDItMy4yMDUiLz48L3N2Zz4=');
        background-size: cover;
        background-repeat: no-repeat;
        /* vertical-align: -webkit-baseline-middle; */
    }
    .cus-icon-chat:before {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTYgN2EuNS41IDAgMCAxIC41LS41aDNhLjUuNSAwIDAgMSAwIDFoLTNBLjUuNSAwIDAgMSA2IDdtLjUgMS41YS41LjUgMCAwIDAgMCAxaDJhLjUuNSAwIDAgMCAwLTF6TTIgOGE2IDYgMCAxIDEgMi45OTYgNS4xOTVsLTIuMzM4Ljc4YS41LjUgMCAwIDEtLjYzOS0uNjEybC43MTItMi40OTFBNiA2IDAgMCAxIDIgOG02LTVhNSA1IDAgMCAwLTQuMyA3LjU1MmEuNS41IDAgMCAxIC4wNS4zOTNsLS41MDkgMS43OGwxLjY1OC0uNTUyYS41LjUgMCAwIDEgLjQyNi4wNTJBNSA1IDAgMSAwIDggMyIvPjwvc3ZnPg==');
        background-size: cover;
        background-repeat: no-repeat;
        /* vertical-align: -webkit-baseline-middle; */
    }
    .cus-icon-book:before {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImJsYWNrIiBkPSJNNiAxOS41VjUuNjE2cTAtLjY5MS40NjMtMS4xNTNUNy42MTYgNGg4Ljc2OXEuNjkgMCAxLjE1My40NjNUMTggNS42MTZWMTkuNWwtNi0yLjU3N3ptMS0xLjU1bDUtMi4xNWw1IDIuMTVWNS42MTZxMC0uMjMxLS4xOTItLjQyNFQxNi4zODQgNUg3LjYxNnEtLjIzMSAwLS40MjQuMTkyVDcgNS42MTZ6TTcgNWgxMHoiLz48L3N2Zz4=');
        background-size: cover;
        background-repeat: no-repeat;
        /* vertical-align: -webkit-baseline-middle; */
    }

    .cus-icon-x:before {
        content: "";
        display: inline-block;
        width: 28px;
        height: 28px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB9ElEQVR4nO2WS0hVURSGPzV8EpGKQYWDGgkiUk0MLLDHoEEIIVEDBw0aFTSJBAdBISEIESQIDgoNIiKIAkVwkAQNalAE0Qt6UAkVPaCBPTRjwzfYXLj3nus9d5L+cLisf69//evsux8HVrAc0Q0sZnkuFVDnvJrvQGtS0ZUc5gcS6I+a+xvYVUCzrAHeKj4ld9z4E7Auh3Yf8Af4C/SyBOxW/BNoA8qASc1vZtFsAX6Yc5oiMGyRR0AlsAH4Kpf5NmHsnWNXbXTJqAWeW2xArjdaNM1yq20u8DNAFSmgA5gHFoBOueuaTDsTU8ZPgbWkiHMWfuEsNAEf5R77G+JNpIzKaCovyu2PttgcsJ0SoQ345UrfI3dZ44fAKkqIPo3eA/Xu9zdy/aU0LnfVBqNxuS5nIRwa20plXA88i/7bHvkLxk+A6rRNq6K3/ZxxfNZGDQ2maVoGjFn4gwfHhPEtc7Z6KYT9vjMt4zOahHO4XW498EX+iNxZ41eeZkXhkItn3r0b43DU0Ga31H25kWJMd3g7hULHsuRcc/yuq77FA2XRK7JgtEQ30VCOvAZg1rwTcieNZx1PjEbgpeLbQEWe/L3R3d3qm99RfyOpaQ1wT9EDoC6hbjTH59LBfOJyOwzJr/N84mSiLpqlzOcbsLGAWiv4D/AP2vug1CxVbZcAAAAASUVORK5CYII=');
        background-size: cover;
        background-repeat: no-repeat;
        /* vertical-align: -webkit-baseline-middle; */
    }

    .callback-ul li i {
        margin-right: 15px;
        position: relative;

    }