americ

.pxl–percentage, .pxl-progressbar–wrap { display: none !important; }

/* USP icon box normalization + sizing + colour */
.pxl-icon-list.style-box1 a {
width: 80px !important;
height: 80px !important;
line-height: 80px !important;
}
.pxl-icon-list.style-box1 a svg {
width: 55% !important;
height: 55% !important;
}
.pxl-icon-list.style-box1 a svg path {
fill: #052E12 !important;
}

/* Services Landing (and future category-landing pages): suppress shared page-title banner, custom hero used instead */
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .elementor-element-8fa800b {
display: none !important;
}

/* Services Landing: service-link cards (layout3) – even 50/50 split, proper padding, cropped image */
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .col-5,
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .col-7 {
flex: 0 0 50%;
max-width: 50%;
min-width: 0;
box-sizing: border-box;
}
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .col-5 {
padding: 0 40px;
}
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .col-7 {
padding: 0;
}
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .pxl-inner-layout2 {
padding: 0;
max-width: 100%;
}
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .pxl-item-heading {
font-size: 42px !important;
line-height: 1.2 !important;
word-break: break-word;
}
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .pxl-item-desc,
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .pxl-item-desc p {
max-width: 100%;
}
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .pxl-item–imgprimary,
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .pxl-image-wg {
height: 100%;
min-height: 420px;
overflow: hidden;
}
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-team-single3 .pxl-image-wg img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Reusable alternate-layout class: add “pxl-card-swap” in a card’s Advanced > CSS Classes
to flip that card to image-left / content-right. Leave it off for image-right / content-left. */
body.page-id-9952, body.page-id-10023, body.page-id-10025, body.page-id-10027 .pxl-card-swap .pxl-team-lv1 {
flex-direction: row-reverse;
}

/* Related Services carousel icons: normalize size – source SVGs have inconsistent native dimensions (some 24px, some 512px), forcing them to different rendered sizes. Fill the fixed icon box consistently instead. */
.pxl-item–icon img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}

/* Homepage Sectors We Support widget (8b0358a, pxl_portfolio_modern): hide index numbers, anchor images left */
.elementor-element-8b0358a .pxl-item–number {
display: none !important;
}
.elementor-element-8b0358a .bg-image {
background-position: left center !important;
}
/* Homepage Services carousel (cb25280): hide index numbers */
.elementor-element-cb25280 .pxl-item–number {
display: none !important;
}

/* Homepage Sectors We Support widget (8b0358a): tighter item spacing (7 items) + smaller rectangular image */

.elementor-element-8b0358a .pxl-portfolio–title {
font-size: 26px !important;
line-height: 1.3 !important;
}
.elementor-element-8b0358a .bg-image {
background-size: cover !important;
background-repeat: no-repeat !important;
}

/* Homepage Sectors We Support (8b0358a): cut text column width in half so image can be fuller, and close remaining per-item gap */
.elementor-element-8b0358a .pxl-portfolio–items {
width: 30% !important;
}
.elementor-element-8b0358a .pxl-portfolio–images {
width: 65% !important;
padding-left: 40px !important;
}

