/**
* Theme Name: Envolve Child
* Description: This is a child theme of Envolve, generated by Merlin WP.
* Author: <a href="http://themeforest.net/user/themekalia">Theme Kalia</a>
* Template: envolve
* Version: 2.6
*/

/* ==========================================================================
   PASGR Header Menu Customizations (Green Colors Completely Removed)
   ========================================================================== */

/* Root color variable overrides */
:root {
    --main-color: #004a17 !important;
    --main-color-rgb: 0, 74, 23 !important;
    --secondary-color: #01A368 !important;
    --secondary-color-rgb: 1, 163, 104 !important;
}

/* Remove dark green background from header upper, nav-outer, main-menu, and right info */
.main-header .nav-outer,
.main-header .nav-outer .main-menu,
.main-header .inner-container,
.main-header .navbar-right-info,
.header-upper .nav-outer,
.header-style-seven .nav-outer,
.header-style-seven .nav-outer .main-menu,
.header-style-seven .navbar-right-info,
.navigation,
.nav-outer,
.main-menu {
    background-color: transparent !important;
    background: transparent !important;
}

.main-header .header-upper,
.header-upper,
.header-style-seven .header-upper {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Top bar background & styling */
.main-header .header-top,
.header-style-seven .header-top {
    background: #004a17 !important;
    padding: 5px 0px;
}

.main-header .header-top .social-links {
    position: relative;
    text-align: center;
}

.main-header .header-top .social-links li {
    position: relative;
    display: inline-block;
    margin: 0 4px;
}

.main-header .header-top .social-links li a span {
    font-size: 18px;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.main-header .header-top .social-links li a:hover span {
    color: #242424 !important;
}

.follow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.follow p {
    display: inline-block;
    padding-right: 15px;
    font-weight: bold;
    color: #ffffff !important;
    margin: 0;
}

.follow .social-links {
    display: inline-block;
    margin-left: 10px;
}

/* Main Navigation items & links */
.main-menu .navigation > li > a,
.header-style-seven .main-menu .navigation > li > a {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    color: #242424 !important;
}

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current-menu-item > a,
.main-menu .navigation > li.current-menu-ancestor > a,
.header-style-seven .main-menu .navigation > li:hover > a,
.header-style-seven .main-menu .navigation > li.current-menu-item > a,
.header-style-seven .main-menu .navigation > li.current-menu-ancestor > a {
    color: #01A368 !important;
}

/* Allow .current to highlight only on the actual homepage */
body.home .main-menu .navigation > li.current > a,
body.home .header-style-seven .main-menu .navigation > li.current > a {
    color: #01A368 !important;
}

/* Uniform menu item spacing - margin-based model to override customizer/parent CSS */
.main-menu .navigation > li {
    margin: 0 16px !important;
    padding: 10px 0 !important;
    display: inline-block !important;
    float: none !important;
}

.main-menu .navigation > li.dropdown {
    padding: 10px 0 !important;
    margin: 0 16px !important;
}

/* Reposition dropdown arrow relative to the link text so it sits in the center of the gap */
.main-menu .navigation > li.dropdown > a:after {
    right: -16px !important;
    top: 3px !important;
}

.main-menu .navigation > li:first-child {
    margin-left: 0 !important;
}

.main-menu .navigation > li:last-child {
    margin-right: 0 !important;
}

/* Dropdown Submenu styling - Pure White Background & Dark Text */
.main-menu .navigation > li > ul,
.main-menu .navigation > li > ul > li > ul,
.header-style-seven .main-menu .navigation > li > ul,
.header-style-seven .main-menu .navigation > li > ul > li > ul {
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px;
    border: 1px solid #eeeeee !important;
}

.main-menu .navigation > li > ul > li {
    padding: 0 18px !important;
    background: #ffffff !important;
}

.main-menu .navigation > li > ul > li > a,
.header-style-seven .main-menu .navigation > li > ul > li > a {
    border-bottom: 1px solid #eeeeee !important;
    color: #242424 !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 600 !important;
    padding: 12px 0 !important;
    transition: all 0.3s ease;
    background: transparent !important;
}

.main-menu .navigation > li > ul > li:last-child > a {
    border-bottom: none !important;
}

.main-menu .navigation > li > ul > li:hover > a,
.main-menu .navigation > li > ul > li > a:hover,
.main-menu .navigation > li > ul > li.current > a,
.header-style-seven .main-menu .navigation > li > ul > li > a:hover {
    color: #01A368 !important;
    background: transparent !important;
    padding-left: 5px !important;
}

/* Dropdown arrows, search toggler, and side menu toggler */
.main-menu .navigation li.dropdown > a:after,
.main-menu .navigation li.dropdown .dropdown-btn,
.navbar-right-info .search-toggler span,
.navbar-right-info .search-toggler {
    color: #004a17 !important;
    transition: color 0.3s ease;
}

.main-menu .navigation li.dropdown:hover > a:after,
.navbar-right-info .search-toggler:hover span,
.navbar-right-info .search-toggler:hover {
    color: #01A368 !important;
}

/* Side Menu Toggler (PNG Image) color mapping via CSS filters */
.navbar-right-info .sidemenu-nav-toggler img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(35%) saturate(3033%) hue-rotate(113deg) brightness(91%) contrast(101%) !important;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.navbar-right-info .sidemenu-nav-toggler:hover img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(87%) saturate(548%) hue-rotate(107deg) brightness(92%) contrast(100%) !important;
    transform: scale(1.05);
}

/* Vertical divider in navbar-right-info */
.header-style-seven .navbar-right-info:before,
.navbar-right-info:before {
    background: #eeeeee !important;
}

/* Mobile Menu & Right Side Menu styling */
.mobile-menu .menu-box,
.mobile-menu .navigation li a,
.hidden-sidebar {
    background: #000000 !important;
    background-color: #000000 !important;
}

.mobile-menu .navigation li > a,
.hidden-sidebar .widget-title,
.hidden-sidebar .about-widget-two h3 {
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
}

/* ==========================================================================
   Blog Page Sidebar Premium Card Styling
   ========================================================================== */

.blog-sidebar {
    background-color: #fcfdfc !important;
    border: 1px solid #eef2ee;
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 5px 15px rgba(0, 74, 23, 0.02);
}

.blog-sidebar .sidebar-widget {
    margin-bottom: 35px;
    border-bottom: 1px solid #eef2ee;
    padding-bottom: 30px;
}

.blog-sidebar .sidebar-widget:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.blog-sidebar .sidebar-widget .widget-title h3,
.blog-sidebar .sidebar-widget .widget-title h4 {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    color: #004a17 !important; /* Brand Dark Green */
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.blog-sidebar .sidebar-widget .widget-title h3:after,
.blog-sidebar .sidebar-widget .widget-title h4:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #01A368; /* Brand Secondary Green */
}

.mobile-menu .navigation li.current > a,
.mobile-menu .navigation li a:hover {
    color: #01A368 !important;
}

.hidden-sidebar .list-style-one li {
    color: #aaaaaa !important;
    margin-bottom: 12px;
}

.hidden-sidebar .list-style-one li a {
    color: #ffffff !important;
    font-weight: 500;
}

.hidden-sidebar .list-style-one li a:hover {
    color: #01A368 !important;
}

.hidden-sidebar .social-links li a {
    color: #ffffff !important;
    background-color: #333333 !important;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease;
}

.hidden-sidebar .social-links li a:hover {
    background-color: #01A368 !important;
    color: #ffffff !important;
}

/* Buttons */
.btn-style-one .btn-title {
    font-family: "Quicksand", sans-serif;
}

.btn-style-one .btn-title:hover {
    background-color: #01A368 !important;
}

/* Sticky Header navigation adjustments - match regular header spacing */
.sticky-header .main-menu .navigation > li {
    margin: 0 16px !important;
    padding: 10px 0 !important;
}

.sticky-header .main-menu .navigation > li:first-child {
    margin-left: 0 !important;
}

.sticky-header .main-menu .navigation > li:last-child {
    margin-right: 0 !important;
}

/* ==========================================================================
   PASGR Footer Styles
   ========================================================================== */

/* ==========================================================================
   Pamoja Trust Custom Footer Styles
   ========================================================================== */

.pasgr-footer {
    background-color: #f7f7f7;
    color: #555555;
    font-family: "Quicksand", sans-serif;
    border-top: 1px solid #e5e5e5;
}

.pasgr-footer-main {
    padding: 60px 0 40px;
}

.pasgr-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr;
    gap: 40px;
}

