/* =========================================================
FLOATING BUTTONS STYLES
Controls the appearance and animations
========================================================= */


/* ==============================
SCROLL ARROW BUTTON
============================== */

.floating-arrow{

position:fixed;
bottom:26px;
right:26px;

width:46px;
height:46px;

border-radius:50%;
background:#6C63FF;

color:#fff;
font-size:20px;
font-weight:600;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
z-index:2000;

animation:arrowFloat 1.6s ease-in-out infinite;
transition:transform .25s ease, box-shadow .25s ease;

}

/* Hover animation */
.floating-arrow:hover{

transform:translateY(-3px);
box-shadow:0 8px 24px rgba(108,99,255,0.45);

}


/* ==============================
PHONE CALL BUTTON
============================== */

.floating-call{

position:fixed;
bottom:26px;
left:26px;

width:46px;
height:46px;

border-radius:50%;
background:#6C63FF;

display:flex;
align-items:center;
justify-content:center;

text-decoration:none;
z-index:2000;

animation:arrowFloat 1.6s ease-in-out infinite;

}

/* Phone icon */
.call-icon{

width:20px;
height:20px;
fill:#fff;

}


/* ==============================
WHATSAPP BUTTON
============================== */

.floating-whatsapp{

position:fixed;
bottom:86px;
left:26px;

width:46px;
height:46px;

border-radius:50%;
background:#25D366;

display:flex;
align-items:center;
justify-content:center;

z-index:2000;

animation:waFloat 1.6s ease-in-out infinite;

}

/* WhatsApp icon */
.wa-float-icon{

width:22px;
height:22px;

}


/* ==============================
FLOATING ANIMATIONS
============================== */

@keyframes arrowFloat{

0%{transform:translateY(0);opacity:.85;}
50%{transform:translateY(8px);opacity:1;}
100%{transform:translateY(0);opacity:.85;}

}

@keyframes waFloat{

0%{transform:translateY(0);opacity:.85;}
50%{transform:translateY(8px);opacity:1;}
100%{transform:translateY(0);opacity:.85;}

}