<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Machining Process - PT. Purnama Siwi Mandiri</title>
    <link rel="stylesheet" href="<?php echo e(asset('css/global.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('css/ServiceDetail.css')); ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

    <?php echo $__env->make('partials.navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <section class="detail-hero" style="background: linear-gradient(rgba(17, 34, 64, 0.85), rgba(17, 34, 64, 0.85)), url('<?php echo e(asset('img/Services Page/(1) Automationmachine.png')); ?>') center/cover;">
        <div class="hero-text fade-in">
            <span class="top-badge">INDUSTRIAL SOLUTIONS</span>
            <h1>Special Purpose Machine [SPM]</h1>
            <p>Machine automation solutions specifically and precisely designed to optimize the speed, quality, and efficiency of your industrial production.</p>
        </div>
    </section>

    <section class="detail-overview container fade-in">
        <div class="overview-grid">
            <div class="overview-text">
                <span class="badge-subtitle">Know More About</span>
                <h2>Special Purpose Machine [SPM]</h2>
                <div class="divider"></div>
                <p>An automatic machine that is custom-made and designed to complete a specific mission or a series of production processes that cannot be efficiently handled by standard machines is known as a Special Purpose Machine (SPM). The integration of a variety of mechanical components, precision sensors, and drive systems (such as motors, pneumatics, or hydraulics) is the main focus of its operation. These systems are entirely controlled by a computer "brain" known as a PLC (Programmable Logic Controller).<br><br> </p>
                <p>This machine is designed to perform repetitive duties in a continuous manner, including assembly, welding, cutting, and product quality testing, with an exceptional level of speed and precision. SPM has emerged as the primary solution for the manufacturing industry to reduce working time, minimize human error, and significantly enhance output capacity and quality, as it was developed to address the distinctive requirements of a production line.</p>  
                <div class="feature-boxes">
                    <div class="feature-box">
                        <i class="fa-solid fa-gears"></i>
                        <span>Tailor-Made Design</span>
                    </div>
                    <div class="feature-box">
                        <i class="fa-solid fa-crosshairs"></i>
                        <span>High Precision & Accuracy</span>
                    </div>
                    <div class="feature-box">
                        <i class="fa-solid fa-layer-group"></i>
                        <span>Maximum Productivity</span>
                    </div>
                    <div class="feature-box">
                        <i class="fa-solid fa-shield-halved"></i>
                        <span>Consistent Quality</span>
                    </div>
                </div>
            </div>
            
            <div class="overview-image-wrapper">
                <img src="<?php echo e(asset('img/machining-process.jpg')); ?>" alt="Picture" class="main-img">
            </div>
        </div>
    </section>


    <section class="gallery-section container fade-in">
        <div class="section-header text-center">
            <h2>Implementation Gallery</h2>
            <p>Click on the project image to view complete documentation.</p>
        </div>

        <div class="popup-gallery-grid">
            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(1) Machine 1.jpeg')); ?>", "<?php echo e(asset('img/proyek1-b.jpg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(1) Machine 1.jpeg')); ?>" alt="Project 1">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Gantry Auto Transfer Barashi</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Machining</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(2) Machine 2.jpeg')); ?>", "<?php echo e(asset('img/proyek2-b.jpg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(2) Machine 2.jpeg')); ?>" alt="Project 2">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Spec Up Coling</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Milling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(3) Machine 3.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(3) Machine 3.jpeg')); ?>" alt="Project 3">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>SPM Machine</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(4) Machine 4.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(4) Machine 4.jpeg')); ?>" alt="Project 4">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>SPM Machine</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(5) Machine 5.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(5) Machine 5.jpeg')); ?>" alt="Project 5">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>SPM Machine</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='[
                    "<?php echo e(asset("img/Doc SPM Pro/(6) Machine 6.jpeg")); ?>",
                    "<?php echo e(asset("img/Doc SPM Pro/(6.1) Machine 6.1.jpeg")); ?>", 
                    "<?php echo e(asset('video/SPM Documentation/Automation Lifter Turning Hoistles [1].mp4')); ?>"}}",
                    "<?php echo e(asset('video/SPM Documentation/Automation Lifter Turning Hoistles [2].mp4')); ?>"

                ]'>
                    <img src="<?php echo e(asset("img/Doc SPM Pro/(6) Machine 6.jpeg")); ?>" alt="Project 6">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Automation Lifter Turning Hoistles</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
             </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(7) Machine 7.jpeg')); ?>", "<?php echo e(asset('img/Doc SPM Pro/(7.1) Machine 7.1.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(7) Machine 7.jpeg')); ?>" alt="Project 7">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Auto Gate Cutting</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(8) Machine Temperature Test Unit.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(8) Machine Temperature Test Unit.jpeg')); ?>" alt="Project 8">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Temperature Test Unit</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(9) Machine Crusher Unit.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(9) Machine Crusher Unit.jpeg')); ?>" alt="Project 9">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Crusher Unit</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(10) Machine Briketing Unit.jpg')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Briketing Unit.mp4')); ?>"
                
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(10) Machine Briketing Unit.jpg')); ?>" alt="Project 10">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Briketing Unit</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

        
             <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(11) Machine Wasing Airblower Unit.jpg')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Wasing Airblower Unit [1].mp4')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Wasing Airblower Unit [2].mp4')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Wasing Airblower Unit [3].mp4')); ?>"
                
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(11) Machine Wasing Airblower Unit.jpg')); ?>" alt="Project 11">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Wasing Airblower Unit</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(12) Machine Deep Washing Unit.jpeg')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Deep Washing Unit [1].mp4')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Deep Washing Unit [2].mp4')); ?>"
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(12) Machine Deep Washing Unit.jpeg')); ?>" alt="Project 12">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Deep Washing Unit</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>
            
        
             <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(13) Machine Flowcoater Unit.jpeg')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Flowcoater Unit [1].mp4')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Flowcoater Unit [2].mp4')); ?>"
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(13) Machine Flowcoater Unit.jpeg')); ?>" alt="Project 13">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Flowcoater Unit</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(14) Machine Mic Miller.jpeg')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Mic Miller.mp4')); ?>"
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(14) Machine Mic Miller.jpeg')); ?>" alt="Project 14">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Mic Miller</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(15) Machine Core Both Unit.jpeg')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Core Both Unit [1].mp4')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Core Both Unit [2].mp4')); ?>"
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(15) Machine Core Both Unit.jpeg')); ?>" alt="Project 15">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Core Both Unit</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(16) Hutenki Karakuri.jpeg')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Hutenki Karakuri.mp4')); ?>"
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(16) Hutenki Karakuri.jpeg')); ?>" alt="Project 16">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Hutenki Karakuri</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(17) Abolish Inorganic Cores Machine.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(17) ABOLISH INORGANIC CORES MACHINE.jpeg')); ?>" alt="Project 17">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Abolish Inorganic Cores Machine</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(18) AUTO BC MATERIAL TRANSFER.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(18) AUTO BC MATERIAL TRANSFER.jpeg')); ?>" alt="Project 18">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Auto BC Material Transfer</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(19) AUTO MATERIAL TRANSFER BODY CALIPER.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(19) AUTO MATERIAL TRANSFER BODY CALIPER.png')); ?>" alt="Project 19">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Auto Material Transfer Body Caliper</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(20) AUTO TIR.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(20) AUTO TIR.png')); ?>" alt="Project 20">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Auto TIR</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

             <div class="project-card">
                <div class="gallery-card-top" data-images='[
                "<?php echo e(asset('img/Doc SPM Pro/(21) AUTO TRANSFER CRANKSHAFT & CAMSHAFT.png')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Auto Transfer Crankshaft & Camshaft [1].mp4')); ?>",
                "<?php echo e(asset('video/SPM Documentation/Auto Transfer Crankshaft & Camshaft [2].mp4')); ?>"
                ]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(21) AUTO TRANSFER CRANKSHAFT & CAMSHAFT.png')); ?>" alt="Project 21">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Media</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Auto Transfer Crankshaft & Camshaft</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(22) CONVEYOR SHOE ASSY 4.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(22) CONVEYOR SHOE ASSY 4.png')); ?>" alt="Project 22">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Machine Conveyor Shoe Assy</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

             <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(23) DUMPER PULLEY.jpeg')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(23) DUMPER PULLEY.jpeg')); ?>" alt="Project 23">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Dumper Pulley</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

             <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(24) CONVEYOR TRANSFER PRODUCT.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(24) CONVEYOR TRANSFER PRODUCT.png')); ?>" alt="Project 24">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Conveyor Transfer Product</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

             <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(25) HANGING AUTO TRANSFER BARASHI.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(25) HANGING AUTO TRANSFER BARASHI.png')); ?>" alt="Project 25">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Hanging Auto Transfer Barashiy</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(26) ROTARY TABLE BARASHI.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(26) ROTARY TABLE BARASHI.png')); ?>" alt="Project 26">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Rotary Table Barashi</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(27) HEATER DRYNG MACHINE.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(27) HEATER DRYNG MACHINE.png')); ?>" alt="Project 27">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Heater Dryng Machine</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(28) LINE FRIENDLY POS VISUAL CHECK.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(28) LINE FRIENDLY POS VISUAL CHECK.png')); ?>" alt="Project 28">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Line Friendly Pos Visual Check</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

            <div class="project-card">
                <div class="gallery-card-top" data-images='["<?php echo e(asset('img/Doc SPM Pro/(29) PUSHER CONVEYOR PALLET CAMSHAFT.png')); ?>"]'>
                    <img src="<?php echo e(asset('img/Doc SPM Pro/(29) PUSHER CONVEYOR PALLET CAMSHAFT.png')); ?>" alt="Project 29">
                    <div class="card-overlay">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                        <span>View Photos</span>
                    </div>
                </div>
                <div class="card-body">
                    <h3>Pusher Conveyor Pallet Camshaft</h3>
                    <p>[DESCRIPTION]</p>
                    <span class="project-tag">#Drilling</span>
                </div>
            </div>

        </div>
    </section>

    <!-- INI WADAH MODAL YANG BARU, ADA WADAH VIDEONYA! -->
    <div id="projectModal" class="modal">
        <span class="close-modal">&times;</span>
        <div class="modal-content">
            
            <img id="modalImage" src="" alt="Modal Image">
            
            <!-- Ingat, display: none tetap di sini karena diatur oleh JavaScript saat buka-tutup -->
            <video id="modalVideo" src="" controls autoplay style="display: none;"></video>
            
            <button class="modal-btn prev-modal"><i class="fa-solid fa-chevron-left"></i></button>
            <button class="modal-btn next-modal"><i class="fa-solid fa-chevron-right"></i></button>
            <div class="modal-counter"><span id="currentImgNum">1</span> / <span id="totalImgNum">3</span></div>
        </div>
    </div>

    <?php echo $__env->make('partials.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <script src="<?php echo e(asset('js/global.js')); ?>"></script>
    <script src="<?php echo e(asset('js/serviceDetail.js')); ?>"></script> 
</body>
</html><?php /**PATH C:\Users\Agus Indrawanto\Herd\PSM Website\resources\views/service-detail/SPM.blade.php ENDPATH**/ ?>