.services-style-three .icons i {
        /* Set icon size to be very large and impactful */
        font-size: 5rem;

        /* Apply the secondary brand color for high contrast */
        color: var(--color-secondary);

        /* Ensure the icon is displayed clearly above the images/background */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* Optional: Add a subtle text shadow for depth */
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        /* Ensure a smooth transition if you add hover effects later */
        transition: all 0.3s ease;
    }

    /* Optional: Adjust the visibility/opacity of the background image 
    to let the large icon stand out more. */
    .services-style-three .icons img {
        opacity: 0.3;
        /* Slightly fade the background image */
        filter: grayscale(100%);
        /* Make images black and white for corporate tone */
        transition: all 0.5s;
    }

    /* Optional: Hover effect on the entire service block */
    .services-style-three:hover .icons i {
        color: var(--color-primary);
        /* Icon changes to Royal Blue on hover */
    }

    /* --- FIX: FONT AWESOME TOGGLE ICONS NOT DISPLAYING --- */

/* Target common toggle icon classes (replace with your specific classes if different)
This aggressively forces the Font Awesome typeface and the required font properties.
*/
.navbar-toggle i, 
.menu-toggle i, 
.menu-close i,
.fas.fa-bars,
.fas.fa-times {
    /* 1. FORCE FONT FAMILY: Essential fix for the placeholder box */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Solid', 'Font Awesome 6 Pro', 'Font Awesome 6 Solid', sans-serif !important;
    
    /* 2. FORCE FONT WEIGHT: 'fas' (Solid) icons must be weight 900 */
    font-weight: 900 !important; 
    
    /* 3. ENSURE STYLING ISN'T BLOCKING */
    font-style: normal !important; 
    
    /* Ensure color isn't transparent (use your dark color or white depending on the background) */
    color: var(--dark) !important; 
}