<div class="is-matrix-block h-100 h-mobile is-parallax is--flex is-fullwidth rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sb2b5767bd6861c8a/userlayout/img/z-cover.jpg?t=1616195341') no-repeat center;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner color-white m-padding cc-clearover is-anim-block" style="padding:250px 0;">
        <div class="col-10 left-align">
            <h3 style="font-size:40px;">
                Create something great
            </h3>

            <p>
                Suspendisse feugiat. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce fermentum. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non
                adipiscing dolor urna a orci. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Read more</a>
        </div>
    </div>
</div>

<div class="is-matrix-block h-100 h-mobile is-parallax is--flex is-fullwidth rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sb2b5767bd6861c8a/userlayout/img/z-cover.jpg?t=1616195341') no-repeat center;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner m-padding cc-clearover is-anim-block" style="padding:250px 0;">
        <div class="col-6 center-align bg-white add-20 cc-box">
            <h3 style="font-size:30px;">
                Create something great
            </h3>

            <p>
                Suspendisse feugiat. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce fermentum. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non
                adipiscing dolor urna a orci. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Read more</a>
        </div>
    </div>
</div>

<div class="is-matrix-block h-100 h-mobile is-parallax is--flex is-fullwidth rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sb2b5767bd6861c8a/userlayout/img/z-cover.jpg?t=1616195341') no-repeat center;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
    <div class="hs-overlay bg-primary">
    </div>

    <div class="inner m-padding color-white cc-clearover is-anim-block" style="padding:250px 0;">
        <div class="col-6 center-align">
            <h3 style="font-size:30px;">
                Create something great
            </h3>

            <p>
                Suspendisse feugiat. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce fermentum. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non
                adipiscing dolor urna a orci. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.
            </p>
            <br />
            <a class="hs-button bg-white popup-youtube" href="https://www.youtube.com/watch?v=dSDXlmilzGU" target="_top">Watch video</a>
        </div>
    </div>
</div>

<div class="is-matrix-block is-fullwidth bg-grey">
    <div class="is-flex is-flex-block h-100 mobile-auto cc-clearover">
        <div class="col-6">
            <img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax01.jpg?t=1668154873" />
        </div>

        <div class="is--flex h-100 mobile-auto col-6 m-padding cc-box" style="padding:5%;">
            <div class="is-anim-block" style="max-width:800px; margin:0 auto;">
                <h3>
                    Create something great
                </h3>
                <br />

                <p>
                    Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
                    dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
                    est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
                </p>
                <br />
                <!-- ************* default button ************* -->
                 <a class="hs-button" href="https://www.matrix-themes.com" target="">Custom button</a>
            </div>
        </div>
    </div>
</div>

<div class="is-matrix-block is-fullwidth bg-white is-reverse">
    <div class="is-flex is-flex-block h-100 mobile-auto cc-clearover">
        <div class="h-100 is--flex mobile-auto col-6 m-padding cc-box" style="padding:5%;">
            <div class="is-anim-block" style="max-width:800px; margin:0 auto;">
                <h3>
                    Create something great
                </h3>
                <br />

                <p>
                    Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
                    dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
                    est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
                </p>
                <br />
                <!-- ************* default button ************* -->
                 <a class="hs-button ghost-dark" href="https://www.matrix-themes.com/" target="">Custom button</a>
            </div>
        </div>

        <div class="col-6">
            <img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax01.jpg?t=1668154873" />
        </div>
    </div>
</div>

<style>

/* <![CDATA[ */
.is-fullscreen-slider .item {
   height:100vh!important;
}
    
 @media only screen and (max-width: 459px) {
#cc-inner .is-fullscreen-slider .item,.is-fullscreen-slider .owl-wrapper-outer img  {
   height:50vh!important;
   max-height:50vh!important;
   }
 }

/*]]>*/
</style><div class="is-matrix-block is-matrix-slider is-fullscreen-slider owl-carousel owl-theme is-fullwidth has-inside-dots">
    <!-- start slide -->

    <div class="item has-overlay">
        <img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide01.jpg" alt="" />
        <div class="is-new-caption">
            <div class="inner">
                <div class="col-6 color-white add-30 cc-box">
                    <h3>
                        Stand out with a professional Jimdo website
                    </h3>
                    <a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
                </div>
            </div>
        </div>
    </div>
    <!-- end slide -->
    <!-- start slide -->

    <div class="item has-overlay">
        <img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide02.jpg" alt="" />
        <div class="is-new-caption">
            <div class="inner">
                <div class="col-6 color-white add-30 cc-box">
                    <h3>
                        Make dreams come true
                    </h3>
                    <a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
                </div>
            </div>
        </div>
    </div>
    <!-- end slide -->
    <!-- start slide -->

    <div class="item has-overlay">
        <img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide03.jpg" alt="" />
        <div class="is-new-caption">
            <div class="inner">
                <div class="col-6 color-white add-30 cc-box">
                    <h3>
                        Work with the professionals
                    </h3>
                    <!-- ************* mid-rounded button ************* -->
                    <a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
                </div>
            </div>
        </div>
    </div>
    <!-- end slide -->
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-fullscreen-slider').owlCarousel({
    loop: true,
    slideSpeed: 300,
    paginationSpeed: 400,
    autoplay: true,
     navText: ["<i class='fa fa-angle-left'><\/i>", "<i class='fa fa-angle-right'><\/i>"],
    // autoplayHoverPause:true,
    items: 1,
    animateIn: 'fadeIn', // add this
    animateOut: 'fadeOut', // and this
    responsiveClass: true,
    nav: true,
    responsive: {
      0: {
        items: 1
        // nav:true
      },
      600: {
        items: 1,
        // nav: false
      },
      1000: {
        items: 1,
        // nav: true
        // loop:false
      }
    }
  });
});
})(jQuery);
//]]>
</script>

