/* Social Media Logo Styling */

/* Style for social media logo images */
.social-logo {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
    /* Removed the filter that was causing white boxes */
}

/* Hover effects for social media logos */
.social-icon:hover .social-logo {
    transform: scale(1.1) !important;
    opacity: 0.8 !important;
}

/* Adjust sidebar social media logo styling */
.sidenav-social .social-logo {
    width: 26px !important;
    height: 26px !important;
}

/* Adjust footer social media logo styling */
.footer-social .social-logo {
    width: 30px !important;
    height: 30px !important;
}

/* Update social icon container to be simple and sleek */
.social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    transition: transform 0.3s ease !important;
    background: transparent !important; /* Remove background */
}

.social-icon:hover {
    transform: translateY(-2px) !important;
}

/* Sidebar specific styling */
.sidenav-social .social-icon {
    padding: 5px !important;
}

/* Footer specific styling */
.footer-social .social-icon {
    padding: 6px !important;
}

/* Remove any text labels styling that's no longer needed */
.social-label, .sidenav-social-label {
    display: none !important;
}

/* Adjust grid layout for better spacing */
.sidenav-social {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.footer-social {
    display: flex !important;
    gap: 18px !important;
    align-items: center !important;
    margin-top: 12px !important;
}

/* Make sure social items don't have extra spacing for removed labels */
.sidenav-social-item, .social-item {
    gap: 0 !important;
    line-height: 0 !important; /* Fix vertical spacing */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .social-logo {
        width: 26px !important;
        height: 26px !important;
    }
    
    .sidenav-social .social-logo {
        width: 22px !important;
        height: 22px !important;
    }
    
    .footer-social .social-logo {
        width: 28px !important;
        height: 28px !important;
    }
}