.sticky-social{
    z-index: 9999;
  position:fixed;
  top:250px;
  right:224px;
  padding:0px;
  margin:0px;
  width:0px;
}

@media (max-width: 767px) {
  .sticky-social {
      position: fixed; /* or other positioning method */
      top: 300px;
      right: 0;
      left: 63%;
      transform: translateX(-50%);
      opacity: 0.8;
      height: 0px;
      width: auto;
  }  

  .sticky-social .social {
    list-style: none;
    margin: 0;
    font-size: 16px;
    transform: translate(152px, 50px);
}

.sticky-social .social li {
    display: block;
    margin: 5px;
    transition: transform 0.3s ease-in-out; /* Adding a transition for smooth scaling */
}

.sticky-social .social a {
    text-decoration: none;
    color: #000;
    background-color: transparent;
    border: none;
}

/* Add animation on hover */
.sticky-social .social li:hover {
    transform: scale(1.2); /* Scale the icon on hover */
}

.sticky-social .social i {
    margin-left: 10px;
    font-size: 22px;
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease-in-out; /* Adding a transition for smooth scaling */
}

.sticky-social .social a:nth-child(1) i {
    color: #1DA0F0;
}

.sticky-social .social a:nth-child(2) i {
    color: #4ECCE8;
}

.sticky-social .social a:nth-child(3) i {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #FD1D1D, #F56040, #F77737, #E1306C, #FFDC80, #FCAF45);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.sticky-social .social a:nth-child(4) i {
    color: #F80000;
}

.sticky-social .social a:nth-child(5) i {
    color: #1DA0F0;
}
}

.social{
  list-style:none;
}
.social li{
  padding:10px 10px;
  font-size:25px;
  transition:all 0.8s ease-in-out;
}
.social li:hover{
    margin-left:-30px;
 box-shadow:2px 5px 10px grey;
}
.social li:hover .fa{
    margin-right:20px;
  
}
.fa{
  color:#fff;
  transition:all 0.8s ease-in-out;
}
.fb{
  background-color:#3C5A98;
}
.twitter{
    background-color:#1EA1F2;
}
.insta{
    background-color:#DC4F42;
}
.pin{
    background-color:#CB2128;
}
.vim{
    background-color:#59BFBE;
}
 .sticky-social .social a {
    background-color: transparent;
    border: none;
    color: #000;
    margin: 5px;
    display: block;
    text-decoration: none;
  }

  .sticky-social .social {
    font-size: 16px !important;
    transform: translate(152px, 50px); 
  }

  .sticky-social .social a {
    color: #fff;
    background: rgba(0, 0, 0, 1);
    margin: 5px;
    padding: 10px;
    width: 200px;
    transition: 0.35s;
    transition-property: transform;
  }
  .sticky-social .social a:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    transform: translate(-120px, 0px); 
  }

  .sticky-social .social i {
    margin-left: 10px;
    font-size: 22px;
    width: 30px;
    height: 30px;
  }

  .sticky-social .social a:nth-child(1) i {
    color: #1DA0F0;
  }

  .sticky-social .social a:nth-child(2) i {
    color: #4ECCE8;
  }

  .sticky-social .social a:nth-child(3) i {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4,#FD1D1D,#F56040,#F77737,#E1306C,#FFDC80,#FCAF45

);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}


  .sticky-social .social a:nth-child(4) i {
    color: #F80000;
  }

  .sticky-social .social a:nth-child(5) i {
    color: #1DA0F0;
  }