<div class="hs-fullwidth bg-grey cc-clearover">
    <div class="inner m-padding" style="padding:200px 0;">
        <p class="col-6 is-anim-block" style="font-size:40px;border-left:4px solid;padding-left:20px;">
            Whatever it is, the way you tell your story online can make all the difference
        </p>
    </div>
</div>

<div class="hs-fullwidth bg-white cc-clearover">
    <div class="max-inner m-padding" style="padding:200px 0;">
        <p class="col-6 center-align is-anim-block" style="font-size:40px;border-top:4px solid;border-bottom:4px solid;padding:20px 0;">
            Whatever it is, the way you tell your story online can make all the difference
        </p>
    </div>
</div>

<div class="hs-fullwidth bg-white cc-clearover">
    <div class="max-inner m-padding" style="padding:300px 0;">
        <p class="col-6 is-anim-block center-align" style="font-size:40px;">
            Whatever it is, the way you tell your story online can make all the difference
        </p>

        <div class="c">
        </div>

        <center>
            <div class="line bold-line small-line bg-primary">
            </div>
        </center>
    </div>
</div>

<div class="hs-fullwidth bg-primary color-white cc-clearover">
    <div class="max-inner col-8 m-padding is-anim-block" style="padding:200px 0;">
        <h3 class="center-align" style="font-size:40px;">
            Our features
        </h3>
        <br />
        <!-- feature 1 -->

        <div class="is-matrix">
            <div class="add-right-10" style="display: table-cell;vertical-align: middle;height: 100%; margin-left: 0;margin-right: 0;;">
                <div class="fa fa-check fa-2x bg-white color-dark bg-round add-10" style="margin-right:20px;">
                </div>
            </div>

            <div class="" style="display: table-cell;vertical-align: middle;height: 100%; margin-left: 0;margin-right: 0;">
                <h3 class="weight-600">
                    High quality
                </h3>

                <p>
                    Nunc egestas, augue at pellentesque laoreet,
                </p>
            </div>
        </div>
        <!-- end feature 1 -->
        <br />
        <!-- feature 2 -->

        <div class="is-matrix">
            <div class="add-right-10" style="display: table-cell;vertical-align: middle;height: 100%; margin-left: 0;margin-right: 0;">
                <div class="fa fa-check fa-2x bg-white color-dark bg-round add-10" style="margin-right:20px;">
                </div>
            </div>

            <div class="" style="display: table-cell;vertical-align: middle;height: 100%; margin-left: 0;margin-right: 0;">
                <h3 class="weight-600">
                    Professional Support
                </h3>

                <p>
                    Suspendisse non nisl sit amet velit hendrerit rutrum. Sed cursus turpis vitae tortor. Maecenas nec odio et ante tincidunt tempus. Curabitur ullamcorper ultricies nisi. Curabitur
                    ullamcorper ultricies nisi. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit.
                </p>
            </div>
        </div>
        <!-- end feature 2 -->
        <br />
        <!-- feature 3 -->

        <div class="is-matrix">
            <div class="add-right-10" style="display: table-cell;vertical-align: middle;height: 100%; margin-left: 0;margin-right: 0;">
                <div class="fa fa-check fa-2x bg-white color-dark bg-round add-10" style="margin-right:20px;">
                </div>
            </div>

            <div class="" style="display: table-cell;vertical-align: middle;height: 100%; margin-left: 0;margin-right: 0;">
                <h3 class="weight-600">
                    Individual approach
                </h3>

                <p>
                    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.
                </p>
            </div>
        </div>
        <!-- end feature 3 -->
    </div>
</div>

