.elementor-6428 .elementor-element.elementor-element-5c4236fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6428 .elementor-element.elementor-element-7de94546 .e-contact-buttons{--e-contact-buttons-contact-button-icon:#FFFFFF;--e-contact-buttons-contact-button-bg:var( --e-global-color-primary );--e-contact-buttons-contact-gap:10px;--e-contact-buttons-contact-padding-block-end:12px;--e-contact-buttons-contact-padding-block-start:12px;--e-contact-buttons-contact-padding-inline-end:12px;--e-contact-buttons-contact-padding-inline-start:12px;}.elementor-6428 .elementor-element.elementor-element-7de94546 .e-contact-buttons__contact-icon-link{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;}/* Start custom CSS for contact-buttons-var-10, class: .elementor-element-7de94546 *//* --- Global settings for custom icons --- */

/* 1. Hide the original SVG globe icon provided by the Elementor widget. */
.e-contact-buttons__contact-icon-container svg {
    display: none !important;
    /* Using !important to ensure override of inline or default styles. */
    /* Alternatively, if display:none causes layout issues, use: opacity: 0; */
}

/* 2. Prepare the icon container to display our custom background image. */
.e-contact-buttons__contact-icon-container {
    /* Set an appropriate size for your new icon. Adjust as needed. */
    width: 25px;
    height: 25px;
    display: inline-block; /* Essential for width/height to apply */
    
    /* Background image properties */
    background-size: contain;    /* Scales the image to fit without cropping */
    background-repeat: no-repeat; /* Ensures the image doesn't tile */
    background-position: center; /* Centers the image within its container */
}

/* --- Specific custom icon definitions based on URL --- */
/* IMPORTANT: Replace 'YOUR_IMAGE_URL_HERE.svg' with the actual URLs of your custom icons. */
/* You can upload your icons to your WordPress Media Library and use their generated URLs. */


/* Target Facebook button by its URL. */
/* Make sure the href contains "facebook.com". */
a[href*="facebook.com"] .e-contact-buttons__contact-icon-container {
    background-image: url('https://www.e-skytech.com/wp-content/uploads/2025/11/facebook-svgrepo-com.svg');
}

/* Target YouTube button by its URL. */
/* Make sure the href contains "youtube.com". */
a[href*="youtube.com"] .e-contact-buttons__contact-icon-container {
    background-image: url('https://www.e-skytech.com/wp-content/uploads/2025/11/youtube-round-svgrepo-com.svg');
}

/* Target X (formerly Twitter) button by its URL. */
/* Make sure the href contains "x.com". */
a[href*="x.com"] .e-contact-buttons__contact-icon-container {
    background-image: url('https://www.e-skytech.com/wp-content/uploads/2025/11/x-social-media-white-round-icon-1.svg');
}

/* Target LinkedIn button by its URL. */
/* Make sure the href contains "linkedin.com". */
a[href*="linkedin.com"] .e-contact-buttons__contact-icon-container {
    background-image: url('https://www.e-skytech.com/wp-content/uploads/2025/11/linkedin-round-svgrepo-com.svg');
}


.e-contact-buttons__contact-links a:nth-child(4) .e-contact-buttons__contact-icon-container {
    background-image: url('https://www.e-skytech.com/wp-content/uploads/2025/11/instagram-round-svgrepo-com.svg');
}/* End custom CSS */