{% load static %}

<div class="service-card-wrapper" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|multiply:100 }}">
    <div class="card h-100 border-0 shadow-sm hover-lift transition-all service-category-card">
        <div class="card-body text-center p-4 d-flex flex-column h-100">
            <!-- Icon -->
            <div class="icon-wrapper bg-primary bg-opacity-10 text-primary rounded-3 d-inline-flex align-items-center justify-content-center mb-4 mx-auto" 
                 style="width: 80px; height: 80px;">
                <i class="{{ icon }} fa-2x" aria-hidden="true"></i>
            </div>
            
            <!-- Title -->
            <h3 class="h5 mb-3 text-dark">{{ title|escape }}</h3>
            
            <!-- Description -->
            <div class="text-muted mb-4 flex-grow-1">
                <p class="mb-0">{{ description|escape }}</p>
            </div>
            
            <!-- Button -->
            <div class="mt-auto">
                <a href="{{ url }}" class="btn btn-outline-primary w-100">
                    {{ link_text|escape }} <i class="fas fa-arrow-right ms-1 small"></i>
                </a>
            </div>
        </div>
    </div>
</div>




.service-category-card:hover .btn-outline-primary {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Ensure text is properly aligned and readable */
.service-category-card h3 {
    font-weight: 600;
    color: var(--bs-dark);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.service-category-card p {
    color: var(--bs-gray-700);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .service-card-wrapper {
        padding: 0 8px;
        margin-bottom: 16px;