<div class="is-matrix-block h-mobile is-fullwidth is--flex is-flex-box bg-primary color-white cc-clearover no-padding">
    <div class="max-inner col-10 m-padding" style="padding:200px 0;">
        <!-- start block 01 -->

        <div class="col-4 left-align is-anim-block">
            <div class="gutter-20 center-align cc-box">
                <div class="fa fa-thumbs-up fa-4x">
                </div>

                <h3 class="weight-600 add-top-20">
                    High quality
                </h3>

                <p>
                    Ut non enim eleifend felis pretium feugiat. Maecenas malesuada. Fusce egestas elit eget lorem. Ut tincidunt tincidunt erat. Nulla facilisi.
                </p>
            </div>
        </div>
        <!-- end block 01 -->
        <!-- start block 02 -->

        <div class="col-4 left-align is-anim-block">
            <div class="gutter-20 center-align cc-box">
                <div class="fa fa-life-ring fa-4x">
                </div>

                <h3 class="weight-600 add-top-20">
                    Professional Support
                </h3>

                <p>
                    Ut non enim eleifend felis pretium feugiat. Maecenas malesuada. Fusce egestas elit eget lorem. Ut tincidunt tincidunt erat. Nulla facilisi.
                </p>
            </div>
        </div>
        <!-- end block 02 -->
        <!-- start block 03 -->

        <div class="col-4 left-align is-anim-block">
            <div class="gutter-20 center-align cc-box">
                <div class="fa fa-paper-plane fa-4x">
                </div>

                <h3 class="weight-600 add-top-20">
                    Individual approach
                </h3>

                <p>
                    Ut non enim eleifend felis pretium feugiat. Maecenas malesuada. Fusce egestas elit eget lorem. Ut tincidunt tincidunt erat. Nulla facilisi.
                </p>
            </div>
        </div>
        <!-- end block 03 -->
    </div>
</div>

<div class="c">
</div>

<div class="is-matrix-block h-mobile is-fullwidth is--flex is-flex-box bg-primary-dark color-white cc-clearover no-padding">
    <div class="max-inner col-10 m-padding" style="padding:200px 0;">
        <!-- start block 01 -->

        <div class="col-4 left-align is-anim-block">
            <div class="gutter-20 center-align cc-box">
                <div class="is-matrix add-20 mid-round bg-transparent" style="border:1px solid;">
                    <div class="fa fa-thumbs-up fa-4x">
                    </div>

                    <h3 class="weight-600 add-top-20">
                        High quality
                    </h3>

                    <p>
                        Ut non enim eleifend felis pretium feugiat. Maecenas malesuada. Fusce egestas elit eget lorem. Ut tincidunt tincidunt erat. Nulla facilisi.
                    </p>
                </div>
            </div>
        </div>
        <!-- end block 01 -->
        <!-- start block 02 -->

        <div class="col-4 left-align is-anim-block">
            <div class="gutter-20 center-align cc-box">
                <div class="is-matrix add-20 mid-round bg-transparent" style="border:1px solid;">
                    <div class="fa fa-life-ring fa-4x">
                    </div>

                    <h3 class="weight-600 add-top-20">
                        Professional Support
                    </h3>

                    <p>
                        Ut non enim eleifend felis pretium feugiat. Maecenas malesuada. Fusce egestas elit eget lorem. Ut tincidunt tincidunt erat. Nulla facilisi.
                    </p>
                </div>
            </div>
        </div>
        <!-- end block 02 -->
        <!-- start block 03 -->

        <div class="col-4 left-align is-anim-block">
            <div class="gutter-20 center-align cc-box">
                <div class="is-matrix add-20 mid-round bg-transparent" style="border:1px solid;">
                    <div class="fa fa-paper-plane fa-4x">
                    </div>

                    <h3 class="weight-600 add-top-20">
                        Individual approach
                    </h3>

                    <p>
                        Ut non enim eleifend felis pretium feugiat. Maecenas malesuada. Fusce egestas elit eget lorem. Ut tincidunt tincidunt erat. Nulla facilisi.
                    </p>
                </div>
            </div>
        </div>
        <!-- end block 03 -->
    </div>
</div>

<div class="c">
</div>

<div class="hs-fullwidth bg-white cc-clearover">
    <div class="max-inner col-8 m-padding is-anim-block" style="padding:200px 0;">
        <h3 class="center-align" style="font-size:40px;">
            Our features
        </h3>
        <br />
        <!-- feature 1 -->
         <!-- *** Matrix Widget toggle *** -->

        <div class="toggle weight-500 size-18">
            <a class="switch" style="border-bottom:1px solid;padding:10px 0;" href="#">Your toggle title</a>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
            </div>
        </div>
        <!-- end feature 1 -->
        <br />
        <!-- feature 2 -->
         <!-- *** Matrix Widget toggle *** -->

        <div class="toggle weight-500 size-18">
            <a class="switch" style="border-bottom:1px solid;padding:10px 0;" href="#">Your toggle title</a>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
            </div>
        </div>
        <!-- end feature 2 -->
        <br />
        <!-- feature 3 -->
         <!-- *** Matrix Widget toggle *** -->

        <div class="toggle weight-500 size-18">
            <a class="switch" style="border-bottom:1px solid;padding:10px 0;" href="#">Your toggle title</a>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
            </div>
        </div>
        <!-- end feature 3 -->
    </div>
