/* --- CLEAN SOCIAL ICONS (Replaced Weebly Font with FontAwesome) --- */

/* 1. Import FontAwesome from a public CDN (Fast & Free) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* 2. Base Settings for the icons */
.wsite-social-item {
    display: inline-block;
    margin: 0 4px; /* Spacing between icons */
    text-decoration: none !important;
    border: none;
    vertical-align: middle;
}

/* This targets the icon itself */
.wsite-social-item:before {
    font-family: 'FontAwesome' !important; /* Forces the use of the new font */
    font-size: 26px; /* Adjust size of icons here */
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    color: #8d8d8d; /* Default Gray Color (Matches your site) */
    transition: color 0.3s ease;
    cursor: pointer;
}

/* 3. Facebook Icon Mapping */
.wsite-social-facebook:before {
    content: "\f082"; /* FontAwesome Code for Facebook Square */
}
.wsite-social-facebook:hover:before {
    color: #3b5998; /* Official Facebook Blue */
}

/* 4. Instagram Icon Mapping */
.wsite-social-instagram:before {
    content: "\f16d"; /* FontAwesome Code for Instagram */
}
.wsite-social-instagram:hover:before {
    color: #E1306C; /* Official Instagram Pink/Purple */
}

/* 5. Mail Icon Mapping */
.wsite-social-mail:before {
    content: "\f0e0"; /* FontAwesome Code for Envelope */
}
.wsite-social-mail:hover:before {
    color: #248d6c; /* Your Brand Green */
}

/* 6. Clean up Weebly specific inner-spans */
.wsite-social-item-inner {
    display: none;
}