<!-- Section-1 -->

        <section class="mb-3">

            <div class="page-header min-vh-75">

                <span class="mask bg-gradient-info opacity-80"></span>

                <div class="container">

                    <div class="row">

                        <div class="col-lg-10 ls-1 lh-1 my-auto mx-auto">

                            <h3 class="text-white fw-500 mb-4 text-center my-display-4 my-h3">

                                <span class="font-weight-bold" data-mdb-toggle="animation" data-mdb-animation="zoom-in"

                                    data-mdb-animation-start="onLoad" data-mdb-animation-delay="300"

                                    data-mdb-animation-duration="1000">Odkrij,</span>

                                <span class="font-weight-bold" data-mdb-toggle="animation" data-mdb-animation="zoom-in"

                                    data-mdb-animation-start="onLoad" data-mdb-animation-delay="800"

                                    data-mdb-animation-duration="1000">razišči,</span>

                                <span class="font-weight-bold" data-mdb-toggle="animation" data-mdb-animation="zoom-in"

                                    data-mdb-animation-start="onLoad" data-mdb-animation-delay="1300"

                                    data-mdb-animation-duration="1000">razreši!</span>

                            </h3>

                            <!-- Divider -->

                            <hr class="text-white" />

                            <p class="lead mb-4 fw-normal text-white opacity-90 text-center my-display-4"><span data-mdb-toggle="animation" data-mdb-animation="zoom-in"

                                    data-mdb-animation-start="onLoad" data-mdb-animation-delay="1500"

                                    data-mdb-animation-duration="1000">Zdaj je čas je, da prepoznate svojo pravo naravo,

                              vzamete svojo moč nazaj in zaživite svoje poslanstvo.</span>

                            </p>

                        </div>

                    </div>

                </div>

                <div class="position-absolute w-100 z-index-1 bottom-0">

                    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

                        viewbox="0 24 150 40" preserveaspectratio="none" shape-rendering="auto">

                        <defs>

                            <path id="gentle-wave"

                                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>

                        </defs>

                        <g class="simple-waves">

                            <use xlink:href="#gentle-wave" x="48" y="-1" fill="rgba(255,255,255,0.40"></use>

                            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>

                            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>

                            <use xlink:href="#gentle-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>

                            <use xlink:href="#gentle-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>

                            <use xlink:href="#gentle-wave" x="48" y="16" fill="rgba(255,255,255,1"></use>

                        </g>

                    </svg>

                </div>

            </div>

        </section>

        <!-- Section-1-end -->