</div>

<div class="hs-fullwidth bg-primary color-white cc-clearover">
    <div class="inner m-padding" style="padding:200px 0;">
        <div class="center-align col-6 has-white-solid-border cc-box is-anim-block" style="font-size:40px;border:1px solid;padding:20px;">
            <center>
                <div class="fa fa-quote-left fa-4x" style="margin-top:-60px;opacity:0.2;font-size:100px;">
                </div>
                <br />

                <p style="font-size:30px;">
                    Whatever it is, the way you tell your story online can make all the difference
                </p>

                <p class="add-top-10">
                    (Elemeivamus)
                </p>
            </center>
        </div>
    </div>
</div>

<div class="hs-fullwidth bg-grey cc-clearover">
    <div class="inner m-padding" style="padding:100px 0;">
        <div class="col-6 center-align is-anim-block">
            <h3 style="font-size:30px; padding-bottom:30px;">
                Our menu
            </h3>

            <div class="m-menu-content is-matrix">
                <div class="m-title-holder">
                    <h3 class="size-20 weight-600">
                        French omelette
                    </h3>
                </div>

                <div class="m-line">
                </div>

                <div class="m-price-holder">
                    <h3 class="weight-600 size-20">
                        $21
                    </h3>
                </div>

                <div class="m-btm-holder text-left">
                    <p class="size-16">
                        Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                    </p>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

            <div class="m-menu-content is-matrix">
                <div class="m-title-holder">
                    <h3 class="size-20 weight-600">
                        French omelette
                    </h3>
                </div>

                <div class="m-line">
                </div>

                <div class="m-price-holder">
                    <h3 class="weight-600 size-20">
                        $21
                    </h3>
                </div>

                <div class="m-btm-holder text-left">
                    <p class="size-16">
                        Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                    </p>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

            <div class="m-menu-content is-matrix">
                <div class="m-title-holder">
                    <h3 class="size-20 weight-600">
                        French omelette
                    </h3>
                </div>

                <div class="m-line">
                </div>

                <div class="m-price-holder">
                    <h3 class="weight-600 size-20">
                        $21
                    </h3>
                </div>

                <div class="m-btm-holder text-left">
                    <p class="size-16">
                        Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                    </p>
                </div>
            </div>
            <!--  end menu item -->
        </div>
    </div>
</div>

<div class="hs-fullwidth bg-primary-dark color-white cc-clearover">
    <div class="inner m-padding" style="padding:100px 0;">
        <div class="col-6 center-align is-anim-block">
            <h3 style="font-size:30px; padding-bottom:30px;">
                Our menu
            </h3>

            <div class="m-menu-content is-matrix">
                <div class="m-title-holder">
                    <h3 class="size-20 weight-600">
                        French omelette
                    </h3>
                </div>

                <div class="m-line">
                </div>

                <div class="m-price-holder">
                    <h3 class="weight-600 size-20">
                        $21
                    </h3>
                </div>

                <div class="m-btm-holder text-left">
                    <p class="size-16">
                        Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                    </p>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

            <div class="m-menu-content is-matrix">
                <div class="m-title-holder">
                    <h3 class="size-20 weight-600">
                        French omelette
                    </h3>
                </div>

                <div class="m-line">
                </div>

                <div class="m-price-holder">
                    <h3 class="weight-600 size-20">
                        $21
                    </h3>
                </div>

                <div class="m-btm-holder text-left">
                    <p class="size-16">
                        Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                    </p>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

            <div class="m-menu-content is-matrix">
                <div class="m-title-holder">
                    <h3 class="size-20 weight-600">
                        French omelette
                    </h3>
                </div>

                <div class="m-line">
                </div>

                <div class="m-price-holder">
                    <h3 class="weight-600 size-20">
                        $21
                    </h3>
                </div>

                <div class="m-btm-holder text-left">
                    <p class="size-16">
                        Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                    </p>
                </div>
            </div>
            <!--  end menu item -->
        </div>
    </div>
</div>

<div class="hs-fullwidth bg-primary-dark color-white cc-clearover">
    <div class="inner m-padding" style="padding:50px 0;">
        <!-- package -->

        <div class="is-matrix is-anim-block bg-transparent add-20 cc-box rel mid-round col-8 center-align" style="border:1px solid;">
            <div class="is--flex">
                <div class="col-12 left-align add-right-20" style="border-right:1px solid;text-align:left;">
                    <h3 class="size-30 weight-600">
                        package Pro
                    </h3>

                    <p>
                        Basic package includes Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
                    </p>
                    <br />
                    <!-- *** Matrix Widget service icons *** -->

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Professional support<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Free updates<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Advanced settings<br />
                </div>

                <div class="is--right add-10">
                    <p style="font-size:40px;font-weight:500;">
                        €60
                    </p>
                </div>
            </div>
            <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
        </div>
        <!-- end package -->
    </div>
</div>

