.social-links .link-icon {
    width: 20px; /* Set the width of the icon */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Vertically align the icon with the text */
    margin-right: 8px; /* Add some space between the icon and the text */
    /* Optional: Add a slight filter for better contrast on dark background */
    /* filter: brightness(1.2); */
}

.social-links a {
    color: white;
    text-decoration: none;
    display: flex; /* Use flexbox for better alignment of icon and text */
    align-items: center; /* Vertically center items in the flex container (icon and text) */
    /* Corrected unit and adjusted horizontal padding */
    padding: 5px 10px; /* Adjusted horizontal padding from 50px to 10px */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
}

.social-links a:hover {
    color: #00ffff;
    transform: translateX(5px);
    /* Removed padding change on hover to prevent layout shifts */
    /* padding: 10px; */
}

/* Keep your existing styles for .social-links, h3, h4, ul, li */
/* ... (rest of your .social-links related CSS) ... */