{% extends "layout.html" %}

{% set title = 'Homepage' %}

{% block content %}

<section class="home-slider-wrapper">
    <div class="home-slider">
        <div class="slide-item cover" style="background-image: url('_assets/img/slide.jpg')">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="slider-content">
                            <h2>
                                We focus on creating powerful human experiences, and
                                <span>great architecture comes naturally.</span>
                            </h2>
                            <cite class="mtlg">Ehab Mokhtar, CEO of IDIA</cite>
                            <a href="#" class="btn btn-right mtxxlg">
                                See our work {% include 'components/arrow-right.html' %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide-item cover" style="background-image: url('_assets/img/slide.jpg')">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="slider-content">
                            <h2>
                                We focus on creating powerful human experiences, and
                                <span>great architecture comes naturally.</span>
                            </h2>
                            <cite class="mtlg">Ehab Mokhtar, CEO of IDIA</cite>
                            <a href="#" class="btn btn-arrow mtxxlg">
                                See our work {% include 'components/arrow-right.html' %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide-item cover" style="background-image: url('_assets/img/slide.jpg')">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="slider-content">
                            <h2>
                                We focus on creating powerful human experiences, and
                                <span>great architecture comes naturally.</span>
                            </h2>
                            <cite class="mtlg">Ehab Mokhtar, CEO of IDIA</cite>
                            <a href="#" class="btn btn-arrow mtxxlg">
                                See our work {% include 'components/arrow-right.html' %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="discover-container">
        <div class="discover">
            <span>
                {% include 'components/arrow-left.html' %}
                Discover
            </span>
        </div>
    </div>
</section>

<section class="intro sec-pad">
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <div class="intro-text">
                    <p>
                        At IDIA, we believe that the solution to every
                        architectural problem lies in one of these two approaches.
                    </p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="horizental-divider-container">
                <div class="horizental-divider">
                    <div class="line"></div>
                    <span>&</span>
                    <div class="line"></div>
                </div>
            </div>
            <div class="col-sm-6 col-xs-11 no-padding">
                <div class="column-container approach-container">
                    <div class="box-container top">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                    <div class="figure-container">
                        <figure class="column approach cover" style="background-image:url('_assets/img/intro_01.jpg');">
                            <figcaption class="column-content approach-content">
                                <h3>
                                    Architecture <br>
                                    & Community Design
                                </h3>
                                <a href="#" class="btn btn-arrow mtxxlg">
                                    Learn more {% include 'components/arrow-right.html' %}
                                </a>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 no-padding col-xs-11 col-sm-push-0 col-xs-push-1 delay-200">
                <div class="column-container approach-container">
                    <div class="figure-container">
                        <figure class="column approach cover" style="background-image:url('_assets/img/intro_02.jpg');">
                            <figcaption class="column-content approach-content">
                                <h3>
                                    Product<br>
                                    & Service Innovation
                                </h3>
                                <a class="btn ideax-btn btn-arrow mtxxlg" href="#">
                                    Visit IDIA<span>X</span>&nbsp; website {% include 'components/arrow-right.html' %}
                                </a>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="work sec-pad">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="work-container">
                    <h2 class="mtxlg">Our work</h2>
                    <p>
                        As creatives, we make it a habit to look at old problems from new angles; learning from our competitors and leading the market with incremental or disruptive innovation. As a result, each and every single project is unique in its presentation and inventive in its implementation.
                    </p>
                </div>
            </div>
            <div class="col-sm-8 delay-200 mob-off">
                <img src="_assets/img/work.png" alt="">
            </div>
        </div>
    </div>
</section>

<section class="projects sec-pad">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="section-title">
                    <h2 class="text-center">Latest Projects</h2>
                </div>
            </div>
        </div>
        <div class="row mob-off">
            <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="project-detail.html">
                                Learn more {% include 'components/arrow-right.html' %}
                                            {% 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<i class="mlsm fa fa-long-arrow-alt-right"></i>
                            </a>
                        </figcaption>
                    </figure>
                    <div class="box-container">
                        <img src="_assets/img/box.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="mob-on">
            <div class="row">
                <div class="col-sm-12">
                    <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="project-detail.html">
                                    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 class="projects-slider">
                <div class="project-item">
                    <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="project-item">
                    <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="project-item">
                    <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="project-item">
                    <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="project-item">
                    <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>
        </div>
        <a class="btn btn-arrow mtxxlg section-btn pull-right" href="#">
            View all projects {% include 'components/arrow-right-black.html' %}
        </a>
    </div>
</section>


<section class="news sec-pad">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="section-title">
                    <h2 class="text-center">Latest News</h2>
                </div>
            </div>
        </div>
        <div class="row mob-off">
            <div class="col-sm-4">
                <div class="news-block">
                    <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                    <div class="news-content">
                        <h3 class="afa">News</h3>
                        <div class="date afa">May, 9th, 2018</div>
                        <p class="mtsm afb">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                        </p>
                        <a class="btn btn-arrow mtxlg section-btn afc" href="#">
                            Read more {% include 'components/arrow-right-black.html' %}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 delay-200">
                <div class="news-block">
                    <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                    <div class="news-content">
                        <h3 class="afa">News</h3>
                        <div class="date afa">May, 9th, 2018</div>
                        <p class="mtsm afb">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                        </p>
                        <a class="btn btn-arrow mtxlg section-btn afc" href="#">
                            Read more {% include 'components/arrow-right-black.html' %}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 delay-300">
                <div class="news-block">
                    <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                    <div class="news-content">
                        <h3 class="afa">News</h3>
                        <div class="date afa">May, 9th, 2018</div>
                        <p class="mtsm afb">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                        </p>
                        <a class="btn btn-arrow mtxlg section-btn afc" href="#">
                            Read more {% include 'components/arrow-right-black.html' %}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mob-on">
            <div class="projects-slider news-slider">
                <div class="project-item news-item">
                    <div class="news-block">
                        <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                        <div class="news-content">
                            <h3 class="afa">News</h3>
                            <div class="date ">May, 9th, 2018</div>
                            <p class="mtsm">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                            </p>
                            <a class="btn btn-arrow mtxlg section-btn" href="#">
                                Read more {% include 'components/arrow-right-black.html' %}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="project-item news-item">
                    <div class="news-block">
                        <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                        <div class="news-content">
                            <h3>News</h3>
                            <div class="date">May, 9th, 2018</div>
                            <p class="mtsm">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                            </p>
                            <a class="btn btn-arrow mtxlg section-btn" href="#">
                                Read more {% include 'components/arrow-right-black.html' %}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="project-item news-item">
                    <div class="news-block">
                        <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                        <div class="news-content">
                            <h3>News</h3>
                            <div class="date">May, 9th, 2018</div>
                            <p class="mtsm">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                            </p>
                            <a class="btn btn-arrow mtxlg section-btn" href="#">
                                Read more {% include 'components/arrow-right-black.html' %}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="project-item news-item">
                    <div class="news-block">
                        <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                        <div class="news-content">
                            <h3>News</h3>
                            <div class="date">May, 9th, 2018</div>
                            <p class="mtsm">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                            </p>
                            <a class="btn btn-arrow mtxlg section-btn" href="#">
                                Read more {% include 'components/arrow-right-black.html' %}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="project-item news-item">
                    <div class="news-block">
                        <div class="news-image cover" style="background-image: url('_assets/img/intro_02.jpg')"></div>
                        <div class="news-content">
                            <h3>News</h3>
                            <div class="date">May, 9th, 2018</div>
                            <p class="mtsm">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem I rem Ipsum is simply dummy text of the printing and typesetting industry.
                            </p>
                            <a class="btn btn-arrow mtxlg section-btn" href="#">
                                Read more {% include 'components/arrow-right-black.html' %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 delay-900">
                <a class="btn btn-arrow mtxxlg section-btn pull-right mtxxlg" href="#">
                    Read all News {% include 'components/arrow-right-black.html' %}
                </a>
            </div>
        </div>
    </div>
</section>

<section class="help cover sec-pad" style="background-image: url('_assets/img/help.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="help-content">
                    <h2 class="capitalize mbmd afa">we can help</h2>
                    <p class="afb">
                        Roadblocks are but a fork in the road, leading to bigger opportunities and better prospects.
                        <span class="mtxlg">
                              Got a project or a collaboration in mind?
                        </span>
                    </p>
                    <a class="btn btn-arrow mtxxlg mrmd mbxxlg capitalize afc" href="#">
                        contact us {% include 'components/arrow-right.html' %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}