<div class="is-matrix-block is-fullwidth bg-white cc-clearover no-padding">
    <div class="inner m-padding cc-clearover" style="padding:50px 0;">
        <!-- package 1 -->

        <div class="col-6 cc-box left-align is-anim-block" style="border:20px solid #fff;">
            <div class="bg-grey gutter-20 w-100 left-align cc-box">
                <div class="is-matrix add-10">
                    <h3 class="size-30 weight-600">
                        package Basic
                    </h3>
                    <!-- *** Matrix Widget service icons *** -->
                    <br />

                    <div class="fa fa-check-circle" style="color:#222;">
                    </div>
                    Professional support<br />

                    <div class="fa fa-check-circle" style="color:#222;">
                    </div>
                    Free updates<br />

                    <div class="fa fa-check-circle" style="color:#222;">
                    </div>
                    Advanced settings<br />

                    <div class="fa fa-check-circle" style="color:#222;">
                    </div>
                    Free updates<br />

                    <div class="fa fa-check-circle" style="color:#222;">
                    </div>
                    Advanced settings<br />

                    <p style="font-size:40px;font-weight:500;">
                        €60
                    </p>
                    <br />
                    <a class="hs-button ghost-dark" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end package 1 -->
        <!-- package 2 -->

        <div class="col-6 right-align cc-box is-anim-block" style="border:20px solid #fff;">
            <div class="bg-primary color-white gutter-20 w-100 left-align cc-box">
                <div class="is-matrix add-10">
                    <h3 class="size-30 weight-600">
                        package Pro
                    </h3>
                    <!-- *** Matrix Widget service icons *** -->
                    <br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Professional support<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Free updates<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Advanced settings<br />

                    <p style="font-size:40px;font-weight:500;">
                        €90
                    </p>
                    <br />
                    <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end package 2 -->
    </div>
</div>

<div class="c">
</div>

<div class=" is-fullwidth bg-primary-dark color-white cc-clearover no-padding">
    <div class="inner m-padding cc-clearover" style="padding:50px 0;">
        <!-- plan 1 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <div class="is-matrix add-20 mid-round bg-transparent" style="border:1px solid;">
                    <h3 class="size-30 weight-600">
                        package Basic
                    </h3>

                    <p class="add-top-20 add-btm-20">
                        Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci. Suspendisse feugiat. Cras varius. Phasellus nec
                        sem in justo pellentesque facilisis. Etiam sit amet orci eget eros faucibus tincidunt.
                    </p>

                    <p style="font-size:40px;font-weight:500;">
                        €60
                    </p>
                    <br />
                    <a class="hs-button" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end plan 1 -->
        <!-- plan 2 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <div class="is-matrix add-20 mid-round bg-transparent" style="border:1px solid;">
                    <h3 class="size-30 weight-600">
                        package Pro
                    </h3>

                    <p class="add-top-20 add-btm-20">
                        Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.
                    </p>

                    <p style="font-size:40px;font-weight:500;">
                        €90
                    </p>
                    <br />
                    <a class="hs-button" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end plan 2 -->
        <!-- plan 3 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <div class="is-matrix add-20 mid-round bg-transparent" style="border:1px solid;">
                    <h3 class="size-30 weight-600">
                        package Business
                    </h3>

                    <p class="add-top-20 add-btm-20">
                        Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.
                    </p>

                    <p style="font-size:40px;font-weight:500;">
                        €150
                    </p>
                    <br />
                    <a class="hs-button" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end plan 3 -->
    </div>
</div>

<div class="c">
</div>

<div class=" is-fullwidth bg-white cc-clearover no-padding">
    <div class="inner m-padding cc-clearover is-anim-block" style="padding:50px 0;">
        <!-- package 1 -->

        <div class="bg-primary-dark color-white col-4 left-align cc-box" style="border:20px solid #fff;">
            <div class="gutter-20 left-align cc-box">
                <div class="is-matrix add-10">
                    <h3 class="size-30 weight-600">
                        package Basic
                    </h3>
                    <!-- *** Matrix Widget service icons *** -->
                    <br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Professional support<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Free updates<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Advanced settings<br />
                    <br />

                    <p style="font-size:40px;font-weight:500;">
                        €60
                    </p>
                    <br />
                    <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end package 1 -->
        <!-- package 2 -->

        <div class="bg-primary-dark color-white col-4 left-align cc-box" style="border:20px solid #fff;">
            <div class="gutter-20 left-align cc-box">
                <div class="is-matrix add-10">
                    <h3 class="size-30 weight-600">
                        package Pro
                    </h3>
                    <!-- *** Matrix Widget service icons *** -->
                    <br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Professional support<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Free updates<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Advanced settings<br />
                    <br />

                    <p style="font-size:40px;font-weight:500;">
                        €90
                    </p>
                    <br />
                    <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end package 2 -->
        <!-- package 3 -->

        <div class="bg-primary-dark color-white col-4 left-align cc-box" style="border:20px solid #fff;">
            <div class="gutter-20 left-align cc-box">
                <div class="is-matrix add-10">
                    <h3 class="size-30 weight-600">
                        package Business
                    </h3>
                    <!-- *** Matrix Widget service icons *** -->
                    <br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Professional support<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Free updates<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Advanced settings<br />

                    <div class="fa fa-check-circle" style="color:#fff;">
                    </div>
                    Add-ons<br />
                    <br />

                    <p style="font-size:40px;font-weight:500;">
                        €150
                    </p>
                    <br />
                    <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Get started</a>
                </div>
            </div>
        </div>
        <!-- end package 3 -->
    </div>
