{% extends "base.html" %}
{% load static %}

{% block content %}


 <section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary" data-overlay-dark="8" data-background="{% static 'img/banner/page-title.jpg' %}">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12 text-center">
                <h1> <span class="font-weight-800 text-primary">{{ main.name }}</span></h1>
                <ul class="list-unstyled">
                    <li><a href="index.html">HOME</a></li>
                    <li>{{ main.name }} → {{ category.name }}
                </ul>
            </div>
        </div>
    </div>
    <div class="line-animated">
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
    </div>
</section>

<section>
    <div class="container-fluid">
        <div class="row g-4 justify-content-center">

            {% for c in categories %}
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 py-5">
                <a href="{% url 'services-subcategory' main.id c.id %}" class="card text-center p-4 py-5">
                    <i class="{{ c.icon }}"></i>
                    <h4 class="mt-2">{{ c.name }}</h4>
                </a>
            </div>
            {% endfor %}

        </div>
    </div>
</section>


{% endblock %}