@props(['icon', 'title', 'desc'])

<div class="col-lg-6 d-flex flex-column flex-sm-row justify-content-center align-items-center vm-box"
    data-aos="fade-right" data-aos-duration="1000" data-aos-easing="ease-out-cubic" data-aos-delay="100">
    
    <div class="vm-icon text-center mb-3 mb-md-0 me-md-3" 
        data-aos="fade-right" data-aos-duration="1200" data-aos-delay="200">
        <img src="{{ asset('assets/images/' . $icon) }}" alt="{{ $title }} Icon">
    </div>
    
    <div class="vm-content text-center text-md-start" 
        data-aos="fade-right" data-aos-duration="1400" data-aos-delay="300">
        <h2 style="font-family: 'Poppins', sans-serif; font-weight: 700;">
            {{ $title }}
        </h2>
        <p style="font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 18px; text-align: justify; " class="text-black">
            {{ $desc }}
        </p>
    </div>
</div>