<?php
/**
 * Block: Black About Info - Warehousing and Distribution Project
 */
 
 // 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}
?>



<section class="about-info-section warehousing-distribution-section" style="background-color: #fff; color: #000; padding: 80px 0;">
    <div class="container" style="max-width: 1200px; margin: 0 auto; ">
        <!-- Section Title -->
        <div class="section-header" style="text-align: left; margin-bottom: 60px;">
            <h2 style="color: #2dada2; font-size: 2.2rem; font-weight: bold; margin: 0; text-transform: uppercase; letter-spacing: 1px;">Our Warehousing and Distribution Project</h2>
        </div>
        
        <!-- Two Column Content -->
        <div class="two-column-wrapper" style="display: flex; gap: 40px; align-items: flex-start; margin-bottom: 60px; flex-wrap: wrap;">
            <!-- Left Content - Features List -->
            <div class="left-content" style="flex: 1; min-width: 300px;">
                <h3 style="color: #000; font-size: 1.8rem; margin-bottom: 30px; font-weight: 600;">Key Details and Features</h3>
                
                <ul style="list-style: none; padding: 0; margin: 0; line-height: 1.4;">
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        Address: Koning Leopoldlaan 5, 2870 Puurs
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        CO2 Neutral Warehouse
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        22 loading docks
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        Immediately available
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        Next to major road connection
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        Existing battery and ESS flows
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        Bonded warehouse
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        22500 sqm
                    </li>
                    <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: #333; font-size: 1.1rem;">
                        <span style="position: absolute; left: 0; color: #007bff; font-weight: bold;">·</span>
                        Heavy material handling equipment available up to 3 tons payload
                    </li>
                </ul>
            </div>
            
            <!-- Right Content - First Image -->
            <div class="right-content" style="flex: 1; min-width: 300px;">
                <div class="image-wrapper" style="border-radius: 10px; overflow: hidden; ">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/htgfvdd.png" 
                         alt="Warehousing Facility" 
                         style="width: 100%; height: auto; display: block; transition: transform 0.3s ease;" 
                         onmouseover="this.style.transform='scale(1.05)'" 
                         onmouseout="this.style.transform='scale(1)'">
                </div>
            </div>
        </div>
        
        <!-- Full Width Bottom Image -->
        <div class="bottom-image-section" style="width: 100%;">
            <div class="image-wrapper" style="border-radius: 10px; overflow: hidden;">
                <img src="<?php echo get_template_directory_uri(); ?>/assets/images/htbgfd.png" 
                     alt="Warehousing Distribution Center" 
                     style="width: 100%; height: auto; display: block; transition: transform 0.3s ease;" 
                     onmouseover="this.style.transform='scale(1.02)'" 
                     onmouseout="this.style.transform='scale(1)'">
            </div>
        </div>
    </div>
</section>

<style>
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column !important;
    }
    
    .two-column-wrapper {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .left-content, .right-content {
        min-width: auto !important;
        width: 100% !important;
    }
    
    .section-header h2 {
        font-size: 2rem !important;
    }
    
    .left-content h3 {
        font-size: 1.5rem !important;
    }
    
    .left-content li {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .warehousing-distribution-section {
        padding: 40px 0 !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
    
    .section-header h2 {
        font-size: 1.8rem !important;
    }
    
    .two-column-wrapper {
        gap: 20px !important;
    }
}
</style>