/* Base Styles and Color Variables */
        :root {
            --color-dark-bg: #1A431A; /* Dark Green for the entire section wrapper */
            --color-light-text: #f0f0f0;
            --color-green-accent: #4CAF50; /* Role Text Color */
            --color-yellow-accent: #FFC300; /* Email Text Color */
            --color-primary-title: #ffffff;
            --color-secondary-text: #cccccc;
            --container-max-width: 1280px;
            
            /* NEW BACKGROUND IMAGE VARIABLES */
            --image-opacity: 0.12;
            /* Placeholder for the background image URL */
            --bg-image-url: url('/img/img2/bottlingprocess.png');
        }

        body {
            /* Set a default background for the body outside the section */
            background-color: white; 
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* NEW WRAPPER: Contains all section-specific styling and spans edge-to-edge */
        #team-section-wrapper {
            position: relative;
            font-family: 'Inter', sans-serif;
            color: var(--color-light-text);
            line-height: 1.5;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;

            background-color: var(--color-dark-bg); /* Applied Dark Green */
            overflow-x: hidden;
            z-index: 1; /* Ensure wrapper establishes a stacking context */
        }

        /* SUBTLE BACKGROUND IMAGE LAYER (Pseudo-element) */
        #team-section-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: var(--bg-image-url);
            background-size: cover;
            background-position: center center;
            background-attachment: fixed; /* Makes the background scroll slower */
            opacity: var(--image-opacity); /* Low opacity applied here */
            z-index: -1; /* Place behind the content (container z-index 1) */
            pointer-events: none;
        }

        /* Inner Container: Now handles the centered, maximum width content */
        .kazire-team-container {
            width: 100%;
            max-width: var(--container-max-width);
            margin: 0 auto;
            /* Internal padding remains to give content breathing room */
            padding: 60px 20px;
            position: relative;
            z-index: 1; /* Ensure content is above the pseudo-element */
        }

        /* --- TITLE ANIMATION DEFINITION --- */
        @keyframes slideInFromLeft {
            0% {
                transform: translateX(-100%) scale(0.8);
                opacity: 0;
            }
            100% {
                transform: translateX(0) scale(1);
                opacity: 1;
            }
        }
        /* -------------------------- */

        /* Header Section Styles */
        .kazire-team-header {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 40px;
        }

        .kazire-team-header-main {
            max-width: 600px;
        }

        .kazire-team-pre-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--color-secondary-text);
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        .kazire-team-section-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--color-primary-title);
            line-height: 1.1;
            margin: 0;

            animation: slideInFromLeft 1s ease-out forwards;
            transform-origin: left center;
        }

        .kazire-team-description-container {
            align-self: flex-end;
            max-width: 450px;
            position: relative;
            /* CRITICAL: Set a fixed height to prevent the layout from jumping during text fades */
            height: 120px;
        }

        /* --- DYNAMIC TEXT STYLES --- */
        .kazire-team-rotating-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 1rem;
            font-weight: 400;
            color: var(--color-secondary-text);
            text-align: justify;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            margin: 0; /* Remove default margin from p tag */
        }

        /* Active class to show the text */
        .kazire-team-rotating-text.active {
            opacity: 1;
        }

        /* Team Grid */
        .kazire-team-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 30px;
        }

        /* Team Card Styling */
        .kazire-team-card {
            border-radius: 8px;
            overflow: hidden;
            text-align: left;
            position: relative;
            cursor: pointer;
            /* Card background is now solid dark to contrast with the subtle wrapper background */
            background-color: rgba(0, 0, 0, 0.7);
            /* Add a subtle inset shadow for depth */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }

        .kazire-team-card:hover {
            transform: translateY(-5px); /* Lift card slightly on hover */
        }

        .kazire-team-image-container {
            position: relative;
            padding-bottom: 125%; /* Ensures all cards have the same 4:5 aspect ratio */
            height: 0;
            overflow: hidden;
            background-color: #111;
        }

        /* --- UPDATED IMAGE STYLES FOR VISIBILITY AND HOVER EFFECT --- */
        .kazire-team-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Changed to 'cover' to fill the container and prevent bars */
            object-fit: cover;
            /* Default: Slightly dimmed brightness for depth */
            filter: brightness(90%);
            transition: all 0.5s ease;
            transform: scale(1.05); /* Slightly scaled up initially */
        }

        .kazire-team-card:hover .kazire-team-image {
            filter: brightness(100%);
            transform: scale(1.15); /* Scales up more on hover */
        }
        /* ----------------------------------------------------------- */

        .kazire-team-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px 15px;
            /* Adjusted gradient to be stronger at the bottom */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
            z-index: 2;
        }

        .kazire-team-name {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-primary-title);
            margin: 0 0 5px 0;
        }

        .kazire-team-role {
            font-size: 0.8rem;
            font-weight: 400;
            margin: 0 0 3px 0;
            line-height: 1.3;
        }

        .kazire-team-accent-green {
            color: var(--color-green-accent);
        }

        .kazire-team-email {
            font-size: 0.8rem;
            font-weight: 400;
            margin: 0;
            line-height: 1.3;
        }

        /* Styling for the email link */
        .kazire-team-email a {
            color: var(--color-yellow-accent); /* Use yellow accent for the link color */
            text-decoration: none; /* Removes underline by default */
            transition: color 0.2s ease, text-decoration 0.2s ease;
        }

        .kazire-team-email a:hover {
            color: var(--color-light-text); /* Hover to white for nice feedback */
            text-decoration: underline; /* Add underline back on hover */
        }

        /* --- MEDIA QUERIES (Responsiveness) --- */
        @media (min-width: 600px) {
            .kazire-team-grid { grid-template-columns: repeat(2, 1fr); }
            .kazire-team-section-title { font-size: 3rem; }
        }
        @media (min-width: 900px) {
            .kazire-team-grid { grid-template-columns: repeat(3, 1fr); }
            .kazire-team-container { padding: 80px 30px; }
        }
        @media (min-width: 1200px) {
            .kazire-team-container { padding: 100px 40px; }
            .kazire-team-header { grid-template-columns: 1fr 1fr; }
            .kazire-team-section-title { font-size: 3.5rem; }
            .kazire-team-grid { grid-template-columns: repeat(4, 1fr); }
        }