/* --- Core Variables & Base Reset --- */
        :root {
            --primary-color: #0A4DA2;
            --dark-color: #06357A;
            --bg-light: #F3F6FA;
            --text-main: #2D3748;
            --text-muted: #718096;
            --white: #FFFFFF;
        }
        
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { 
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
            color: var(--text-main); 
            line-height: 1.6; 
            background-color: var(--white); 
        }
        
        /* --- Grid & Typography System --- */
        /* REDUCED WHITE SPACE: container now uses full width with minimal side padding */
        .py-container { 
            max-width: 100%; 
            margin: 0 auto; 
            padding: 0 12px;   /* significantly reduced from original 20px */
        }
        .py-section { padding: 80px 0; }
        .py-section.bg-light { background-color: var(--bg-light); }
        .py-section.bg-dark { background-color: var(--dark-color); color: var(--white); }
        
        .section-title-wrapper { text-align: center; margin-bottom: 50px; }
        .section-title { 
            font-size: 36px; 
            color: var(--dark-color); 
            font-weight: 700; 
            position: relative; 
            padding-bottom: 15px; 
            text-transform: uppercase; 
            letter-spacing: 0.5px; 
        }
        .section-title::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 60px; 
            height: 3px; 
            background-color: var(--primary-color); 
        }
        .bg-dark .section-title { color: var(--white); }
        .bg-dark .section-title::after { background-color: var(--white); }
        
        /* --- About Section --- */
        .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
        .about-text h1 { 
            font-size: 36px; 
            color: var(--dark-color); 
            margin-bottom: 25px; 
            font-weight: 700; 
            position: relative; 
        }
        .about-text p { font-size: 16px; color: var(--text-main); margin-bottom: 18px; text-align: justify; line-height: 1.7; }
        .about-image { 
            position: relative; 
            border-radius: 8px; 
            overflow: hidden; 
            box-shadow: 0 15px 35px rgba(6,53,122,0.12); 
            width: 100%; 
            height: 100%; 
            min-height: 320px; 
            display: flex; 
        }
        .about-image img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            display: block; 
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
        }
        .about-image:hover img { transform: scale(1.04); }
        
        /* --- Counter Stats --- */
        .counter-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 30px; 
            margin-top: 50px; 
            background: var(--bg-light); 
            padding: 30px; 
            border-radius: 8px; 
            border-left: 5px solid var(--primary-color); 
        }
        .counter-item { text-align: center; }
        .counter-number { font-size: 36px; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; }
        .counter-label { font-size: 14px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; }
        
        /* --- Image Marquee Animation --- */
        .marquee-wrapper { position: relative; width: 100%; overflow: hidden; margin-top: 40px; padding: 10px 0; }
        .marquee-track { display: flex; width: calc(250px * 22); animation: scroll 35s linear infinite; }
        .marquee-track:hover { animation-play-state: paused; }
        .marquee-item { width: 250px; height: 170px; margin: 0 10px; flex-shrink: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
        .marquee-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-270px * 11)); }
        }

        /* --- Features Section --- */
        .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .feature-card { 
            background: var(--bg-light); 
            padding: 40px 30px; 
            border-radius: 8px; 
            transition: all 0.3s ease; 
            border-top: 4px solid transparent; 
        }
        .feature-card:hover { 
            transform: translateY(-5px); 
            background: var(--white); 
            border-top-color: var(--primary-color); 
            box-shadow: 0 15px 35px rgba(6,53,122,0.08); 
        }
        .feature-icon { font-size: 36px; color: var(--primary-color); margin-bottom: 20px; }
        .feature-card h3 { font-size: 20px; color: var(--dark-color); margin-bottom: 12px; font-weight: 600; }
        .feature-card p { font-size: 15px; color: var(--text-muted); }
        
        /* --- Manufacturing Process --- */
        .process-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 30px; }
        .process-step { background: var(--white); border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
        .step-img-box { width: 100%; height: 180px; overflow: hidden; }
        .step-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .step-info { padding: 20px; position: relative; }
        .step-number { 
            position: absolute; 
            top: -25px; 
            right: 20px; 
            width: 45px; 
            height: 45px; 
            background: var(--primary-color); 
            color: var(--white); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-weight: 700; 
            font-size: 16px; 
            border: 4px solid var(--white); 
        }
        .step-info h4 { font-size: 18px; color: var(--dark-color); margin-bottom: 8px; font-weight: 600; margin-top: 5px; }
        .step-info p { font-size: 14px; color: var(--text-muted); line-height: 1.4; }
        
        /* --- Dual Column Section --- */
        .dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .dual-card { 
            background: var(--white); 
            border-radius: 8px; 
            padding: 40px; 
            box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
            border-top: 4px solid var(--dark-color); 
        }
        .dual-card h3 { font-size: 24px; color: var(--dark-color); margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
        .dual-card h3 i { color: var(--primary-color); }
        .q-list, .rd-grid { list-style: none; }
        .q-list li { padding: 10px 0; border-bottom: 1px dashed #E2E8F0; font-size: 15px; display: flex; justify-content: space-between; }
        .q-list li strong { color: var(--dark-color); }
        .rd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .rd-item { background: var(--bg-light); padding: 15px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--dark-color); display: flex; align-items: center; gap: 8px; }
        .rd-item::before { content: '✓'; color: var(--primary-color); font-weight: bold; }
        
        /* --- Certifications --- */
        .cert-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; margin-top: 30px; }
        .cert-item { 
            background: var(--white); 
            padding: 15px; 
            border-radius: 6px; 
            border: 1px solid #E2E8F0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 120px; 
        }
        .cert-item img { 
            max-width: 100%; 
            max-height: 100%; 
            object-fit: contain; 
            filter: grayscale(20%); 
            transition: all 0.3s; 
        }
        .cert-item:hover img { filter: grayscale(0); transform: scale(1.05); }

        /* --- Vision Banner --- */
        .vision-banner { 
            background: linear-gradient(rgba(6,53,122,0.9), rgba(6,53,122,0.95)), url('//ueeshop.ly200-cdn.com/u_file/UPBI/UPBI629/2605/25/photo/df7f3e6294.jpg') center/cover no-repeat; 
            text-align: center; 
            padding: 90px 20px; 
            color: var(--white); 
        }
        .vision-content { max-width: 800px; margin: 0 auto; }
        .vision-content h2 { font-size: 36px; margin-bottom: 25px; font-weight: 700; letter-spacing: 1px; }
        .vision-content p { font-size: 18px; line-height: 1.8; opacity: 0.9; margin-bottom: 35px; text-align: center; }
        .py-btn { 
            display: inline-block; 
            padding: 14px 35px; 
            background-color: var(--primary-color); 
            color: var(--white); 
            text-decoration: none; 
            border-radius: 4px; 
            font-weight: 600; 
            letter-spacing: 0.5px; 
            transition: all 0.3s; 
            border: 1px solid var(--primary-color); 
        }
        .py-btn:hover { background-color: transparent; color: var(--white); border-color: var(--white); }

        /* --- Responsive Layout Enhancements (Mobile First + SEO optimized) --- */
        @media (max-width: 1024px) {
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .process-timeline { grid-template-columns: repeat(2, 1fr); }
            .cert-grid { grid-template-columns: repeat(4, 1fr); }
        }
        @media (max-width: 768px) {
            .py-section { padding: 50px 0; }
            .section-title { font-size: 28px; }
            .about-grid, .dual-grid { grid-template-columns: 1fr; gap: 30px; }
            .about-image { min-height: 240px; }
            .counter-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
            .counter-number { font-size: 28px; }
            .features-grid, .process-timeline { grid-template-columns: 1fr; }
            .cert-grid { grid-template-columns: repeat(3, 1fr); }
            .dual-card { padding: 25px; }
            .rd-grid { grid-template-columns: 1fr; }
            .vision-content h2 { font-size: 28px; }
            .vision-content p { font-size: 16px; }
            .py-btn { padding: 12px 28px; font-size: 14px; }
            .step-info h4 { font-size: 16px; }
            .feature-card { padding: 30px 20px; }
            /* keep minimal side padding on mobile */
            .py-container { padding: 0 10px; }
            .about-text h1 { font-size: 28px; }
        }
        @media (max-width: 480px) {
            .cert-grid { grid-template-columns: repeat(2, 1fr); }
            .counter-label { font-size: 12px; }
            .section-title { font-size: 24px; }
            .py-container { padding: 0 8px; }
            .about-text h1 { font-size: 24px; }
        }