.pasgr-footer-col {
    display: flex;
    flex-direction: column;
}

.pasgr-footer-logo img {
    max-height: 72px;
    height: auto;
    width: auto;
    margin-bottom: 12px;
    filter: none !important; /* Keep original colored logo for Pamoja Trust */
}

.pasgr-footer-tagline {
    font-family: "Quicksand", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #1a202c;
    margin: 8px 0 0;
    display: block;
}

.pasgr-footer-heading {
    font-family: "Quicksand", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #004a17; /* Primary Dark Green */
    margin: 0 0 20px;
    display: inline-block;
}

.pasgr-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pasgr-footer-links li {
    margin-bottom: 10px;
    padding: 0;
    border: none;
    background: none;
}

.pasgr-footer-links li a {
    color: #555555;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.2s ease;
    display: inline-block;
}

.pasgr-footer-links li a:hover {
    color: #01A368; /* Secondary Green */
    padding-left: 4px;
}

.pasgr-footer-address {
    font-style: normal;
}

.pasgr-footer-address p {
    font-size: 14px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 12px;
}

.pasgr-footer-address a {
    color: #555555;
    text-decoration: none;
    transition: color 0.3s;
}

.pasgr-footer-address a:hover {
    color: #01A368;
}

.pasgr-footer-icon {
    color: #01A368; /* Secondary Green for icons */
    margin-right: 8px;
    font-size: 14px;
}

.pasgr-footer-social {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pasgr-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #004a17; /* Dark Green social icon background to match orange circles in image */
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.pasgr-social-icon:hover {
    background-color: #01A368; /* Hover to Secondary Green */
    color: #ffffff;
    transform: translateY(-2px);
}

.pasgr-newsletter-heading {
    font-family: "Quicksand", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #004a17; /* Dark Green matching image header colors */
    margin: 0 0 16px;
}

.pasgr-newsletter-form .mc4wp-form,
.pasgr-newsletter-form .pasgr-simple-newsletter {
    width: 100%;
}

.pasgr-newsletter-form .mc4wp-form-fields,
.pasgr-newsletter-inner {
    display: flex;
}

.pasgr-newsletter-form input[type="email"] {
    flex: 1;
    padding: 12px 14px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    border: 2px solid #004a17; /* Primary Green border matching input border in image */
    border-right: none;
    border-radius: 5px 0 0 5px;
    background: #ffffff;
    color: #333333;
    outline: none;
}

.pasgr-newsletter-form button[type="submit"] {
    padding: 12px 24px;
    background-color: #01A368; /* Secondary/bright green button matching the orange button in the image */
    color: #ffffff;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.pasgr-newsletter-form button[type="submit"]:hover {
    background-color: #004a17;
}

.pasgr-footer-bottom {
    background-color: #004a17; /* Colored bottom bar matching the orange bottom bar in the image */
    padding: 20px 0;
    border-top: none;
}

.pasgr-footer-bottom-inner {
    display: flex;
    justify-content: center; /* Center layout like the copyright in the image */
    align-items: center;
    text-align: center;
}

.pasgr-footer-copyright {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff; /* White text on colored bottom bar */
    letter-spacing: 0.5px;
}

@media (max-width: 1024px) {
    .pasgr-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .pasgr-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pasgr-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Project Monitoring Page (Power BI Dashboard) Layout Customization
   ========================================================================== */

.page-id-6416 .page-title,
.page-id-6416 .page-title-two,
.page-id-6416 .banner-section {
    display: none !important;
}

.page-id-6416 .sidebar-page-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.page-id-6416 .sidebar-page-container .auto-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-id-6416 .sidebar-page-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.page-id-6416 .content-side {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Force Elementor containers on this page to be edge-to-edge with no padding */
.page-id-6416 .elementor-section-wrap > .elementor-section,
.page-id-6416 .elementor-container,
.page-id-6416 .elementor-column-wrap,
.page-id-6416 .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.page-id-6416 .pbi-wrap {
    border-radius: 0;
}

.page-id-6416 .pbi-header {
    border-radius: 0;
}

.page-id-6416 .pbi-footer {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* ==========================================================================
   About Page Layout & Alternating Section Flow (Page ID 639)
   ========================================================================== */

.page-id-639 [data-id="ad54c71"] {
    background-color: #ffffff !important;
    padding: 80px 0 !important;
}

.page-id-639 [data-id="c8a4e04"] {
    background-color: #fcfdfc !important; /* Alternating very soft green-grey */
    padding: 80px 0 !important;
    border-top: 1px solid #f0f3f0;
    border-bottom: 1px solid #f0f3f0;
}

.page-id-639 [data-id="5d5acbe"] {
    background-color: #ffffff !important;
    padding: 80px 0 !important;
}

.page-id-639 [data-id="4d196359"] {
    background-color: #fcfdfc !important; /* Alternating very soft green-grey */
    padding: 80px 0 !important;
    border-top: 1px solid #f0f3f0;
    border-bottom: 1px solid #f0f3f0;
}

.page-id-639 [data-id="49cb8cb"] {
    background-color: #ffffff !important;
    padding: 80px 0 !important;
}

/* ==========================================================================
   Meet Our Team (team-home-6) UI Improvements
   ========================================================================== */

.team-home-6 {
    background-color: transparent !important;
    padding: 0 !important; /* Handled by parent container padding */
}

.team-home-6 .sec-title.style-four h2 {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    color: #004a17 !important;
    font-size: 32px !important;
}

.team-home-6 .single-item {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-color 0.3s ease;
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid #eaeaea;
}

.team-home-6 .single-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 74, 23, 0.08);
    border-color: rgba(1, 163, 104, 0.3);
}

.team-home-6 .image-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin: 0;
}

.team-home-6 .image-box img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.team-home-6 .single-item:hover .image-box img {
    transform: scale(1.05);
}

/* Phone icon box overlay on team photo */
.team-home-6 .image-box .icon-box {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.team-home-6 .single-item:hover .image-box .icon-box {
    opacity: 1;
    transform: translateY(0);
}

.team-home-6 .image-box .icon-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #01A368;
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(1, 163, 104, 0.3);
    transition: background-color 0.3s;
}

.team-home-6 .image-box .icon-box a:hover {
    background-color: #004a17;
}

/* Member Info styling */
.team-home-6 .lower-content {
    padding: 24px 20px;
    text-align: center;
    background-color: #ffffff;
}

.team-home-6 .lower-content h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
}

.team-home-6 .lower-content h3 a {
    font-family: "Quicksand", sans-serif;
    color: #1e1e1e !important;
    text-decoration: none;
    transition: color 0.3s;
}

.team-home-6 .lower-content h3 a:hover {
    color: #01A368 !important;
}

.team-home-6 .lower-content .designation {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #01A368 !important;
    display: block;
    margin-bottom: 16px;
}

/* Social icons on team cards */
.team-home-6 .social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-home-6 .social-links li {
    margin: 0;
    padding: 0;
}

.team-home-6 .social-links li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #f4f6f4;
    color: #004a17 !important;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.team-home-6 .social-links li a:hover {
    background-color: #01A368;
    color: #ffffff !important;
}

/* ==========================================================================
   Hidden Sidebar Drawer (Side Menu) Black Style
   ========================================================================== */

.hidden-sidebar {
    background-color: #000000 !important;
}

.hidden-sidebar .wrapper-box {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.hidden-sidebar .sidebar-widget h3,
.hidden-sidebar .about-widget-two h3,
.hidden-sidebar .contact-info h4,
.hidden-sidebar .widget-title h3 {
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
}

.hidden-sidebar .text,
.hidden-sidebar .about-widget-two .text {
    color: #cccccc !important;
    font-family: "Quicksand", sans-serif !important;
    line-height: 1.7 !important;
}

.hidden-sidebar .contact-info ul li {
    color: #cccccc !important;
    font-family: "Quicksand", sans-serif !important;
}

.hidden-sidebar .contact-info ul li a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s;
}

