<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<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/s758c0057fdaf08b1/userlayout/img/bg-fluid04.jpg?t=1706083689') 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" style="padding:250px 0;">
        <div class="col-8 center-align is-anim-block">
            <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>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<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/s758c0057fdaf08b1/userlayout/img/bg-fluid04.jpg?t=1706083689') 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" style="padding:250px 0;">
        <div class="col-6 right-align text-right is-anim-block">
            <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>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<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/s758c0057fdaf08b1/userlayout/img/bg-fluid04.jpg?t=1706083689') 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" style="padding:250px 0;">
        <div class="col-6 center-align is-anim-block color-white opacity-6 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>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<div class="is-matrix-block is-fullwidth bg-primary-light">
    <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/s758c0057fdaf08b1/userlayout/img/bg-fluid03.jpg?t=1706083697" alt="Matrix Themes" />
        </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>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<div class="is-matrix-block is-fullwidth bg-primary-light 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/s758c0057fdaf08b1/userlayout/img/bg-fluid02.jpg?t=1706083709" alt="Matrix Themes" />
        </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="Matrix Themes" />
        <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="Matrix Themes" />
        <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="Matrix Themes" />
        <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="is-matrix-block hs-fullwidth bg-primary color-white link-white cc-clearover">
    <div class="inner m-padding" style="padding:100px 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="is-matrix-block hs-fullwidth bg-primary color-white link-white cc-clearover">
    <div class="max-inner m-padding" style="padding:100px 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="is-matrix-block hs-fullwidth bg-primary-light cc-clearover">
    <div class="max-inner col-8 m-padding is-anim-block" style="padding:100px 0;">
        <h3 style="font-size:40px;text-align:center;">
            Our features
        </h3>
        <br />
        <!-- feature 1 -->

        <div class="is-matrix is-flex" style="margin-bottom:30px;">
            <div class="fa fa-check fa-2x bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
            </div>

            <div class="add-left-20" style="">
                <h3>
                    High quality
                </h3>

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

        <div class="is-matrix is-flex" style="margin-bottom:30px;">
            <div class="fa fa-check fa-2x bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
            </div>

            <div class="add-left-20" style="">
                <h3>
                    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 -->
        <!-- feature 3 -->

        <div class="is-matrix is-flex" style="margin-bottom:30px;">
            <div class="fa fa-check fa-2x bg-primary color-white br500" style="display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
            </div>

            <div class="add-left-20" style="">
                <h3>
                    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 hs-fullwidth bg-primary-light cc-clearover">
    <div class="max-inner col-8 m-padding is-anim-block" style="padding:100px 0;">
        <h3 style="font-size:40px;text-align:center;">
            Our features
        </h3>
        <br />
        <!-- feature 1 -->

        <div class="is-matrix is-flex bg-primary color-white br10 add-20" style="margin-bottom:30px;">
            <div class="fa fa-check fa-2x br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
            </div>

            <div class="add-left-20" style="">
                <h3>
                    High quality
                </h3>

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

        <div class="is-matrix is-flex bg-primary color-white br10 add-20" style="margin-bottom:30px;">
            <div class="fa fa-check fa-2x br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
            </div>

            <div class="add-left-20" style="">
                <h3>
                    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 -->
        <!-- feature 3 -->

        <div class="is-matrix is-flex bg-primary color-white br10 add-20" style="margin-bottom:30px;">
            <div class="fa fa-check fa-2x br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
            </div>

            <div class="add-left-20" style="">
                <h3>
                    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 is-fullwidth bg-primary color-white">
    <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/s758c0057fdaf08b1/userlayout/img/bg-fluid03.jpg?t=1706083697" alt="Matrix Themes" />
        </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 style="font-size:40px;text-align:left;">
                    Our features
                </h3>
                <br />
                <!-- feature 1 -->

                <div class="is-matrix is-flex" style="margin-bottom:30px;">
                    <div class="fa fa-check fa-2x bg-white br500" style="color:#000;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
                    </div>

                    <div class="add-left-20" style="">
                        <h3>
                            High quality
                        </h3>

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

                <div class="is-matrix is-flex" style="margin-bottom:30px;">
                    <div class="fa fa-check fa-2x bg-white br500" style="color:#000;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
                    </div>

                    <div class="add-left-20" style="">
                        <h3>
                            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 -->
                <!-- feature 3 -->

                <div class="is-matrix is-flex" style="margin-bottom:30px;">
                    <div class="fa fa-check fa-2x bg-white br500" style="color:#000;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
                    </div>

                    <div class="add-left-20" style="">
                        <h3>
                            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>
</div>