/* Homepage Sectors We Support (8b0358a): use full-resolution originals instead of blurry small crop */
.elementor-element-8b0358a .pxl-portfolio–featured:nth-child(1) {
background-image: url(“https://proactive-fm.co.uk/wp-content/uploads//2026/08/Healthcare-Sector.webp”) !important;
}
.elementor-element-8b0358a .pxl-portfolio–featured:nth-child(2) {
background-image: url(“https://proactive-fm.co.uk/wp-content/uploads//2026/08/Retail-Sector.webp”) !important;
}
.elementor-element-8b0358a .pxl-portfolio–featured:nth-child(3) {
background-image: url(“https://proactive-fm.co.uk/wp-content/uploads//2026/08/Leisure-Sector.webp”) !important;
}
.elementor-element-8b0358a .pxl-portfolio–featured:nth-child(4) {
background-image: url(“https://proactive-fm.co.uk/wp-content/uploads//2026/08/Hospitality-Sector.webp”) !important;
}
.elementor-element-8b0358a .pxl-portfolio–featured:nth-child(5) {
background-image: url(“https://proactive-fm.co.uk/wp-content/uploads//2026/08/Office-Sector.webp”) !important;
}
.elementor-element-8b0358a .pxl-portfolio–featured:nth-child(6) {
background-image: url(“https://proactive-fm.co.uk/wp-content/uploads//2026/08/Education-Sector.webp”) !important;
}
.elementor-element-8b0358a .pxl-portfolio–featured:nth-child(7) {
background-image: url(“https://proactive-fm.co.uk/wp-content/uploads//2026/08/Industrial-Sector.webp”) !important;
}

/* Homepage Sectors We Support (8b0358a): close remaining per-item gap */
.elementor-element-8b0358a .pxl-portfolio–item {
margin-bottom: 0px !important;
}
.elementor-element-8b0358a .pxl-content–inner {
padding-top: 2px !important;
padding-bottom: 2px !important;
}

/* Hero button (“Consult With Our Experts”) – match View All Services style */
.elementor-element-7f7a964 .btn.pxl-btn-effect5 {
border-color: #052e12 !important;
color: #052e12 !important;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.elementor-element-7f7a964 .btn.pxl-btn-effect5:hover {
background-color: #052e12 !important;
border-color: #052e12 !important;
color: #ffffff !important;
}

/* Hero buttons (Services, Property Management, Commercial) – match View All Services style */
.elementor-element-6ea203e .btn.pxl-btn-effect5,
.elementor-element-369eb74 .btn.pxl-btn-effect5,
.elementor-element-aabfe64 .btn.pxl-btn-effect5 {
border-color: #052e12 !important;
color: #052e12 !important;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.elementor-element-6ea203e .btn.pxl-btn-effect5:hover,
.elementor-element-369eb74 .btn.pxl-btn-effect5:hover,
.elementor-element-aabfe64 .btn.pxl-btn-effect5:hover {
background-color: #052e12 !important;
border-color: #052e12 !important;
color: #ffffff !important;
}

/* Homepage Services carousel (Style 2, widget cb25280) – overlay caption on image, revealed only on expanded/active slide (original accordion behaviour preserved) */
.elementor-element-cb25280 .pxl-item–holder-inner {
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
}
.elementor-element-cb25280 .pxl-item–title {
color: #ffffff !important;
font-weight: 700 !important;
margin-left: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
padding-bottom: 8px !important;
}
.elementor-element-cb25280 .pxl-swiper-slide.swiper-slide-active .pxl-item–holder .pxl-item–title {
color: #ffffff !important;
}
.elementor-element-cb25280 .pxl-item–content {
color: #2ECC71 !important;
opacity: 0;
max-width: 480px;
margin-top: 10px;
margin-left: 0 !important;
transition: 0.35s;
}
.elementor-element-cb25280 .pxl-swiper-slide.swiper-slide-active .pxl-item–content {
opacity: 1;
}
/* Dark faded overlay on bottom half of images so caption stands out */
.elementor-element-cb25280 .pxl-item–image::after {
content: “”;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
pointer-events: none;
z-index: 1;
}
/* Fix stretched images – let width scale proportionally with height instead of forcing a fixed pixel width, but never narrower than the panel (avoids a gap at narrow breakpoints) */
.elementor-element-cb25280 .pxl-item–image img {
width: auto !important;
min-width: 100% !important;
max-width: none !important;
}

/* Sitewide “How We Work” step numbers (any page using this widget): fill fades in to primary green automatically ~1.2s after render (matches stroke-draw duration) */
.pxl-item-number.wow.textAnimate .pxl-item-text {
fill: transparent;
animation: pxlNumberFillIn 0.6s ease-in forwards;
animation-delay: 1.2s;
}
@keyframes pxlNumberFillIn {
from { fill: transparent; }
to { fill: #0c7f40; }
}

/* Homepage hero heading (widget 79e40e8): highlight “Proactive” and “Performance” in primary green */
.elementor-element-79e40e8 .pxl-green-word {
color: #0c7f40 !important;
}

/* Sectors archive (/sectors/): hide the default theme page-title/breadcrumb hero, page is now a full custom Elementor build */
.post-type-archive-sky_sectors .elementor-77 {
display: none !important;
}

.post-type-archive-sky_sectors #pxl-main {
padding-top: 0 !important;
}

/* Global: buttons should not fill with a solid colour (green) on hover/active/focus anywhere on the site */
.pxl-button .btn:hover,
.pxl-button .btn:focus,
.pxl-button .btn:active,
a.btn:hover,
a.btn:focus,
a.btn:active,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active {
background-color: revert !important;
background: revert !important;
}

/* Related Services cards (post-layout-service-3): accent title, readable text-colour description, duller divider */
.post-layout-service-3 .pxl-inner-content {
background: linear-gradient(to top, rgba(5,20,10,0.88) 0%, rgba(5,20,10,0.55) 55%, rgba(5,20,10,0) 100%) !important;
padding: 28px 22px 22px !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
}
.post-layout-service-3 .pxl-item–title a {
font-weight: 700 !important;
color: #049545 !important;
}
.post-layout-service-3 .pxl-item–title {
border-bottom: 1px solid rgba(229,229,229,0.35) !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
display: block !important;
}
.post-layout-service-3 .pxl-item–content,
.post-layout-service-3 .pxl-item–content * {
color: #e5e5e5 !important;
font-size: 14px !important;
font-weight: 300 !important;
line-height: 1.6 !important;
}