.elementor-4389 .elementor-element.elementor-element-c7c3021{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4389 .elementor-element.elementor-element-e5786e8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4389 .elementor-element.elementor-element-545cece{width:100%;max-width:100%;}.elementor-4389 .elementor-element.elementor-element-c039693{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4389 .elementor-element.elementor-element-caa8d18 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4389 .elementor-element.elementor-element-1a36bf6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:40px;--padding-bottom:0px;--padding-left:15px;--padding-right:0px;}.elementor-4389 .elementor-element.elementor-element-66a6b0b > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-4389 .elementor-element.elementor-element-66a6b0b{text-align:center;}.elementor-4389 .elementor-element.elementor-element-66a6b0b .elementor-heading-title{font-style:normal;color:#000000;}.elementor-4389 .elementor-element.elementor-element-4ff2b42{width:100%;max-width:100%;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-4389 .elementor-element.elementor-element-4ff2b42.elementor-wc-products  ul.products{grid-column-gap:58px;grid-row-gap:21px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 a > img{border-style:none;border-radius:0px 0px 0px 0px;margin-bottom:0px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 .woocommerce .woocommerce-loop-category__title{color:#030303;font-family:"Poppins", Sans-serif;font-size:10px;text-transform:uppercase;line-height:0.1em;letter-spacing:-0.1px;word-spacing:2px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 .woocommerce-loop-category__title .count{color:#FFFFFF00;font-family:"Poppins", Sans-serif;font-size:1px;font-weight:100;text-transform:lowercase;line-height:0px;letter-spacing:0px;word-spacing:0px;}.elementor-4389 .elementor-element.elementor-element-3bf46cc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:62px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4389 .elementor-element.elementor-element-3bf46cc > .elementor-shape-top .elementor-shape-fill, .elementor-4389 .elementor-element.elementor-element-3bf46cc > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#FFFFFF;}.elementor-4389 .elementor-element.elementor-element-058de98{width:100%;max-width:100%;}.elementor-4389 .elementor-element.elementor-element-058de98 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:10px 10px 10px 10px;}.elementor-4389 .elementor-element.elementor-element-058de98.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:48px;}.elementor-4389 .elementor-element.elementor-element-058de98.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-4389 .elementor-element.elementor-element-ef16613{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:112px;--padding-bottom:106px;--padding-left:0px;--padding-right:0px;}.elementor-4389 .elementor-element.elementor-element-c61b1e9 > .elementor-widget-container{padding:19px 19px 19px 19px;}.elementor-4389 .elementor-element.elementor-element-c84c6ec{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4389 .elementor-element.elementor-element-db340a3{width:100%;max-width:100%;}.elementor-4389 .elementor-element.elementor-element-3c7ebfe7{--display:flex;--min-height:45px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4389 .elementor-element.elementor-element-3c7ebfe7:not(.elementor-motion-effects-element-type-background), .elementor-4389 .elementor-element.elementor-element-3c7ebfe7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-4389 .elementor-element.elementor-element-7ad07234{text-align:center;}.elementor-4389 .elementor-element.elementor-element-7ad07234 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;color:#C8D5DC;}:root{--page-title-display:none;}body.elementor-page-4389{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-4389 .elementor-element.elementor-element-3bf46cc{--content-width:1174px;}.elementor-4389 .elementor-element.elementor-element-ef16613{--content-width:1107px;}.elementor-4389 .elementor-element.elementor-element-3c7ebfe7{--content-width:1790px;}}@media(max-width:1024px){.elementor-4389 .elementor-element.elementor-element-4ff2b42 .woocommerce .woocommerce-loop-category__title{line-height:1.1em;letter-spacing:0px;word-spacing:0px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 .woocommerce-loop-category__title .count{font-size:0px;line-height:0px;letter-spacing:0px;word-spacing:0px;}.elementor-4389 .elementor-element.elementor-element-058de98.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4389 .elementor-element.elementor-element-7ad07234 .elementor-heading-title{font-size:14px;}}@media(max-width:767px){.elementor-4389 .elementor-element.elementor-element-4ff2b42{width:var( --container-widget-width, 343px );max-width:343px;--container-widget-width:343px;--container-widget-flex-grow:0;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 > .elementor-widget-container{margin:0px 13px 0px 17px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 a > img{border-radius:0px 0px 0px 0px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 .woocommerce .woocommerce-loop-category__title{font-size:7px;line-height:1.1em;letter-spacing:0px;word-spacing:0px;}.elementor-4389 .elementor-element.elementor-element-4ff2b42 .woocommerce-loop-category__title .count{font-size:0px;line-height:0px;letter-spacing:0px;word-spacing:0px;}.elementor-4389 .elementor-element.elementor-element-058de98.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for heading, class: .elementor-element-7ad07234 */<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<div class="floating-contact">

    <div class="menu" id="menu">

        <a href="https://wa.me/8801402391371" target="_blank" class="btn whatsapp">
            <i class="fa-brands fa-whatsapp"></i>
        </a>

        <a href="tel:+8801402391371" class="btn call">
            <i class="fa-solid fa-phone"></i>
        </a>

    </div>

    <div class="main-btn" onclick="toggleMenu()" id="mainBtn">
        <i class="fa-solid fa-comment"></i>
    </div>

</div>


<style>

.floating-contact{
position:fixed;
right:25px;
bottom:25px;
z-index:999;
display:flex;
flex-direction:column;
align-items:center;
}

/* MAIN BUTTON */

.main-btn{
width:60px;
height:60px;
background:black;
color:red;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
cursor:pointer;
box-shadow:0 6px 15px rgba(0,0,0,0.3);
transition:0.6s ease;
}

.main-btn.active{
transform:rotate(45deg);
}

/* MENU */

.menu{
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:10px;
}

/* ICON STYLE */

.btn{
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:white;
box-shadow:0 5px 12px rgba(0,0,0,0.3);

/* hidden state */

opacity:0;
transform:translateY(60px) scale(0.7);
pointer-events:none;

transition:all 0.8s cubic-bezier(.25,.8,.25,1);
}

/* SHOW STATE */

.menu.show .btn{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}

/* DELAY FOR SMOOTH OPEN */

.menu.show .btn:nth-child(1){
transition-delay:0.2s;
}

.menu.show .btn:nth-child(2){
transition-delay:0.4s;
}

.whatsapp{
background:#25D366;
}

.call{
background:red;
}

.btn:hover{
transform:scale(1.1);
}

</style>


<script>

function toggleMenu(){

let menu=document.getElementById("menu")
let main=document.getElementById("mainBtn")

menu.classList.toggle("show")
main.classList.toggle("active")

}

</script>/* End custom CSS */