body {
font-family: 'Cairo', sans-serif;
}
.sbuttons {
position: fixed;
bottom: 10%;
left: 0;
margin: 1em;
z-index: 9999;
direction: rtl;
}
.sbutton {
width: 50px;
height: 50px;
border-radius: 50%;
display: block;
text-align: center;
color: white;
margin: 15px auto 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
opacity: 0;
transform: scale(0.7);
}
.sbutton > i {
font-size: 22px;
line-height: 50px;
}
.sbuttons:hover .sbutton:not(.mainsbutton) {
opacity: 1;
transform: scale(1);
}
.sbutton.mainsbutton {
background:#623290;
opacity: 1;
transform: scale(1);
}
.sbutton.whatsapp { background: #25D366; }
.sbutton.fb { background: #3b5998; }
.sbutton.insta { background: #C13584; }
.sbutton.twitter { background: #1DA1F2; }
.sbutton.linkedin { background: #0077B5; }
.sbutton.youtube { background: #FF0000; }
.sbutton.tiktok { background: #000000; }
[tooltip]:before {
content: attr(tooltip);
position: absolute;
left: 60px;
bottom: 12px;
background-color: rgba(0, 0, 0, 0.75);
padding: 6px 10px;
color: white;
font-size: 13px;
border-radius: 6px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
}
[tooltip]:hover:before {
visibility: visible;
opacity: 1;
}
