{% extends 'service_layout.html' %}
{% load wagtailimages_tags %}

{% block title %} : {{page.title}}{% endblock %}

{% block breadcrumb %}
{% endblock breadcrumb %}

{% block content %}
<section class="min-h-screen">

    <div class="py-10 bg-orange-400 text-3xl text-center text-white">
        {{page.title}}

    </div>
    <div class="flex justify-center flex-wrap gap-6">
        <!-- {{page.get_children}} -->
        {% for item in page.get_children %}
        <a href="{{item.url}}" class="overflow-hidden w-96 h-auto  shadow-2xl py-10 px-6 rounded-xl">
            <div
                class="flex justify-center w-full object-cover transition-transform duration-500 ease-in-out transform hover:scale-125">
                {% image item.specific.titleImg fill-200x200 %}
            </div>
            <span class="line-clamp-5 text-justify mt-4">
                {{item.specific.shortDesc|safe}}
            </span>
        </a>
        {% endfor %}

        

    </div>
</section>

{% endblock content %}

{% block footer %}

{% endblock footer %}

{% block bottomFooter %}
{% include 'Settings/bottomFooter.html' %}
{% endblock bottomFooter %}