</div>

<div class="c">
</div>

<div class="is-matrix-block is-fullwidth bg-white cc-clearover no-padding">
    <div class="inner m-padding cc-clearover" style="padding:50px 0;">
        <!-- card 1 -->

        <div class="is-anim-block col-6 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description bg-primary color-white">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 1 -->
        <!-- card 2 -->

        <div class="is-anim-block col-6 right-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description bg-primary color-white">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 2 -->
    </div>
</div>

<div class="c">
</div>

<div class="is-matrix-block is-fullwidth bg-grey cc-clearover no-padding">
    <div class="inner m-padding cc-clearover " style="padding:50px 0;">
        <!-- card 1 -->

        <div class="is-anim-block col-6 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description bg-white">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 1 -->
        <!-- card 2 -->

        <div class="is-anim-block col-6 right-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description bg-white">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 2 -->
    </div>
</div>

<div class="c">
</div>

<div class="hs-fullwidth bg-primary cc-clearover">
    <div class="inner m-padding" style="padding:50px 0;">
        <!--  start tile -->

        <div class="bg-white is-anim-block">
            <div class="is-flex is-flex-block cc-clearover">
                <div class="col-6">
                    <img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/sb2b5767bd6861c8a/userlayout/img/z-cover.jpg?t=1616195341" />
                </div>

                <div class="is--flex col-6 m-padding cc-box" style="padding:5%;">
                    <div class="" style="max-width:800px; margin:0 auto;">
                        <h3>
                            Create something great
                        </h3>
                        <br />

                        <p>
                            Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem
                            ipsum dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea
                            takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
                        </p>
                        <br />
                        <!-- ************* default button ************* -->
                         <a class="hs-button" href="https://www.matrix-themes.com" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end tile -->
    </div>
</div>

<div class="is-matrix-block is-fullwidth bg-white cc-clearover no-padding">
    <div class="inner m-padding" style="padding:50px 0;">
        <!-- card 1 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 1 -->
        <!-- card 2 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 2 -->
        <!-- card 3 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 3 -->
    </div>
</div>

<div class="c">
</div>

<div class="is-matrix-block is-fullwidth bg-primary cc-clearover no-padding">
    <div class="inner m-padding " style="padding:50px 0;">
        <!-- card 1 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description bg-white">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 1 -->
        <!-- card 2 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description bg-white">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 2 -->
        <!-- card 3 -->

        <div class="is-anim-block col-4 left-align">
            <div class="gutter-20 left-align cc-box">
                <!-- *** Matrix Widget overlay teaser *** -->

                <div class="is-matrix cc-clearover">
                    <div class="hs-thumbnail">
                        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
                        <div class="thumbnail-hover">
                            <a href="http://matrix-themes.com/"></a>
                        </div>
                    </div>

                    <div class="hs-description bg-white">
                        <h3>
                            Your custom title
                        </h3>

                        <p>
                            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the
                            elements you can use to add content to your website
                        </p>
                        <br />
                        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end card 3 -->
    </div>
</div>

<div class="c">
</div>

<div class="hs-fullwidth bg-primary color-white link-white cc-clearover">
    <div class="max-inner m-padding" style="padding:200px 0;">
        <div class="col-6 center-align is-anim-block">
            <div class="image_wrapper resp-img center-align" style="width:100px;">
                <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/under-construction.png?t=1644053248" alt=" the Matrix theme is coming soon." />
            </div>
            <br />

            <h3 style="font-size:60px; font-weight:800;">
                We're working on a new website
            </h3>

            <p>
                If you have any question, please contact us at <a href="mailto:support@matrix-themes.com" title="support@matrix-themes.com">support@matrix-themes.com</a>
            </p>
        </div>
    </div>
</div>

<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding is-matrix-block has-no-gutter" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/matrix-comingsoon.jpg?t=1644056739') no-repeat center;background-size:cover!important;">
    <div class="hs-overlay opacity-8 bg-primary">
    </div>

    <div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
        <div class="col-6 center-align color-white opacity-6 add-20 cc-box is-anim-block mid-round">
            <h3 style="font-size:60px; font-weight:800;">
                Coming soon
            </h3>

            <p>
                We're working on our new Matrix website right now. Stay tuned.
            </p>

            <div class="comingsoon has-large-mobile weight-500 add-top-30">
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/jquery-countdown@2.2.0/dist/jquery.countdown.min.js"></script> 
        <script type="text/javascript">




        //<![CDATA[
        jQuery.noConflict();  
        (function($) {  
        // Init 
        $(document).ready(function() {
        // countdown
        $('.comingsoon').countdown('2024/10/10', function(event) {
        $(this).html(event.strftime('%D days %H:%M:%S'));
        });

        });
        })(jQuery); 
        //]]>
        </script>
    </div>
