/* =========================================================
FLOATING BUTTONS - FINAL VERSION (RJ STUDIO THEME)
========================================================= */

/* ================= RESET ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ================= COMMON BUTTON STYLE ================= */

.floating-arrow,
.floating-call,
.floating-whatsapp{

position:fixed;
width:52px;
height:52px;
border-radius:50%;

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

cursor:pointer;
z-index:2000;

transition:all .3s ease;

}

/* =========================================================
RIGHT SIDE - SCROLL ARROW
========================================================= */

.floating-arrow{

bottom:25px;
right:20px;

background: linear-gradient(135deg, #6C63FF, #E91E63);
color:#fff;

font-size:22px;
font-weight:bold;

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

}

/* =========================================================
LEFT SIDE - PHONE BUTTON
========================================================= */

.floating-call{

bottom:25px;
left:20px;

background: linear-gradient(135deg, #6C63FF, #E91E63);

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

}

/* PHONE ICON */

.call-icon{
width:22px;
height:22px;
fill:#fff;
}

/* =========================================================
LEFT SIDE - WHATSAPP BUTTON
========================================================= */

.floating-whatsapp{

bottom:90px;
left:20px;

background:#25D366;

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

}

/* WHATSAPP ICON FIX */

.wa-icon{
width:26px;
height:26px;
}

/* =========================================================
HOVER EFFECT (PREMIUM FEEL)
========================================================= */

.floating-arrow:hover,
.floating-call:hover,
.floating-whatsapp:hover{

transform:translateY(-5px) scale(1.08);
box-shadow:0 10px 25px rgba(0,0,0,0.25);

}

/* =========================================================
SOFT GLOW (BRAND EFFECT)
========================================================= */

.floating-arrow::before,
.floating-call::before{

content:"";
position:absolute;
width:100%;
height:100%;
border-radius:50%;

background: linear-gradient(135deg, #6C63FF, #E91E63);

filter:blur(8px);
opacity:0.5;
z-index:-1;

}

/* =========================================================
FLOAT ANIMATION
========================================================= */

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(6px);
}

100%{
transform:translateY(0);
}

}

/* =========================================================
MOBILE OPTIMIZATION
========================================================= */

@media(max-width:768px){

.floating-arrow,
.floating-call,
.floating-whatsapp{

width:48px;
height:48px;

}

.floating-arrow{
right:15px;
bottom:20px;
}

.floating-call{
left:15px;
bottom:20px;
}

.floating-whatsapp{
left:15px;
bottom:80px;
}

}