@import "tailwindcss";
/* Chatbot Widget Styles */
#chatbot-widget {
    transition: all 0.3s ease;
}

#chatbot-window {
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

#chatbot-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#chatbot-messages::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.message-bubble {
    max-width: 80%;
    word-wrap: break-word;
}

.message-user {
    background: #0F52BA;
    color: white;
    border-radius: 1rem 1rem 0 1rem;
}

.message-bot {
    background: #f3f4f6;
    color: #374151;
    border-radius: 1rem 1rem 1rem 0;
}


    <style>
    
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', Arial, sans-serif;
        }
        body {
            line-height: 1.6;
            color: #333;
            background: #f8f9fa;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

       /*  默认隐藏英文 */
        /*    [data-lang="zh"] {
            display: none;
        } */

        /* Header */

        .client-logo-large {
    height: 2.5rem; /* 32px, 约等于 h-24 */
    /* 或者使用其他单位，如 96px */
}
        header {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: #003366;
        }
        .logo img {
            height: 40px;
        }
        .logo-main { font-size: 1.4rem; }
        .logo-sub { font-size: 0.9rem; color: #555; }

        .header-links {
            display: flex;
            gap: 20px;
            font-size: 0.95rem;
        }
        .header-links a {
            color: #333;
            text-decoration: none;
        }
        .header-links a:hover {
            color: #0056b3;
        }

        .lang-switcher {
            display: flex;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }
        .lang-btn {
            padding: 6px 12px;
            background: white;
            border: none;
            cursor: pointer;
            font-weight: 500;
        }
        .lang-btn.active {
            background: #0056b3;
            color: white;
        }

        /* Page Navigation */
        .page-nav {
            background: #f0f4f8;
            border-bottom: 1px solid #ddd;
        }
        .page-nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
            padding: 12px 0;
            font-weight: 500;
            font-size: 0.95rem;
        }
        .page-nav a {
            color: #003366;
            text-decoration: none;
            transition: color 0.3s;
        }
        .page-nav a:hover {
            color: #0056b3;
        }

        /* Hero Section */
        .product-hero {
            padding: 100px 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }
        .product-content h1 {
            font-size: 2.5rem;
            color: #003366;
            margin-bottom: 12px;
        }
        .product-subtitle {
            color: #0056b3;
            font-weight: 500;
            margin-bottom: 16px;
        }
        .product-actions {
            margin-top: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        .btn-primary {
            background: #0056b3;
            color: white;
            padding: 12px 24px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        .btn-primary:hover {
            background: #004494;
        }
        .btn-secondary {
            background: #f0f0f0;
            color: #333;
            padding: 12px 24px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        .btn-secondary:hover {
            background: #e0e0e0;
        }
        .product-image img {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            display: block;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
/* 新增 CSS 类 (放在 <style> 标签内) */
.manufacturing-image {
    height: 160px; /* 为小图设置合适高度 */s
    object-fit: cover;
    max-width: 100%;
    border-radius: 8px; /* 圆角 */
    transition: transform 0.3s ease; /* 添加悬停动画 */
}
.manufacturing-image:hover {
    transform: scale(1.02); /* 悬停时轻微放大 */
}
        /* Features */
        .product-features {
            padding: 80px 0;
            background: white;
        }
        .section-title {
            text-align: center;
            font-size: 2rem;
            color: #003366;
            margin-bottom: 50px;
        }

        /* General Specs */
        .product-specs {
            padding: 80px 0;
            background: #f8f9fa;
        }
        .specs-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .specs-table th, .specs-table td {
            padding: 14px 20px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        .specs-table th {
            background: #003366;
            color: white;
            font-weight: 500;
        }
        .specs-table tr:last-child td {
            border-bottom: none;
        }

        /* Product Comparison */
        .product-comparison {
            padding: 80px 0;
            background: white;
        }
        .comparison-table-wrapper {
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .comparison-table-wrapper table {
            border-collapse: collapse;
            background: white;
            width: 100%;
            min-width: 600px;
        }
        .comparison-table-wrapper th,
        .comparison-table-wrapper td {
            padding: 14px 16px;
            border-bottom: 1px solid #eee;
        }
        .comparison-table-wrapper th {
            background: #003366;
            color: white;
            font-weight: 500;
            text-align: center;
        }
        .comparison-table-wrapper td {
            text-align: center;
        }
        .comparison-table-wrapper tr:last-child td {
            border-bottom: none;
        }

        /* Manufacturing & Quality */
        .manufacturing-env,
        .quality-assurance {
            padding: 80px 0;
            background: white;
        }

        /* Applications */
        .product-applications {
            padding: 80px 0;
            background: white;
        }
        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .app-item {
            background: #f0f8ff;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border-left: 4px solid #0056b3;
        }
        .app-item i {
            font-size: 1.5rem;
            color: #0056b3;
            margin-bottom: 8px;
            display: block;
        }
        .app-note {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-style: italic;
        }

        /* CTA */
        .product-cta {
            padding: 80px 0;
            background: #003366;
            color: white;
        }
        .cta-content, .contact-info {
            flex: 1;
            min-width: 300px;
        }
        .cta-content h2, .contact-info h3 {
            margin-bottom: 20px;
        }
        .contact-info p {
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cta-grid {
            display: flex;
            gap: 40px;
            flex-wrap: wrap;
        }

        /* Footer */
        footer {
            background: #222;
            color: #ccc;
            padding: 40px 0 20px;
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 30px;
        }
        footer h3 {
            color: #fff;
            margin-bottom: 15px;
        }
        footer ul {
            list-style: none;
        }
        footer ul li {
            margin: 8px 0;
        }
        footer a {
            color: #ccc;
        }
        footer a:hover {
            color: #00b3ff;
        }
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #444;
            font-size: 0.9rem;
            color: #aaa;
        }

        /* Cookie Banner */
        #cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #000;
            color: #fff;
            padding: 16px;
            text-align: center;
            font-size: 14px;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        #cookie-banner a {
            color: #4da6ff;
            text-decoration: underline;
        }
        #accept-cookies {
            background: #0056b3;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #0056b3;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .back-to-top.active {
            opacity: 1;
            visibility: visible;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-grid, .cta-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .product-actions {
                justify-content: center;
            }
            .page-nav ul {
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
            }
            .page-nav a {
                font-size: 0.9rem;
            }
        }


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', Arial, sans-serif;
        }
        body {
            line-height: 1.6;
            color: #333;
            background: #f8f9fa;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 默认隐藏英文 */
        [data-lang="en"] {
            display: none;
        }

        /* Header */
        header {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: #003366;
        }
        .logo img {
            height: 40px;
        }
        .logo-main { font-size: 1.4rem; }
        .logo-sub { font-size: 0.9rem; color: #555; }

        .header-links {
            display: flex;
            gap: 20px;
            font-size: 0.95rem;
        }
        .header-links a {
            color: #333;
            text-decoration: none;
        }
        .header-links a:hover {
            color: #0056b3;
        }

        .lang-switcher {
            display: flex;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }
        .lang-btn {
            padding: 6px 12px;
            background: white;
            border: none;
            cursor: pointer;
            font-weight: 500;
        }
        .lang-btn.active {
            background: #0056b3;
            color: white;
        }

        /* Page Navigation */
        .page-nav {
            background: #f0f4f8;
            border-bottom: 1px solid #ddd;
        }
        .page-nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
            padding: 12px 0;
            font-weight: 500;
            font-size: 0.95rem;
        }
        .page-nav a {
            color: #003366;
            text-decoration: none;
            transition: color 0.3s;
        }
        .page-nav a:hover {
            color: #0056b3;
        }

        /* Hero Section */
        .product-hero {
            padding: 100px 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }
        .product-content h1 {
            font-size: 2.5rem;
            color: #003366;
            margin-bottom: 12px;
        }
        .product-subtitle {
            color: #0056b3;
            font-weight: 500;
            margin-bottom: 16px;
        }
        .product-actions {
            margin-top: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        .btn-primary {
            background: #0056b3;
            color: white;
            padding: 12px 24px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        .btn-primary:hover {
            background: #004494;
        }
        .btn-secondary {
            background: #f0f0f0;
            color: #333;
            padding: 12px 24px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        .btn-secondary:hover {
            background: #e0e0e0;
        }
        .product-image img {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            display: block;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* Features */
        .product-features {
            padding: 80px 0;
            background: white;
        }
        .section-title {
            text-align: center;
            font-size: 2rem;
            color: #003366;
            margin-bottom: 50px;
        }

        /* General Specs */
        .product-specs {
            padding: 80px 0;
            background: #f8f9fa;
        }
        .specs-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .specs-table th, .specs-table td {
            padding: 14px 20px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        .specs-table th {
            background: #003366;
            color: white;
            font-weight: 500;
        }
        .specs-table tr:last-child td {
            border-bottom: none;
        }

        /* Product Comparison */
        .product-comparison {
            padding: 80px 0;
            background: white;
        }
        .comparison-table-wrapper {
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .comparison-table-wrapper table {
            border-collapse: collapse;
            background: white;
            width: 100%;
            min-width: 600px;
        }
        .comparison-table-wrapper th,
        .comparison-table-wrapper td {
            padding: 14px 16px;
            border-bottom: 1px solid #eee;
        }
        .comparison-table-wrapper th {
            background: #003366;
            color: white;
            font-weight: 500;
            text-align: center;
        }
        .comparison-table-wrapper td {
            text-align: center;
        }
        .comparison-table-wrapper tr:last-child td {
            border-bottom: none;
        }

        /* Manufacturing & Quality */
        .manufacturing-env,
        .quality-assurance {
            padding: 80px 0;
            background: white;
        }

        /* Applications */
        .product-applications {
            padding: 80px 0;
            background: white;
        }
        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .app-item {
            background: #f0f8ff;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border-left: 4px solid #0056b3;
        }
        .app-item i {
            font-size: 1.5rem;
            color: #0056b3;
            margin-bottom: 8px;
            display: block;
        }
        .app-note {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-style: italic;
        }

        /* CTA */
        .product-cta {
            padding: 80px 0;
            background: #003366;
            color: white;
        }
        .cta-content, .contact-info {
            flex: 1;
            min-width: 300px;
        }
        .cta-content h2, .contact-info h3 {
            margin-bottom: 20px;
        }
        .contact-info p {
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cta-grid {
            display: flex;
            gap: 40px;
            flex-wrap: wrap;
        }

        /* Footer */
        footer {
            background: #222;
            color: #ccc;
            padding: 40px 0 20px;
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 30px;
        }
        footer h3 {
            color: #fff;
            margin-bottom: 15px;
        }
        footer ul {
            list-style: none;
        }
        footer ul li {
            margin: 8px 0;
        }
        footer a {
            color: #ccc;
        }
        footer a:hover {
            color: #00b3ff;
        }
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #444;
            font-size: 0.9rem;
            color: #aaa;
        }

        /* Cookie Banner */
        #cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #000;
            color: #fff;
            padding: 16px;
            text-align: center;
            font-size: 14px;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        #cookie-banner a {
            color: #4da6ff;
            text-decoration: underline;
        }
        #accept-cookies {
            background: #0056b3;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #0056b3;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .back-to-top.active {
            opacity: 1;
            visibility: visible;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-grid, .cta-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .product-actions {
                justify-content: center;
            }
            .page-nav ul {
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
            }
            .page-nav a {
                font-size: 0.9rem;
            }
        }
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .bg-grid {
                background-image: radial-gradient(rgba(211, 47, 47, 0.1) 2px, transparent 1px);
                background-size: 30px 30px;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
        }
    </style>
    <link rel="stylesheet" href="styles.css">">
        <!-- Header with glass effect -->
        <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300">
            <div class="bg-white/80 backdrop-blur-md shadow-sm">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex justify-between items-center py-4">
                        <div class="flex items-center">
                            <!-- Company Logo -->
                            <img 
                            <img src="Pic/MTW-Logo.jpg" style="height: 30px;">

                  <a href="MICW2.html" class="logo"></a>
                        </div>
                        
                        <div class="hidden md:flex items-center space-x-8">
                            <nav class="flex space-x-8">
                                <button data-section="hero" class="nav-link text-gray-700 hover:text-primary transition-colors">Home</button>
                                <button data-section="about" class="nav-link text-gray-700 hover:text-primary transition-colors">About</button>
                                <button data-section="services" class="nav-link text-gray-700 hover:text-primary transition-colors">Services</button>
                                <button data-section="advantages" class="nav-link text-gray-700 hover:text-primary transition-colors">Advantages</button>
                                <button data-section="locations" class="nav-link text-gray-700 hover:text-primary transition-colors">Locations</button>
                                <button data-section="certifications" class="nav-link text-gray-700 hover:text-primary transition-colors">Certifications</button>
                                <button data-section="contact" class="nav-link text-gray-700 hover:text-primary transition-colors">Contact</button>
                            </nav>
                            
                            <div class="flex items-center space-x-2">
                                <button id="lang-zh" class="px-3 py-1.5 rounded-md text-sm font-medium bg-tech-gray text-gray-700 hover:bg-primary/10 transition-colors">中</button>
                                <button id="lang-en" class="px-3 py-1.5 rounded-md text-sm font-medium bg-primary text-white">EN</button>
                            </div>
                            
                            <button data-section="contact" class="bg-accent text-white px-5 py-2 rounded-md hover:bg-accent/90 transition-colors shadow-md hover:shadow-lg flex items-center">
                                <i class="fa fa-envelope-o mr-2"></i>
                                <span data-i18n="contactBtn">Contact</span>
                            </button>
                        </div>
                        
                        <!-- Mobile Menu Button -->
                        <div class="md:hidden flex items-center space-x-4">
                            <div class="flex items-center space-x-2">
                                <button id="mobile-lang-zh" class="px-3 py-1.5 rounded-md text-sm font-medium bg-tech-gray text-gray-700">中</button>
                                <button id="mobile-lang-en" class="px-3 py-1.5 rounded-md text-sm font-medium bg-primary text-white">EN</button>
                            </div>
                            <button id="mobile-menu-btn" class="text-gray-700 hover:text-primary transition-colors">
                                <i class="fa fa-bars text-xl"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Mobile Menu (Hidden by default) -->
            <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-tech-gray shadow-lg">
                <div class="px-4 py-3 space-y-2">
                    <button data-section="hero" class="mobile-nav-link block w-full text-left py-3 text-gray-700 hover:text-primary transition-colors" data-i18n="home">Home</button>
                    <button data-section="about" class="mobile-nav-link block w-full text-left py-3 text-gray-700 hover:text-primary transition-colors" data-i18n="about">About</button>
                    <button data-section="services" class="mobile-nav-link block w-full text-left py-3 text-gray-700 hover:text-primary transition-colors" data-i18n="services">Services</button>
                    <button data-section="advantages" class="mobile-nav-link block w-full text-left py-3 text-gray-700 hover:text-primary transition-colors" data-i18n="advantages">Advantages</button>
                    <button data-section="locations" class="mobile-nav-link block w-full text-left py-3 text-gray-700 hover:text-primary transition-colors" data-i18n="locations">Locations</button>
                    <button data-section="certifications" class="mobile-nav-link block w-full text-left py-3 text-gray-700 hover:text-primary transition-colors" data-i18n="certifications">Certifications</button>
                    <button data-section="contact" class="mobile-nav-link block w-full text-left py-3 text-gray-700 hover:text-primary transition-colors" data-i18n="contact">Contact</button>
                </div>
            </div>
        </header>

        <!-- Hero Section with grid background -->
        <section id="hero" class="pt-32 pb-20 bg-gradient-to-br from-primary to-primary/80 text-white relative overflow-hidden">
            <div class="absolute inset-0 bg-grid opacity-30"></div>
            <div class="absolute top-0 right-0 w-1/2 h-full opacity-10">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#FFFFFF" d="M47.5,-65.1C62.4,-58.7,77.3,-49.3,83.8,-35.5C90.4,-21.7,88.5,-3.5,83.2,13.2C77.9,29.9,69.1,45.7,56.5,55.1C43.9,64.5,27.6,67.5,11.3,68.2C-5,68.9,-20.9,67.4,-34.7,60.1C-48.5,52.8,-59.9,39.6,-67.3,25.1C-74.7,10.6,-78,-5.7,-74.6,-20.9C-71.2,-36.1,-61,-50.2,-47.8,-58.3C-34.6,-66.4,-17.3,-68.5,0.4,-69.2C18.1,-69.9,36.2,-69.2,47.5,-65.1Z" transform="translate(100 100)" />
                </svg>
            </div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="max-w-3xl">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight text-shadow" data-i18n="heroTitle">Innovation Driven · Professional Automation Solutions</h1>
                    <p class="text-xl md:text-2xl mb-10 text-white/90 leading-relaxed" data-i18n="heroSubtitle">MIC-Tech(Wuxi) specializes in high-end manufacturing, providing comprehensive solutions including equipment OEM, automated production lines, and special gas systems for advanced equipment, food, pharmaceutical and other industries.</p>
                    <div class="flex flex-col sm:flex-row gap-5">
                        <button data-section="services" class="bg-white text-primary px-8 py-3 rounded-md font-semibold hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                            <span data-i18n="exploreServices">Explore Services</span>
                        </button>
                        <button data-section="contact" class="border-2 border-white text-white px-8 py-3 rounded-md font-semibold hover:bg-white/10 transition-all transform hover:-translate-y-1">
                            <span data-i18n="getSolution">Get Solution</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Animated scroll indicator -->
            <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
                <button data-section="about" class="text-white/80 hover:text-white transition-colors">
                    <i class="fa fa-chevron-down text-2xl"></i>
                </button>
            </div>
        </section>

        <!-- Stats Section with counters -->
        <section class="py-16 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div class="text-center p-6 rounded-xl bg-gradient-to-br from-white to-tech-gray shadow-sm">
                        <div class="text-4xl md:text-5xl font-bold text-primary mb-3 counter" data-target="20">0</div>
                        <div class="text-gray-600 font-medium" data-i18n="yearsExperience">Years Experience</div>
                    </div>
                    <div class="text-center p-6 rounded-xl bg-gradient-to-br from-whipCookieConsentte to-tech-gray shadow-sm">
                        <div class="text-4xl md:text-5xl font-bold text-primary mb-3 counter" data-target="120">0</div>
                        <div class="text-gray-600 font-medium" data-i18n="professionalTeam">Professional Team</div>
                    </div>
                    <div class="text-center p-6 rounded-xl bg-gradient-to-br from-white to-tech-gray shadow-sm">
                        <div class="text-4xl md:text-5xl font-bold text-primary mb-3 counter" data-target="25">0</div>
                        <div class="text-gray-600 font-medium" data-i18n="annualRevenue">Annual Revenue (USD M)</div>
                    </div>
                    <div class="text-center p-6 rounded-xl bg-gradient-to-br from-white to-tech-gray shadow-sm">
                        <div class="text-4xl md:text-5xl font-bold text-primary mb-3 counter" data-target="4">0</div>
                        <div class="text-gray-600 font-medium" data-i18n="coreBusinesses">Core Businesses</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- About Section -->
        <section id="about" class="py-20 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 inline-block relative" data-i18n="aboutTitle">
                        About MIC-Tech Wuxi
                        <span class="absolute -bottom-3 left-0 w-1/2 h-1 bg-gradient-to-r from-primary to-secondary"></span>
                    </h2>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto mt-8" data-i18n="aboutDesc">A professional provider of automation solutions with rich experience in high-end manufacturing</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-primary to-secondary rounded-lg blur opacity-25 group-hover:opacity-70 transition duration-1000"></div>
                        <img 
                            src="Pic/MICW.jpg" 
                            alt="MIC-Tech Wuxi Office and Manufacturing Facility"
                            class="relative rounded-lg shadow-xl w-full object-cover h-[400px]"
                        />
                        <!-- Video Container -->
                        <div class="video-container mt-6">
                            <video controls>
                                <source src="video/MICW.mp4" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                        <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg max-w-xs">
                            <div class="flex items-center text-primary font-semibold">
                                <i class="fa fa-check-circle mr-2"></i>
                                <span>Innovating since 1988</span>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <p class="text-gray-700 mb-6 leading-relaxed" data-i18n="aboutDetail">MIC-Tech (Wuxi) Co., Ltd. is a high-tech enterprise specializing in providing automation solutions for high-end manufacturing industries. With years of technical accumulation and industry experience, we are committed to providing customers with high-quality equipment OEM, advanced equipment maintenance, automated production line customization and special gas system engineering services.</p>
                        <p class="text-gray-700 mb-8 leading-relaxed" data-i18n="aboutDetail2">Our team is composed of professionals with rich experience in the industry, who can provide customers with comprehensive technical support and solutions from design, R&D, production to after-sales service. We adhere to the concept of "quality first, customer first" and have established long-term and stable cooperative relations with many well-known enterprises at home and abroad.</p>
                        
                        <div class="bg-white rounded-xl p-6 shadow-md">
                            <h3 class="text-xl font-bold text-dark mb-6 flex items-center">
                                <i class="fa fa-history text-primary mr-3"></i>
                                Company Milestones
                            </h3>
                            <div class="space-y-6 relative">
                                <!-- Timeline line -->
                                <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-tech-gray"></div>
                                
                                <div class="flex relative">
                                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary flex items-center justify-center z-10">
                                        <i class="fa fa-building text-white"></i>
                                    </div>
                                    <div class="ml-6">
                                        <div class="text-primary font-bold">1988~1996</div>
                                        <div class="text-gray-600 mt-1" data-i18n="milestone1">Founded in Taiwan, focusing on precision machinery manufacturing</div>
                                    </div>
                                </div>
                                <div class="flex relative">
                                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary flex items-center justify-center z-10">
                                        <i class="fa fa-map-marker text-white"></i>
                                    </div>
                                    <div class="ml-6">
                                        <div class="text-primary font-bold">1997~2001</div>
                                        <div class="text-gray-600 mt-1" data-i18n="milestone2">Entered the mainland market and established a production base in Wuxi</div>
                                    </div>
                                </div>
                                <div class="flex relative">
                                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary flex items-center justify-center z-10">
                                        <i class="fa fa-expand text-white"></i>
                                    </div>
                                    <div class="ml-6">
                                        <div class="text-primary font-bold">2002~2025</div>
                                        <div class="text-gray-600 mt-1" data-i18n="milestone3">Expanded business scope to advanced equipment maintenance and automation system integration</div>
                                    </div>
                                </div>
                                <div class="flex relative">
                                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary flex items-center justify-center z-10">
                                        <i class="fa fa-globe text-white"></i>
                                    </div>
                                    <div class="ml-6">
                                        <div class="text-primary font-bold">2023</div>
                                        <div class="text-gray-600 mt-1" data-i18n="milestone4">Vietnam MIVN factory put into production, accelerating Southeast Asia layout</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Services Section with hover effects -->
        <section id="services" class="py-20 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 inline-block relative" data-i18n="servicesTitle">
                        Core Business Services
                        <span class="absolute -bottom-3 left-0 w-1/2 h-1 bg-gradient-to-r from-primary to-secondary"></span>
                    </h2>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto mt-8" data-i18n="servicesSubtitle">Providing comprehensive automation solutions and professional technical support for customers in various industries</p>
                </div>
                    <div class="bg-white rounded-xl p-8 shadow-md card-hover border border-tech-gray/50">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-6">
                            <i class="fa fa-flask"></i>
                        </div>
                          <a href="GAS 3.html" class="logo"></a>              
                        <h3 class="text-xl font-bold text-center mb-4" data-i18n="specialGas">high-purity gas pressure valve design and manufacturing</h3>
                        <p class="text-gray-600 text-center mb-6" data-i18n="specialGasDesc">Semiconductor-grade special gas engineering solutions, specializing in high-purity gas pressure valve design and manufacturing, compliant with international ultra-clean standards.</p>
                        <ul class="service-list space-y-2">
                            <li>Gas cabinet design & installation</li>
                            <li>Pressure valve manufacturing</li>
                            <li>Leak testing & certification</li>
                            <li>System maintenance & upgrade</li>
                        </ul>
                    </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    <div class="bg-white rounded-xl p-8 shadow-md card-hover border border-tech-gray/50">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-6">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <h3 class="text-xl font-bold text-center mb-4" data-i18n="equipmentOEM">Equipment OEM Services</h3>
                        <p class="text-gray-600 text-center mb-6" data-i18n="equipmentOEMDesc">Providing end-to-end OEM services from mechanical assembly to functional testing, specializing in high-precision manufacturing of advanced equipment and industrial chillers.</p>
                        <ul class="service-list space-y-2">
                            <li>Precision mechanical assembly</li>
                            <li>System integration & testing</li>
                            <li>Quality inspection & certification</li>
                            <li>Packaging & logistics support</li>
                        </ul>
                    </div>

                    <div class="bg-white rounded-xl p-8 shadow-md card-hover border border-tech-gray/50">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-6">
                            <i class="fa fa-microchip"></i>
                        </div>
                        <h3 class="text-xl font-bold text-center mb-4" data-i18n="semiconductorMaintenance">Semiconductor Equipment Maintenance</h3>
                        <p class="text-gray-600 text-center mb-6" data-i18n="semiconductorMaintenanceDesc">Professional advanced equipment module repair and refurbishment services, providing localized parts production and global procurement solutions.</p>
                        <ul class="service-list space-y-2">
                            <li>Module repair & replacement</li>
                            <li>Equipment calibration & upgrade</li>
                            <li>Parts localization & procurement</li>
                            <li>Preventive maintenance programs</li>
                        </ul>
                    </div>

                    <div class="bg-white rounded-xl p-8 shadow-md card-hover border border-tech-gray/50">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-6">
                            <i class="fa fa-industry"></i>
                        </div>
                         <a href="GAS .html" class="logo"></a>
                        <h3 class="text-xl font-bold text-center mb-4" data-i18n="automationLines">Customized Automation Lines</h3>
                        <p class="text-gray-600 text-center mb-6" data-i18n="automationLinesDesc">Providing intelligent handling, conveying equipment and warehouse management system solutions for food processing, pharmaceutical and other industries.</p>
                        <ul class="service-list space-y-2">
                            <li>Intelligent conveying systems</li>
                            <li>Robotic handling integration</li>
                            <li>Warehouse management systems</li>
                            <li>Production line optimization</li>
                        </ul>
                    </div>


                </div>
            </div>
        </section>

        <!-- Advantages Section -->
        <section id="advantages" class="py-20 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 inline-block relative" data-i18n="advantagesTitle">
                        Our Core Advantages
                        <span class="absolute -bottom-3 left-0 w-1/2 h-1 bg-gradient-to-r from-primary to-secondary"></span>
                    </h2>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto mt-8" data-i18n="advantagesSubtitle">Creating excellent value for customers with professional technical capabilities and global resource network</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div class="bg-white p-8 rounded-xl shadow-md flex gap-6 items-start card-hover">
                        <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl flex-shrink-0">
                            <i class="fa fa-lightbulb-o"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-4" data-i18n="technicalCapabilities">Professional Technical Capabilities</h3>
                            <p class="text-gray-600" data-i18n="technicalCapabilitiesDesc">With a team of engineers with more than 10 years of experience, we master core technologies such as precision machinery, automatic control, and gas system design, and can provide customers with customized solutions.</p>
                        </div>
                    </div>

                    <div class="bg-white p-8 rounded-xl shadow-md flex gap-6 items-start card-hover">
                        <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl flex-shrink-0">
                            <i class="fa fa-globe"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-4" data-i18n="globalSupplyChain">Global Supply Chain Network</h3>
                            <p class="text-gray-600" data-i18n="globalSupplyChainDesc">We have established stable cooperative relations with suppliers all over the world, which can realize rapid procurement and localized production of materials, ensuring the timeliness and cost advantage of services.</p>
                        </div>
                    </div>

                    <div class="bg-white p-8 rounded-xl shadow-md flex gap-6 items-start card-hover">
                        <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl flex-shrink-0">
                            <i class="fa fa-check-square-o"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-4" data-i18n="qualityAssurance">Strict Quality Assurance</h3>
                            <p class="text-gray-600" data-i18n="qualityAssuranceDesc">Adopt international advanced quality management system, from design, production to service, every link is strictly controlled to ensure that products and services meet international standards.</p>
                        </div>
                    </div>

                    <div class="bg-white p-8 rounded-xl shadow-md flex gap-6 items-start card-hover">
                        <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary text-2xl flex-shrink-0">
                            <i class="fa fa-bolt"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-4" data-i18n="efficientService">Efficient Service Response</h3>
                            <p class="text-gray-600" data-i18n="efficientServiceDesc">With a professional after-sales service team and rapid response mechanism, we can provide customers with timely technical support and maintenance services to ensure the stable operation of equipment.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Locations Section -->
        <section id="locations" class="py-20 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 inline-block relative" data-i18n="locationsTitle">
                        Global Layout
                        <span class="absolute -bottom-3 left-0 w-1/2 h-1 bg-gradient-to-r from-primary to-secondary"></span>
                    </h2>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto mt-8" data-i18n="locationsSubtitle">With multiple production bases and service centers around the world, we can quickly respond to customer needs</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <div>
                        <h3 class="text-2xl font-bold mb-6 text-primary" data-i18n="mainlandChina">Mainland China</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> <span data-i18n="northChina">North China</span></h4>
                                <p class="text-gray-600">Beijing, Tianjin, Dalian</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> <span data-i18n="eastChina">East China</span></h4>
                                <p class="text-gray-600">Shanghai, Wuxi, Suzhou, Hangzhou</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> <span data-i18n="southChina">South China</span></h4>
                                <p class="text-gray-600">Shenzhen, Guangzhou, Xiamen</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> <span data-i18n="centralChina">Central China</span></h4>
                                <p class="text-gray-600">Wuhan, Changsha, Zhengzhou</p>
                            </div>
                        </div>

                        <h3 class="text-2xl font-bold mb-6 text-primary" data-i18n="overseasRegions">Overseas Regions</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> Vietnam</h4>
                                <p class="text-gray-600" data-i18n="vietnam">Ho Chi Minh City, Hanoi</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> Myanmar</h4>
                                <p class="text-gray-600" data-i18n="myanmar">Yangon</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> Malaysia</h4>
                                <p class="text-gray-600" data-i18n="malaysia">Penang, Kuala Lumpur</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-semibold mb-3 flex items-center"><i class="fa fa-map-marker text-primary mr-2"></i> Others</h4>
                                <p class="text-gray-600" data-i18n="singapore">Singapore</p>
                                <p class="text-gray-600" data-i18n="japan">Japan: Tokyo, Osaka</p>
                                <p class="text-gray-600" data-i18n="thailand">Thailand: Bangkok</p>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-2xl font-bold mb-6 text-primary" data-i18n="overseasBases">Key Overseas Bases</h3>
                        
                        <div class="bg-white rounded-xl shadow-md p-6 mb-8 border border-tech-gray/50">
                            <h4 class="text-xl font-bold mb-4 text-primary" data-i18n="mivnFactory">Vietnam MIVN Factory</h4>
                            <div class="space-y-3 text-gray-600">
                                <p><span class="font-semibold" data-i18n="mivnEstablished">Established:</span> 2023</p>
                                <p><span class="font-semibold" data-i18n="mivnArea">Area:</span> 5,000㎡</p>
                                <p><span class="font-semibold" data-i18n="mivnBusiness">Main Business:</span> <span data-i18n="mivnBusinessValue">Equipment manufacturing and localization services</span></p>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-md p-6 border border-tech-gray/50">
                            <h4 class="text-xl font-bold mb-4 text-primary" data-i18n="mmcFactory">Myanmar MMC Factory</h4>
                            <div class="space-y-3 text-gray-600">
                                <p><span class="font-semibold" data-i18n="mmcEstablished">Established:</span> 2019</p>
                                <p><span class="font-semibold" data-i18n="mmcArea">Area:</span> 8,000㎡</p>
                                <p><span class="font-semibold" data-i18n="mmcAddress">Address:</span> <span data-i18n="mmcAddressValue">Plot B-12, Zone A, Thilawa SEZ, Yangon, Myanmar</span></p>
                                <p><span class="font-semibold" data-i18n="mmcBusiness">Main Business:</span> <span data-i18n="mimcBusinessValue">Equipment manufacturing and localization services</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Certifications Section -->
        <section id="certifications" class="py-20 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 inline-block relative" data-i18n="certificationsTitle">
                        Certifications
                        <span class="absolute -bottom-3 left-0 w-1/2 h-1 bg-gradient-to-r from-primary to-secondary"></span>
                    </h2>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto mt-8" data-i18n="certificationsSubtitle">Strictly adhering to international standards to ensure high quality and reliability of products and services</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                        <div class="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center text-primary text-4xl mx-auto mb-6">
                            <i class="fa fa-certificate"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2" data-i18n="iso9001">ISO 9001 Certification</h3>
                        <p class="text-gray-600" data-i18n="iso9001Desc">Quality Management System</p>
                    </div>

                    <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                        <div class="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center text-primary text-4xl mx-auto mb-6">
                            <i class="fa fa-leaf"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2" data-i18n="iso14001">ISO 14001 Certification</h3>
                        <p class="text-gray-600" data-i18n="iso14001Desc">Environmental management system</p>
                    </div>

                    <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover">
                        <div class="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center text-primary text-4xl mx-auto mb-6">
                            <i class="fa fa-shield"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2" data-i18n="iso45001">ISO 45001 Certification</h3>
                        <p class="text-gray-600" data-i18n="iso45001Desc">Occupational Health and Safety Management</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section id="contact" class="py-20 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 inline-block relative" data-i18n="contactTitle">
                        Contact Us
                        <span class="absolute -bottom-3 left-0 w-1/2 h-1 bg-gradient-to-r from-primary to-secondary"></span>
                    </h2>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto mt-8" data-i18n="contactSubtitle">Our professional team is ready to provide consultation services and solutions for you</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <div>
                        <div class="bg-gray-50 p-8 rounded-xl mb-8">
                            <h3 class="text-xl font-bold mb-6 flex items-center">
                                <i class="fa fa-map-marker text-primary mr-3 text-2xl"></i>
                                <span data-i18n="companyAddress">Company Address</span>
                            </h3>
                            <p class="text-gray-600 mb-6" data-i18n="addressValue">No. 11 Xinxi Road, Xinwu District, Wuxi, Jiangsu Province, China</p>
                            
                            <h3 class="text-xl font-bold mb-6 flex items-center">
                                <i class="fa fa-phone text-primary mr-3 text-2xl"></i>
                                <span data-i18n="contactInfo">Contact Information</span>
                            </h3>
                            <p class="text-gray-600 mb-3"><span class="font-semibold" data-i18n="phone">Phone:</span> +86-510-85200505</p>
                            <p class="text-gray-600 mb-6"><span class="font-semibold" data-i18n="email">Email:</span> sales@micb2b.com.cn</p>
                            
                            <h3 class="text-xl font-bold mb-6 flex items-center">
                                <i class="fa fa-clock-o text-primary mr-3 text-2xl"></i>
                                <span data-i18n="workingHours">Working Hours</span>
                            </h3>
                            <p class="text-gray-600" data-i18n="hoursValue">Monday to Friday: 8:30 - 17:30</p>
                        </div>
                    </div>

                    <div>
                        <form id="contact-form" class="bg-white p-8 rounded-xl shadow-md border border-tech-gray/50">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="name" class="block text-gray-700 mb-2" data-i18n="yourName">Your Name</label>
                                    <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required>
                                </div>
                                <div>
                                    <label for="company" class="block text-gray-700 mb-2" data-i18n="companyName">Company Name</label>
                                    <input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="email" class="block text-gray-700 mb-2" data-i18n="emailAddress">Email</label>
                                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required>
                                </div>
                                <div>
                                    <label for="phone" class="block text-gray-700 mb-2" data-i18n="phoneNumber">Phone</label>
                                    <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required>
                                </div>
                            </div>

                            <div class="mb-6">
                                <label for="inquiry" class="block text-gray-700 mb-2" data-i18n="inquiryContent">Inquiry Content</label>
                                <textarea id="inquiry" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required></textarea>
                            </div>

                            <button type="submit" class="bg-primary text-white px-8 py-3 rounded-md font-semibold hover:bg-primary/90 transition-all shadow-md hover:shadow-lg flex items-center">
                                <i class="fa fa-paper-plane mr-2"></i>
                                <span data-i18n="sendMessage">Send Message</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer class="site-footer bg-primary text-white pt-16 pb-8">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
                    <div>
                        <h3 class="text-xl font-bold mb-6" data-i18n="footerAbout">About MIC-Tech</h3>
                        <p class="text-gray-300 mb-6" data-i18n="footerDesc">MIC-Tech(Wuxi) Co., Ltd. is a leading automation solution provider in China, specializing in equipment OEM, advanced equipment maintenance, automated production lines and special gas system engineering.</p>
                        <div class="social-links">
                            <a href="#" class="hover:text-secondary transition-colors"><i class="fa fa-linkedin-square text-2xl"></i></a>
                            <a href="#" class="hover:text-secondary transition-colors"><i class="fa fa-youtube-play text-2xl"></i></a>
                            <a href="#" class="hover:text-secondary transition-colors"><i class="fa fa-weixin text-2xl"></i></a>
                            <a href="#" class="hover:text-secondary transition-colors"><i class="fa fa-weibo text-2xl"></i></a>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-xl font-bold mb-6" data-i18n="quickLinks">Quick Links</h3>
                        <ul class="space-y-3">
                            <li><a href="#" data-i18n="home" class="text-gray-300 hover:text-white transition-colors">Home</a></li>
                            <li><a href="#" data-i18n="about" class="text-gray-300 hover:text-white transition-colors">About</a></li>
                            <li><a href="#" data-i18n="services" class="text-gray-300 hover:text-white transition-colors">Services</a></li>
                            <li><a href="#" data-i18n="advantages" class="text-gray-300 hover:text-white transition-colors">Advantages</a></li>
                            <li><a href="#" data-i18n="locations" class="text-gray-300 hover:text-white transition-colors">Locations</a></li>
                            <li><a href="#" data-i18n="certifications" class="text-gray-300 hover:text-white transition-colors">Certifications</a></li>
                            <li><a href="#" data-i18n="contact" class="text-gray-300 hover:text-white transition-colors">Contact</a></li>
                        </ul>
                    </div>

                    <div>
                        <h3 class="text-xl font-bold mb-6" data-i18n="businessInquiry">Business Inquiry</h3>
                        <ul class="space-y-3 text-gray-300">
                            <li class="flex items-start">
                                <i class="fa fa-envelope-o mt-1 mr-3"></i>
                                <span>sales@micb2b.com.cn</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-phone mt-1 mr-3"></i>
                                <span>+86-510-85200505</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-map-marker mt-1 mr-3"></i>
                                <span data-i18n="addressValue">No. 11 Xinxi Road, Xinwu District, Wuxi, Jiangsu Province, China</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="border-t border-gray-700 pt-8 text-center text-gray-400">
                    <p data-i18n="copyright">© 2023 MIC-Tech(Wuxi) Co., Ltd. All Rights Reserved.</p>
                    <p class="mt-2" data-i18n="icp">ICP XXXXXXXX</p>
                </div>
            </div>





        </footer>

        <!-- Back to Top Button -->
        <button id="back-to-top" class="back-to-top">
            <i class="fa fa-chevron-up"></i>
        </button>

        <!-- Cookie Consent Banner -->
        <div id="cookie-consent-banner">
            <p>This website uses cookies to improve your experience. By continuing to use our site, you accept our <a href="#">Cookie Policy</a>.</p>
            <button id="accept-cookies">Accept</button>
        </div>
    </div>