/* CF7 default elements — hidden */
.screen-reader-response,
.hidden-fields-container {
	display: none;
}

/* Custom CSS for Lightpath 2026 Overhaul */

body {
	background: #fff;
	color: #000;
}
a {
    color: #666;
}
.header {
	color: #000;
	background: #fff;
	box-shadow: 0px 5px 25px 5px rgba(0, 0, 0, 0.05);
}
.logo svg {
    color: #000;
}
@media (min-width: 1200px) {
    .header-right-bottom:before {
        background: -webkit-gradient(linear, left top, right top, from(#000), to(#000));
        background: linear-gradient(to right, #000 0%, #000 100%);
    }
}
.header-phone span {
    color: #000!important;
    text-decoration: underline;
}
.nav-item-text, .icon-arrow {
	color: #000 !important;
  text-decoration: none;
}

.short-info-text {
	background: #fff;
	border:none;
}
.short-info-inner {
	margin: 20px 0;
}
.short-info-img {
	border-radius: 20px;
}
.head-gradient .h2, .head-gradient h2 {
    background-image: linear-gradient(156deg, #000 0%, #e0ff00 100%) !important;
}
.icons-section {
	margin-top: 50px;
	color: #fff;
}
.icons-item {
	border-radius: 20px !important;
}
.hero-section.without-text .hero-section-content:after {
	background: linear-gradient(-89deg, transparent 0%, #e0ff00 100%);
}

ol li:before {
	color: #000;
}


/* BUTTONS */
.button {
	border-radius: 100px;
	height: auto;
}

/* ==========================================================================
   Universal Button Row Spacing (Strict Wrap & Desktop Spacing Match)
   ========================================================================== */

/* 1. Target the existing button wrappers your developer already coded */
.global-element-link-wrapper,
.solution-item .link,
.product-item .link {
    flex-wrap: wrap !important; /* Allows buttons to cleanly wrap when a screen gets narrow */
    align-items: center !important;
    width: 100% !important;
}

/* 2. Reset the individual buttons so they float naturally inside the flex container */
.button {
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 !important; /* Clears old margin parameters */
}

/* 3. Mobile Viewports: Add a vertical gap ONLY when they wrap onto separate lines */
@media (max-width: 767px) {
    .button + .button {
        margin-top: 14px !important;  /* Creates your desired vertical gap spacing on phone screens */
        margin-left: 0 !important;    /* Keeps them perfectly flush on the left edge */
    }
}

/* 4. Desktop Viewports: Lock horizontal side-by-side spacing back in */
@media (min-width: 768px) {
    .button + .button {
        margin-left: 16px !important; /* Restores your precise horizontal margin gap between actions */
        margin-top: 0 !important;     /* Ensures they remain perfectly flat and horizontally aligned */
    }
}




body.no-touch a:hover {
    color: inherit;
	text-decoration: underline;
}
.centred-description {
    background-color: #000;
    color: #fff;
}
.centred-description .head-gradient .h2, .centred-description .head-gradient h2 {
    background-image: linear-gradient(156deg, #e0ff00 0%, #e0ff00 100%) !important;
}
.content ul li:before {
	background: #8A8C8E;
}
.footer-inner:before { 
	border: none;
	background: #E0FF00;
    opacity: 1.0;
}
.footer a {
	color: #000;
}
.hero-bottom-line:after {
    background: linear-gradient(163deg, #e0ff00 0%, #e0ff00 100%);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.form-item.active-focus label {
    color: #e0ff00;
}
.form-item.active-focus .form-text {
  color: #000!important;
	border-color: #8a8c8e;
}
.focus .form-text, .focus textarea.form-text {
    border-color: #8a8c8e;
    background: #fff;
}
.form-item.active-focus label {
    color: #8a8c8e;
}
.form-item label:after {
    background: #fff;
}
.search-wrapper input {
  color: #000!important;
}
.form-text {
	color: #8a8c8e;
}



.hero-section-bg:before {
    background: rgba(0, 0, 0, .5);
}
.hero-section-updated .hero-section-description {
        color: #fff;
    }

.solution-item>div { 
background: #fff;
border-radius: 20px;
border: 2px solid #E0FF00 !important;
}

@media (min-width: 1440px) {
    .icons-item .lazy-img {
        width: 56px;
        margin: 14px 32px 0 0;
    }
	    .solution-item .h4, .solution-item h4 {
        font-size: 32px;
        line-height: 36px;
    }
}

.no-touch .nav-bar .nav-bar-item a:hover {
    color: #fff !important;
}
@media (min-width: 1200px) {
	.nav-bar .nav-bar-icon {
        height: 82px;
        color: #000;
        background-color: #000;
        border-radius: 10px;
        padding: 10px;
    }
	.nav-bar .nav-bar-item a {
        font-size: 12px;
        color: #fff;
    }
.nav-dropdown {
        margin: -7px 0 0;
    }
.nav-dropdown>div {
	color: #000;
	border: none;
		border-top: black solid 4px;
	border-radius: 0 0 20px 20px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.18)
		margin: -7px 0 0;	
}
}

.social-menu a { 
	background-color: #fff;
}
body.no-touch .social-menu a:hover { 
	background-color: #fff;
}

body.no-touch .button:hover {
	background-color: #fff;
  border: none;
	box-shadow: inset 0 0 0 3px #E0FF00; 
	
}

/* NEWS PAGE */
.product-item li:before { 
 background: #000;
}
.product-item .text {
        background: #f1f1f1;
	border-radius: 0 0 20px 20px;
    }
.product-item .picture {
	border-radius: 20px 20px 0 0;
}


.posts-listing .h5, .posts-listing h5 {
    color: #000;
}
.post-info a {
    color: #8A8C8E;
}
.product-item .link a {
	margin-left: 0;
}
.product-item .text {
    height: 100%;
		height: -moz-available; 
		height: -webkit-fill-available; 
		height: stretch; 
}
.head-decorated-line s:after {
    background: -webkit-gradient(linear, left top, right top, from(#e0ff00), to(#e0ff00));
    background: linear-gradient(to right, #e0ff00 0%, #e0ff00 100%);
}
.article-section .picture img {
	border-radius: 20px;
}





.posts-listing-section.video-library .posts-listing h5>a::before {
	border-radius: 20px;
}
.posts-listing .post-image {
	border-radius: 20px;
}
.post-item .post-image {
	border-radius: 20px;
}
.post-item .post-image::before {
	border-radius: 0 0 20px 20px;
}


.featured-story-section a:hover {
	text-decoration: none !important;
}
.featured-story-section h3 a {
	color: #000;
}
.featured-story-section .post-item-text h3 a {
	color: #fff;
}
.featured-story-section .post-item-text .post-info a {
	color: #fff;
}
.featured-story-section .post-item-text .post-info .time {
	color: #fff;
}
.post-item-text .post-info a:after, .post-item-text .post-info a:before {
    background-color: #fff;
}
.post-info a:after, .post-info a:before {
    background-color: #8A8C8E;
}
.post-info a:hover::before {
        background-color: #8A8C8E;
    }
.post-info .time {
    color: #8A8C8E;
}
.post-category a:hover {
    color: #000;
	text-decoration: none!important;
}

.page-filter a:hover {
	color: #fff !important;
}
.portfolio-section-blog h4 {
	color: #fff;
}
.portfolio-section-blog {
	display: none!important;
}
.posts-listing-section.second-half {
	padding: 0px!important;
}
.form-popup-inner {
    background-color: #fff;
    border-radius: 20px;
}


/* TABLE STYLES */
table tr {
    color: #fff;
}
.solution-business-table {
	color: #fff;
}
@media (min-width: 1440px) {
.solution-business-table tr>:nth-child(1) {
        width: 15%;
        padding-right: 47px;
	}
.solution-business-table tr>:nth-child(2) {
        width: 15%;
        padding-right: 10px;
    }
.solution-business-table tr>* {
        width: auto;
    }
.solution-business-table tr>* {
    text-align: left;
}
}

/* BLOG STYLES */
.blog-section-main>.h2, .blog-section-main>.h3, .blog-section-main>h2, .blog-section-main>h3 {
    color: #000;
}
.blog-section .post-info a {
    position: relative;
    text-decoration: none;
    color: #8A8C8E ;
}
.blog-section .post-info a:hover {
    color: #000;
	text-decoration: none;
}
.blog-section .post-info a::before {
    content: '';
    left: 0;
    bottom: -5px;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #c8c8c8;
}
.blog-section .time {
    color: #8A8C8E;
}
.blog-section-main>.h6, .blog-section-main>h6, .blog-section-main>p {
    margin: 0 0 20px;
    color: #000;
    letter-spacing: .1px;
}
div.description-block-text, div.description-block-text>p {
	color:#000;
}
.wp-pagenavi .page-numbers {
	color: #8A8C8E;
}
body.no-touch .pager a:hover, body.no-touch .wp-pagenavi .page-numbers:hover {
    text-decoration: underline;
    color: #000;
}
.featured-story-section {
	display:none;
}
.hero-section.page-blog .hero-section-content::before {
    background: linear-gradient(to right, #e0ff00 0%, #e0ff00 70%, transparent 100%);
}
.hero-section.page-blog .hero-right-line {
	display:none;
}
    .hero-section.page-blog .hero-section-content::after {
	display:none;
}
.tag:before { 
	background:none;
}
.tag {
	color:#fff;
}
.tag:hover {
	color: #e0ff00!important;
}

/* HERO SECTION */
.hero-section-text {
    max-width: 630px;
}
.hero-section-inner {
	color: #fff;
}
@media (min-width: 1200px) {
    .hero-section-text {
        max-width: 1050px;
    }
}


/* NEW THREE COLUMN SOLUTIONS SECTION */
@media (min-width: 1024px) {
    .solutions-section.layout-three-columns .solutions-grid-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 24px !important;
        margin-top: 30px !important;
    }

    .solutions-section.layout-three-columns .solution-item {
        flex: 1 1 calc(33.333% - 16px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: #ffffff; 
        border-radius: 20px !important; 
        overflow: hidden !important;
    }
}



/* NEW TESTIMONIAL SLIDER SECTION */
/* Ensure the inner wrapper stays relative for absolute icon placement */
.testimonial-block .solution-item > div {
    position: relative !important;
}

/* Make the quote mark larger and light gray */
.testimonial-block .quote-mark-icon {
    position: absolute !important;
    top: 5px !important;       /* Adjusted up slightly to handle the larger font size */
    left: 10px !important;       /* Position near the left edge */
    font-size: 150px !important;  /* Made it significantly larger */
    line-height: 1 !important;
    font-family: Georgia, serif !important;
    color: #d1d5db !important;   /* Styled as a clean, soft light gray color */
    opacity: 0.40 !important;    /* Subtle background accent look */
    pointer-events: none !important;
    user-select: none !important;
    z-index: 1 !important;
}

/* Move the text down ONLY inside this testimonial block */
.testimonial-block .solution-item .solution-item-text {
    position: relative !important;
    z-index: 2 !important;       /* Ensures your titles sit on top of the icon overlay */
    padding-top: 55px !important; /* Pushed down significantly to clear your larger quote icon */
}


/* NEW STATS SECTION */
@media (min-width: 1024px) {
    .solutions-section.layout-four-columns .solutions-stats-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 24px !important;
        margin-top: 30px !important;
    }

    .solutions-section.layout-four-columns .solution-item {
        flex: 1 1 calc(25% - 18px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: #ffffff; 
        border-radius: 20px !important; 
        overflow: hidden !important;
    }
}

.solutions-section.layout-four-columns .solution-item>div {
	background: #000;
	border: none!important;
	padding: 30px;
}

.solutions-section.layout-four-columns .solution-item h4 {
	font-size: 50px;
	font-weight:bold;
	color: #E0FF00;
}

.solutions-section.layout-four-columns .solution-item p {
	font-size: 18px;
	font-weight:bold;
	color: #fff;
}

.solutions-slider .swiper-container:not(.swiper-container-initialized) .swiper-wrapper {
	justify-content: left;
}



.small-section-inner img {
	border-radius: 20px 	
}

/* STICKY COLUMNS BLOCK MOD */
.sticky-column-items li:before {
    background: #8A8C8E;
}


/* SERVICE LOCATIONS MAP BLOCK */
    .location-marker li {
        color: #fff;
    }


/* PORTFOLIO SECTION BLOCK */
.portfolio-item .text {
        color: #fff;
    }
.portfolio-item.gradient .text {
        color: #000;
    }
    .portfolio-item.gradient:after {
        border-radius: 0 0 0 14px;
    }
.portfolio-item.gradient {
    background: linear-gradient(139deg, #ffffff 0%, #e0ff00 100%);
}
.portfolio-item.gradient .button {
  color:#fff!important;     
	background: #000!important;
    }
.portfolio-item.gradient .button:hover {
	box-shadow: none!important;
	border: none!important;
  color:#E0FF00!important;     
    }

.partners-section-list .item-text .button.medium:hover {
	box-shadow: none!important;
}

.info-cards p {
	color:#fff;  
}

/* HOME PAGE CARD MODS */

.page-id-366 .product-section .product-item .text {
text-align: center;
	height: auto;
}

.page-id-366 .product-section .product-item li:before {
 display:none;
}

.page-id-366 .product-section .product-item li {
	padding: 0px;
	font-size: 18px
}

/* ALL CARD MODS */


@media (max-width: 1200px) {
.product-slider {
    margin: 0 auto !important;
}
}

.product-section .product-item .text {
	height: auto;
}


/* HERO OVERLAY MASK */

.dark-mask .hero-section-bg:before, .hero-section-slider .swiper-pagination span.dark-mask:after {
    background: rgba(0, 0, 0, .7);
}



/* ACCORDION BLOCK */

/* Master Accordion Rows Settings */
.faq-rows-container {
    margin-top: 30px;
    width: 100%;
}

/* Base Accordion Row: Matches your white fill backgrounds and yellow outlines */
.accordion-row-item {
    background: #ffffff !important;
    border: 2px solid #E0FF00 !important; /* Your exact brand yellow override */
    border-radius: 20px !important;       /* Your clean 20px curves */
    margin-bottom: 16px !important;       /* Gap between stacked cards */
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Clickable Header Bar */
.accordion-row-trigger {
    padding: 20px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    list-style: none !important; /* Hides default ugly browser summary arrows */
    font: 500 20px/26px Roobert, sans-serif !important; /* Custom theme typography */
    color: #141414 !important;
    user-select: none;
}

/* Hide native Safari summary markers */
.accordion-row-trigger::-webkit-details-marker {
    display: none !important;
}

/* Beautiful Smooth Plus/Minus Toggle Indicator Animation */
.accordion-arrow-icon {
    font-size: 24px;
    font-weight: bold;
    color: #141414;
    transition: transform 0.3s ease;
}

/* Rotate the plus sign into an 'X' or minus when the item is active/open */
.accordion-row-item[open] .accordion-arrow-icon {
    transform: rotate(45deg);
}

/* Inside Hidden Text Panel Box */
.accordion-row-panel {
    padding: 0 24px 24px 24px !important; /* Added breathability spacing for the answers */
    font: 14px/22px Roobert, sans-serif !important;
    color: #333333 !important;
}
@media (min-width: 1200px) {
    .accordion-row-panel {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}


/* SVG ICON STYLES */

/* ==========================================================================
   Responsive Inline SVG Code Polish (Exact Blueprint Breakpoint Match)
   ========================================================================== */

/* 1. MOBILE FIRST / BASE SCALE (Default Under 1200px Grid) */
.icons-item .block-icon-wrapper {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 16px 0 0 !important; /* Matches your base mobile margin */
    display: block !important;
}

.icons-item .block-icon-wrapper svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #E0FF00 !important; 
    fill: #E0FF00 !important;
}

/* 2. LAPTOP BREAKPOINT SCALE (Screens wider than 1200px) */
@media (min-width: 1200px) {
    .icons-item .block-icon-wrapper {
        width: 48px !important;
        height: 48px !important;
        margin: 3px 24px 0 0 !important; /* Matches your laptop margin */
    }
    
    .icons-item .block-icon-wrapper svg {
        width: 48px !important;
        height: 48px !important;
    }
}

/* 3. WIDE DESKTOP BREAKPOINT SCALE (Screens wider than 1440px) */
@media (min-width: 1440px) {
    .icons-item .block-icon-wrapper {
        width: 56px !important;
        height: 56px !important;
        margin: 14px 32px 0 0 !important; /* Matches your full desktop margin */
    }
    
    .icons-item .block-icon-wrapper svg {
        width: 56px !important;
        height: 56px !important;
    }
}

/* 4. PATH LINE RECOLOR ENGINE (Applies globally across all screen sizes) */
.icons-item .block-icon-wrapper svg * {
    stroke: currentColor !important; 
    fill: inherit !important;
}


/* HERO V1 TEXT CENTERED SMALL HIGHLIGHTED EYEBROW  */
.hero-section.text-centred small {
    display: inline-block !important; /* Shakes off full-width blocks */
    width: max-content !important;   /* Hugs your text length precisely */
    max-width: 100% !important;      /* Safety guard for mobile line wrapping */
    
    /* THE ENGINE: 0 on top, auto on left/right to center it, 10px on bottom to preserve your original layout margin */
    margin: 0 auto 10px !important;  
    
    /* Your brand highlight parameters */
    background-color: #E0FF00 !important;
    color: #000000 !important;
    padding: 4px 10px !important;    
    border-radius: 0px !important;   
    
    /* Ensure the text string inside is centered if it wraps onto small mobile screens */
    text-align: center !important; 
}

    .hero-left-line {
        display: block;
        background: -webkit-gradient(linear, right top, left top, from(transparent), to(#e0ff00));
        background: linear-gradient(270deg, transparent 0%, #e0ff00 100%);
        right: 100%;
}
.hero-right-line {
    left: 100%;
    background: linear-gradient(93deg, transparent 0%, #e0ff00 100%);
}


/* ==========================================================================
   Universal Above-the-Fold Animation Accel (Dynamic Block Builder Match)
   ========================================================================== */

/* Target ONLY the first three visual blocks inside your main container,
   completely ignoring their class names, tags, or page positions. */
.main-content-inner > div:not(:nth-child(n+4)) .fadein,
.main-content-inner > section:not(:nth-child(n+4)) .fadein,
.main-content-inner > *:not(:nth-child(n+4)) .fadein {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}


/* MEGA MENU PROMO CARD TEST */
/* ==========================================================================
   Max Mega Menu - Self-Contained Background Promo Card Framework
   ========================================================================== */

/* 1. Target the core widget container item slot generated by your theme loop */
.mega-menu-item .mega-menu-promo-container {
    padding: 20px !important; /* Wipes standard padding inside this layout grid cell cell */
}

/* 2. Style your new inner container to force full-bleed background rendering */
.mega-menu-promo-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Locks text content frame to the bottom edge */
    
    /* HARDWARE BACKGROUND ENGINE: Anchors your server graphics directly as a cover layer */
    
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* UNIVERSAL SCALING FIX: Stretches the promo cell block to cover your dropdown height proportions */
    min-height: 300px !important;
    height: calc(100% + 30px) !important; /* Offsets top/bottom margins to match standard heights */
    padding: 24px !important;
    box-sizing: border-box !important;
    
        /* Smooth Corner Clips: Guarantees your network graphic obeys the rounded outer boundary tracks of the menu */
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* 3. Dark Gradient Protective Overlay Mask Layer */
.mega-menu-promo-container .promo-card-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* SHIELD GRADIENT: Soft gradient overlay to enhance text contrast and legibility */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.75) 100%) !important;
    
    z-index: 1 !important;
    pointer-events: none !important;
}

/* 4. Text Content Structural Alignment Grid Area */
.mega-menu-promo-container .promo-card-content {
    position: relative !important;
    z-index: 2 !important; /* Pushes content stacks safely above your gradient dark mask layer */
    width: 100% !important;
}

/* 5. Typography Assets Styles */
.mega-menu-promo-container .promo-card-title {
    font: 600 22px/26px Roobert, sans-serif !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
}

.mega-menu-promo-container .promo-card-subtitle {
    font: 400 13px/18px Roobert, sans-serif !important;
    color: #e5e7eb !important; /* Soft gray color text choice */
    margin: 0 0 16px 0 !important;
}

/* 6. Action Link Anchor Elements Styling Layout Parameters */
.mega-menu-promo-container .promo-card-link {
    display: inline-flex !important;
    align-items: center !important;
    font: 500 14px/16px Roobert, sans-serif !important;
    color: #E0FF00 !important; /* Brand yellow accent highlight color matching text selection */
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
}

.mega-menu-promo-container .promo-card-link:hover {
    opacity: 0.85 !important;
}

.mega-menu-promo-container .promo-card-arrow {
    margin-left: 6px !important;
    transition: transform 0.3s ease !important;
}

.mega-menu-promo-container .promo-card-link:hover .promo-card-arrow {
    transform: translateX(4px) !important; /* Gentle kinetic right arrow push animation effect */
}


/* ADD TOP MARGIN TO MOBILE MENU COLUMN HEADINGS */
@media only screen and (max-width: 1200px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard h4.mega-block-title, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title {
        margin-top: 10px;
    }
}


/* REMOVE THE BULLET FROM PRODUCT WITH LISTING SECTION  */
.product-slider .product-item li:before {
	display:none;
}
.product-slider .product-item li {
	padding: 0px;
	margin: 0 0 5px;
}

/* NEWS SECTION HIDE IMAGE AND ROUNDED CARD CORNERS  */
.news-section .product-item .picture:before {
	display:none;
}
.news-section .product-item .text {
	border-radius: 20px;
}


/* RESOURCE LIBRARY */

.page-id-4944 h1 {
	color: #000;	
}



/* ==========================================================================
   Editorial Placeholders for Image-less News Tiles (Logo-Centered System)
   ========================================================================== */

/* 1. Target the empty image box and apply a uniform clean background style */
.posts-listing .post-item-wrap:not(:has(.post-image[data-src*="http"])) .post-image,
.posts-listing .post-image[data-src=""] {
    position: relative !important; /* CRITICAL: Creates a boundary anchor for our absolute logo placement */
    background-color: #ffffff !important; /* Clean premium white backdrop canvas */
    background-image: none !important;
    overflow: hidden !important;
}

/* 2. Dynamically inject and perfectly center the corporate logo vector icon */
.posts-listing .post-item-wrap:not(:has(.post-image[data-src*="http"])) .post-image::after,
.posts-listing .post-image[data-src=""]::after {
    content: "" !important; /* Clear the old text string to make room for your graphic asset */
    position: absolute !important;
    
    /* THE REAL-TIME CENTERING ENGINE: Locks the logo dead center over the 16:9 canvas frame */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* 3. DIMENSION CONTROLS: Sets a safe visual bounding box for your logo placement */
    width: 190px !important; /* Set to your preferred layout width */
    height: 60px !important; /* Set to your preferred layout height */
    
    /* 4. VECTOR LOGO HOOKS */
    /* OVERWRITE THE FILE PATH BELOW WITH YOUR EXACT WP MEDIA LIBRARY LINK PATH: */
    background-image: url('/wp-content/themes/bigdrop-theme/assets/images/lightpath-resource-logo.svg') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important; /* Constrains your logo safely so it never squishes or clips */
}








/* TOP-ALIGN IMAGES VERTICALLY AND ADD A SHADOW TO THE IMAGE BOX */

/* Forces your card thumbnail background images to stay locked tightly to the 
   top edge, keeping your document titles and header graphics completely visible! */
.posts-listing .item .post-image {
    background-position: top center !important;
	box-shadow: 0px 5px 25px 5px rgba(0, 0, 0, 0.1);
}
}






/* ==========================================================================
   Left Sidebar Filter UI Layout Adjustments
   ========================================================================== */

/* 1. Ensure the sidebar form wrapper blocks stack items into a vertical column channel */
.resource-library-sidebar form {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
}

/* 2. Format the search widget to span the full edge width of the container card */
.resource-library-sidebar .searchandfilter-field-search input {
    width: 100% !important;
    background-color: #000000 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* 3. Stack checkbox menu option selectors on vertical lines */
.resource-library-sidebar .searchandfilter-field-choice ul {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 14px !important;
}

.resource-library-sidebar .searchandfilter-field-choice li {
    color: #ffffff !important;
    font-family: 'Roobert', sans-serif !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* 4. Expand the main submission action button edge-to-edge for clarity */
.resource-library-sidebar .searchandfilter-field-submit input[type="submit"] {
    width: 100% !important;
    background-color: #E0FF00 !important; /* Your brand yellow color choice */
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

/* 5. RESPONSIVE BREAKPOINT CORRECTION: If the viewport screen scales to mobile sizing, 
   drop the sidebar layout track to seamlessly stack back above your 3-column rows */
@media (max-width: 991px) {
    .resource-library-split-layout {
        flex-direction: column !important;
    }
    .resource-library-sidebar {
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin-bottom: 30px !important;
    }
}

.search-filter-input-checkbox__label {
	color: #fff;
}

.resource-type-badge {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #1c1c1c;
    color: #E0FF00;
    margin-right: 8px;
	  font-weight: 700 !important;
}

.facetwp-checkbox {
    color: #fff;
}

.sidebar-filter-card {
	border-radius: 20px!important;
}




/* ==========================================================================
   Sleek Custom Checkbox Styling for FacetWP Sidebar
   ========================================================================== */

/* 1. Target the basic checkbox label frame container rows */
.facetwp-checkbox {
	background: none !important; 
    position: relative !important;
    padding-left: 28px !important; /* Makes clean left margin space to hold our custom check box icon */
    cursor: pointer !important;
    color: #cccccc !important;
    transition: color 0.2s ease !important;
	font-size: 16px;
	line-height: 24px;
}

/* 2. CREATE THE SQUIRCLE BOX SHELL: Draws a modern dark gray border box outline */
.facetwp-checkbox::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #666 !important;
    border-radius: 4px !important;
    background-color: #000000 !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

/* 3. THE HOVER HIGHLIGHT EVENT */
.facetwp-checkbox:hover {
    color: #ffffff !important;
}
.facetwp-checkbox:hover::before {
    border-color: #555555 !important;
}

/* 4. THE VISUAL SELECTED CHECKMARK EFFECT: When an option gets clicked, 
   we snap its border to your signature brand yellow and draw an inner indicator symbol */
.facetwp-checkbox.checked {
    color: #ffffff !important;
}

.facetwp-checkbox.checked::before {
    border-color: #E0FF00 !important; /* Your signature custom brand yellow highlight color selection */
    background-color: #E0FF00 !important;
}

/* 5. DRAW THE WHITE INSIDE CHECKMARK ICON: Uses crisp absolute line angles to print a mini check vector */
.facetwp-checkbox.checked::after {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;
    left: 6px !important;
    width: 6px !important;
    height: 9px !important;
    border: solid #000000 !important;
    border-width: 0 2px 2px 0 !important; /* Creates the L-shape of a standard checkmark vector icon */
    transform: rotate(45deg) !important; /* Angles the lines perfectly into a check symbol position */
}


/* TIGHTEN UP SPACING BETWEEN FACET GROUPS */
.facetwp-facet {
    margin-bottom: 20px !important;
}





/* ==========================================================================
   Premium FacetWP AJAX "Load More" Button Layout Styling
   ========================================================================== */

/* Target the wrapper alignment area */
.fwp-load-more-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-top: 60px !important;
    margin-bottom: 100px !important;
    width: 100% !important;
}

/* Base button properties matching your active theme visual anchors */
.facetwp-load-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 32px !important;
    background-color: #0b0b0b !important;
    border: 1px solid #1c1c1c !important;
    border-radius: 30px !important; /* Premium pill-shaped design */
    font-family: 'Roobert', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Hover event properties: Shifts button to your signature brand yellow accent */
.facetwp-load-more:hover {
    color: #000000 !important;
    background-color: #E0FF00 !important;
    border-color: #E0FF00 !important;
    box-shadow: 0 0 20px rgba(224, 255, 0, 0.2) !important;
}

/* Disabled loading state properties */
.facetwp-load-more.disabled {
    background-color: #141414 !important;
    border-color: #1c1c1c !important;
    color: #555555 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}


.facet-group .toggle-icon {
	font-size: 16px !important;
  font-weight: 700 !important;
	color: #E0FF00;
}

.nav-bar {
	display: none;
}


.page-id-1391 .solution-business-table tr>:nth-child(1) {
        width: 50%;
	padding-right: 0px
    }

.page-id-1391 .solution-business-table tr>:nth-child(2) {
        width: 25%;
        text-align: center;
    }

.page-id-1391 .solution-business-table tr>:last-child {
				width: 25%;
        text-align: center;
    }

.page-id-1391 .solution-business-table table {
    width: 100%;
}


/* ==========================================================================
   Premium Branded Site Breadcrumbs Layout
   ========================================================================== */

.global-site-breadcrumbs {
    background-color: #000000 !important; /* Premium matching slate backdrop */
    padding: 6px 0 !important;
    border-bottom: 1px solid #141414 !important; /* Soft bottom boundary separation line */
}

/* Base typography styling for link navigation crumbs */
.global-site-breadcrumbs a {
    font-family: 'Roobert', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #a0a0a0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.global-site-breadcrumbs a:hover {
    color: #ffffff !important;
}

/* Styles the separator arrows or characters */
.global-site-breadcrumbs span {
    font-family: 'Roobert', sans-serif !important;
    font-size: 13px !important;
    color: #a0a0a0 !important;
    padding: 0 8px !important;
}

/* Locks highlight focus on the active end page item block */
.global-site-breadcrumbs span.breadcrumb_last {
    color: #E0FF00 !important; /* Your signature brand yellow accent color selection */
    font-weight: 700 !important;
    padding: 0 8px !important;
}



/* Home page highlight treatment on span tag */
.page-id-366 .hero-section-inner span {
		display: inline-block;
    line-height: 1;
    background-color: #E0FF00;
    color: #000000;
    padding: 0 0.1em;
    font-weight: 600;
}