{% set page_title = 'Dark Creative Agency' %}
{% set header_show = true %}
{% set header_title = '<span class="text-main">We\'re a brand</span> <br> Strategy and Digital <br> Design Agency' %}
{% set header_text = '
<div class="nk-gap"></div>
<a href="demo-dark-creative-agency-portfolio.html" class="nk-btn">View Projects</a>
<div class="nk-gap-3"></div>' %}
{% set header_image = 'assets/images/demo-dark-creative-agency-header.jpg' %}
{% set header_size = 'lg' %}
{% set header_align = 'center-left' %}
{% set header_title_class = 'display-1' %}
{% set nav_opaque = false %}
{% set nav_transparent = true %}
{% set nav_white_text_on_top = true %}
{% extends 'layouts/layout-dark-creative-agency.html' %}

{% block content %}

    <!-- START: New Branding Agency -->
    <div class="container">
        <div class="nk-gap-4 mt-10"></div>
        <div class="row vertical-gap">
            <div class="col-lg-4 offset-lg-2 col-md-6">
                <h2 class="display-4">New Branding Agency</h2>
                <div class="nk-divider-2 nk-divider-2-color-main mb-40 ml-0 mt-25"></div>
            </div>
            <div class="col-lg-4 col-md-6">

                <h6 class="lh-30"><em>An award-winning design and dev team that is proud of our work.</em></h6>
                <div class="nk-gap mnt-5"></div>

                <p>
                    We use an agile approach to test assumptions and connect with the needs of your audience early and often. Technology enables great experiences. We like and use technology but we have tried hard to not fall in love with it.
                </p>

                <p>
                    Clever use of technology and lean processes enable us to work faster and smarter.
                </p>

                <div class="nk-gap"></div>

                <a href="#" class="nk-btn nk-btn-md nk-btn-outline nk-btn-color-white">Read More</a>
            </div>
        </div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: New Branding Agency -->


    <!-- START: Works -->
    <div class="nk-portfolio-list nk-isotope nk-isotope-2-cols bg-dark-1">
        <div class="nk-isotope-item" data-filter="Branding">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-dark-creative-agency-work-1.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-1.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">New Magazine</h2>
                        <div class="nk-portfolio-item-category">Branding</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">N</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Photography">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-dark-creative-agency-work-2.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-2.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Apple Watch</h2>
                        <div class="nk-portfolio-item-category">Photography</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">A</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Print">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-dark-creative-agency-work-1.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-3.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Creative Mobile App</h2>
                        <div class="nk-portfolio-item-category">Print</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">C</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Design">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-dark-creative-agency-work-2.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-4.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Social Website</h2>
                        <div class="nk-portfolio-item-category">Web Design</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">S</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Marketing">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-dark-creative-agency-work-1.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-5.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Promotional Video</h2>
                        <div class="nk-portfolio-item-category">Marketing</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">P</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Development">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-dark-creative-agency-work-2.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-6.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Photography Website</h2>
                        <div class="nk-portfolio-item-category">Development</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">P</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Works -->
    <!-- START: Pagination -->
    <div class="nk-pagination nk-pagination-center bg-dark text-white">
        <a href="demo-dark-creative-agency-portfolio.html">View More Works</a>
    </div>
    <!-- END: Pagination -->


    <!-- START: Features -->
    <div class="bg-dark-05">
        <div class="container">
            <div class="nk-gap-4 pt-10"></div>
            <h2 class="display-4 text-center">Provide The Best <br> Services</h2>
            <div class="nk-divider-2 nk-divider-2-color-main mb-40 mt-25"></div>
            <div class="row vertical-gap">
                <div class="col-lg-4 col-md-6">
                    <div class="nk-ibox-3-a p-30">
                        <div class="nk-ibox-icon text-dark-2 fs-110">
                            <span class="pe-7s-diamond"></span>
                        </div>
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title">Web Development</div>
                            <div class="nk-ibox-text">Image beginning female one rule upon brought moving beginning all</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="nk-ibox-3-a p-30">
                        <div class="nk-ibox-icon text-dark-2 fs-110">
                            <span class="pe-7s-umbrella"></span>
                        </div>
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title">Mobile Development</div>
                            <div class="nk-ibox-text">Image beginning female one rule upon brought moving beginning all</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="nk-ibox-3-a p-30">
                        <div class="nk-ibox-icon text-dark-2 fs-110">
                            <span class="pe-7s-joy"></span>
                        </div>
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title">Game Design</div>
                            <div class="nk-ibox-text">Image beginning female one rule upon brought moving beginning all</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="nk-ibox-3-a p-30">
                        <div class="nk-ibox-icon text-dark-2 fs-110">
                            <span class="pe-7s-arc"></span>
                        </div>
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title">Branding</div>
                            <div class="nk-ibox-text">Image beginning female one rule upon brought moving beginning all</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="nk-ibox-3-a p-30">
                        <div class="nk-ibox-icon text-dark-2 fs-110">
                            <span class="pe-7s-plane"></span>
                        </div>
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title">Product Strategy</div>
                            <div class="nk-ibox-text">Image beginning female one rule upon brought moving beginning all</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="nk-ibox-3-a p-30">
                        <div class="nk-ibox-icon text-dark-2 fs-110">
                            <span class="pe-7s-rocket"></span>
                        </div>
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title">Marketing &amp; SEO</div>
                            <div class="nk-ibox-text">Image beginning female one rule upon brought moving beginning all</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nk-gap-3"></div>
        </div>
    </div>
    <!-- END: Features -->


    <!-- START: Video -->
    <div class="nk-box">
        <div class="bg-image bg-image-parallax">
            <div class="bg-image-overlay" style="background-color: rgba(0, 0, 0, 0.5);"></div>
            <img src="assets/images/demo-dark-creative-agency-1.jpg" alt="" class="jarallax-img">
        </div>

        <div class="nk-gap-6"></div>
        <div class="nk-gap-6"></div>
        <div class="text-center">
            <a class="nk-video-fullscreen-toggle" href="https://www.youtube.com/watch?v=-iPLKdjtC6U">
                <span class="nk-video-icon-2-light"><span><span class="nk-play-icon text-main"></span></span></span>
            </a>
        </div>
        <div class="nk-gap-6"></div>
        <div class="nk-gap-6"></div>
    </div>
    <!-- END: Video -->

    <!-- START: Features -->
    <div class="nk-box bg-dark-05">
        <div class="nk-gap-5 mnt-6"></div>
        <div class="container">
            <div class="row vertical-gap">
                <div class="col-md-6 col-lg-3">
                    <div class="nk-ibox-3-a">
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title text-main fs-50">548</div>
                            <div class="nk-ibox-text text-white text-uppercase op-10">Projects Completed</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="nk-ibox-3-a">
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title text-main fs-50">1465</div>
                            <div class="nk-ibox-text text-white text-uppercase op-10">Working Hours</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="nk-ibox-3-a">
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title text-main fs-50">612</div>
                            <div class="nk-ibox-text text-white text-uppercase op-10">Positive Feedbacks</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="nk-ibox-3-a">
                        <div class="nk-ibox-cont">
                            <div class="nk-ibox-title text-main fs-50">735</div>
                            <div class="nk-ibox-text text-white text-uppercase op-10">Happy Clients</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-gap-5 mnt-6"></div>
    </div>
    <!-- END: Features -->


    <!-- START: Reviews -->
    <div class="nk-box">
        <div class="nk-gap-5 mnt-6"></div>
        <div class="nk-gap-3"></div>
        <div class="container-fluid">
            <!-- START: Carousel -->
            <div class="nk-carousel nk-carousel-all-visible text-white" data-autoplay="18000" data-loop="true" data-dots="true" data-arrows="false" data-cell-align="center" data-parallax="false">
                <div class="nk-carousel-inner">
                    <div><div>
                        <div class="nk-divider-2 nk-divider-2-color-main mb-40 mt-25"></div>
                        <blockquote class="nk-blockquote-style-1 text-white">
                            <p>Outstanding job and exceeded all expectations. It was a pleasure
                                to work with them on a sizable first project and am looking
                                forward to start the next one asap.</p>
                            <cite>Michael Hopkins</cite>
                        </blockquote>
                        <div class="nk-gap-3 mt-10"></div>
                    </div></div>
                    <div><div>
                        <div class="nk-divider-2 nk-divider-2-color-main mb-40 mt-25"></div>
                        <blockquote class="nk-blockquote-style-1 text-white">
                            <p>Outstanding job and exceeded all expectations. It was a pleasure
                                to work with them on a sizable first project and am looking
                                forward to start the next one asap.</p>
                            <cite>Michael Hopkins</cite>
                        </blockquote>
                        <div class="nk-gap-3 mt-10"></div>
                    </div></div>
                    <div><div>
                        <div class="nk-divider-2 nk-divider-2-color-main mb-40 mt-25"></div>
                        <blockquote class="nk-blockquote-style-1 text-white">
                            <p>Outstanding job and exceeded all expectations. It was a pleasure
                                to work with them on a sizable first project and am looking
                                forward to start the next one asap.</p>
                            <cite>Michael Hopkins</cite>
                        </blockquote>
                        <div class="nk-gap-3 mt-10"></div>
                    </div></div>
                </div>
            </div>
            <!-- END: Carousel -->
        </div>
        <div class="nk-gap-4 mt-3"></div>
    </div>
    <!-- END: Reviews -->


    <!-- START: Mail -->
    <div class="bg-dark-05">
        <div class="container text-center">
            <div class="nk-gap-6"></div>
            <a class="nk-btn-3" href="mailto:hello@skylith.com">hello@skylith.com</a>
            <div class="nk-gap mb-5"></div>
            <p>Currently accepting enquiries for small <br> and medium sized projects.</p>
            <div class="nk-gap-5"></div>
        </div>
    </div>
    <!-- END: Mail -->

{% endblock %}