.hidden-sidebar .contact-info ul li a:hover {
    color: #01A368 !important;
}

.hidden-sidebar .contact-info ul li .icon {
    color: #01A368 !important; /* Secondary Brand Color for icons */
}

/* Hidden Sidebar Close Button */
.hidden-sidebar-close {
    color: #ffffff !important;
    transition: color 0.3s, transform 0.3s;
}

.hidden-sidebar-close:hover {
    color: #01A368 !important;
    transform: rotate(90deg);
}

/* Hidden Sidebar Social Links */
.hidden-sidebar .social-links ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

.hidden-sidebar .social-links ul li a:hover {
    background-color: #01A368 !important;
    color: #ffffff !important;
}

/* =========================================================================
   Pamoja Trust Custom Styles — Highlights & News Colors Overrides
   ========================================================================= */

/* Highlights cards background override (#232b3e -> brand primary green #004a17) */
.highlights-home-6 .inner-box .single-item {
    background-color: #004a17 !important;
}

/* Highlights cards icons override (make them secondary light green for contrast) */
.highlights-home-6 .inner-box .single-item .icon-box i,
.highlights-home-6 .inner-box .single-item .icon-box {
    color: #01A368 !important;
}

/* Highlights card border override (make it semi-transparent white) */
.highlights-home-6 .inner-box .single-item h3,
.highlights-home-6 .inner-box .single-item:last-child h3 {
    border-bottom: 2px dotted rgba(255, 255, 255, 0.25) !important;
}

/* Latest News hover color override (replace dark navy background with primary brand green gradient) */
.news-block-two .lower-content:before {
    background-image: linear-gradient(90deg, #004a17 0%, #01a368 100%) !important;
}

/* Latest News hover text and link readability overrides */
.news-home-6 .news-block-two:hover .read-more-link,
.news-home-6 .news-block-two:hover .read-more-link i,
.news-home-6 .news-block-two:hover .post-meta li,
.news-home-6 .news-block-two:hover .post-meta li a,
.news-home-6 .news-block-two:hover .post-meta li i,
.news-home-6 .news-block-two:hover .post-meta li a i {
    color: #ffffff !important;
}

/* =========================================================================
   Why Choose Us Section UI & Color Improvements
   ========================================================================= */

/* Section background and right-side overlay */
.chooseus-home-6 {
    background-color: #f9fbf9 !important;
}
.chooseus-home-6:before {
    background: #f4f7f5 !important;
    opacity: 0.96 !important;
}

/* Hide the brown question mark watermark image */
.chooseus-home-6 .left-column .icon-box {
    display: none !important;
}

/* Left column container styling with brand green background overlay */
.chooseus-home-6 .left-column {
    background-color: rgba(0, 74, 23, 0.90) !important;
    padding: 60px 45px !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0, 74, 23, 0.15) !important;
}

/* Left column telephone link hover style */
.chooseus-home-6 .left-column .author-box h3 a:hover {
    color: #01A368 !important;
    text-decoration: none !important;
}

/* Hide empty button border rectangle */
.chooseus-home-6 .left-column .support-box a:empty {
    display: none !important;
}

/* Right column feature title color (primary green) */
.chooseus-home-6 .right-column .single-item h3 {
    color: #004a17 !important;
}

/* Right column separator override (replace brown dec image with brand light green line) */
.chooseus-home-6 .right-column .single-item h3:before {
    background: #01A368 !important;
    height: 3px !important;
    width: 60px !important;
}

/* Right column icon box styling */
.chooseus-home-6 .right-column .single-item .icon-box {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    color: #004a17 !important;
    background-color: #ffffff !important;
}

/* Right column icon box hover states */
.chooseus-home-6 .right-column .single-item:hover .icon-box {
    background-color: #01A368 !important;
    color: #ffffff !important;
}

/* =========================================================================
   Pamoja Trust Custom Styles — Relace-Style About Page Design
   ========================================================================= */

/* Warm Cream Background */
.relace-about-bg {
    background-color: #fcfbf7 !important;
}

/* Page ID 639 Container Centering & Gutter Padding */
.page-id-639 .e-parent {
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}

.page-id-639 .e-con-inner {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Relace Hero CTA Button */
.relace-btn-primary a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #004a17 !important;
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(0, 74, 23, 0.15) !important;
}

.relace-btn-primary a:hover {
    background-color: #01A368 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(1, 163, 104, 0.25) !important;
}

/* Relace Minimalist Accordion (Border-Bottom Only) */
.relace-accordion .elementor-accordion {
    border: none !important;
}

.relace-accordion .elementor-accordion .elementor-accordion-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    transition: all 0.2s ease !important;
}

.relace-accordion .elementor-accordion .elementor-accordion-item:last-child {
    border-bottom: none !important;
}

.relace-accordion .elementor-accordion .elementor-tab-title {
    background-color: transparent !important;
    padding: 16px 0 !important;
    border: none !important;
}

.relace-accordion .elementor-accordion .elementor-tab-title a {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #1a202c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.relace-accordion .elementor-accordion .elementor-tab-title:hover a,
.relace-accordion .elementor-accordion .elementor-tab-title.elementor-active a {
    color: #004a17 !important;
}

.relace-accordion .elementor-accordion .elementor-tab-content {
    padding: 0 0 20px 0 !important;
    border: none !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #4a5568 !important;
}

/* ==========================================================================
   ACTION RESEARCH (ART) PAGE STYLES & UI/UX ENHANCEMENTS
   ========================================================================== */

/* Hero Badge & Section Headers */
.art-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 74, 23, 0.08);
    color: #004a17;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.art-institute-box {
    background: linear-gradient(135deg, rgba(0, 74, 23, 0.04) 0%, rgba(1, 163, 104, 0.08) 100%);
    border-left: 4px solid #004a17;
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.art-institute-box h4 {
    color: #004a17;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.art-institute-box p {
    color: #2d3748;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* Feature & Principle Cards */
.art-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px 26px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.art-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 74, 23, 0.08);
    border-color: rgba(0, 74, 23, 0.3);
}

.art-card-icon-wrap {
    width: 54px;
    height: 54px;
    background: rgba(0, 74, 23, 0.06);
    color: #004a17;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.art-card:hover .art-card-icon-wrap {
    background: #004a17;
    color: #ffffff;
}

.art-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 12px 0;
}

.art-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0;
    flex-grow: 1;
}

.art-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    color: #166534;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 18px;
    width: fit-content;
}

/* Tools Highlights Grid */
.art-tool-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.art-tool-card:hover {
    border-color: #01A368;
    box-shadow: 0 10px 25px rgba(1, 163, 104, 0.12);
    transform: translateY(-4px);
}

.art-tool-icon {
    font-size: 36px;
    color: #004a17;
    margin-bottom: 12px;
    display: inline-block;
}

.art-tool-title {
    font-size: 17px;
    font-weight: 700;
    color: #004a17;
    margin: 0 0 6px 0;
}

.art-tool-sub {
    font-size: 13px;
    color: #718096;
    margin: 0;
}

/* Project & Collaboration Cards */
.art-project-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.art-project-card:hover {
    box-shadow: 0 14px 30px rgba(0, 74, 23, 0.1);
    transform: translateY(-4px);
    border-color: #01A368;
}

.art-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.art-partner-badge {
    background: #e6f4ea;
    color: #004a17;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.art-project-icon {
    font-size: 24px;
    color: #01A368;
}

.art-project-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 10px 0;
}

.art-project-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #4a5568;
    margin: 0 0 16px 0;
    flex-grow: 1;
}

