.floating-social-icons {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 12px;
background: #203c69;
padding: 8px 8px;
border-radius: 10px 0 0 10px;
box-shadow: -2px 2px 8px rgba(0,0,0,0.2);
z-index: 9999; /* increased from 999 to 9999 */
}

.floating-social-icons a {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #203c69;
text-decoration: none;
width: 45px; /* slightly bigger for better tap area */
height: 45px;
border-radius: 50%;
font-size: 20px;
transition: all 0.3s ease;
}

.floating-social-icons a:hover {
/* background: #bdc3c7;*/
color: #f00;
transform: translateX(-8px); /* reduced slide distance for smoother effect */
}

@media (max-width: 768px) {
  .floating-social-icons {
    position: fixed;
    bottom: 70px;
    right: -50px; /* partially hide (shows ~10px as visible edge) */
    top: auto;
    transform: none;
    padding: 8px 5px 8px 10px;
    transition: right 0.3s ease;
    gap: 0px;
  }

  .floating-social-icons.show {
    right: 10px; /* slides into full view */
  }
  .floating-social-icons a {
  margin-bottom: 12px;
}

.floating-social-icons a:last-child {
  margin-bottom: 0;
}
}