/* 1. Typography and Color */
#home-testimonial .testimonial_slider p {
    /* Quote Text: Large, Bold, Dark Blue, Centered */
    font-family: Spartan !important;
    font-size: 40px !important; /* Use !important to override potential inline styles or other theme CSS */
    font-weight: 900 !important;
    line-height: 53px !important;
    color: #1D2F6E !important; /* Dark Navy Blue */
    text-align: center !important;
    padding: 0 50px; /* Add horizontal padding to separate text from arrows */
}

#home-testimonial .testimonial_slider .testimonial-name {
    /* Byline Text: Smaller, Regular Weight, Dark Blue, Centered */
    font-family: Spartan !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1D2F6E !important;
    text-align: center !important;
    display: block !important;
    margin-top: 20px !important;
}

/* 2. Navigation Arrows (Left/Right) */
#home-testimonial .testimonial-next-prev {
    /* Position the control container absolutely within the slider to span full width */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; 
}

#home-testimonial .testimonial-next-prev .prev,
#home-testimonial .testimonial-next-prev .next {
    /* Style the arrows to be large, dark blue, and vertically centered */
    font-size: 2.5rem !important; /* Make the arrows large */
    color: #1D2F6E !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    top: 50% !important; /* Center vertically */
    transform: translateY(-50%) !important;
    position: absolute !important; /* Ensure they float over the content */
    cursor: pointer;
}

#home-testimonial .testimonial-next-prev .prev {
    left: 20px !important; /* Position on the far left */
}

#home-testimonial .testimonial-next-prev .next {
    right: 20px !important; /* Position on the far right */
}

/* 3. Cleanup (Hiding the numeric/dot controls) */
#home-testimonial .testimonial_slider .controls {
    display: none !important; /* Hide the numeric pagination */
}
#home-testimonial .testimonial_slider[data-style="minimal"] blockquote:before {
 display: none;
}
#home-testimonial .testimonial_slider blockquote .open-quote {
    font-size: 36px;
}
/* CSS to ensure open and close quotes inherit the style of the main text */
#home-testimonial .testimonial_slider .open-quote, 
#home-testimonial .testimonial_slider .close-quote {
    /* Inherit the size, weight, and color set on the parent <p> element */
    font-size: inherit !important; 
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}
/* Updated CSS to make the arrows slightly bigger */

#home-testimonial .testimonial-next-prev .prev,
#home-testimonial .testimonial-next-prev .next {
    /* Style the arrows to be large, dark blue, and vertically centered */
    /* Increased the font-size from 2.5rem to 3.0rem for a noticeable but slight increase */
    font-size: 3.0rem !important; 
    color: #1D2F6E !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    top: 50% !important; 
    transform: translateY(-50%) !important;
    position: absolute !important; 
    cursor: pointer;
}

#home-testimonial .testimonial-next-prev .prev {
    left: 20px !important; 
}

#home-testimonial .testimonial-next-prev .next {
    right: 20px !important; 
}

#home-testimonial .testimonial_slider[data-style="minimal"] .testimonial-next-prev .next:hover:after, 
#home-testimonial .testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev:hover:after {
    display: none;
}

#home-testimonial .testimonial_slider[data-style="minimal"] .testimonial-next-prev .next:hover:before {
    transform: none;
}

#home-testimonial .testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev:hover:before {
    transform: none;
}



/* 1. Ensure the main background image is displayed correctly (already set in HTML, but good practice) */
#featured-logos .row-bg-wrap {
    /* Make sure the dark, mossy background image covers the area */
    background-size: cover;
    background-position: center center;
}

/* 1. Ensure the main background image is displayed correctly (already set in HTML, but good practice) */
#featured-logos .wpb_wrapper .wpb_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

/* 2. Center the main heading "As Featured In" and ensure it's white (already in HTML, but a safe target) */
#featured-logos h2 {
    text-align: center !important;
    color: white !important;
    margin-bottom: 40px !important; /* Add space between the title and the logos */
    font-family: Spartan !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 53px !important;
}

/* 3. Style the logo rows using Flexbox for centering and spacing */
#featured-logos .inner_row .row_col_wrap_12_inner {
    /* Apply flexbox to the inner wrapper to control logo alignment */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Center the logos in the row */
    align-items: center !important;
    gap: 30px !important; /* Add spacing between logos in the row */
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Add vertical space between the two rows */
    width: 100% !important; /* Ensure the wrapper takes full width for centering */
}