<div class="is-matrix-block hs-fullwidth bg-primary-light cc-clearover">
    <div class="inner m-padding" style="padding:100px 0;">
        <div class="center-align col-8 is-anim-block">
            <div class="is-matrix is-card br10 cc-clearover" style="border: 3px solid;margin-top:10px;">
                <div class="left-align col-12 add-10 cc-box">
                    <div class="fa fa-quote-left fa-5x bg-primary-light" style="margin-top:-30px;">
                    </div>

                    <h3>
                        <span style="font-size:40px;">This is a quote title</span>
                    </h3>

                    <p>
                        Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum
                        dapibus nunc ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Etiam imperdiet imperdiet orci.
                    </p>

                    <p class="add-top-10 size-13">
                        - Quote ( Style 01 )
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

               <div class="is-matrix-block is-parallax is--flex is-fullwidth rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-fluid04.jpg?t=1706083689') 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 color-white col-12 m-padding is-anim-block" style="padding:100px 0;">
        <div class="is-matrix is-card br10 cc-clearover">
            <div class="left-align col-6 add-10 cc-box">
                <div class="fa fa-quote-left fa-5x" style="opacity:0.2;font-size:290px;position:absolute;top:-100px;">
                </div>

                <h3>
                    <span style="font-size:40px;">This is a quote title</span>
                </h3>

                <p>
                    Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum
                    dapibus nunc ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Etiam imperdiet imperdiet orci.
                </p>

                <p class="add-top-10 size-13">
                    - Quote ( Style 03 )
                </p>
            </div>
        </div>
    </div>
</div>

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

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

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

                <div style="display:flex;">
                    <div class="m-btm-holder">
                        <p class="size-16">
                            Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                        </p>
                    </div>

                    <div class="m-price-holder">
                        <h3 style="font-size:20px;font-weight:600;">
                            $21
                        </h3>
                    </div>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

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

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

                <div style="display:flex;">
                    <div class="m-btm-holder">
                        <p class="size-16">
                            Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                        </p>
                    </div>

                    <div class="m-price-holder">
                        <h3 style="font-size:20px;font-weight:600;">
                            $21
                        </h3>
                    </div>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

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

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

                <div style="display:flex;">
                    <div class="m-btm-holder">
                        <p class="size-16">
                            Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                        </p>
                    </div>

                    <div class="m-price-holder">
                        <h3 style="font-size:20px;font-weight:600;">
                            $21
                        </h3>
                    </div>
                </div>
            </div>
            <!--  end menu item -->
        </div>
    </div>
</div>

<div class="is-matrix-block is-parallax is--flex is-fullwidth rel no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-fluid04.jpg?t=1706083689') 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 color-white m-padding is-anim-block" style="padding:100px 0;">
        <div class="col-6 center-align is-anim-block">
            <h3 style="font-size:40px; padding-bottom:30px;">
                Our menu
            </h3>

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

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

                <div style="display:flex;">
                    <div class="m-btm-holder">
                        <p class="size-16">
                            Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                        </p>
                    </div>

                    <div class="m-price-holder">
                        <h3 style="font-size:20px;font-weight:600;">
                            $21
                        </h3>
                    </div>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

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

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

                <div style="display:flex;">
                    <div class="m-btm-holder">
                        <p class="size-16">
                            Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                        </p>
                    </div>

                    <div class="m-price-holder">
                        <h3 style="font-size:20px;font-weight:600;">
                            $21
                        </h3>
                    </div>
                </div>
            </div>
            <!--  end menu item -->
            <!-- menu item -->

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

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

                <div style="display:flex;">
                    <div class="m-btm-holder">
                        <p class="size-16">
                            Fresh herbs, Spanish onion, roasted peppers, spinach &amp; fetta served with brioche
                        </p>
                    </div>

                    <div class="m-price-holder">
                        <h3 style="font-size:20px;font-weight:600;">
                            $21
                        </h3>
                    </div>
                </div>
            </div>
            <!--  end menu item -->
        </div>
    </div>
</div>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<div class="is-fullwidth rel h-100 jarallax is--flex no-padding is-matrix-block">
    <img class="jarallax-img" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-fluid05.jpg?t=1706083680" alt="Matrix themes" />
    <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 left-align is-anim-block">
            <h3 style="font-size:40px;font-weight:600;">
                Create something great
            </h3>

            <p>
                The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Portfolio</a> <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="_top">Contact</a>
        </div>
    </div>
</div>

<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
    <div class="rel jarallax is--flex no-padding is-matrix">
        <img class="jarallax-img" src="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-fluid05.jpg?t=1706083680" alt="Matrix themes" />
        <div class="inner rel m-padding cc-clearover cc-box" style="padding:150px 0;">
            <div class="col-6 m-col-10 left-align bg-white add-20 has-shadow is-anim-block" style="margin-left:-20px;">
                <h3 style="font-size:40px;font-weight:600;">
                    Create something great
                </h3>

                <p>
                    The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
                </p>
                <br />
                <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Portfolio</a> <a class="hs-button ghost-dark" href="http://www.matrix-themes.com/" target="_top">Contact</a>
            </div>
        </div>
    </div>