/* Impact Showcase Banner */
.art-impact-banner {
    background: linear-gradient(135deg, #004a17 0%, #003310 100%);
    border-radius: 20px;
    padding: 44px;
    color: #ffffff;
    box-shadow: 0 12px 35px rgba(0, 74, 23, 0.25);
    position: relative;
    overflow: hidden;
}

.art-impact-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(1, 163, 104, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.art-impact-banner h2 {
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.art-impact-banner p {
    color: #e2e8f0 !important;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

/* CTA Buttons */
.art-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.art-btn-primary {
    background: #004a17;
    color: #ffffff !important;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 74, 23, 0.2);
}

.art-btn-primary:hover {
    background: #01A368;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(1, 163, 104, 0.3);
}

.art-btn-secondary {
    background: transparent;
    color: #004a17 !important;
    border: 2px solid #004a17;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.art-btn-secondary:hover {
    background: rgba(0, 74, 23, 0.06);
    color: #004a17 !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   Pamoja Trust — Programme Pages Shared Design System
   Matches homepage visual DNA: Quicksand · #004a17 · #01A368 · #004a17
   Applied to: action-research, civic-engagement, federation, partnerships, social-enterprise
   ========================================================================== */

/* ── 1. Section Background Alternation (mirrors homepage rhythm) ── */
.pt-prog-section-white   { background-color: #ffffff; }
.pt-prog-section-soft    { background-color: #f7f9f7; border-top: 1px solid #eef2ee; border-bottom: 1px solid #eef2ee; }
.pt-prog-section-olive   { background-color: #004a17; position: relative; overflow: hidden; }
.pt-prog-section-green   { background-color: #004a17; position: relative; overflow: hidden; }

.pt-prog-section-white,
.pt-prog-section-soft,
.pt-prog-section-olive,
.pt-prog-section-green {
    padding: 80px 0;
    width: 100%;
}

/* Olive & green radial overlay (matches snippet-6501 / snippet-6504 pattern) */
.pt-prog-section-olive::before,
.pt-prog-section-green::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 80%, rgba(255,255,255,0.03) 0%, transparent 45%);
    pointer-events: none;
}

.pt-prog-section-olive .pt-prog-inner,
.pt-prog-section-green .pt-prog-inner {
    position: relative;
    z-index: 1;
}

/* ── 2. Auto-container (matches .auto-container on homepage) ── */
.pt-prog-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ── 3. Section Header (pill → title → subtitle) ── */
.pt-prog-sec-header {
    text-align: center;
    margin-bottom: 52px;
}

.pt-prog-sec-pill {
    display: inline-block;
    background: rgba(0, 74, 23, 0.08);
    color: #004a17;
    font-family: "Quicksand", sans-serif;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}

.pt-prog-section-olive .pt-prog-sec-pill,
.pt-prog-section-green .pt-prog-sec-pill {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
}

.pt-prog-sec-title {
    font-family: "Quicksand", sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #1a202c;
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

.pt-prog-section-olive .pt-prog-sec-title,
.pt-prog-section-green .pt-prog-sec-title {
    color: #ffffff;
}

.pt-prog-sec-sub {
    font-family: "Quicksand", sans-serif;
    font-size: 16px;
    color: #64748b;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

.pt-prog-section-olive .pt-prog-sec-sub,
.pt-prog-section-green .pt-prog-sec-sub {
    color: rgba(255,255,255,0.82);
}

/* ── 4. Icon-Circle Card Row (matches Mission/Values widget pattern) ── */
.pt-prog-icon-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pt-prog-icon-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: transform 0.3s ease;
}

.pt-prog-icon-card:first-child {
    border-top: 1px solid rgba(255,255,255,0.12);
}

.pt-prog-icon-card:hover {
    transform: translateX(6px);
}

.pt-prog-icon-circle {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: #01A368;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    transition: transform 0.3s ease, background-color 0.3s ease;
    margin-top: 2px;
}

.pt-prog-icon-card:hover .pt-prog-icon-circle {
    transform: scale(1.1) rotate(-3deg);
    background-color: #018a58;
}

.pt-prog-icon-body {
    flex: 1;
}

.pt-prog-icon-title {
    font-family: "Quicksand", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}

.pt-prog-icon-text {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255,255,255,0.82);
    margin: 0;
}

/* ── 5. Stat Counter Bar (matches footprints_stats widget) ── */
.pt-prog-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-left: 1px solid rgba(255,255,255,0.12);
    margin-top: 52px;
}

.pt-prog-stat-cell {
    text-align: center;
    padding: 36px 20px;
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: background 0.3s ease;
}

.pt-prog-stat-cell:hover {
    background: rgba(255,255,255,0.05);
}

.pt-prog-stat-num {
    font-family: "Quicksand", sans-serif;
    font-size: 52px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.pt-prog-stat-label {
    font-family: "Quicksand", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
    max-width: 160px;
    margin: 0 auto;
}

/* ── 6. Dark Panel + Photo Split (matches programmes_promo widget) ── */
.pt-prog-panel-split {
    display: flex;
    align-items: stretch;
    min-height: 420px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.pt-prog-panel-left {
    flex: 0 0 42%;
    max-width: 42%;
    background-color: #004a17;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.pt-prog-panel-right {
    flex: 1 1 58%;
    overflow: hidden;
    position: relative;
}

.pt-prog-panel-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.pt-prog-panel-right:hover .pt-prog-panel-photo {
    transform: scale(1.04);
}

.pt-prog-panel-label {
    font-family: "Quicksand", sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.pt-prog-panel-heading {
    font-family: "Quicksand", sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 20px;
}

.pt-prog-panel-text {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    margin: 0 0 28px;
}

.pt-prog-panel-btn {
    display: inline-block;
    padding: 13px 36px;
    background: #ffffff;
    color: #004a17;
    border-radius: 50px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.pt-prog-panel-btn:hover {
    background: #01A368;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(1,163,104,0.35);
}

/* ── 7. Card Grid (standard 3-col) ── */
.pt-prog-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.pt-prog-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.pt-prog-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, #004a17 0%, #01A368 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.pt-prog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(0,74,23,0.12);
    border-color: rgba(1,163,104,0.3);
}

.pt-prog-card:hover::before {
    opacity: 1;
}

.pt-prog-card-icon {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, rgba(0,74,23,0.08) 0%, rgba(1,163,104,0.12) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
    transition: all 0.35s ease;
}

.pt-prog-card:hover .pt-prog-card-icon {
    background: linear-gradient(135deg, #004a17 0%, #01A368 100%);
}

.pt-prog-card-title {
    font-family: "Quicksand", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 10px;
}

.pt-prog-card-text {
    font-size: 14px;
    line-height: 1.75;
    color: #4a5568;
    margin: 0;
}

/* ── 8. Impact/CTA Strip (matches homepage contact/CTA section) ── */
.pt-prog-cta-strip {
    text-align: center;
    padding: 60px 30px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.04);
    max-width: 900px;
    margin: 0 auto;
}

.pt-prog-cta-title {
    font-family: "Quicksand", sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #004a17;
    margin: 0 0 14px;
}

.pt-prog-cta-sub {
    font-family: "Quicksand", sans-serif;
    font-size: 16px;
    color: #64748b;
    max-width: 640px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.pt-prog-cta-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pt-prog-btn-primary {
    background: linear-gradient(135deg, #004a17 0%, #01A368 100%);
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.35s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0,74,23,0.25);
}

.pt-prog-btn-primary:hover {
    background: linear-gradient(135deg, #01A368 0%, #004a17 100%);
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(1,163,104,0.4);
}

.pt-prog-btn-secondary {
    background: transparent;
    color: #004a17 !important;
    border: 2px solid #004a17;
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 38px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.35s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pt-prog-btn-secondary:hover {
    background: rgba(0,74,23,0.08);
    color: #004a17 !important;
    transform: translateY(-3px);
}

/* ── 9. Scroll-Driven Animations (same keyframe names as homepage) ── */
@keyframes ptProgReveal {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        .pt-prog-sec-header,
        .pt-prog-card,
        .pt-prog-icon-card,
        .pt-prog-panel-split,
        .pt-prog-stat-cell,
        .pt-prog-cta-strip {
            animation: ptProgReveal auto linear backwards;
            animation-timeline: view();
            animation-range: entry 5% entry 30%;
        }
    }
}

/* IntersectionObserver fallback for browsers without scroll-driven animation support */
@supports not ((animation-timeline: view()) and (animation-range: entry)) {
    .pt-prog-reveal-init {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .pt-prog-reveal-init.pt-prog-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── 10. Responsive ── */
@media (max-width: 1024px) {
    .pt-prog-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .pt-prog-stat-num { font-size: 40px; }
}

@media (max-width: 900px) {
    .pt-prog-panel-split { flex-direction: column; }
    .pt-prog-panel-left  { flex: 1 1 100%; max-width: 100%; padding: 40px 28px; }
    .pt-prog-panel-right { min-height: 260px; flex: 1 1 100%; }
}

@media (max-width: 768px) {
    .pt-prog-section-white,
    .pt-prog-section-soft,
    .pt-prog-section-olive,
    .pt-prog-section-green  { padding: 52px 0; }
    .pt-prog-sec-title      { font-size: 28px; }
    .pt-prog-stats-bar      { grid-template-columns: repeat(2, 1fr); }
    .pt-prog-stat-num       { font-size: 36px; }
    .pt-prog-inner          { padding: 0 20px; }
}


/* ==========================================================================
   Pamoja Trust — Simple Job Board Careers Portal Custom Styling
   Brand: Forest Green #004a17 | Accent Green #01A368 | Dark Olive #004a17
   ========================================================================== */

/* ── 0. Page-level & Outer Container Padding ───────────────────────────── */

/* The Elementor content-wrapper that holds [jobpost] */
.page-id-827 .content-wrapper {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box;
}

/* SJB plugin wrapper */
.sjb-page {
    font-family: "Quicksand", sans-serif !important;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

/* ── 1. Bootstrap .btn-primary override (used by ALL SJB buttons) ──────── */
/* Listing page: "Quick Apply" + "Read More" buttons */
.sjb-listing .btn.btn-primary,
.sjb-listing a.btn.btn-primary,
.sjb-listing .sjb-apply-now-btn .btn,
.sjb-listing .sjb-apply-now-btn a.btn,
#quick-apply-btn,
a#quick-apply-btn {
    background: #004a17 !important;
    background-color: #004a17 !important;
    border-color: #004a17 !important;
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 22px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.sjb-listing .btn.btn-primary:hover,
.sjb-listing a.btn.btn-primary:hover,
.sjb-listing .sjb-apply-now-btn .btn:hover,
#quick-apply-btn:hover {
    background: #01A368 !important;
    background-color: #01A368 !important;
    border-color: #01A368 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(1,163,104,0.25) !important;
}

/* Read More link — outlined green style */
.sjb-listing a.btn.btn-primary:not(#quick-apply-btn) {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #004a17 !important;
    color: #004a17 !important;
}

.sjb-listing a.btn.btn-primary:not(#quick-apply-btn):hover {
    background: #004a17 !important;
    background-color: #004a17 !important;
    color: #ffffff !important;
}

/* Search button */
.btn-search.btn.btn-primary,
.sjb-search-form .btn.btn-primary,
.sjb-search-form input[type="submit"],
.sjb-search-form button[type="submit"] {
    background: #004a17 !important;
    background-color: #004a17 !important;
    border-color: #004a17 !important;
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    height: 48px !important;
    padding: 0 36px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.btn-search.btn.btn-primary:hover,
.sjb-search-form .btn.btn-primary:hover,
.sjb-search-form input[type="submit"]:hover,
.sjb-search-form button[type="submit"]:hover {
    background: #01A368 !important;
    background-color: #01A368 !important;
    border-color: #01A368 !important;
    transform: translateY(-2px);
}

/* Application submit button */
.btn.btn-primary.app-submit,
input.btn.btn-primary.app-submit,
button.btn.btn-primary.app-submit,
.sjb-apply-form input[type="submit"],
.sjb-apply-form button[type="submit"] {
    background: linear-gradient(135deg, #004a17 0%, #01A368 100%) !important;
    background-color: #004a17 !important;
    border-color: #004a17 !important;
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 40px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,74,23,0.22) !important;
}

.btn.btn-primary.app-submit:hover,
.sjb-apply-form input[type="submit"]:hover,
.sjb-apply-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #01A368 0%, #004a17 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(1,163,104,0.32) !important;
}

/* Modal close button */
.btn.btn-app-modal-close {
    background: transparent !important;
    background-color: transparent !important;
    color: #004a17 !important;
    border: 2px solid #004a17 !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 8px 22px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn.btn-app-modal-close:hover {
    background: #004a17 !important;
    color: #ffffff !important;
}

/* "View less" toggle link */
.sjb_view_less_btn,
.sjb_view_more_btn,
a.sjb_view_less_btn,
a.sjb_view_more_btn {
    color: #01A368 !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

.sjb_view_less_btn:hover,
.sjb_view_more_btn:hover {
    color: #004a17 !important;
    text-decoration: underline !important;
}

/* ── 2. Job Search & Filters ───────────────────────────────────────────── */
.sjb-page .sjb-search-form,
.sjb-search-form,
.sjb-filters {
    background: #f7f9f7 !important;
    border: 1px solid #eef2ee !important;
    border-radius: 20px !important;
    padding: 36px 40px !important;
    box-shadow: 0 6px 24px rgba(0,74,23,0.05) !important;
    margin-bottom: 48px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: flex-end !important;
}

.sjb-search-form .form-group,
.sjb-filters > div {
    flex: 1 1 200px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sjb-search-form label {
    font-family: "Quicksand", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #004a17 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: block;
}

.sjb-search-form input[type="text"],
.sjb-search-form select,
.sjb-filters input[type="text"],
.sjb-filters select {
    width: 100% !important;
    height: 50px !important;
    border: 1.5px solid #d1dbd1 !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    background: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.sjb-search-form input[type="text"]:focus,
.sjb-search-form select:focus,
.sjb-filters input[type="text"]:focus,
.sjb-filters select:focus {
    border-color: #01A368 !important;
    box-shadow: 0 0 0 3px rgba(1,163,104,0.12) !important;
}

/* ── 3. Job Listings Grid ──────────────────────────────────────────────── */
.sjb-page .sjb-listing,
.sjb-listing {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
}

/* Each job entry wrapper - Styled as the main Card container */
.sjb-listing .v1 {
    background: #ffffff !important;
    border: 1.5px solid #e4ece4 !important;
    border-radius: 24px !important;
    padding: 32px 36px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 28px !important;
    display: flex !important;
    flex-direction: column !important;
}

.sjb-listing .v1::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: #004a17;
    border-radius: 24px 0 0 24px;
    transition: background 0.3s ease;
}

.sjb-listing .v1:hover::before {
    background: #01A368;
}

.sjb-listing .v1:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 74, 23, 0.08) !important;
    border-color: rgba(1, 163, 104, 0.3) !important;
}

/* Remove default card styles from inner rows */
.sjb-listing .sjb-list-row,
.sjb-list-row,
.row.sjb-list-row {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.row.sjb-list-row::before,
.row.sjb-list-row:hover::before {
    display: none !important;
}

.row.sjb-list-row:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Job listing header (Logo + Title/Meta Row) layout */
.sjb-listing header > .row {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
}

.sjb-listing header > .row > div {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* Expand the title-meta block to fill space */
.sjb-listing header > .row > div.col-md-11 {
    flex: 1 1 0% !important;
}

/* Align company logo */
.sjb-listing header .company-logo {
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.sjb-listing header .company-logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Inner row containing Title and Metadata pills */
.sjb-listing .sjb-list-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 20px !important;
}

.sjb-listing .sjb-list-row > div {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Job title styling inside list cards */
.sjb-listing .job-title {
    font-family: "Quicksand", sans-serif !important;
    color: #004a17 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    display: block;
}

.sjb-listing .job-title a {
    color: #004a17 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.sjb-listing .job-title a:hover {
    color: #01A368 !important;
}

.sjb-listing .job-info h4 {
    margin: 0 !important;
}

/* Description block alignment */
.sjb-listing .job-description {
    margin-left: 84px !important; /* aligned under the title, offset by logo + gap */
    margin-top: 14px !important;
}

.sjb-listing p {
    font-family: "Quicksand", sans-serif !important;
    font-size: 14.5px !important;
    color: #4a5568 !important;
    line-height: 1.8 !important;
    margin: 0 0 16px 0 !important;
    max-width: 800px;
}

/* Badge pills */
.sjb-listing .job-type,
.sjb-listing .job-location,
.sjb-listing .job-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    background: #f7f9f7 !important;
    border: 1px solid #eef2ee !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.sjb-listing .job-type i,
.sjb-listing .job-location i,
.sjb-listing .job-date i {
    color: #01A368 !important;
    font-size: 14px !important;
    margin-right: 0 !important;
    width: auto !important;
    height: auto !important;
}

.sjb-listing .job-type:hover,
.sjb-listing .job-location:hover,
.sjb-listing .job-date:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04) !important;
    border-color: #01A368 !important;
    color: #004a17 !important;
}

/* Buttons section alignment */
.sjb-listing .sjb-apply-now-btn {
    margin-top: 16px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f0f4f0 !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Responsive updates */
@media (max-width: 767px) {
    .sjb-listing header > .row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .sjb-listing .job-description {
        margin-left: 0 !important;
    }
    .sjb-listing header .company-logo {
        display: none !important; /* Hide logo on small screens as logo.php hides it via hidden-xs anyway */
    }
}

/* ── 4. Single Job Detail Page ─────────────────────────────────────────── */
.sjb-page-detail,
.sjb-detail,
.page-template-default .entry-content .sjb-listing {
    max-width: 900px;
    margin: 48px auto;
    padding: 0 24px;
}

/* Job detail title */
.sjb-detail h1.job-title,
.single-jobpost h1.entry-title,
.single-jobpost .page-title {
    font-family: "Quicksand", sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #004a17 !important;
    margin: 0 0 16px 0 !important;
}

/* Meta pill row — location / type */
.sjb-detail .job-meta-details,
.jobpost-detail-meta {
    background: #f7f9f7;
    border-radius: 12px;
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px;
    color: #4a5568;
    border: 1px solid #eef2ee;
    margin-bottom: 28px;
}

.sjb-detail .job-meta-details strong,
.jobpost-detail-meta strong {
    color: #004a17;
    font-weight: 700;
}

/* Job description body */
.sjb-detail .job-description,
.single-jobpost .entry-content {
    font-size: 15px;
    line-height: 1.85;
    color: #334155;
    margin-bottom: 40px;
    font-family: "Quicksand", sans-serif !important;
}

.sjb-detail .job-description h2,
.sjb-detail .job-description h3,
.sjb-detail .job-description h4 {
    font-family: "Quicksand", sans-serif !important;
    color: #004a17 !important;
    margin: 32px 0 14px 0 !important;
}

.sjb-detail .job-description ul {
    padding-left: 20px;
    margin-bottom: 24px;
}

.sjb-detail .job-description li::marker {
    color: #01A368;
}

/* Job features table */
.sjb-job-features-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
    font-family: "Quicksand", sans-serif !important;
}

.sjb-job-features-table th {
    background: #004a17 !important;
    color: #ffffff !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    text-align: left !important;
    font-size: 14px !important;
}

.sjb-job-features-table td {
    padding: 10px 20px !important;
    border-bottom: 1px solid #eef2ee !important;
    font-size: 14px !important;
    color: #334155 !important;
    font-family: "Quicksand", sans-serif !important;
    background: #ffffff !important;
}

.sjb-job-features-table tr:last-child td {
    border-bottom: none !important;
}

.sjb-job-features-table tr:nth-child(even) td {
    background: #f7f9f7 !important;
}

/* ── 5. Application Form ───────────────────────────────────────────────── */
.sjb-page .sjb-apply-form,
.sjb-apply-form,
#sjb-application-form {
    background: #ffffff !important;
    border: 1.5px solid #e4ece4 !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 10px 35px rgba(0,74,23,0.05) !important;
    margin-top: 60px !important;
}

.sjb-apply-form h3,
.sjb-apply-form h2 {
    font-family: "Quicksand", sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #004a17 !important;
    margin: 0 0 24px 0 !important;
}

.sjb-apply-form .form-group {
    margin-bottom: 20px !important;
}

.sjb-apply-form label {
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: block;
}

.sjb-apply-form input[type="text"],
.sjb-apply-form input[type="email"],
.sjb-apply-form input[type="tel"],
.sjb-apply-form textarea,
.sjb-apply-form select {
    width: 100% !important;
    border: 1.5px solid #d1dbd1 !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    background: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.sjb-apply-form input[type="text"]:focus,
.sjb-apply-form input[type="email"]:focus,
.sjb-apply-form input[type="tel"]:focus,
.sjb-apply-form textarea:focus,
.sjb-apply-form select:focus {
    border-color: #01A368 !important;
    box-shadow: 0 0 0 3px rgba(1,163,104,0.12) !important;
}

.sjb-apply-form input[type="file"] {
    display: block;
    margin-top: 8px;
    font-family: "Quicksand", sans-serif !important;
    font-size: 13px;
    color: #4a5568;
}

/* ── 6. SJB Modal / Quick Apply overlay ────────────────────────────────── */
#sjb_quick_apply_modal,
.sjb-modal,
.modal-dialog {
    font-family: "Quicksand", sans-serif !important;
}

#sjb_quick_apply_modal .modal-header,
.sjb-modal .modal-header {
    background: #004a17 !important;
    border-radius: 16px 16px 0 0;
    padding: 20px 28px !important;
}

#sjb_quick_apply_modal .modal-title,
.sjb-modal .modal-title {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    color: #ffffff !important;
}

#sjb_quick_apply_modal .modal-content,
.sjb-modal .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.15) !important;
}

#sjb_quick_apply_modal .close,
.sjb-modal .close,
.btn-close {
    color: #ffffff !important;
    opacity: 0.9 !important;
    text-shadow: none !important;
}

#sjb_quick_apply_modal .modal-footer,
.sjb-modal .modal-footer {
    border-top: 1px solid #eef2ee !important;
    padding: 16px 28px !important;
}

/* ── 7. Notifications ──────────────────────────────────────────────────── */
.sjb-apply-form .alert-success,
.sjb-alert-success {
    background: #e8f5e8 !important;
    border: 1px solid #c8ecc8 !important;
    color: #004a17 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 600 !important;
}

.sjb-apply-form .alert-danger,
.sjb-alert-error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 600 !important;
}

/* ── 8. Pagination ─────────────────────────────────────────────────────── */
.sjb-pagination .page-numbers,
.sjb-pagination a {
    font-family: "Quicksand", sans-serif !important;
    color: #004a17 !important;
    border: 2px solid #004a17 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    display: inline-block;
}

.sjb-pagination .page-numbers.current,
.sjb-pagination a:hover {
    background: #004a17 !important;
    color: #ffffff !important;
}

/* ── 9. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-id-827 .content-wrapper {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 768px) {
    .page-id-827 .content-wrapper {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .row.sjb-list-row {
        padding: 24px 20px 24px 28px !important;
        border-radius: 16px !important;
    }

    .sjb-filters,
    .sjb-search-form {
        padding: 24px 20px !important;
        flex-direction: column !important;
        border-radius: 16px !important;
    }

    .sjb-filters > div,
    .sjb-search-form .form-group {
        flex: 1 1 100% !important;
    }

    .sjb-apply-now-btn {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .sjb-apply-now-btn .btn {
        width: 100% !important;
        text-align: center !important;
    }

    .sjb-detail h1.job-title,
    .single-jobpost h1.entry-title {
        font-size: 26px !important;
    }

    .sjb-apply-form {
        padding: 24px !important;
    }
}

/* ==========================================================================
   Pamoja Trust — Training Materials Page (Resource Repository)
   Brand: Forest Green #004a17 | Accent Green #01A368 | Dark Olive #004a17
   ========================================================================== */

/* ── Override Resource Repository CSS variables with brand colours ───────── */
.page-id-6585 .rr-app,
.rr-app {
    --rr-ink:          #1c2422;
    --rr-muted:        #5b6663;
    --rr-line:         #e2ebe2;
    --rr-bg:           #f7f9f7;
    --rr-card:         #ffffff;
    --rr-accent:       #004a17;
    --rr-accent-light: #e8f5e8;
    --rr-chip:         #eef3ee;
    --rr-radius:       14px;
    font-family: "Quicksand", sans-serif !important;
    max-width: 1100px;
    padding: 0 0 60px;
}

/* ── Page outer container padding ────────────────────────────────────────── */
.page-id-6585 .content-wrapper {
    padding-top:    60px !important;
    padding-bottom: 80px !important;
    padding-left:   32px !important;
    padding-right:  32px !important;
    box-sizing: border-box;
}

/* ── Page intro header block ─────────────────────────────────────────────── */
.rr-page-header {
    background: linear-gradient(135deg, #004a17 0%, #01A368 100%);
    border-radius: 20px;
    padding: 52px 56px;
    margin-bottom: 48px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.rr-page-header::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}

.rr-page-header::after {
    content: '';
    position: absolute;
    bottom: -80px; left: 40px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}

.rr-page-header h1 {
    font-family: "Quicksand", sans-serif !important;
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 14px;
    color: #ffffff !important;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.rr-page-header p {
    font-family: "Quicksand", sans-serif !important;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255,255,255,0.9) !important;
    margin: 0;
    max-width: 640px;
    position: relative;
    z-index: 1;
}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.rr-search-box input {
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px !important;
    padding: 13px 44px 13px 44px !important;
    border-radius: 50px !important;
    border: 1.5px solid #d1dbd1 !important;
    height: 50px !important;
}

.rr-search-box input:focus {
    border-color: #01A368 !important;
    box-shadow: 0 0 0 3px rgba(1,163,104,0.12) !important;
}

/* ── Sort select ─────────────────────────────────────────────────────────── */
.rr-sort select {
    font-family: "Quicksand", sans-serif !important;
    border-radius: 10px !important;
    border: 1.5px solid #d1dbd1 !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
}

/* ── Category pills ──────────────────────────────────────────────────────── */
.rr-category-pill {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 18px !important;
    border-radius: 50px !important;
    background: #eef3ee !important;
    color: #4a5568 !important;
    border: 1.5px solid transparent !important;
    transition: all 0.25s ease !important;
}

.rr-category-pill:hover {
    background: #e8f5e8 !important;
    color: #004a17 !important;
    border-color: rgba(0,74,23,0.2) !important;
}

.rr-category-pill.active {
    background: #004a17 !important;
    color: #ffffff !important;
    border-color: #004a17 !important;
    box-shadow: 0 4px 12px rgba(0,74,23,0.2) !important;
}

/* ── Type chips ──────────────────────────────────────────────────────────── */
.rr-type-chip {
    font-family: "Quicksand", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    padding: 7px 14px !important;
    border: 1.5px solid #d1dbd1 !important;
    transition: all 0.25s ease !important;
}

.rr-type-chip.selected {
    background: #e8f5e8 !important;
    border-color: #01A368 !important;
    color: #004a17 !important;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.rr-grid {
    gap: 24px !important;
}

.rr-card {
    border-radius: 18px !important;
    border: 1.5px solid #e4ece4 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.025) !important;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

.rr-card:hover {
    box-shadow: 0 16px 40px rgba(0,74,23,0.08) !important;
    transform: translateY(-5px) !important;
    border-color: rgba(1,163,104,0.3) !important;
}

.rr-card-body {
    padding: 22px 24px 24px !important;
    gap: 10px !important;
}

.rr-card-type {
    font-family: "Quicksand", sans-serif !important;
    background: #e8f5e8 !important;
    color: #004a17 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    padding: 4px 12px !important;
}

.rr-card-title {
    font-family: "Quicksand", sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1c2422 !important;
    line-height: 1.35 !important;
}

.rr-card-excerpt {
    font-family: "Quicksand", sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: #5b6663 !important;
}

.rr-card-footer {
    border-top: 1px solid #eef3ee !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 12px !important;
}

/* ── Inline detail panel ─────────────────────────────────────────────────── */
.rr-inline-detail {
    border-radius: 20px !important;
    border: 1.5px solid #e4ece4 !important;
    padding: 36px 40px !important;
    box-shadow: 0 10px 35px rgba(0,74,23,0.06) !important;
}

.rr-detail-title {
    font-family: "Quicksand", sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #004a17 !important;
}

.rr-detail-type {
    background: #e8f5e8 !important;
    color: #004a17 !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 800 !important;
}

.rr-detail-section h4 {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 800 !important;
    color: #004a17 !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
}

.rr-detail-section p,
.rr-detail-section ul,
.rr-detail-section li {
    font-family: "Quicksand", sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
}

.rr-detail-section li::marker {
    color: #01A368 !important;
}

.rr-detail-close {
    background: #eef3ee !important;
    color: #004a17 !important;
    transition: all 0.2s ease !important;
}

.rr-detail-close:hover {
    background: #004a17 !important;
    color: #ffffff !important;
}

/* ── Action buttons (Download / View) ────────────────────────────────────── */
.rr-btn {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 50px !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.rr-btn-primary {
    background: linear-gradient(135deg, #004a17 0%, #01A368 100%) !important;
    border-color: #004a17 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0,74,23,0.22) !important;
}

.rr-btn-primary:hover {
    background: linear-gradient(135deg, #01A368 0%, #004a17 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(1,163,104,0.32) !important;
    color: #ffffff !important;
}

.rr-btn-secondary {
    background: #ffffff !important;
    border: 2px solid #004a17 !important;
    color: #004a17 !important;
}

.rr-btn-secondary:hover {
    background: #004a17 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.rr-page-btn {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: 1.5px solid #d1dbd1 !important;
    transition: all 0.25s ease !important;
}

.rr-page-btn.active {
    background: #004a17 !important;
    border-color: #004a17 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,74,23,0.2) !important;
}

.rr-page-btn:not(.active):hover {
    border-color: #01A368 !important;
    color: #004a17 !important;
}

/* ── Card expanded state ─────────────────────────────────────────────────── */
.rr-card.expanded {
    border-color: #01A368 !important;
    box-shadow: 0 0 0 3px rgba(1,163,104,0.15) !important;
}

/* ── Results bar ─────────────────────────────────────────────────────────── */
.rr-results-info {
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px !important;
}

.rr-results-info strong {
    color: #004a17 !important;
    font-weight: 800 !important;
}

/* ── Filter label ────────────────────────────────────────────────────────── */
.rr-filter-label {
    font-family: "Quicksand", sans-serif !important;
    color: #004a17 !important;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.rr-empty {
    font-family: "Quicksand", sans-serif !important;
    padding: 80px 20px !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-id-6585 .content-wrapper {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .rr-page-header {
        padding: 40px 36px !important;
    }
}

@media (max-width: 768px) {
    .page-id-6585 .content-wrapper {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .rr-page-header {
        padding: 32px 24px !important;
        border-radius: 16px !important;
    }

    .rr-page-header h1 {
        font-size: 26px !important;
    }

    .rr-inline-detail {
        padding: 24px !important;
    }

    .rr-detail-actions {
        flex-direction: column !important;
    }

    .rr-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   WEBSITE LOGO OPTIMIZATION (ENLARGED & WELL VISIBLE)
   ========================================================================== */

/* Main Header Logo */
.main-header .header-upper .logo-box {
    padding: 8px 0 !important;
}

.main-header .header-upper .logo-box .logo img {
    height: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    transition: all 0.3s ease-in-out;
}

/* Sticky Header Logo */
.main-header .sticky-header .logo img {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
    transition: all 0.3s ease-in-out;
}

/* Mobile & Nav Logo */
.mobile-menu .nav-logo img,
.nav-logo img {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
}

/* Footer Logo & Tagline Visibility */
.pasgr-footer-logo img {
    max-height: 72px !important;
    height: auto !important;
    width: auto !important;
    margin-bottom: 12px;
}

.pasgr-footer-tagline {
    font-family: "Quicksand", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    color: #1a202c !important;
    margin: 8px 0 0 !important;
    display: block !important;
}

/* ==========================================================================
   CONTACT PAGE BRANDING (PAMOJA TRUST PRIMARY COLORS)
   ========================================================================== */

/* Contact Section Title Decors */
.page-id-847 .sec-title .text-decoration::before,
.page-id-847 .sec-title .text-decoration .left::before,
.page-id-847 .sec-title .text-decoration .left::after,
.page-id-847 .sec-title .text-decoration .right::before,
.page-id-847 .sec-title .text-decoration .right::after {
    background-color: #fbd45a !important; /* Dandelion gold */
}

.page-id-847 .sec-title .text-decoration .left,
.page-id-847 .sec-title .text-decoration .right {
    background-color: #004a17 !important; /* Crusoe primary dark green */
}

/* Headings */
.page-id-847 .sec-title h2,
.page-id-847 .contact-info-block-two .inner-box h4,
.page-id-847 .heighlight-block .inner-box h4 {
    color: #004a17 !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
}

/* Theme Button - Style One (Primary Submit Button) */
.page-id-847 .theme-btn.btn-style-one {
    background-color: #004a17 !important;
    border-color: #004a17 !important;
    color: #ffffff !important;
}

.page-id-847 .theme-btn.btn-style-one:hover {
    background-color: #157347 !important; /* Jewel green on hover */
    border-color: #157347 !important;
}

.page-id-847 .theme-btn.btn-style-one .btn-title {
    color: #ffffff !important;
}

/* Theme Button - Style Two (Info Cards Live Chat / Join Buttons) */
.page-id-847 .theme-btn.btn-style-two {
    background-color: transparent !important;
    border: 2px solid #004a17 !important;
    color: #004a17 !important;
}

.page-id-847 .theme-btn.btn-style-two:hover {
    background-color: #004a17 !important;
    color: #ffffff !important;
}

.page-id-847 .theme-btn.btn-style-two .btn-title {
    color: inherit !important;
}

/* Contact Info Cards (V4 & V5) Hover effects */
.page-id-847 .heighlight-block .inner-box:hover,
.page-id-847 .contact-info-block-two .inner-box:hover {
    border-color: #157347 !important;
    box-shadow: 0 10px 30px rgba(0, 74, 23, 0.1) !important;
}

.page-id-847 .heighlight-block .inner-box::before {
    background-color: #004a17 !important;
}

/* Form Fields Focus Styles */
.page-id-847 .contact-form input[type="text"]:focus,
.page-id-847 .contact-form input[type="email"]:focus,
.page-id-847 .contact-form textarea:focus,
.page-id-847 .contact-form select:focus {
    border-color: #157347 !important;
    box-shadow: 0 0 8px rgba(21, 115, 71, 0.2) !important;
}

/* Icons inside highlight and contact info blocks */
.page-id-847 .heighlight-block .icon,
.page-id-847 .heighlight-block .icon i,
.page-id-847 .heighlight-block .icon span,
.page-id-847 .contact-info-block-two .icon,
.page-id-847 .contact-info-block-two .icon i,
.page-id-847 .contact-info-block-two .icon span {
    color: #004a17 !important;
}

.page-id-847 .heighlight-block .icon img,
.page-id-847 .contact-info-block-two .icon img {
    filter: grayscale(100%) sepia(100%) saturate(600%) hue-rotate(95deg) brightness(60%) contrast(130%) !important;
    transition: all 0.3s ease;
}

.page-id-847 .heighlight-block .inner-box:hover .icon img,
.page-id-847 .contact-info-block-two .inner-box:hover .icon img {
    filter: grayscale(100%) brightness(200%) contrast(100%) !important;
}

/* Links inside Contact Info widgets */
.page-id-847 .contact-info-block-two .inner-box ul li a {
    color: #333333 !important;
    transition: color 0.3s ease;
}

.page-id-847 .contact-info-block-two .inner-box ul li a:hover {
    color: #157347 !important;
}

/* Social links icons */
.page-id-847 .social-links ul li a {
    color: #004a17 !important;
    border-color: #004a17 !important;
}

.page-id-847 .social-links ul li a:hover {
    background-color: #004a17 !important;
    color: #ffffff !important;
}

/* =========================================================================
   Pamoja Trust Custom Styles — Programs Section Horizontal Cards Grid
   ========================================================================= */

.programs-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

@media (max-width: 991px) {
    .programs-horizontal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.program-horizontal-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #004a17;
    border-radius: 8px;
    padding: 24px 30px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.program-horizontal-box:hover {
    background-color: #01A368;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(1, 163, 104, 0.25);
}

.program-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.program-icon-box {
    font-size: 32px;
    color: #01A368;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.program-icon-box i {
    font-size: inherit;
    color: inherit;
}

.program-horizontal-box:hover .program-icon-box {
    color: #ffffff;
}

.program-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
    text-transform: none;
}

.program-right {
    flex-shrink: 0;
}

.program-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 18px;
    border-radius: 30px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.program-action-btn i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.program-action-btn:hover {
    background-color: #ffffff;
    color: #004a17;
    border-color: #ffffff;
}

.program-action-btn:hover i {
    transform: translateX(3px);
}

.program-horizontal-box:hover .program-action-btn {
    border-color: rgba(255, 255, 255, 0.7);
}

.program-horizontal-box:hover .program-action-btn:hover {
    color: #01A368;
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .programs-horizontal-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .program-horizontal-box {
        padding: 20px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .program-right {
        width: 100%;
        text-align: right;
    }
    .program-action-btn {
        width: auto;
    }
}

/* ── 4a. Single Job Detail Page - Custom Modern Improvements ───────────────── */
.sjb-detail .job-detail h2,
.sjb-detail h2 span.job-title {
    font-family: "Quicksand", sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #004a17 !important;
    line-height: 1.3 !important;
    margin: 0 0 16px 0 !important;
}

.sjb-detail .header-margin-top {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 15px !important;
    padding: 0 !important;
}

.sjb-detail .header-margin-top > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 16px 0 28px 0 !important;
}

.sjb-detail .header-margin-top > .row > div[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sjb-detail .job-type,
.sjb-detail .job-location,
.sjb-detail .job-date,
.sjb-detail .job-deadline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sjb-detail .job-type i,
.sjb-detail .job-location i,
.sjb-detail .job-date i,
.sjb-detail .job-deadline i {
    color: #01A368 !important;
    font-size: 15px !important;
    margin-right: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Hover effects for regular metadata pills */
.sjb-detail .job-type:hover,
.sjb-detail .job-location:hover,
.sjb-detail .job-date:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) !important;
    border-color: #01A368 !important;
    color: #004a17 !important;
}

/* Standout styling for the Deadline badge */
.sjb-detail .job-deadline {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border-color: #fee2e2 !important;
    font-weight: 700 !important;
}

.sjb-detail .job-deadline i {
    color: #ef4444 !important;
}

/* Hover effect for the Deadline badge */
.sjb-detail .job-deadline:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(153, 27, 27, 0.08), 0 2px 4px -1px rgba(153, 27, 27, 0.04) !important;
    border-color: #fca5a5 !important;
    background: #fff5f5 !important;
}

@media (max-width: 600px) {
    .sjb-detail .header-margin-top > .row {
        flex-direction: row !important; /* Keep horizontal flex wrap for nice pill wrapping */
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 !important;
    }
}

/* Hide the page-title banner section specifically on single job detail pages */
.single-jobpost .page-title {
    display: none !important;
}

/* Adjust top padding on job page container to account for hidden banner */
.single-jobpost .sidebar-page-container {
    padding-top: 40px !important;
}


/* ── Fix: Job title wraps to next line, badges fall below ───────────────── */
/* The title lives in .col-md-5 inside .sjb-list-row – force it to full width */
.sjb-listing .row.sjb-list-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 16px !important;
    margin: 0 !important;
}

/* Title column: full width so badges wrap below */
.sjb-listing .row.sjb-list-row > div.col-md-5 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Allow the h4 and anchor to wrap naturally */
.sjb-listing .row.sjb-list-row .job-info h4,
.sjb-listing .row.sjb-list-row .job-info h4 a {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
    width: 100% !important;
}

/* Badge columns: auto-sized and inline after the title */
.sjb-listing .row.sjb-list-row > div.col-md-2,
.sjb-listing .row.sjb-list-row > div.col-md-3,
.sjb-listing .row.sjb-list-row > div.col-sm-4 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
}

/* ── Fix: Search form filters always visible ────────────────────────────── */
/* Ensure the search form has enough height even when dropdowns are empty    */
.sjb-page .sjb-search-form,
.sjb-search-form,
.sjb-filters {
    min-height: 120px !important;
    align-items: center !important;
}

/* Give each filter wrapper a minimum size so it's always visible */
.sjb-search-form .form-group,
.sjb-search-form .col-md-3,
.sjb-filters > div {
    min-width: 140px !important;
    min-height: 50px !important;
    flex: 1 1 180px !important;
}

/* Ensure select elements always render with a visible height */
.sjb-search-form select,
.sjb-filters select {
    min-height: 50px !important;
    height: 50px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure checkbox/small input in search form is not collapsed */
.sjb-search-form input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    cursor: pointer !important;
}