</div>

<div class="hs-fullwidth bg-primary color-white cc-clearover is-matrix-block">
    <div class="inner m-padding cc-clearover" style="padding:50px 0;">
        <div class="col-6 is-anim-block">
            <h3 style="font-size:40px;">
                Stay connected
            </h3>

            <p>
                Keep up with our latest news
            </p>
            <br />

            <div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded link-dark" style="background:transparent!important;">
                <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
                "fa-brands fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
            </div>
        </div>
    </div>
</div>

<section class="container rel is-fullwidth h-100 is-matrix-block has-no-gutter">
    <div class="is--flex h-100 w-100">
        <div class="parallax" data-parallax-image="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/hero-parallax2.jpg?t=1644182731">
        </div>

        <div class="hs-overlay opacity-8">
        </div>

        <div class="inner rel color-white m-padding cc-clearover cc-box" style="padding:150px 0;">
            <div class="col-6 center-align is-anim-block add-20 cc-box" style="border:5px solid #fff;">
                <p style="font-weight:600;">
                    Summer sale
                </p>

                <h3 style="font-size:80px;font-weight:600;">
                    50%
                </h3>

                <p>
                    Discover the new collection of clothes
                </p>
                <br />
                <a class="hs-button" href="https://www.matrix-themes.com/" target="">Shop Now</a>
            </div>
        </div>
    </div>
</section>

<style>
    /*<![CDATA[*/
    @media only screen and (max-width: 745px) {
.text-overlay {
            margin-left:0!important;
  }
}
    /*]]>*/
</style><div class="hs-fullwidth b-white rel cc-clearover is-matrix-block has-no-gutter">
    <div data-wow-delay="1.0s" class="mask-section is-anim-block" style="position:absolute;top:0;right:0;width:50%;height:100%;background:#bddbba;">
    </div>

    <div class="inner m-padding" style="padding:50px 0;">
        <!--  start tile -->

        <div class="">
            <div class="is-flex is-flex-block cc-clearover">
                <div class="col-12__ resp-img wow is-folded-left-img">
                    <img class="rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/overlay-section.jpg?t=1644153761" />
                </div>

                <div class="is--flex col-5 m-padding cc-box" style="padding:5px;">
                    <div class="" style="max-width:800px; margin:0 auto;">
                        <div data-wow-delay="1.0s" class="text-overlay is-anim-block bg-white add-20 cc-box" style="margin-left:-20%;">
                            <h3 style="weight-600;font-size:40px;">
                                Proudly designed for you
                            </h3>
                            <br />

                            <p>
                                Every product we design aims to make your life easier
                            </p>
                            <br />
                            <a class="hs-button weight-500 ghost-dark" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">more details<svg viewbox="0 0 24 24"
                            focusable="false" role="presentation" class="is-arrow">
                            <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
                            </path></svg></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end tile -->
    </div>
</div>

<style>

/*<![CDATA[*/

.wave-container {
   position: relative;
   background: transparent;
   text-align: center;
   overflow: hidden;
   margin-bottom: -30px;
}

.wave-container > svg {
   display: block;
}

/*]]>*/

</style><div class="hs-fullwidth rel bg-primary color-white link-white cc-clearover is-matrix-block has-no-gutter">

<div class="inner m-padding__ is--flex is-flex-block" style="padding:80px 0;">

<div class="col-6 left-align is-anim-block add-right-20 add-btm-20 cc-box">

<h3 style="font-size:40px;">

Bring your ideas to life

</h3>



<p>

Everything that you dreamed of can be brought to life exactly at the moment when you decide to win.

</p>

<br />

<a class="hs-button weight-500 ghost-white" style="padding: 18px 25px;" href="https://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable="false" role=

"presentation" class="is-arrow">

<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">

</path></svg></a>

</div>



<div class="col-6 right-align is-anim-block">

<!-- *** Matrix Widget blob 01 *** -->



<div class="col-12">

<svg class="matrix-svg" version="1.1" viewbox="0 0 500 500" x="0" y="0" xml:space="preserve" fill="#000" style=

"position:absolute;top:-100px;right:-180px;opacity:0.4; transform: rotate(-10deg)!important;">

<path d=

"M 261.7,380.3 C 204.7,399.8 154.1,482.7 98.91,458.5 26.64,426.9 13.2,309.8 29.35,232.6 43.76,163.6 101.4,97.37 167.4,72.34 248,41.97 422.1,-2.762 423.4,107.7 424.6,218.1 507.5,272.4 464.3,336.7 425.7,394.2 327,357.9 261.7,380.3 Z">



