/* Change social media icon colors to brown theme #6B3E26 */

/* Apply brown color filter to navigation social icons */
.nav-social-icon img,
.footer-social-icon img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(27%) saturate(1351%) hue-rotate(352deg) brightness(91%) contrast(85%);
    transition: filter 0.3s ease;
}

/* Maintain hover scale effect while keeping brown color */
.nav-social-icon:hover img,
.footer-social-icon:hover img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(27%) saturate(1351%) hue-rotate(352deg) brightness(91%) contrast(85%);
}

/* Apply brown color filter to user icon and cart icon in navigation */
.nav-top-icon .icon-block img,
.cart-button .icon-block img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(27%) saturate(1351%) hue-rotate(352deg) brightness(91%) contrast(85%);
    transition: filter 0.3s ease;
}

/* Maintain hover scale effect for user and cart icons */
.nav-top-icon .icon-block:hover img,
.cart-button:hover .icon-block img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(27%) saturate(1351%) hue-rotate(352deg) brightness(91%) contrast(85%);
}

/* Alternative: If you prefer a simpler approach using direct color replacement */
/* Uncomment the following if the filter approach doesn't work perfectly */
/*
.nav-social-icon img,
.footer-social-icon img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(18%) saturate(1757%) hue-rotate(347deg) brightness(95%) contrast(89%);
}
*/