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

@php 
    $delayFactor = ($index + 1) * 100; 
@endphp

<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="{{ $delayFactor }}">
    <div class="card pillar-card h-100 text-center p-4" data-aos="flip-right" data-aos-delay="{{ $delayFactor + 50 }}">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            
            <div class="pillar-icon mb-3" data-aos="slide-down" data-aos-delay="{{ $delayFactor + 100 }}">
                <img src="{{ asset($icon) }}" alt="Pillar Icon" class="img-fluid">
            </div>

            <h3 class="card-title fw-bold mb-3 text-black h5" data-aos="fade-up" data-aos-delay="{{ $delayFactor + 150 }}" style="font-family: 'Poppins', sans-serif;">
                {!! $title !!}
            </h3>
            
            <p class="card-text" style="font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 18px;" data-aos="fade-up" data-aos-delay="{{ $delayFactor + 200 }}">
                {{ $desc }}
            </p>
            
        </div>
    </div>
</div>