/* Reserch Text  */
        :root {
            --primary-green: #166534; /* Dark green */
            --light-bg: #f9fafb;     /* Light gray */
            --hover-bg: rgba(22, 101, 52, 0.05);
        }

        /* Container for full-width section (edge-to-edge) */
        .kazire-research-container {
            /* Isolation Styles */
            font-family: 'Inter', sans-serif;
            background-color: var(--light-bg);
            /* Reduced horizontal padding from 1.5rem to 1rem for tighter sides */
            padding: 0 1rem; 
            line-height: 1.6;
        }

        /* Styles for the main page title (H1) */
        .kazire-main-heading {
            font-size: 2.5rem; 
            font-weight: 800; 
            color: #1a1a1a; 
            /* Reduced top margin slightly */
            margin-top: 1.25rem; 
            margin-bottom: 0.5rem;
        }
        
        /* Styles for the introductory paragraph */
        .kazire-intro-paragraph {
            font-size: 1.125rem; 
            color: #4b5563; 
            margin-top: 0.5rem;
            /* Reduced bottom margin from 2rem to 1.5rem */
            margin-bottom: 1.5rem; 
        }

        /* Section Header Styling - Now uses a fixed size */
        .kazire-section-header {
            color: var(--primary-green);
            border-bottom: 4px solid var(--primary-green);
            padding-bottom: 0.75rem; 
            /* Reduced top margin from 2rem to 1.5rem */
            margin-top: 1.5rem; 
            font-size: 1.5rem; 
            font-weight: 800; 
            margin-left: 0; 
            margin-right: 0; 
        }

        /* CRITICAL: Re-adding the default margin for the first section header after the intro */
        .kazire-research-container > .kazire-section-header:first-of-type {
            /* Now 1.5rem to match the general section margin */
            margin-top: 1.5rem; 
        }


        /* List container margin */
        .kazire-list-section {
            margin-left: 0; 
            margin-right: 0;
            /* Reduced top margin from 1rem to 0.75rem */
            margin-top: 0.75rem; 
            list-style: none;
            padding-left: 0;
            /* CRITICAL: Ensure no bottom vertical spacing */
            margin-bottom: 0; 
        }

        /* Custom styles for the research list item */
        .kazire-list-item {
            /* Reduced bottom margin from 8px to 6px */
            margin-bottom: 6px;
            /* Reduced left padding from 20px to 18px */
            padding: 5px 0 5px 18px;
            position: relative;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        .kazire-list-item:hover {
            background-color: var(--hover-bg); 
            transform: translateY(-1px);
        }

        /* Custom diamond marker using a pseudo-element */
        .kazire-list-item::before {
            content: '♦';
            color: var(--primary-green);
            font-size: 1.2em;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            line-height: 1;
        }

        /* Specific style for the highlight text */
        .kazire-highlight-text {
            color: var(--primary-green);
            font-weight: bold;
        }
   
 /* *************************************************************************************************************************************************** */
  
        /* BASE STYLES: Minimal reset added to remove default browser margins/padding (the "white border") */
        body {
            margin: 0;
            padding: 0;
        }

        /* LAYOUT CONTAINER: Defines max width and centers the content. */
        .container {
            max-width: 1152px; /* Approximation of max-w-6xl */
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        /* CUSTOM SECTION STYLING (Gradient and Background Image) */
        .gradient-section {
            font-family: 'Inter', sans-serif; /* Set font locally to the section */
            width: 100%;
            padding: 2rem 1rem; /* Default padding: Reduced for mobile-first approach */
            
            /* 1. Set the background image (for the low opacity image effect) */
            background-image: url('/img/Copy%20of%20labt.png');
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        /* Pseudo-element to apply the semi-transparent gradient on top of the image */
        .gradient-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 0;

            /* 2. Create the Dark Green to Yellow Gradient Overlay with Opacity */
            background: linear-gradient(to right, 
                rgba(0, 60, 0, 0.95) 0%,       /* Very Dark Green (95% opacity) -> Image less visible */
                rgba(50, 150, 50, 0.6) 50%,    /* Medium Green (60% opacity) */
                rgba(255, 230, 0, 0.4) 100%    /* Bright Yellow (40% opacity) -> Image more visible */
            );
        }

        /* TYPOGRAPHY - MOBILE DEFAULT */

        /* Realistic Text Shadow for Heading */
        .section-title2 {
            color: #FFCC00; /* text-yellow-300 */
            font-weight: 800; /* font-extrabold */
            font-size: 1.75rem; /* text-3xl for mobile */
            line-height: 1.25; /* leading-tight */
            margin-bottom: 1.5rem; /* mb-6 */
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9), 
                         4px 4px 10px rgba(0, 50, 0, 0.7); 
        }

        /* Body Text Container */
        .content-block {
            color: white; /* text-white */
            font-size: 1rem; /* text-base for mobile */
            font-weight: 500; /* font-medium */
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* text-pop */
        }
        
        /* Spacing for paragraphs */
        .content-block p {
            margin-top: 1rem; 
        }
        .content-block p:first-child {
            margin-top: 0;
        }

        /* Span inside paragraph */
        .content-block span {
            font-weight: 600; /* font-semibold */
            color: #FFCC00; /* text-yellow-200 */
            display: block;
            margin-bottom: 0.25rem; /* mb-1 */
        }

        /* RESPONSIVENESS: DESKTOP STYLES (Min-width 768px) */
        @media (min-width: 768px) {
            .gradient-section {
                padding: 4rem 1rem; /* Larger padding for desktop */
            }

            .section-title {
                font-size: 2.5rem; /* text-4xl for desktop */
            }

            .content-block {
                font-size: 1.125rem; /* text-lg for desktop */
            }
            
            .content-block p {
                margin-top: 1.5rem; /* space-y-6 for desktop */
            }
        }
        
        
        /*
  1. Center the text content within a specific container.
*/
.header-container {
    /* Sets the container to use up the available width */
    width: 100%;
    /* This rule centers all inline-level content (text, images, spans) inside this div */
    text-align: center;
    
    /* Optional: Add some padding/margin for better visual spacing */
    padding: 20px;
    margin-bottom: 30px;
}

/* 2. Style the specific elements */
.kazire-main-heading {
    color: #2c3e50; /* Example color */
    font-size: 2.5em; /* Example font size */
    /* text-align: center; <- Redundant if using .header-container, but you can set it here too */
}

.kazire-intro-paragraph {
    color: #34495e; /* Example color */
    font-size: 1.1em; /* Example font size */
    /* text-align: center; <- Redundant if using .header-container, but you can set it here too */
    max-width: 800px; /* Optional: Constrain paragraph width for better readability */
    margin-left: auto; /* Required to center the block-level paragraph if you set max-width */
    margin-right: auto;
}