{% extends "layout.html" %}

{% set title = 'Projects' %}

{% block content %}

<section class="help projects-page sec-pad">
    <div class="container">
        <div class="hero-img">
            <img class="mob-off afa" src="_assets/img/projects.png" alt="">
            <img class="mob-on" src="_assets/img/projects-1.png" alt="">
        </div>
        <div class="help-content">
            <div class="row mtmd">
                <div class="col-sm-4 delay-300">
                    <h2 class="capitalize mbmd afa">
                        Buildings are made for
                        human beings
                    </h2>
                </div>
                <div class="col-sm-8 delay-400">
                    <p class="mtxxlg afb">
                        Stay updated on our latest news and get firsthand
                        insights into our industry.
                    </p>
                </div>
                <div class="col-sm-12">
                    <img class="mtmd afc" src="_assets/img/palette.png" alt="">
                    <a class="btn btn-arrow section-btn mtxxlg mrmd mtxxlg capitalize afc" href="#">
                        View our latest projects <br> {% include 'components/arrow-bottom-black.html' %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="projects projects-list sec-pad">
    <div class="container">
        <div class="projects-header">
            <h2 class="no-margin">Projects</h2>
            <div class="filter">
                <div class="download-projects-pdf mob-off filter-label mrxlg">
                    <a href="#">  <img src="_assets/img/Download.png" class="mrsm" alt=""></a>
                    <a style="color:#333; " href=" " download=""><span class="seperator-pdf">Download PDF</span></a>
                </div>
                <div class="filter-label mrxlg">
                    <img src="_assets/img/filter.png" class="mrsm" alt="">
                    <span>Filter by</span>
                </div>
                <div class="select mlxlg">
                    <select name="" id="">
                        <option value="">All Categories</option>
                        <option value="">Residential</option>
                        <option value="">Residential</option>
                    </select>
                </div>

            </div>
            <div class="download-projects-pdf mob-on mtmd filter-label mrxlg">
                <a href="#">  <img src="_assets/img/Download.png" class="mrsm" alt=""></a>
                <a style="color:#333; " href=" " download=""><span class="seperator-pdf">Download PDF</span></a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="column-container project-container column-big">
                    <div class="type-container">
                        <div class="type">
                            <span class="text-upper">
                                 <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                            </span>
                        </div>
                    </div>
                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                        <figcaption class="column-content project-content">
                            <h3 class="no-margin">
                                <strong>JEERA</strong><br>
                                RESIDENTIAL COMPOUND
                            </h3>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...
                            </p>
                            <a class="btn btn-arrow mtxxlg" href="#">
                                Learn more {% include 'components/arrow-right-black.html' %}
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box-big.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="row">
                    <div class="col-sm-12 delay-300">
                        <div class="column-container project-container column-small">
                            <div class="type-container">
                                <div class="type">
                                    <span class="text-upper">
                                         <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                                    </span>
                                </div>
                            </div>
                            <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                                <figcaption class="column-content project-content">
                                    <h3 class="no-margin">
                                        <strong>JEERA</strong><br>
                                        RESIDENTIAL COMPOUND
                                    </h3>
                                    <a class="btn btn-arrow mtxxlg" href="#">
                                        Learn more{% include 'components/arrow-right-black.html' %}
                                    </a>
                                </figcaption>
                            </figure>
                            <div class="box-container">
                                <img src="_assets/img/box.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 delay-400">
                        <div class="column-container project-container column-small mtxlg">
                            <div class="type-container">
                                <div class="type">
                                    <span class="text-upper">
                                         <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                                    </span>
                                </div>
                            </div>
                            <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                                <figcaption class="column-content project-content">
                                    <h3 class="no-margin">
                                        <strong>JEERA</strong><br>
                                        RESIDENTIAL COMPOUND
                                    </h3>
                                    <a class="btn btn-arrow  mtxxlg" href="#">
                                        Learn more{% include 'components/arrow-right-black.html' %}
                                    </a>
                                </figcaption>
                            </figure>
                            <div class="box-container">
                                <img src="_assets/img/box.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 delay-300">
                <div class="column-container project-container column-two mtxxlg">
                    <div class="type-container">
                        <div class="type">
                            <span class="text-upper">
                                 <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                            </span>
                        </div>
                    </div>
                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                        <figcaption class="column-content project-content">
                            <h3 class="no-margin">
                                <strong>JEERA</strong><br>
                                RESIDENTIAL COMPOUND
                            </h3>
                            <a class="btn btn-arrow mtxxlg" href="#">
                                Learn more{% include 'components/arrow-right-black.html' %}
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 delay-400">
                <div class="column-container project-container column-two mtxxlg">
                    <div class="type-container">
                        <div class="type">
                            <span class="text-upper">
                                 <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                            </span>
                        </div>
                    </div>
                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                        <figcaption class="column-content project-content">
                            <h3 class="no-margin">
                                <strong>JEERA</strong><br>
                                RESIDENTIAL COMPOUND
                            </h3>
                            <a class="btn btn-arrow mtxxlg" href="#">
                                Learn more{% include 'components/arrow-right-black.html' %}
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 delay-300">
                <div class="column-container project-container column-two mtxxlg">
                    <div class="type-container">
                        <div class="type">
                            <span class="text-upper">
                                 <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                            </span>
                        </div>
                    </div>
                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                        <figcaption class="column-content project-content">
                            <h3 class="no-margin">
                                <strong>JEERA</strong><br>
                                RESIDENTIAL COMPOUND
                            </h3>
                            <a class="btn btn-arrow mtxxlg" href="#">
                                Learn more{% include 'components/arrow-right-black.html' %}
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 delay-400">
                <div class="column-container project-container column-two mtxxlg">
                    <div class="type-container">
                        <div class="type">
                            <span class="text-upper">
                                 <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                            </span>
                        </div>
                    </div>
                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                        <figcaption class="column-content project-content">
                            <h3 class="no-margin">
                                <strong>JEERA</strong><br>
                                RESIDENTIAL COMPOUND
                            </h3>
                            <a class="btn btn-arrow mtxxlg" href="#">
                                Learn more{% include 'components/arrow-right-black.html' %}
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="column-container project-container column-small mtxxlg">
                                    <div class="type-container">
                                        <div class="type">
                                        <span class="text-upper">
                                             <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                                        </span>
                                        </div>
                                    </div>
                                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                                        <figcaption class="column-content project-content">
                                            <h3 class="no-margin">
                                                <strong>JEERA</strong><br>
                                                RESIDENTIAL COMPOUND
                                            </h3>
                                            <a class="btn btn-arrow mtxxlg" href="#">
                                                Learn more{% include 'components/arrow-right-black.html' %}
                                            </a>
                                        </figcaption>
                                    </figure>
                                    <div class="box-container">
                                        <img src="_assets/img/box.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 delay-300">
                                <div class="column-container project-container column-small mtxlg">
                                    <div class="type-container">
                                        <div class="type">
                                        <span class="text-upper">
                                             <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                                        </span>
                                        </div>
                                    </div>
                                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                                        <figcaption class="column-content project-content">
                                            <h3 class="no-margin">
                                                <strong>JEERA</strong><br>
                                                RESIDENTIAL COMPOUND
                                            </h3>
                                            <a class="btn btn-arrow  mtxxlg" href="#">
                                                Learn more{% include 'components/arrow-right-black.html' %}
                                            </a>
                                        </figcaption>
                                    </figure>
                                    <div class="box-container">
                                        <img src="_assets/img/box.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 delay-400">
                        <div class="column-container project-container column-big left mtxxlg">
                            <div class="type-container">
                                <div class="type">
                                <span class="text-upper">
                                     <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                                </span>
                                </div>
                            </div>
                            <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                                <figcaption class="column-content project-content">
                                    <h3 class="no-margin">
                                        <strong>JEERA</strong><br>
                                        RESIDENTIAL COMPOUND
                                    </h3>
                                    <p>
                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...
                                    </p>
                                    <a class="btn btn-arrow mtxxlg" href="#">
                                        Learn more{% include 'components/arrow-right-black.html' %}
                                    </a>
                                </figcaption>
                            </figure>
                            <div class="box-container">
                                <img src="_assets/img/box-big.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 delay-300">
                <div class="column-container project-container column-two mtxxlg">
                    <div class="type-container">
                        <div class="type">
                        <span class="text-upper">
                             <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                        </span>
                        </div>
                    </div>
                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                        <figcaption class="column-content project-content">
                            <h3 class="no-margin">
                                <strong>JEERA</strong><br>
                                RESIDENTIAL COMPOUND
                            </h3>
                            <a class="btn btn-arrow mtxxlg" href="#">
                                Learn more{% include 'components/arrow-right-black.html' %}
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-6 delay-400">
                <div class="column-container project-container column-two mtxxlg">
                    <div class="type-container">
                        <div class="type">
                        <span class="text-upper">
                             <i class="fa fa-square mrsm"></i> Architecture / RESIDENTIAL
                        </span>
                        </div>
                    </div>
                    <figure class="column project overlay cover" style="background-image:url('_assets/img/intro_02.jpg');">
                        <figcaption class="column-content project-content">
                            <h3 class="no-margin">
                                <strong>JEERA</strong><br>
                                RESIDENTIAL COMPOUND
                            </h3>
                            <a class="btn btn-arrow mtxxlg" href="#">
                                Learn more{% include 'components/arrow-right-black.html' %}
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <button class="btn btn-arrow section-btn load-more">
                    <img src="_assets/img/load.png" class="mrsm" alt="">
                    <span>
                        Load more
                    </span>
                </button>
            </div>
        </div>
    </div>
</section>

{% endblock content %}