/* custom_social_buttons.css */

/* Base style to override default Bootstrap button colors */
.btn-custom-social {
    background-color: transparent; /* Start with transparent to override default */
    border: 1px solid; /* Add a border for definition */
    color: #FFF; /* Default text/icon color */
}

/* WhatsApp */
.btn-whatsapp-custom {
    background-color: #E53935; /* Red from logo */
    border-color: #E53935;
    color: #FFF; /* White icon/text */
}
.btn-whatsapp-custom:hover {
    background-color: #C62828; /* Darker red on hover */
    border-color: #C62828;
}

/* YouTube */
.btn-youtube-custom {
    background-color: #E53935; /* Red from logo */
    border-color: #E53935;
    color: #FFF; /* White icon/text */
}
.btn-youtube-custom:hover {
    background-color: #C62828; /* Darker red on hover */
    border-color: #C62828;
}

/* Instagram */
.btn-instagram-custom {
    background-color: #E53935; /* Red from logo */
    border-color: #E53935;
    color: #FFF; /* White icon/text */
}
.btn-instagram-custom:hover {
    background-color: #C62828; /* Darker red on hover */
    border-color: #C62828;
}

/* Facebook */
.btn-facebook-custom {
    background-color: #E53935; /* Red from logo */
    border-color: #E53935;
    color: #FFF; /* White icon/text */
}
.btn-facebook-custom:hover {
    background-color: #C62828; /* Darker red on hover */
    border-color: #C62828;
}

/* Telegram */
.btn-telegram-custom {
    background-color: #E53935; /* Red from logo */
    border-color: #E53935;
    color: #FFF; /* White icon/text */
}
.btn-telegram-custom:hover {
    background-color: #C62828; /* Darker red on hover */
    border-color: #C62828;
}

/* For the icons specifically, if they are separate elements */
.btn-custom-social .btn-inner--icon i {
    color: #FFF; /* Ensure icon color is white */
}