.rs-social-menu ul {
padding: 0;
margin: 0;
display: flex;
}
.rs-social-menu ul li {
list-style: none;
margin: 0 5px;
}
.rs-social-menu ul li i {
font-size: 16px;
line-height: 40px;
transition: all 0.3s ease 0s;
color: #000;
}
.rs-social-menu ul li i:hover {
color: #fff;
}
.rs-social-menu ul li a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
text-align: center;
transition: all 0.3s ease 0s;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}
.rs-social-menu ul li a svg {
width: 18px;
height: 18px;
}
.rs-social-menu ul li a svg path {
transition: all 0.3s ease 0s;
}
.rs-social-menu ul li a:hover {
transform: translate(0, -10%);
border-color: #F55B1F;
background: #F55B1F;
}
.rs-social-menu.style2 ul li a {
border: 1px solid #737373;
background-color: transparent;
height: auto;
width: auto;
font-size: 20px;
border-radius: 10px;
padding: 14px 34px 14px;
margin: 0 0 10px;
display: inline-flex;
align-items: center;
border-radius: 100px;
transition: all 0.3s ease 0s;
}
.rs-social-menu.style2 ul li a .social-icon-warap {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ffffff;
margin-right: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease 0s;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
}
.rs-social-menu.style2 ul li a .social-hover-text {
display: inline-block;
font-size: 16px;
color: #ffffff;
line-height: 40px;
position: relative;
padding-left: 0;
transition: all 0.3s ease 0s;
}
.rs-social-menu.style2 ul li a:hover {
transform: translate(0, 0%);
}
.rs-social-menu.style2 ul li a:hover .social-icon-warap {
opacity: 1;
visibility: visible;
}
.rs-social-menu.style2 ul li a:hover .social-hover-text {
padding-left: 35px;
}