#featured-logos .inner_row .row_col_wrap_12_inner:last-child {
    gap: 0 !important;
}

/* 4. Style the individual logo wrappers */
#featured-logos .img-with-aniamtion-wrap {
    /* Ensure logos are treated as flexible items and maintain spacing */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 15px !important; /* Control horizontal spacing around each logo */
    display: flex;
    justify-content: center;
    align-items: center;
    /* You may need to constrain the max width of the logo wrappers if they are too wide on small screens */
    max-width: 180px; 
}

/* 5. Style the logo images themselves (SVG/PNG) */
#featured-logos img {
    /* Ensure the logos appear white/bright as in the image */
    /* This assumes the logo SVGs/images are inherently white or a similar bright color. 
       If not, you might need an SVG filter, but that's complex and not guaranteed to work on all images. */
    opacity: 1 !important; 
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2)); /* Optional: subtle shadow to make them pop */
    height: auto !important;
    max-width: 100% !important; /* Ensure logos scale down */
}

/* 6. Specific height adjustments for better vertical alignment (logos have different aspect ratios) */
/* We can try to set a max height for all images to align them vertically */
#featured-logos img {
    max-height: 50px !important; /* Adjust this value to control the overall size of the logos */
    width: auto !important;
}

/* ========================================================================= */
/* MOBILE MEDIA QUERY (Screens 767px and smaller) */
/* ========================================================================= */

@media only screen and (max-width: 916px) {
    
    /* Testimonials Adjustments */
    #home-testimonial .testimonial_slider p {
        /* Reduce font size for readability on small screens */
        font-size: 1.4rem !important; 
        /* Reduce horizontal padding to use more screen width */
        padding: 0 10px; 
    }

    /* CONSOLIDATED ARROW STYLING - Applicable globally (Desktop and Mobile) */
    #home-testimonial .testimonial-next-prev .prev,
    #home-testimonial .testimonial-next-prev .next {
        /* Style the arrows to be large, dark blue, and vertically centered */
        font-size: 3.0rem !important; /* Final desired size */
        color: #1D2F6E !important;
        opacity: 1 !important;
        background: none !important;
        border: none !important;
        top: 50% !important; /* Center vertically */
        transform: translateY(-50%) !important;
        position: absolute !important; /* Ensure they float over the content */
        cursor: pointer;
    }

    #home-testimonial .testimonial-next-prev .prev {
        left: 0 !important; 
        right: auto !important; /* Ensure left positioning is explicit */
        z-index: 1000;
    }

    #home-testimonial .testimonial-next-prev .next {
        right: 0 !important; 
        left: auto !important; /* Ensure right positioning is explicit */
        z-index: 1000;
    }
    /* Featured Logos Adjustments (No changes from previous mobile version) */
    #featured-logos h2 {
        margin-bottom: 20px !important; 
    }

    #featured-logos .inner_row .row_col_wrap_12_inner {
        gap: 0 !important; 
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #featured-logos .img-with-aniamtion-wrap {
        max-width: 120px; 
        margin: 0 5px !important;
    }

    #featured-logos img {
        max-height: 63px !important; 
    }


    #featured-logos .wpb_wrapper .wpb_wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 22px;
    }

    #featured-logos h2 {
        font-size: 32px !important;
        margin-bottom: 10px !important;
    }

    #home-testimonial .testimonial_slider p {
        line-height: 30px !important;
    }
}

@media only screen and (max-width: 665px) {
    #featured-logos .wpb_wrapper .wpb_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
    }
    #home-testimonial .testimonial_slider[data-style="minimal"] blockquote {
        z-index: 1 !important;
    }
}

#numbers-section .nectar-hor-list-item {
    border-bottom: none !important;
}

#numbers-section .nectar-hor-list-item:last-child {
    padding-top: 0px;
    text-align: center;
    display: flex;
    display: none !important;
}

#numbers-section .nectar-hor-list-item:last-child .nectar-list-item {
    font-family: Spartan !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1D2F6E !important;
    padding: 0 41px;
}

/* ========================================================================= */
/* STATS LIST BASE STYLES (Desktop and Tablet) */
/* ========================================================================= */

