/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 16 2026 | 12:15:16 */
/* =========================================================
   PND LEFT PANEL CUSTOMISATION
   Pages:
   4143 = Join Tatreez Workshops
   4144 = Join Our Event

   DESKTOP:
   - Green panel
   - Remove old background image/pattern
   - Keep centred PND logo

   MOBILE:
   - Hide large middle logo
   - Keep small top PND branding
   - Prevent heading/text overlap
   - Remove desktop absolute positioning
   ========================================================= */


/* =========================================================
   BASE / DESKTOP
   ========================================================= */

body:is(.page-id-4143, .page-id-4144) .pndx-visual {
    position: relative !important;

    background-image: none !important;
    background-color: #087A3E !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* Make descendants predictable */
body:is(.page-id-4143, .page-id-4144) .pndx-visual,
body:is(.page-id-4143, .page-id-4144) .pndx-visual *,
body:is(.page-id-4143, .page-id-4144) .pndx-visual *::before,
body:is(.page-id-4143, .page-id-4144) .pndx-visual *::after {
    box-sizing: border-box;
}


/* =========================================================
   GREEN PANEL SHADE
   ========================================================= */

body:is(.page-id-4143, .page-id-4144) .pndx-visual__shade {
    position: absolute !important;
    inset: 0 !important;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.00) 0%,
        rgba(0, 0, 0, 0.08) 55%,
        rgba(0, 0, 0, 0.38) 100%
    ) !important;

    z-index: 1 !important;
    pointer-events: none !important;
}


/* =========================================================
   ORIGINAL CONTENT
   ========================================================= */

body:is(.page-id-4143, .page-id-4144) .pndx-visual__top,
body:is(.page-id-4143, .page-id-4144) .pndx-visual__body,
body:is(.page-id-4143, .page-id-4144) .pndx-visual__line {
    position: relative !important;
    z-index: 5 !important;
}


/* =========================================================
   CENTRED DESKTOP LOGO
   ========================================================= */

body:is(.page-id-4143, .page-id-4144) .pndx-middle-logo {
    position: absolute !important;

    top: 48% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 35px !important;

    z-index: 3 !important;

    pointer-events: none !important;
}


/* Desktop logo image */
body:is(.page-id-4143, .page-id-4144) .pndx-middle-logo img {
    display: block !important;

    width: min(340px, 76%) !important;
    max-width: 340px !important;

    height: auto !important;

    object-fit: contain !important;

    margin: 0 auto !important;
}


/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 768px) {

    body:is(.page-id-4143, .page-id-4144) .pndx-middle-logo {
        display: flex !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       MAIN GREEN PANEL
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144) .pndx-visual {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;

        background-image: none !important;
        background-color: #087A3E !important;

        border-radius: 14px 14px 0 0 !important;
    }


    /* -----------------------------------------
       HIDE LARGE CENTRE LOGO ON MOBILE
       This was overlapping the title
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144) .pndx-middle-logo {
        display: none !important;
    }


    /* -----------------------------------------
       SHADE
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144) .pndx-visual__shade {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(0, 0, 0, 0.04) 65%,
            rgba(0, 0, 0, 0.18) 100%
        ) !important;
    }


    /* -----------------------------------------
       TOP AREA
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144) .pndx-visual__top {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 18px 18px 0 !important;

        transform: none !important;

        z-index: 5 !important;
    }


    /* Reset direct children of top area */
    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__top > * {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        transform: none !important;
    }


    /* -----------------------------------------
       MAIN BODY CONTENT
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144) .pndx-visual__body {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 14px 18px 12px !important;

        transform: none !important;
        translate: none !important;

        overflow: visible !important;

        z-index: 5 !important;
    }


    /* Reset direct children positioned for desktop */
    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body > * {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        transform: none !important;
        translate: none !important;

        width: auto !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* -----------------------------------------
       EYEBROW / SMALL LABEL
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body :is(
        .eyebrow,
        .kicker,
        .label,
        .subheading,
        [class*="eyebrow"],
        [class*="kicker"]
    ) {
        position: relative !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: 1.2px !important;
        font-weight: 700 !important;

        transform: none !important;
    }


    /* -----------------------------------------
       MAIN HEADING
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h1,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h2,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h3 {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 310px !important;

        margin: 8px 0 12px !important;
        padding: 0 !important;

        font-size: clamp(30px, 8vw, 35px) !important;
        line-height: 1.02 !important;

        letter-spacing: -0.8px !important;
        font-weight: 700 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        transform: none !important;
        translate: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 6 !important;
    }


    /* Prevent heading spans creating overlapping layers */
    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h1 span,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h2 span,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h3 span,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h1 strong,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h2 strong,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h3 strong {

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: inline !important;

        transform: none !important;
        translate: none !important;

        white-space: normal !important;
    }


    /* -----------------------------------------
       BODY PARAGRAPH
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body p {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        width: 100% !important;
        max-width: 310px !important;

        height: auto !important;

        margin: 0 0 16px !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1.55 !important;

        white-space: normal !important;

        transform: none !important;
        translate: none !important;
    }


    /* -----------------------------------------
       BUTTON / TAG AREA
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body :is(
        .buttons,
        .button-row,
        .tags,
        .pills,
        [class*="button"],
        [class*="tags"],
        [class*="pills"]
    ) {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        transform: none !important;
    }


    /* Buttons / pills themselves */
    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body a,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body button {
        max-width: 100% !important;
    }


    /* -----------------------------------------
       BOTTOM DECORATIVE / PROGRESS LINE
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144) .pndx-visual__line {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 14px 18px 18px !important;
        padding: 0 !important;

        transform: none !important;
        translate: none !important;

        z-index: 5 !important;
    }


    /* -----------------------------------------
       KILL DESKTOP FIXED HEIGHTS
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual [style*="height"] {
        max-height: none !important;
    }


    /* -----------------------------------------
       PREVENT HORIZONTAL OVERFLOW
       ----------------------------------------- */

    body:is(.page-id-4143, .page-id-4144)
    :is(
        .pndx-visual,
        .pndx-visual__top,
        .pndx-visual__body,
        .pndx-visual__line
    ) {
        max-width: 100% !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__top {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h1,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h2,

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body h3 {
        max-width: 290px !important;

        font-size: 30px !important;
        line-height: 1.03 !important;
    }

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__body p {
        max-width: 290px !important;
    }

    body:is(.page-id-4143, .page-id-4144)
    .pndx-visual__line {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}