</div>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->
<!-- Use the class 'has-transparent-header' to make a transparent header -->

<div class="is-matrix-block hs-fullwidth is-rel cc-clearover">
    <div class="mask-section hs-fullwidth bg-primary-light h-75 absolute-top-left m-absolute m-height-25" style="width:100%;">
    </div>

    <div class="max-inner" style="padding:100px 0 0;">
        <div class="is-matrix is-card is-reverse">
            <div class="is-flex is-flex-block cc-clearover">
                <div class="col-5 add-20 cc-box has-mobile-fullwidth-btn">
                    <h3 style="font-size:40px;">
                        Online Coaching &amp; Mentoring
                    </h3>

                    <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.
                    </p>
                    <br />
                    <a class="hs-button" href="https://www.matrix-themes.com/" target="">Let's talk</a>
                </div>

                <div class="col-7 wow is-folded-right-img">
                    <img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-coaching03.jpg" alt="Matrix Themes" />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->
<!-- Use the class 'has-transparent-header' to make a transparent header -->

<div class="is-matrix-block hs-fullwidth is-rel cc-clearover">
    <div class="mask-section hs-fullwidth bg-primary-light h-75 absolute-top-left m-absolute m-height-50" style="width:100%;">
    </div>

    <div class="max-inner center-align" style="padding:100px 0 0;">
        <h3 style="font-size:40px;">
            Online Coaching &amp; Mentoring
        </h3>

        <p>
            Take a minute to write an introduction that is short, sweet, and to the point.
        </p>
        <br />
        <a class="hs-button small-btn" style="min-width:200px;" href="https://www.matrix-themes.com/" target="">Let's talk</a><br />
        <br />

        <div class="col-12 center-align wow is-folded-blur">
            <img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-coaching01.jpg" alt="Matrix Themes" />
        </div>
    </div>
</div>

<style>
    /*<![CDATA[*/
    @media only screen and (max-width: 745px) {
.text-overlay {
            margin-left:0!important;
  }
}
    /*]]>*/
</style><!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<div class="hs-fullwidth bg-white rel cc-clearover is-matrix-block">
    <div class="mask-section  bg-primary-light h-75 absolute-top-left m-absolute m-height-25" style="width:50%;">
    </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/sbe4c3a3d2b0ef479/userlayout/img/bg-coaching02.jpg" />
                </div>

                <div class="is--flex col-5 m-padding cc-box" style="padding:5px;">
                    <div class="has-mobile-fullwidth-btn" style="max-width:800px; margin:0 auto;">
                        <div class="text-overlay wow animate__animated animate__fadeInUp" style="margin-left:-20%;">
                            <h3 style="weight-600;font-size:40px;">
                                Online Coaching &amp; Mentoring
                            </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.
                            </p>
                            <br />
                            <a class="hs-button small-btn ghost-dark" style="padding: 18px 45px!important;" href="http://www.matrix-themes.com/templates/" target="">Let's talk<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>

<div class="is-fullwidth wave-container is-top-wave bg-primary" style="margin-bottom:0px;">
    <!-- Your wave goes here... -->
    <svg class="matrix-svg is-rotated is-rel" 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 class="hs-fullwidth rel bg-primary color-white link-white cc-clearover is-matrix-block">
    <div class="inner m-padding__" style="padding:100px 0;">
        <div class="col-8 center-align 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" 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 is-btm-wave bg-primary" style="margin-bottom:-30px;">
        <!-- Your wave goes here... -->
        <svg class="matrix-svg is-rel" 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>

<div class="is-fullwidth wave-container is-top-wave bg-primary" style="margin-bottom:0px;">
    <!-- Your wave goes here... -->
    <svg class="matrix-svg is-rotated is-rel pull-top" 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 class="hs-fullwidth rel bg-primary color-white link-white cc-clearover is-matrix-block">
    <div class="inner m-padding__" style="padding:100px 0;">
        <div class="col-8 center-align 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" 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 is-btm-wave bg-primary" style="margin-bottom:-30px;">
        <!-- Your wave goes here... -->
        <svg class="matrix-svg is-rel pull-btm" 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>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<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/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 is-btm-wave bg-transparent" style="margin-bottom:-10px;">
        <!-- Your wave goes here... -->
        <svg class="matrix-svg is-rel" 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>

<!-- Use the class 'has-no-gutter' to remove the space between the header and content sections -->

<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/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 bg-round" href="http://www.matrix-themes.com/" target="_top">Read more</a>
        </div>
    </div>

    <div class="is-fullwidth img-wave-container is-btm-wave bg-transparent" style="margin-bottom:-10px;">
        <!-- Your wave goes here... -->
        <svg class="matrix-svg is-rel pull-btm" 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>