{% extends "layout.html" %}

{% set title = 'Project Details' %}

{% block content %}
<section class="idia-hero cover" style="background-image: url('_assets/img/slide.jpg')">
    <div class="container">
        <div class="hero-project-text">
            <img class="afa" src="_assets/img/project-logo.png" alt="">
            <h2 class="afb">
                The Soul of the <br>
                Downtown
            </h2>
            <img  class="afc" src="_assets/img/palette.png" alt="">
        </div>
    </div>
</section>


<section class="hero-text">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-xs-10 delay-900">
                <div class="hero-text-container project-text-container">
                    <h2 class="mblg">ALMA</h2>
                    <cite class="text-upper">residential projects</cite>
                    <p class="mtxlg">
                        ALMA is the de-facto central of Sheikh Zayed. The center
                        of the new suburban hub that is beginning to thrive with
                        a whole new range of leisure activities and amenities.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-project">
    <div class="container">
        <div class="row mtmd">
            <div class="col-sm-5">
                <div class="row">
                    <div class="col-sm-5 col-xs-5">
                        <div class="about-title">
                            <h3 class="no-margin">
                                About the project
                            </h3>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 delay-300">
                        <div class="project-details">
                            <div class="single-detail mbxxlg">
                                <h4 class="no-margin">Address</h4>
                                <span>Shekh Zayd</span>
                            </div>
                            <div class="single-detail mbxxlg">
                                <h4 class="no-margin">Client</h4>
                                <span>Iwan Developments</span>
                            </div>
                            <div class="single-detail">
                                <h4 class="no-margin">Year</h4>
                                <span>2016</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-7 delay-400">
                <div class="about-project-img">
                    <img src="_assets/img/about-project.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="project-in sec-pad cover" style="background-image: url('_assets/img/sketch.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-5 col-xs-10 col-sm-offset-7 col-xs-offset-2">
                <div class="project-in-content">
                    <h2 class="tra">
                        Inspiration
                    </h2>
                    <p class="mbmd">
                        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
                        a galley of type and scrambled it to make a type specimen book.
                    </p>
                    <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
                        a galley of type and scrambled it to make a type specimen book.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="project-in-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-2">
                <div class="project-in-img">
                    <div class="in-small">
                        <div class="in-img">
                            <img src="_assets/img/sketch-1.jpg" alt="">
                        </div>
                        <div class="in-img">
                            <img src="_assets/img/sketch-2.jpg" alt="">
                        </div>
                        <div class="in-img">
                            <img src="_assets/img/sketch-3.jpg" alt="">
                        </div>
                    </div>
                    <div class="in-large pull-right">
                        <div class="in-img">
                            <img src="_assets/img/sketch-4.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="implementation sec-pad">
    <div class="container" style="background-image: url('_assets/img/model.jpg')">
        <div class="row">
            <div class="col-sm-6 col-xs-10">
                <div class="project-in-content imple">
                    <h2 class="afa">
                        Implementation
                    </h2>
                    <div class="p-content afb">
                        <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
                            a galley of type and scrambled it to make a type specimen book.
                        </p>
                        <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
                            a galley of type and scrambled it to make a type specimen book.
                        </p>
                    </div>
                    <a class="btn btn-arrow section-btn mtxxlg mrmd mtxxlg capitalize afd" href="#">
                        designed house models  <br> {% include 'components/arrow-bottom-black.html' %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="house">
    <div class="container">
        <div class="row mob-off">
            <div class="col-sm-4">
                <div class="house-model">
                    <div class="hm-img">
                        <img src="_assets/img/model-1.jpg" alt="">
                    </div>
                    <h4 class="no-margin mtsm">
                        Family Homes
                    </h4>
                </div>
            </div>
            <div class="col-sm-4 delay-300">
                <div class="house-model">
                    <div class="hm-img">
                        <img src="_assets/img/model-2.jpg" alt="">
                    </div>
                    <h4 class="no-margin mtsm">
                        Twin Houses
                    </h4>
                </div>
            </div>
            <div class="col-sm-4 delay-400">
                <div class="house-model">
                    <div class="hm-img">
                        <img src="_assets/img/model-3.jpg" alt="">
                    </div>
                    <h4 class="no-margin mtsm">
                        Villas
                    </h4>
                </div>
            </div>
        </div>
        <div class="idia-obj-slider mob-on">
            <div class="idia-mission house-model">
                <div class="hm-img">
                    <img src="_assets/img/model-1.jpg" alt="">
                </div>
                <h4 class="no-margin mtsm">
                    Family Homes
                </h4>
            </div>
            <div class="idia-mission house-model">
                <div class="hm-img">
                    <img src="_assets/img/model-2.jpg" alt="">
                </div>
                <h4 class="no-margin mtsm">
                    Twin Houses
                </h4>
            </div>
            <div class="idia-mission house-model">
                <div class="hm-img">
                    <img src="_assets/img/model-3.jpg" alt="">
                </div>
                <h4 class="no-margin mtsm">
                    Villas
                </h4>
            </div>
        </div>
    </div>
</section>

<section class="gallery sec-pad">
    <div class="container">
        <div class="projects-images-c">
            <div class="projects-images">
                <div class="gallery-img">
                    <a data-fancybox="gallery" href="_assets/img/video-slider-img.jpg">
                        <div class="gallery-it cover" style="background-image: url('_assets/img/video-slider-img.jpg')"></div>
                    </a>
                </div>
                <div class="gallery-img">
                    <a data-fancybox="gallery" href="_assets/img/video-slider-img.jpg">
                        <div class="gallery-it cover" style="background-image: url('_assets/img/video-slider-img.jpg')"></div>
                    </a>
                </div>
                <div class="gallery-img">
                    <a data-fancybox="gallery" href="_assets/img/video-slider-img.jpg">
                        <div class="gallery-it cover" style="background-image: url('_assets/img/video-slider-img.jpg')"></div>
                    </a>
                </div>
                <div class="gallery-img">
                    <a data-fancybox="gallery" href="_assets/img/video-slider-img.jpg">
                        <div class="gallery-it cover" style="background-image: url('_assets/img/video-slider-img.jpg')"></div>
                    </a>
                </div>
                <div class="gallery-img">
                    <a data-fancybox="gallery" href="_assets/img/video-slider-img.jpg">
                        <div class="gallery-it cover" style="background-image: url('_assets/img/video-slider-img.jpg')"></div>
                    </a>
                </div>
                <div class="gallery-img">
                    <a data-fancybox="gallery" href="_assets/img/video-slider-img.jpg">
                        <div class="gallery-it cover" style="background-image: url('_assets/img/video-slider-img.jpg')"></div>
                    </a>
                </div>
                <div class="gallery-img">
                    <a data-fancybox="gallery" href="_assets/img/video-slider-img.jpg">
                        <div class="gallery-it cover" style="background-image: url('_assets/img/video-slider-img.jpg')"></div>
                    </a>
                </div>
            </div>
            <div class="slider-arrows">
                <a class="btn gallery-arrow gallery-left" href="#">
                    {% include 'components/arrow-left-black.html' %} Previous
                </a>
                <a class="btn gallery-arrow gallery-right" href="#">
                    Next{% include 'components/arrow-right-black.html' %}
                </a>
            </div>
        </div>
    </div>
</section>

<section class="projects related-projects">
    <div class="container">
        <h2>Related Projects</h2>
        <div class="row">
            <div class="related-slider mob-off">
                <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 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 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 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="projects-slider mob-on">
                <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>
    </div>
</section>


{% endblock content %}