</path></svg>

</div>



<div class="hs-thumbnail">

<img style="border-radius:15px;" src="https://u.jimcdn.com/cms/o/sfd48c04489a7579f/userlayout/img/hero-section008.jpg?t=1645097141" alt=

"Create a modern Jimdo website with Matrix Themes" />

</div>

</div>

</div>



<div class="is-fullwidth wave-container">

<!-- Your wave goes here... -->

<svg class="matrix-svg" version="1.1" viewbox="0 0 1440 200" x="0" y="0" xml:space="preserve" fill="#fff">

<path fill="#fff" fill-opacity="1" d="M0,160L1440,32L1440,320L0,320Z">

</path></svg>

</div>

</div>

<style>
    /*<![CDATA[*/
.wave-container {
   position: relative;
   background: transparent;
   text-align: center;
   overflow: hidden;
   margin-bottom: -30px;
}

.wave-container > svg {
   display: block;
}
    /*]]>*/
</style><div class="hs-fullwidth rel bg-primary color-white link-white cc-clearover is-matrix-block has-no-gutter">
    <div class="inner m-padding__ is--flex" style="padding:50px 0;">
        <div class="col-6 is-anim-block">
            <h3 style="font-size:40px;">
                Bring your ideas to life
            </h3>

            <p>
                Everything that you dreamed of can be brought to life exactly at the moment when you decide to win.
            </p>
            <br />
            <a class="hs-button weight-500 ghost-white bg-round" style="padding: 18px 25px;" href="https://www.matrix-themes.com/templates/" target="">Read more<svg viewbox="0 0 24 24" focusable=
            "false" role="presentation" class="is-arrow">
            <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
            </path></svg></a>
        </div>
    </div>

    <div class="is-fullwidth wave-container">
        <!-- Your wave goes here... -->
        <svg class="matrix-svg" version="1.1" viewbox="0 0 1440 300" x="0" y="0" xml:space="preserve" fill="#fff">
        <path fill="#ffffff" fill-opacity="1" d=
        "M0,128L80,138.7C160,149,320,171,480,160C640,149,800,107,960,85.3C1120,64,1280,64,1360,64L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z">

        </path></svg>
    </div>
</div>

<style>

/*<![CDATA[*/

.img-wave-container {
   position: absolute;
   bottom:0;
   background: transparent;
   text-align: center;
   overflow: hidden;
   margin-bottom: -30px;
}

.img-wave-container > svg {
   display: block;
}

    

/*]]>*/

</style><div class="is-matrix-block h-100 h-mobile is-parallax is--flex is-fullwidth rel no-padding has-no-gutter" style=
"background: url('https://u.jimcdn.com/cms/o/sfd48c04489a7579f/userlayout/img/hero-skew.jpg?t=1645308401') no-repeat center;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner color-white cc-clearover is-anim-block z-1" style="padding:150px 0;z-index:1;">
        <div class="col-10 center-align">
            <h3 style="font-size:40px;">
                Proudly designed for you
            </h3>

            <p>
                Every product we design aims to make your life easier
            </p>
            <br />
            <a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="_top">Read more</a>
        </div>
    </div>

    <div class="is-fullwidth img-wave-container">
        <!-- Your wave goes here... -->
        <svg class="matrix-svg" version="1.1" viewbox="0 0 1440 350" x="0" y="0" xml:space="preserve" fill="#fff">
        <path fill="#fff" fill-opacity="1" d="M0,96L120,133.3C240,171,480,245,720,245.3C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z">
        </path></svg>
    </div>
</div>

<style>

/*<![CDATA[*/

.img-wave-container {
   position: absolute;
   bottom:0;
   background: transparent;
   text-align: center;
   overflow: hidden;
   margin-bottom: -30px;
}

.img-wave-container > svg {
   display: block;
}

    

/*]]>*/

</style><div class="is-matrix-block h-100 h-mobile is-parallax is--flex is-fullwidth rel no-padding has-no-gutter" style=
"background: url('https://u.jimcdn.com/cms/o/sfd48c04489a7579f/userlayout/img/hero-skew.jpg?t=1645308401') no-repeat center;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner color-white cc-clearover is-anim-block z-1" style="padding:150px 0;z-index:1;">
        <div class="col-10 left-align">
            <h3 style="font-size:40px;">
                Proudly designed for you
            </h3>

            <p>
                Every product we design aims to make your life easier
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Read more</a>
        </div>
    </div>

    <div class="is-fullwidth img-wave-container">
        <!-- Your wave goes here... -->
        <svg class="matrix-svg" version="1.1" viewbox="0 0 1440 340" x="0" y="0" xml:space="preserve" fill="#fff">
        <path fill="#fff" fill-opacity="1" d="M0,64L480,192L960,96L1440,160L1440,320L960,320L480,320L0,320Z">
        </path></svg>
    </div>
</div>