{% set header_title = 'Colors' %}
{% set header_size = 'sm' %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
    <div class="nk-gap-4"></div>

    <div class="container">
        <div class="row">
            <div class="col-md-10 offset-md-1">

                <div class="row vertical-gap">
                    <!-- Main Colors -->
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-main-1">
                            .bg-main-1
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-main-2">
                            .bg-main-2
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-main-3">
                            .bg-main-3
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-main-4">
                            .bg-main-4
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-main-5">
                            .bg-main-5
                        </div>
                    </div>

                    <!-- Bootstrap Colors -->
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-primary">
                            .bg-primary
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-success">
                            .bg-success
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-info">
                            .bg-info
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-warning">
                            .bg-warning
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-danger">
                            .bg-danger
                        </div>
                    </div>

                    <!-- Dark Colors -->
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-black">
                            .bg-black
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-dark-1">
                            .bg-dark-1
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-dark-2">
                            .bg-dark-2
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-dark-3">
                            .bg-dark-3
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-dark-4">
                            .bg-dark-4
                        </div>
                    </div>

                    <!-- Gray Colors -->
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-white text-dark-1">
                            .bg-white
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-gray-1 text-dark-1">
                            .bg-gray-1
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-gray-2 text-dark-1">
                            .bg-gray-2
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-gray-3 text-dark-1">
                            .bg-gray-3
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="nk-box-rounded-1 bg-gray-4 text-dark-1">
                            .bg-gray-4
                        </div>
                    </div>
                </div>

                <div class="nk-gap-2"></div>
                <p>Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-main-1">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-main-2">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-main-3">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-main-4">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-main-5">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-primary">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-success">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-info">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-warning">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-danger">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-black">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-dark-1">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-dark-2">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-dark-3">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>
                <p class="text-dark-4">Day fly let without day grass. Great replenish called multiply they're he was it meat herb that you're good saying made open years. Him repleni.</p>

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

    <div class="nk-gap-4"></div>
    <div class="nk-gap-4"></div>
{% endblock %}