.elementor-kit-8{--e-global-color-primary:#1E1E1E;--e-global-color-secondary:#969696;--e-global-color-text:#4F4F4F;--e-global-color-accent:#1E1E1E;--e-global-color-419829d:#FFFFFF;--e-global-color-90a2ba3:#F7F7F7;--e-global-color-84cd16a:#1E1E1E;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Space Grotesk";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Red Hat Display";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Red Hat Display";--e-global-typography-accent-font-weight:400;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1200px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Keep the WGL black background, but remove the logo from it */
.single-team .wgl_col-12 > .team__member {
    background-image: none !important;
}

/* Put the logo on its own independent layer */
.single-team .wgl_col-12 > .team__member::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("https://gmhair.uk/wp-content/uploads/2026/05/gmhair-black.svg");
    background-repeat: no-repeat;
    background-position: 98% 97%;
    background-size: 50%;

    opacity: 0.06;
    pointer-events: none;
}



/* =========================================================
   WGL TEAM LOGO
   Desktop / Tablet / Mobile
   ========================================================= */


/* =========================================================
   DESKTOP
   Change these values for desktop screens
   ========================================================= */

.single-team .wgl_col-12 > .team__member {
    background-image: none !important;
}

.single-team .wgl_col-12 > .team__member::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("https://gmhair.uk/wp-content/uploads/2026/05/gmhair-black.svg");
    background-repeat: no-repeat;

    background-position: 115% 103%;
    background-size: 600px;

    opacity: 0.055;
    pointer-events: none;
}


/* =========================================================
   TABLET
   Screens 1024px and below
   ========================================================= */

@media (max-width: 1024px) {

    .single-team .wgl_col-12 > .team__member::before {
        background-position: 50% 99%;
        background-size: 14%;
        opacity:100%;
    }

}


/* =========================================================
   MOBILE
   Screens 767px and below
   ========================================================= */

@media (max-width: 767px) {

    .single-team .wgl_col-12 > .team__member::before {
        background-position: 50% 101%;
        background-size: 133%;
        opacity: 0.05;
    }

}







/* move the logo but wont allow opacity change as black and logo samelayer*/
/*
.team__member { 
background-position: 98% 97% !important;
background-size: 16% !important;
background-repeat: no-repeat !important;
opacity: 
}

*//* End custom CSS */