#numbers-section .nectar-hor-list-item {
    /* Set up the main container for centering and spacing */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Align numbers and text to the top */
    padding: 40px 20px 0px !important;
    background-color: #f7f7f7 !important; /* Light gray background from image */
}

#numbers-section .nectar-list-item {
    /* Style for each individual stat block */
    flex: 1 1 20%; /* Allow 4 items per row on desktop */
    max-width: 25%;
    text-align: center !important;
    padding: 0; /* Add bottom padding to separate from next section */
}

#numbers-section .nectar-list-item h2 {
    /* Style the main number (35+, 28,000, etc.) */
    font-size: 50px !important; /* Large, prominent size */
    font-weight: 900 !important; /* Extra bold */
    color: #1D2F6E !important; /* Dark navy blue from the previous sections */
    margin-bottom: 10px !important;
    line-height: 53px !important;
    text-transform: none !important; /* Ensure no unwanted capitalization */
}

/* ------------------------------------------------------------------------- */
/* 1. ADDING SUBTITLES USING CSS GENERATED CONTENT (:after) */
/* ------------------------------------------------------------------------- */

/* Targeting the first list item: 35+ */
#numbers-section .nectar-list-item:nth-child(1) h2:after {
    content: "Community Screenings Across Aotearoa";
    font-family: Spartan !important;
    display: block;
    font-size: 18px !important;
    font-weight: 600; /* Regular weight for subtitle */
    color: #1D2F6E;
    line-height: 30px;
    margin-top: 11px;
    max-width: 250px;
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
}

/* Targeting the second list item: 28,000 */
#numbers-section .nectar-list-item:nth-child(2) h2:after {
    content: "YouTube Views";
    font-family: Spartan !important;
    display: block;
    font-size: 18px !important;
    font-weight: 600; /* Regular weight for subtitle */
    color: #1D2F6E;
    line-height: 30px;
    margin-top: 11px;
    max-width: 250px;
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
}

/* Targeting the third list item: 9,000+ (Assuming the image is slightly out of date) */
#numbers-section .nectar-list-item:nth-child(3) h2:after {
    content: "Views on TVNZ+"; /* Using the clearest subtitle from the image */
    font-family: Spartan !important;
    display: block;
    font-size: 18px !important;
    font-weight: 600; /* Regular weight for subtitle */
    color: #1D2F6E;
    line-height: 30px;
    margin-top: 11px;
    max-width: 250px;
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
}

/* Targeting the fourth list item: 1,340+ */
#numbers-section .nectar-list-item:nth-child(4) h2:after {
    content: "Policy Brief Views";
    font-family: Spartan !important;
    display: block;
    font-size: 18px !important;
    font-weight: 600; /* Regular weight for subtitle */
    color: #1D2F6E;
    line-height: 30px;
    margin-top: 11px;
    max-width: 250px;
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
}


/* ========================================================================= */
/* MOBILE MEDIA QUERY (Screens 767px and smaller) */
/* ========================================================================= */

@media only screen and (max-width: 1119px) {
    
    #numbers-section .nectar-hor-list-item {
        padding: 30px 10px !important;
    }

    #numbers-section .nectar-list-item {
        /* Make them two columns on mobile (50% width each) */
        flex: 1 1 45% !important; 
        max-width: 50% !important;
        padding: 10px 10px 40px 10px; /* Adjust padding for wrapping */
    }

    #numbers-section .nectar-list-item h2 {
        /* Reduce the main number size on mobile */
        font-size: 2rem !important; 
        margin-bottom: 5px !important;
    }

    /* Reduce subtitle font size in the media query for all items */
    #numbers-section .nectar-list-item h2:after {
        font-size: 0.8rem !important;
    }
}

@media only screen and (max-width: 512px) {
    #numbers-section .nectar-list-item {
        /* *** STACK ITEMS VERTICALLY (1 COLUMN) *** */
        flex: 1 1 100% !important; 
        max-width: 100% !important;
        padding: 10px 10px 30px 10px; /* Reduced bottom padding slightly */
    }
    
    #numbers-section .nectar-list-item h2 {
        /* Slightly bump up the font size now that they have full width */
        font-size: 2.2rem !important;
    }

    #numbers-section .nectar-hor-list-item {
        padding: 30px 10px !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
    }
}